fix merge confict?

2026-03-24 17:02:11 +01:00
parent cb1fc01ad6
commit e764d565c1
1 changed files with 86 additions and 0 deletions
@@ -0,0 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Hand-Drawn Shapes</title>
    <style>
        /* 1. Setup the "Canvas" */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #003366; /* Your monochrome blue background */
            overflow: hidden; /* Prevents scrollbars if shapes move off-screen */
        }
        /* 2. The Shape Container */
 		.shape {
 			/* The "Physical" properties */
 			position: absolute;
 			width: 300px;
 			height: 300px;
 			/* The "Stenciling" instructions (but no image yet!) */
 			-webkit-mask-size: contain;
 			mask-size: contain;
 			-webkit-mask-repeat: no-repeat;
 			mask-repeat: no-repeat;
 			/* The default "Paint" color */
 			background-color: white; 
 		}
 		.doodle-1 {
 			-webkit-mask-image: url('assets/doodle/doodle1.png');
 			mask-image: url('assets/doodle/doodle1.png');
 			/* Set initial position here */
 				left: 500px;
 				top: 300px;
 		}
        /* 3. A quick animation for the color loop */
        .loop-color {
            animation: colorShift 5s infinite alternate ease-in-out, 
        }
        @keyframes colorShift {
            0%   { background-color: #ff5555; } /* Soft Red */
            50%  { background-color: #55ff55; } /* Neon Green */
            100% { background-color: #ffff55; } /* Bright Yellow */
        }
    </style>
 </head>
 <body>
 <!-- 
    <div class="shape loop-color" id="shape1" style="top: 100px; left: 100px;"></div>
     -->
    <!-- <div class="shape" id="shape2" style="top: 250px; left: 400px; background-color: cyan; opacity: 0.8;"></div> -->
 	<div>
 		<div id="test2" class="shape doodle-1" style="background-color: red; left: 400px;"></div>	
 	</div>
 	<div>
 		<div id="test1" class="shape doodle-1 loop-color"></div>	
 	</div>
 	<!-- <div>
 		<img src="./assets/doodle/doodle1.png">
 	</div> -->
    <script>
        // Simple script to make 'shape1' follow your mouse
        const shape = document.getElementById('shape1');
        window.addEventListener('mousemove', (e) => {
            // Centers the shape on the mouse
            const x = e.clientX - 150; 
            const y = e.clientY - 150;
            shape.style.transform = `translate(${x}px, ${y}px)`;
        });
    </script>
 </body>
 </html>