Spaces:
Running
Here is all the key information and content from your current site, in plain text, ready for use with DeepSiteV3 or any other tool:
Browse filesRestaurant Name:
Italias, Romanos Too
Location:
Kellner, WI / Wisconsin Rapids, WI 54494
Phone:
(715) 423-8259
Recommendation:
80% recommend (23 reviews)
Services:
Dine-in, Pick-up, Delivery
About:
Italias, Romanos Too is your local spot for pizza and more in Kellner and Wisconsin Rapids, WI. Proudly serving our community with dine-in, pick-up, and delivery.
Hours:
Monday: Closed
Tuesday: 4:00 PM β 8:00 PM
Wednesday: 4:00 PM β 8:00 PM
Thursday: 4:00 PM β 8:00 PM
Friday: 4:00 PM β 9:00 PM
Saturday: 9:00 AM β 9:00 PM (Breakfast 9β11 AM)
Sunday: 9:00 AM β 8:00 PM (Breakfast 9β11 AM)
Menu:
Menu is displayed as images:
/images/menu1.jpg
/images/menu2.jpg
/images/pizza.jpg
Photo Gallery:
Food photos are displayed as images:
/images/food1.jpg
/images/food2.jpg
/images/food3.jpg
Contact:
Phone: (715) 423-8259
Address: Kellner, WI / Wisconsin Rapids, WI 54494
Website Visual/Design Notes:
Hero section uses the restaurant sign photo as a background with a dark overlay and bold restaurant name.
White content cards for each section (About, Hours, Menu, Gallery, Contact).
Dark header and footer.
Mobile-first, responsive layout.
Menu and food images are shown as actual images, not text.
Background features a collage of food images (food1.jpg, food2.jpg, food3.jpg) in the corners.
Click-to-call phone number in the Contact section.
- about.html +49 -0
- components/header.js +6 -3
- contact.html +46 -0
- gallery.html +35 -0
- hours.html +42 -0
- index.html +15 -18
- script.js +13 -43
|
@@ -0,0 +1,49 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>About β Italias Romanos Too</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="http://static.photos/food/64x64/42">
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 12 |
+
</head>
|
| 13 |
+
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 transition-colors">
|
| 14 |
+
<custom-header></custom-header>
|
| 15 |
+
|
| 16 |
+
<main class="max-w-4xl mx-auto px-4 py-10">
|
| 17 |
+
<section class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 md:p-8">
|
| 18 |
+
<h1 class="text-3xl md:text-4xl font-extrabold mb-4">About Italias Romanos Too</h1>
|
| 19 |
+
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
|
| 20 |
+
Italias Romanos Too is your local spot for pizza and more in Kellner and Wisconsin Rapids, WI. Proudly serving our community with dine-in, pick-up, and delivery.
|
| 21 |
+
</p>
|
| 22 |
+
<div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
|
| 23 |
+
<div class="bg-orange-50 dark:bg-orange-900/20 rounded-xl p-4">
|
| 24 |
+
<i data-feather="phone" class="w-8 h-8 mx-auto text-orange-500 mb-2"></i>
|
| 25 |
+
<p class="font-semibold">Call Ahead</p>
|
| 26 |
+
<p class="text-sm text-gray-600 dark:text-gray-400">(715) 423-8259</p>
|
| 27 |
+
</div>
|
| 28 |
+
<div class="bg-orange-50 dark:bg-orange-900/20 rounded-xl p-4">
|
| 29 |
+
<i data-feather="clock" class="w-8 h-8 mx-auto text-orange-500 mb-2"></i>
|
| 30 |
+
<p class="font-semibold">Fresh Daily</p>
|
| 31 |
+
<p class="text-sm text-gray-600 dark:text-gray-400">TueβSun</p>
|
| 32 |
+
</div>
|
| 33 |
+
<div class="bg-orange-50 dark:bg-orange-900/20 rounded-xl p-4">
|
| 34 |
+
<i data-feather="heart" class="w-8 h-8 mx-auto text-orange-500 mb-2"></i>
|
| 35 |
+
<p class="font-semibold">80% Recommend</p>
|
| 36 |
+
<p class="text-sm text-gray-600 dark:text-gray-400">23 Reviews</p>
|
| 37 |
+
</div>
|
| 38 |
+
</div>
|
| 39 |
+
</section>
|
| 40 |
+
</main>
|
| 41 |
+
|
| 42 |
+
<custom-footer></custom-footer>
|
| 43 |
+
|
| 44 |
+
<script src="components/header.js"></script>
|
| 45 |
+
<script src="components/footer.js"></script>
|
| 46 |
+
<script src="script.js"></script>
|
| 47 |
+
<script>feather.replace();</script>
|
| 48 |
+
</body>
|
| 49 |
+
</html>
|
|
@@ -43,10 +43,13 @@ class CustomHeader extends HTMLElement {
|
|
| 43 |
<header>
|
| 44 |
<div class="logo">BistroByte</div>
|
| 45 |
<nav>
|
| 46 |
-
<a href="index.html">
|
| 47 |
-
<a href="
|
|
|
|
|
|
|
|
|
|
| 48 |
</nav>
|
| 49 |
-
|
| 50 |
`;
|
| 51 |
}
|
| 52 |
}
|
|
|
|
| 43 |
<header>
|
| 44 |
<div class="logo">BistroByte</div>
|
| 45 |
<nav>
|
| 46 |
+
<a href="index.html">Home</a>
|
| 47 |
+
<a href="about.html">About</a>
|
| 48 |
+
<a href="hours.html">Hours</a>
|
| 49 |
+
<a href="gallery.html">Gallery</a>
|
| 50 |
+
<a href="contact.html">Contact</a>
|
| 51 |
</nav>
|
| 52 |
+
</header>
|
| 53 |
`;
|
| 54 |
}
|
| 55 |
}
|
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Contact β Italias Romanos Too</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="http://static.photos/food/64x64/42">
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 12 |
+
</head>
|
| 13 |
+
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 transition-colors">
|
| 14 |
+
<custom-header></custom-header>
|
| 15 |
+
|
| 16 |
+
<main class="max-w-3xl mx-auto px-4 py-10">
|
| 17 |
+
<section class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 md:p-8">
|
| 18 |
+
<h1 class="text-3xl md:text-4xl font-extrabold mb-6">Contact Us</h1>
|
| 19 |
+
<div class="space-y-4 text-lg">
|
| 20 |
+
<div class="flex items-center gap-4">
|
| 21 |
+
<i data-feather="phone" class="w-6 h-6 text-orange-500"></i>
|
| 22 |
+
<a href="tel:7154238259" class="hover:text-orange-500 transition">(715) 423-8259</a>
|
| 23 |
+
</div>
|
| 24 |
+
<div class="flex items-center gap-4">
|
| 25 |
+
<i data-feather="map-pin" class="w-6 h-6 text-orange-500"></i>
|
| 26 |
+
<span>Kellner, WI / Wisconsin Rapids, WI 54494</span>
|
| 27 |
+
</div>
|
| 28 |
+
<div class="flex items-center gap-4">
|
| 29 |
+
<i data-feather="clock" class="w-6 h-6 text-orange-500"></i>
|
| 30 |
+
<span>TueβSun: 4β8 PM (Fri till 9, Weekend breakfast 9β11 AM)</span>
|
| 31 |
+
</div>
|
| 32 |
+
</div>
|
| 33 |
+
<div class="mt-6 p-4 rounded-xl bg-orange-50 dark:bg-orange-900/20 text-center">
|
| 34 |
+
<p class="text-sm text-gray-700 dark:text-gray-300">Call ahead for pick-up or delivery. We look forward to serving you!</p>
|
| 35 |
+
</div>
|
| 36 |
+
</section>
|
| 37 |
+
</main>
|
| 38 |
+
|
| 39 |
+
<custom-footer></custom-footer>
|
| 40 |
+
|
| 41 |
+
<script src="components/header.js"></script>
|
| 42 |
+
<script src="components/footer.js"></script>
|
| 43 |
+
<script src="script.js"></script>
|
| 44 |
+
<script>feather.replace();</script>
|
| 45 |
+
</body>
|
| 46 |
+
</html>
|
|
@@ -0,0 +1,35 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Gallery β Italias Romanos Too</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="http://static.photos/food/64x64/42">
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 12 |
+
</head>
|
| 13 |
+
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 transition-colors">
|
| 14 |
+
<custom-header></custom-header>
|
| 15 |
+
|
| 16 |
+
<main class="max-w-5xl mx-auto px-4 py-10">
|
| 17 |
+
<h1 class="text-3xl md:text-4xl font-extrabold mb-6 text-center">Photo Gallery</h1>
|
| 18 |
+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
| 19 |
+
<img src="http://static.photos/pizza/640x360/1" alt="Pizza" class="rounded-2xl shadow-md w-full h-64 object-cover">
|
| 20 |
+
<img src="http://static.photos/food/640x360/2" alt="Food" class="rounded-2xl shadow-md w-full h-64 object-cover">
|
| 21 |
+
<img src="http://static.photos/food/640x360/3" alt="Food" class="rounded-2xl shadow-md w-full h-64 object-cover">
|
| 22 |
+
<img src="http://static.photos/food/640x360/4" alt="Food" class="rounded-2xl shadow-md w-full h-64 object-cover">
|
| 23 |
+
<img src="http://static.photos/food/640x360/5" alt="Food" class="rounded-2xl shadow-md w-full h-64 object-cover">
|
| 24 |
+
<img src="http://static.photos/restaurant/640x360/6" alt="Restaurant" class="rounded-2xl shadow-md w-full h-64 object-cover">
|
| 25 |
+
</div>
|
| 26 |
+
</main>
|
| 27 |
+
|
| 28 |
+
<custom-footer></custom-footer>
|
| 29 |
+
|
| 30 |
+
<script src="components/header.js"></script>
|
| 31 |
+
<script src="components/footer.js"></script>
|
| 32 |
+
<script src="script.js"></script>
|
| 33 |
+
<script>feather.replace();</script>
|
| 34 |
+
</body>
|
| 35 |
+
</html>
|
|
@@ -0,0 +1,42 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Hours β Italias Romanos Too</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="http://static.photos/food/64x64/42">
|
| 8 |
+
<link rel="stylesheet" href="style.css">
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 12 |
+
</head>
|
| 13 |
+
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 transition-colors">
|
| 14 |
+
<custom-header></custom-header>
|
| 15 |
+
|
| 16 |
+
<main class="max-w-3xl mx-auto px-4 py-10">
|
| 17 |
+
<section class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 md:p-8">
|
| 18 |
+
<h1 class="text-3xl md:text-4xl font-extrabold mb-6">Hours</h1>
|
| 19 |
+
<ul class="space-y-3 text-lg">
|
| 20 |
+
<li class="flex justify-between"><span>Monday</span><span class="font-semibold text-red-500">Closed</span></li>
|
| 21 |
+
<li class="flex justify-between"><span>Tuesday</span><span class="font-semibold">4:00 PM β 8:00 PM</span></li>
|
| 22 |
+
<li class="flex justify-between"><span>Wednesday</span><span class="font-semibold">4:00 PM β 8:00 PM</span></li>
|
| 23 |
+
<li class="flex justify-between"><span>Thursday</span><span class="font-semibold">4:00 PM β 8:00 PM</span></li>
|
| 24 |
+
<li class="flex justify-between"><span>Friday</span><span class="font-semibold">4:00 PM β 9:00 PM</span></li>
|
| 25 |
+
<li class="flex justify-between"><span>Saturday</span><span class="font-semibold">9:00 AM β 9:00 PM <span class="text-xs text-gray-500 dark:text-gray-400">(Breakfast 9β11 AM)</span></span></li>
|
| 26 |
+
<li class="flex justify-between"><span>Sunday</span><span class="font-semibold">9:00 AM β 8:00 PM <span class="text-xs text-gray-500 dark:text-gray-400">(Breakfast 9β11 AM)</span></span></li>
|
| 27 |
+
</ul>
|
| 28 |
+
<div class="mt-6 p-4 rounded-xl bg-orange-50 dark:bg-orange-900/20 text-center">
|
| 29 |
+
<i data-feather="info" class="w-6 h-6 mx-auto text-orange-500 mb-2"></i>
|
| 30 |
+
<p class="text-sm text-gray-700 dark:text-gray-300">Breakfast served Saturday & Sunday 9β11 AM only</p>
|
| 31 |
+
</div>
|
| 32 |
+
</section>
|
| 33 |
+
</main>
|
| 34 |
+
|
| 35 |
+
<custom-footer></custom-footer>
|
| 36 |
+
|
| 37 |
+
<script src="components/header.js"></script>
|
| 38 |
+
<script src="components/footer.js"></script>
|
| 39 |
+
<script src="script.js"></script>
|
| 40 |
+
<script>feather.replace();</script>
|
| 41 |
+
</body>
|
| 42 |
+
</html>
|
|
@@ -3,8 +3,8 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>
|
| 7 |
-
|
| 8 |
<link rel="stylesheet" href="style.css">
|
| 9 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
|
@@ -21,11 +21,11 @@
|
|
| 21 |
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent"></div>
|
| 22 |
</div>
|
| 23 |
<div class="relative z-10 px-4">
|
| 24 |
-
<h1 class="text-4xl md:text-6xl font-extrabold text-white drop-shadow-lg">
|
| 25 |
-
<p class="mt-4 text-lg md:text-xl text-white/90 max-w-xl mx-auto">
|
| 26 |
-
<a href="#menu" class="mt-6 inline-block px-6 py-3 rounded-full bg-orange-500 hover:bg-orange-600 text-white font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition">
|
| 27 |
</div>
|
| 28 |
-
|
| 29 |
|
| 30 |
<!-- LIVE SEARCH & FILTERS -->
|
| 31 |
<section class="sticky top-0 z-20 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-200 dark:border-gray-700">
|
|
@@ -36,21 +36,20 @@
|
|
| 36 |
</div>
|
| 37 |
<div class="flex gap-2 flex-wrap">
|
| 38 |
<button class="filter-btn active" data-filter="all">All</button>
|
|
|
|
|
|
|
|
|
|
| 39 |
<button class="filter-btn" data-filter="breakfast">Breakfast</button>
|
| 40 |
-
<button class="filter-btn" data-filter="lunch">Lunch</button>
|
| 41 |
-
<button class="filter-btn" data-filter="dinner">Dinner</button>
|
| 42 |
<button class="filter-btn" data-filter="dessert">Dessert</button>
|
| 43 |
-
<button class="filter-btn" data-filter="vegan">Vegan</button>
|
| 44 |
</div>
|
| 45 |
-
|
| 46 |
<button id="themeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition" aria-label="Toggle theme">
|
| 47 |
<i data-feather="moon" class="w-5 h-5"></i>
|
| 48 |
</button>
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
</div>
|
| 54 |
</div>
|
| 55 |
</section>
|
| 56 |
|
|
@@ -65,13 +64,11 @@
|
|
| 65 |
</div>
|
| 66 |
</section>
|
| 67 |
</main>
|
| 68 |
-
|
| 69 |
<custom-footer></custom-footer>
|
| 70 |
|
| 71 |
<script src="components/header.js"></script>
|
| 72 |
<script src="components/footer.js"></script>
|
| 73 |
<script src="script.js"></script>
|
| 74 |
<script>feather.replace();</script>
|
| 75 |
-
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 76 |
</body>
|
| 77 |
-
</html>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Italias Romanos Too β Local Pizza & More</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="http://static.photos/food/64x64/42">
|
| 8 |
<link rel="stylesheet" href="style.css">
|
| 9 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
|
|
|
| 21 |
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent"></div>
|
| 22 |
</div>
|
| 23 |
<div class="relative z-10 px-4">
|
| 24 |
+
<h1 class="text-4xl md:text-6xl font-extrabold text-white drop-shadow-lg">Italias Romanos Too</h1>
|
| 25 |
+
<p class="mt-4 text-lg md:text-xl text-white/90 max-w-xl mx-auto">Your local spot for pizza and more in Kellner & Wisconsin Rapids, WI.</p>
|
| 26 |
+
<a href="#menu" class="mt-6 inline-block px-6 py-3 rounded-full bg-orange-500 hover:bg-orange-600 text-white font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition">See Menu</a>
|
| 27 |
</div>
|
| 28 |
+
</section>
|
| 29 |
|
| 30 |
<!-- LIVE SEARCH & FILTERS -->
|
| 31 |
<section class="sticky top-0 z-20 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-200 dark:border-gray-700">
|
|
|
|
| 36 |
</div>
|
| 37 |
<div class="flex gap-2 flex-wrap">
|
| 38 |
<button class="filter-btn active" data-filter="all">All</button>
|
| 39 |
+
<button class="filter-btn" data-filter="pizza">Pizza</button>
|
| 40 |
+
<button class="filter-btn" data-filter="pasta">Pasta</button>
|
| 41 |
+
<button class="filter-btn" data-filter="sandwiches">Sandwiches</button>
|
| 42 |
<button class="filter-btn" data-filter="breakfast">Breakfast</button>
|
|
|
|
|
|
|
| 43 |
<button class="filter-btn" data-filter="dessert">Dessert</button>
|
|
|
|
| 44 |
</div>
|
| 45 |
+
<div class="ml-auto flex items-center gap-2">
|
| 46 |
<button id="themeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition" aria-label="Toggle theme">
|
| 47 |
<i data-feather="moon" class="w-5 h-5"></i>
|
| 48 |
</button>
|
| 49 |
+
<a href="contact.html" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition" aria-label="Contact">
|
| 50 |
+
<i data-feather="phone" class="w-5 h-5"></i>
|
| 51 |
+
</a>
|
| 52 |
+
</div>
|
|
|
|
| 53 |
</div>
|
| 54 |
</section>
|
| 55 |
|
|
|
|
| 64 |
</div>
|
| 65 |
</section>
|
| 66 |
</main>
|
|
|
|
| 67 |
<custom-footer></custom-footer>
|
| 68 |
|
| 69 |
<script src="components/header.js"></script>
|
| 70 |
<script src="components/footer.js"></script>
|
| 71 |
<script src="script.js"></script>
|
| 72 |
<script>feather.replace();</script>
|
|
|
|
| 73 |
</body>
|
| 74 |
+
</html>
|
|
@@ -5,19 +5,20 @@ const Store = {
|
|
| 5 |
filter: 'all',
|
| 6 |
search: ''
|
| 7 |
};
|
| 8 |
-
|
| 9 |
-
// Dummy menu (in real life: fetch from API)
|
| 10 |
const dummyMenu = [
|
| 11 |
-
{ id: 1, name: "
|
| 12 |
-
{ id: 2, name: "
|
| 13 |
-
{ id: 3, name: "
|
| 14 |
-
{ id: 4, name: "
|
| 15 |
-
{ id: 5, name: "
|
| 16 |
-
{ id: 6, name: "
|
| 17 |
-
{ id: 7, name: "
|
| 18 |
-
{ id: 8, name: "
|
|
|
|
|
|
|
|
|
|
| 19 |
];
|
| 20 |
-
|
| 21 |
Store.menu = dummyMenu;
|
| 22 |
|
| 23 |
// Render menu
|
|
@@ -51,35 +52,7 @@ function renderMenu() {
|
|
| 51 |
`);
|
| 52 |
document.querySelectorAll('.addBtn').forEach(btn => btn.addEventListener('click', addToCart));
|
| 53 |
}
|
| 54 |
-
|
| 55 |
-
// Cart logic
|
| 56 |
-
function saveCart() {
|
| 57 |
-
localStorage.setItem('bbCart', JSON.stringify(Store.cart));
|
| 58 |
-
updateBadge();
|
| 59 |
-
}
|
| 60 |
-
|
| 61 |
-
function updateBadge() {
|
| 62 |
-
const badge = document.getElementById('cartBadge');
|
| 63 |
-
const total = Store.cart.reduce((a, b) => a + b.qty, 0);
|
| 64 |
-
badge.textContent = total;
|
| 65 |
-
badge.classList.toggle('hidden', total === 0);
|
| 66 |
-
}
|
| 67 |
-
|
| 68 |
-
function addToCart(e) {
|
| 69 |
-
const id = +e.target.dataset.id;
|
| 70 |
-
const item = Store.menu.find(m => m.id === id);
|
| 71 |
-
const existing = Store.cart.find(i => i.id === id);
|
| 72 |
-
if (existing) existing.qty += 1;
|
| 73 |
-
else Store.cart.push({ ...item, qty: 1 });
|
| 74 |
-
saveCart();
|
| 75 |
-
// Tiny toast
|
| 76 |
-
const toast = document.createElement('div');
|
| 77 |
-
toast.className = 'fixed bottom-6 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full bg-gray-800 text-white text-sm shadow-lg';
|
| 78 |
-
toast.innerText = `${item.name} added!`;
|
| 79 |
-
document.body.appendChild(toast);
|
| 80 |
-
setTimeout(() => toast.remove(), 1500);
|
| 81 |
-
}
|
| 82 |
-
|
| 83 |
// Filters
|
| 84 |
document.querySelectorAll('.filter-btn').forEach(btn => {
|
| 85 |
btn.addEventListener('click', e => {
|
|
@@ -95,7 +68,6 @@ document.getElementById('searchInput').addEventListener('input', e => {
|
|
| 95 |
Store.search = e.target.value;
|
| 96 |
renderMenu();
|
| 97 |
});
|
| 98 |
-
|
| 99 |
// Theme toggle
|
| 100 |
const themeBtn = document.getElementById('themeToggle');
|
| 101 |
const html = document.documentElement;
|
|
@@ -112,7 +84,5 @@ themeBtn.addEventListener('click', () => {
|
|
| 112 |
themeBtn.innerHTML = isDark ? '<i data-feather="sun" class="w-5 h-5"></i>' : '<i data-feather="moon" class="w-5 h-5"></i>';
|
| 113 |
feather.replace();
|
| 114 |
});
|
| 115 |
-
|
| 116 |
// Init
|
| 117 |
renderMenu();
|
| 118 |
-
updateBadge();
|
|
|
|
| 5 |
filter: 'all',
|
| 6 |
search: ''
|
| 7 |
};
|
| 8 |
+
// Italias Romanos Too menu
|
|
|
|
| 9 |
const dummyMenu = [
|
| 10 |
+
{ id: 1, name: "12\" Cheese Pizza", price: 12.00, category: "pizza", desc: "Classic hand-tossed crust, house red sauce, mozzarella.", img: "http://static.photos/pizza/640x360/1" },
|
| 11 |
+
{ id: 2, name: "14\" Pepperoni Pizza", price: 16.50, category: "pizza", desc: "Loaded with crispy pepperoni on our signature cheese pie.", img: "http://static.photos/pizza/640x360/2" },
|
| 12 |
+
{ id: 3, name: "Meat Lovers Pizza", price: 19.00, category: "pizza", desc: "Pepperoni, sausage, bacon, ham on thick crust.", img: "http://static.photos/pizza/640x360/3" },
|
| 13 |
+
{ id: 4, name: "Spaghetti & Meatballs", price: 11.00, category: "pasta", desc: "House-made marinara, three giant meatballs, garlic bread.", img: "http://static.photos/food/640x360/4" },
|
| 14 |
+
{ id: 5, name: "Fettuccine Alfredo", price: 10.50, category: "pasta", desc: "Creamy parmesan sauce, fettuccine, parsley.", img: "http://static.photos/food/640x360/5" },
|
| 15 |
+
{ id: 6, name: "Italian Sub", price: 9.50, category: "sandwiches", desc: "Ham, salami, pepperoni, provolone, lettuce, tomato, Italian dressing.", img: "http://static.photos/food/640x360/6" },
|
| 16 |
+
{ id: 7, name: "Meatball Sub", price: 9.00, category: "sandwiches", desc: "Meatballs, marinara, mozzarella on toasted hoagie.", img: "http://static.photos/food/640x360/7" },
|
| 17 |
+
{ id: 8, name: "Saturday Breakfast Skillet", price: 8.50, category: "breakfast", desc: "Two eggs, hash browns, sausage, cheddar, toast.", img: "http://static.photos/food/640x360/8" },
|
| 18 |
+
{ id: 9, name: "Sunday Pancakes", price: 7.00, category: "breakfast", desc: "Three fluffy pancakes, maple syrup, butter.", img: "http://static.photos/food/640x360/9" },
|
| 19 |
+
{ id: 10, name: "Tiramisu", price: 5.50, category: "dessert", desc: "Coffee-soaked ladyfingers, mascarpone, cocoa.", img: "http://static.photos/food/640x360/10" },
|
| 20 |
+
{ id: 11, name: "Cannoli", price: 4.50, category: "dessert", desc: "Crispy shell, sweet ricotta, chocolate chips.", img: "http://static.photos/food/640x360/11" }
|
| 21 |
];
|
|
|
|
| 22 |
Store.menu = dummyMenu;
|
| 23 |
|
| 24 |
// Render menu
|
|
|
|
| 52 |
`);
|
| 53 |
document.querySelectorAll('.addBtn').forEach(btn => btn.addEventListener('click', addToCart));
|
| 54 |
}
|
| 55 |
+
// Cart logic removed β Italias Romanos Too is call-in only
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 56 |
// Filters
|
| 57 |
document.querySelectorAll('.filter-btn').forEach(btn => {
|
| 58 |
btn.addEventListener('click', e => {
|
|
|
|
| 68 |
Store.search = e.target.value;
|
| 69 |
renderMenu();
|
| 70 |
});
|
|
|
|
| 71 |
// Theme toggle
|
| 72 |
const themeBtn = document.getElementById('themeToggle');
|
| 73 |
const html = document.documentElement;
|
|
|
|
| 84 |
themeBtn.innerHTML = isDark ? '<i data-feather="sun" class="w-5 h-5"></i>' : '<i data-feather="moon" class="w-5 h-5"></i>';
|
| 85 |
feather.replace();
|
| 86 |
});
|
|
|
|
| 87 |
// Init
|
| 88 |
renderMenu();
|
|
|