<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Neocities Site</title>
  <meta name="description" content="A clean, fast, responsive starter for a Neocities website." />
  <meta property="og:title" content="My Neocities Site" />
  <meta property="og:description" content="A clean, fast, responsive starter for a Neocities website." />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="/banner.png" />
  <meta name="theme-color" content="#0ea5e9" />
  <link rel="icon" href="/favicon.ico" />
  <style>
    /* Reset & theme (same as before) */
    *,*::before,*::after{box-sizing:border-box}
    body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
    ul[role="list"],ol[role="list"]{list-style:none}
    html:focus-within{scroll-behavior:smooth}
    body{min-height:100vh;text-rendering:optimizeLegibility;line-height:1.6}
    img,picture{max-width:100%;display:block}
    input,button,textarea,select{font:inherit}

    :root{
      --bg: #0b1020;
      --card: #111729;
      --muted: #7a8aa0;
      --text: #e6edf3;
      --brand: #0ea5e9;
      --brand-2: #22d3ee;
      --border: #1e293b;
      --radius: 16px;
      --shadow: 0 10px 30px rgba(2,8,23,.35);
    }

    body{background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";}

    /* Loading screen */
    #loading{
      position:fixed; inset:0; background:var(--bg); color:var(--text);
      display:flex; align-items:center; justify-content:center;
      flex-direction:column; z-index:9999;
    }
    #loading pre{font-size:18px; line-height:1.2; margin-bottom:20px; text-align:center;}
    #loading p{color:var(--muted)}

    /* Hide main until loaded */
    #site-wrapper{display:none}
      /* ==== Background for main page ==== */
    #site-wrapper{min-height:100vh; background:url('background.gif') center/cover no-repeat fixed; position:relative}
    #site-wrapper::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); pointer-events:none}
    #site-wrapper > *{position:relative; z-index:1}

    /* Glassy cards for readability on dark bg */
    :root{ --card-rgba: rgba(17,23,41,.78); }
    .hero-card,.card,.about .box{background:var(--card-rgba)}
  </style>
