Site Builder
Editing:
index.php
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"> <style> :root{ --bg: radial-gradient(circle at 25% 25%, #1c1d27 0%, #0f0f15 100%); --accent: #ff4ecd; /* electric pink */ --accent2: #37e6ff; /* neon cyan */ --text: #f0f0f3; --soft: rgba(255,255,255,.06); --blur: blur(30px); --radius: 18px; --font: 'Inter', system-ui, sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;scroll-behavior:smooth;font-family:var(--font);color:var(--text);background:var(--bg);} h1,h2,h3{line-height:1.1;font-weight:800;letter-spacing:-.02em} a{color:var(--accent2);text-decoration:none} .section{padding:8vh 8vw;display:flex;flex-direction:column;gap:3.5rem} .hero{min-height:100vh;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden} .hero h1{font-size:clamp(2.8rem,6vw,6rem);background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent} .hero p{font-size:1.25rem;margin-top:1rem;max-width:60ch;margin-inline:auto;color:#c9c9d4} .btn{display:inline-block;padding:.9rem 2.3rem;margin-top:3rem;font-weight:600;font-size:1.05rem;border-radius:50px;background:var(--accent);color:#fff;box-shadow:0 4px 16px rgba(255,78,205,.3);transition:transform .25s ease} .btn:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(255,78,205,.5)} /* glass cards */ .cards{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .card{padding:2rem 1.6rem;border-radius:var(--radius);background:var(--soft);backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.08)} .card h3{margin-bottom:1rem;font-size:1.4rem;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent} .card p{font-size:1rem;line-height:1.55;color:#d0d0dc} /* CSS “letter blocks” */ .blocks{position:relative;width:120px;height:110px;margin:0 auto} .block{--size:70px;position:absolute;width:var(--size);height:var(--size);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:2rem;color:#0f0f15; background:linear-gradient(135deg,#fff 0%, #e5e5ea 100%);border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.35)} .block:nth-child(1){left:50%;transform:translateX(-50%) translateY(-10px) rotate(-4deg)} .block:nth-child(2){bottom:0;left:0;transform:rotate(3deg)} .block:nth-child(3){bottom:0;right:0;transform:rotate(-3deg)} .block:before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--accent);mix-blend-mode:overlay;opacity:.15} @media(prefers-reduced-motion:no-preference){ .block{animation:float 6s ease-in-out infinite} @keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}} } /* footer */ footer{padding:3rem 0;text-align:center;font-size:.9rem;color:#8a8a9c} </style> </head> <?php include $_SERVER['DOCUMENT_ROOT'] . '/mai-site/parts/modules/nav/menu-main.php'; ?> <body> <!-- Hero --> <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 & Natural Intelligence Engine</em></p> <p>Welcome to <strong>Vibe‑Coding Publishing</strong> — where a seven‑year‑old can design pages that feel alive, connect them like LEGO<sup>®</sup> blocks, and launch a full‑blown website with nothing more than imagination + copy‑&‑paste.</p> <a href="#learn-more" class="btn">Learn How It Works</a> </section> <!-- Explainer --> <section id="learn-more" class="section"> <div class="cards"> <div class="card"> <h3>1 · Talk to the AI</h3> <p>Describe the vibe 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 & 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> <!-- Why it matters --> <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> <!-- Call‑to‑action --> <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> <footer> © 2025 · Melanie AI · Built with ❤️ and JavaScript between homework and recess. </footer> <!-- Small JS for smooth scroll + dynamic year fallback --> <script> document.querySelectorAll('a[href^="#"]').forEach(el=>{ el.addEventListener('click',e=>{ e.preventDefault(); document.querySelector(el.getAttribute('href')).scrollIntoView({behavior:'smooth'}); }); }); </script> </body> </html>
Save changes
Create folder
writable 0777
Create
Cancel