CRM Worker
6 lines
34 KiB
HTML
6 lines
34 KiB
HTML
```json
|
||
{
|
||
"files": {
|
||
"index.html": "<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Oishii Sushi Restaurant Aachen - Authentisches Sushi & Japanische Küche</title>\n <meta name=\"description\" content=\"Oishii Sushi Restaurant in Aachen - Genießen Sie frisches Sushi und authentische japanische Küche in modernem Ambiente.\">\n <link rel=\"stylesheet\" href=\"assets/style.css\">\n</head>\n<body>\n <!-- Navigation -->\n <nav class=\"navbar\">\n <div class=\"container\">\n <div class=\"nav-content\">\n <a href=\"#\" class=\"logo\">Oishii</a>\n <ul class=\"nav-menu\">\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#menu\">Menü</a></li>\n <li><a href=\"#about\">Über uns</a></li>\n <li><a href=\"#contact\" class=\"btn-nav\">Kontakt</a></li>\n </ul>\n <button class=\"mobile-toggle\" aria-label=\"Menü öffnen\">\n <span></span>\n <span></span>\n <span></span>\n </button>\n </div>\n </div>\n </nav>\n\n <!-- Hero Section -->\n <section id=\"home\" class=\"hero\">\n <div class=\"hero-overlay\"></div>\n <div class=\"container\">\n <div class=\"hero-content\">\n <div class=\"hero-badge\">Aachen</div>\n <h1 class=\"hero-title\">Oishii<span class=\"subtitle\">おいしい</span></h1>\n <p class=\"hero-description\">Authentische japanische Küche trifft moderne Kreationen</p>\n <p class=\"hero-tagline\">Frischer Fisch • Handgemachtes Sushi • Traditionelle Rezepte</p>\n <div class=\"hero-buttons\">\n <a href=\"#menu\" class=\"btn btn-primary\">Unser Menü entdecken</a>\n <a href=\"#contact\" class=\"btn btn-secondary\">Reservierung</a>\n </div>\n </div>\n </div>\n <div class=\"scroll-indicator\">\n <span></span>\n </div>\n </section>\n\n <!-- Services/Menu Overview -->\n <section id=\"menu\" class=\"services\">\n <div class=\"container\">\n <div class=\"section-header\">\n <span class=\"section-badge\">Unser Angebot</span>\n <h2>Kulinarische Vielfalt</h2>\n <p>Entdecken Sie die Kunst der japanischen Küche</p>\n </div>\n <div class=\"services-grid\">\n <div class=\"service-card\">\n <div class=\"service-icon\">🍣</div>\n <h3>Sushi & Sashimi</h3>\n <p>Frischeste Zutaten, kunstvoll zubereitet nach traditionellen Techniken. Von klassischen Nigiri bis zu kreativen Inside-Out Rolls.</p>\n <ul class=\"service-features\">\n <li>Nigiri & Maki</li>\n <li>California & Philadelphia Rolls</li>\n <li>Sashimi-Variationen</li>\n </ul>\n </div>\n <div class=\"service-card\">\n <div class=\"service-icon\">🍜</div>\n <h3>Warme Küche</h3>\n <p>Aromatische Ramen, knuspriges Tempura und saftige Teriyaki-Gerichte – die perfekte Balance aus Tradition und Innovation.</p>\n <ul class=\"service-features\">\n <li>Ramen & Udon Nudeln</li>\n <li>Teriyaki & Donburi</li>\n <li>Tempura & Gyoza</li>\n </ul>\n </div>\n <div class=\"service-card\">\n <div class=\"service-icon\">🍱</div>\n <h3>Bento & Sets</h3>\n <p>Sorgfältig zusammengestellte Bento-Boxen und Menüs für ein komplettes japanisches Geschmackserlebnis.</p>\n <ul class=\"service-features\">\n <li>Lunch Bento-Boxen</li>\n <li>Sushi-Sets für 2-4 Personen</li>\n <li>Vegetarische Optionen</li>\n </ul>\n </div>\n </div>\n </div>\n </section>\n\n <!-- About Section -->\n <section id=\"about\" class=\"about\">\n <div class=\"container\">\n <div class=\"about-grid\">\n <div class=\"about-image\">\n <div class=\"image-placeholder\">\n <span class=\"image-icon\">🏮</span>\n </div>\n </div>\n <div class=\"about-content\">\n <span class=\"section-badge\">Über uns</span>\n <h2>Willkommen bei Oishii</h2>\n <p class=\"lead\">Im Herzen von Aachen servieren wir seit Jahren authentische japanische Küche mit Leidenschaft und Hingabe.</p>\n <p>Unser Name \"Oishii\" bedeutet \"lecker\" auf Japanisch – und genau das ist unser Versprechen an Sie. Wir kombinieren traditionelle Rezepte mit frischen, regionalen Zutaten und modernen Geschmacksnoten.</p>\n <div class=\"about-features\">\n <div class=\"about-feature\">\n <div class=\"feature-number\">01</div>\n <h4>Frische Qualität</h4>\n <p>Täglich frische Lieferung von Premium-Fisch und ausgewählten Zutaten</p>\n </div>\n <div class=\"about-feature\">\n <div class=\"feature-number\">02</div>\n <h4>Meisterhafte Zubereitung</h4>\n <p>Unser Team besteht aus erfahrenen Sushi-Meistern</p>\n </div>\n <div class=\"about-feature\">\n <div class=\"feature-number\">03</div>\n <h4>Modernes Ambiente</h4>\n <p>Genießen Sie Ihr Essen in stilvoller, entspannter Atmosphäre</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- CTA Section -->\n <section id=\"contact\" class=\"cta\">\n <div class=\"container\">\n <div class=\"cta-content\">\n <span class=\"section-badge light\">Besuchen Sie uns</span>\n <h2>Bereit für ein unvergessliches Geschmackserlebnis?</h2>\n <p>Reservieren Sie jetzt Ihren Tisch oder bestellen Sie zum Mitnehmen</p>\n <div class=\"contact-cards\">\n <a href=\"tel:+492419008360\" class=\"contact-card\">\n <div class=\"contact-icon\">📞</div>\n <div class=\"contact-info\">\n <span class=\"contact-label\">Telefon</span>\n <span class=\"contact-value\">+49 241 9008360</span>\n </div>\n </a>\n <a href=\"mailto:info@oishii.de\" class=\"contact-card\">\n <div class=\"contact-icon\">✉️</div>\n <div class=\"contact-info\">\n <span class=\"contact-label\">E-Mail</span>\n <span class=\"contact-value\">info@oishii.de</span>\n </div>\n </a>\n </div>\n <div class=\"opening-hours\">\n <h3>Öffnungszeiten</h3>\n <div class=\"hours-grid\">\n <div class=\"hours-item\">\n <span class=\"day\">Mo - Fr</span>\n <span class=\"time\">11:30 - 15:00 & 17:30 - 22:30</span>\n </div>\n <div class=\"hours-item\">\n <span class=\"day\">Sa - So</span>\n <span class=\"time\">12:00 - 23:00</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"footer\">\n <div class=\"container\">\n <div class=\"footer-grid\">\n <div class=\"footer-col\">\n <h3 class=\"footer-logo\">Oishii</h3>\n <p>Authentische japanische Küche im Herzen von Aachen</p>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"Facebook\" class=\"social-link\">f</a>\n <a href=\"#\" aria-label=\"Instagram\" class=\"social-link\">📷</a>\n <a href=\"#\" aria-label=\"TripAdvisor\" class=\"social-link\">TA</a>\n </div>\n </div>\n <div class=\"footer-col\">\n <h4>Kontakt</h4>\n <ul class=\"footer-links\">\n <li><a href=\"tel:+492419008360\">+49 241 9008360</a></li>\n <li><a href=\"mailto:info@oishii.de\">info@oishii.de</a></li>\n <li>Aachen, Deutschland</li>\n </ul>\n </div>\n <div class=\"footer-col\">\n <h4>Navigation</h4>\n <ul class=\"footer-links\">\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#menu\">Menü</a></li>\n <li><a href=\"#about\">Über uns</a></li>\n <li><a href=\"#contact\">Kontakt</a></li>\n </ul>\n </div>\n <div class=\"footer-col\">\n <h4>Service</h4>\n <ul class=\"footer-links\">\n <li><a href=\"#\">Reservierung</a></li>\n <li><a href=\"#\">Catering</a></li>\n <li><a href=\"#\">Gutscheine</a></li>\n <li><a href=\"#\">Jobs</a></li>\n </ul>\n </div>\n </div>\n <div class=\"footer-bottom\">\n <p>© 2024 Oishii Sushi Restaurant. Alle Rechte vorbehalten.</p>\n <div class=\"footer-legal\">\n <a href=\"#\">Impressum</a>\n <a href=\"#\">Datenschutz</a>\n <a href=\"#\">AGB</a>\n </div>\n </div>\n </div>\n </footer>\n\n <script src=\"assets/app.js\"></script>\n</body>\n</html>",
|
||
"assets/style.css": ":root {\n --color-primary: #c41e3a;\n --color-primary-dark: #a01830;\n --color-secondary: #1a1a1a;\n --color-accent: #d4af37;\n --color-text: #2c2c2c;\n --color-text-light: #666666;\n --color-bg: #ffffff;\n --color-bg-light: #f8f8f8;\n --color-bg-dark: #1a1a1a;\n --color-border: #e5e5e5;\n \n --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;\n --font-accent: 'Georgia', serif;\n \n --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);\n --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);\n \n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: var(--font-primary);\n color: var(--color-text);\n line-height: 1.6;\n background-color: var(--color-bg);\n overflow-x: hidden;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 24px;\n}\n\n/* Navigation */\n.navbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n background: rgba(255, 255, 255, 0.98);\n backdrop-filter: blur(10px);\n box-shadow: var(--shadow-sm);\n z-index: 1000;\n transition: var(--transition);\n}\n\n.navbar.scrolled {\n box-shadow: var(--shadow-md);\n}\n\n.nav-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 0;\n}\n\n.logo {\n font-size: 28px;\n font-weight: 700;\n color: var(--color-primary);\n text-decoration: none;\n letter-spacing: 1px;\n transition: var(--transition);\n}\n\n.logo:hover {\n color: var(--color-primary-dark);\n}\n\n.nav-menu {\n display: flex;\n list-style: none;\n gap: 40px;\n align-items: center;\n}\n\n.nav-menu a {\n color: var(--color-text);\n text-decoration: none;\n font-weight: 500;\n font-size: 15px;\n transition: var(--transition);\n position: relative;\n}\n\n.nav-menu a::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--color-primary);\n transition: var(--transition);\n}\n\n.nav-menu a:hover::after,\n.nav-menu a.active::after {\n width: 100%;\n}\n\n.nav-menu a:hover {\n color: var(--color-primary);\n}\n\n.btn-nav {\n background: var(--color-primary);\n color: white !important;\n padding: 10px 24px;\n border-radius: 6px;\n}\n\n.btn-nav::after {\n display: none;\n}\n\n.btn-nav:hover {\n background: var(--color-primary-dark);\n color: white !important;\n transform: translateY(-2px);\n}\n\n.mobile-toggle {\n display: none;\n flex-direction: column;\n gap: 5px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 5px;\n}\n\n.mobile-toggle span {\n width: 25px;\n height: 3px;\n background: var(--color-text);\n transition: var(--transition);\n border-radius: 2px;\n}\n\n/* Hero Section */\n.hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);\n overflow: hidden;\n margin-top: 76px;\n}\n\n.hero::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: \n radial-gradient(circle at 20% 50%, rgba(196, 30, 58, 0.1) 0%, transparent 50%),\n radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);\n pointer-events: none;\n}\n\n.hero-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image/svg+xml,<svg width=\"60\" height=\"60\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"1\" height=\"1\" fill=\"rgba(255,255,255,0.03)\"/></svg>');\n opacity: 0.5;\n}\n\n.hero-content {\n text-align: center;\n position: relative;\n z-index: 2;\n max-width: 800px;\n padding: 40px 0;\n}\n\n.hero-badge {\n display: inline-block;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n color: var(--color-accent);\n padding: 8px 20px;\n border-radius: 30px;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 30px;\n border: 1px solid rgba(212, 175, 55, 0.3);\n}\n\n.hero-title {\n font-size: clamp(48px, 8vw, 96px);\n font-weight: 700;\n color: white;\n margin-bottom: 20px;\n letter-spacing: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n}\n\n.subtitle {\n font-size: clamp(24px, 4vw, 42px);\n color: var(--color-accent);\n font-weight: 400;\n letter-spacing: 4px;\n}\n\n.hero-description {\n font-size: clamp(18px, 2.5vw, 24px);\n color: rgba(255, 255, 255, 0.9);\n margin-bottom: 15px;\n font-weight: 300;\n letter-spacing: 1px;\n}\n\n.hero-tagline {\n font-size: 16px;\n color: rgba(255, 255, 255, 0.7);\n margin-bottom: 40px;\n letter-spacing: 1px;\n}\n\n.hero-buttons {\n display: flex;\n gap: 20px;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.btn {\n display: inline-block;\n padding: 16px 40px;\n border-radius: 8px;\n text-decoration: none;\n font-weight: 600;\n font-size: 16px;\n transition: var(--transition);\n cursor: pointer;\n border: 2px solid transparent;\n}\n\n.btn-primary {\n background: var(--color-primary);\n color: white;\n}\n\n.btn-primary:hover {\n background: var(--color-primary-dark);\n transform: translateY(-3px);\n box-shadow: 0 8px 24px rgba(196, 30, 58, 0.3);\n}\n\n.btn-secondary {\n background: transparent;\n color: white;\n border: 2px solid white;\n}\n\n.btn-secondary:hover {\n background: white;\n color: var(--color-text);\n transform: translateY(-3px);\n}\n\n.scroll-indicator {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 2;\n}\n\n.scroll-indicator span {\n display: block;\n width: 24px;\n height: 40px;\n border: 2px solid rgba(255, 255, 255, 0.5);\n border-radius: 20px;\n position: relative;\n}\n\n.scroll-indicator span::before {\n content: '';\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 4px;\n height: 8px;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 2px;\n animation: scroll 2s infinite;\n}\n\n@keyframes scroll {\n 0%, 100% {\n opacity: 0;\n transform: translateX(-50%) translateY(0);\n }\n 50% {\n opacity: 1;\n transform: translateX(-50%) translateY(8px);\n }\n}\n\n/* Section Styles */\nsection {\n padding: 100px 0;\n}\n\n.section-header {\n text-align: center;\n max-width: 700px;\n margin: 0 auto 60px;\n}\n\n.section-badge {\n display: inline-block;\n background: rgba(196, 30, 58, 0.1);\n color: var(--color-primary);\n padding: 8px 20px;\n border-radius: 30px;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 20px;\n}\n\n.section-badge.light {\n background: rgba(255, 255, 255, 0.2);\n color: white;\n}\n\n.section-header h2 {\n font-size: clamp(32px, 5vw, 48px);\n color: var(--color-secondary);\n margin-bottom: 20px;\n font-weight: 700;\n}\n\n.section-header p {\n font-size: 18px;\n color: var(--color-text-light);\n}\n\n/* Services Section */\n.services {\n background: var(--color-bg-light);\n}\n\n.services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 40px;\n}\n\n.service-card {\n background: white;\n padding: 40px;\n border-radius: 16px;\n box-shadow: var(--shadow-sm);\n transition: var(--transition);\n border: 1px solid var(--color-border);\n}\n\n.service-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-lg);\n border-color: var(--color-primary);\n}\n\n.service-icon {\n font-size: 64px;\n margin-bottom: 24px;\n display: block;\n}\n\n.service-card h3 {\n font-size: 24px;\n color: var(--color-secondary);\n margin-bottom: 16px;\n font-weight: 700;\n}\n\n.service-card > p {\n color: var(--color-text-light);\n margin-bottom: 24px;\n line-height: 1.7;\n}\n\n.service-features {\n list-style: none;\n padding: 0;\n}\n\n.service-features li {\n color: var(--color-text);\n padding: 10px 0;\n padding-left: 28px;\n position: relative;\n font-size: 15px;\n}\n\n.service-features li::before {\n content: '✓';\n position: absolute;\n left: 0;\n color: var(--color-primary);\n font-weight: 700;\n}\n\n/* About Section */\n.about {\n background: white;\n}\n\n.about-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n}\n\n.about-image {\n position: relative;\n}\n\n.image-placeholder {\n aspect-ratio: 4/3;\n background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: var(--shadow-lg);\n position: relative;\n overflow: hidden;\n}\n\n.image-placeholder::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);\n}\n\n.image-icon {\n font-size: 120px;\n opacity: 0.3;\n position: relative;\n z-index: 1;\n}\n\n.about-content .section-badge {\n margin-bottom: 20px;\n}\n\n.about-content h2 {\n font-size: clamp(32px, 4vw, 42px);\n color: var(--color-secondary);\n margin-bottom: 24px;\n font-weight: 700;\n}\n\n.about-content .lead {\n font-size: 20px;\n color: var(--color-text);\n font-weight: 500;\n margin-bottom: 20px;\n line-height: 1.6;\n}\n\n.about-content p {\n color: var(--color-text-light);\n margin-bottom: 40px;\n line-height: 1.8;\n}\n\n.about-features {\n display: flex;\n flex-direction: column;\n gap: 30px;\n}\n\n.about-feature {\n display: flex;\n gap: 20px;\n}\n\n.feature-number {\n flex-shrink: 0;\n width: 50px;\n height: 50px;\n background: rgba(196, 30, 58, 0.1);\n color: var(--color-primary);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 18px;\n}\n\n.about-feature h4 {\n font-size: 18px;\n color: var(--color-secondary);\n margin-bottom: 8px;\n font-weight: 600;\n}\n\n.about-feature p {\n margin: 0;\n font-size: 15px;\n}\n\n/* CTA Section */\n.cta {\n background: linear-gradient(135deg, var(--color-secondary) 0%, #2c2c2c 100%);\n color: white;\n position: relative;\n overflow: hidden;\n}\n\n.cta::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: \n radial-gradient(circle at 30% 30%, rgba(196, 30, 58, 0.15) 0%, transparent 50%),\n radial-gradient(circle at 70% 70%, rgba(212, 175, 55, 0.15) 0%, transparent 50%);\n pointer-events: none;\n}\n\n.cta-content {\n position: relative;\n z-index: 2;\n text-align: center;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.cta-content h2 {\n font-size: clamp(32px, 5vw, 48px);\n color: white;\n margin-bottom: 20px;\n font-weight: 700;\n}\n\n.cta-content > p {\n font-size: 18px;\n color: rgba(255, 255, 255, 0.8);\n margin-bottom: 50px;\n}\n\n.contact-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 30px;\n margin-bottom: 60px;\n}\n\n.contact-card {\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n padding: 30px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n gap: 20px;\n text-decoration: none;\n transition: var(--transition);\n}\n\n.contact-card:hover {\n background: rgba(255, 255, 255, 0.15);\n transform: translateY(-5px);\n border-color: var(--color-accent);\n}\n\n.contact-icon {\n font-size: 40px;\n flex-shrink: 0;\n}\n\n.contact-info {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n text-align: left;\n}\n\n.contact-label {\n font-size: 14px;\n color: rgba(255, 255, 255, 0.7);\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 5px;\n}\n\n.contact-value {\n font-size: 18px;\n color: white;\n font-weight: 600;\n}\n\n.opening-hours {\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n padding: 40px;\n border-radius: 12px;\n max-width: 600px;\n margin: 0 auto;\n}\n\n.opening-hours h3 {\n font-size: 24px;\n margin-bottom: 30px;\n color: var(--color-accent);\n}\n\n.hours-grid {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.hours-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.hours-item:last-child {\n border-bottom: none;\n padding-bottom: 0;\n}\n\n.day {\n font-weight: 600;\n font-size: 16px;\n}\n\n.time {\n color: rgba(255, 255, 255, 0.8);\n font-size: 15px;\n}\n\n/* Footer */\n.footer {\n background: var(--color-bg-dark);\n color: rgba(255, 255, 255, 0.8);\n padding: 80px 0 30px;\n}\n\n.footer-grid {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 50px;\n margin-bottom: 50px;\n}\n\n.footer-logo {\n font-size: 28px;\n font-weight: 700;\n color: var(--color-primary);\n margin-bottom: 20px;\n}\n\n.footer-col p {\n color: rgba(255, 255, 255, 0.6);\n margin-bottom: 25px;\n line-height: 1.7;\n}\n\n.social-links {\n display: flex;\n gap: 15px;\n}\n\n.social-link {\n width: 40px;\n height: 40px;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n color: white;\n transition: var(--transition);\n font-size: 14px;\n}\n\n.social-link:hover {\n background: var(--color-primary);\n border-color: var(--color-primary);\n transform: translateY(-3px);\n}\n\n.footer-col h4 {\n color: white;\n font-size: 18px;\n margin-bottom: 20px;\n font-weight: 600;\n}\n\n.footer-links {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.footer-links a {\n color: rgba(255, 255, 255, 0.6);\n text-decoration: none;\n transition: var(--transition);\n font-size: 15px;\n}\n\n.footer-links a:hover {\n color: var(--color-primary);\n padding-left: 5px;\n}\n\n.footer-links li {\n color: rgba(255, 255, 255, 0.6);\n font-size: 15px;\n}\n\n.footer-bottom {\n padding-top: 30px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 20px;\n}\n\n.footer-bottom p {\n color: rgba(255, 255, 255, 0.5);\n font-size: 14px;\n}\n\n.footer-legal {\n display: flex;\n gap: 30px;\n}\n\n.footer-legal a {\n color: rgba(255, 255, 255, 0.5);\n text-decoration: none;\n font-size: 14px;\n transition: var(--transition);\n}\n\n.footer-legal a:hover {\n color: var(--color-primary);\n}\n\n/* Responsive Design */\n@media (max-width: 968px) {\n .nav-menu {\n position: fixed;\n top: 76px;\n left: -100%;\n width: 100%;\n height: calc(100vh - 76px);\n background: white;\n flex-direction: column;\n justify-content: flex-start;\n padding: 40px 0;\n transition: var(--transition);\n box-shadow: var(--shadow-lg);\n }\n \n .nav-menu.active {\n left: 0;\n }\n \n .mobile-toggle {\n display: flex;\n }\n \n .mobile-toggle.active span:nth-child(1) {\n transform: rotate(45deg) translate(7px, 7px);\n }\n \n .mobile-toggle.active span:nth-child(2) {\n opacity: 0;\n }\n \n .mobile-toggle.active span:nth-child(3) {\n transform: rotate(-45deg) translate(7px, -7px);\n }\n \n .about-grid {\n grid-template-columns: 1fr;\n gap: 50px;\n }\n \n .footer-grid {\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n }\n}\n\n@media (max-width: 768px) {\n section {\n padding: 60px 0;\n }\n \n .hero {\n margin-top: 76px;\n min-height: calc(100vh - 76px);\n }\n \n .services-grid {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n \n .contact-cards {\n grid-template-columns: 1fr;\n }\n \n .footer-grid {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n \n .footer-bottom {\n flex-direction: column;\n text-align: center;\n }\n \n .footer-legal {\n flex-direction: column;\n gap: 15px;\n }\n}\n\n@media (max-width: 480px) {\n .hero-buttons {\n flex-direction: column;\n width: 100%;\n }\n \n .btn {\n width: 100%;\n text-align: center;\n }\n \n .container {\n padding: 0 16px;\n }\n \n .service-card,\n .opening-hours {\n padding: 30px 20px;\n }\n}",
|
||
"assets/app.js": "// Mobile Menu Toggle\nconst mobileToggle = document.querySelector('.mobile-toggle');\nconst navMenu = document.querySelector('.nav-menu');\nconst body = document.body;\n\nif (mobileToggle && navMenu) {\n mobileToggle.addEventListener('click', () => {\n mobileToggle.classList.toggle('active');\n navMenu.classList.toggle('active');\n body.style.overflow = navMenu.classList.contains('active') ? 'hidden' : '';\n });\n\n // Close menu when clicking on a link\n const navLinks = document.querySelectorAll('.nav-menu a');\n navLinks.forEach(link => {\n link.addEventListener('click', () => {\n mobileToggle.classList.remove('active');\n navMenu.classList.remove('active');\n body.style.overflow = '';\n });\n });\n}\n\n// Navbar scroll effect\nconst navbar = document.querySelector('.navbar');\nlet lastScroll = 0;\n\nwindow.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n \n if (currentScroll > 100) {\n navbar.classList.add('scrolled');\n } else {\n navbar.classList.remove('scrolled');\n }\n \n lastScroll = currentScroll;\n});\n\n// Active nav link on scroll\nconst sections = document.querySelectorAll('section[id]');\nconst navItems = document.querySelectorAll('.nav-menu a');\n\nfunction highlightNavOnScroll() {\n const scrollY = window.pageYOffset;\n \n sections.forEach(section => {\n const sectionHeight = section.offsetHeight;\n const sectionTop = section.offsetTop - 100;\n const sectionId = section.getAttribute('id');\n \n if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {\n navItems.forEach(item => {\n item.classList.remove('active');\n if (item.getAttribute('href') === `#${sectionId}`) {\n item.classList.add('active');\n }\n });\n }\n });\n}\n\nwindow.addEventListener('scroll', highlightNavOnScroll);\n\n// Smooth scroll for anchor links\nconst anchorLinks = document.querySelectorAll('a[href^=\"#\"]');\n\nanchorLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n const href = link.getAttribute('href');\n \n // Skip if it's just \"#\"\n if (href === '#') {\n e.preventDefault();\n return;\n }\n \n const target = document.querySelector(href);\n \n if (target) {\n e.preventDefault();\n const offsetTop = target.offsetTop - 76; // Account for fixed navbar\n \n window.scrollTo({\n top: offsetTop,\n behavior: 'smooth'\n });\n }\n });\n});\n\n// Intersection Observer for fade-in animations\nconst observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n};\n\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n}, observerOptions);\n\n// Observe all service cards and about features\nconst animatedElements = document.querySelectorAll('.service-card, .about-feature, .contact-card');\n\nanimatedElements.forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(30px)';\n el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n observer.observe(el);\n});\n\n// Stagger animation for service cards\nconst serviceCards = document.querySelectorAll('.service-card');\nserviceCards.forEach((card, index) => {\n card.style.transitionDelay = `${index * 0.1}s`;\n});\n\n// Phone and email link tracking (optional analytics)\nconst contactLinks = document.querySelectorAll('a[href^=\"tel:\"], a[href^=\"mailto:\"]');\n\ncontactLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n const type = link.href.startsWith('tel:') ? 'phone' : 'email';\n const value = link.href.replace(/^(tel:|mailto:)/, '');\n \n // Log contact interaction (you can replace this with actual analytics)\n console.log(`Contact interaction: ${type} - ${value}`);\n \n // Example: Google Analytics event\n // if (typeof gtag !== 'undefined') {\n // gtag('event', 'contact', {\n // 'event_category': type,\n // 'event_label': value\n // });\n // }\n });\n});\n\n// Parallax effect for hero section\nconst hero = document.querySelector('.hero');\n\nif (hero) {\n window.addEventListener('scroll', () => {\n const scrolled = window.pageYOffset;\n const parallaxSpeed = 0.5;\n \n if (scrolled < window.innerHeight) {\n hero.style.transform = `translateY(${scrolled * parallaxSpeed}px)`;\n }\n });\n}\n\n// Add loading animation\nwindow.addEventListener('load', () => {\n document.body.classList.add('loaded');\n \n // Animate hero content on load\n const heroContent = document.querySelector('.hero-content');\n if (heroContent) {\n heroContent.style.opacity = '0';\n heroContent.style.transform = 'translateY(30px)';\n \n setTimeout(() => {\n heroContent.style.transition = 'opacity 0.8s ease, transform 0.8s ease';\n heroContent.style.opacity = '1';\n heroContent.style.transform |