<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocktail Mobile</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#291B2C',secondary:'#CCA969'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
.gradient-overlay {
background: linear-gradient(90deg, rgba(41,27,44,0.9) 0%, rgba(41,27,44,0.8) 50%, rgba(41,27,44,0) 100%);
}
.package-card:hover {
transform: translateY(-8px);
transition: all 0.3s ease;
}
.custom-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #CCA969;
border-radius: 50%;
cursor: pointer;
}
.custom-range {
-webkit-appearance: none;
width: 100%;
height: 4px;
background: #e5e7eb;
border-radius: 5px;
outline: none;
}
</style>
</head>
<body class="bg-white">
<nav class="bg-primary fixed w-full z-50">
<div class="container mx-auto px-8 py-6">
<div class="flex items-center justify-between">
<img src="https://static.readdy.ai/image/3fdff747770f20e752b87e99f07fae7e/4a06771a4dc01cada138e77d76b5b8ab.png" alt="Mockology" class="h-20">
<div class="hidden md:flex space-x-12">
<a href="#events" class="text-white hover:text-secondary transition text-lg" onclick="document.getElementById('events').scrollIntoView({behavior: 'smooth'})">Events</a>
<a href="#packages" class="text-white hover:text-secondary transition text-lg" onclick="document.getElementById('packages').scrollIntoView({behavior: 'smooth'})">Packages</a>
<a href="#drinks" class="text-white hover:text-secondary transition text-lg" onclick="document.getElementById('drinks').scrollIntoView({behavior: 'smooth'})">Signature Drinks</a>
<a href="#custom" class="text-white hover:text-secondary transition text-lg" onclick="document.getElementById('custom').scrollIntoView({behavior: 'smooth'})">Contact</a>
</div>
<button class="bg-secondary text-primary px-8 py-3 !rounded-button font-semibold text-lg hover:opacity-90 transition" onclick="document.getElementById('custom').scrollIntoView({behavior: 'smooth'})">
Book Now
</button>
</div>
</div>
</nav>
<section class="relative h-screen">
<div class="absolute inset-0 z-0">
<img src="https://public.readdy.ai/ai/img_res/b8301cd24d837c4f8b90a05357268590.jpg"
class="w-full h-full object-cover" alt="Hero Image">
<div class="absolute inset-0 gradient-overlay"></div>
</div>
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-5 pointer-events-none z-10">
<img src="https://static.readdy.ai/image/3fdff747770f20e752b87e99f07fae7e/4a06771a4dc01cada138e77d76b5b8ab.png" alt="Mockology" class="w-[80vw]">
</div>
<div class="relative container mx-auto px-6 h-full flex items-center">
<div class="max-w-2xl text-white mt-20">
<div class="text-secondary text-xl mb-2">The Mocktail Specialists</div>
<h1 class="text-6xl font-bold mb-6">Elevate Your Events with Premium Mocktails</h1>
<p class="text-xl mb-8">Crafting unforgettable moments with sophisticated non-alcoholic beverages for weddings, corporate events, and special celebrations.</p>
<div class="flex space-x-4">
<button class="bg-secondary text-primary px-8 py-3 !rounded-button font-semibold hover:opacity-90 transition">
Explore Packages
</button>
<button class="border-2 border-white text-white px-8 py-3 !rounded-button font-semibold hover:bg-white hover:text-primary transition">
Learn More
</button>
</div>
</div>
</div>
<style>
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
}
.package-card {
scroll-snap-align: center;
transition: all 0.3s ease;
}
</style>
</div>
</section>
<section id="events" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-primary text-center mb-16">Perfect for Every Celebration</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition">
<img src="https://public.readdy.ai/ai/img_res/58417b5bf396c3c8fac1603853df1fb7.jpg"
class="w-full h-48 object-cover" alt="Weddings">
<div class="p-6">
<h3 class="text-xl font-semibold text-primary mb-2">Weddings & Engagements</h3>
<p class="text-gray-600">Create magical moments with our signature mocktails perfectly crafted for your special day.</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition">
<img src="https://public.readdy.ai/ai/img_res/308ed51a73405161410c3e67119b0426.jpg"
class="w-full h-48 object-cover" alt="Corporate Events">
<div class="p-6">
<h3 class="text-xl font-semibold text-primary mb-2">Corporate Events</h3>
<p class="text-gray-600">Impress your clients and team with sophisticated non-alcoholic beverages at your next business gathering.</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition">
<img src="https://public.readdy.ai/ai/img_res/0557d2d0962bf19b227c6d4e293281e3.jpg"
class="w-full h-48 object-cover" alt="Private Parties">
<div class="p-6">
<h3 class="text-xl font-semibold text-primary mb-2">Private Celebrations</h3>
<p class="text-gray-600">From birthdays to baby showers, make your celebration unique with our custom mocktail experiences.</p>
</div>
</div>
</div>
</div>
<style>
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
}
.package-card {
scroll-snap-align: center;
transition: all 0.3s ease;
}
</style>
</div>
</section>
<section id="packages" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-primary text-center mb-16">Choose Your Perfect Package</h2>
<div class="overflow-x-auto pb-4">
<div class="flex gap-8 overflow-x-auto snap-x snap-mandatory px-4 pb-4 hide-scrollbar" style="scroll-padding: 0 50%;">
<div class="package-card bg-white rounded-lg shadow-lg p-8 border-2 border-secondary transition snap-center flex-shrink-0 w-[calc(40%-1rem)]" style="min-width: 400px;">
<h3 class="text-2xl font-bold text-primary mb-4">Table Service</h3>
<div class="text-3xl font-bold text-secondary mb-6">£100 - £250</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Fully Stocked Mocktail Station</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Pre-made Drinks</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Complete Garnishes</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>All Essential Equipment</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Self-service Setup</li>
</ul>
<p class="text-gray-600 mb-4">Perfect for more intimate gatherings like BBQ's, birthday parties and baby or bridal showers. Ideal for 25 - 50 people.</p>
<p class="text-sm text-gray-500 italic mb-4">Available in Peterborough and surrounding areas up to 38 miles.</p>
<button class="w-full bg-primary text-white py-3 !rounded-button font-semibold hover:opacity-90 transition">
Select Package
</button>
</div>
<div class="package-card bg-white rounded-lg shadow-lg p-8 border-2 border-secondary transition snap-center flex-shrink-0 w-[calc(40%-1rem)]" style="min-width: 400px;">
<h3 class="text-2xl font-bold text-primary mb-4">Bronze Package</h3>
<div class="text-3xl font-bold text-secondary mb-6">£300 - £450</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>5 Classic & Flavoured Mojito Options</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>2 Uniformed Mixologists</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Custom Event Menu</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Total of 100 Drinks</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>3 Hour Service</li>
</ul>
<p class="text-gray-600 mb-4">Perfect for mojito lovers who want a simple, refreshing experience. Ideal for up to 50 people.</p>
<p class="text-sm text-gray-500 italic mb-4">You can customise this package based on number of guests, drinks, service length, mixologists and bar.</p>
<button class="w-full bg-primary text-white py-3 !rounded-button font-semibold hover:opacity-90 transition">
Select Package
</button>
</div>
<div class="package-card bg-white rounded-lg shadow-lg p-8 border-2 border-secondary transition snap-center flex-shrink-0 w-[calc(40%-1rem)]" style="min-width: 400px;">
<div class="absolute top-4 right-4 bg-secondary text-primary px-3 py-1 rounded-full text-sm font-semibold">Most Popular</div>
<h3 class="text-2xl font-bold text-primary mb-4">Silver Package</h3>
<div class="text-3xl font-bold text-secondary mb-6">£600 - £750</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>2 Mojitos and 3 Premium Mocktails</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>2 Uniformed Mixologists</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Custom Event Menu with Signature Drink</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Total of 300 Drinks</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>4 Hour Service</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Bar Set Up</li>
</ul>
<p class="text-gray-600 mb-4">A full alcohol-free bar experience with a mix of refreshing, fun mocktails. Ideal for up to 150 people.</p>
<p class="text-sm text-gray-500 italic mb-4">You can customise this package based on number of guests, drinks, service length and mixologists.</p>
<button class="w-full bg-primary text-white py-3 !rounded-button font-semibold hover:opacity-90 transition">
Select Package
</button>
</div>
<div class="package-card bg-white rounded-lg shadow-lg p-8 border-2 border-secondary transition snap-center flex-shrink-0 w-[calc(40%-1rem)]" style="min-width: 400px;">
<h3 class="text-2xl font-bold text-primary mb-4">Gold Package</h3>
<div class="text-3xl font-bold text-secondary mb-6">£900 - £1,200</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>5 Mojitos and 5 Premium Mocktails</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>3 Uniformed Mixologists</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Custom Event Menu with 2 Signature Drinks</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>No Drink Limit</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>5 Hour Service</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Bar Set Up</li>
</ul>
<p class="text-gray-600 mb-4">The ultimate mocktail bar experience for big events. Ideal for up to 300 people.</p>
<p class="text-sm text-gray-500 italic mb-4">You can customise this package based on number of guests, drinks, service length and mixologists.</p>
<button class="w-full bg-primary text-white py-3 !rounded-button font-semibold hover:opacity-90 transition">
Select Package
</button>
</div>
<div class="package-card bg-white rounded-lg shadow-lg p-8 border-2 border-secondary transition snap-center flex-shrink-0 w-[calc(40%-1rem)]" style="min-width: 400px;">
<div class="absolute top-4 right-4 bg-primary text-secondary px-3 py-1 rounded-full text-sm font-semibold">Premium</div>
<h3 class="text-2xl font-bold text-primary mb-4">Platinum Package</h3>
<div class="text-3xl font-bold text-secondary mb-6">£1,600+</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>8 Premium Mocktails and Mojitos including 2 Signature Drinks</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>3 Uniformed Mixologists</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Custom Event Menu and a Branded Drink</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>Bar Set Up, Cocktail Trees and Glassware</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>"Make a Mocktail" Interactive Experience</li>
<li class="flex items-center"><i class="ri-check-line text-secondary mr-2"></i>6 Hour Service</li>
</ul>
<p class="text-gray-600 mb-4">For unforgettable events, an unmatched interactive experience with expertly crafted mocktails. Ideal for up to 500 people.</p>
<p class="text-sm text-gray-500 italic mb-4">You can customise this package based on number of guests, drinks, service length and mixologists. Just drop us a message!</p>
<button class="w-full bg-primary text-white py-3 !rounded-button font-semibold hover:opacity-90 transition">
Select Package
</button>
</div>
</div>
</div>
<style>
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
}
.package-card {
scroll-snap-align: center;
transition: all 0.3s ease;
}
</style>
</div>
</section>
<section id="custom" class="py-20 bg-secondary bg-opacity-10">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-primary text-center mb-16">Create Your Custom Package</h2>
<div class="bg-white rounded-lg shadow-xl p-8 max-w-3xl mx-auto">
<form id="enquiryForm" class="space-y-8">
<div>
<label class="block text-primary font-semibold mb-2">What is your event?</label>
<input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:border-secondary" id="eventType" name="eventType" required>
</div>
<div>
<label class="block text-primary font-semibold mb-2">Where will the event be?</label>
<input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:border-secondary" id="eventLocation" name="eventLocation" required>
</div>
<div>
<label class="block text-primary font-semibold mb-2">How many guests are you expecting?</label>
<select class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:border-secondary" id="guestCount" name="guestCount" required>
<option value="">Please select...</option>
<option value="small">25-50 guests</option>
<option value="medium">51-150 guests</option>
<option value="large">151-300 guests</option>
<option value="xlarge">301-500 guests</option>
</select>
</div>
<div>
<label class="block text-primary font-semibold mb-2">What kind of set up are you interested in?</label>
<select class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:border-secondary" id="setupType" name="setupType" required>
<option value="">Please select...</option>
<option value="table">Table Service</option>
<option value="bar">Bar Service</option>
<option value="both">Both</option>
</select>
</div>
<div>
<label class="block text-primary font-semibold mb-2">Service Duration (hours)</label>
<input type="number" min="2" max="8" class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:border-secondary" id="duration" name="duration" required>
</div>
<div>
<label class="block text-primary font-semibold mb-2">Your Phone Number</label>
<input type="tel" class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:border-secondary" id="phone" name="phone" required>
</div>
<div>
<label class="block text-primary font-semibold mb-2">Your Email Address</label>
<input type="email" class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:border-secondary" id="email" name="email" required>
</div>
<button type="submit" class="w-full bg-primary text-white py-3 !rounded-button font-semibold hover:opacity-90 transition">
Submit Enquiry
</button>
</form>
</div>
<script>
document.getElementById('enquiryForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const data = {};
formData.forEach((value, key) => data[key] = value);
const mailtoLink = `mailto:hello@mockology.co.uk?subject=New Event Enquiry&body=Event Type: ${data.eventType}%0D%0A
Location: ${data.eventLocation}%0D%0A
Guest Count: ${data.guestCount}%0D%0A
Setup Type: ${data.setupType}%0D%0A
Duration: ${data.duration} hours%0D%0A
Phone: ${data.phone}%0D%0A
Email: ${data.email}`;
window.location.href = mailtoLink;
});
</script>
</div>
<style>
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
}
.package-card {
scroll-snap-align: center;
transition: all 0.3s ease;
}
</style>
</div>
</section>
<section id="drinks" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-primary text-center mb-16">Our Signature Drinks</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://public.readdy.ai/ai/img_res/98d43d2610e9bbae4cd9affd8e858884.jpg"
class="w-full h-48 object-cover" alt="Berry Bliss">
<div class="p-6">
<h3 class="text-xl font-semibold text-primary mb-2">Berry Bliss</h3>
<p class="text-gray-600">Fresh berries, mint, and sparkling water create this refreshing signature drink.</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://public.readdy.ai/ai/img_res/e9f7a6a9407f71c4056dd5d1f7e4454b.jpg"
class="w-full h-48 object-cover" alt="Tropical Paradise">
<div class="p-6">
<h3 class="text-xl font-semibold text-primary mb-2">Tropical Paradise</h3>
<p class="text-gray-600">A perfect blend of tropical fruits with coconut water and fresh lime.</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://public.readdy.ai/ai/img_res/9587bf38a78a67eb7edc9be40a71b059.jpg"
class="w-full h-48 object-cover" alt="Citrus Spark">
<div class="p-6">
<h3 class="text-xl font-semibold text-primary mb-2">Citrus Spark</h3>
<p class="text-gray-600">Grapefruit, rosemary, and premium tonic water with a smoky finish.</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://public.readdy.ai/ai/img_res/be6029309d4ed5112796553b5b7edeef.jpg"
class="w-full h-48 object-cover" alt="Purple Rain">
<div class="p-6">
<h3 class="text-xl font-semibold text-primary mb-2">Purple Rain</h3>
<p class="text-gray-600">Butterfly pea flower tea with lavender and premium elderflower tonic.</p>
</div>
</div>
</div>
</div>
<style>
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
}
.package-card {
scroll-snap-align: center;
transition: all 0.3s ease;
}
</style>
</div>
</section>
<section class="bg-primary py-16">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold text-white mb-8">Ready to Create Unforgettable Moments?</h2>
<button class="bg-secondary text-primary px-8 py-3 !rounded-button font-semibold hover:opacity-90 transition">
Book Your Experience
</button>
</div>
</section>
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<img src="https://static.readdy.ai/image/3fdff747770f20e752b87e99f07fae7e/4a06771a4dc01cada138e77d76b5b8ab.png" alt="Mockology" class="h-8 mb-4">
<p class="text-gray-400">Crafting unforgettable moments with premium mocktails for your special events.</p>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-secondary">Home</a></li>
<li><a href="#" class="hover:text-secondary">Services</a></li>
<li><a href="#" class="hover:text-secondary">Packages</a></li>
<li><a href="#" class="hover:text-secondary">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">Contact Us</h3>
<ul class="space-y-2 text-gray-400">
<li class="flex items-center"><i class="ri-phone-line mr-2"></i> 01733 639190</li>
<li class="flex items-center"><i class="ri-mail-line mr-2"></i> hello@mockology.co.uk</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">Follow Us</h3>
<div class="flex space-x-4">
<a href="https://www.instagram.com/_mockology" class="hover:text-secondary"><i class="ri-instagram-line ri-xl"></i></a>
<a href="https://www.tiktok.com/@mockology" class="hover:text-secondary"><i class="ri-tiktok-line ri-xl"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2025 Mockology. All rights reserved.</p>
</div>
</div>
</footer>
<script>
let drinkCount = 4;
const eventType = document.getElementById('eventType');
const guestCount = document.getElementById('guestCount');
const recommendedPackage = document.getElementById('recommendedPackage');
function updateRecommendation() {
if (!eventType.value || !guestCount.value) return;
let recommendation = '';
if (guestCount.value === 'small') {
recommendation = 'Based on your selections, we recommend our <strong>Table Service</strong> or <strong>Bronze Package</strong>. Perfect for intimate gatherings with premium service.';
} else if (guestCount.value === 'medium') {
recommendation = 'The <strong>Silver Package</strong> would be ideal for your event size. It includes a great variety of mocktails and professional service.';
} else if (guestCount.value === 'large') {
recommendation = 'We recommend our <strong>Gold Package</strong> for your event. It provides comprehensive service and unlimited drinks for your guests.';
} else if (guestCount.value === 'xlarge') {
recommendation = 'Our <strong>Platinum Package</strong> would be perfect for an event of this size. It includes our full premium service with multiple bars and mixologists.';
}
recommendedPackage.innerHTML = recommendation;
}
eventType.addEventListener('change', updateRecommendation);
guestCount.addEventListener('change', updateRecommendation);
const updateDrinks = (change) => {
drinkCount = Math.max(2, Math.min(10, drinkCount + change));
document.getElementById('drinkCount').textContent = drinkCount;
updateTotal();
};
const durationSlider = document.getElementById('durationSlider');
durationSlider.addEventListener('input', (e) => {
document.getElementById('durationValue').textContent = e.target.value + 'h';
updateTotal();
});
const updateTotal = () => {
const basePrice = 150;
const drinkPrice = 50;
const hourPrice = 100;
const total = (basePrice + (drinkCount * drinkPrice) + (parseInt(durationSlider.value) * hourPrice));
document.getElementById('totalPrice').textContent = '$' + total;
};
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
checkbox.addEventListener('change', updateTotal);
});
</script>
</body>
</html>