Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Canie Coffee and Space - Artisanal Coffee Experience</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --dark-bg: #121212; | |
| --gold: #D4AF37; | |
| --dark-green: #1A2E1A; | |
| --light-gold: #E8D9A0; | |
| --text-light: #E0E0E0; | |
| --text-dark: #333333; | |
| --menu-bg: #0a0a0a; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: var(--dark-bg); | |
| color: var(--text-light); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| header { | |
| background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.7)); | |
| padding: 1.5rem 0; | |
| position: fixed; | |
| width: 100%; | |
| z-index: 1000; | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(5px); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .logo h1 { | |
| font-size: 2rem; | |
| color: var(--gold); | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| margin-left: 1rem; | |
| } | |
| .logo-icon { | |
| font-size: 2.5rem; | |
| color: var(--gold); | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| } | |
| .nav-links li { | |
| margin-left: 2rem; | |
| } | |
| .nav-links a { | |
| color: var(--text-light); | |
| text-decoration: none; | |
| font-size: 1.1rem; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| font-weight: 500; | |
| } | |
| .nav-links a:hover { | |
| color: var(--gold); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--gold); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .hero { | |
| height: 100vh; | |
| background: url('https://images.unsplash.com/photo-1445116572660-236099ec97a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80') no-repeat center center/cover; | |
| display: flex; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.4); | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 600px; | |
| } | |
| .hero h2 { | |
| font-size: 3.5rem; | |
| color: var(--gold); | |
| margin-bottom: 1rem; | |
| line-height: 1.2; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| color: var(--text-light); | |
| } | |
| .btn { | |
| display: inline-block; | |
| background-color: var(--gold); | |
| color: var(--dark-bg); | |
| padding: 0.8rem 2rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| border: 2px solid var(--gold); | |
| box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); | |
| } | |
| .btn:hover { | |
| background-color: transparent; | |
| color: var(--gold); | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); | |
| } | |
| .btn-outline { | |
| background-color: transparent; | |
| color: var(--gold); | |
| margin-left: 1rem; | |
| } | |
| .btn-outline:hover { | |
| background-color: var(--gold); | |
| color: var(--dark-bg); | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| position: relative; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| color: var(--gold); | |
| display: inline-block; | |
| padding-bottom: 1rem; | |
| } | |
| .section-title h2::after { | |
| content: ''; | |
| position: absolute; | |
| width: 80px; | |
| height: 3px; | |
| background-color: var(--gold); | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .menu-section { | |
| padding: 5rem 0; | |
| background-color: var(--dark-green); | |
| flex-wrap: nowrap; | |
| /* Add these to potentially center the section more broadly if needed */ | |
| /* Removed align-items: center; */ | |
| min-height: 100vh; /* Make the section take at least the full viewport height */ | |
| } | |
| .menu-viewer { | |
| background-color: var(--menu-bg); | |
| border-radius: 15px; | |
| padding: 1.5rem; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| margin: 0 auto; | |
| /* Increase the max-width to allow the menu to be wider */ | |
| max-width: 95%; /* Or a specific pixel value like 900px or 1000px */ | |
| position: relative; | |
| border: 1px solid rgba(212, 175, 55, 0.2); | |
| } | |
| .menu-container { | |
| position: relative; | |
| /* Increase the height to better accommodate the image's aspect ratio */ | |
| height: auto; /* Let the content determine the height */ | |
| min-height: 100px; /* Add a minimum height to prevent collapse if content is very small initially */ | |
| border-radius: 8px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; /* Keep this for horizontal centering of the image */ | |
| background-color: #000; | |
| /* Removed overflow: auto */ | |
| } | |
| .menu-image { | |
| /* Adjust width to control the size more directly */ | |
| width: 90%; /* Or a specific pixel value like 700px or 750px */ | |
| height: auto; /* Maintain aspect ratio */ | |
| object-fit: contain; | |
| display: block; | |
| transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| .menu-nav { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 1.5rem; | |
| align-items: center; | |
| } | |
| .menu-nav-btn { | |
| background-color: var(--dark-bg); | |
| color: var(--gold); | |
| border: 2px solid var(--gold); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 0.5rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .menu-nav-btn:hover { | |
| background-color: var(--gold); | |
| color: var(--dark-bg); | |
| transform: scale(1.1); | |
| } | |
| .page-indicator { | |
| display: flex; | |
| align-items: center; | |
| margin: 0 1rem; | |
| color: var(--text-light); | |
| font-size: 1.1rem; | |
| min-width: 100px; | |
| justify-content: center; | |
| } | |
| .about-section { | |
| padding: 5rem 0; | |
| background-color: var(--dark-bg); | |
| } | |
| .about-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 3rem; | |
| } | |
| .about-text { | |
| flex: 1; | |
| } | |
| .about-text h3 { | |
| font-size: 2rem; | |
| color: var(--gold); | |
| margin-bottom: 1.5rem; | |
| } | |
| .about-text p { | |
| margin-bottom: 1.5rem; | |
| font-size: 1.1rem; | |
| } | |
| .about-image { | |
| flex: 1; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| position: relative; | |
| } | |
| .about-image img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| transition: transform 0.5s ease; | |
| } | |
| .about-image:hover img { | |
| transform: scale(1.05); | |
| } | |
| .about-image::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, rgba(26, 46, 26, 0.3), transparent); | |
| z-index: 1; | |
| } | |
| .hours-section { | |
| padding: 5rem 0; | |
| background-color: var(--dark-green); | |
| } | |
| .hours-container { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .hours-card { | |
| background-color: rgba(0, 0, 0, 0.5); | |
| padding: 2rem; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| text-align: center; | |
| width: 100%; | |
| max-width: 500px; | |
| border: 1px solid rgba(212, 175, 55, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hours-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%); | |
| z-index: 0; | |
| } | |
| .hours-card h3 { | |
| font-size: 1.8rem; | |
| color: var(--gold); | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hours-list { | |
| list-style: none; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hours-list li { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.8rem 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .hours-list li:last-child { | |
| border-bottom: none; | |
| } | |
| .day { | |
| color: var(--gold); | |
| font-weight: 500; | |
| } | |
| .time { | |
| color: var(--text-light); | |
| } | |
| footer { | |
| background-color: #000; | |
| padding: 3rem 0; | |
| text-align: center; | |
| position: relative; | |
| } | |
| footer::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--gold), transparent); | |
| } | |
| .footer-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .social-links { | |
| display: flex; | |
| margin-bottom: 1.5rem; | |
| } | |
| .social-links a { | |
| color: var(--text-light); | |
| font-size: 1.5rem; | |
| margin: 0 1rem; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .social-links a:hover { | |
| color: var(--gold); | |
| transform: translateY(-3px); | |
| } | |
| .social-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--gold); | |
| transition: width 0.3s ease; | |
| } | |
| .social-links a:hover::after { | |
| width: 100%; | |
| } | |
| .footer-links { | |
| display: flex; | |
| list-style: none; | |
| margin-bottom: 1.5rem; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .footer-links li { | |
| margin: 0.5rem 1rem; | |
| } | |
| .footer-links a { | |
| color: var(--text-light); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .footer-links a:hover { | |
| color: var(--gold); | |
| } | |
| .copyright { | |
| color: var(--text-light); | |
| opacity: 0.7; | |
| font-size: 0.9rem; | |
| } | |
| /* Floating coffee beans animation */ | |
| .floating-bean { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23D4AF37"><path d="M15.5,12C15.5,10.07 17.07,8.5 19,8.5C20.93,8.5 22.5,10.07 22.5,12C22.5,13.5 21.6,14.77 20.25,15.26C20.91,15.83 21.25,16.68 21.25,17.5C21.25,19.16 19.91,20.5 18.25,20.5C17.32,20.5 16.47,20.11 15.88,19.5C14.55,20.45 12.83,21 11,21C6.03,21 2,16.97 2,12C2,7.03 6.03,3 11,3C15.97,3 20,7.03 20,12C20,12.42 19.96,12.83 19.91,13.24C19.36,12.69 18.62,12.35 17.81,12.3C16.25,12.21 15.5,13.5 15.5,15C15.5,15.35 15.57,15.68 15.68,16C15.18,16.38 14.75,16.84 14.42,17.36C13.3,16.8 12.5,15.64 12.5,14.29C12.5,12.29 14.29,11.5 15.5,12Z" /></svg>'); | |
| background-size: contain; | |
| opacity: 0.6; | |
| z-index: -1; | |
| animation: float 15s infinite linear; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0) rotate(0deg); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 0.6; | |
| } | |
| 90% { | |
| opacity: 0.6; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) rotate(360deg); | |
| opacity: 0; | |
| } | |
| } | |
| /* Pulse animation for CTA */ | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); | |
| } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| /* Menu flip animation */ | |
| @keyframes flipIn { | |
| 0% { | |
| transform: perspective(1000px) rotateY(90deg); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: perspective(1000px) rotateY(0deg); | |
| opacity: 1; | |
| } | |
| } | |
| .flip-in { | |
| animation: flipIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .hero h2 { | |
| font-size: 2.5rem; | |
| } | |
| .about-content { | |
| flex-direction: column; | |
| } | |
| .menu-viewer { | |
| padding: 1rem; | |
| } | |
| } | |
| /* Animation */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease forwards; | |
| } | |
| .delay-1 { | |
| animation-delay: 0.2s; | |
| } | |
| .delay-2 { | |
| animation-delay: 0.4s; | |
| } | |
| .delay-3 { | |
| animation-delay: 0.6s; | |
| } | |
| /* Scroll indicator */ | |
| .scroll-indicator { | |
| position: absolute; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| color: var(--text-light); | |
| font-size: 1.5rem; | |
| animation: bounce 2s infinite; | |
| cursor: pointer; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { | |
| transform: translateY(0) translateX(-50%); | |
| } | |
| 40% { | |
| transform: translateY(-20px) translateX(-50%); | |
| } | |
| 60% { | |
| transform: translateY(-10px) translateX(-50%); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Floating coffee beans --> | |
| <div id="floating-beans-container"></div> | |
| <header> | |
| <div class="container"> | |
| <nav> | |
| <div class="logo"> | |
| <i class="fas fa-mug-hot logo-icon"></i> | |
| <h1>Canie Coffee and Space</h1> | |
| </div> | |
| <ul class="nav-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#menu">Menu</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#hours">Hours</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <section class="hero" id="home"> | |
| <div class="container"> | |
| <div class="hero-content fade-in"> | |
| <h2>Artisanal Coffee in a Cozy Space</h2> | |
| <p>Experience the perfect blend of specialty coffee and comfortable ambiance at Canie Coffee and Space. Our carefully crafted beverages and welcoming atmosphere create the ideal spot for work, relaxation, or connection.</p> | |
| <div style="display: flex; flex-wrap: wrap; gap: 1rem;"> | |
| <a href="#menu" class="btn pulse">View Menu</a> | |
| <a href="#hours" class="btn btn-outline">Visit Us</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scroll-indicator" onclick="document.getElementById('menu').scrollIntoView({behavior: 'smooth'})"> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| </section> | |
| <section class="menu-section" id="menu"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <div class="container"> | |
| <div class="section-title fade-in"> | |
| <h2>Our Menu</h2> | |
| </div> | |
| <div class="menu-viewer fade-in delay-1"> | |
| <div class="menu-container"> | |
| <img src="img/CANIE MENU_page_1.png" alt="Canie Coffee Menu Page 1" class="menu-image" id="menu-image"> | |
| </div> | |
| <div class="menu-nav"> | |
| <button class="menu-nav-btn" id="prev-page"><i class="fas fa-chevron-left"></i></button> | |
| <div class="page-indicator"> | |
| Page <span id="current-page">1</span> of 28 | |
| </div> | |
| <button class="menu-nav-btn" id="next-page"><i class="fas fa-chevron-right"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="about-section" id="about"> | |
| <div class="container"> | |
| <div class="section-title fade-in"> | |
| <h2>Our Story</h2> | |
| </div> | |
| <div class="about-content"> | |
| <div class="about-text fade-in delay-1"> | |
| <h3>More Than Just Coffee</h3> | |
| <p>Founded in 2015, Canie Coffee and Space began as a passion project between two coffee enthusiasts who wanted to create a space where people could enjoy exceptional coffee in a warm, inviting atmosphere.</p> | |
| <p>We source our beans directly from ethical growers around the world, ensuring the highest quality while supporting sustainable farming practices. Each cup is carefully crafted by our skilled baristas who take pride in their art.</p> | |
| <p>Our space is designed to be your home away from home - whether you're looking for a quiet corner to work, a comfortable spot to read, or a welcoming environment to connect with friends.</p> | |
| </div> | |
| <div class="about-image fade-in delay-2"> | |
| <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Canie Coffee Interior"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="hours-section" id="hours"> | |
| <div class="container"> | |
| <div class="section-title fade-in"> | |
| <h2>Visit Us</h2> | |
| </div> | |
| <div class="hours-container"> | |
| <div class="hours-card fade-in delay-1"> | |
| <h3>Opening Hours</h3> | |
| <ul class="hours-list"> | |
| <li> | |
| <span class="day">Monday - Friday</span> | |
| <span class="time">7:00 AM - 9:00 PM</span> | |
| </li> | |
| <li> | |
| <span class="day">Saturday</span> | |
| <span class="time">8:00 AM - 10:00 PM</span> | |
| </li> | |
| <li> | |
| <span class="day Sunday">Sunday</span> | |
| <span class="time">8:00 AM - 8:00 PM</span> | |
| </li> | |
| </ul> | |
| <p style="margin-top: 1.5rem; color: var(--light-gold);">123 Coffee Street, Beanville</p> | |
| <p style="color: var(--light-gold);">(555) 123-4567</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer id="contact"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="logo" style="margin-bottom: 1.5rem;"> | |
| <i class="fas fa-mug-hot logo-icon"></i> | |
| <h1>Canie Coffee and Space</h1> | |
| </div> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| <ul class="footer-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#menu">Menu</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#hours">Hours</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| <p class="copyright">© 2025 Canie Coffee and Space. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Create floating coffee beans | |
| function createFloatingBeans() { | |
| const container = document.getElementById('floating-beans-container'); | |
| const beanCount = 10; | |
| for (let i = 0; i < beanCount; i++) { | |
| const bean = document.createElement('div'); | |
| bean.className = 'floating-bean'; | |
| // Random position and animation duration | |
| const leftPos = Math.random() * 100; | |
| const animationDuration = 10 + Math.random() * 20; | |
| const delay = Math.random() * 15; | |
| const size = 10 + Math.random() * 20; | |
| bean.style.left = `${leftPos}%`; | |
| bean.style.width = `${size}px`; | |
| bean.style.height = `${size}px`; | |
| bean.style.animationDuration = `${animationDuration}s`; | |
| bean.style.animationDelay = `${delay}s`; | |
| container.appendChild(bean); | |
| } | |
| } | |
| // Menu Viewer Functionality | |
| let currentPage = 1; | |
| const totalPages = 28; | |
| const menuImage = document.getElementById('menu-image'); | |
| const currentPageDisplay = document.getElementById('current-page'); | |
| document.getElementById('prev-page').addEventListener('click', () => { | |
| if (currentPage > 1) { | |
| currentPage--; | |
| updateMenuImage(); | |
| } | |
| }); | |
| document.getElementById('next-page').addEventListener('click', () => { | |
| if (currentPage < totalPages) { | |
| currentPage++; | |
| updateMenuImage(); | |
| } | |
| }); | |
| function updateMenuImage() { | |
| // Remove the animation class to reset the effect | |
| menuImage.classList.remove('flip-in'); | |
| // Create a new image element to preload the next page | |
| const newImg = new Image(); | |
| newImg.src = `img/CANIE MENU_page_${currentPage}.png`; | |
| // When the new image is loaded, update the menu image and apply the animation | |
| newImg.onload = () => { | |
| menuImage.src = newImg.src; | |
| currentPageDisplay.textContent = currentPage; | |
| // Trigger a reflow to restart the animation and add the class back | |
| void menuImage.offsetWidth; | |
| menuImage.classList.add('flip-in'); | |
| }; | |
| // Optionally, handle errors if the image fails to load | |
| newImg.onerror = () => { | |
| console.error('Failed to load image:', newImg.src); | |
| }; | |
| } | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Animation on scroll | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| fadeElements.forEach(element => { | |
| element.style.opacity = 0; | |
| element.style.transform = 'translateY(20px)'; | |
| element.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; | |
| observer.observe(element); | |
| }); | |
| // Initialize floating beans | |
| createFloatingBeans(); | |
| // Add hover effect to menu viewer | |
| const menuViewer = document.querySelector('.menu-viewer'); | |
| menuViewer.addEventListener('mouseenter', () => { | |
| menuViewer.style.transform = 'translateY(-5px)'; | |
| menuViewer.style.boxShadow = '0 15px 40px rgba(0, 0, 0, 0.6)'; | |
| }); | |
| menuViewer.addEventListener('mouseleave', () => { | |
| menuViewer.style.transform = 'translateY(0)'; | |
| menuViewer.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.5)'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |