Blame for static/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="#ffffff">
  <meta name="color-scheme" content="light dark">
  <meta name="description" content="Create polls, share a link, and view your results. Sign in with Hugging Face to create a poll. Anyone can vote.">
  <title>HuggingPolls</title>
  <script src="/static/theme.js"></script>
  <link rel="icon" href="/static/logo.png">
  <link rel="stylesheet" href="/static/style.css">
</head>
<body>
  <a class="skip-link" href="#app">Skip to content</a>
  <header>
    <a class="brand" href="#"><img src="/static/logo.png" alt="">HuggingPolls</a>
    <span class="header-description">Community polls</span>
    <span id="account"></span>
  </header>
  <div class="page-header">
    <div class="project-title">
      <img src="/static/logo.png" alt="Judge Huggy">
      <div><h1>HuggingPolls</h1><p>Create a poll and share it with anyone.</p></div>
    </div>
    <nav aria-label="Poll navigation">
      <a id="new-poll" class="tab" href="#">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M12 8v8M8 12h8"/></svg>
        Create poll
      </a>
      <a id="see-polls" class="tab" href="#see-polls">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
        See polls
      </a>
      <a id="my-polls" class="tab" href="#my-polls">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M5 20V10h3v10M11 20V4h3v16M17 20v-7h3v7"/></svg>
        My polls
      </a>
    </nav>
  </div>
  <main id="app" tabindex="-1" aria-live="polite"></main>
  <footer>
    <p>HuggingPolls is an independent community project. Not affiliated with, endorsed by, or sponsored by Hugging Face.</p>
    <div class="theme-control">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8m-4-4v4"/></svg>
      <label for="theme-select">Theme</label>
      <select id="theme-select" aria-describedby="theme-status">
        <option value="system">System</option>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>
      <span id="theme-status" class="sr-only" role="status"></span>
    </div>
  </footer>
  <div id="toast" role="status" hidden></div>
  <template id="home-template">
    <div class="workspace">
      <section class="create-section">
        <div class="section-heading"><h2>Create a poll</h2><p>Add a question and at least two answer options.</p></div>
        <form id="create-form">
          <div class="label-row"><label for="question">Question <span aria-hidden="true">*</span></label><small id="question-count">0 / 240</small></div>
          <input id="question" maxlength="240" placeholder="What would you like to ask?" aria-describedby="question-count" required>
          <label for="description">Description <small>optional</small></label>
          <textarea id="description" maxlength="2000" placeholder="Add context for voters" rows="3"></textarea>
          <div class="label-row"><label id="options-label">Answer options <span aria-hidden="true">*</span></label><small id="options-count">2&ndash;12 options</small></div>
          <div id="options" role="group" aria-labelledby="options-label"></div>
          <button type="button" id="add-option" class="secondary add-option">+ Add option</button>
          <div class="poll-settings">
            <label for="duration">Voting duration</label>
            <select id="duration" aria-describedby="duration-help">
              <option value="1">1 hour</option>
              <option value="24">1 day</option>
              <option value="72">3 days</option>
              <option value="168" selected>7 days</option>
              <option value="720">30 days</option>
            </select>
            <p id="duration-help" class="subtle">Starts when you create the poll. Voting closes automatically; results stay available.</p>
            <label class="listing-choice" for="listed"><input id="listed" type="checkbox" checked><span><strong>List on See polls</strong><small>Let anyone discover your poll. Turn off to share it only by link.</small></span></label>
          </div>
          <div class="draft-row"><span id="draft-status" class="subtle" role="status"></span><button type="button" id="clear-draft" class="quiet" hidden>Clear draft</button></div>
          <div class="form-bottom"><p id="create-note" class="subtle">Sign in with Hugging Face to create a poll.</p><button class="primary" id="create-button" type="submit">Create poll</button></div>
        </form>
      </section>
      <aside>
        <h3>Discover and share</h3><p>Browse community questions in <a class="text-link" href="#see-polls">See polls</a>, or share a poll using its link. Anyone can vote, with or without an account.</p>
        <h3>Results and expiry</h3><p>Results appear after voting or once a poll closes. Choose how long voting stays open, from 1 hour to 30 days. Creators can view results and export votes at any time.</p>
        <h3>Voting</h3><p>Each voter selects one answer. Guest votes are limited by browser; signed-in votes are also checked by account.</p>
      </aside>
    </div>
  </template>
  <template id="browse-template">
    <div class="page-title browse-title"><div><h1>See polls</h1><p class="subtle">Explore community questions and add your vote. No account needed.</p></div><a class="primary" href="#">+ Create poll</a></div>
    <form id="browse-form" class="browse-filters" role="search" aria-label="Find polls">
      <div class="browse-search"><label for="poll-search">Search polls</label><div class="search-line"><input type="search" id="poll-search" maxlength="240" placeholder="Question, topic, or creator"><button type="submit" class="primary">Search</button></div></div>
      <div><label for="poll-status">Status</label><select id="poll-status"><option value="open">Open for voting</option><option value="closed">Closed &amp; expired</option><option value="all">All polls</option></select></div>
      <div><label for="poll-sort">Sort by</label><select id="poll-sort"><option value="newest">Newest first</option><option value="popular">Most votes</option><option value="ending">Ending soon</option></select></div>
    </form>
    <div class="browse-summary"><p id="browse-count" class="subtle" role="status">Finding polls…</p><button id="clear-filters" class="quiet" hidden>Clear filters</button></div>
    <section id="browse-results" aria-label="Polls" aria-busy="true"></section>
    <nav id="browse-pagination" class="pagination" aria-label="Browse pages" hidden><button id="previous-page" class="secondary">Previous</button><span id="browse-page" class="subtle"></span><button id="next-page" class="secondary">Next</button></nav>
  </template>
  <script src="/static/app.js" defer></script>
</body>
</html>