/* Main Styles */ .drinks-page { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: #333; background: linear-gradient(to bottom, #f0f4ff, #ffffff); padding: 20px; } /* Content Layout */ .content-layout { max-width: 1200px; margin: 0 auto; display: flex; gap: 24px; } @media (max-width: 768px) { .content-layout { flex-direction: column; } } /* Filters Panel */ .filters-panel { width: 250px; flex-shrink: 0; } @media (max-width: 768px) { .filters-panel { display: none; } } .filter-heading { font-weight: 700; font-size: 12px; text-transform: uppercase; color: #777; margin-bottom: 16px; } .filter-group { border-bottom: 1px solid #e0e0e0; padding-bottom: 16px; margin-bottom: 16px; } .filter-group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .filter-group-header h3 { font-weight: 700; font-size: 14px; text-transform: uppercase; margin: 0; } .hide-button { background: none; border: none; font-size: 12px; color: #777; cursor: pointer; padding: 0; } .filter-options { display: flex; flex-direction: column; gap: 8px; } .filter-option { display: flex; align-items: center; justify-content: space-between; } .filter-option input[type="radio"] { width: 16px; height: 16px; accent-color: #6d28d9; } .filter-option label { margin-left: 8px; font-size: 14px; color: #333; flex: 1; } .filter-option .count { font-size: 12px; color: #999; } .view-more { background: none; border: none; color: #6d28d9; font-size: 12px; font-weight: 500; text-align: left; padding: 4px 0; cursor: pointer; margin-top: 4px; } /* Mobile filters */ .mobile-filters { display: none; gap: 16px; margin-bottom: 20px; } @media (max-width: 768px) { .mobile-filters { display: flex; } } .filter-button { flex: 1; padding: 10px; background-color: white; border: 1px solid #e0e0e0; border-radius: 4px; cursor: pointer; } .search-input { flex: 1; padding: 10px; border: 1px solid #e0e0e0; border-radius: 4px; } /* Products Area */ .products-area { flex: 1; } /* Promo Banners */ .promo-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } @media (max-width: 768px) { .promo-banners { grid-template-columns: 1fr; } } .promo-banner { border-radius: 12px; overflow: hidden; display: flex; padding: 16px; position: relative; } .gradient-purple { background: linear-gradient(to right, #f3e8ff, #fae8ff); } .gradient-blue { background: linear-gradient(to right, #e0f2fe, #e0e7ff); } .promo-banner .badge { position: absolute; top: 8px; right: 8px; background-color: #ec4899; color: white; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 4px; z-index: 1; } .promo-content { flex: 1; display: flex; flex-direction: column; justify-content: center; } .promo-content h2 { font-size: 24px; font-weight: 700; margin: 0 0 4px 0; } .promo-content p { font-size: 14px; opacity: 0.8; margin: 0 0 16px 0; } .promo-button { padding: 8px 16px; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; color: white; align-self: flex-start; } .purple-button { background-color: #6d28d9; } .blue-button { background-color: #2563eb; } .promo-image { flex: 1; display: flex; justify-content: center; align-items: center; } .promo-image img { max-width: 100%; max-height: 150px; transition: transform 0.3s; } .promo-banner:hover .promo-image img { transform: scale(1.05); } /* Product Sections */ .product-section, .category-section { margin-bottom: 48px; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .section-header h2 { font-size: 20px; font-weight: 700; color: #333; margin: 0; } .view-all { background: none; border: none; color: #6d28d9; font-weight: 500; cursor: pointer; padding: 0; } /* Product Grid */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } @media (max-width: 768px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } /* Product Carousel */ .product-carousel { position: relative; } .carousel-container { display: flex; overflow-x: auto; gap: 16px; padding-bottom: 16px; scrollbar-width: none; -ms-overflow-style: none; } .carousel-container::-webkit-scrollbar { display: none; } .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; color: #6d28d9; font-size: 18px; } .carousel-nav.prev { left: 0; } .carousel-nav.next { right: 0; } /* Product Card */ .product-card { background-color: white; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s; position: relative; min-width: 180px; } .product-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .product-card .badge { position: absolute; top: 8px; right: 8px; background-color: #6d28d9; color: white; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 4px; } .product-image { height: 180px; display: flex; align-items: center; justify-content: center; padding: 16px; background-color: white; } .product-image img { max-height: 100%; max-width: 100%; transition: transform 0.3s; } .product-card:hover .product-image img { transform: scale(1.05); } .product-info { padding: 12px; flex: 1; display: flex; flex-direction: column; } .product-name { font-weight: 700; font-size: 16px; color: #333; margin: 0 0 4px 0; } .product-description { font-size: 14px; color: #666; margin: 0 0 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-volume { font-size: 12px; color: #777; margin: 0 0 8px 0; } .product-rating { display: flex; margin-bottom: 8px; } .star { color: #f59e0b; font-size: 14px; margin-right: 2px; } .star.empty { color: #e0e0e0; } .product-price { margin-top: auto; } .original-price { color: #999; text-decoration: line-through; font-size: 14px; margin-right: 8px; } .sale-price { font-size: 18px; font-weight: 700; color: #333; } .product-note { font-size: 12px; color: #6d28d9; font-weight: 500; margin: 4px 0; } .add-to-cart { width: 100%; padding: 8px; margin-top: 8px; background-color: #6d28d9; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; } .add-to-cart:hover { background-color: #5b21b6; } /* Prize Button */ .prize-button-container { position: fixed; bottom: 20px; right: 20px; z-index: 10; } .win-prizes-button { background-color: white; color: #6d28d9; border: 2px solid #6d28d9; border-radius: 8px; padding: 10px 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.2s; } .win-prizes-button:hover { background-color: #6d28d9; color: white; } .gift-icon { margin-right: 8px; font-size: 16px; } /* Prize Wheel Modal */ .prize-wheel-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 100; align-items: center; justify-content: center; } .prize-wheel-container { background-color: white; border-radius: 12px; padding: 24px; max-width: 500px; width: 90%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .modal-header h2 { font-size: 24px; font-weight: 700; color: #6d28d9; margin: 0; } .close-button { background: none; border: none; font-size: 20px; cursor: pointer; color: #777; } .modal-description { text-align: center; color: #666; margin-bottom: 20px; } .wheel-container { position: relative; margin: 0 auto 24px; width: 300px; height: 300px; } .wheel-pointer { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #e11d48; z-index: 1; } .spin-button { display: block; width: 100%; padding: 12px; background-color: #6d28d9; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; } .spin-button:hover { background-color: #5b21b6; } .spin-button:disabled { background-color: #a78bfa; cursor: not-allowed; } .prize-result { text-align: center; margin-bottom: 20px; } .prize-result h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; } .prize-result p { font-size: 16px; margin-bottom: 16px; } .promo-code { margin-bottom: 20px; } .promo-code span { background-color: #f3f4f6; padding: 4px 8px; border-radius: 4px; font-weight: 700; } .result-buttons { display: flex; gap: 12px; } .primary-button, .secondary-button { flex: 1; padding: 10px; border-radius: 4px; font-weight: 600; cursor: pointer; } .primary-button { background-color: #6d28d9; color: white; border: none; } .secondary-button { background-color: white; color: #6d28d9; border: 1px solid #6d28d9; } /* Confetti Animation */ @keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } .confetti-piece { position: fixed; width: 10px; height: 10px; top: -10px; z-index: 200; animation: confetti-fall linear forwards; border-radius: 2px; } document.addEventListener("DOMContentLoaded", () => { // Your custom category and product data const categories = { whiskey: { name: "Whiskey & Scotch", subcategories: [ "Bourbon Whiskey (1895)", "Single Malt Scotch (1142)", "Rye Whiskey (625)", "Flavored Whiskey (584)", ], products: [ { name: "Bulleit", description: "Frontier Whiskey", image: "https://static.wixstatic.com/media/YOUR_IMAGE_ID_HERE/Bulleit.jpg", volume: "750 ml", rating: 5, originalPrice: 28, salePrice: 25, note: "Limited offer", badge: "POPULAR", }, { name: "Crown Royal", description: "Fine De Luxe Blended Canadian Whisky", image: "https://static.wixstatic.com/media/YOUR_IMAGE_ID_HERE/CrownRoyal.jpg", volume: "750 ml", rating: 4, originalPrice: 32, salePrice: 28, badge: "SAVE £4", }, { name: "Johnnie Walker", description: "12 Year Black Label Blended Scotch Whisky", image: "https://static.wixstatic.com/media/YOUR_IMAGE_ID_HERE/JohnnieWalker.jpg", volume: "750 ml", rating: 5, originalPrice: 35, salePrice: 30, }, ], }, vodka: { name: "Vodka", subcategories: ["Unflavored Vodka (1245)", "Flavored Vodka (876)", "Premium Vodka (542)", "Imported Vodka (321)"], products: [ { name: "Ketel One", description: "Dutch Vodka", image: "https://static.wixstatic.com/media/YOUR_IMAGE_ID_HERE/KetelOne.jpg", volume: "750 ml", rating: 5, salePrice: 22, }, { name: "Tito's Handmade", description: "Gluten-Free Vodka", image: "https://static.wixstatic.com/media/YOUR_IMAGE_ID_HERE/Titos.jpg", volume: "750 ml", rating: 5, salePrice: 20, }, ], }, rum: { name: "Rum", subcategories: ["White Rum (765)", "Dark Rum (543)", "Spiced Rum (432)", "Flavored Rum (321)"], products: [ { name: "Captain Morgan", description: "Spiced Rum", image: "https://static.wixstatic.com/media/YOUR_IMAGE_ID_HERE/CaptainMorgan.jpg", volume: "750 ml", rating: 4, salePrice: 17, }, { name: "Bacardi", description: "Superior White Rum", image: "https://static.wixstatic.com/media/YOUR_IMAGE_ID_HERE/Bacardi.jpg", volume: "750 ml", rating: 4, salePrice: 15, }, ], }, } // Populate products populateProducts() initCarousels() initPrizeWheel() initFilterButtons() // Function to create product cards function createProductCard(product) { const card = document.createElement("div") card.className = "product-card" const badgeHtml = product.badge ? `

${product.badge}

` : "" const originalPriceHtml = product.originalPrice ? `£${product.originalPrice.toFixed(2)}` : "" const noteHtml = product.note ? `

${product.note}

` : "" // Generate stars for rating let starsHtml = "" for (let i = 0; i < 5; i++) { starsHtml += `★` } card.innerHTML = ` ${badgeHtml}

${product.name}

${product.name}

${product.description}

${product.volume ? `

${product.volume}

` : ""}

${starsHtml}

${originalPriceHtml} £${product.salePrice.toFixed(2)}

${noteHtml}

` return card } // Populate product sections function populateProducts() { // Populate favorites grid const favoritesGrid = document.getElementById("favourites-grid") if (favoritesGrid) { categories.whiskey.products.forEach((product) => { favoritesGrid.appendChild(createProductCard(product)) }) } // Populate category carousels const whiskeyCarousel = document.getElementById("whiskey-carousel") const vodkaCarousel = document.getElementById("vodka-carousel") const rumCarousel = document.getElementById("rum-carousel") if (whiskeyCarousel) { categories.whiskey.products.forEach((product) => { whiskeyCarousel.appendChild(createProductCard(product)) }) } if (vodkaCarousel) { categories.vodka.products.forEach((product) => { vodkaCarousel.appendChild(createProductCard(product)) }) } if (rumCarousel) { categories.rum.products.forEach((product) => { rumCarousel.appendChild(createProductCard(product)) }) } } // Initialize carousels function initCarousels() { document.querySelectorAll(".product-carousel").forEach((carousel) => { const container = carousel.querySelector(".carousel-container") const prevBtn = carousel.querySelector(".prev") const nextBtn = carousel.querySelector(".next") if (container && prevBtn && nextBtn) { prevBtn.addEventListener("click", () => { container.scrollBy({ left: -300, behavior: "smooth" }) }) nextBtn.addEventListener("click", () => { container.scrollBy({ left: 300, behavior: "smooth" }) }) } }) } // Initialize filter buttons function initFilterButtons() { // Hide/show filter sections document.querySelectorAll(".hide-button").forEach((button) => { button.addEventListener("click", () => { const options = button.closest(".filter-group").querySelector(".filter-options") if (options.style.display === "none") { options.style.display = "flex" button.textContent = "Hide" } else { options.style.display = "none" button.textContent = "Show" } }) }) // View more buttons document.querySelectorAll(".view-more").forEach((button) => { button.addEventListener("click", () => { // This would typically load more options alert("More options would be loaded here") }) }) // Mobile filter button const filterButton = document.querySelector(".filter-button") if (filterButton) { filterButton.addEventListener("click", () => { // This would typically show a mobile filter panel alert("Mobile filter panel would open here") }) } } // Prize wheel functionality function initPrizeWheel() { const modal = document.getElementById("prize-wheel-modal") const canvas = document.getElementById("wheel-canvas") const winBtn = document.getElementById("win-prizes-button") const closeBtn = document.querySelector(".close-button") const spinBtn = document.getElementById("spin-button") const resultDiv = document.getElementById("prize-result") const resultTitle = document.getElementById("result-title") const resultMsg = document.getElementById("result-message") const resultCode = document.getElementById("result-code") const promoCode = document.getElementById("promo-code") const spinAgainBtn = document.getElementById("spin-again-button") const closeResultBtn = document.getElementById("close-result-button") if (!canvas || !modal || !winBtn) return const ctx = canvas.getContext("2d") let spinning = false let spins = localStorage.getItem("spins") ? Number.parseInt(localStorage.getItem("spins")) : 0 let won = localStorage.getItem("won") === "true" let lastResult = null const prizes = [ { text: "10% OFF", color: "#FF7EB9", textColor: "#000" }, { text: "FREE DELIVERY", color: "#7BFFA0", textColor: "#000" }, { text: "£5 OFF", color: "#A177FF", textColor: "#fff" }, { text: "TRY AGAIN", color: "#F5F5F5", textColor: "#000" }, { text: "BUY 1 GET 1 FREE", color: "#FFCA7B", textColor: "#000" }, { text: "15% OFF", color: "#78D6FF", textColor: "#000" }, { text: "TRY AGAIN", color: "#F5F5F5", textColor: "#000" }, { text: "£10 OFF", color: "#FF7B7B", textColor: "#fff" }, ] // Draw wheel drawWheel() // Event handlers winBtn.addEventListener("click", () => { modal.style.display = "flex" updateSpinButton() }) closeBtn.addEventListener("click", () => { modal.style.display = "none" }) spinBtn.addEventListener("click", spinWheel) spinAgainBtn.addEventListener("click", () => { resultDiv.style.display = "none" spinBtn.style.display = "block" if (lastResult === "TRY AGAIN" && !won && spins < 2) { spinWheel() } }) closeResultBtn.addEventListener("click", () => { modal.style.display = "none" }) window.addEventListener("click", (e) => { if (e.target === modal) modal.style.display = "none" }) // Draw wheel function function drawWheel() { const centerX = canvas.width / 2 const centerY = canvas.height / 2 const radius = Math.min(centerX, centerY) - 10 for (let i = 0; i < prizes.length; i++) { const angle = (i * 2 * Math.PI) / prizes.length const nextAngle = ((i + 1) * 2 * Math.PI) / prizes.length // Draw slice ctx.beginPath() ctx.moveTo(centerX, centerY) ctx.arc(centerX, centerY, radius, angle, nextAngle) ctx.closePath() ctx.fillStyle = prizes[i].color ctx.fill() ctx.strokeStyle = "#fff" ctx.stroke() // Draw text ctx.save() ctx.translate(centerX, centerY) ctx.rotate((angle + nextAngle) / 2) ctx.textAlign = "right" ctx.fillStyle = prizes[i].textColor ctx.font = "bold 12px Arial" ctx.fillText(prizes[i].text, radius - 20, 5) ctx.restore() } // Draw center circle ctx.beginPath() ctx.arc(centerX, centerY, 15, 0, 2 * Math.PI) ctx.fillStyle = "#fff" ctx.fill() ctx.strokeStyle = "#333" ctx.stroke() } // Update spin button visibility function updateSpinButton() { if (spins >= 2 || won) { spinBtn.style.display = "none" resultDiv.style.display = "block" if (lastResult === "TRY AGAIN") { resultTitle.textContent = "Better luck next time!" resultMsg.textContent = "Come back tomorrow for another chance!" resultCode.style.display = "none" } else if (won) { resultTitle.textContent = "You've already won!" resultMsg.textContent = `Your prize: ${lastResult}` promoCode.textContent = localStorage.getItem("code") || "PRIZE123" resultCode.style.display = "block" } spinAgainBtn.style.display = "none" } else { spinBtn.style.display = "block" resultDiv.style.display = "none" } } // Spin wheel function function spinWheel() { if (spinning || spins >= 2 || (won && spins >= 1)) return spinning = true spinBtn.disabled = true spinBtn.textContent = "Spinning..." spins++ localStorage.setItem("spins", spins) // Random rotations const rotations = 3 + Math.floor(Math.random() * 4) // Prize index let prizeIndex if (spins === 2 && lastResult === "TRY AGAIN") { const winningIndices = prizes .map((prize, index) => (prize.text !== "TRY AGAIN" ? index : -1)) .filter((index) => index !== -1) prizeIndex = winningIndices[Math.floor(Math.random() * winningIndices.length)] } else { prizeIndex = Math.floor(Math.random() * prizes.length) } const segmentAngle = 360 / prizes.length const destinationAngle = 360 * rotations + prizeIndex * segmentAngle const randomOffset = Math.random() * (segmentAngle * 0.8) const finalRotation = destinationAngle + randomOffset // Animate canvas.style.transition = "transform 5s cubic-bezier(0.2, 0.8, 0.3, 1)" canvas.style.transform = `rotate(${finalRotation}deg)` setTimeout(() => { spinning = false spinBtn.disabled = false spinBtn.textContent = "Spin to Win!" const prize = prizes[prizeIndex].text lastResult = prize if (prize !== "TRY AGAIN") { won = true localStorage.setItem("won", "true") // Show win resultTitle.textContent = "Congratulations!" resultMsg.textContent = `You won: ${prize}` resultMsg.className = "text-violet-600" const code = `PRIZE${Math.floor(Math.random() * 1000)}` promoCode.textContent = code localStorage.setItem("code", code) resultCode.style.display = "block" spinAgainBtn.style.display = "none" // Confetti createConfetti() } else { // Show try again resultTitle.textContent = "Better luck next time!" resultMsg.textContent = "Spin again or come back tomorrow!" resultMsg.className = "" resultCode.style.display = "none" spinAgainBtn.style.display = spins < 2 ? "block" : "none" } spinBtn.style.display = "none" resultDiv.style.display = "block" }, 5000) } // Create confetti function createConfetti() { const colors = ["#FF7EB9", "#7BFFA0", "#A177FF", "#FFCA7B", "#78D6FF", "#FF7B7B"] for (let i = 0; i < 50; i++) { const confetti = document.createElement("div") confetti.className = "confetti-piece" confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)] confetti.style.left = Math.random() * 100 + "vw" confetti.style.animationDelay = Math.random() * 3 + "s" confetti.style.animationDuration = Math.random() * 2 + 2 + "s" document.body.appendChild(confetti) setTimeout(() => { confetti.remove() }, 5000) } } } })

top of page

HEAD | QUARTERS

Barware Holder.png

Shop Now

Leave the bar service to us and enjoy your event stress-free. Our bar hire and bar services will provide everything you need to entertain your guests in style. From professional bartenders to premium drinks, we've got you covered.

Events & Rentals

Occasions Holder.png

Make your celebrations extra special with our party packs, and custom gifting services. Whether you're planning an anniversary, birthday party, or just because, we can help you create a memorable experience for your loved ones.

Occasions

BARWARE

Complete your home bar setup with our selection of high-quality barware. From decanters to bar sets, we have everything you need to create the perfect cocktail or pour your favorite drink.

At Speedy HQ, we pride ourselves on providing fast and reliable service to all of our customers. Whether you forgot an item at home, have a rush order or need something transported, our team is here to help you get what you need, when you need it.

Looking for the perfect drink to suit your mood? Browse our extensive selection of drinks. From smooth and elegant wines to bold and complex spirits, we have something for every taste.

Shop the full range of our Subscriptions

Subcriptions

Subscriptions

bottom of page