Spaces:

GuglielmoTor
/

LinkedinMonitor

Running

App Files Files Community

GuglielmoTor commited on May 16

Commit

f9273e6

verified ·

1 Parent(s): 58b1050

Create sync_animation.html

Browse files

Files changed (1) hide show

sync_animation.html +428 -0

sync_animation.html ADDED Viewed

	@@ -0,0 +1,428 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CMD Ingaze Reveal Animation</title>
+    <style>
+        body {
+            background-color: #000000; /* Black background */
+            color: #00FF00; /* Bright green text */
+            font-family: 'Courier New', Courier, monospace; /* Classic CMD font */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh; /* Make body fill viewport height */
+            margin: 0;
+            overflow: hidden; /* Prevent scrollbars */
+        }
+        #cmd-animation-container {
+            padding: 20px;
+            border: 2px solid #00AA00; /* Darker green border */
+            background-color: #080808; /* Slightly off-black for the "screen" */
+            box-shadow: 0 0 15px #00FF00; /* Green glow effect */
+            border-radius: 8px; /* Rounded corners for the container */
+            /* Ensure the container doesn't exceed viewport width if content is too wide */
+            max-width: 95vw;
+            box-sizing: border-box; /* Include padding and border in the element's total width and height */
+        }
+        pre#cmd-animation {
+            white-space: pre; /* Preserve whitespace and newlines */
+            text-align: left;
+            font-size: 14px; /* Adjusted for better fit */
+            line-height: 1.1; /* Compact lines */
+            margin: 0;
+            overflow-x: auto; /* Add scroll if content is wider than container */
+        }
+    </style>
+</head>
+<body>
+    <div id="cmd-animation-container">
+        <pre id="cmd-animation"></pre>
+    </div>
+    <script>
+        // --- Configuration ---
+        const scene_width = 65; // Characters, increased for Ingaze logo
+        const scene_height = 22; // Lines
+        const frameDuration = 150; // Milliseconds per frame
+        const MAX_DATA_PARTICLES = 150;
+        const FLOOR_LEVEL = scene_height - 1;
+        // --- ASCII Art Definitions ---
+        const stick_man_art_normal = ["   O   ", "  /|\\  ", "  / \\  "];
+        const stick_man_art_walk_1 = ["   O   ", "  /|\\  ", "  / >  "];
+        const stick_man_art_walk_2 = ["   O   ", "  /|\\  ", " < \\  "];
+        const stick_man_art_surprise = ["  \\O/  ", "   |   ", "  / \\  "]; // Stickman surprised by lightning/explosion
+        const stick_man_art_gone = ["       ", "       ", "       "]; // For when stickman disappears
+        const linked_in_art = ["+----+", "|i n |", "+----+"];
+        const linked_in_art_hit = ["x----x", "|BOOM|", "x----x"]; // When hit by lightning
+        const lightning_strike_segment = "\\"; // Simple segment for descending lightning
+        const explosion_symbols = ['*', '#', '@', '!', '%', '&', 'X', 'O', '$', '+', '~'];
+        const explosion_art_frames = [
+            // Frame 1: Small impact
+            [
+                "   * ",
+                "  *#* ",
+                "   * "
+            ],
+            // Frame 2: Expanding
+            [
+                "  @!%  ",
+                " @*#*& ",
+                "  X%O  "
+            ],
+            // Frame 3: Larger and more chaotic
+            [
+                " $*~+@ ",
+                "$#@!%*&",
+                " X*O#~ ",
+                "  !+%$ "
+            ],
+            // Frame 4: Fading / contracting
+            [
+                "   ~   ",
+                "  +*%  ",
+                "   $   "
+            ]
+        ];
+        const ingaze_logo_art = [
+            "IIIII N   N  GGG   AAA   ZZZZZ EEEEE",
+            "  I   NN  N G     A   A    Z   E    ",
+            "  I   N N N G  GG AAAAA   Z    EEE  ",
+            "  I   N  NN G   G A   A  Z     E    ",
+            "IIIII N   N  GGG  A   A ZZZZZ EEEEE"
+        ];
+        const ingaze_logo_width = ingaze_logo_art[0].length;
+        const ingaze_logo_height = ingaze_logo_art.length;
+        // --- Global State ---
+        let data_particles = []; // {char, x, y, vy, active}
+        let current_lightning_y = -1; // Y position of the lightning tip, -1 means not active
+        // --- Helper Functions ---
+        function overlay(baseLines, artLines, startX, startY, ignoreSpaces = true) {
+            artLines.forEach((artLine, i) => {
+                const y = startY + i;
+                if (y >= 0 && y < baseLines.length && artLine) {
+                    let baseLineArr = baseLines[y].split('');
+                    for (let j = 0; j < artLine.length; j++) {
+                        const x = startX + j;
+                        if (x >= 0 && x < baseLineArr.length) {
+                            if (ignoreSpaces && artLine[j] === ' ') continue;
+                            baseLineArr[x] = artLine[j];
+                        }
+                    }
+                    baseLines[y] = baseLineArr.join('');
+                }
+            });
+        }
+        function drawLightningBolt(sceneLines, tipX, tipY, length) {
+            for (let i = 0; i < length; i++) {
+                const y = tipY - i;
+                const x = tipX + (i % 2 === 0 ? 0 : (i % 4 === 1 ? -1 : 1)); // Simple zig-zag
+                if (y >= 0 && y < scene_height && x >= 0 && x < scene_width) {
+                    if (sceneLines[y][x] === ' ') { // Avoid overwriting other elements if possible
+                        let lineArr = sceneLines[y].split('');
+                        lineArr[x] = lightning_strike_segment;
+                        sceneLines[y] = lineArr.join('');
+                    }
+                }
+            }
+        }
+        function buildScene(stickmanArt, stickmanPos, showLogo, currentLogoArt, currentLogoPos,
+                              showLightningBolt, lightningTipX, lightningTipY, lightningLength,
+                              currentExplosionArt, explosionPos,
+                              showIngazeLogo, ingazeArt, ingazePos) {
+            let sceneLines = Array(scene_height).fill(" ".repeat(scene_width));
+            // 1. Data particles (drawn first, can be overwritten)
+            data_particles.forEach(p => {
+                const px = Math.round(p.x);
+                const py = Math.round(p.y);
+                if (py >= 0 && py < sceneLines.length && px >= 0 && px < scene_width) {
+                    if (sceneLines[py][px] === ' ') {
+                         let lineArr = sceneLines[py].split('');
+                         lineArr[px] = p.char;
+                         sceneLines[py] = lineArr.join('');
+                    }
+                }
+            });
+            // 2. Stickman
+            overlay(sceneLines, stickmanArt, stickmanPos.x, stickmanPos.y);
+            // 3. LinkedIn Logo
+            if (showLogo) {
+                overlay(sceneLines, currentLogoArt, currentLogoPos.x, currentLogoPos.y);
+            }
+            // 4. Lightning Bolt
+            if (showLightningBolt && lightningTipY >=0) {
+                drawLightningBolt(sceneLines, lightningTipX, lightningTipY, lightningLength);
+            }
+            // 5. Explosion
+            if (currentExplosionArt && currentExplosionArt.length > 0) {
+                overlay(sceneLines, currentExplosionArt, explosionPos.x, explosionPos.y, false); // false: allow spaces in explosion art
+            }
+            // 6. Ingaze Logo
+            if (showIngazeLogo) {
+                overlay(sceneLines, ingazeArt, ingazePos.x, ingazePos.y);
+            }
+            return sceneLines.join('\n');
+        }
+        function spawnDataParticle(logoX, logoY, logoWidth) {
+            if (data_particles.length >= MAX_DATA_PARTICLES) return;
+            const char = Math.random() > 0.5 ? '1' : '0';
+            const x = logoX + 1 + Math.floor(Math.random() * (logoWidth - 2));
+            const y = logoY + linked_in_art.length;
+            const vy = 0.2 + Math.random() * 0.3;
+            data_particles.push({ char, x, y, vy, active: true });
+        }
+        // --- Animation Sequence Generation ---
+        // This function generates all frames once and stores them.
+        function generateAnimationFrames() {
+            const sequence = [];
+            // Reset global state that might persist across generations if this is called multiple times
+            data_particles = [];
+            current_lightning_y = -1;
+            const stickman_height = stick_man_art_normal.length;
+            const stickman_width = stick_man_art_normal[0].length;
+            const logo_width = linked_in_art[0].length;
+            const logo_height = linked_in_art.length;
+            const stickman_base_y = FLOOR_LEVEL - stickman_height;
+            const logo_base_y = stickman_base_y;
+            const stickman_initial_pos = { x: 2, y: stickman_base_y };
+            // Adjusted logo_initial_pos to be more to the right to give stickman space
+            const logo_initial_pos = { x: scene_width - logo_width - 20, y: logo_base_y };
+            const stickman_walk_target_x = logo_initial_pos.x - stickman_width - 1;
+            const ingaze_pos = {
+                x: Math.floor((scene_width - ingaze_logo_width) / 2),
+                y: Math.floor((scene_height - ingaze_logo_height) / 2)
+            };
+            const explosion_center_x = logo_initial_pos.x + Math.floor(logo_width / 2);
+            const explosion_center_y = logo_initial_pos.y + Math.floor(logo_height / 2);
+            // Phase 0: Stickman Walks to Logo
+            // Ensure stickman_walk_target_x is not less than initial_pos.x if logo is too far left
+            const target_x_for_walk = Math.max(stickman_initial_pos.x + 1, stickman_walk_target_x);
+            const walk_frames = Math.max(10, Math.floor(Math.abs(target_x_for_walk - stickman_initial_pos.x) / 1.2) );
+            let current_stickman_x = stickman_initial_pos.x;
+             // Ensure walk_step_x is not NaN if walk_frames is 0 (though it's max(10, ...))
+            const walk_step_x = walk_frames > 0 ? (target_x_for_walk - stickman_initial_pos.x) / walk_frames : 0;
+            for (let i = 0; i < walk_frames; i++) {
+                current_stickman_x += walk_step_x;
+                const walk_art = (i % 4 < 2) ? stick_man_art_walk_1 : stick_man_art_walk_2;
+                sequence.push(buildScene(walk_art, { x: Math.round(current_stickman_x), y: stickman_base_y }, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
+            }
+            current_stickman_x = target_x_for_walk;
+            let current_stickman_pos = { x: current_stickman_x, y: stickman_base_y };
+            // Phase 1: Pause before shake
+            for (let i = 0; i < 3; i++) {
+                sequence.push(buildScene(stick_man_art_normal, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
+            }
+            // Phase 2: Shaking LinkedIn & Data Fall
+            let current_logo_pos_phase2 = { ...logo_initial_pos };
+            const shake_frames = 25;
+            for (let i = 0; i < shake_frames; i++) {
+                let logoAdj = { x: 0, y: 0 };
+                if (i % 6 < 2) logoAdj = { x: 1, y: 0 }; else if (i % 6 < 4) logoAdj = { x: -1, y: 0 };
+                current_logo_pos_phase2.x = logo_initial_pos.x + logoAdj.x;
+                if (i % 2 === 0) spawnDataParticle(current_logo_pos_phase2.x, current_logo_pos_phase2.y, logo_width);
+                // Create a new array for data_particles to update positions for this frame
+                let next_frame_particles = [];
+                data_particles.forEach(p => {
+                    let new_p = {...p};
+                    if (new_p.active) {
+                        new_p.y += new_p.vy;
+                        if (new_p.y >= FLOOR_LEVEL) {
+                            new_p.y = FLOOR_LEVEL;
+                            new_p.vy = 0;
+                            new_p.active = false;
+                        }
+                    }
+                    next_frame_particles.push(new_p);
+                });
+                data_particles = next_frame_particles; // Update global particles for next frame generation
+                sequence.push(buildScene(stick_man_art_normal, current_stickman_pos, true, linked_in_art, current_logo_pos_phase2, false,0,0,0, [], {}, false, [], {}));
+            }
+            current_logo_pos_phase2 = { ...logo_initial_pos }; // Reset logo position
+            // Phase 3: Data Settles, Stickman gets ready for impact
+            const settle_frames = 10;
+            for (let i = 0; i < settle_frames; i++) {
+                let stickmanArtPhase3 = (i < settle_frames / 2) ? stick_man_art_normal : stick_man_art_surprise;
+                let next_frame_particles_settle = [];
+                data_particles.forEach(p => { // Ensure all particles settle
+                    let new_p = {...p};
+                    if (new_p.active) {
+                        new_p.y += new_p.vy;
+                        if (new_p.y >= FLOOR_LEVEL) {
+                            new_p.y = FLOOR_LEVEL;
+                            new_p.vy = 0;
+                            new_p.active = false;
+                        }
+                    }
+                    next_frame_particles_settle.push(new_p);
+                });
+                data_particles = next_frame_particles_settle;
+                sequence.push(buildScene(stickmanArtPhase3, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
+            }
+            // Phase 4: Lightning Strike
+            const lightning_target_y = logo_initial_pos.y;
+            const lightning_strike_frames = lightning_target_y + 3;
+            const lightning_bolt_length = 5;
+            const lightning_tip_x_strike = logo_initial_pos.x + Math.floor(logo_width / 2);
+            let frame_lightning_y = 0;
+            for (let i = 0; i < lightning_strike_frames; i++) {
+                frame_lightning_y = i;
+                let logo_art_to_use = linked_in_art;
+                if (frame_lightning_y >= lightning_target_y) {
+                    logo_art_to_use = linked_in_art_hit;
+                    frame_lightning_y = lightning_target_y;
+                }
+                // Update current_lightning_y for buildScene to use
+                current_lightning_y = frame_lightning_y;
+                sequence.push(buildScene(stick_man_art_surprise, current_stickman_pos, true, logo_art_to_use, logo_initial_pos, true, lightning_tip_x_strike, current_lightning_y, lightning_bolt_length, [], {}, false, [], {}));
+            }
+            current_lightning_y = -1; // Lightning done for buildScene logic
+            // Phase 5: Explosion
+            const explosion_duration_per_frame = 2;
+            let stickman_art_explosion = stick_man_art_surprise;
+            for (let i = 0; i < explosion_art_frames.length; i++) {
+                const explosion_art = explosion_art_frames[i];
+                const explosion_art_width = Math.max(...explosion_art.map(l => l.length));
+                const explosion_art_height = explosion_art.length;
+                const current_explosion_pos = {
+                    x: explosion_center_x - Math.floor(explosion_art_width / 2),
+                    y: explosion_center_y - Math.floor(explosion_art_height / 2)
+                };
+                for (let j = 0; j < explosion_duration_per_frame; j++) {
+                    if (i === 0 && j === 0) {
+                        data_particles = []; // Clear all data particles for buildScene
+                        stickman_art_explosion = stick_man_art_gone;
+                    }
+                    sequence.push(buildScene(stickman_art_explosion, current_stickman_pos, false, [], {}, false,0,0,0, explosion_art, current_explosion_pos, false, [], {}));
+                }
+            }
+            // Phase 6: "Ingaze" Logo Reveal
+            const ingaze_reveal_pause_frames = 5;
+            for(let i=0; i < ingaze_reveal_pause_frames; i++) {
+                sequence.push(buildScene(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, false, [], {}));
+            }
+            const ingaze_display_frames = 30;
+            for (let i = 0; i < ingaze_display_frames; i++) {
+                sequence.push(buildScene(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, true, ingaze_logo_art, ingaze_pos));
+            }
+            return sequence;
+        }
+        // --- Animation Player ---
+        const animationElement = document.getElementById('cmd-animation');
+        let currentFrame = 0;
+        let animationInterval;
+        let staticAnimationFrames = []; // Will hold the pre-generated frames
+        function playAnimation() {
+            // Ensure frames are generated before playing
+            if (staticAnimationFrames.length === 0) {
+                console.error("Animation frames not generated yet!");
+                if(animationElement) animationElement.textContent = "Error: Animation frames missing.";
+                return;
+            }
+            animationInterval = setInterval(() => {
+                if (animationElement && staticAnimationFrames[currentFrame]) {
+                    animationElement.textContent = staticAnimationFrames[currentFrame];
+                }
+                currentFrame++;
+                if (currentFrame >= staticAnimationFrames.length) {
+                    currentFrame = 0; // Loop animation
+                    // Re-initialize particle state for a clean loop if it's not handled by generation
+                    // The generateAnimationFrames function now resets particles at its start.
+                    // For a true visual loop, we might need to call generateAnimationFrames() again
+                    // or design the particle logic to reset cleanly on loop.
+                    // For now, a simple frame loop is implemented.
+                    // If generateAnimationFrames is heavy, avoid calling it every loop.
+                    // The current logic in generateAnimationFrames resets data_particles at the beginning.
+                    // To make the loop truly seamless with dynamic particles, the generation logic
+                    // would need to be part of the loop or the state reset more carefully.
+                    // Given the current structure, we'll loop the pre-generated sequence.
+                }
+            }, frameDuration);
+        }
+        // Initialize and start animation
+        // Using a self-invoking function or ensuring DOM is ready
+        (function() {
+            // Check if the DOM is already loaded
+            if (document.readyState === "complete" || document.readyState === "interactive") {
+                initAnimation();
+            } else {
+                window.addEventListener('DOMContentLoaded', initAnimation);
+            }
+        })();
+        function initAnimation() {
+            if (!animationElement) {
+                console.error("Animation element not found");
+                return;
+            }
+            try {
+                staticAnimationFrames = generateAnimationFrames(); // Generate all frames
+                if (staticAnimationFrames.length > 0) {
+                    animationElement.textContent = staticAnimationFrames[0]; // Show first frame
+                    playAnimation();
+                } else {
+                    animationElement.textContent = "Error: Could not generate animation.";
+                }
+            } catch (error) {
+                console.error("Error during animation setup:", error);
+                if(animationElement) animationElement.textContent = "Error initializing animation: " + error.message;
+            }
+        }
+        // Clean up interval when the window/iframe is unloaded (optional, good practice)
+        window.addEventListener('unload', () => {
+            if (animationInterval) {
+                clearInterval(animationInterval);
+            }
+        });
+    </script>
+</body>
+</html>