admin/sporthunde_nordeifel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update layout, add hero image, events, and update impressum

Browse Source
This commit is contained in:
Antigravity
2026-06-09 15:50:30 +00:00
parent 44e513c59a
commit 99a999018d
8 changed files with 173 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,2 +1,5 @@
*.docx
*.pdf
*.jpg
*.png
impressum.txt

2
README.md
View File

@@ -28,5 +28,5 @@ Um die Seite auf einem Produktivserver zu hosten, benötigst du Docker und ideal
docker compose up -d
```
Die Webseite ist nun unter `http://<IP-DEINES-SERVERS>:8080` erreichbar.
Die Webseite ist nun unter `http://<IP-DEINES-SERVERS>:84` erreichbar.
(Du kannst den Port in der `docker-compose.yml` entsprechend auf 80 oder hinter einen Reverse-Proxy wie Traefik / Nginx Proxy Manager anpassen).

56
backup_dark_neon/index.html
View File

@@ -1,56 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sporthunde Nordeifel e.V. - Die Elite der Sporthunde in der Nordeifel.">
<title>Sporthunde Nordeifel e.V.</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;800&display=swap" rel="stylesheet">
</head>
<body>
<div class="background-effects">
<div class="blob green"></div>
<div class="blob blue"></div>
</div>
<main class="container">
<header class="glass-card hero fade-in">
<div class="logo-container">
<img src="Logo%20Farbe.png" alt="Sporthunde Nordeifel e.V. Logo" class="logo">
</div>
<h1>Sporthunde Nordeifel <span class="ev">e.V.</span></h1>
<p class="subtitle">Adrenalin. Präzision. Teamwork.</p>
</header>
<section class="glass-card info-section fade-in">
<h2>Über uns</h2>
<p>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.</p>
</section>
<section class="glass-card contact-section fade-in">
<h2>Kontakt</h2>
<div class="contact-grid">
<a href="mailto:info@sporthunde-nordeifel.de" class="cyber-button">
<span class="icon">✉</span> info@sporthunde-nordeifel.de
</a>
<a href="tel:+49123456789" class="cyber-button">
<span class="icon">☏</span> +49 123 456 789
</a>
</div>
</section>
<footer class="glass-card footer fade-in">
<h2>Impressum</h2>
<p><strong>Sporthunde Nordeifel e.V.</strong><br>
Musterstraße 1<br>
12345 Musterstadt</p>
<br>
<p>Vertreten durch den Vorstand: Max Mustermann</p>
<p>Vereinsregister: VR 12345 (Amtsgericht Musterstadt)</p>
</footer>
</main>
<script src="script.js"></script>
</body>
</html>

37
backup_dark_neon/script.js
View File

