luffs/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Hierarchical menu displaying products by collapsible categories">
    <meta property="og:title" content="Product Hierarchical Menu">
    <meta property="og:description" content="Browse and add products to your favorites">
    <meta property="og:image" content="path/to/your-image.jpg">
    <meta property="og:url" content="https://your-website.com">
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "WebPage",
            "name": "Product Hierarchical Menu",
            "description": "Browse and add products to your favorites"
        }
    </script>
    <title>Product Hierarchical Menu</title>
    <style>
        .category {
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 1rem;
            padding: 1rem;
        }

        .category__title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .category__list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-gap: 1rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .product {
            background-color: #f0f0f0;
            border-radius: 4px;
            cursor: pointer;
            padding: 1rem;
            position: relative;
        }

        .product:hover {
            background-color: #e0e0e0;
        }

        .heart {
            fill: #f00;
            height: 24px;
            position: absolute;
            right: 8px;
            top: 8px;
            width: 24px;
        }
    </style>
</head>
<body>
<header role="banner">
    <h1>Product Hierarchical Menu</h1>
</header>
<main role="main" id="product-menu">
    <!-- Product menu will be generated here -->
</main>
<script>
  (async function() {
    const menu = document.getElementById('product-menu');
    const dataUrl = 'path/to/your-data.json';

    const response = await fetch(dataUrl);
    const data = await response.json();

    function createCategory(name) {
      const category = document.createElement('div');
      category.classList.add('category');
      category.innerHTML = `<h2>${name}</h2><ul></ul>`;
      return category;
    }

    function createProduct(name, price) {
      const product = document.createElement('li');
      product.classList.add('product');
      product.setAttribute('data-price', price);
      product.innerHTML = `<span>${name}</span> <svg class="heart" viewBox="0 0 32 32" hidden></svg>`;
      return product;
    }

    function handleMouseEnter(e) {
      const price = e.target.parentElement.getAttribute('data-price');
      e.target.parentElement.setAttribute('title', `Sale Price: ${price}`);
    }

    function handleProductClick(e) {
      const heart = e.target.parentElement.querySelector('.heart');
      heart.hidden = !heart.hidden;
      localStorage.setItem(e.target.parentElement.textContent.trim(), heart.hidden ? '' : 'favorite');

      // Mock Google Analytics custom event
      console.log('Product favorited:', e.target.parentElement.textContent.trim());
    }

    data.forEach(category => {
      const categoryEl = createCategory(category.name);
      category.products.forEach(product => {
        const productEl = createProduct(product.name, product.price);
        productEl.querySelector('span').addEventListener('mouseenter', handleMouseEnter);
        productEl.addEventListener('click', handleProductClick);

        if (localStorage.getItem(product.name) === 'favorite') {
          productEl.querySelector('.heart').hidden = false;
        }

        categoryEl.querySelector('ul').appendChild(productEl);
      });
      menu.appendChild(categoryEl);
    });
  })();

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Hierarchical menu displaying products by collapsible categories">
	<meta property="og:title" content="Product Hierarchical Menu">
	<meta property="og:description" content="Browse and add products to your favorites">
	<meta property="og:image" content="path/to/your-image.jpg">
	<meta property="og:url" content="https://your-website.com">
	<script type="application/ld+json">
	{
	"@context": "https://schema.org",
	"@type": "WebPage",
	"name": "Product Hierarchical Menu",
	"description": "Browse and add products to your favorites"
	}
	</script>
	<title>Product Hierarchical Menu</title>
	<style>
	.category {
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 1rem;
	padding: 1rem;
	}

	.category__title {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 1rem;
	}

	.category__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	}

	.product {
	background-color: #f0f0f0;
	border-radius: 4px;
	cursor: pointer;
	padding: 1rem;
	position: relative;
	}

	.product:hover {
	background-color: #e0e0e0;
	}

	.heart {
	fill: #f00;
	height: 24px;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 24px;
	}
	</style>
	</head>
	<body>
	<header role="banner">
	<h1>Product Hierarchical Menu</h1>
	</header>
	<main role="main" id="product-menu">
	<!-- Product menu will be generated here -->
	</main>
	<script>
	(async function() {
	const menu = document.getElementById('product-menu');
	const dataUrl = 'path/to/your-data.json';

	const response = await fetch(dataUrl);
	const data = await response.json();

	function createCategory(name) {
	const category = document.createElement('div');
	category.classList.add('category');
	category.innerHTML = `<h2>${name}</h2><ul></ul>`;
	return category;
	}

	function createProduct(name, price) {
	const product = document.createElement('li');
	product.classList.add('product');
	product.setAttribute('data-price', price);
	product.innerHTML = `<span>${name}</span> <svg class="heart" viewBox="0 0 32 32" hidden></svg>`;
	return product;
	}

	function handleMouseEnter(e) {
	const price = e.target.parentElement.getAttribute('data-price');
	e.target.parentElement.setAttribute('title', `Sale Price: ${price}`);
	}

	function handleProductClick(e) {
	const heart = e.target.parentElement.querySelector('.heart');
	heart.hidden = !heart.hidden;
	localStorage.setItem(e.target.parentElement.textContent.trim(), heart.hidden ? '' : 'favorite');

	// Mock Google Analytics custom event
	console.log('Product favorited:', e.target.parentElement.textContent.trim());
	}

	data.forEach(category => {
	const categoryEl = createCategory(category.name);
	category.products.forEach(product => {
	const productEl = createProduct(product.name, product.price);
	productEl.querySelector('span').addEventListener('mouseenter', handleMouseEnter);
	productEl.addEventListener('click', handleProductClick);

	if (localStorage.getItem(product.name) === 'favorite') {
	productEl.querySelector('.heart').hidden = false;
	}

	categoryEl.querySelector('ul').appendChild(productEl);
	});
	menu.appendChild(categoryEl);
	});
	})();

	</script>
	</body>
	</html>