commit 7efa0058928be195354c071d53cabc0f235b5a11 Author: Antigravity Date: Mon Jun 8 11:01:08 2026 +0000 Initial commit of website project diff --git a/Einladung Jahreshauptversammlung 06 06 2026.pdf b/Einladung Jahreshauptversammlung 06 06 2026.pdf new file mode 100644 index 0000000..c494624 Binary files /dev/null and b/Einladung Jahreshauptversammlung 06 06 2026.pdf differ diff --git a/FredokaOne-Regular.woff2 b/FredokaOne-Regular.woff2 new file mode 100644 index 0000000..ac68bcf Binary files /dev/null and b/FredokaOne-Regular.woff2 differ diff --git a/Logo Farbe.png b/Logo Farbe.png new file mode 100644 index 0000000..d2a1559 Binary files /dev/null and b/Logo Farbe.png differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..fd98465 --- /dev/null +++ b/README.md @@ -0,0 +1,44 @@ +# Sporthunde Nordeifel e.V. - Visitenkarte + +Dies ist die statische Web-Visitenkarte für den Sporthunde Nordeifel e.V. + +## Inhalt +- `index.html`: Hauptseite (Struktur) +- `styles.css`: Stylesheet (Design) +- `script.js`: JavaScript (Interaktivität) +- Assets wie Bilder, Dokumente und Schriften. + +## Changelog +- **2026-06-08**: Initiales Einchecken ins Git-Repository (ohne Gitea Build-Pipeline). + +## Deployment (Produktivserver mit Docker) + +Um die Seite auf einem Produktivserver zu hosten, benötigst du Docker und idealerweise Docker Compose. Du kannst einen einfachen Nginx-Container verwenden, um die statischen Dateien auszuliefern. + +1. **Repository klonen:** + ```bash + git clone https://git.klenzel.net/admin/sporthunde_nordeifel.git + cd sporthunde_nordeifel + ``` + +2. **docker-compose.yml anlegen (falls nicht vorhanden):** + Erstelle eine Datei `docker-compose.yml` im Projektverzeichnis mit folgendem Inhalt: + ```yaml + services: + web: + image: nginx:alpine + ports: + - "8080:80" + volumes: + - .:/usr/share/nginx/html:ro + restart: always + ``` + +3. **Container starten:** + Führe den folgenden Befehl im Projektverzeichnis aus: + ```bash + docker compose up -d + ``` + +Die Webseite ist nun unter `http://:8080` erreichbar. +(Du kannst den Port in der `docker-compose.yml` entsprechend auf 80 oder hinter einen Reverse-Proxy wie Traefik / Nginx Proxy Manager anpassen). diff --git a/Website.docx b/Website.docx new file mode 100644 index 0000000..97bb1cb Binary files /dev/null and b/Website.docx differ diff --git a/backup_dark_neon/index.html b/backup_dark_neon/index.html new file mode 100644 index 0000000..adbfb63 --- /dev/null +++ b/backup_dark_neon/index.html @@ -0,0 +1,56 @@ + + + + + + + Sporthunde Nordeifel e.V. + + + + +
+
+
+
+ +
+
+
+ +
+

Sporthunde Nordeifel e.V.

+

Adrenalin. Präzision. Teamwork.

+
+ +
+

Über uns

+

Wir sind mehr als nur ein Verein. Wir sind die Elite der Sporthunde in der Nordeifel. Trainiere mit den Besten, pushe deine Grenzen und erreiche gemeinsam mit deinem Hund das Unmögliche.

+
+ +
+

Kontakt

+
+ + ✉ info@sporthunde-nordeifel.de + + + ☏ +49 123 456 789 + +
+
+ +
+

Impressum

+

Sporthunde Nordeifel e.V.
+ Musterstraße 1
+ 12345 Musterstadt

+
+

Vertreten durch den Vorstand: Max Mustermann

+

Vereinsregister: VR 12345 (Amtsgericht Musterstadt)

