Suche aufrufen
Menü aufrufen
6
1
1
53
Z-Brain
Toggle preferences menu
Persönliches Menü aufrufen
Nicht angemeldet
Ihre IP-Adresse wird öffentlich sichtbar sein, wenn Sie Änderungen vornehmen.

Hauptseite: Unterschied zwischen den Versionen

Aus Z-Brain
Weitere Optionen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<!DOCTYPE html>
<!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.0">
    <title>Wiki – Startseite</title>
      <title>Wiki Startseite</title>
    <style>
      <style>
        :root {
          /* Catppuccin Mocha Palette */
            --bg: #1e1e2e;
          :root {
            --surface: #313244;
              --base: #1e1e2e;
            --text: #cdd6f4;
              --surface0: #313244;
            --accent: #fab387;
              --surface1: #45475a;
            --border: #45475a;
              --text: #cdd6f4;
        }
              --subtext0: #a6adc8;
              --peach: #fab387;
              --lavender: #b4befe;
              --crust: #11111b;
          }


          * {
        * { margin: 0; padding: 0; box-sizing: border-box; }
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }


          body {
        body {
              background-color: var(--base);
            font-family: 'Segoe UI', system-ui, sans-serif;
              color: var(--text);
            background-color: var(--bg);
              font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            color: var(--text);
              display: flex;
            min-height: 100vh;
              flex      justify-content: center;
            padding: 32px;
              align-items: center;
        }
              min-height: 100vh;
              padding: 20px;
          }


          .container {
        h1 {
              max-width: 900px;
            text-align: center;
              width: 100%;
            font-size: 2rem;
          }
            margin-bottom: 28px;
            color: var(--accent);
        }


          header {
        .grid {
              text-align: center;
            display: grid;
              margin-bottom: 40px;
            grid-template-columns: repeat(3, 1fr);
          }
            gap: 16px;
            max-width: 960px;
            margin: 0 auto;
        }


          h1 {
        @media (max-width: 720px) {
              font-size: 2.5rem;
            .grid { grid-template-columns: 1fr; }
              color: var(--peach);
        }
              letter-spacing: -1px;
          }


          p.subtitle {
        .tile {
              color: var(--subtext0);
            background-color: var(--surface);
              margin-top: 10px;
            border: 1px solid var(--border);
          }
            border-radius: 10px;
            padding: 24px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }


          .grid {
        .tile:hover {
              display: grid;
            transform: translateY(-3px);
              grid-template-columns: repeat(2, 1fr);
            box-shadow: 0 6px 20px rgba(0,0,0,0.4);
              gap: 20px;
        }
          }


          /* Special handling for the 5th tile to look balanced or centered */
        .tile h2 {
          .grid-item:nth-child(5) {
            color: var(--accent);
              grid-column: span 2;
            font-size: 1.3rem;
          }
            margin-bottom: 8px;
        }


          .card {
        .tile p {
              background-color: var(--surface0);
            font-size: 0.95em;
              padding: 30px;
            line-height: 1.6;
              border-radius: 12px;
        }
              text-decoration: none;
              color: inherit;
              transition: transform 0.2s ease, border-color 0.2s ease;
              border: 2px solid transparent;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              text-align: center;
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
          }


          .card:hover {
        ul { padding-left: 20px; }
              transform: translateY(-5px);
        li { margin-top: 4px; }
              border-color: var(--peach);
    </style>
          }
</head>
<body>


          .card h2 {
    <h1>Wiki – Startseite</h1>
              font-size: 1.4rem;
              margin-bottom: 10px;
              color: var(--text);
          }


          .card p {
    <div class="grid">
              font-size: 0.95rem;
              color: var(--subtext0);
          }


          /* Icon placeholder style */
        <!-- Kachel 1 -->
          .icon {
        <div class="tile">
              font-size: 2rem;
            <h2>👨‍👩‍👧‍👦 Hilfe für Papa</h2>
              margin-bottom: 15px;
            <p>Einfache Anleitungen für Computer und Handy:</p>
              color: var(--peach);
            <ul>
          }
                <li>Wie mache ich ein Update?</li>
                <li>Wie bediene ich ein Programm am PC?</li>
                <li>Wie installiere ich eine App auf dem Handy?</li>
                <li>Wie bediene ich ein Smartphone?</li>
            </ul>
        </div>


          @media (max-width: 600px) {
        <!-- Kachel 2 -->
              .grid {
        <div class="tile">
                  grid-template-columns: 1fr;
            <h2>🔧 Gelöste Probleme</h2>
              }
            <p>Eine Sammlung von Fehlern und ihren Lösungen — gut zum Nachschlagen für mich und zum Erklären für andere.</p>
              .grid-item:nth-child(5) {
        </div>
                  grid-column: span 1;
              }
          }
      </important>
      </style>
  </head>
  <body>


      <div class="container">
        <!-- Kachel 3 -->
          <header>
        <div class="tile">
              <h1>Wiki Dashboard</h1>
            <h2>🏃‍♂️ Wettkämpfe</h2>
              <p class="subtitle">Zentraler Wissensspeicher</p>
            <p>Unsere offiziellen Wettkampfergebnisse und Laufzeiten — von Friedemann und Flavius, Saison für Saison.</p>
          </header>
        </div>


          <main class="grid">
        <!-- Kachel 4 -->
              <!-- Tile 1 -->
        <div class="tile">
              <a href="#" class="card grid-item">
            <h2>🖥️ Server & Infrastruktur</h2>
                  <div class="icon">👨‍ing</div>
            <ul>
                  <h2>Hilfe für Papa</h2>
                <li><strong>Storage Box:</strong> rclone, Sub-Accounts, Snapshots</li>
                  <p>Anleitungen und Support-Dokumentation</p>
                <li><strong>Entertainment:</strong> Jellyfin, Immich, Grafana, NPM</li>
              </a>
                <li><strong>lets-lounge:</strong> Gameserver, JDownloader</li>
                <li><strong>Server WG 49:</strong> Home Assistant (Klima), AdGuard Home (DNS)</li>
                <li><strong>Desktop:</strong> openSUSE Tumbleweed, Niri</li>
            </ul>
        </div>


              <!-- Tile 2 -->
        <!-- Kachel 5 -->
              <a href="#" class="card grid-item">
        <div class="tile">
                  <div class="icon">✅</div>
            <h2>🗣️ Erklärt für Freunde</h2>
                  <h2>Gelöste Probleme</h2>
            <p>Einfache Erklärungen von technischen Themen, die ich öfter erklären muss.</p>
                  <p>Archiv der behobenen Fehler und Lösungen</p>
        </div>
              </a>


              <!-- Tile 3 -->
    </div>
              <a href="#" class="card grid-item">
                  <div class="icon">🏆</div>
                  <h2>Wettkämpfe</h2>
                  <p>Ergebnisse, Regeln und Vorbereitungen</p>
              </a>


              <!-- Tile 4 -->
