indian chatbot song apps

ToonTalk · Dec 18, 2024 · d549cc8 · d549cc8
1 parent d9d3e89
commit d549cc8
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 0 deletions.
diff --git a/apps/north eastern india song v2/1.webp b/apps/north eastern india song v2/1.webp
diff --git a/apps/north eastern india song v2/2.webp b/apps/north eastern india song v2/2.webp
diff --git a/apps/north eastern india song v2/3.webp b/apps/north eastern india song v2/3.webp
diff --git a/apps/north eastern india song v2/4.webp b/apps/north eastern india song v2/4.webp
diff --git a/apps/north eastern india song v2/5.webp b/apps/north eastern india song v2/5.webp
diff --git a/apps/north eastern india song v2/6.webp b/apps/north eastern india song v2/6.webp
diff --git a/apps/north eastern india song v2/index.html b/apps/north eastern india song v2/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image and Song Player</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+        }
+        #image-container {
+            width: 80vmin;
+            height: 80vmin;
+            background-color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: 2px solid #ccc;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            overflow: hidden;
+            position: relative;
+        }
+        img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0;
+            transition: opacity 1s ease-in-out;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+    </style>
+</head>
+<body>
+    <div id="image-container">
+        <img id="image-0" src="1.webp" alt="">
+        <img id="image-1" src="2.webp" alt="">
+        <img id="image-2" src="3.webp" alt="">
+        <img id="image-3" src="4.webp" alt="">
+        <img id="image-4" src="5.webp" alt="">
+        <img id="image-5" src="6.webp" alt="">
+    </div>
+    <button id="start-button">Start</button>
+
+    <audio id="song" src="song.mp3"></audio>
+
+    <script>
+        const images = document.querySelectorAll("#image-container img");
+        const song = document.getElementById("song");
+        const startButton = document.getElementById("start-button");
+        const songDuration = 3 * 60 + 45; // 3 minutes and 45 seconds in seconds
+        const imageChangeInterval = songDuration / images.length; // Time per image
+
+        startButton.addEventListener("click", () => {
+            song.play();
+            startButton.disabled = true; // Disable button after start
+
+            let currentImageIndex = 0;
+            images[currentImageIndex].style.opacity = 1; // Show the first image
+
+            const interval = setInterval(() => {
+                images[currentImageIndex].style.opacity = 0; // Fade out current image
+                currentImageIndex++;
+                if (currentImageIndex < images.length) {
+                    images[currentImageIndex].style.opacity = 1; // Fade in next image
+                } else {
+                    clearInterval(interval); // Stop changing images after the last one
+                }
+            }, imageChangeInterval * 1000);
+
+            song.onended = () => {
+                startButton.disabled = false;
+                images.forEach((img) => (img.style.opacity = 0)); // Clear all images
+            };
+        });
+    </script>
+</body>
+</html>
diff --git a/apps/north eastern india song v2/song.mp3 b/apps/north eastern india song v2/song.mp3
diff --git a/apps/north eastern india song/index.html b/apps/north eastern india song/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Song and Stanza Viewer</title>
+    <style>
+        body {
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #000;
+            color: #fff;
+            font-family: Arial, sans-serif;
+        }
+        #content {
+            text-align: center;
+        }
+        img {
+            max-width: 100%;
+            max-height: 80vh;
+        }
+        audio {
+            margin-top: 20px;
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div id="content">
+        <img id="stanzaImage" src="stanza1.webp" alt="Stanza 1">
+        <audio controls autoplay>
+            <source src="song.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+    </div>
+
+    <script>
+        // Switch image after 20 seconds
+        setTimeout(() => {
+            document.getElementById('stanzaImage').src = 'stanza2.webp';
+        }, 20000);
+    </script>
+</body>
+</html>
diff --git a/apps/north eastern india song/song.mp3 b/apps/north eastern india song/song.mp3
diff --git a/apps/north eastern india song/stanza2.webp b/apps/north eastern india song/stanza2.webp
diff --git a/apps/north eastern india song/stanza3.webp b/apps/north eastern india song/stanza3.webp