Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Beverage Calculator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .form-radio {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            display: inline-block;
            vertical-align: middle;
            background-origin: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            flex-shrink: 0;
            border-radius: 100%;
            height: 1.25rem;
            width: 1.25rem;
            border-width: 2px;
            border-color: #e2e8f0;
        }

        .form-radio:checked {
            border-color: #4f46e5;
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
            background-color: #4f46e5;
        }
        
        .form-checkbox {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding: 0;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
            display: inline-block;
            vertical-align: middle;
            background-origin: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            flex-shrink: 0;
            height: 1.25rem;
            width: 1.25rem;
            color: #4f46e5;
            background-color: #fff;
            border-color: #6b7280;
            border-width: 1px;
            border-radius: 0.375rem;
        }

        .form-checkbox:checked {
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
            border-color: transparent;
            background-color: currentColor;
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body class="bg-gray-100">

    <div class="container mx-auto px-4 py-8 md:py-16">
        <div class="max-w-3xl mx-auto bg-white rounded-2xl shadow-lg overflow-hidden">
            <div class="p-8 md:p-12">
                <h1 class="text-3xl md:text-4xl font-bold text-gray-800 text-center mb-2">Beverage Calculator</h1>
                <p class="text-gray-600 text-center mb-8">Calculate the required amount of drinks for your event. This is an estimate calculator.</p>

                <form id="calculator-form" class="space-y-8">
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <label for="guests" class="block text-sm font-medium text-gray-700 mb-1">Number of guests</label>
                            <input type="number" id="guests" value="50" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label for="duration" class="block text-sm font-medium text-gray-700 mb-1">Duration (hours)</label>
                            <input type="number" id="duration" value="4" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                    </div>
                    
                    
                    <div>
                        <fieldset>
                            <legend class="block text-sm font-medium text-gray-700 mb-3">How heavily do your guests drink?</legend>
                            <div class="grid sm:grid-cols-3 gap-4">
                                <label class="flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="drinker-type" value="light" class="form-radio h-5 w-5 text-indigo-600 focus:ring-indigo-500">
                                    <span class="ml-3 text-sm text-gray-700">Light Drinkers</span>
                                </label>
                                <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors ring-2 ring-indigo-500 bg-indigo-50">
                                    <input type="radio" name="drinker-type" value="average" checked class="form-radio h-5 w-5 text-indigo-600 focus:ring-indigo-500">
                                    <span class="ml-3 text-sm font-semibold text-indigo-900">Average</span>
                                </label>
                                <label class="flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="drinker-type" value="heavy" class="form-radio h-5 w-5 text-indigo-600 focus:ring-indigo-500">
                                    <span class="ml-3 text-sm text-gray-700">Heavy Drinkers</span>
                                </label>
                            </div>
                        </fieldset>
                    </div>

                    
                    <div>
                        <fieldset>
                            <legend class="block text-sm font-medium text-gray-700 mb-3">What drinks are you planning to serve?</legend>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <label class="flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="checkbox" name="drink-preference" value="beer" checked class="form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
                                    <span class="ml-3 text-sm text-gray-700">Beer</span>
                                </label>
                                <label class="flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="checkbox" name="drink-preference" value="wine" checked class="form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
                                    <span class="ml-3 text-sm text-gray-700">Wine</span>
                                </label>
                                <label class="flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="checkbox" name="drink-preference" value="spirits" checked class="form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
                                    <span class="ml-3 text-sm text-gray-700">Spirits</span>
                                </label>
                                <label class="flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="checkbox" name="drink-preference" value="cocktails" class="form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
                                    <span class="ml-3 text-sm text-gray-700">Cocktails</span>
                                </label>
                            </div>
                        </fieldset>
                    </div>
                    
                    
                    <div class="pt-4">
                        <button type="submit" class="w-full bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300 ease-in-out transform hover:scale-105">
                            Calculate
                        </button>
                    </div>
                </form>
            </div>
            
            
            <div id="results" class="hidden p-8 md:p-12 bg-gray-50 border-t border-gray-200">
                
            </div>
        </div>
        <p class="text-center text-xs text-gray-500 mt-6">Please note: this calculator provides estimates. The actual amount may vary depending on the specific preferences of your guests.</p>
    </div>

    <script>
        const form = document.getElementById('calculator-form');
        const resultsDiv = document.getElementById('results');

        // Highlight selected radio button
        const radioLabels = document.querySelectorAll('input[type="radio"][name="drinker-type"]');
        radioLabels.forEach(radio => {
            radio.addEventListener('change', (event) => {
                // Remove highlight from all
                document.querySelectorAll('input[type="radio"][name="drinker-type"]').forEach(r => {
                    r.parentElement.classList.remove('ring-2', 'ring-indigo-500', 'bg-indigo-50', 'font-semibold', 'text-indigo-900');
                    r.parentElement.querySelector('span').classList.remove('font-semibold', 'text-indigo-900');
                    r.parentElement.classList.add('border-gray-200');
                });
                // Add highlight to selected one
                const parentLabel = event.target.parentElement;
                parentLabel.classList.add('ring-2', 'ring-indigo-500', 'bg-indigo-50');
                parentLabel.querySelector('span').classList.add('font-semibold', 'text-indigo-900');
            });
        });


        form.addEventListener('submit', function(e) {
            e.preventDefault();

            // 1. Get data from the form
            const guests = parseInt(document.getElementById('guests').value);
            const duration = parseInt(document.getElementById('duration').value);
            const drinkerType = document.querySelector('input[name="drinker-type"]:checked').value;
            const drinkPreferences = Array.from(document.querySelectorAll('input[name="drink-preference"]:checked')).map(el => el.value);
            
            const hasCocktails = drinkPreferences.includes('cocktails');
            const hasBeer = drinkPreferences.includes('beer');
            const hasWine = drinkPreferences.includes('wine');
            const hasSpirits = drinkPreferences.includes('spirits');


            // Validation
            if (isNaN(guests) || isNaN(duration) || guests <= 0 || duration <= 0) {
                displayError("Please enter a valid number of guests and duration.");
                return;
            }
            
            if (drinkPreferences.length === 0) {
                 displayError("Please select at least one type of drink.");
                return;
            }

            // 2. Calculation Logic
            const DRINKER_TYPE_MULTIPLIERS = {
                light: 0.6,
                average: 1.0,
                heavy: 1.4
            };

            // Spirits calculation
            let spiritsServings = 0;
            if (hasSpirits) {
                // 1 serving in the first hour, 1 serving each subsequent hour -> 1 serving per hour
                const baseDrinksPerPerson = duration; 
                spiritsServings = Math.round(baseDrinksPerPerson * guests * DRINKER_TYPE_MULTIPLIERS[drinkerType]);
            }

            // Cocktails calculation: 0.7 per guest per hour
            const cocktailsTotal = hasCocktails ? Math.ceil(guests * duration * 0.7) : 0;

            // Beer calculation: 0.5 bottle per guest
            const beerUnits = hasBeer ? Math.ceil(guests * 0.5) : 0;
            
            // Wine calculation: 1 bottle per 5 guests
            const wineBottles = hasWine ? Math.ceil(guests / 5) : 0;

            // Convert servings to bottles
            const SPIRITS_SERVINGS_PER_BOTTLE = 17;
            const spiritsBottles = spiritsServings > 0 ? Math.ceil(spiritsServings / SPIRITS_SERVINGS_PER_BOTTLE) : 0;
            
            // Non-alcoholic drinks and ice calculation
            const waterBottles = Math.ceil(guests * 0.5); // 0.5 bottle (0.5L) per guest
            const waterLiters = waterBottles * 0.5;
            const juiceLiters = Math.ceil(guests / 3); // 1 liter per 3 guests
            const sodaLiters = Math.ceil(guests / 4); // 1 liter per 4 guests
            const iceKg = Math.round(guests * 0.8);

            // For total servings count
            const WINE_SERVINGS_PER_BOTTLE = 5;
            const wineServings = wineBottles * WINE_SERVINGS_PER_BOTTLE;

            // 3. Display results
            displayResults({
                beerUnits,
                wineBottles,
                spiritsBottles,
                cocktailsTotal,
                waterLiters,
                waterBottles,
                juiceLiters,
                sodaLiters,
                iceKg,
                drinkPreferences,
                wineServings,
                spiritsServings
            });
        });

        function displayResults(data) {
            const totalAlcoholServings = data.beerUnits + data.wineServings + data.spiritsServings + data.cocktailsTotal;

            let resultsHTML = `
                <h2 class="text-2xl font-bold text-gray-800 text-center mb-6">Your Results:</h2>
                <div class="space-y-6">
                    <div class="bg-indigo-100 text-indigo-800 p-6 rounded-lg text-center">
                        <p class="text-lg">Total Alcoholic Servings:</p>
                        <p class="text-4xl font-bold">${totalAlcoholServings}</p>
                    </div>

                    <div class="grid md:grid-cols-2 gap-4 text-center">
            `;
            
            // Alcohol section
            if(totalAlcoholServings > 0) {
                 resultsHTML += '<div class="bg-white p-4 rounded-lg border border-gray-200 space-y-3">';
                 resultsHTML += '<h3 class="font-semibold text-lg text-gray-700">Alcoholic Beverages</h3>';
                if (data.drinkPreferences.includes('beer') && data.beerUnits > 0) {
                    resultsHTML += `<p>🍺 <strong>Beer:</strong> ${data.beerUnits} btls/cans (0.5L)</p>`;
                }
                if (data.drinkPreferences.includes('wine') && data.wineBottles > 0) {
                    resultsHTML += `<p>🍷 <strong>Wine:</strong> ${data.wineBottles} btls (0.75L)</p>`;
                }
                if (data.drinkPreferences.includes('spirits') && data.spiritsBottles > 0) {
                    resultsHTML += `<p>🥃 <strong>Spirits:</strong> ${data.spiritsBottles} btls (0.75L)</p>`;
                }
                if (data.drinkPreferences.includes('cocktails') && data.cocktailsTotal > 0) {
                    resultsHTML += `<p>🍹 <strong>Cocktails:</strong> ${data.cocktailsTotal} servings</p>`;
                }
                resultsHTML += '</div>';
            }

            // Non-alcoholic section
            resultsHTML += `
                        <div class="bg-white p-4 rounded-lg border border-gray-200 space-y-3">
                            <h3 class="font-semibold text-lg text-gray-700">Extras</h3>
                            <p>💧 <strong>Water:</strong> ~${data.waterLiters.toFixed(1)} L (${data.waterBottles} btls of 0.5L)</p>
                            <p>🍊 <strong>Juices:</strong> ~${data.juiceLiters} L</p>
                            <p>🥤 <strong>Soda:</strong> ~${data.sodaLiters} L</p>
                            <p>🧊 <strong>Ice:</strong> ~${data.iceKg} kg</p>
                        </div>
                    </div>
                </div>
            `;


            resultsDiv.innerHTML = resultsHTML;
            resultsDiv.classList.remove('hidden');
            resultsDiv.scrollIntoView({ behavior: 'smooth' });
        }
        
        function displayError(message) {
             let errorHTML = `
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative" role="alert">
                    <strong class="font-bold">Error!</strong>
                    <span class="block sm:inline">${message}</span>
                </div>
            `;
            resultsDiv.innerHTML = errorHTML;
            resultsDiv.classList.remove('hidden');
            resultsDiv.scrollIntoView({ behavior: 'smooth' });
        }

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

Wonder Fuel

Event Bartending services
Expert Event Bartender Services for Unforgettable Celebrations and Memorable Experiences
Certified. Insured. Unforgettable.  "Mobile bar and bartenders in  Miami,FL, Orlando,FL, Tampa,FL, West Palm Beach,Fl.