+
+
+ + + + diff --git a/backup_dark_neon/script.js b/backup_dark_neon/script.js new file mode 100644 index 0000000..cc70d31 --- /dev/null +++ b/backup_dark_neon/script.js @@ -0,0 +1,37 @@ +document.addEventListener('DOMContentLoaded', () => { + // Intersection Observer for fade-in animations + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } + }); + }, { threshold: 0.15 }); + + document.querySelectorAll('.fade-in').forEach(el => observer.observe(el)); + + // Logo 3D effect on mousemove + const logo = document.querySelector('.logo'); + const hero = document.querySelector('.hero'); + + if(window.matchMedia("(pointer: fine)").matches) { + hero.addEventListener('mousemove', (e) => { + const rect = hero.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + const centerX = rect.width / 2; + const centerY = rect.height / 2; + + // Calculate rotation (inverted for natural feel) + const rotateX = ((y - centerY) / centerY) * -15; + const rotateY = ((x - centerX) / centerX) * 15; + + logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; + }); + + hero.addEventListener('mouseleave', () => { + logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`; + }); + } +}); diff --git a/backup_dark_neon/styles.css b/backup_dark_neon/styles.css new file mode 100644 index 0000000..7c44d7f --- /dev/null +++ b/backup_dark_neon/styles.css @@ -0,0 +1,281 @@ +:root { + --bg-color: #050505; + --card-bg: rgba(20, 20, 20, 0.4); + --text-primary: #ffffff; + --text-secondary: #a0a0a0; + --accent-green: #5eb344; + --neon-green: #39ff14; + --accent-blue: #90cff3; + --neon-blue: #00f3ff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Outfit', sans-serif; +} + +body { + background-color: var(--bg-color); + color: var(--text-primary); + min-height: 100vh; + overflow-x: hidden; + position: relative; + line-height: 1.6; +} + +/* Background Effects */ +.background-effects { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: -1; + overflow: hidden; +} + +.blob { + position: absolute; + filter: blur(120px); + border-radius: 50%; + animation: float 25s infinite alternate cubic-bezier(0.5, 0, 0.5, 1); + opacity: 0.3; +} + +.blob.green { + width: 50vw; + height: 50vw; + background: var(--accent-green); + top: -20%; + left: -20%; +} + +.blob.blue { + width: 60vw; + height: 60vw; + background: var(--accent-blue); + bottom: -30%; + right: -20%; + animation-delay: -12s; +} + +@keyframes float { + 0% { transform: translate(0, 0) scale(1); } + 100% { transform: translate(15vw, 15vh) scale(1.3); } +} + +/* Layout */ +.container { + max-width: 900px; + margin: 0 auto; + padding: 4rem 1.5rem; + display: flex; + flex-direction: column; + gap: 2.5rem; +} + +/* Glassmorphism */ +.glass-card { + background: var(--card-bg); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 24px; + padding: 3rem; + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease, box-shadow 0.4s ease; +} + +.glass-card:hover { + transform: translateY(-8px); + border-color: rgba(94, 179, 68, 0.4); + box-shadow: 0 20px 40px rgba(94, 179, 68, 0.15); +} + +/* Hero Section */ +.hero { + text-align: center; + position: relative; + overflow: hidden; + padding-top: 4rem; + padding-bottom: 4rem; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; height: 3px; + background: linear-gradient(90deg, transparent, var(--neon-green), var(--neon-blue), transparent); + z-index: 1; +} + +.logo-container { + perspective: 1000px; + margin-bottom: 2.5rem; +} + +.logo { + width: 220px; + filter: drop-shadow(0 0 25px rgba(94, 179, 68, 0.5)); + animation: pulseLogo 4s infinite ease-in-out; + transform-style: preserve-3d; + transition: transform 0.2s ease-out; +} + +@keyframes pulseLogo { + 0%, 100% { filter: drop-shadow(0 0 20px rgba(94, 179, 68, 0.5)); } + 50% { filter: drop-shadow(0 0 40px rgba(0, 243, 255, 0.7)); } +} + +h1 { + font-size: clamp(2rem, 5vw, 4rem); + font-weight: 800; + text-transform: uppercase; + letter-spacing: -1px; + margin-bottom: 0.5rem; + background: linear-gradient(to right, #fff, #ddd); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +h1 .ev { + font-size: clamp(1rem, 2.5vw, 2rem); + color: var(--accent-green); + -webkit-text-fill-color: var(--neon-green); + vertical-align: super; + text-shadow: 0 0 10px rgba(57, 255, 20, 0.5); +} + +.subtitle { + font-size: clamp(1rem, 2vw, 1.4rem); + color: var(--accent-blue); + font-weight: 300; + letter-spacing: 4px; + text-transform: uppercase; + text-shadow: 0 0 8px rgba(144, 207, 243, 0.4); +} + +/* Typography & Content */ +h2 { + font-size: 1.8rem; + color: #fff; + margin-bottom: 1.5rem; + display: inline-block; + position: relative; + font-weight: 500; +} + +h2::after { + content: ''; + position: absolute; + bottom: -8px; + left: 0; + width: 30%; + height: 3px; + background: var(--neon-green); + border-radius: 2px; + box-shadow: 0 0 12px var(--neon-green); + transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.glass-card:hover h2::after { + width: 100%; +} + +p { + color: var(--text-secondary); + font-size: 1.1rem; + font-weight: 300; +} + +/* Buttons */ +.contact-grid { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +@media(min-width: 600px) { + .contact-grid { + flex-direction: row; + } +} + +.cyber-button { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 1.2rem 2rem; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + color: #fff; + text-decoration: none; + font-weight: 500; + font-size: 1.2rem; + position: relative; + overflow: hidden; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.cyber-button::before { + content: ''; + position: absolute; + top: 0; left: -100%; + width: 100%; height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); + transition: left 0.6s ease; +} + +.cyber-button:hover { + background: rgba(94, 179, 68, 0.1); + border-color: var(--neon-green); + box-shadow: 0 0 25px rgba(94, 179, 68, 0.3), inset 0 0 15px rgba(94, 179, 68, 0.1); + transform: translateY(-4px); +} + +.cyber-button:hover::before { + left: 100%; +} + +.icon { + font-size: 1.8rem; + color: var(--neon-blue); + text-shadow: 0 0 10px rgba(0, 243, 255, 0.5); +} + +/* Footer */ +.footer { + text-align: center; + padding: 2rem; +} + +.footer p { + font-size: 0.95rem; + margin-bottom: 0.5rem; +} + +.footer h2::after { + left: 50%; + transform: translateX(-50%); +} + +.footer:hover h2::after { + width: 50%; +} + +/* Animations */ +.fade-in { + opacity: 0; + transform: translateY(40px); + transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..1079605 --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + + Sporthunde Nordeifel e.V. + + + +
+
+
+
+ +
+
+
+ +
+

Sporthunde Nordeifel e.V.

+

Wir bewegen die Nordeifel

+
+ +
+

Über uns

+

Wir sind ein junger und dynamischer Verein aus begeisterten Hundesportlern, die gemeinsam trainieren und den Austausch unter Gleichgesinnten schätzen. Unser Herz schlägt für den Zughundesport!

+
+ +
+

Kontakt

+
+ + ✉ info@sporthunde-nordeifel.de + + + ☏ +49 123 456 789 + +
+
+ +
+

Impressum

+

Sporthunde Nordeifel e.V.
+ Auf dem Stucks 43
+ 53947 Nettersheim

+
+

Vertreten durch den 1. Vorsitzenden: Christoph Jockenhövel

+

Vereinsregister: Amtsgericht Bonn

+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..cc70d31 --- /dev/null +++ b/script.js @@ -0,0 +1,37 @@ +document.addEventListener('DOMContentLoaded', () => { + // Intersection Observer for fade-in animations + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } + }); + }, { threshold: 0.15 }); + + document.querySelectorAll('.fade-in').forEach(el => observer.observe(el)); + + // Logo 3D effect on mousemove + const logo = document.querySelector('.logo'); + const hero = document.querySelector('.hero'); + + if(window.matchMedia("(pointer: fine)").matches) { + hero.addEventListener('mousemove', (e) => { + const rect = hero.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + const centerX = rect.width / 2; + const centerY = rect.height / 2; + + // Calculate rotation (inverted for natural feel) + const rotateX = ((y - centerY) / centerY) * -15; + const rotateY = ((x - centerX) / centerX) * 15; + + logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; + }); + + hero.addEventListener('mouseleave', () => { + logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`; + }); + } +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..1a5aeb2 --- /dev/null +++ b/styles.css @@ -0,0 +1,274 @@ +@font-face { + font-family: 'Fredoka One'; + src: url('FredokaOne-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +:root { + --bg-color: #f4f7f6; + --card-bg: rgba(255, 255, 255, 0.7); + --text-primary: #2d3748; + --text-secondary: #4a5568; + --accent-green: #5eb344; + --accent-blue: #90cff3; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Fredoka One', sans-serif; +} + +body { + background-color: var(--bg-color); + color: var(--text-primary); + min-height: 100vh; + overflow-x: hidden; + position: relative; + line-height: 1.6; +} + +/* Background Effects */ +.background-effects { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: -1; + overflow: hidden; +} + +.blob { + position: absolute; + filter: blur(100px); + border-radius: 50%; + animation: float 25s infinite alternate cubic-bezier(0.5, 0, 0.5, 1); + opacity: 0.4; +} + +.blob.green { + width: 50vw; + height: 50vw; + background: var(--accent-green); + top: -20%; + left: -20%; +} + +.blob.blue { + width: 60vw; + height: 60vw; + background: var(--accent-blue); + bottom: -30%; + right: -20%; + animation-delay: -12s; +} + +@keyframes float { + 0% { transform: translate(0, 0) scale(1); } + 100% { transform: translate(10vw, 10vh) scale(1.1); } +} + +/* Layout */ +.container { + max-width: 900px; + margin: 0 auto; + padding: 4rem 1.5rem; + display: flex; + flex-direction: column; + gap: 2.5rem; +} + +/* Glassmorphism */ +.glass-card { + background: var(--card-bg); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid rgba(255, 255, 255, 0.6); + border-radius: 24px; + padding: 3rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); + transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; +} + +.glass-card:hover { + transform: translateY(-4px); + border-color: rgba(94, 179, 68, 0.3); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); +} + +/* Hero Section */ +.hero { + text-align: center; + position: relative; + overflow: hidden; + padding-top: 4rem; + padding-bottom: 4rem; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; height: 3px; + background: linear-gradient(90deg, transparent, var(--accent-green), var(--accent-blue), transparent); + z-index: 1; +} + +.logo-container { + perspective: 1000px; + margin-bottom: 2.5rem; +} + +.logo { + width: 220px; + filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1)); + transform-style: preserve-3d; + transition: transform 0.2s ease-out; +} + +h1 { + font-size: clamp(1.2rem, 4vw, 3rem); + font-weight: normal; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0.5rem; + color: var(--text-primary); + white-space: nowrap; +} + +h1 .ev { + font-size: clamp(1rem, 2.5vw, 2rem); + color: var(--accent-green); +} + +.subtitle { + font-size: clamp(1rem, 2vw, 1.4rem); + color: var(--accent-blue); + font-weight: 500; + letter-spacing: 2px; + text-transform: uppercase; +} + +/* Typography & Content */ +h2 { + font-size: 1.8rem; + color: var(--text-primary); + margin-bottom: 1.5rem; + display: inline-block; + position: relative; + font-weight: 600; +} + +h2::after { + content: ''; + position: absolute; + bottom: -8px; + left: 0; + width: 30%; + height: 3px; + background: var(--accent-green); + border-radius: 2px; + transition: width 0.4s ease; +} + +.glass-card:hover h2::after { + width: 100%; +} + +p { + color: var(--text-secondary); + font-size: 1.1rem; + font-weight: 400; +} + +/* Buttons */ +.contact-grid { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +@media(min-width: 600px) { + .contact-grid { + flex-direction: row; + } +} + +.cyber-button { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 1.2rem 2rem; + background: rgba(255, 255, 255, 0.6); + border: 1px solid rgba(255, 255, 255, 0.9); + border-radius: 16px; + color: var(--text-primary); + text-decoration: none; + font-weight: 500; + font-size: 1.2rem; + position: relative; + overflow: hidden; + transition: all 0.4s ease; +} + +.cyber-button::before { + content: ''; + position: absolute; + top: 0; left: -100%; + width: 100%; height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); + transition: left 0.6s ease; +} + +.cyber-button:hover { + background: rgba(255, 255, 255, 0.95); + border-color: var(--accent-green); + box-shadow: 0 4px 15px rgba(94, 179, 68, 0.15); + transform: translateY(-2px); +} + +.cyber-button:hover::before { + left: 100%; +} + +.icon { + font-size: 1.8rem; + color: var(--accent-green); +} + +/* Footer */ +.footer { + text-align: center; + padding: 2rem; +} + +.footer p { + font-size: 0.95rem; + margin-bottom: 0.5rem; +} + +.footer h2::after { + left: 50%; + transform: translateX(-50%); +} + +.footer:hover h2::after { + width: 50%; +} + +/* Animations */ +.fade-in { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.8s ease, transform 0.8s ease; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +}