AI Chat Arena - Compare AI Models Side by Side

o3-2025-04-16

Below is a single, self-contained HTML file that meets every requirement.
Just save it as index.html and open it in any browser—no build-step or dependencies needed.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Crypto Fam Radio | Synth-Wave Link Hub</title>

  <!-- Retro Synth-Wave Color Tokens -->
  <style>
    /* ---------- CSS RESET ---------- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Poppins', Arial, Helvetica, sans-serif;
      color: #ffffff;
      background: #0d0d0d;
      line-height: 1.6;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    :root {
      --clr-bg: #0d0d0d;
      --clr-neon-pink: #ff2efd;
      --clr-neon-purple: #8e2efc;
      --clr-neon-cyan: #00f6ff;
      --clr-text-light: #ffffff;
      --gradient-hero: radial-gradient(circle at 50% 20%, rgba(255,46,253,0.6), rgba(8,8,8,0.9) 60%);
    }

    /* ---------- NAVBAR ---------- */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      backdrop-filter: blur(6px);
      background: rgba(13,13,13,0.7);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      z-index: 999;
    }
    .nav-container {
      max-width: 1200px;
      margin: auto;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .brand {
      font-weight: 700;
      font-size: 1.3rem;
      background: linear-gradient(90deg,var(--clr-neon-pink),var(--clr-neon-purple),var(--clr-neon-cyan));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .nav-links {
      display: flex;
      gap: 1.2rem;
    }
    .nav-links a {
      font-size: 0.95rem;
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0;
      height: 2px;
      background: var(--clr-neon-pink);
      transition: width .3s ease;
    }
    .nav-links a:hover::after,
    .nav-links a.active::after {
      width: 100%;
    }

    /* ---------- HERO ---------- */
    header {
      padding-top: 80px; /* height of navbar */
      background: var(--gradient-hero);
    }
    .hero {
      max-width: 1200px;
      margin: auto;
      padding: 6rem 1.5rem 5rem;
      text-align: center;
    }
    .hero h1 {
      font-size: clamp(2.5rem, 5vw, 4rem);
      margin-bottom: 1rem;
      font-weight: 700;
    }
    .hero p {
      max-width: 600px;
      margin: 0 auto 2rem;
      font-size: 1rem;
      color: rgba(255,255,255,0.8);
    }
    .btn-primary {
      display: inline-block;
      padding: .9rem 2.2rem;
      font-size: 1rem;
      font-weight: 600;
      color: var(--clr-text-light);
      background: linear-gradient(90deg,var(--clr-neon-pink),var(--clr-neon-purple));
      border: none;
      border-radius: 30px;
      cursor: pointer;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .btn-primary:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 20px rgba(255,46,253,0.35);
    }

    /* ---------- ABOUT ---------- */
    #about {
      max-width: 1000px;
      margin: auto;
      padding: 5rem 1.5rem;
    }
    #about h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
      background: linear-gradient(90deg,var(--clr-neon-cyan),var(--clr-neon-purple));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    #about p {
      color: rgba(255,255,255,.85);
      margin-bottom: 1.2rem;
    }

    /* ---------- FEATURES / LINK GRID ---------- */
    #features {
      padding: 4.5rem 1rem;
      background: linear-gradient(180deg, rgba(142,46,252,.15), rgba(0,0,0,0) 60%);
    }
    .features-grid {
      display: grid;
      gap: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      max-width: 1200px;
      margin: auto;
    }
    .card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 16px;
      padding: 2rem 1.4rem;
      text-align: center;
      transition: transform .3s ease, box-shadow .3s ease;
    }
    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 25px rgba(0,246,255,0.3);
    }
    .card img {
      height: 80px;
      margin: 0 auto 1rem;
      filter: drop-shadow(0 0 12px var(--clr-neon-cyan));
      object-fit: cover;
      border-radius: 50%;
    }
    .card h3 {
      margin-bottom: .6rem;
      font-size: 1.2rem;
      color: var(--clr-neon-cyan);
    }
    .card p {
      font-size: .9rem;
      color: rgba(255,255,255,.75);
      margin-bottom: 1.2rem;
    }
    .card a {
      font-weight: 600;
      color: var(--clr-neon-pink);
    }

    /* ---------- FOOTER ---------- */
    footer {
      margin-top: auto;
      background: #080808;
      padding: 2rem 1rem;
      text-align: center;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .socials {
      display: flex;
      justify-content: center;
      gap: 1.4rem;
      margin-bottom: 1rem;
    }
    .socials a {
      display: inline-block;
      width: 38px;
      height: 38px;
      line-height: 38px;
      border-radius: 50%;
      background: linear-gradient(45deg,var(--clr-neon-purple),var(--clr-neon-pink));
      color: #fff;
      font-size: 1.1rem;
      transition: opacity .25s ease;
    }
    .socials a:hover { opacity: .75; }
    footer small { color: rgba(255,255,255,0.6); font-size: .8rem; }

    /* ---------- RESPONSIVE EXTRAS ---------- */
    @media (max-width: 600px) {
      .nav-links { display: none; } /* keep it minimal on mobile */
      .hero { padding: 5rem 1rem 4rem; }
      .btn-primary { width: 100%; }
    }
  </style>
</head>
<body>

  <!-- ========== NAV ========== -->
  <nav class="navbar">
    <div class="nav-container">
      <div class="brand">Crypto Fam Radio</div>
      <div class="nav-links">
        <a href="#home" class="active">Home</a>
        <a href="#about">About</a>
        <a href="#features">Features</a>
      </div>
    </div>
  </nav>

  <!-- ========== HERO ========== -->
  <header id="home">
    <section class="hero">
      <h1>Welcome to Crypto Fam Radio</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sapien quis lorem tincidunt tristique at sit amet nisl.</p>
      <button class="btn-primary" id="cta-btn">Tune&nbsp;In&nbsp;Now</button>
    </section>
  </header>

  <!-- ========== ABOUT ========== -->
  <section id="about">
    <h2>About Us</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, labore numquam! Rerum obcaecati ut culpa ipsum id ratione, beatae fugit ea?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores facere corporis laudantium!</p>
  </section>

  <!-- ========== FEATURES / LINK GRID ========== -->
  <section id="features">
    <div class="features-grid">
      <!-- Card 1 -->
      <div class="card">
        <img src="https://source.unsplash.com/160x160/?synthwave,radio" alt="feature">
        <h3>Live Stream</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <a href="#">Open&nbsp;→</a>
      </div>
      <!-- Card 2 -->
      <div class="card">
        <img src="https://source.unsplash.com/160x160/?neon,bitcoin" alt="feature">
        <h3>Market News</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <a href="#">Read&nbsp;→</a>
      </div>
      <!-- Card 3 -->
      <div class="card">
        <img src="https://source.unsplash.com/160x160/?vaporwave,music" alt="feature">
        <h3>Playlist</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <a href="#">Listen&nbsp;→</a>
      </div>
      <!-- Card 4 -->
      <div class="card">
        <img src="https://source.unsplash.com/160x160/?crypto,neon" alt="feature">
        <h3>Portfolio Tracker</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <a href="#">Track&nbsp;→</a>
      </div>
      <!-- Card 5 -->
      <div class="card">
        <img src="https://source.unsplash.com/160x160/?waves,night" alt="feature">
        <h3>Community Chat</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <a href="#">Join&nbsp;→</a>
      </div>
      <!-- Card 6 -->
      <div class="card">
        <img src="https://source.unsplash.com/160x160/?retro,futuristic" alt="feature">
        <h3>Events</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <a href="#">See&nbsp;More&nbsp;→</a>
      </div>
    </div>
  </section>

  <!-- ========== FOOTER ========== -->
  <footer>
    <div class="socials">
      <a href="#" title="Twitter"><span>𓆙</span></a>
      <a href="#" title="Instagram"><span>✦</span></a>
      <a href="#" title="YouTube"><span>▶</span></a>
    </div>
    <small>© 2024 Crypto Fam Radio — All Rights Reserved.</small>
  </footer>

  <!-- ========== JS ========== -->
  <script>
    // ----- Smooth CTA scroll to Features -----
    document.getElementById('cta-btn').addEventListener('click', () => {
      document.getElementById('features').scrollIntoView({behavior: 'smooth'});
    });

    // ----- Highlight active nav link while scrolling -----
    const sections = document.querySelectorAll('header, #about, #features');
    const navLinks = document.querySelectorAll('.nav-links a');

    const makeActive = (id) => {
      navLinks.forEach(link => {
        link.classList.toggle('active', link.getAttribute('href') === '#' + id);
      });
    };

    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          if(entry.isIntersecting) makeActive(entry.target.id);
        });
      },
      { threshold: 0.5 }
    );

    sections.forEach(sec => observer.observe(sec));
  </script>
