Ticklish teddy experiments

ToonTalk · Oct 10, 2024 · 1713688 · 1713688
1 parent 96869d1
commit 1713688
Show file tree

Hide file tree

Showing 14 changed files with 253 additions and 0 deletions.
diff --git a/apps/ticklish teddy - free tier/242930__obxjohn__child-laughing.mp3 b/apps/ticklish teddy - free tier/242930__obxjohn__child-laughing.mp3
diff --git a/...round face with large, friendly eyes, a small black nose, and a smiling expression. .webp b/...round face with large, friendly eyes, a small black nose, and a smiling expression. .webp
diff --git a/apps/ticklish teddy - free tier/Encoded_Cartoon_Foot_Image.html b/apps/ticklish teddy - free tier/Encoded_Cartoon_Foot_Image.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Cute Teddy Bear</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            /* Replace 'FEATHER_IMAGE_DATA_URL' with your feather image data URL */
+            cursor: url('Resized_Cartoon_Feather_Transparent_Background.png') 16 16, auto;
+        }
+        #teddy {
+            display: block;
+            margin: 100px auto;
+            max-width: 300px;
+        }
+    </style>
+</head>
+<body>
+    <!-- Replace 'TEDDY_BEAR_IMAGE_DATA_URL' with your teddy bear image data URL -->
+    <img id="teddy" src="xxx" alt="Cute Teddy Bear">
+
+    <!-- Replace 'GIGGLING_SOUND_DATA_URL' with your giggling sound data URL -->
+    <audio id="giggling-sound" src="tickling_sound.wav"></audio>
+
+    <script>
+        var teddy = document.getElementById('teddy');
+        var giggleSound = document.getElementById('giggling-sound');
+
+        teddy.addEventListener('mouseover', function() {
+            giggleSound.play();
+        });
+    </script>
+</body>
+</html>
diff --git a/apps/ticklish teddy - free tier/Resized_Cartoon_Feather_Transparent_Background.png b/apps/ticklish teddy - free tier/Resized_Cartoon_Feather_Transparent_Background.png
diff --git a/apps/ticklish teddy - free tier/feather.png b/apps/ticklish teddy - free tier/feather.png
diff --git a/apps/ticklish teddy - free tier/free tier test.html b/apps/ticklish teddy - free tier/free tier test.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Teddy Image</title>
+    <style>
+        #feather {
+            position: absolute;
+            pointer-events: none; /* Prevents the feather from interfering with clicks */
+        }
+    </style>
+    <script>
+        function playAudio() {
+            var audio = document.getElementById('audio');
+            audio.play();
+        }
+
+        function moveFeather(event) {
+            var feather = document.getElementById('feather');
+            feather.style.left = event.pageX + 'px';
+            feather.style.top = event.pageY + 'px';
+        }
+
+        window.onload = function() {
+            document.addEventListener('mousemove', moveFeather);
+        }
+    </script>
+</head>
+<body>
+    <h1>Teddy Image</h1>
+    <img src="teddy.webp" alt="Teddy Bear" style="max-width: 100%; height: auto;" onclick="playAudio();">
+    <audio id="audio" src="giggling.mp3"></audio>
+    <img id="feather" src="feather.png" alt="Feather" style="width: 50px; height: auto;">
+</body>
+</html>
diff --git a/apps/ticklish teddy - free tier/giggling.mp3 b/apps/ticklish teddy - free tier/giggling.mp3
diff --git a/apps/ticklish teddy - free tier/index.html b/apps/ticklish teddy - free tier/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Cute Teddy Bear</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            /* Replace 'FEATHER_IMAGE_DATA_URL' with your feather image data URL */
+            cursor: url('feather.png') 128 128, auto;
+        }
+        #teddy {
+            display: block;
+            margin: 100px auto;
+            width: 50%; /* Adjust percentage as needed */
+        }
+    </style>
+</head>
+<body>
+    <!-- Replace 'TEDDY_BEAR_IMAGE_DATA_URL' with your teddy bear image data URL -->
+    <img id="teddy" src="teddy.webp" alt="Cute Teddy Bear">
+
+    <!-- Replace 'GIGGLING_SOUND_DATA_URL' with your giggling sound data URL -->
+    <audio id="giggling-sound" src="242930__obxjohn__child-laughing.mp3"></audio>
+
+    <script>
+        var teddy = document.getElementById('teddy');
+        var giggleSound = document.getElementById('giggling-sound');
+
+        teddy.addEventListener('click', function() {
+            giggleSound.play();
+        });
+    </script>
+
+</body>
+</html>
diff --git a/apps/ticklish teddy - free tier/teddy.webp b/apps/ticklish teddy - free tier/teddy.webp
diff --git a/apps/ticklish teddy - free tier/teddy_bear_display (1).html b/apps/ticklish teddy - free tier/teddy_bear_display (1).html
@@ -0,0 +1,13 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Display</title>
+</head>
+<body>
+    <h1>Cartoon-Style Teddy Bear</h1>
+    <img src="DALL·E 2024-10-10 14.25.22 - A cartoon-style teddy bear standing upright. The teddy bear has a round face with large, friendly eyes, a small black nose, and a smiling expression..webp" alt="Teddy Bear" style="max-width: 100%; height: auto;">
+</body>
+</html>
diff --git a/apps/ticklish teddy by copilot/feather.png b/apps/ticklish teddy by copilot/feather.png
diff --git a/apps/ticklish teddy by copilot/giggling.mp3 b/apps/ticklish teddy by copilot/giggling.mp3
diff --git a/apps/ticklish teddy by copilot/teddy.html b/apps/ticklish teddy by copilot/teddy.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Teddy Bear with Feather</title>
+    <style>
+        #feather {
+            position: absolute;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <h1>Click the Teddy Bear to Hear a Giggle!</h1>
+    <img src="https://th.bing.com/th/id/OIG3.ssy5cD7ZaajYVxe7KI0_?pid=ImgGn" alt="Cartoon Teddy Bear" id="teddy" style="cursor: pointer;">
+    <img src="feather.png" alt="Feather" id="feather">
+    <audio id="giggle-sound" src="giggling.mp3" preload="auto"></audio>
+
+    <script>
+        document.getElementById('teddy').addEventListener('click', function() {
+            document.getElementById('giggle-sound').play();
+        });
+
+        document.addEventListener('mousemove', function(e) {
+            var feather = document.getElementById('feather');
+            feather.style.left = e.pageX + 'px';
+            feather.style.top = e.pageY + 'px';
+        });
+    </script>
+</body>
+</html>
diff --git a/apps/water balloons by 4o-mini.html b/apps/water balloons by 4o-mini.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Water Balloon Game</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background-color: #87CEEB; /* Sky blue background */
+        }
+
+        #game-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+        }
+
+        .flower {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 50px;
+            height: 50px;
+            background-color: green;
+            border-radius: 50%;
+            transition: all 0.5s;
+        }
+
+        .balloon {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 30px;
+            height: 50px;
+            background-color: red;
+            border-radius: 15px 15px 0 0;
+            transition: bottom 0.1s;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="flower" class="flower"></div>
+        <div id="balloon" class="balloon"></div>
+    </div>
+    <script>
+        const balloon = document.getElementById('balloon');
+        const flower = document.getElementById('flower');
+        let balloonFallInterval;
+
+        function startGame() {
+            balloon.style.left = `${Math.random() * 100}vw`;
+            balloon.style.bottom = '100%';
+            balloonFallInterval = setInterval(dropBalloon, 20);
+        }
+
+        function dropBalloon() {
+            const balloonBottom = parseFloat(getComputedStyle(balloon).bottom);
+            const flowerBottom = parseFloat(getComputedStyle(flower).bottom);
+
+            if (balloonBottom <= flowerBottom + 50) { // Check for hit
+                clearInterval(balloonFallInterval);
+                hitFlower();
+                setTimeout(startGame, 1000); // Start new balloon after delay
+            } else if (balloonBottom >= window.innerHeight) {
+                clearInterval(balloonFallInterval);
+                missFlower();
+                setTimeout(startGame, 1000); // Start new balloon after delay
+            } else {
+                balloon.style.bottom = `${balloonBottom - 2}px`; // Balloon falls
+            }
+        }
+
+        function hitFlower() {
+            flower.style.transform = 'scale(1.2)';
+            flower.style.backgroundColor = randomColor();
+        }
+
+        function missFlower() {
+            flower.style.transform = 'scale(0.8)';
+            flower.style.backgroundColor = 'gray';
+        }
+
+        function randomColor() {
+            const letters = '0123456789ABCDEF';
+            let color = '#';
+            for (let i = 0; i < 6; i++) {
+                color += letters[Math.floor(Math.random() * 16)];
+            }
+            return color;
+        }
+
+        // Start the game
+        startGame();
+    </script>
+</body>
+</html>