ai website

SLCoding · Dec 11, 2023 · 3d97086 · 3d97086
1 parent 6361272
commit 3d97086
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 0 deletions.
diff --git a/img/cover.jpg b/img/cover.jpg
diff --git a/img/cover.png b/img/cover.png
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ASTRALSCHATTEN Album</title>
+    <style>
+        body {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #000; /* Set the background color to dark */
+            color: #fff; /* Set text color to white */
+        }
+        #album-container {
+            max-width: 90%;
+            max-height: 90vh;
+            margin: 5%;
+            overflow: hidden;
+            position: relative;
+            border-radius: 10px; /* Optional: Add border-radius for rounded corners */
+        }
+        #album-cover img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain; /* Ensure the entire image is always shown */
+        }
+        #play-pause-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        #play-pause {
+            font-size: 24px;
+            cursor: pointer;
+            background-color: rgba(255, 255, 255, 0.5); /* Translucent white */
+            border-radius: 50%; /* Make it circular */
+            padding: 10px; /* Add padding for spacing */
+        }
+    </style>
+</head>
+<body>
+    <div id="album-container">
+        <!-- Replace 'img/cover.jpg' with the actual relative path to your album cover image -->
+        <img src="img/cover.jpg" alt="ASTRALSCHATTEN Album Cover">
+        <div id="play-pause-container">
+            <div id="play-pause">&#9654;</div>
+        </div>
+    </div>
+
+    <!-- Replace 'media/gute_musik_final.mp3' with the actual relative path to your MP3 file -->
+    <audio id="audio" src="media/gute_musik_final.mp3" autoplay></audio>
+
+    <script>
+        document.getElementById('play-pause').addEventListener('click', function() {
+            var audio = document.getElementById('audio');
+            if (audio.paused) {
+                audio.play();
+                this.innerHTML = '&#9616;&#9616;'; // Pause icon
+            } else {
+                audio.pause();
+                this.innerHTML = '&#9654;'; // Play icon
+            }
+        })
+    </script>
+</body>
+</html>
diff --git a/media/gute_musik_final.mp3 b/media/gute_musik_final.mp3