</body>
</html>

Highlights & Implementation Notes
• Tech stack strictly follows vanilla HTML/CSS/JS in one file.
• Design uses a neon synth-wave palette with smooth gradients for that retro-futuristic vibe.
• Flex-box/navigation & CSS Grid for the link-tree-like features section.
• Mobile-first responsiveness: grid auto-fits, nav collapses, CTA stretches full-width on small screens.
• All copy is Lorem Ipsum, images are pulled live from Unsplash using synthwave-related keywords.

"Act as a Senior Front-End Developer. I need you to build a single-page Landing Page Titled Crypto Fam Radio that looks like link tree but way more modern synth wave retro style

Requirements:

Tech Stack: Use HTML5, standard CSS (in a <style> tag), and vanilla JavaScript (in a <script> tag) within a single HTML file so I can run it easily.
Design System: Use a [e.g., Modern / Minimalist / Retro / Corporate] aesthetic. The color palette should be [e.g., Navy Blue and Gold / Black and White / Pastel].
Structure: Include a fixed navigation bar, a Hero section with a Call to Action button, an 'About' section, a 'Services/Features' grid section using Flexbox or Grid, and a Footer with social links.
Responsiveness: Ensure the website is fully responsive for mobile, tablet, and desktop.
Placeholders: Use 'Lorem Ipsum' for text and unsplash.com source URLs for placeholder images.
Please write the full, clean code."

Message from o3-2025-04-16