
                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
							<style>
								body {
									background-color: white; /* Ensure the iframe has a white background */
								}

								
    /* Base reset */
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: 'Segoe UI',sans-serif;
      background: #000;
      color: #eee;
      line-height:1.5;
    }
    a { color: #7ef; text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* Container */
    .container { width: 90%; max-width: 960px; margin: auto; padding: 2rem 0; }

    /* Hero */
    .hero {
      text-align: center;
      padding: 4rem 0;
    }
    .hero h1 {
      font-size: 3rem;
      background: linear-gradient(90deg,#7ef 0%,#0fa 100%);
      -webkit-background-clip: text;
      color: transparent;
    }
    .hero p {
      font-size: 1.2rem;
      margin: 1rem 0 2rem;
    }
    .btn {
      display: inline-block;
      padding: .75rem 1.5rem;
      margin: .5rem;
      background: #0fa;
      color: #111; 
      font-weight: bold;
      border-radius: 4px;
      transition: background .2s;
    }
    .btn:hover { background: #7ef; }

    /* Features grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
    }
    .card {
      background: #1a1a1a;
      border-radius: 6px;
      padding: 1.5rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    }
    .card h3 {
      margin-bottom: .75rem;
      color: #7ef;
    }
    .card ul {
      list-style: disc inside;
      margin-top: .5rem;
    }

    /* Footer */
    footer {
      text-align: center;
      font-size: .9rem;
      padding: 2rem 0;
      color: #888;
    }
    footer code {
      background: #222;
      padding: 2px 4px;
      border-radius: 3px;
      color: #7ef;
    }

    /* Mobile tweaks */
    @media (max-width: 480px) {
      .hero h1 { font-size: 2.4rem; }
      .btn { width: 100%; box-sizing: border-box; text-align:center; }
    }
  

							</style>
                        </head>
                        <body>
                            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Snek – The Ultimate Web Community</title>
  <style>
    /* Base reset */
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: 'Segoe UI',sans-serif;
      background: #111;
      color: #eee;
      line-height:1.5;
    }
    a { color: #7ef; text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* Container */
    .container { width: 90%; max-width: 960px; margin: auto; padding: 2rem 0; }

    /* Hero */
    .hero {
      text-align: center;
      padding: 4rem 0;
    }
    .hero h1 {
      font-size: 3rem;
      background: linear-gradient(90deg,#7ef 0%,#0fa 100%);
      -webkit-background-clip: text;
      color: transparent;
    }
    .hero p {
      font-size: 1.2rem;
      margin: 1rem 0 2rem;
    }
    .btn {
      display: inline-block;
      padding: .75rem 1.5rem;
      margin: .5rem;
      background: #0fa;
      color: #111; 
      font-weight: bold;
      border-radius: 4px;
      transition: background .2s;
    }
    .btn:hover { background: #7ef; }

    /* Features grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
    }
    .card {
      background: #1a1a1a;
      border-radius: 6px;
      padding: 1.5rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    }
    .card h3 {
      margin-bottom: .75rem;
      color: #7ef;
    }
    .card ul {
      list-style: disc inside;
      margin-top: .5rem;
    }

    /* Footer */
    footer {
      text-align: center;
      font-size: .9rem;
      padding: 2rem 0;
      color: #888;
    }
    footer code {
      background: #222;
      padding: 2px 4px;
      border-radius: 3px;
      color: #7ef;
    }

    /* Mobile tweaks */
    @media (max-width: 480px) {
      .hero h1 { font-size: 2.4rem; }
      .btn { width: 100%; box-sizing: border-box; text-align:center; }
    }
  </style>
  <link rel="stylesheet" href="/static/sandbox.css" />
</head>
<body>

  <header class="container hero">
    <h1>Snek</h1>
    <p>The Ultimate Web Community for Devs, Testers &amp; AI Enthusiasts</p>
    <a href="/login.html" class="btn">Login</a>
    <a href="/register.html" class="btn">Register</a>
  </header>

  <main class="container">

    <section id="features" class="grid">
      <div class="card">
        <h3>File Sharing</h3>
        <ul>
          <li>SFTP storage with your Snek credentials</li>
          <li>WebDAV support – same login</li>
        </ul>
      </div>

      <div class="card">
        <h3>Git Repositories</h3>
        <ul>
          <li>Configure repos for any official Git client</li>
          <li>Instant setup, push &amp; pull</li>
        </ul>
      </div>

      <div class="card">
        <h3>AI Powerhouse</h3>
        <ul>
          <li>Chat with free &amp; commercial AIs</li>
          <li>Generate AI-powered images</li>
          <li>Build your own AI bots in &lt;5 minutes (copy/paste example)</li>
        </ul>
      </div>

      <div class="card">
        <h3>Dev &amp; Terminal</h3>
        <ul>
          <li>Ubuntu web terminal in-browser</li>
          <li>Full profile &amp; permissions management</li>
        </ul>
      </div>

      <div class="card">
        <h3>Chat &amp; Media</h3>
        <ul>
          <li>Upload any file type in chat</li>
          <li>Rich media support (audio, video, images…)</li>
          <li>Direct messaging with other users</li>
        </ul>
      </div>

      <div class="card">
        <h3>Privacy &amp; Community</h3>
        <ul>
          <li>No logging—never even your IP</li>
          <li>No email required to sign up</li>
          <li>Multi-national, open community</li>
          <li>Hacking encouraged!</li>
        </ul>
      </div>

      <div class="card">
        <h3>Customization &amp; Deployment</h3>
        <ul>
          <li>Full layout &amp; theme customization</li>
          <li>Install as a PWA on your phone</li>
          <li>Optionally self-host: <code>pip install snek</code>, zero config</li>
        </ul>
      </div>
    </section>

    <section id="signup" style="text-align:center; margin:4rem 0;">
      <h2>Ready to join?</h2>
      <p>No email. No logs. Just sign up, pick a username, and dive in!</p>
      <a href="/register" class="btn">Sign Up Now</a>
    </section>

    <section id="selfhost" style="text-align:center; margin-bottom:4rem;">
      <h2>Self-Host in Seconds</h2>
      <p>Just run:</p>
      <pre style="display:inline-block; background:#222; padding:1rem; border-radius:4px; color:#7ef;">
pip install git+https://retoor.molodetz.nl/retoor/snek.git
snek serve
      </pre>
      <p>No configuration required—it's that simple.</p>
    </section>

  </main>

  <footer>
    <p>&copy; 2025 Snek – Join our global community of developers, testers &amp; AI enthusiasts.</p>
  </footer>

							<script>
                            	
    // number of stars you want
    const STAR_COUNT = 200;
    const body = document.body;

    for (let i = 0; i < STAR_COUNT; i++) {
      const star = document.createElement('div');
      star.classList.add('star');

      // random position within the viewport
      star.style.left  = Math.random() * 100 + '%';
      star.style.top   = Math.random() * 100 + '%';

      // random size (optional)
      const size = Math.random() * 2 + 1; // between 1px and 3px
      star.style.width  = size + 'px';
      star.style.height = size + 'px';

      // random animation timing for natural flicker
      const duration = Math.random() * 3 + 2;   // 2s–5s
      const delay    = Math.random() * 5;       // 0s–5s
      star.style.animationDuration = duration + 's';
      star.style.animationDelay    = delay + 's';

      body.appendChild(star);
    }
							</script>  

	
</body>
</html>
