index.html

---
title: Home
layout: default
footer_script_include: index_footer_scripts.html
github_config_include: github-activity-scripts.html
additional_script_include: homepage-github-activity.html
hide_default_heading: true
---

<!-- Hero Section -->
<div class="hero-section bg-primary text-white py-5 mb-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-8">
        <h1 class="display-4 fw-bold mb-3">
          <i class="fab fa-github me-3"></i>
          OpenElections
        </h1>
        <p class="lead mb-4">
          Certified election results. For everyone.
        </p>
        <p class="mb-4">
          Track real-time development activity and explore our open-source election data projects.
        </p>
        <div class="d-flex gap-3 flex-wrap align-items-end">
          <a href="https://github.com/openelections" class="btn btn-light btn-lg" target="_blank" rel="noopener">
            <i class="fab fa-github me-2"></i>View on GitHub
          </a>
          <div class="state-selector">
            <label for="hero-state-select" class="form-label text-white mb-1 small">Browse by State:</label>
            <div class="input-group">
              <select class="form-select form-select-lg" id="hero-state-select">
                <option value="">Select a State</option>
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NV">Nevada</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WA">Washington</option>
                <option value="WV">West Virginia</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>
              </select>
              <button class="btn btn-outline-light btn-lg" type="button" id="browse-state-btn" disabled>
                <i class="fas fa-arrow-right"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 text-center">
        <div class="hero-stats mt-4 mt-lg-0">
          <div class="row g-3">
            <div class="col-6">
              <div class="bg-white bg-opacity-10 rounded-3 p-3">
                <h3 class="mb-1" id="hero-repos">
                  <div class="spinner-border spinner-border-sm" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </h3>
                <small class="opacity-75">Repositories</small>
              </div>
            </div>
            <div class="col-6">
              <div class="bg-white bg-opacity-10 rounded-3 p-3">
                <h3 class="mb-1" id="hero-commits">
                  <div class="spinner-border spinner-border-sm" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </h3>
                <small class="opacity-75">Recent Commits</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Main Content -->