</head>
<body>
  <!-- Loading screen -->
  <div id="loading">
    <pre>
    )
   (
 ()-()
_(o o)_  
 /\o/\,
    </pre>
    <p>Press Enter to continue...</p>
  </div>

  <!-- Wrap the whole site for hide/show -->
  <div id="site-wrapper">
    <!-- ===== NAVBAR ===== -->
    <header>
      <nav class="container nav" id="nav">
        <a class="logo" href="#">
          <span class="logo-badge" aria-hidden="true">
            <svg viewBox="0 0 24 24" role="img" aria-label="spark">
              <path d="M12 2l2.2 6.7h7L15.5 13l2.2 7L12 16.6 6.3 20l2.2-7L2.8 8.7h7L12 2z"/>
            </svg>
          </span>
          <span>My Neocities Site</span>
        </a>
        <button class="menu-btn" aria-label="Open menu" aria-expanded="false" aria-controls="menu" onclick="toggleMenu()">
          <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
        </button>
        <ul id="menu" role="list">
          <li><a href="#home" aria-current="page">Home</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <!-- ===== HERO ===== -->
    <main id="home" class="hero">
      <div class="container wrap">
        <div>
          <span class="badge">Welcome to <b>Neocities</b></span>
          <h1>Clean, fast, and easy to edit.</h1>
          <p class="lede">This starter is a single HTML file with built‑in styles and a tiny script. Perfect for quick publishing on Neocities. Edit the text, swap images, and you're live.</p>
          <div class="cta">
            <a class="btn primary" href="#projects">View Projects</a>
            <a class="btn ghost" href="#contact">Get in touch</a>
          </div>
        </div>
        <div class="hero-card">
          <img src="https://picsum.photos/960/520" alt="Sample banner image" width="960" height="520" loading="lazy" />
        </div>
      </div>
    </main>

    <!-- (other sections unchanged from before: Projects, About, Contact, Footer) -->
     <!-- ===== PROJECTS ===== -->
  <section id="projects">
    <div class="container">
      <h2 class="section-title">Projects</h2>
      <p class="muted" style="margin-bottom:14px">Replace these with your own. Each card can link out to a page or file you upload to Neocities.</p>
      <div class="grid">
        <article class="card">
          <span class="tag">HTML</span>
          <h3>Neocities Starter</h3>
          <p>A minimal, responsive site in a single file. Great for simple portfolios or link hubs.</p>
          <div class="actions">
            <a class="btn ghost" href="#">Read more</a>
            <a class="btn" style="border-color:var(--brand)" href="#">Open</a>
          </div>
        </article>
        <article class="card">
          <span class="tag">CSS</span>
          <h3>Theme Variations</h3>
          <p>Change the colors in <code>:root</code> and keep the layout. Try a pastel palette or neon.</p>
          <div class="actions">
            <a class="btn ghost" href="#">Read more</a>
            <a class="btn" style="border-color:var(--brand)" href="#">Open</a>
          </div>
        </article>
        <article class="card">
          <span class="tag">JS</span>
          <h3>Tiny Enhancements</h3>
          <p>Progressively enhance with small scripts, like this mobile menu and smooth scrolling.</p>
          <div class="actions">
            <a class="btn ghost" href="#">Read more</a>
            <a class="btn" style="border-color:var(--brand)" href="#">Open</a>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ===== ABOUT ===== -->
  <section id="about">
    <div class="container about">
      <div class="box">
        <h2 class="section-title">About Me</h2>
        <p class="muted">Write a short bio here. Who are you? What do you like to build? Keep it friendly and concise.</p>
      </div>
      <div class="box">
        <h2 class="section-title">Site Info</h2>
        <ul class="muted">
          <li>Single-file HTML for easy upload</li>
          <li>Responsive grid and cards</li>
          <li>Accessible colors and contrast</li>
          <li>Zero dependencies — just HTML/CSS/JS</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- ===== CONTACT ===== -->
  <section id="contact">
    <div class="container">
      <h2 class="section-title">Contact</h2>
      <p class="muted">Drop a line via your preferred platform:</p>
      <div class="socials" style="margin-top:10px">
        <a href="mailto:you@example.com" aria-label="Email">
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
        </a>
        <a href="https://neocities.org/" target="_blank" rel="noreferrer" aria-label="Neocities">
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M3 3h18v18H3z"/></svg>
        </a>
        <a href="#" aria-label="GitHub">
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.3-1.8-1.3-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.3 1.8 1.3 1 1.8 2.6 1.3 3.2 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.6-1.4-5.6-6.1 0-1.3.5-2.4 1.3-3.2-.1-.3-.6-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.9.1 3.2.8.8 1.3 1.9 1.3 3.2 0 4.7-2.9 5.8-5.6 6.1.5.4.9 1.2.9 2.5v3.7c0 .3.2.7.8.6A12 12 0 0012 .5z"/></svg>
        </a>
      </div>
    </div>
  </section>

  <!-- ===== FOOTER ===== -->
  <footer>
    <div class="container footer-grid">
      <small>© <span id="year"></span> Your Name</small>
      <small>Built with ❤ and uploaded to Neocities</small>
    </div>
  </footer>
  </div>

  <script>
    // Loading screen logic
    document.addEventListener('keydown', function(e){
      if(e.key === 'Enter'){
        document.getElementById('loading').style.display='none';
        document.getElementById('site-wrapper').style.display='block';
      }
    });

    // Menu toggle
    function toggleMenu(){
      const nav = document.getElementById('nav');
      const btn = nav.querySelector('.menu-btn');
      const open = nav.classList.toggle('open');
      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
    }

    // Year stamp
    const yearEl = document.getElementById('year');
    if(yearEl) yearEl.textContent = new Date().getFullYear();
  </script>
</body>
</html>
