index.html

1676d121 · Davide Verardo · f1422368 · 1676d121
Commit 1676d121 authored 2 weeks ago by Davide Verardo
--- a/Solo-Leveling_Kubernetes_Webapp/index.html
+++ b/Solo-Leveling_Kubernetes_Webapp/index.html
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Solo Leveling Universe</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: 'Segoe UI', sans-serif;
+      background-color: #f5f5f5;
+      color: #333;
+      transition: background 0.3s, color 0.3s;
+    }
+
+    body.dark {
+      background-color: #121212;
+      color: #000000; /* Schwarz für den Text im Dunkelmodus */
+    }
+
+    h1 {
+      text-align: center;
+      margin: 2rem 0 1rem;
+      color: #333; /* Standardfarbe */
+    }
+
+    body.dark h1 {
+      color: white; /* Weiß im Dark Mode */
+    }
+
+    .controls {
+      display: flex;
+      justify-content: center;
+      gap: 1rem;
+      margin-bottom: 2rem;
+    }
+
+    input[type="text"] {
+      padding: 0.5rem;
+      font-size: 1rem;
+      border-radius: 8px;
+      border: 1px solid #ccc;
+    }
+
+    button {
+      padding: 0.5rem 1rem;
+      font-size: 1rem;
+      border: none;
+      border-radius: 8px;
+      background: #007aff;
+      color: white;
+      cursor: pointer;
+      transition: transform 0.2s ease;
+    }
+
+    button:active {
+      transform: scale(0.98);
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 1.5rem;
+      padding: 0 2rem 3rem;
+    }
+
+    .card {
+      background: white;
+      border-radius: 15px;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      text-align: center;
+      opacity: 1;
+      transform: translateY(0);
+      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+    }
+
+    .card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+    }
+
+    .card img {
+      width: 100%;
+      height: 300px;
+      object-fit: cover;
+      display: block;
+      transition: opacity 0.3s;
+    }
+
+    .card h2 {
+      margin: 0.5rem;
+      font-size: 1.2rem;
+    }
+
+    .card.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    /* Style für das Beschreibungsfenster */
+    .description-box {
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: rgba(0, 0, 0, 0.8);
+      color: white;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+      max-width: 400px;
+      width: 80%;
+      z-index: 1000;
+      font-size: 1rem;
+    }
+
+    .description-box h3 {
+      margin-top: 0;
+      font-size: 1.4rem;
+    }
+
+    .description-box p {
+      margin: 15px 0 0;
+    }
+
+    .description-box .close-btn {
+      background: #ff0000;
+      border: none;
+      color: white;
+      font-size: 1rem;
+      padding: 10px 15px;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+
+    .description-box .close-btn:hover {
+      background-color: #cc0000;
+    }
+
+    .description-box img {
+      width: 100%;
+      height: auto;
+      max-width: 300px;
+      margin: 1rem 0;
+      object-fit: cover;
+    }
+
+  </style>
+</head>
+<body>
+
+  <h1>⚔️ Solo Leveling Universe</h1>
+
+  <div class="controls">
+    <input type="text" id="search" placeholder="Charakter suchen..." oninput="filterCards()" />
+    <button onclick="toggleDarkMode()">🌙 Dark Mode</button>
+    <button onclick="randomizeCards()">🔀 Zufällig anordnen</button>
+  </div>
+
+  <div class="grid" id="characterGrid"></div>
+
+  <!-- Beschreibung Box -->
+  <div id="descriptionBox" class="description-box">
+    <h3 id="descriptionTitle"></h3>
+    <img id="descriptionImage" src="" alt="" />
+    <p id="descriptionText"></p>
+    <button class="close-btn" onclick="closeDescriptionBox()">Schließen</button>
+  </div>
+
+  <script>
+    const characters = [
+      { key: "sung", name: "Sung Jin-Woo", img: "https://cdn.anisearch.de/images/character/cover/107/107000_400.webp", desc: "Der stärkste Jäger der Welt, der sich von einem schwachen E-Rang-Jäger zu einem übermächtigen Monarchen entwickelt." },
+      { key: "cha", name: "Hae-In CHA", img: "https://cdn.anisearch.de/images/character/cover/85/85958_400.webp", desc: "Eine talentierte S-Rang-Jägerin mit außergewöhnlichen Kampffähigkeiten." },
+      { key: "yo", name: "Jin-Ho YOO", img: "https://cdn.anisearch.de/images/character/cover/85/85965_400.webp", desc: "Ein ehemaliger D-Rang-Jäger, der sich im Laufe der Geschichte entwickelt." },
+      { key: "sungah", name: "Jin-Ah SUNG", img: "https://cdn.anisearch.de/images/character/cover/85/85960_400.webp", desc: "Sung Jin-Woos Schwester, eine sanftmütige und fürsorgliche Person." },
+      { key: "woo", name: "Jin-Chul WOO", img: "https://cdn.anisearch.de/images/character/cover/86/86191_400.webp", desc: "Ein alter Freund von Sung Jin-Woo, der ihn auf seiner Reise begleitet." },
+      { key: "go", name: "Gun-Hee GO", img: "https://cdn.anisearch.de/images/character/cover/86/86048_400.webp", desc: "Der Präsident der Hunter Association, der Sung Jin-Woo auf seinem Weg unterstützt." },
+      { key: "choe", name: "Jong-In CHOE", img: "https://cdn.anisearch.de/images/character/cover/85/85970_400.webp", desc: "Ein weiterer S-Rang-Jäger und Verbündeter von Sung Jin-Woo." },
+      { key: "baek", name: "Yun-Ho BAEK", img: "https://cdn.anisearch.de/images/character/cover/85/85967_400.webp", desc: "Ein S-Rang-Jäger, der stark mit der Gruppe zusammenarbeitet." },
+      { key: "lee", name: "Ju-Hee LEE", img: "https://cdn.anisearch.de/images/character/cover/85/85963_400.webp", desc: "Eine talentierte Jägerin, die für ihre Fähigkeiten respektiert wird." },
+      { key: "han", name: "Song-I HAN", img: "https://cdn.anisearch.de/images/character/cover/85/85959_400.webp", desc: "Eine starke S-Rang-Kämpferin, die einen wichtigen Teil in der Geschichte spielt." },
+      { key: "kang", name: "Tae-Shik KANG", img: "https://cdn.anisearch.de/images/character/cover/86/86108_400.webp", desc: "Ein mächtiger S-Rang-Kämpfer, der seinen eigenen Kampf führt." },
+      { key: "song", name: "Chi-Yul SONG", img: "https://cdn.anisearch.de/images/character/cover/85/85962_400.webp", desc: "Ein weiteres Mitglied des Teams, das mit den anderen Charakteren zusammenarbeitet." },
+      { key: "iron", name: "Iron", img: "https://cdn.anisearch.de/images/character/cover/86/86197_400.webp", desc: "Ein mächtiger und loyale Krieger, der zu einem wichtigen Mitglied wird." },
+      { key: "igris", name: "Igris", img: "https://cdn.anisearch.de/images/character/cover/86/86198_400.webp", desc: "Ein entschlossener Krieger, der eine Schlüsselrolle in den Kämpfen spielt." },
+      { key: "beru", name: "Beru", img: "https://cdn.anisearch.de/images/character/cover/111/111000_400.webp", desc: "Ein treuer Begleiter von Sung Jin-Woo und ein loyaler Krieger." },
+      { key: "esil", name: "Radiru ESIL", img: "https://cdn.anisearch.de/images/character/cover/86/86043_400.webp", desc: "Ein starker Krieger, der Sung Jin-Woo in schwierigen Situationen hilft." },
+      { key: "kyung", name: "Kyung Hye Park", img: "https://cdn.anisearch.de/images/character/cover/86/86039_400.webp", desc: "Die Mutter von Sung Jin-Woo, lag im Koma für über drei Jahre, wurde jedoch vom Elexier des Lebens geheilt welches ihr Sohn durch harte Jägerei erarbeitet hat." },
+      { key: "shin", name: "Shin-Sang", img: "https://cdn.anisearch.de/images/character/pictures/86/86220/Y1D2_600.webp", desc: "Ein mächtiger und strategischer Kämpfer, der in der Gruppe eine wichtige Rolle spielt." }
+    ];
+
+    function renderCards() {
+      const grid = document.getElementById("characterGrid");
+      grid.innerHTML = "";
+      characters.forEach(char => {
+        const card = document.createElement("div");
+        card.className = "card visible"; // Sofort sichtbar beim Laden
+        card.innerHTML = `
+          <img src="${char.img}" alt="${char.name}" loading="lazy" onerror="this.src='https://via.placeholder.com/220'">
+          <h2>${char.name}</h2>
+        `;
+        card.onclick = () => showDescription(char); // Klick zum Öffnen der Beschreibung
+        grid.appendChild(card);
+      });
+    }
+
+    function showDescription(char) {
+      document.getElementById("descriptionTitle").textContent = char.name;
+      document.getElementById("descriptionImage").src = char.img;
+      document.getElementById("descriptionText").textContent = char.desc;
+      document.getElementById("descriptionBox").style.display = "block";
+    }
+
+    function closeDescriptionBox() {
+      document.getElementById("descriptionBox").style.display = "none";
+    }
+
+    function toggleDarkMode() {
+      document.body.classList.toggle('dark');
+    }
+
+    function randomizeCards() {
+      characters.sort(() => Math.random() - 0.5); // Zufällige Anordnung der Karten
+      renderCards();
+    }
+
+    function filterCards() {
+      const searchInput = document.getElementById("search").value.toLowerCase();
+      const cards = document.querySelectorAll(".card");
+      cards.forEach(card => {
+        const name = card.querySelector("h2").textContent.toLowerCase();
+        if (name.includes(searchInput)) {
+          card.style.display = "block";
+        } else {
+          card.style.display = "none";
+        }
+      });
+    }
+
+    // Initial rendering
+    renderCards();
+  </script>
+
+</body>
+</html>