
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Community Showcase</title>
  <meta name="description" content="A clean, responsive one-page site for a community initiative and short film competition." />
  <style>
    :root {
      /* ==== Customize your non-political color palette here ==== */
      --bg: #0f172a;        /* deep slate */
      --card: #111827;      /* dark gray */
      --text: #e5e7eb;      /* light gray */
      --muted: #9ca3af;     /* medium gray */
      --brand: #14b8a6;     /* teal */
      --accent: #f59e0b;    /* amber/gold */
      --link: #38bdf8;      /* sky blue for links */
      --danger: #ef4444;    /* red for warnings */
      --maxw: 1100px;
      --radius: 14px;
    }

    * { box-sizing: border-box }
    html, body {
      margin: 0; padding: 0;
      background: var(--bg); color: var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.5;
    }
    a { color: var(--link); text-decoration: none }
    a:hover { opacity: .9 }

    /* Layout */
    header { position: sticky; top: 0; z-index: 50;
      background: rgba(17,24,39,0.75); backdrop-filter: saturate(150%) blur(8px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav { max-width: var(--maxw); margin: 0 auto; padding: 12px 20px;
      display: flex; gap: 16px; align-items: center; justify-content: space-between;
    }
    .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
    .logo { width: 28px; height: 28px; border-radius: 7px;
      background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 6px 16px rgba(245,158,11,.35);
    }
    .menu { display: flex; gap: 18px; }
    .menu a { color: var(--text); font-weight: 600; font-size: 14px }

    .section { padding: 70px 20px }
    .container { max-width: var(--maxw); margin: 0 auto }
    .card {
      background: var(--card); border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--radius); padding: 24px;
    }
    h1 { font-size: 42px; line-height: 1.1; margin: 0 0 12px }
    h2 { font-size: 28px; margin: 0 0 12px }
    h3 { margin: 0 0 8px }
    .muted { color: var(--muted) }

    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 16px; border-radius: 12px; font-weight: 700; cursor: pointer;
      border: 1px solid rgba(255,255,255,.12);
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--brand), #0ea5a3); color: white;
      box-shadow: 0 10px 24px rgba(20,184,166,.35);
    }
    .btn-secondary { background: rgba(255,255,255,.08); color: var(--text) }

    .grid { display: grid; gap: 24px }
    .hero-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center }
    .kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 24px }
    .kpi { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px; padding: 18px; text-align: center
    }
    .kpi h3 { margin: 0; font-size: 26px }
    .kpi p { margin: 6px 0 0; color: var(--muted); font-size: 13px }

    .feature { padding: 18px; border: 1px solid rgba(255,255,255,.06);
      border-radius: 12px; background: rgba(17,24,39,.6)
    }

    input, textarea, select {
      width: 100%; padding: 12px 14px; border-radius: 12px;
      border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
      color: var(--text);
    }
    textarea { min-height: 130px; resize: vertical }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

    .footer {
      padding: 24px 20px; border-top: 1px solid rgba(255,255,255,.08);
      text-align: center; color: var(--muted)
    }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

    @media (max-width: 980px) {
      .hero-wrap { grid-template-columns: 1fr }
      .kpis { grid-template-columns: repeat(2,1fr) }
      .menu { display: none }
    }
    @media (max-width: 640px) {
      .kpis { grid-template-columns: 1fr }
    }
  </style>
