LLaMA 4 Scout

Only CSS: Codevember #5 Lightsaber
A 0.49T 0.20
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>lightsaber</title>
7    <style>
8        body {
9            margin: 0;
10            background-color: black;
11            overflow: hidden;
12        }
13        .lightsaber {
14            position: absolute;
15            top: 50%;
16            left: 50%;
17            transform-origin: top center;
18            width: 2px;
19            height: 100px;
20            background: linear-gradient(to bottom, #fff, #333);
21            transform-style: preserve-3d;
22        }
23        .light {
24            position: absolute;
25            top: 0;
26            left: 50%;
27            transform: translateX(-50%);
28            width: 2px;
29            height: 0;
30            background: #fff;
31            box-shadow: 0 0 10px #fff;
32        }
33        .blue {
34            animation: blue 2s infinite;
35        }
36        .green {
37            animation: green 2s infinite;
38        }
39        @keyframes blue {
40            0% {
41                transform: rotate(90deg) translateY(0);
42                height: 100px;
43                background-color: blue;
44            }
45            50% {
46                transform: rotate(45deg) translateY(-50px);
47                height: 150px;
48                background-color: blue;
49            }
50            100% {
51                transform: rotate(90deg) translateY(0);
52                height: 100px;
53                background-color: blue;
54            }
55        }
56        @keyframes green {
57            0% {
58                transform: rotate(90deg) translateY(0);
59                height: 100px;
60                background-color: green;
61            }
62            50% {
63                transform: rotate(45deg) translateY(-50px);
64                height: 150px;
65                background-color: green;
66            }
67            100% {
68                transform: rotate(90deg) translateY(0);
69                height: 100px;
70                background-color: green;
71            }
72        }
73    </style>
74</head>
75<body>
76    <div class="lightsaber blue">
77        <div class="light"></div>
78    </div>
79    <script>
80        // Get the lightsaber element
81        const lightsaber = document.querySelector('.lightsaber');
82        // Change color and style
83        function changeColor(color) {
84            lightsaber.classList.remove('blue', 'green');
85            lightsaber.classList.add(color);
86        }
87        // Add event listener
88        document.addEventListener('click', () => {
89            if (lightsaber.classList.contains('blue')) {
90                changeColor('green');
91            } else if (lightsaber.classList.contains('green')) {
92                changeColor('blue');
93            } else {
94                changeColor('blue');
95            }
96        });
97    </script>
98</body>
99</html>