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

Item One

Provide a short description of the item and include relevant details.

Item Five

Provide a short description of the item and include relevant details.

Item Two

Provide a short description of the item and include relevant details.

Item Three

Provide a short description of the item and include relevant details.

Item Four

Provide a short description of the item and include relevant details.

Events

bottom of page