make main a version off dev
This commit is contained in:
11
src/components/About.astro
Normal file
11
src/components/About.astro
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<h1>About</h1>
|
||||
|
||||
<p>Hier findest du alle aktuellen und kommenden About im Gallus Pub.</p>
|
||||
|
||||
</Layout>
|
||||
42
src/components/Contact.astro
Normal file
42
src/components/Contact.astro
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
import "../../styles/components/ContactForm.css";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div class="contact-container">
|
||||
<h1 class="contact-title">Kontakt</h1>
|
||||
|
||||
<form class="contact-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">E-Mail</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subject">Betreff</label>
|
||||
<input type="text" id="subject" name="subject" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">Nachricht</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">Senden</button>
|
||||
</form>
|
||||
|
||||
<div class="whatsapp-container">
|
||||
<p>Oder kontaktiere uns direkt über WhatsApp:</p>
|
||||
<a href="https://wa.me/41772322770" class="whatsapp-link" target="_blank" rel="noopener noreferrer">
|
||||
<span class="whatsapp-icon">📱</span>
|
||||
<span>WhatsApp Chat starten</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
35
src/components/Drinks.astro
Normal file
35
src/components/Drinks.astro
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
import "../../styles/components/Drinks.css"
|
||||
|
||||
const { id } = Astro.props;
|
||||
---
|
||||
<section id={id} class="Drinks">
|
||||
<h2 class="title">Drinks</h2>
|
||||
|
||||
<a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
|
||||
|
||||
<h3 class="monats-hit">Monats Hit</h3>
|
||||
|
||||
<div class="mate-vodka">
|
||||
<div class="circle" title="Mate Vodka">
|
||||
<span class="circle-label">Mate Vodka</span>
|
||||
</div>
|
||||
<div>Mate Vodka</div>
|
||||
</div>
|
||||
|
||||
<div class="circle-row">
|
||||
<div class="circle" title="Bier">
|
||||
<span class="circle-label">Bier</span>
|
||||
</div>
|
||||
<div class="circle" title="Wein">
|
||||
<span class="circle-label">Wein</span>
|
||||
</div>
|
||||
<div class="circle" title="Cocktails">
|
||||
<span class="circle-label">Cocktails</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="note">
|
||||
Wir bieten eine Auswahl an erlesenen Getränken für jeden Geschmack. Besuche uns und entdecke unsere saisonalen Spezialitäten und Klassiker.
|
||||
</p>
|
||||
</section>
|
||||
31
src/components/EventsGrid.astro
Normal file
31
src/components/EventsGrid.astro
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
// src/components/EventsGrid.astro
|
||||
|
||||
import HoverCard from "./HoverCard.astro";
|
||||
|
||||
interface Event {
|
||||
image: string;
|
||||
title: string;
|
||||
date: string;
|
||||
description: string;
|
||||
}
|
||||
const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
|
||||
events?: Event[];
|
||||
id?: string;
|
||||
};
|
||||
import "../../styles/components/EventsGrid.css";
|
||||
---
|
||||
|
||||
<h2 class="section-title">Events</h2>
|
||||
<section id={id} class="events-gird container">
|
||||
{
|
||||
events.map((event: Event) => (
|
||||
<HoverCard
|
||||
title={event.title}
|
||||
date={event.date}
|
||||
description={event.description}
|
||||
image={event.image}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</section>
|
||||
44
src/components/Footer.astro
Normal file
44
src/components/Footer.astro
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
// src/components/Footer.astro
|
||||
import "/styles/components/Footer.css"
|
||||
const currentYear = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<div class="copyright">
|
||||
© {currentYear} Gallus Pub. Alle Rechte vorbehalten.
|
||||
</div>
|
||||
|
||||
<div class="footer-sections">
|
||||
<div class="footer-section">
|
||||
<h3>Öffnungszeiten</h3>
|
||||
<p>Mittwoch: 19:00 - 00:00</p>
|
||||
<p>Donnerstag: 19:00 - 00:00</p>
|
||||
<p>Freitag: 19:00 - 01:00</p>
|
||||
<p>Samstag: 19:00 - 01:00</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>Kontakt</h3>
|
||||
<p>Gallus Pub</p>
|
||||
<p>Metzgergasse 13</p>
|
||||
<p>9000 St. Gallen</p>
|
||||
<p>Reservierungen via Whatsapp</p>
|
||||
<p><a href="tel:0772322770">077 232 27 70</a></p>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>Raumreservationen</h3>
|
||||
<p>Du planst einen Event?</p>
|
||||
<p>Der "St.Gallerruum" im 2.OG</p>
|
||||
<p>kann gemietet werden.</p>
|
||||
<br/>
|
||||
<p>Gerne öffnen wir auf Anfrage</p>
|
||||
<p>auch ausserhalb unserer</p>
|
||||
<p>Betriebszeiten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
28
src/components/Header.astro
Normal file
28
src/components/Header.astro
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
// src/components/Header.astro
|
||||
const { url } = Astro;
|
||||
import "../../styles/components/Header.css";
|
||||
---
|
||||
|
||||
<header class="header">
|
||||
<div class="logo-container">
|
||||
<a href="/">
|
||||
<img src="/images/Logo.png" alt="Logo" class="logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Hauptnavigation: immer Home, About, Contact -->
|
||||
<nav class="nav-main">
|
||||
<div>
|
||||
<a href="/#hero">Home</a>
|
||||
<a href="/#events">Events</a>
|
||||
<a href="/#gallery">Galerie</a>
|
||||
<a href="/#drinks">Drinks</a>
|
||||
<a href="/#openings">Openings</a>
|
||||
<!--<a href="/#about">About</a>
|
||||
<a href="/#contact">Contact</a>-->
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="header-spacer"></div>
|
||||
27
src/components/Hero.astro
Normal file
27
src/components/Hero.astro
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
// src/components/Hero.astro
|
||||
import "../../styles/components/Hero.css"
|
||||
|
||||
const { id } = Astro.props;
|
||||
---
|
||||
|
||||
<section id={id} class="hero container">
|
||||
|
||||
<div class="hero-overlay">
|
||||
|
||||
<div class="hero-content">
|
||||
|
||||
<h1>Dein Irish Pub</h1>
|
||||
|
||||
<p>Im Herzen von St.Gallen</p>
|
||||
|
||||
<a href="#" class="button">Aktuelles ↓</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
18
src/components/HoverCard.astro
Normal file
18
src/components/HoverCard.astro
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
// src/components/HoverCard.astro
|
||||
import "../../styles/components/HoverCard.css";
|
||||
const { title, description, image = "", date } = Astro.props;
|
||||
---
|
||||
|
||||
<article class="hover-card">
|
||||
<div class="image-container">
|
||||
<img class="card-image" src={image} alt={title} />
|
||||
</div>
|
||||
|
||||
<h3 class="card-title" set:html={title} />
|
||||
<h4 class="card_date">{date}</h4>
|
||||
|
||||
<div class="hover-text">
|
||||
<p set:html={description} />
|
||||
</div>
|
||||
</article>
|
||||
114
src/components/ImageCarousel.astro
Normal file
114
src/components/ImageCarousel.astro
Normal file
@ -0,0 +1,114 @@
|
||||
---
|
||||
// src/components/ImageCarousel.astro
|
||||
import "../../styles/components/ImageCarousel.css";
|
||||
|
||||
interface Image {
|
||||
src: string;
|
||||
alt: string;
|
||||
}
|
||||
|
||||
const { images = [], id } = Astro.props as { images: Image[], id?: string };
|
||||
---
|
||||
|
||||
<section id={id} class="image-carousel-container">
|
||||
<h2 class="section-title">Galerie</h2>
|
||||
<div class="image-carousel">
|
||||
<button class="nav-button prev-button" aria-label="Previous image">
|
||||
<span class="arrow">❮</span>
|
||||
</button>
|
||||
|
||||
<div class="carousel-images">
|
||||
<div class="carousel-track">
|
||||
{images.map((image, index) => (
|
||||
<div class="carousel-slide" data-index={index}>
|
||||
<img src={image.src} alt={image.alt} class="carousel-image" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="nav-button next-button" aria-label="Next image">
|
||||
<span class="arrow">❯</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="carousel-indicators">
|
||||
{images.map((_, index) => (
|
||||
<button
|
||||
class="indicator-dot"
|
||||
data-index={index}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
></button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Initialize carousel functionality
|
||||
function initCarousel() {
|
||||
const carousel = document.querySelector('.image-carousel');
|
||||
const track = document.querySelector('.carousel-track');
|
||||
const slides = document.querySelectorAll('.carousel-slide');
|
||||
const prevButton = document.querySelector('.prev-button');
|
||||
const nextButton = document.querySelector('.next-button');
|
||||
const indicators = document.querySelectorAll('.indicator-dot');
|
||||
|
||||
if (!carousel || !track || !slides.length || !prevButton || !nextButton) return;
|
||||
|
||||
let currentIndex = 0;
|
||||
const slideCount = slides.length;
|
||||
|
||||
// Set initial active state
|
||||
updateCarousel();
|
||||
|
||||
// Add event listeners
|
||||
prevButton.addEventListener('click', () => {
|
||||
currentIndex = (currentIndex - 1 + slideCount) % slideCount;
|
||||
updateCarousel();
|
||||
});
|
||||
|
||||
nextButton.addEventListener('click', () => {
|
||||
currentIndex = (currentIndex + 1) % slideCount;
|
||||
updateCarousel();
|
||||
});
|
||||
|
||||
// Add click events to indicators
|
||||
indicators.forEach((dot, index) => {
|
||||
dot.addEventListener('click', () => {
|
||||
currentIndex = index;
|
||||
updateCarousel();
|
||||
});
|
||||
});
|
||||
|
||||
// Function to update carousel display
|
||||
function updateCarousel() {
|
||||
// Update active class on slides
|
||||
slides.forEach((slide, index) => {
|
||||
const position = index - currentIndex;
|
||||
|
||||
// Remove all position classes
|
||||
slide.classList.remove('prev', 'current', 'next');
|
||||
|
||||
// Add appropriate position class
|
||||
if (position === -1 || (position === slideCount - 1 && currentIndex === 0)) {
|
||||
slide.classList.add('prev');
|
||||
} else if (position === 0) {
|
||||
slide.classList.add('current');
|
||||
} else if (position === 1 || (position === -(slideCount - 1) && currentIndex === slideCount - 1)) {
|
||||
slide.classList.add('next');
|
||||
}
|
||||
});
|
||||
|
||||
// Update indicators
|
||||
indicators.forEach((dot, index) => {
|
||||
dot.classList.toggle('active', index === currentIndex);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Run initialization when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', initCarousel);
|
||||
|
||||
// Re-initialize on astro:page-load for Astro View Transitions
|
||||
document.addEventListener('astro:page-load', initCarousel);
|
||||
</script>
|
||||
35
src/components/Layout.astro
Normal file
35
src/components/Layout.astro
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
// src/components/Layout.astro
|
||||
import Header from "./Header.astro";
|
||||
import Footer from "./Footer.astro";
|
||||
import "../../styles/components/Layout.css"
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Gallus Pub</title>
|
||||
<link rel="stylesheet" href="/styles/variables.css" />
|
||||
<link rel="stylesheet" href="/styles/index.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<Header />
|
||||
|
||||
<main class="container">
|
||||
|
||||
<slot />
|
||||
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
57
src/components/Welcome.astro
Normal file
57
src/components/Welcome.astro
Normal file
@ -0,0 +1,57 @@
|
||||
---
|
||||
// src/components/Welcome.astro
|
||||
import "../../styles/components/Welcome.css"
|
||||
|
||||
const { id } = Astro.props;
|
||||
---
|
||||
|
||||
<section id={id} class="welcome container">
|
||||
|
||||
<div class="welcome-text">
|
||||
|
||||
<h2>Herzlich willkommen im Gallus Pub!</h2>
|
||||
|
||||
<p>
|
||||
Wie die meisten bereits wissen, ist hier jeder willkommen - ob jung
|
||||
oder alt, Rocker, Elf, Nerd, Meerjungfrau oder einfach nur du
|
||||
selbst. Unsere Türen stehen offen für alle, die Spass haben wollen
|
||||
und gute Gesellschaft suchen!
|
||||
</p>
|
||||
|
||||
<p><b>Unsere Highlights:</b></p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<b>Karaoke:</b> Von Mittwoch bis Samstag kannst du deine
|
||||
Stimme auf zwei Stockwerken zum Besten geben. Keine Sorge, es geht
|
||||
nicht darum, perfekt zu sein, sondern einfach Spass zu haben! Du singst
|
||||
gerne, aber lieber für dich? Dann kannst du den 2. OG auch privat
|
||||
mieten.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<b>Pub Quiz:</b> Jeden Freitag ab 20:00 Uhr testet ihr
|
||||
euer Wissen in verschiedenen Runden. Jede Woche gibt es ein neues
|
||||
Thema und einen neuen Champion.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<b>Getränke:</b> Geniesst frisches Guinness, Smithwicks,
|
||||
Gallus Old Style Ale und unsere leckeren Cocktails. Für Whisky-Liebhaber
|
||||
haben wir erlesene Sorten aus Schottland und Irland im Angebot.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Wir freuen uns darauf, euch bald bei uns begrüssen zu können! Lasst
|
||||
uns gemeinsam unvergessliche Abende feiern. - Sabrina & Raphael
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="welcome-image">
|
||||
<img src="/images/Welcome.png" alt="Welcome backgrount image" />
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -1,47 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Coming Soon - Gallus Pub</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="logo-container">
|
||||
<img src="public/Logo.png" alt="Gallus Pub Logo">
|
||||
</div>
|
||||
|
||||
<h1 class="coming-soon">Coming Soon</h1>
|
||||
|
||||
<div class="social-links">
|
||||
<a href="https://www.instagram.com/galluspubsanktgallen/" target="_blank" class="social-link">
|
||||
<i class="fab fa-instagram"></i> Instagram
|
||||
</a>
|
||||
<a href="mailto:info@gallus-pub.ch" class="social-link">
|
||||
<i class="far fa-envelope"></i> Email
|
||||
</a>
|
||||
<a href="https://wa.me/+41772322770" target="_blank" class="social-link">
|
||||
<i class="fab fa-whatsapp"></i> WhatsApp Business
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="opening-hours">
|
||||
<h2>Öffnungszeiten</h2>
|
||||
<p>Mittwoch: 19:00 - 24:00</p>
|
||||
<p>Donnerstag: 19:00 - 24:00</p>
|
||||
<p>Freitag: 19:00 - 01:00</p>
|
||||
<p>Samstag: 19:00 - 01:00</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="events-note">
|
||||
<p>Aktuelle Events findest du</p>
|
||||
<p>auf unserem Social Media.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
src/pages/Gallery.astro
Normal file
11
src/pages/Gallery.astro
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<h1>Gallery</h1>
|
||||
|
||||
<p>Hier findest du alle aktuellen und kommenden Gallery im Gallus Pub.</p>
|
||||
|
||||
</Layout>
|
||||
11
src/pages/Openings.astro
Normal file
11
src/pages/Openings.astro
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<h1>Openings</h1>
|
||||
|
||||
<p>Hier findest du alle aktuellen und kommenden Openings im Gallus Pub.</p>
|
||||
|
||||
</Layout>
|
||||
76
src/pages/index.astro
Normal file
76
src/pages/index.astro
Normal file
@ -0,0 +1,76 @@
|
||||
---
|
||||
// src/pages/index.astro
|
||||
import Layout from "../components/Layout.astro";
|
||||
import Hero from "../components/Hero.astro";
|
||||
import Welcome from "../components/Welcome.astro";
|
||||
import EventsGrid from "../components/EventsGrid.astro";
|
||||
import Drinks from "../components/Drinks.astro";
|
||||
import ImageCarousel from "../components/ImageCarousel.astro";
|
||||
import Contact from "../components/Contact.astro";
|
||||
import About from "../components/About.astro";
|
||||
|
||||
const events = [
|
||||
{
|
||||
image: "/images/karaoke.jpg",
|
||||
title: "Karaoke",
|
||||
date: "Mittwoch - Samstag",
|
||||
description: `
|
||||
Bei uns gibt es Karaoke Mi-Sa!! <br>
|
||||
Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
|
||||
Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
|
||||
`,
|
||||
},
|
||||
{
|
||||
image: "/images/pub_quiz.jpg",
|
||||
title: "Pub Quiz",
|
||||
date: "Jeden Freitag",
|
||||
description: `
|
||||
Jeden Freitag findet unser <b>Pub Quiz</b> statt. Gespielt wird tischweise in 3-4 Runden. <br>
|
||||
Jede Woche gibt es ein anderes Thema. Es geht um Ruhm und Ehre und zusätzlich werden die Sieger der Herzen durch das Publikum gekürt! <3 <br>
|
||||
Auch Einzelpersonen sind herzlich willkommen! <br>
|
||||
*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
|
||||
`,
|
||||
},
|
||||
{
|
||||
image: "/images/crepes_sucette.jpg",
|
||||
title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
|
||||
date: "Do, 04. September 2025",
|
||||
description: `
|
||||
<b>20:00 Uhr</b> <br>
|
||||
<a href="Metzgergasse 13, 9000 St. Gallen">Metzgergasse 13, 9000 St. Gallen</a> <br>
|
||||
Erlebt einen musikalischen Abend mit der Band <b>Crepes Sucette</b> <br>
|
||||
Jetzt reservieren: <a href="tel:+41772322770">077 232 27 70</a>`,
|
||||
},
|
||||
{
|
||||
image: "/images/kevin_mcflannigan.jpeg",
|
||||
title: "Kevin McFlannigan <br> Live Music im Gallus Pub!",
|
||||
date: "Sa, 27. September 2025",
|
||||
description: `
|
||||
<b>ab 20:00 Uhr</b> <br>
|
||||
Singer & Songwriter Kevin McFlannigan <br>
|
||||
Eintritt ist Frei / Hutkollekte <br>
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
const images = [
|
||||
{ src: "/images/Logo.png", alt: "Erstes Bild" },
|
||||
{ src: "/images/Logo.png", alt: "Zweites Bild" },
|
||||
{ src: "/images/Logo.png", alt: "Drittes Bild" },
|
||||
{ src: "/images/Logo.png", alt: "Viertes Bild" },
|
||||
{ src: "/images/Logo.png", alt: "Fünftes Bild" },
|
||||
{ src: "/images/Logo.png", alt: "Sechstes Bild" },
|
||||
{ src: "/images/Logo.png", alt: "Siebtes Bild" },
|
||||
{ src: "/images/Logo.png", alt: "Achtes Bild" },
|
||||
{ src: "/images/Logo.png", alt: "Neuntes Bild" },
|
||||
{ src: "/images/Logo.png", alt: "Zehntes Bild" },
|
||||
];
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Hero id="hero" />
|
||||
<Welcome id="welcome" />
|
||||
<EventsGrid id="events" events={events} />
|
||||
<ImageCarousel id="gallery" images={images} />
|
||||
<Drinks id="drinks" />
|
||||
</Layout>
|
||||
@ -1,37 +0,0 @@
|
||||
// Wait for the DOM to be fully loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add a fade-in effect to the main elements
|
||||
const elements = [
|
||||
document.querySelector('.logo'),
|
||||
document.querySelector('.coming-soon'),
|
||||
document.querySelector('.social-links'),
|
||||
document.querySelector('.opening-hours'),
|
||||
document.querySelector('.events-note')
|
||||
];
|
||||
|
||||
// Apply fade-in animation with delay for each element
|
||||
elements.forEach((element, index) => {
|
||||
if (element) {
|
||||
element.style.opacity = '0';
|
||||
element.style.transition = 'opacity 1s ease-in-out';
|
||||
|
||||
// Stagger the animations
|
||||
setTimeout(() => {
|
||||
element.style.opacity = '1';
|
||||
}, 300 * index);
|
||||
}
|
||||
});
|
||||
|
||||
// Add a subtle hover effect to the logo
|
||||
const logo = document.querySelector('.logo');
|
||||
if (logo) {
|
||||
logo.addEventListener('mouseover', function() {
|
||||
this.style.transform = 'scale(1.05)';
|
||||
this.style.transition = 'transform 0.3s ease';
|
||||
});
|
||||
|
||||
logo.addEventListener('mouseout', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
}
|
||||
});
|
||||
149
src/styles.css
149
src/styles.css
@ -1,149 +0,0 @@
|
||||
/* Global styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #213b28;
|
||||
color: #ceb39b;
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Logo styles */
|
||||
.logo-container {
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
border: 3px solid #333;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Coming soon text */
|
||||
.coming-soon {
|
||||
font-size: 36px;
|
||||
margin-bottom: 40px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
/* Social links */
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 30px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-link i {
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background-color: #555;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* Opening hours */
|
||||
.opening-hours {
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.opening-hours h2 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.opening-hours p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Events note */
|
||||
.events-note {
|
||||
font-style: italic;
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background-color: #2F2F2F;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.social-links {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.coming-soon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user