addet website 3

2025-02-28 12:50:39 +01:00 · 2025-02-28 12:50:39 +01:00 · 03dbef5da7
commit 03dbef5da7
parent d8a0746af2
2 changed files with 137 additions and 0 deletions
--- a/websites/3/compose.yml
+++ b/websites/3/compose.yml
@ -0,0 +1,9 @@
+services:
+  app:
+    image: nginx:latest
+    volumes:
+      - ./webroot:/usr/share/nginx/html:ro
+    ports:
+      - 8080:80
+      - 8081:80
+      - 8082:80
--- a/websites/3/webroot/index.html
+++ b/websites/3/webroot/index.html
@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Docker Volume Test</title>
+  <style>
+    /* Grundlegendes Seitenlayout */
+    * {
+      box-sizing: border-box;
+    }
+    body, html {
+      margin: 0;
+      padding: 0;
+      font-family: "Arial", sans-serif;
+      background: #f3f4f6;
+    }
+    header {
+      background: #007acc;
+      color: #fff;
+      padding: 20px;
+      text-align: center;
+    }
+    h1 {
+      margin: 0;
+      font-size: 2rem;
+    }
+
+    /* Container-Styling */
+    .container {
+      max-width: 600px;
+      margin: 20px auto;
+      background: #fff;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 3px 6px rgba(0,0,0,0.1);
+      animation: fadeIn 1s ease-in-out;
+    }
+
+    p, ul {
+      line-height: 1.5;
+    }
+    ul {
+      padding-left: 20px;
+    }
+
+    .highlight {
+      color: #ff6600;
+    }
+
+    hr {
+      margin: 20px 0;
+      border: none;
+      border-bottom: 1px solid #ccc;
+    }
+
+    /* Button-Styling */
+    button {
+      background: #007acc;
+      color: #fff;
+      border: none;
+      padding: 10px 20px;
+      margin: 10px 0;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background 0.3s ease;
+    }
+    button:hover {
+      background: #005ea1;
+    }
+
+    /* Versteckter Bereich, der nach Klick ausgeklappt wird */
+    #extra-content {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.5s ease, opacity 0.5s ease;
+      opacity: 0;
+    }
+    #extra-content.show {
+      max-height: 200px; /* Höhe anpassen, falls mehr Inhalt */
+      opacity: 1;
+    }
+
+    /* Einfache Fade-In-Animation beim Laden */
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <header>
+    <h1>Willkommen bei Docker!</h1>
+  </header>
+
+  <div class="container">
+    <p>
+      Dies ist eine kleine <span class="highlight">coole Website</span> als Demo für Docker-Volumes.<br>
+      Bearbeite einfach diese <code>index.html</code>, speichere und lade die Seite neu!
+    </p>
+
+    <hr>
+
+    <button onclick="toggleContent()">Zeige mehr</button>
+    <div id="extra-content">
+      <p>Hier sind einige zusätzliche Informationen:</p>
+      <ul>
+        <li>Docker erleichtert die Bereitstellung deiner Anwendungen.</li>
+        <li>Mit Volumes speicherst du Daten oder Konfigurationen außerhalb des Containers.</li>
+        <li>Live-Änderungen sind sofort im Container sichtbar!</li>
+      </ul>
+    </div>
+  </div>
+
+  <script>
+    function toggleContent() {
+      var extraContent = document.getElementById("extra-content");
+      extraContent.classList.toggle("show");
+    }
+  </script>
+</body>
+</html>