index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeBrew | Learning Examples</title>
  <style>
    :root { --ink: #e9efff; --muted: #9dabca; --line: rgba(163, 190, 255, .2); --panel: rgba(17, 27, 56, .78); --blue: #6da8ff; --aqua: #67e8f9; }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; min-height: 100vh; color: var(--ink); font-family: Arial, sans-serif; background: #081225; overflow-x: hidden; }
    body::before, body::after { content: ""; position: fixed; width: 42vw; aspect-ratio: 1; border-radius: 50%; filter: blur(85px); opacity: .25; pointer-events: none; z-index: -1; }
    body::before { background: #2563eb; top: -18vw; left: -12vw; }
    body::after { background: #0891b2; right: -15vw; bottom: -20vw; }
    .container { width: min(1120px, calc(100% - 32px)); margin: auto; }
    header { padding: 72px 0 40px; text-align: center; }
    .badge { display: inline-block; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--aqua); background: rgba(103, 232, 249, .08); font-size: .8rem; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; }
    h1 { margin: 18px 0 12px; font-size: clamp(2.5rem, 7vw, 5rem); letter-spacing: -.06em; }
    header p { max-width: 620px; margin: auto; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
    .orb { width: 78px; height: 78px; margin: 0 auto 28px; border: 2px solid var(--aqua); border-radius: 50%; box-shadow: 0 0 40px rgba(103, 232, 249, .55), inset 0 0 30px rgba(109, 168, 255, .35); animation: float 4s ease-in-out infinite; }
    @keyframes float { 50% { transform: translateY(-11px) rotate(25deg); } }
    nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 30px 0 46px; }
    nav a { padding: 9px 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: bold; transition: .2s; }
    nav a:hover { color: #07101f; background: var(--aqua); transform: translateY(-2px); }
    .section { margin: 28px 0; padding: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); backdrop-filter: blur(14px); }
    .section-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
    h2 { margin: 0; font-size: 1.55rem; }
    .count { color: var(--aqua); font-weight: bold; }
    .examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px; }
    .example { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: rgba(6, 15, 35, .55); text-decoration: none; transition: transform .2s, border-color .2s, background .2s; }
    .example:hover { transform: translateY(-4px); border-color: var(--aqua); background: rgba(24, 65, 112, .6); }
    .example span { line-height: 1.3; }
    .arrow { color: var(--aqua); font-size: 1.3rem; }
    footer { padding: 26px 0 48px; text-align: center; color: var(--muted); }
    @media (max-width: 560px) { header { padding-top: 48px; } .section { padding: 20px; } .section-header { align-items: flex-start; flex-direction: column; gap: 5px; } }
  </style>
</head>
<body>
  <main class="container">
    <header>
      <div class="orb" aria-hidden="true"></div>
      <div class="badge">CodeBrew learning library</div>
      <h1>Explore every example.</h1>
      <p>A single launchpad for the HTML, CSS, JavaScript, Bootstrap, and jQuery practice files in this repository.</p>
    </header>

    <nav id="navigation" aria-label="Example categories"></nav>
    <div id="catalog"></div>
  </main>
  <footer>Choose an example to open it in a new tab.</footer>

  <script>
    const categories = {
      HTML: [
        'HTML Introduction.html', 'HTML Form.html', 'HTML Form (DONE PG).html', 'HTML List.html',
        'HTML Link.html', 'HTML Media.html', 'HTML Table.html'
      ],
      CSS: [
        'CSS Transform.html', 'CSS Position.html', 'CSS Media Query.html', 'CSS Introduction.html',
        'CSS Grid.html', 'CSS Flex.html', 'CSS Filter.html', 'CSS Dropdown.html', 'CSS Display.html', 'CSS Animation.html'
      ],
      JavaScript: [
        'quiz.html', 'JavaScript Switch Case.html', 'JavaScript Operators.html', 'JavaScript Object.html',
        'JavaScript Loop.html', 'JavaScript Introduction.html', 'JavaScript Function.html',
        'JavaScript Conditional Statement.html', 'JavaScript Array.html', 'JavaScript API.html', 'dropdown and collapse.html'
      ],
      Bootstrap: [
        'utility-responsive-floats.html', 'utility-floatnclearfix.html', 'utility-border.html', 'tooltip.html',
        'toast.html', 'scrollspy.html', 'progressbar.html', 'offcanvas.html', 'modals.html', 'classes.html', 'carousel.html', 'bootstrap.html'
      ],
      jQuery: ['sibling.html', 'list.html', 'intro.html', 'filtering.html', 'classes.html', 'ajax.html']
    };

    const folders = { HTML: 'HTML', CSS: 'CSS', JavaScript: 'JS', Bootstrap: 'Bootstrap', jQuery: 'Jquery' };
    const catalog = document.getElementById('catalog');
    const navigation = document.getElementById('navigation');

    Object.entries(categories).forEach(([category, files]) => {
      const id = category.toLowerCase().replace(/[^a-z]/g, '');
      navigation.insertAdjacentHTML('beforeend', `<a href="#${id}">${category} (${files.length})</a>`);

      const links = files.map(file => {
        const label = file.replace(/\.html$/, '');
        const path = `${folders[category]}/${file}`;
        return `<a class="example" href="${encodeURI(path)}" target="_blank" rel="noopener"><span>${label}</span><b class="arrow" aria-hidden="true">→</b></a>`;
      }).join('');

      catalog.insertAdjacentHTML('beforeend', `
        <section class="section" id="${id}">
          <div class="section-header"><h2>${category}</h2><span class="count">${files.length} examples</span></div>
          <div class="examples">${links}</div>
        </section>
      `);
    });
  </script>
</body>
</html>