<div class="container">
  
  <!-- Activity Stats Cards -->
  <div class="row mb-5">
    <div class="col-12">
      <h2 class="text-center mb-4">Development Activity</h2>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100 border-0 shadow-sm">
        <div class="card-body text-center p-4">
          <div class="text-primary mb-3">
            <i class="fas fa-code-branch fa-2x"></i>
          </div>
          <h3 class="card-title text-primary mb-1" id="total-repos">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </h3>
          <p class="card-text text-muted mb-0">Total Repositories</p>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100 border-0 shadow-sm">
        <div class="card-body text-center p-4">
          <div class="text-info mb-3">
            <i class="fas fa-code fa-2x"></i>
          </div>
          <h3 class="card-title text-info mb-1" id="recent-commits">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </h3>
          <p class="card-text text-muted mb-0">Recent Commits</p>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100 border-0 shadow-sm">
        <div class="card-body text-center p-4">
          <div class="text-success mb-3">
            <i class="fas fa-users fa-2x"></i>
          </div>
          <h3 class="card-title text-success mb-1" id="active-contributors">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </h3>
          <p class="card-text text-muted mb-0">Active Contributors</p>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100 border-0 shadow-sm">
        <div class="card-body text-center p-4">
          <div class="text-warning mb-3">
            <i class="fas fa-clock fa-2x"></i>
          </div>
          <h3 class="card-title text-warning mb-1" id="last-updated">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </h3>
          <p class="card-text text-muted mb-0">Last Updated</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Search and Filters -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label for="activity-search" class="form-label fw-bold">Search Activity</label>
              <div class="input-group">
                <span class="input-group-text">
                  <i class="fas fa-search"></i>
                </span>
                <input type="text" 
                       class="form-control" 
                       id="activity-search" 
                       placeholder="Search commits, repositories, or contributors...">
              </div>
            </div>
            <div class="col-md-3">
              <label for="repo-filter" class="form-label fw-bold">Repository</label>
              <select class="form-select" id="repo-filter">
                <option value="">All Repositories</option>
              </select>
            </div>
            <div class="col-md-3">
              <label for="timeframe-filter" class="form-label fw-bold">Timeframe</label>
              <select class="form-select" id="timeframe-filter">
                <option value="7">Last 7 days</option>
                <option value="30">Last 30 days</option>
                <option value="90">Last 3 months</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Activity Content -->
  <div class="row">
    <div class="col-12">
      <!-- Loading State -->
      <div id="activity-loading" class="text-center py-5">
        <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;" role="status">
          <span class="visually-hidden">Loading GitHub activity...</span>
        </div>
        <h4 class="text-muted">Loading recent activity...</h4>
        <p class="text-muted">Fetching the latest commits and updates from OpenElections repositories.</p>
      </div>

      <!-- Error State -->
      <div id="activity-error" class="d-none">
        <div class="card border-0 shadow-sm">
          <div class="card-body text-center py-5">
            <div class="text-warning mb-3">
              <i class="fas fa-exclamation-triangle fa-3x"></i>
            </div>
            <h4 class="text-warning mb-3">Unable to Load GitHub Activity</h4>
            <p class="text-muted mb-4">We're having trouble loading the latest GitHub activity. This might be due to:</p>
            <ul class="list-unstyled text-muted mb-4">
              <li><i class="fas fa-circle fa-xs me-2"></i>GitHub API rate limiting</li>
              <li><i class="fas fa-circle fa-xs me-2"></i>Network connectivity issues</li>
              <li><i class="fas fa-circle fa-xs me-2"></i>Temporary GitHub service issues</li>
              <li><i class="fas fa-circle fa-xs me-2"></i>Missing GitHub API token configuration</li>
            </ul>
            <div class="d-flex gap-3 justify-content-center">
              <button class="btn btn-warning" onclick="retryLoadActivity()">
                <i class="fas fa-redo me-2"></i> Retry Loading
              </button>
              <a href="https://github.com/openelections" class="btn btn-primary" target="_blank">
                <i class="fab fa-github me-2"></i> View on GitHub
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Feed -->
      <div id="activity-content" class="d-none">
        <div class="card border-0 shadow-sm">
          <div class="card-header bg-white border-bottom">
            <div class="d-flex justify-content-between align-items-center">
              <h3 class="mb-0">
                <i class="fas fa-code-branch me-2 text-primary"></i>Recent Development Activity
              </h3>
              <a href="/github-activity/" class="btn btn-outline-primary">
                <i class="fas fa-external-link-alt me-2"></i>View Full Activity
              </a>
            </div>
          </div>
          <div class="card-body p-0">
            <div id="activity-list">
              <!-- Activity items will be populated here -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Links Section -->
  <div class="row mt-5 pt-5">
    <div class="col-12">
      <h2 class="text-center mb-5">Explore OpenElections</h2>
    </div>
    <div class="col-lg-4 mb-4">
      <div class="card h-100 border-0 shadow-sm">
        <div class="card-body text-center p-4">
          <div class="text-primary mb-3">
            <i class="fas fa-map-marked-alt fa-3x"></i>
          </div>
          <h5 class="card-title">Browse by State</h5>
          <p class="card-text text-muted">Explore certified election results from your state.</p>
          <div class="mb-3">
            <select class="form-select" id="quick-state-select">
              <option value="">Select a State</option>
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="HI">Hawaii</option>
              <option value="ID">Idaho</option>
              <option value="IL">Illinois</option>
              <option value="IN">Indiana</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NV">Nevada</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NM">New Mexico</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="ND">North Dakota</option>
              <option value="OH">Ohio</option>
              <option value="OK">Oklahoma</option>
              <option value="OR">Oregon</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="SD">South Dakota</option>
              <option value="TN">Tennessee</option>
              <option value="TX">Texas</option>
              <option value="UT">Utah</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WA">Washington</option>
              <option value="WV">West Virginia</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
            </select>
          </div>
          <button class="btn btn-primary" id="quick-browse-btn" disabled>Browse State Results</button>
        </div>
      </div>
    </div>
    <div class="col-lg-4 mb-4">
      <div class="card h-100 border-0 shadow-sm">
        <div class="card-body text-center p-4">
          <div class="text-info mb-3">
            <i class="fas fa-users fa-3x"></i>
          </div>
          <h5 class="card-title">Get Involved</h5>
          <p class="card-text text-muted">Join our community of volunteers working to make election data accessible.</p>
          <a href="/get-involved/" class="btn btn-info">Learn More</a>
        </div>
      </div>
    </div>
    <div class="col-lg-4 mb-4">
      <div class="card h-100 border-0 shadow-sm">
        <div class="card-body text-center p-4">
          <div class="text-success mb-3">
            <i class="fas fa-question-circle fa-3x"></i>
          </div>
          <h5 class="card-title">FAQ</h5>
          <p class="card-text text-muted">Find answers to common questions about OpenElections and our data.</p>
          <a href="/faq/" class="btn btn-success">Read FAQ</a>
        </div>
      </div>
    </div>
  </div>

</div>

<script>
function setupStateDropdown(selectId, buttonId) {
  const select = document.getElementById(selectId);
  const button = buttonId ? document.getElementById(buttonId) : null;
  if (!select) return;
  select.addEventListener('change', function() {
    const abbr = select.value;
    if (button) button.disabled = !abbr;
    if (abbr) {
      window.location.href = `/state/?abbr=${abbr}`;
    }
  });
  if (button) {
    button.addEventListener('click', function() {
      const abbr = select.value;
      if (abbr) {
        window.location.href = `/state/?abbr=${abbr}`;
      }
    });
  }
}
setupStateDropdown('hero-state-select', 'browse-state-btn');
setupStateDropdown('quick-state-select', 'quick-browse-btn');
</script>