261 lines
No EOL
10 KiB
Text
261 lines
No EOL
10 KiB
Text
file:///home/denode/Downloads/knp.html {"mtime":1773932160627,"ctime":1773932160232,"size":28892,"etag":"3fo86s1rbu20","orphaned":false,"typeId":""}
|
||
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Knotenpunkt – by Nicole</title>
|
||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<div class="nav-logo">Knotenpunkt<span> by Nicole</span></div>
|
||
<ul class="nav-links">
|
||
<li><a href="#about">Über uns</a></li>
|
||
<li><a href="#laden">Laden</a></li>
|
||
<li><a href="#kontakt">Kontakt</a></li>
|
||
<li>
|
||
<div class="user-area">
|
||
<a href="#" class="btn-login" id="loginBtn">Anmelden</a>
|
||
<div class="user-dropdown" id="userDropdown">
|
||
<button class="user-avatar" id="userAvatarBtn"></button>
|
||
<div class="dropdown-menu" id="dropdownMenu">
|
||
<p class="dropdown-greeting">Hallo, <strong id="dropdownName"></strong></p>
|
||
<hr>
|
||
<button class="dropdown-item" onclick="logout()">Abmelden</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-text">
|
||
<p class="hero-tag">Handgemacht mit Liebe</p>
|
||
<h1 class="hero-title">
|
||
Makramee,<br>
|
||
<em>das Geschichten</em><br>
|
||
erzählt
|
||
</h1>
|
||
<p class="hero-sub">
|
||
Jedes Stück ein Unikat – geknüpft von Hand, mit Geduld und Herzblut.
|
||
Wandbehänge, Blumenampeln, Körbe und mehr.
|
||
</p>
|
||
<div class="hero-buttons">
|
||
<a href="#laden" class="btn-primary">Laden besuchen</a>
|
||
<a href="#kontakt" class="btn-ghost">Kontakt aufnehmen</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slide active slide-1">
|
||
<img src="pictures/schild.jpg" style="width:100%;height:100%;object-fit:cover;">
|
||
<div class="slide-caption">Unser Knotenpunkt!</div>
|
||
</div>
|
||
|
||
<div class="slide slide-2">
|
||
<img src="pictures/kanne.jpg" style="width:100%;height:100%;object-fit:cover;">
|
||
<div class="slide-caption">Blumentöpfe</div>
|
||
</div>
|
||
|
||
<div class="slide slide-3">
|
||
<img src="pictures/hase.png" style="width:100%;height:100%;object-fit:cover;">
|
||
<div class="slide-caption">Deko & Accessoires</div>
|
||
</div>
|
||
<div class="slide-dots">
|
||
<div class="dot active" onclick="goSlide(0)"></div>
|
||
<div class="dot" onclick="goSlide(1)"></div>
|
||
<div class="dot" onclick="goSlide(2)"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ABOUT -->
|
||
<section class="section" id="about">
|
||
<div class="about-grid reveal">
|
||
<div class="about-text">
|
||
<p class="section-tag">Unsere Geschichte</p>
|
||
<h2 class="section-title">Handwerk mit<br>Herz & Seele</h2>
|
||
<p>Was als kleines Hobby begann, ist heute eine Leidenschaft geworden. Jedes Stück wird von Hand geknüpft – mit natürlichen Materialien, viel Zeit und noch mehr Liebe.</p>
|
||
<p>Von gemütlichen Wandbehängen bis zu eleganten Blumenampeln: Du findest alles in unserem kleinen Schrankladen oder kannst direkt anfragen.</p>
|
||
<div class="about-features">
|
||
<div class="feature-card">
|
||
<h4>100 % Handarbeit</h4>
|
||
<p>Kein Stück ist wie das andere.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Natürliche Materialien</h4>
|
||
<p>Baumwolle, Jute & Leinen.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Auf Wunsch</h4>
|
||
<p>Individuelle Bestellungen möglich.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>Mit Liebe gemacht</h4>
|
||
<p>Von einer Mama, mit Herz.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="about-visual">
|
||
<img src="pictures/laden.jpg"
|
||
style="width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:24px;">
|
||
<div class="about-img-text">
|
||
Unser Schrankladen!
|
||
</div>
|
||
</div>
|
||
<div class="about-badge">
|
||
<span>100%</span>
|
||
<span>Unikate</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- STORE INFO -->
|
||
<section class="store-section" id="laden">
|
||
<div style="text-align:center">
|
||
<p class="section-tag">Wo du uns findest</p>
|
||
<h2 class="section-title">Im Laden & Online</h2>
|
||
</div>
|
||
<div class="store-grid reveal">
|
||
<div class="store-info-block">
|
||
<h3>Unser Schrankladen</h3>
|
||
<address>
|
||
Keiselwitzer Hauptstraße 13<br>
|
||
04668 Grimma<br>
|
||
OT Keiselwitz<br><br>
|
||
|
||
<h4>Öffnungszeiten</h4>
|
||
Mo–Fr: 8–20 Uhr<br>
|
||
Sa, So und Feiertags: 9-20 Uhr
|
||
</address>
|
||
</div>
|
||
<div class="store-info-block">
|
||
<h3>Folg uns auf Instagram</h3>
|
||
<p>Aktuelle Stücke, neue Ideen und ein Blick hinter die Kulissen – täglich frisch.</p>
|
||
<a href="https://instagram.com/knotenpunkt_by_nicole" target="_blank" class="insta-link">
|
||
<span class="insta-icon"></span>
|
||
@knotenpunkt_by_nicole →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CONTACT -->
|
||
<section class="contact-section" id="kontakt">
|
||
<div class="reveal">
|
||
<p class="section-tag">Schreib uns</p>
|
||
<h2 class="section-title">Kontakt</h2>
|
||
<p class="contact-intro">Fragen, Wunschbestellungen oder einfach ein nettes Hallo – wir freuen uns über jede Nachricht.</p>
|
||
<form class="contact-form" id="contactForm" onsubmit="submitForm(event)">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Name</label>
|
||
<input type="text" id="contactName" placeholder="Dein Name" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>E-Mail</label>
|
||
<input type="email" id="contactEmail" placeholder="deine@email.de" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Nachricht</label>
|
||
<textarea id="contactMessage" placeholder="Deine Nachricht…" required></textarea>
|
||
</div>
|
||
<div class="success-msg" id="successMsg">
|
||
Deine Nachricht wurde gesendet! Wir melden uns bald.
|
||
</div>
|
||
<button type="submit" class="btn-primary form-submit">Nachricht senden →</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="footer-logo">Knoten<span>welt</span></div>
|
||
<p>© 2026 Knotenpunkt by Nicole · Alle Rechte vorbehalten</p>
|
||
<div class="footer-links">
|
||
<a href="#" onclick="openLegal('impressumOverlay'); return false;">Impressum</a>
|
||
<a href="#" onclick="openLegal('datenschutzOverlay'); return false;">Datenschutz</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- MODAL: Login / Register -->
|
||
<div class="modal-overlay" id="modalOverlay">
|
||
<div class="modal">
|
||
<button class="modal-close" onclick="closeModal('modalOverlay')">✕</button>
|
||
<h2 class="modal-title">Willkommen</h2>
|
||
<p class="modal-sub">Melde dich an oder erstelle ein Konto</p>
|
||
<div class="modal-tabs">
|
||
<button class="modal-tab active" onclick="switchTab(this,'login')">Anmelden</button>
|
||
<button class="modal-tab" onclick="switchTab(this,'register')">Registrieren</button>
|
||
</div>
|
||
<div id="loginForm">
|
||
<form class="modal-form" onsubmit="handleAuth(event,'login')">
|
||
<input type="email" name="email" placeholder="E-Mail-Adresse" required>
|
||
<input type="password" name="password" placeholder="Passwort" required>
|
||
<p class="auth-error"></p>
|
||
<button type="submit" class="btn-primary" style="width:100%">Anmelden</button>
|
||
</form>
|
||
</div>
|
||
<div id="registerForm" style="display:none">
|
||
<form class="modal-form" onsubmit="handleAuth(event,'register')">
|
||
<input type="text" name="name" placeholder="Dein Name" required>
|
||
<input type="email" name="email" placeholder="E-Mail-Adresse" required>
|
||
<input type="password" name="password" placeholder="Passwort (min. 8 Zeichen)" required>
|
||
<p class="auth-error"></p>
|
||
<button type="submit" class="btn-primary" style="width:100%">Konto erstellen</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL: Impressum -->
|
||
<div class="modal-overlay" id="impressumOverlay">
|
||
<div class="modal modal-legal">
|
||
<button class="modal-close" onclick="closeModal('impressumOverlay')">✕</button>
|
||
<h2 class="modal-title">Impressum</h2>
|
||
<div class="legal-content">
|
||
<p><strong>Angaben gemäß § 5 TMG</strong></p>
|
||
<p>Nicole Klemmig<br>Keiselwitzer Hauptstraße 13<br>04668 Grimma</p>
|
||
<p><strong>Kontakt</strong></p>
|
||
<p>E-Mail: knotenpunkt-by-nicole@gmx.de/p>
|
||
<p><strong>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</strong></p>
|
||
<p>Nicole Klemmig, Keiselwitzer Hauptstraße 13, 04668 Grimma</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODAL: Datenschutz -->
|
||
<div class="modal-overlay" id="datenschutzOverlay">
|
||
<div class="modal modal-legal">
|
||
<button class="modal-close" onclick="closeModal('datenschutzOverlay')">✕</button>
|
||
<h2 class="modal-title">Datenschutz</h2>
|
||
<div class="legal-content">
|
||
<p><strong>1. Verantwortlicher</strong></p>
|
||
<p>Nicole Klemmig, Keiselwitzer Hauptstraße 13, 04668 Grimma</p>
|
||
<p><strong>2. Welche Daten wir erheben</strong></p>
|
||
<p>Beim Kontaktformular: Name und E-Mail-Adresse. Bei der Registrierung: Name, E-Mail und ein verschlüsseltes Passwort. Server-Logs: IP-Adresse, Zeitstempel, aufgerufene Seiten.</p>
|
||
<p><strong>3. Zweck der Verarbeitung</strong></p>
|
||
<p>Kontaktanfragen zu beantworten und Nutzerkonten zu verwalten. Keine Weitergabe an Dritte.</p>
|
||
<p><strong>4. Speicherdauer</strong></p>
|
||
<p>Kontaktanfragen werden nicht dauerhaft gespeichert. Nutzerdaten bleiben bis zur Löschung des Kontos gespeichert.</p>
|
||
<p><strong>5. Deine Rechte</strong></p>
|
||
<p>Du hast das Recht auf Auskunft, Berichtigung und Löschung. Kontakt: knotenpunkt-by-nicole@gmx.de</p>
|
||
<p><strong>6. Hosting</strong></p>
|
||
<p>Diese Website wird auf einem eigenen Server in Deutschland gehostet.</p>
|
||
<p class="legal-note">Vereinfachte Datenschutzerklärung – im Zweifel einen Anwalt hinzuziehen.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html> |