</head>
<body>

  <!-- Header -->
  <header>
    <nav class="nav" aria-label="Primary">
      <div class="brand">
        <div class="logo" aria-hidden="true"></div>
        <span>Community Showcase</span>
      </div>
      <div class="menu" role="navigation">
        <a href="#about">About</a>
        <a href="#competition">Short Film</a>
        <a href="#flyer-upload">Flyer Upload</a>
        <a href="#contact">Contact</a>
      </div>
    </nav>
  </header>

  <!-- Hero -->
  <section class="section hero" id="home">
    <div class="container hero-wrap">
      <div>
        <span class="muted">✨ Modern • Fast • Responsive</span>
        <h1>Celebrate Stories & Creativity.</h1>
        <p class="muted">A simple, elegant one‑page site for a community initiative and Short Film Competition—lightweight, accessible, and easy to customize in Zoho Sites.</p>
        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:10px">
          <a class="btn btn-primary" href="#competition">Enter the Competition</a>
          <a class="btn btn-secondary" href="#flyer-upload">Upload a Flyer</a>
        </div>
        <div class="kpis">
          <div class="kpi"><h3>~25KB</h3><p>HTML + CSS</p></div>
          <div class="kpi"><h3>100%</h3><p>Responsive</p></div>
          <div class="kpi"><h3>A11y</h3><p>Semantic markup</p></div>
          <div class="kpi"><h3>SEO</h3><p>Meta + structure</p></div>
        </div>
      </div>
      <div>
        <!-- Replace with your image in Zoho Sites or a hosted URL -->
        <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781e?q=80&w=1200&auto=format&fit=crop"
             alt="Audience watching a screening in a community venue" />
      </div>
    </div>
  </section>

  <!-- About -->
  <section id="about" class="section">
    <div class="container">
      <div class="card">
        <h2>About</h2>
        <p class="muted">Share your purpose, values, and the impact you aim to make. Keep it concise and focused on what visitors care about.</p>
        <div class="grid" style="grid-template-columns:1.2fr .8fr">
          <div>
            <p>We’re a community‑driven initiative celebrating local voices through film, art, and storytelling. This site provides a quick way to share updates, showcase work, and invite participation.</p>
            <ul>
              <li>Fast-loading and mobile-friendly</li>
              <li>Simple sections you can customize</li>
              <li>Accessible defaults for screen readers</li>
            </ul>
          </div>
          <div>
            <!-- Replace with your image -->
            <img src="https://images.unsplash.com/photo-1529336953121-b0c61b3f63ff?q=80&w=800&auto=format&fit=crop"
                 alt="Camera and clapboard representing filmmaking" />
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Short Film Competition -->
  <section id="competition" class="section">
    <div class="container">
      <div class="card">
        <h2>Short Film Competition</h2>
        <p class="muted">Invite creators to submit short films that highlight community, culture, and creativity.</p>

        <div class="grid" style="grid-template-columns:1fr 1fr">
          <div>
            <h3>Key Details</h3>
            <ul>
              <li><strong>Eligibility:</strong> Open to residents aged 16+</li>
              <li><strong>Length:</strong> 3–10 minutes (including credits)</li>
              <li><strong>Formats:</strong> MP4/H.264 preferred; min 1080p</li>
              <li><strong>Deadline:</strong> <em>Replace with your date</em></li>
              <li><strong>Prizes:</strong> <em>Replace with your prize tiers</em></li>
            </ul>
            <div style="margin-top:10px">
              <a class="btn btn-primary" href="#flyer-upload">Submit a Flyer</a>
              <a class="btn btn-secondary" href="#contact">Ask a Question</a>
            </div>
          </div>
          <div>
            <h3>Rules & Consent</h3>
            <ol>
              <li>All content must be original and rights‑cleared.</li>
              <li>By submitting, you grant permission to screen and promote your film.</li>
              <li>No hateful, harmful, or unsafe content.</li>
              <li>Provide a brief synopsis (100–150 words).</li>
              <li>Include credits and contact information.</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Flyer Upload -->
  <section id="flyer-upload" class="section">
    <div class="container">
      <div class="card">
        <h2>Upload Your Flyer</h2>
        <p class="muted">Promote your screening or entry with a flyer. Accepted formats: PNG, JPG/JPEG, PDF (max size set in the form).</p>

        <div class="grid" style="grid-template-columns:1fr 1fr">
          <!-- Flyer preview card -->
          <div>
            <div class="feature">
              <h3>Flyer Preview</h3>
              <p class="muted">Upload via the form; preview appears after approval in the gallery.</p>
              <!-- Replace with your own image; or keep placeholder -->
              <img src="https://images.unsplash.com/photo-1529320282365-3f6a8ad300c9?q=80&w=900&auto=format&fit=crop"
                   alt="Example event flyer mockup" />
            </div>
          </div>

          <!-- Zoho Forms Embed -->
          <div>
            <div class="feature">
              <h3>Submit Flyer</h3>
              <p class="muted">Use the embedded form below to upload your flyer. If embedding is disabled, email your flyer using the alternate button.</p>

              <!-- Replace this iframe with your actual Zoho Forms embed code -->
              <!-- In Zoho Forms: Share → Embed → copy iframe -->
              <div style="border:1px dashed rgba(255,255,255,.2); border-radius:12px; padding:10px;">
                <!-- Zoho Forms embed goes here -->
                <iframe src="https://forms.zohopublic.com/your-org/form/FlyerUpload/formperma/XXXXXXXX/embed"
                        width="100%" height="540" frameborder="0" style="background:rgba(255,255,255,.04);"
                        aria-label="Flyer Upload Form">
                </iframe>
              </div>

              <div style="margin-top:12px; display:flex; gap:10px; align-items:center;">
                <a class="btn btn-secondary" href="mailto:submissions@yourdomain.com?subject=Flyer%20Upload&body=Attach%20your%20PNG/JPG/PDF%20flyer.">
                  Email Instead
                </a>
                <span class="muted">Attach PNG/JPG/PDF. Include your name & event title.</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Optional Gallery placeholder -->
        <div style="margin-top:18px">
          <h3>Featured Flyers</h3>
          <p class="muted">Approved flyers will appear here.</p>
          <div class="grid" style="grid-template-columns: repeat(3, 1fr)">
            <div class="feature"><img src="https://via.placeholder.com/600x800?text=Flyer+1" alt="Placeholder flyer 1" /></div>
            <div class="feature"><img src="https://via.placeholder.com/600x800?text=Flyer+2" alt="Placeholder flyer 2" /></div>
            <div class="feature"><img src="https://via.placeholder.com/600x800?text=Flyer+3" alt="Placeholder flyer 3" /></div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- Contact -->
  <section id="contact" class="section">
    <div class="container">
      <div class="card">
        <h2>Contact</h2>
        <p class="muted">Have questions? Send us a message.</p>
        <form onsubmit="return false">
          <div class="form-row">
            <div>
              <label for="name" class="sr-only">Name</label>
              <input id="name" name="name" type="text" placeholder="Your name" required />
            </div>
            <div>
              <label for="email" class="sr-only">Email</label>
              <input id="email" name="email" type="email" placeholder="you@example.com" required />
            </div>
          </div>
          <div style="margin-top:12px">
            <label for="message" class="sr-only">Message</label>
            <textarea id="message" name="message" placeholder="Your message"></textarea>
          </div>
          <div style="margin-top:12px; display:flex; gap:12px; align-items:center">
            <button class="btn btn-primary" type="button"
              onclick="window.location.href='mailto:info@yourdomain.com?subject=Contact&body=' + encodeURIComponent(document.getElementById('message').value)">
              Send Email
            </button>
            <span class="muted">This demo sends via mailto. For full forms, embed Zoho Forms.</span>
          </div>
        </form>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <small>© <span id="year"></span> Community Showcase. All rights reserved.</small>
  </footer>

  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
  </  </script>
</body>
