Dashboard Temp Share Shortlinks Frames API

HTMLify

Heart.html
Views: 539 | Author: amar 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Heart Evolution</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            overflow: hidden; /* Prevent scrolling */
            background-color: #f0f8ff;
            display: flex; /* Flexbox for centering */
            flex-direction: column;
            justify-content: center; /* Center vertically */
            align-items: center; /* Center horizontally */
            height: 100vh; /* Full viewport height */
        }

        h1, #stage-text {
            color: #333;
            text-align: center;
            margin: 10px 0;
        }

        .heart {
            font-size: 100px;
            cursor: pointer;
            transition: transform 0.2s ease-in-out;
        }

        .heart:hover {
            transform: scale(1.1);
        }

        .emoji {
            font-size: 50px;
            cursor: grab;
            position: absolute;
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }

        .emoji:active {
            cursor: grabbing;
        }

        .hidden {
            opacity: 0;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <h1>Interactive Heart Evolution</h1>
   <div id="heart" class="heart">❤️</div>
   <p id="stage-text" style="text-align: center;">don't use hammer!</p>
     
    <div id="emoji-container"></div>

    <script>
        const heart = document.getElementById("heart");
        const stageText = document.getElementById("stage-text");
        const emojiContainer = document.getElementById("emoji-container");

        // Emojis with their IDs and initial visibility
        const emojis = [
            { id: "hammer", emoji: "🔨", visible: true },
            { id: "bandage", emoji: "🩹", visible: false },
            { id: "clock", emoji: "⏰", visible: false },
            { id: "glitter", emoji: "✨", visible: false },
            { id: "ribbon", emoji: "🎀", visible: false },
        ];

        // Function to randomly position emojis
        function randomizeEmojiPosition(emojiElement) {
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;

            // Generate random positions, leaving some margin for visibility
            const randomX = Math.random() * (windowWidth - 100);
            const randomY = Math.random() * (windowHeight - 100);

            emojiElement.style.left = `${randomX}px`;
            emojiElement.style.top = `${randomY}px`;
        }

        // Create emoji elements and add to the container
        emojis.forEach(({ id, emoji, visible }) => {
            const emojiElement = document.createElement("div");
            emojiElement.id = id;
            emojiElement.className = `emoji ${visible ? "" : "hidden"}`;
            emojiElement.innerText = emoji;
            emojiElement.draggable = true;

            // Randomize its initial position
            randomizeEmojiPosition(emojiElement);

            // Add drag event handlers
            emojiElement.ondragstart = (event) => {
                event.dataTransfer.setData("text", id);
            };

            // Append to the container
            emojiContainer.appendChild(emojiElement);
        });

        // Allow the heart to accept drop events
        heart.ondragover = (event) => event.preventDefault();

        // Handle dropping emojis on the heart
        heart.ondrop = (event) => {
            event.preventDefault();
            const draggedId = event.dataTransfer.getData("text");
            const emojiElement = document.getElementById(draggedId);

            if (draggedId === "hammer" && heart.innerText === "❤️") {
                heart.innerText = "💔"; // Break the heart
                emojiElement.classList.add("hidden"); // Remove hammer
                document.getElementById("bandage").classList.remove("hidden");
                stageText.innerText = "Oh no! you broke the heart. Use the bandage to fix it.";
            } else if (draggedId === "bandage" && heart.innerText === "💔") {
                heart.innerText = "❤️‍🩹"; // Bandage the heart
                emojiElement.classList.add("hidden"); // Remove bandage
                document.getElementById("clock").classList.remove("hidden");
                stageText.innerText = "The heart need to heal! Give it time.";
            } else if (draggedId === "clock" && heart.innerText === "❤️‍🩹") {
                heart.innerText = "❤️"; // Clock resets the heart to normal
                emojiElement.classList.add("hidden"); // Remove clock
                document.getElementById("glitter").classList.remove("hidden");
                document.getElementById("ribbon").classList.remove("hidden");
                stageText.innerText = "The heart is healthy now, Add some sparkle or a ribbon to it.";
            } else if (draggedId === "glitter" && heart.innerText === "❤️") {
                heart.innerText = "💖"; // Glitter heart
                emojiElement.classList.add("hidden"); // Remove glitter
                stageText.innerText = "Wow! The heart is sparkling now.";
            } else if (draggedId === "ribbon" && heart.innerText === "❤️") {
                heart.innerText = "💝"; // Ribbon heart
                emojiElement.classList.add("hidden"); // Remove ribbon
                stageText.innerText = "Beautiful! The heart is wrapped with love.";
            }
        };

        // Update positions of emojis on window resize
        window.onresize = () => {
            document.querySelectorAll(".emoji").forEach(randomizeEmojiPosition);
        };
    </script>
</body>
</html>

Share this file: