/* 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

PRIVACY POLICY

A privacy policy is a statement that discloses some or all of the ways a website collects, uses, discloses, and manages the data of its visitors and customers. It fulfills a legal requirement to protect a visitor or client's privacy.
Countries have their own laws with different requirements per jurisdiction regarding the use of privacy policies. Make sure you are following the legislation relevant to your activities and location. 

In general, what should you cover in your Privacy Policy?
What type of information do you collect?
How do you collect information?
Why do you collect such personal information?
How do you store, use, share and disclose your site visitors' personal information?
How (and if) do you communicate with your site visitors?
Is your service targeting and collecting information from minors?
Privacy policy updates
Contact Information

You can check out this support article to receive more information about how to create a privacy policy.

bottom of page