HEX

File: /var/www/html/tmpr/../tmpr/..//tmpr/../tesw.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Brand AI – Test (Plain HTML/JS)</title>
  <link rel="stylesheet" href="./index_files/css2.css" />
</head>
<body>
  <header class="border-b border-gray-200">
    <div class="container mx-auto px-6 py-4 flex items-center justify-between" role="navigation" aria-label="Main Navigation">
      <div class="flex items-center space-x-8">
        <a href="https://www.thebrand.ai" aria-label="Brand AI Homepage">
          <img src="https://www.thebrand.ai/i/uploads/logo/logo_62a4de26e93f0.png" width="110" height="30" alt="Brand AI" />
        </a>
        <nav class="hidden md:flex items-center space-x-6">
          <a href="https://www.thebrand.ai/brandcreator/index" class="text-gray-600 hover:text-brand-cyan font-medium transition-colors">Brand Creator</a>
          <a href="https://www.thebrand.ai/i" class="text-gray-600 hover:text-brand-cyan font-medium transition-colors">Templates</a>
          <a href="https://www.thebrand.ai/insights/" class="text-gray-600 hover:text-brand-cyan font-medium transition-colors">Insights</a>
          <a href="https://www.thebrand.ai/blogs" class="text-gray-600 hover:text-brand-cyan font-medium transition-colors">Blogs</a>
          <a href="https://www.thebrand.ai/brandpay/choose" class="text-gray-600 hover:text-brand-cyan font-medium transition-colors">Pricing</a>
        </nav>
      </div>
      <div class="hidden md:flex items-center space-x-4">
        <a href="https://bit.ly/2LpQJmO" target="_blank" rel="noopener noreferrer" class="font-semibold text-gray-600 hover:text-brand-cyan transition-colors border border-gray-300 rounded-lg py-2 px-4 text-sm hover:border-brand-cyan">Download App</a>
        <a href="https://www.thebrand.ai/brandcreator/dashboard/auth-login.php?url=home" class="font-bold text-gray-600 hover:text-brand-cyan transition-colors">Log in</a>
        <a href="https://www.thebrand.ai/brandcreator/dashboard/auth-join.php?url=home" class="bg-brand-cyan text-white font-bold py-2 px-4 rounded-lg hover:opacity-90 transition-opacity">Sign up for free</a>
      </div>
      <div class="md:hidden">
        <button class="text-gray-800 focus:outline-none" aria-label="Toggle menu">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </header>

  <main>
    <section class="relative text-white overflow-hidden bg-brand-midnight" aria-label="Hero">
      <div aria-hidden="true" class="absolute inset-0 z-0 opacity-50">
        <div class="absolute top-[-30%] left-[-30%] w-4/5 h-4/5 rounded-full bg-gradient-to-br from-brand-cyan to-transparent filter blur-3xl"></div>
        <div class="absolute bottom-[-30%] right-[-30%] w-4/5 h-4/5 rounded-full bg-gradient-to-tl from-brand-cyan to-transparent filter blur-3xl"></div>
      </div>
      <div class="relative z-10 flex flex-col items-center justify-center min-h-[70vh] md:min-h-[80vh] px-4 text-center">
        <h1 class="text-5xl md:text-7xl lg:text-8xl font-extrabold mb-4 tracking-tight">Your Entire Brand.<br />
          One Intelligent Platform.</h1>
        <p class="text-lg md:text-2xl max-w-3xl mb-8">Imagine
          the creative firepower of a design agency, the strategic insight of a
          consultant, and the brilliance of a top-tier marketing team—all at your
          fingertips. That's Brand AI.</p>
        <div class="flex flex-wrap justify-center gap-4">
          <a href="https://www.thebrand.ai/brandcreator/dashboard/auth-join.php?url=home" class="bg-white text-brand-midnight font-bold py-3 px-8 rounded-lg text-lg hover:bg-gray-200 transition-all duration-300 transform hover:scale-105">Start creating for free</a>
          <a href="https://www.thebrand.ai/insights/" class="bg-white/10 backdrop-blur-sm text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-white/20 transition-all duration-300 transform hover:scale-105">Explore AI Features</a>
        </div>
      </div>
    </section>

    <section id="templates" class="py-16" aria-label="Interactive Templates">
      <div class="container mx-auto px-6">
        <div class="text-center mb-12">
          <h2 class="text-4xl md:text-5xl font-bold mb-4">Templates for absolutely anything</h2>
          <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
            Jumpstart your next project with thousands of professional templates for any occasion.
          </p>
          <a href="https://www.thebrand.ai/brandcreator/dashboard/auth-join.php?url=home" class="mt-8 inline-block bg-brand-cyan text-white font-bold py-3 px-8 rounded-lg text-lg hover:opacity-90 transition-opacity">
            Create Your Brand Now
          </a>
        </div>
        <div id="tabs" class="flex flex-wrap justify-center gap-3" role="tablist" aria-label="Template categories"></div>
        <div id="grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-8" aria-live="polite" aria-busy="false"></div>
      </div>
    </section>
  </main>

  <footer class="container">
    <p>© <span id="year"></span> Brand AI. All rights reserved.</p>
  </footer>

  <script>
    // Footer year
    document.getElementById('year').textContent = new Date().getFullYear();

    // Category order to match expectations
    const CATEGORY_ORDER = [
      'Social Media', 'Invites & Cards', 'Documents', 'Advertising', 'Covers', 'More'
    ];

    // Simple image rotation for cards
    const PLACEHOLDER_IMAGES = [
      './index_files/1001-800x600.jpg', './index_files/879-800x600.jpg', './index_files/622-800x600.jpg',
      './index_files/553-1200x800.jpg', './index_files/600-1200x800.jpg', './index_files/898-800x600.jpg'
    ];

    // Utility: flatten nested children to a single list of { title, url }
    function flattenChildren(node) {
      const out = [];
      function walk(item) {
        if (!item) return;
        // If item has label+url, treat as template leaf
        if (typeof item.label === 'string' && typeof item.url === 'string') {
          out.push({ title: item.label, url: item.url });
        }
        // If item has children, traverse them
        if (Array.isArray(item.children)) {
          for (const child of item.children) walk(child);
        }
      }
      walk(node);
      return out;
    }

    function sortCategories(categories) {
      const orderMap = new Map(CATEGORY_ORDER.map((name, idx) => [name, idx]));
      return [...categories].sort((a, b) => {
        const ai = orderMap.has(a.label) ? orderMap.get(a.label) : Number.MAX_SAFE_INTEGER;
        const bi = orderMap.has(b.label) ? orderMap.get(b.label) : Number.MAX_SAFE_INTEGER;
        return ai - bi;
      });
    }

    function renderTabs(categories, onSelect, activeLabel) {
      const tabs = document.getElementById('tabs');
      tabs.innerHTML = '';
      categories.forEach(cat => {
        const btn = document.createElement('button');
        const base = 'border border-gray-300 rounded-lg py-2 px-4 text-sm font-semibold text-gray-600 hover:text-brand-cyan hover:border-brand-cyan transition-colors';
        const active = cat.label === activeLabel ? ' border-brand-cyan text-brand-cyan' : '';
        btn.className = base + active;
        btn.type = 'button';
        btn.setAttribute('role', 'tab');
        btn.setAttribute('aria-selected', String(cat.label === activeLabel));
        btn.textContent = cat.label;
        btn.addEventListener('click', () => onSelect(cat.label));
        tabs.appendChild(btn);
      });
    }

    function renderGrid(templates) {
      const grid = document.getElementById('grid');
      grid.setAttribute('aria-busy', 'true');
      grid.innerHTML = '';
      templates.forEach((tpl, i) => {
        const card = document.createElement('article');
        card.className = 'bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition';
        const img = document.createElement('img');
        img.alt = tpl.title;
        img.src = PLACEHOLDER_IMAGES[i % PLACEHOLDER_IMAGES.length];
        img.className = 'w-full h-40 object-cover bg-gray-100';
        const body = document.createElement('div');
        body.className = 'p-4';
        const title = document.createElement('h3');
        title.className = 'text-sm font-semibold text-gray-800 mb-1';
        title.textContent = tpl.title;
        const link = document.createElement('a');
        link.className = 'text-xs text-gray-500 break-words';
        link.href = tpl.url;
        link.target = '_blank';
        link.rel = 'noopener noreferrer';
        link.textContent = tpl.url;
        body.appendChild(title);
        body.appendChild(link);
        card.appendChild(img);
        card.appendChild(body);
        grid.appendChild(card);
      });
      grid.setAttribute('aria-busy', 'false');
    }

    async function initTemplates() {
      try {
        const res = await fetch('./categories.json', { cache: 'no-cache' });
        const data = await res.json();
        const categories = sortCategories(data);

        // Build local model: { label, templates[] }
        const model = categories.map(cat => ({
          label: cat.label,
          templates: flattenChildren(cat)
        }));

        let activeLabel = model.length ? model[0].label : '';
        const select = (label) => {
          activeLabel = label;
          renderTabs(model, select, activeLabel);
          const active = model.find(c => c.label === activeLabel) || { templates: [] };
          renderGrid(active.templates);
        };

        select(activeLabel);
      } catch (err) {
        console.error('Failed to load categories.json', err);
        const grid = document.getElementById('grid');
        grid.textContent = 'Failed to load templates.';
      }
    }

    initTemplates();
  </script>
</body>
</html>