vote-zoo/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zoo Labs Governance</title>
  <meta name="description" content="Vote on Zoo Labs proposals and shape the future of decentralized AI research.">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦁</text></svg>">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      background: #0a0a0a;
      color: #e5e5e5;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .container {
      max-width: 600px;
      text-align: center;
    }

    .logo {
      font-size: 4rem;
      margin-bottom: 1.5rem;
    }

    h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .subtitle {
      font-size: 1.25rem;
      color: #a3a3a3;
      margin-bottom: 2rem;
      line-height: 1.6;
    }

    .badge {
      display: inline-block;
      padding: 0.5rem 1.5rem;
      background: rgba(16, 185, 129, 0.1);
      border: 1px solid rgba(16, 185, 129, 0.3);
      border-radius: 9999px;
      color: #10b981;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 3rem;
    }

    .links {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 2rem;
    }

    .link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 1rem 2rem;
      background: #171717;
      border: 1px solid #262626;
      border-radius: 0.75rem;
      color: #e5e5e5;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.2s ease;
    }

    .link:hover {
      border-color: #10b981;
      background: rgba(16, 185, 129, 0.05);
    }

    .link.primary {
      background: #10b981;
      border-color: #10b981;
      color: #0a0a0a;
    }

    .link.primary:hover {
      background: #34d399;
      border-color: #34d399;
    }

    .footer {
      margin-top: 4rem;
      color: #525252;
      font-size: 0.875rem;
    }

    .footer a {
      color: #10b981;
      text-decoration: none;
    }

    .footer a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="logo">🦁</div>
    <h1>Zoo Labs Governance</h1>
    <p class="subtitle">
      Vote on proposals and shape the future of decentralized AI research.
      Community-driven governance for open science.
    </p>
    <span class="badge">Coming Soon</span>

    <div class="links">
      <a href="https://snapshot.org/#/zoolabs.eth" class="link primary" target="_blank" rel="noopener">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M9 12l2 2 4-4"/>
          <path d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c1.66 0 3.21.45 4.54 1.23"/>
        </svg>
        Vote on Snapshot
      </a>
      <a href="https://zips.zoo.ngo" class="link" target="_blank" rel="noopener">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <path d="M14 2v6h6"/>
          <path d="M16 13H8"/>
          <path d="M16 17H8"/>
          <path d="M10 9H8"/>
        </svg>
        View ZIPs (Proposals)
      </a>
      <a href="https://zoo.ngo" class="link" target="_blank" rel="noopener">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"/>
          <path d="M2 12h20"/>
          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
        </svg>
        Zoo Labs Foundation
      </a>
    </div>

    <p class="footer">
      Part of the <a href="https://zoo.ngo">Zoo Labs</a> ecosystem
    </p>
  </div>
</body>
</html>