</body>
              <a href="#" class="card grid-item">
</html>
                  <div class="icon">🖥️</div>
                  <h2>Server-Infrastruktur</h2>
                  <p>Netzwerk-Setup und Server-Konfigurationen</p>
              </a>
 
              <!-- Tile 5 (Spans 2 columns) -->
              <a href="#" class="card grid-item">
                  <div class="icon">🤝</div>
                  <h2>Erklärt für Freunde</h2>
                  <p>Einfache Tutorials und Grundlagen-Guides</p>
              </a>
          </main>
      </div>
 
  </body>
  </html>

Version vom 28. Juni 2026, 14:27 Uhr

<!DOCTYPE html> <html lang="de"> <head> 

   <meta charset="UTF-8">
   <title>Wiki – Startseite</title>
   <style>
       :root {
           --bg: #1e1e2e;
           --surface: #313244;
           --text: #cdd6f4;
           --accent: #fab387;
           --border: #45475a;
       }

       * { margin: 0; padding: 0; box-sizing: border-box; }

       body {
           font-family: 'Segoe UI', system-ui, sans-serif;
           background-color: var(--bg);
           color: var(--text);
           min-height: 100vh;
           padding: 32px;
       }

       h1 {
           text-align: center;
           font-size: 2rem;
           margin-bottom: 28px;
           color: var(--accent);
       }

       .grid {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 16px;
           max-width: 960px;
           margin: 0 auto;
       }

       @media (max-width: 720px) {
           .grid { grid-template-columns: 1fr; }
       }

       .tile {
           background-color: var(--surface);
           border: 1px solid var(--border);
           border-radius: 10px;
           padding: 24px;
           transition: transform 0.2s ease, box-shadow 0.2s ease;
       }

       .tile:hover {
           transform: translateY(-3px);
           box-shadow: 0 6px 20px rgba(0,0,0,0.4);
       }

       .tile h2 {
           color: var(--accent);
           font-size: 1.3rem;
           margin-bottom: 8px;
       }

       .tile p {
           font-size: 0.95em;
           line-height: 1.6;
       }

       ul { padding-left: 20px; }
       li { margin-top: 4px; }
   </style>

</head> <body>

Wiki – Startseite

👨‍👩‍👧‍👦 Hilfe für Papa

Einfache Anleitungen für Computer und Handy:

  • Wie mache ich ein Update?
  • Wie bediene ich ein Programm am PC?
  • Wie installiere ich eine App auf dem Handy?
  • Wie bediene ich ein Smartphone?

🔧 Gelöste Probleme

Eine Sammlung von Fehlern und ihren Lösungen — gut zum Nachschlagen für mich und zum Erklären für andere.

🏃‍♂️ Wettkämpfe

Unsere offiziellen Wettkampfergebnisse und Laufzeiten — von Friedemann und Flavius, Saison für Saison.

🖥️ Server & Infrastruktur

  • Storage Box: rclone, Sub-Accounts, Snapshots
  • Entertainment: Jellyfin, Immich, Grafana, NPM
  • lets-lounge: Gameserver, JDownloader
  • Server WG 49: Home Assistant (Klima), AdGuard Home (DNS)
  • Desktop: openSUSE Tumbleweed, Niri

🗣️ Erklärt für Freunde

Einfache Erklärungen von technischen Themen, die ich öfter erklären muss.

</body> </html>

Abgerufen von „https://brain.zwissler-cloud.de/index.php?title=Hauptseite&oldid=53“
Zuletzt geändert
Diese Seite wurde zuletzt am 28. Juni 2026 um 14:27 Uhr bearbeitet.