Testseite: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
 
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<!doctype html>
<html lang="de">
<html lang="de">
<head>
<head>
  <meta charset="utf-8" />
<meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Familienangebote im August 2026</title>
<title>Kalender - August 2026</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<style>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 
  <style>
    body {
     :root {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
       --bg: #f7f6f2;
      background: #f1f5f9;
       --surface: #ffffff;
      color: #1e293b;
       --surface-2: #f3f0ec;
      padding: 1.5rem 1rem 3rem;
       --text: #28251d;
    }
       --muted: #6f6a63;
 
       --border: rgba(40, 37, 29, 0.12);
    /* ===== HEADER ===== */
       --primary: #01696f;
    .cal-header {
       --primary-soft: #dcebea;
      max-width: 860px;
       --shadow: 0 10px 28px rgba(36, 31, 24, 0.08);
      margin-bottom: 1.25rem;
       --radius: 18px;
      display: flex;
       --radius-sm: 12px;
      align-items: baseline;
      gap: 1rem;
    }
     .cal-header h2 {
       font-size: 1.6rem;
      font-weight: 700;
      color: #0f172a;
       letter-spacing: -0.03em;
    }
    .cal-header p {
      font-size: 0.8rem;
      color: #94a3b8;
       font-weight: 400;
    }
 
    /* ===== GRID WRAPPER ===== */
    .cal-wrap {
      max-width: 860px;
      display: grid;
       grid-template-columns: repeat(7, 1fr);
       border-radius: 16px;
      overflow: hidden;
       box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.08);
       border: 1px solid #e2e8f0;
      background: #e2e8f0; /* gap color between cells */
       gap: 1px;
    }
 
    /* ===== COLUMN HEADERS ===== */
    .col-header {
      background: #1e293b;
       text-align: center;
      padding: 0.6rem 0.2rem;
       font-size: 0.7rem;
      font-weight: 600;
      color: #94a3b8;
       letter-spacing: 0.08em;
      text-transform: uppercase;
     }
     }


     * { box-sizing: border-box; }
     /* ===== DAY CELLS ===== */
     html { scroll-behavior: smooth; }
     .day-empty {
    body {
       min-height: 90px;
       margin: 0;
       background: #f8fafc;
      font-family: 'Inter', system-ui, sans-serif;
       background: var(--bg);
      color: var(--text);
      line-height: 1.5;
     }
     }


     .calendar-app {
     .day {
       max-width: 1180px;
      min-height: 90px;
       margin: 0 auto;
      padding: 0.5rem 0.5rem 0.4rem;
       padding: 24px 16px 40px;
      background: #ffffff;
      display: flex;
       flex-direction: column;
       gap: 0.3rem;
       position: relative;
      transition: background 0.1s;
     }
     }
    .day.we { background: #fafbff; }


     .calendar-head {
     .day-num {
      font-size: 0.75rem;
      font-weight: 600;
      color: #64748b;
      line-height: 1;
      width: 22px;
      height: 22px;
       display: flex;
       display: flex;
       justify-content: space-between;
      align-items: center;
       align-items: end;
       justify-content: center;
       gap: 16px;
      border-radius: 50%;
       margin-bottom: 18px;
      flex-shrink: 0;
       flex-wrap: wrap;
    }
 
    /* ===== CSS-ONLY POPUP ===== */
    .ev-toggle { display: none; }
 
    .ev-chip {
      display: block;
      background: #eff6ff;
      border-left: 3px solid #3b82f6;
      border-radius: 0 6px 6px 0;
       padding: 0.22rem 0.4rem;
      font-size: 0.67rem;
      line-height: 1.35;
       cursor: pointer;
       user-select: none;
       transition: background 0.15s, transform 0.1s;
    }
    .ev-chip:hover {
      background: #dbeafe;
      transform: translateY(-1px);
     }
     }
    .chip-time  { font-weight: 700; color: #2563eb; display: block; }
    .chip-title { color: #1e40af; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


     .calendar-title-wrap h1 {
    /* Overlay */
       margin: 0;
     .ev-overlay {
       font-size: clamp(1.7rem, 2.8vw, 2.5rem);
       display: none;
       line-height: 1.1;
      position: fixed;
      inset: 0;
       background: rgba(15, 23, 42, 0.6);
       backdrop-filter: blur(2px);
      z-index: 9998;
      cursor: pointer;
     }
     }


     .calendar-title-wrap p {
    /* Modal */
       margin: 8px 0 0;
     .ev-modal {
       color: var(--muted);
       display: none;
       max-width: 70ch;
      position: fixed;
       font-size: 0.98rem;
      top: 50%;
      left: 50%;
       transform: translate(-50%, -50%);
      z-index: 9999;
      background: #fff;
      border-radius: 16px;
       max-width: 460px;
       width: calc(100% - 2rem);
      padding: 2rem;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.08);
     }
     }


     .badge {
     .ev-toggle:checked ~ .ev-overlay { display: block; }
    .ev-toggle:checked ~ .ev-modal  { display: block; }
 
    .ev-modal-date {
      font-size: 0.72rem;
      font-weight: 600;
      color: #3b82f6;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      margin-bottom: 0.4rem;
    }
    .ev-modal-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.02em;
      margin-bottom: 0.75rem;
      line-height: 1.3;
    }
    .ev-modal-time {
       display: inline-flex;
       display: inline-flex;
       align-items: center;
       align-items: center;
       gap: 8px;
       gap: 0.35rem;
      background: var(--primary-soft);
       font-size: 0.82rem;
      color: var(--primary);
      border-radius: 999px;
      padding: 10px 14px;
       font-size: 0.92rem;
       font-weight: 600;
       font-weight: 600;
       white-space: nowrap;
       color: #2563eb;
      background: #eff6ff;
      border-radius: 20px;
      padding: 0.3rem 0.8rem;
      margin-bottom: 1rem;
    }
    .ev-modal-note {
      font-size: 0.88rem;
      color: #475569;
      line-height: 1.65;
      margin-bottom: 1.25rem;
     }
     }
    .ev-modal-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: #2563eb;
      color: #fff;
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 600;
      border-radius: 8px;
      padding: 0.5rem 1rem;
      transition: background 0.15s;
    }
    .ev-modal-link:hover { background: #1d4ed8; }


     .weekday-row,
     /* Close button */
     .calendar-grid {
     .ev-close {
       display: grid;
      position: absolute;
       grid-template-columns: repeat(7, minmax(0, 1fr));
      top: 1rem;
       gap: 10px;
      right: 1rem;
      background: #f1f5f9;
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      cursor: pointer;
      font-size: 0.8rem;
      color: #64748b;
       display: flex;
       align-items: center;
      justify-content: center;
      user-select: none;
       transition: background 0.15s;
     }
     }
    .ev-close:hover { background: #e2e8f0; color: #0f172a; }


     .weekday {
     /* ===== MOBILE ===== */
       text-align: center;
    @media (max-width: 580px) {
       padding: 12px 8px;
      body { padding: 1rem 0.5rem 2rem; }
       color: var(--muted);
      .cal-header { flex-direction: column; gap: 0.2rem; }
       font-weight: 700;
       .cal-header h2 { font-size: 1.3rem; }
       font-size: 0.92rem;
       .col-header { font-size: 0.58rem; padding: 0.5rem 0; }
       .day, .day-empty { min-height: 56px; }
      .day { padding: 0.3rem 0.25rem; }
       .day-num { font-size: 0.68rem; }
       .ev-chip { font-size: 0.6rem; padding: 0.15rem 0.25rem; }
      .chip-title { display: none; }
     }
     }
  </style>
</head>
<body>


     .day-card {
<div class="cal-header">
       min-height: 146px;
  <h2>Kalender - August 2026</h2>
       background: var(--surface);
  <p>Klick auf einen Termin fuer mehr Details</p>
       border: 1px solid var(--border);
</div>
       border-radius: var(--radius);
 
       padding: 12px;
<div class="cal-wrap">
       box-shadow: var(--shadow);
  <span class="col-header">Mo</span>
       display: flex;
  <span class="col-header">Di</span>
       flex-direction: column;
  <span class="col-header">Mi</span>
       gap:
  <span class="col-header">Do</span>
  <span class="col-header">Fr</span>
  <span class="col-header">Sa</span>
  <span class="col-header">So</span>
 
 
    <!-- ============================================================
    LEERE ZELLEN: August 2026 beginnt an einem Samstag (Spalte 6)
    -> 5 leere Zellen fuer Mo bis Fr
    ============================================================ -->
    <div class="day-empty"></div><!-- Mo -->
    <div class="day-empty"></div><!-- Di -->
    <div class="day-empty"></div><!-- Mi -->
    <div class="day-empty"></div><!-- Do -->
    <div class="day-empty"></div><!-- Fr -->
 
     <!-- Sa  1 --> <div class="day we"><div class="day-num">1</div></div>
    <!-- So  2 --> <div class="day we"><div class="day-num">2</div></div>
    <!-- Mo  3 --> <div class="day">  <div class="day-num">3</div></div>
    <!-- Di  4 --> <div class="day">  <div class="day-num">4</div></div>
 
    <!-- ============================================================
    TERMIN HINZUFUEGEN: Kopiere den Block zwischen den Stern-Kommentaren
    in den gewuenschten Tag. Aendere:
      - id="ev-XX"  -> eindeutige ID, z.B. ev-04, ev-05 ...
       - chip-time  -> Uhrzeit
       - chip-title  -> Kurztitel (wird im Chip angezeigt)
      - ev-modal-date  -> Datum ausgeschrieben
      - ev-modal-title -> Voller Titel
      - ev-modal-time  -> Uhrzeit
      - ev-modal-note  -> Beschreibungstext
      - href          -> URL (oder ganzen <a>-Tag entfernen wenn keine URL)
    ============================================================ -->
 
    <!-- Mi  5 - TERMIN -->
    <div class="day">
      <div class="day-num">5</div>
      <!-- *** TERMIN ANFANG *** -->
       <input type="checkbox" class="ev-toggle" id="ev-01">
      <label class="ev-chip" for="ev-01">
        <span class="chip-time">14:00</span>
        <span class="chip-title">Stadtfest Tuebingen</span>
      </label>
      <label class="ev-overlay" for="ev-01"></label>
       <div class="ev-modal">
        <label class="ev-close" for="ev-01">✕</label>
        <div class="ev-modal-date">Mittwoch, 5. August 2026</div>
        <div class="ev-modal-title">Stadtfest Tuebingen</div>
        <div class="ev-modal-time">🕐 14:00 Uhr</div>
        <div class="ev-modal-note">Das jaehrliche Stadtfest in der Innenstadt mit Live-Musik, Essen und Marktstaenden. Parkplaetze sind begrenzt - Anreise mit OPNV empfohlen.</div>
        <a class="ev-modal-link" href="https://www.tuebingen.de" target="_blank" rel="noopener">🔗 Mehr Infos</a>
      </div>
      <!-- *** TERMIN ENDE *** -->
    </div>
 
    <!-- Do  6 --> <div class="day">  <div class="day-num">6</div></div>
    <!-- Fr  7 --> <div class="day">  <div class="day-num">7</div></div>
    <!-- Sa  8 --> <div class="day we"><div class="day-num">8</div></div>
    <!-- So  9 --> <div class="day we"><div class="day-num">9</div></div>
    <!-- Mo 10 --> <div class="day">  <div class="day-num">10</div></div>
    <!-- Di 11 --> <div class="day">  <div class="day-num">11</div></div>
 
    <!-- Mi 12 - TERMIN -->
    <div class="day">
      <div class="day-num">12</div>
      <!-- *** TERMIN ANFANG *** -->
      <input type="checkbox" class="ev-toggle" id="ev-02">
       <label class="ev-chip" for="ev-02">
        <span class="chip-time">09:30</span>
        <span class="chip-title">Netzwerktreffen Buendnis</span>
       </label>
      <label class="ev-overlay" for="ev-02"></label>
      <div class="ev-modal">
        <label class="ev-close" for="ev-02">✕</label>
        <div class="ev-modal-date">Mittwoch, 12. August 2026</div>
        <div class="ev-modal-title">Netzwerktreffen Buendnis fuer Familie</div>
        <div class="ev-modal-time">🕐 09:30 Uhr</div>
        <div class="ev-modal-note">Quartalsweise Netzwerktreffen aller Mitglieder des Buendnisses fuer Familie Tuebingen. Bitte Berichte bis 08.08. einreichen.</div>
        <a class="ev-modal-link" href="https://www.buendnis-fuer-familie-tuebingen.de/Netzwerke_und_Arbeitsgruppen" target="_blank" rel="noopener">🔗 Mehr Infos</a>
      </div>
      <!-- *** TERMIN ENDE *** -->
    </div>
 
    <!-- Do 13 --> <div class="day">  <div class="day-num">13</div></div>
    <!-- Fr 14 --> <div class="day">  <div class="day-num">14</div></div>
    <!-- Sa 15 --> <div class="day we"><div class="day-num">15</div></div>
    <!-- So 16 --> <div class="day we"><div class="day-num">16</div></div>
    <!-- Mo 17 --> <div class="day">  <div class="day-num">17</div></div>
    <!-- Di 18 --> <div class="day">  <div class="day-num">18</div></div>
    <!-- Mi 19 --> <div class="day">  <div class="day-num">19</div></div>
    <!-- Do 20 --> <div class="day">  <div class="day-num">20</div></div>
    <!-- Fr 21 --> <div class="day">  <div class="day-num">21</div></div>
    <!-- Sa 22 --> <div class="day we"><div class="day-num">22</div></div>
 
    <!-- So 23 - TERMIN -->
    <div class="day we">
      <div class="day-num">23</div>
      <!-- *** TERMIN ANFANG *** -->
      <input type="checkbox" class="ev-toggle" id="ev-03">
       <label class="ev-chip" for="ev-03">
        <span class="chip-time">11:00</span>
        <span class="chip-title">Familienfest Stadtpark</span>
       </label>
      <label class="ev-overlay" for="ev-03"></label>
      <div class="ev-modal">
        <label class="ev-close" for="ev-03">✕</label>
        <div class="ev-modal-date">Sonntag, 23. August 2026</div>
        <div class="ev-modal-title">Familienfest im Stadtpark</div>
        <div class="ev-modal-time">🕐 11:00 Uhr</div>
        <div class="ev-modal-note">Grosses Familienfest mit Spiel, Spass und Unterhaltung fuer Kinder jeden Alters. Eintritt frei, Anmeldung nicht erforderlich.</div>
        <a class="ev-modal-link" href="https://www.buendnis-fuer-familie-tuebingen.de/Aktuelles" target="_blank" rel="noopener">🔗 Mehr Infos</a>
       </div>
      <!-- *** TERMIN ENDE *** -->
    </div>
 
    <!-- Mo 24 --> <div class="day">  <div class="day-num">24</div></div>
    <!-- Di 25 --> <div class="day">  <div class="day-num">25</div></div>
    <!-- Mi 26 --> <div class="day">  <div class="day-num">26</div></div>
    <!-- Do 27 --> <div class="day">  <div class="day-num">27</div></div>
    <!-- Fr 28 --> <div class="day">  <div class="day-num">28</div></div>
    <!-- Sa 29 --> <div class="day we"><div class="day-num">29</div></div>
    <!-- So 30 --> <div class="day we"><div class="day-num">30</div></div>
    <!-- Mo 31 --> <div class="day">  <div class="day-num">31</div></div>
 
    <!-- ============================================================
    LEERE ZELLEN NACH TAG 31
    31. August = Montag -> noch 6 leere Zellen (Di bis So)
    ============================================================ -->
    <div class="day-empty"></div><!-- Di -->
    <div class="day-empty"></div><!-- Mi -->
    <div class="day-empty"></div><!-- Do -->
    <div class="day-empty"></div><!-- Fr -->
    <div class="day-empty"></div><!-- Sa -->
    <div class="day-empty"></div><!-- So -->
 
</div><!-- .cal-wrap -->
 
</body>
</html>

Aktuelle Version vom 10. Juni 2026, 11:26 Uhr

Kalender - August 2026

Kalender - August 2026

Klick auf einen Termin fuer mehr Details

Mo Di Mi Do Fr Sa So
1
2
3
4
5
Mittwoch, 5. August 2026
Stadtfest Tuebingen
🕐 14:00 Uhr
Das jaehrliche Stadtfest in der Innenstadt mit Live-Musik, Essen und Marktstaenden. Parkplaetze sind begrenzt - Anreise mit OPNV empfohlen.
🔗 Mehr Infos
6
7
8
9
10
11
12
Mittwoch, 12. August 2026
Netzwerktreffen Buendnis fuer Familie
🕐 09:30 Uhr
Quartalsweise Netzwerktreffen aller Mitglieder des Buendnisses fuer Familie Tuebingen. Bitte Berichte bis 08.08. einreichen.
🔗 Mehr Infos
13
14
15
16
17
18
19
20
21
22
23
Sonntag, 23. August 2026
Familienfest im Stadtpark
🕐 11:00 Uhr
Grosses Familienfest mit Spiel, Spass und Unterhaltung fuer Kinder jeden Alters. Eintritt frei, Anmeldung nicht erforderlich.
🔗 Mehr Infos
24
25
26
27
28
29
30
31

Abgerufen von „https://www.buendnis-fuer-familie-tuebingen.de/mediawiki/index.php?title=Testseite&oldid=8390“