Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Top 10 Pizza Toppings | Mangia Bene!</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Playfair+Display:wght@700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #fff5f5; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .pizza-slice { | |
| position: absolute; | |
| width: 100px; | |
| height: 100px; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 50 L100 0 A50 50 0 0 0 50 0 Z" fill="%23f97316"/><circle cx="70" cy="30" r="5" fill="%23ef4444"/><circle cx="40" cy="20" r="4" fill="%238b5cf6"/><circle cx="60" cy="60" r="6" fill="%23f59e0b"/><circle cx="30" cy="40" r="5" fill="%2322c55e"/></svg>'); | |
| background-size: contain; | |
| animation: float 6s ease-in-out infinite; | |
| opacity: 0.7; | |
| z-index: -1; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(5deg); } | |
| } | |
| .topping-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .topping-icon:hover { | |
| transform: scale(1.2) rotate(10deg); | |
| } | |
| .bar-container { | |
| transition: width 1.5s ease-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen relative overflow-x-hidden"> | |
| <!-- Floating pizza slices --> | |
| <div class="pizza-slice top-20 left-10"></div> | |
| <div class="pizza-slice top-1/3 right-5 animation-delay-2000"></div> | |
| <div class="pizza-slice bottom-20 left-1/4 animation-delay-3000"></div> | |
| <div class="pizza-slice bottom-10 right-20 animation-delay-1500"></div> | |
| <div class="container mx-auto px-4 py-12"> | |
| <header class="text-center mb-12"> | |
| <div class="inline-block bg-red-600 text-white px-4 py-2 rounded-full mb-4 shadow-lg"> | |
| <i class="fas fa-pizza-slice mr-2"></i> #1 Food in the World | |
| </div> | |
| <h1 class="title-font text-4xl md:text-6xl font-bold text-red-800 mb-4">Top 10 Pizza Toppings</h1> | |
| <p class="text-xl text-gray-700 max-w-2xl mx-auto">According to pizza lovers around the globe <span class="text-red-600">❤️</span></p> | |
| </header> | |
| <main class="bg-white rounded-2xl shadow-xl p-6 md:p-8 max-w-4xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Left Column - Visualization --> | |
| <div class="space-y-6"> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg"> | |
| <p class="text-yellow-800 font-medium"><i class="fas fa-info-circle mr-2"></i> Hover over toppings to see popularity!</p> | |
| </div> | |
| <div class="relative h-80"> | |
| <!-- Pizza base --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-64 h-64 rounded-full bg-amber-200 shadow-inner border-8 border-amber-300"></div> | |
| </div> | |
| <!-- Toppings will be placed here by JS --> | |
| <div id="pizza-toppings" class="absolute inset-0"></div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Ranking --> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-red-600 text-white p-2 rounded-lg mr-4"> | |
| <i class="fas fa-trophy text-2xl"></i> | |
| </div> | |
| <h2 class="title-font text-2xl font-bold text-gray-800">The Ranking</h2> | |
| </div> | |
| <div id="ranking-list" class="space-y-4"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| <div class="mt-8 bg-red-50 p-4 rounded-lg border border-red-100"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-pepper-hot text-red-600"></i> | |
| </div> | |
| <p class="text-red-800"><span class="font-bold">Fun fact:</span> Pepperoni is the most popular topping in the US, with about 36% of all pizzas ordered having it!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="text-center mt-12 text-gray-600"> | |
| <p>Made with <i class="fas fa-heart text-red-500"></i> in Italy (virtually)</p> | |
| <p class="text-sm mt-2">Data based on global pizza consumption surveys</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const toppingsData = [ | |
| { name: "Pepperoni", popularity: 95, icon: "fa-pepper-hot", color: "bg-red-500" }, | |
| { name: "Mushrooms", popularity: 82, icon: "fa-mushroom", color: "bg-amber-600" }, | |
| { name: "Onions", popularity: 78, icon: "fa-onion", color: "bg-purple-500" }, | |
| { name: "Sausage", popularity: 76, icon: "fa-drumstick-bite", color: "bg-red-700" }, | |
| { name: "Bacon", popularity: 75, icon: "fa-bacon", color: "bg-pink-600" }, | |
| { name: "Extra Cheese", popularity: 73, icon: "fa-cheese", color: "bg-yellow-400" }, | |
| { name: "Black Olives", popularity: 68, icon: "fa-circle", color: "bg-gray-800" }, | |
| { name: "Green Peppers", popularity: 65, icon: "fa-pepper-hot", color: "bg-green-500" }, | |
| { name: "Pineapple", popularity: 58, icon: "fa-apple-alt", color: "bg-yellow-300" }, | |
| { name: "Spinach", popularity: 52, icon: "fa-leaf", color: "bg-green-600" } | |
| ]; | |
| // Create pizza toppings visualization | |
| const pizzaToppings = document.getElementById('pizza-toppings'); | |
| const centerX = 128; // Half of 256px pizza diameter | |
| const centerY = 128; | |
| const radius = 90; | |
| toppingsData.forEach((topping, index) => { | |
| const angle = (index / toppingsData.length) * 2 * Math.PI; | |
| const x = centerX + radius * Math.cos(angle) - 20; | |
| const y = centerY + radius * Math.sin(angle) - 20; | |
| const toppingEl = document.createElement('div'); | |
| toppingEl.className = `absolute topping-icon ${topping.color} text-white w-10 h-10 rounded-full flex items-center justify-center shadow-md cursor-pointer`; | |
| toppingEl.style.left = `${x}px`; | |
| toppingEl.style.top = `${y}px`; | |
| toppingEl.innerHTML = `<i class="fas ${topping.icon}"></i>`; | |
| toppingEl.title = `${topping.name}: ${topping.popularity}% popularity`; | |
| // Add hover effect that shows popularity | |
| toppingEl.addEventListener('mouseover', () => { | |
| const bar = document.getElementById(`bar-${index}`); | |
| if (bar) { | |
| bar.classList.remove('w-0'); | |
| bar.classList.add(`w-${Math.floor(topping.popularity/10)}/10`); | |
| } | |
| }); | |
| toppingEl.addEventListener('mouseout', () => { | |
| const bar = document.getElementById(`bar-${index}`); | |
| if (bar) { | |
| bar.classList.add('w-0'); | |
| bar.classList.remove(`w-${Math.floor(topping.popularity/10)}/10`); | |
| } | |
| }); | |
| pizzaToppings.appendChild(toppingEl); | |
| }); | |
| // Create ranking list | |
| const rankingList = document.getElementById('ranking-list'); | |
| toppingsData.forEach((topping, index) => { | |
| const rankEl = document.createElement('div'); | |
| rankEl.className = 'flex items-center p-3 hover:bg-red-50 rounded-lg transition'; | |
| rankEl.innerHTML = ` | |
| <div class="flex-shrink-0 w-10 h-10 rounded-full ${topping.color} text-white flex items-center justify-center mr-4"> | |
| <span class="font-bold">${index + 1}</span> | |
| </div> | |
| <div class="flex-grow"> | |
| <h3 class="font-bold text-gray-800">${topping.name}</h3> | |
| <div class="flex items-center mt-1"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-2"> | |
| <div id="bar-${index}" class="h-2.5 rounded-full ${topping.color} w-0"></div> | |
| </div> | |
| <span class="text-sm text-gray-600">${topping.popularity}%</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 text-2xl ${topping.color}"> | |
| <i class="fas ${topping.icon}"></i> | |
| </div> | |
| `; | |
| rankingList.appendChild(rankEl); | |
| }); | |
| // Animate pizza slices | |
| const slices = document.querySelectorAll('.pizza-slice'); | |
| slices.forEach((slice, index) => { | |
| slice.style.animationDelay = `${index * 0.5}s`; | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=reach-vb/pizza-example" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |