1<!DOCTYPE html> 2<html lang="de"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <!-- === Titel & Suchmaschinen === --> 7 <title>Termine & Kalender | Schach-Rheinfelden (CH & DE)</title> 8 <meta name="description" content="Alle anstehenden und vergangenen Termine, Turniere, Trainingszeiten und Vereinsanlässe von Schach-Rheinfelden (CH & DE)." /> 9 10 <!-- === Favicon & Icons === --> 11 <link rel="icon" type="image/svg+xml" href="assets/favicon.svg"> 12 <link rel="apple-touch-icon" href="assets/favicon.svg"> 13 14 <!-- ================================================================ 15 LINK-VORSCHAU (Open Graph) fuer WhatsApp, Facebook, iMessage etc. 16 >>> HIER ANPASSEN, wenn Vorschau-Titel, -Text oder -Bild sich 17 >>> aendern sollen. og:image muss eine ABSOLUTE URL sein (https://...). 18 ================================================================ --> 19 <meta property="og:title" content="Termine & Kalender - Schach-Rheinfelden" /> 20 <meta property="og:description" content="Verpasse kein Training oder Turnier mehr: Alle Termine der Schach-Gemeinschaft am Rheinknie im praktischen Ãberblick." /> 21 <meta property="og:type" content="website" /> 22 <meta property="og:url" content="https://schach-rheinfelden.github.io/events-archive.html" /> 23 <meta property="og:image" content="https://res.cloudinary.com/i1wuvnct/image/upload/w_800,c_limit,f_auto,q_auto/v1784323180/Bilder/Logos/Schach-Rheinfelden_Banner_jjcvcl.png" /> 24 <meta property="og:site_name" content="Schach-Rheinfelden" /> 25 26 <link rel="stylesheet" href="css/style.css?v=142"> 27 <link rel="preconnect" href="https://fonts.googleapis.com"> 28 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 29 <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap" rel="stylesheet"> 30 <style> 31 .search-bar { 32 width: 100%; 33 padding: 1rem 1.5rem; 34 font-size: 1.1rem; 35 border-radius: 8px; 36 border: 1px solid var(--glass-border); 37 background: rgba(255, 255, 255, 0.1); 38 color: var(--text-primary); 39 margin-bottom: 2rem; 40 outline: none; 41 transition: all 0.3s ease; 42 } 43 .search-bar:focus { 44 border-color: var(--accent-color); 45 background: rgba(255, 255, 255, 0.15); 46 } 47 .light-theme .search-bar { 48 background: rgba(0, 0, 0, 0.05); 49 } 50 .light-theme .search-bar:focus { 51 background: rgba(0, 0, 0, 0.08); 52 } 53 54 /* Calendar Icon Style for Dark Theme */ 55 input[type="date"]::-webkit-calendar-picker-indicator { 56 filter: invert(1); 57 opacity: 0.6; 58 cursor: pointer; 59 } 60 .light-theme input[type="date"]::-webkit-calendar-picker-indicator { 61 filter: none; 62 opacity: 0.6; 63 } 64 65 .events-grid { 66 display: grid; 67 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 68 gap: 1.5rem; 69 } 70 71 .event-card { 72 background: rgba(15, 23, 42, 0.4); 73 border: 1px solid var(--glass-border); 74 border-radius: 12px; 75 padding: 1.5rem; 76 display: flex; 77 flex-direction: column; 78 gap: 1rem; 79 transition: all 0.3s ease; 80 } 81 82 .light-theme .event-card { 83 background: rgba(255, 255, 255, 0.6); 84 } 85 86 .event-card:hover { 87 transform: translateY(-5px); 88 border-color: var(--accent-color); 89 background: rgba(255, 255, 255, 0.08); 90 } 91 92 .event-card.event-past { 93 opacity: 0.6; 94 filter: grayscale(80%); 95 } 96 97 .event-card.event-past:hover { 98 opacity: 1; 99 filter: grayscale(0%); 100 } 101 </style> 102</head> 103<body> 104 <div id="top-banner" class="top-banner"></div> 105 <header id="navbar" class="navbar"> 106 <nav class="container nav-content"> 107 <div class="brand-wrapper"> 108 <a href="index.html" class="brand">
109 <span class="logo-icon">â</span> 110 <span id="nav-club-name" class="brand-name">Schach Rheinfelden</span> 111 </a> 112 <div id="nav-today-badge" class="nav-today-badge hidden"></div> 113 </div> 114 <ul class="nav-links" id="nav-links"> 115 <!-- Menü wird dynamisch von shared.js (initDynamicMenu) generiert --> 116 </ul> 117 <div class="nav-controls"> 118 <label class="theme-switch" title="Theme wechseln"> 119 <input type="checkbox" id="theme-toggle"> 120 <span class="slider round"></span> 121 </label> 122 <div class="hamburger" id="hamburger"> 123 <span></span> 124 <span></span> 125 <span></span> 126 </div> 127 </div> 128 </nav> 129 </header> 130 131 <main style="padding-top: 120px; min-height: 100vh;"> 132 <section class="section"> 133 <div class="container"> 134 <h1 class="section-title" style="margin-bottom: 2rem;">Termine</h1> 135 136 <div class="events-toolbar" style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem;"> 137 <div style="flex: 1; min-width: 280px;"> 138 <input type="text" id="events-search" class="search-bar" placeholder="Suchen nach Titel, Ort oder Datum..." style="margin-bottom: 0;"> 139 </div> 140 <div class="events-view-toggle" style="display: flex; gap: 0.6rem;"> 141 <button id="view-grid-btn" class="btn btn-primary" onclick="toggleView('grid')" title="Raster-Ansicht" style="padding: 0.85rem 1.15rem; display: flex; align-items: center; justify-content: center;"> 142 <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg> 143 </button> 144 <button id="view-timeline-btn" class="btn btn-secondary" onclick="toggleView('timeline')" title="Zeitleisten-Ansicht" style="padding: 0.85rem 1.15rem; display: flex; align-items: center; justify-content: center;"> 145 <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M3 12h6m6 0h6"></path></svg> 146 </button> 147 </div> 148 </div> 149 150 <div class="date-filter-container" style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; background: var(--glass-bg); padding: 1rem; border-radius: 12px; border: 1px solid var(--glass-border);"> 151 <div style="display: flex; align-items: center; gap: 0.5rem;"> 152 <label for="events-date-from" style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;">Von:</label> 153 <input type="date" id="events-date-from" class="search-bar" style="margin-bottom: 0; width: auto; padding: 0.5rem 0.8rem; border-radius: 8px; font-family: inherit; font-size: 0.85rem; font-style: italic; color: var(--text-secondary);"> 154 </div> 155 <div style="display: flex; align-items: center; gap: 0.5rem;"> 156 <label for="events-date-to" style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;">Bis:</label> 157 <input type="date" id="events-date-to" class="search-bar" style="margin-bottom: 0; width: auto; padding: 0.5rem 0.8rem; border-radius: 8px; font-family: inherit; font-size: 0.85rem; font-style: italic; color: var(--text-secondary);"> 158 </div> 159 <button id="events-date-reset" class="btn btn-secondary" style="padding: 0.5rem 1rem; font-size: 0.85rem;">Reset</button> 160 </div> 161 162 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem;"> 163 <div id="events-filter" class="filter-bar" style="margin-bottom: 0;"> 164 <!-- Filter buttons injected via JS --> 165 </div> 166 167 <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;"> 168 <button id="download-all-events-btn" class="btn btn-secondary" onclick="downloadAllEvents()" style="display: flex; align-items: center; gap: 0.5rem; height: 42px; padding: 0 1rem;"> 169 <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
169<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg> 170 <span class="hide-mobile">Alle Termine speichern</span> 171 </button> 172 </div> 173 </div> 174 175 <div id="events-archive-container" class="events-grid"> 176 <!-- Events injected here --> 177 <div class="loading">Lade Termine...</div> 178 </div> 179 180 <!-- Auf schmalen Bildschirmen bekommt die Zeitleiste eine feste 181 Mindestbreite und wird seitlich scrollbar (siehe style.css). 182 Ohne den Wrapper muessten die Balken verzerrt werden, um 183 ueberhaupt sichtbar zu bleiben. --> 184 <div class="events-timeline-scroll"> 185 <div id="events-timeline-container" class="events-timeline hidden"> 186 <!-- Timeline injected here --> 187 </div> 188 </div> 189 <div id="events-archive-load-more" style="text-align: center; margin-top: 3rem;"></div> 190 </div> 191 </section> 192 </main> 193 194 <footer id="contact" class="footer"> 195 <div class="container footer-content"> 196 <div class="footer-info"> 197 <h3>Kontakt</h3> 198 <div id="footer-contact-container"> 199 <!-- Contact info injected via CSV --> 200 </div> 201 </div> 202 <div class="footer-legal"> 203 <p id="footer-copyright-line">© <span id="current-year"></span> <span id="footer-club-name">Schach Rheinfelden</span>.</p> 204 <p><a href="#" onclick="openLegalModal('impressum'); return false;">Impressum</a> | <a href="#" onclick="openLegalModal('datenschutz'); return false;">Datenschutz</a><span id="footer-bank-sep" style="display: none;"> | <a href="#" onclick="openLegalModal('bankverbindung'); return false;">Bankverbindung</a></span></p> 205 </div> 206 </div> 207 </footer> 208 209 <!-- Event Modal --> 210 <div id="event-modal" class="modal hidden"> 211 <div class="modal-overlay" onclick="closeEventModal()"></div> 212 <div class="modal-content glass-card"> 213 <button class="close-btn" onclick="closeEventModal()">×</button> 214 <div id="event-modal-body"></div> 215 </div> 216 </div> 217 218 <!-- Legal Modal --> 219 <div id="legal-modal" class="modal hidden"> 220 <div class="modal-overlay" onclick="closeLegalModal()"></div> 221 <div class="modal-content glass-card" style="max-width: 600px;"> 222 <button class="close-btn" onclick="closeLegalModal()">×</button> 223 <h2 id="legal-modal-title" style="margin-bottom: 1.5rem; color: var(--accent-color);"></h2> 224 <div id="legal-modal-body" style="font-size: 1.1rem; line-height: 1.6; color: var(--text-primary);"></div> 225 </div> 226 </div> 227 228
228<script src="js/shared.js?v=119"></script>
228 229
229<script src="js/events-archive.js?v=131"></script>
229 230</body> 231</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.