docker/azubis
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

addet website 3

Browse source
This commit is contained in:
piecka 2025-02-28 12:50:39 +01:00
parent d8a0746af2
commit 03dbef5da7
2 changed files with 137 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
websites/3/compose.yml Normal file
View file

@ -0,0 +1,9 @@
services:
app:
image: nginx:latest
volumes:
- ./webroot:/usr/share/nginx/html:ro
ports:
- 8080:80
- 8081:80
- 8082:80

128
websites/3/webroot/index.html Normal file
View file

@ -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>