Site Builder

Editing: index.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Melanie AI – Vibe‑Coding for Kids</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Melanie AI is a Machine‑Enhanced Logic & Natural Intelligence Engine that lets children publish sophisticated websites—one vibe‑coded page at a time.">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">

.maimenu .toggle{display:flex;flex-direction:column;align-items:center}
.maimenu .toggle .label{font-size:.8rem;padding:.15rem .7rem;border-radius:8px 8px 0 0;
                        background:var(--bg);backdrop-filter:blur(var(--blur));
                        color:var(--txt);letter-spacing:.05em}

/* bars group offset & colour */
.maimenu .toggle .bars{margin-top:6px}
.maimenu .toggle .bars,
.maimenu .toggle .bars:before,
.maimenu .toggle .bars:after{
  content:'';display:block;width:28px;height:2px;border-radius:2px;
  background:var(--hamburger);transition:.4s
}
.maimenu .toggle .bars:before{transform:translateY(-6px)}
.maimenu .toggle .bars:after {transform:translateY( 6px)}

.maimenu[open] .bars{background:transparent}
.maimenu[open] .bars:before{transform:rotate(45deg)}
.maimenu[open] .bars:after {transform:rotate(-45deg)}

.maimenu nav{position:absolute;top:calc(100% + .8rem);right:0;min-width:180px;
             background:var(--bg);backdrop-filter:blur(var(--blur));border-radius:var(--radius);
             padding:1rem 1.4rem;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.maimenu nav a{display:block;color:var(--txt);text-decoration:none;padding:.45rem 0;
               border-bottom:1px solid rgba(255,255,255,.07);transition:color .25s}
.maimenu nav a:last-child{border-bottom:none}
.maimenu nav a:hover{color:var(--acc2)}

@media(max-width:600px){ .maimenu .label{display:none} }
</style>

<details class="maimenu">
  <summary class="toggle">
    <span class="label">Menu</span>
    <span class="bars"></span>
  </summary>
  <nav>
    <a href="test.php">Test</a>
    <a href="fastlou.php">Fastlou</a>
    <a href="site-builder.php">Site Builder</a>
  </nav>
</details>

<body>

<section class="section hero">
  <div class="blocks" aria-hidden="true">
    <div class="block">M</div>
    <div class="block">A</div>
    <div class="block">I</div>
  </div>

<h1>Melanie AI</h1>
  <p><em>Machine‑Enhanced Logic &amp; Natural Intelligence Engine</em></p>
  <p>Welcome to <strong>Vibe‑Coding&nbsp;Publishing</strong>&nbsp;— where a seven‑year‑old can design pages that feel&nbsp;alive, connect them like LEGO<sup>®</sup> blocks, and launch a full‑blown website with nothing more than imagination&nbsp;+ copy‑&‑paste.</p>
  <a href="#learn-more" class="btn">Learn How It Works</a>
</section>

<section id="learn-more" class="section">
  <div class="cards">
    <div class="card">
      <h3>1 · Talk to the AI</h3>
      <p>Describe the vibe&nbsp;you want — playful, cosmic, retro, ultra‑professional — and Melanie AI generates a fully responsive page for you.</p>
    </div>
    <div class="card">
      <h3>2 · Copy &amp; Paste</h3>
      <p>Grab the code, drop it into our one‑page Site‑Builder, hit save. No databases, no plugins, no stress. Just <code>Ctrl + V</code>.</p>
    </div>
    <div class="card">
      <h3>3 · Snap Pages Together</h3>
      <p>Every new page automatically links into a dynamic navigation map, so children (and grown‑ups!) build complex sites the way they build stories — one block at a time.</p>
    </div>
    <div class="card">
      <h3>4 · Iterate Instantly</h3>
      <p>Need a tweak? Ask the AI, paste the updated snippet, and refresh. The feedback loop is seconds, not sprints.</p>
    </div>
  </div>
</section>

<section class="section">
  <h2 style="font-size:2.2rem;text-align:center;margin-bottom:2rem;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent">
    Empowering the Next Generation
  </h2>
  <p style="font-size:1.2rem;max-width:70ch;margin:0 auto;text-align:center;color:#cacad8">
    Web development used to demand years of training and layers of tooling.<br>
    Melanie AI proves that <strong>creativity</strong> + <strong>conversation</strong> beats complexity.  
    If a child can imagine it, she can publish it — and that changes everything.
  </p>
</section>

<section class="section" style="text-align:center">
  <a href="site-builder.php" class="btn" style="font-size:1.15rem">Launch the Builder</a>
  <p style="margin-top:1.3rem;color:#8a8a9c;font-size:.95rem">Requires a modern browser · No sign‑up · Magic included ✨</p>
</section>

<script>
document.querySelectorAll('a[href^="#"]').forEach(el=>{
  el.addEventListener('click',e=>{
    e.preventDefault();
    document.querySelector(el.getAttribute('href')).scrollIntoView({behavior:'smooth'});
  });
});
</script>
</body>
</html>