@@ -1,37 +0,0 @@
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)`;
});
}
});

281
backup_dark_neon/styles.css
View File

@@ -1,281 +0,0 @@
: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);
}

BIN
hero_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

94
index.html
View File

@@ -13,40 +13,104 @@
<div class="blob blue"></div>
</div>
<nav class="navbar glass-card fade-in">
<ul class="nav-links">
<li><a href="#home">Startseite</a></li>
<li><a href="#ueber-uns">Über uns</a></li>
<li><a href="#aktuelles">Aktuelles</a></li>
<li><a href="#kontakt">Kontakt</a></li>
<li><a href="#impressum">Impressum</a></li>
</ul>
</nav>
<main class="container">
<header class="glass-card hero fade-in">
<header id="home" class="glass-card hero fade-in">
<div class="logo-container">
<img src="Logo%20Farbe.png" alt="Sporthunde Nordeifel e.V. Logo" class="logo">
</div>
<h1>Sporthunde Nordeifel <span class="ev">e.V.</span></h1>
<p class="subtitle">Wir bewegen die Nordeifel</p>
<div class="hero-image-container">
<img src="hero_image.png" alt="Zughundesport in Aktion" class="hero-image">
</div>
</header>
<section class="glass-card info-section fade-in">
<section id="ueber-uns" class="glass-card info-section fade-in">
<h2>Über uns</h2>
<p>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!</p>
<h3>Wer wir sind</h3>
<p>Der Verein wurde im September 2023 gegründet und ist gemeinnützig tätig. Wir sind ein junger und dynamischer Verein aus begeisterten Hundesportlern, die gemeinsam trainieren und den Austausch unter Gleichgesinnten schätzen.</p>
<br>
<h3>Was wir machen</h3>
<p>Unser Herz schlägt für den Zughundesport. Ein starkes Team funktioniert nur, wenn beide Seiten körperlich und technisch gut vorbereitet sind. Deshalb trainieren wir nicht nur die Hunde, sondern legen auch großen Wert auf die sportliche Ausbildung des Menschen. Ob ein gesunder Laufstil im Canicross oder die souveräne Beherrschung von Bike und Scooter – wir bereiten euch so vor, dass ihr diesen faszinierenden Sport lange und gesund ausüben könnt. Ob Anfänger oder ambitionierter Sportler – bei uns ist jedes Team willkommen.</p>
<br>
<h3>Unsere Philosophie: Qualität durch Ausbildung</h3>
<p>Zughundesport ist ein Teamsport. Damit ihr diesen Sport viele Jahre lang gemeinsam betreiben könnt, legen wir Wert auf fundierte Trainerausbildung, Fitness & Technik für den Menschen und artgerechte Hundeausbildung.</p>
</section>
<section class="glass-card contact-section fade-in">
<h2>Kontakt</h2>
<div class="contact-grid">
<a href="mailto:info@sporthunde-nordeifel.de" class="cyber-button">
<span class="icon">✉</span> info@sporthunde-nordeifel.de
</a>
<a href="tel:+49123456789" class="cyber-button">
<span class="icon">☏</span> +49 123 456 789
<section id="aktuelles" class="glass-card info-section fade-in">
<h2>Aktuelles</h2>
<div class="event-card">
<h3>Dog Mud Fun Run</h3>
<p>Wir richten den „Dog Mud Fun Run“ im Rahmen des bekannten Max Buddels Fun-Lauf aus. Hier geht es ab durch den Matsch und über Hindernisse – ein echtes Teamerlebnis für Hund und Halter.</p>
<div class="event-images">
<img src="dog%20mud%20fun%201.jpg" alt="Dog Mud Fun Event 1" class="event-img">
<img src="dog%20mud%20fun%202.jpg" alt="Dog Mud Fun Event 2" class="event-img">
</div>
<a href="https://my.raceresult.com/402229/registration" target="_blank" class="cyber-button event-button">
<span class="icon">🏃</span> Jetzt zum Dog Mud Fun anmelden!
</a>
</div>
</section>
<footer class="glass-card footer fade-in">
<section id="kontakt" class="glass-card contact-section fade-in">
<h2>Kontakt</h2>
<p>Du hast Fragen zu unseren Sparten, möchtest mehr über die richtige Ausrüstung erfahren oder hast Interesse an einem Probetraining? Wir freuen uns darauf, dich und deinen Hund kennenzulernen!</p>
<br>
<div class="contact-grid">
<a href="mailto:geschäftsstelle@sporthunde-nordeifel.de" class="cyber-button">
<span class="icon">✉</span> Schreib uns eine E-Mail
</a>
</div>
</section>
<footer id="impressum" class="glass-card footer fade-in text-left">
<h2>Impressum</h2>
<p><strong>Sporthunde Nordeifel e.V.</strong><br>
<div class="impressum-text">
<h3>Angaben gemäß § 5 DDG</h3>
<p><strong>Sporthunde Nordeifel e. V.</strong><br>
Geschäftsstelle<br>
Auf dem Stucks 43<br>
53947 Nettersheim</p>
<br>
<p>Vertreten durch den 1. Vorsitzenden: Christoph Jockenhövel</p>
<p>Vereinsregister: Amtsgericht Bonn</p>
<p><strong>Vertreten durch:</strong><br>
Christoph Jockenhövel<br>
Heinz Leo Schröder<br>
Julia Reis</p>
<br>
<p><strong>Kontakt:</strong><br>
E-Mail: geschäftsstelle@sporthunde-nordeifel.de</p>
<br>
<p><strong>Registereintrag:</strong><br>
Eintragung im Vereinsregister.<br>
Registergericht: Amtsgericht Bonn<br>
Registernummer: VR 12053</p>
<br>
<h3>Verbraucherstreitbeilegung / Universalschlichtungsstelle</h3>
<p>Wir nehmen nicht an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teil und sind dazu auch nicht verpflichtet.</p>
<br>
<h3>Haftungsausschluss:</h3>
<p><strong>Haftung für Inhalte</strong><br>
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 DDG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 DDG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
<br>
<p><strong>Haftung für Links</strong><br>
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p>
<br>
<p><strong>Urheberrecht</strong><br>
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p>
<br>
<p><small>Erstellt mit dem Impressum-Generator von WebsiteWissen.com, dem Ratgeber für Website-Erstellung, Homepage-Baukästen und Shopsysteme. Rechtstext von der Kanzlei Hasselbach.</small></p>
</div>
</footer>
</main>

87
styles.css
View File

@@ -272,3 +272,90 @@ p {
opacity: 1;
transform: translateY(0);
}
/* Neue CSS-Klassen für Navbar, Hero-Image, Events, Impressum */
.navbar {
position: sticky;
top: 20px;
z-index: 100;
margin: 0 auto;
max-width: 900px;
padding: 1rem;
border-radius: 50px;
}
.nav-links {
list-style: none;
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.nav-links a {
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: var(--accent-green);
}
.hero-image-container {
margin-top: 2rem;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.hero-image {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.event-card {
background: rgba(255,255,255,0.4);
border-radius: 16px;
padding: 2rem;
margin-top: 1rem;
}
.event-images {
display: flex;
gap: 1rem;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.event-img {
flex: 1;
min-width: 250px;
border-radius: 12px;
max-width: 100%;
height: auto;
object-fit: cover;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.event-button {
margin-top: 1rem;
}
.text-left {
text-align: left;
}
.impressum-text h3 {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1.2rem;
color: var(--text-primary);
}
.impressum-text p {
font-size: 0.95rem;
}