Hugging Face's logo

Spaces:
Remsky
/
ColorPipesScreensaver
Running

App Files Community
Remsky commited on
Commit
76d0fa7
·
verified ·
1 Parent(s): 26ede42

Update index.html

Browse files

via Deepsite -- Deepseek Assisted Prototyping

Files changed (1) hide show
  1. index.html +284 -18
index.html CHANGED
@@ -1,19 +1,285 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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>Windows Pipes Screensaver</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ body {
10
+ margin: 0;
11
+ overflow: hidden;
12
+ background-color: #000;
13
+ }
14
+
15
+ canvas {
16
+ display: block;
17
+ }
18
+
19
+ .controls {
20
+ position: absolute;
21
+ bottom: 20px;
22
+ left: 50%;
23
+ transform: translateX(-50%);
24
+ background-color: rgba(0, 0, 0, 0.7);
25
+ padding: 10px 20px;
26
+ border-radius: 8px;
27
+ color: white;
28
+ font-family: Arial, sans-serif;
29
+ display: flex;
30
+ gap: 15px;
31
+ align-items: center;
32
+ }
33
+
34
+ .controls button {
35
+ background-color: #0078d7;
36
+ color: white;
37
+ border: none;
38
+ padding: 5px 10px;
39
+ border-radius: 4px;
40
+ cursor: pointer;
41
+ transition: background-color 0.3s;
42
+ }
43
+
44
+ .controls button:hover {
45
+ background-color: #005a9e;
46
+ }
47
+
48
+ .title {
49
+ position: absolute;
50
+ top: 20px;
51
+ left: 50%;
52
+ transform: translateX(-50%);
53
+ color: white;
54
+ font-family: 'Arial', sans-serif;
55
+ font-size: 24px;
56
+ text-shadow: 0 0 10px rgba(0, 120, 215, 0.7);
57
+ background-color: rgba(0, 0, 0, 0.5);
58
+ padding: 10px 20px;
59
+ border-radius: 8px;
60
+ }
61
+
62
+ .pipe-count {
63
+ display: flex;
64
+ align-items: center;
65
+ gap: 5px;
66
+ }
67
+
68
+ input[type="range"] {
69
+ width: 100px;
70
+ }
71
+ </style>
72
+ </head>
73
+ <body>
74
+ <div class="title">Windows Pipes Screensaver</div>
75
+ <canvas id="pipesCanvas"></canvas>
76
+ <div class="controls">
77
+ <div class="pipe-count">
78
+ <span>Pipe Count:</span>
79
+ <input type="range" id="pipeCount" min="5" max="50" value="15">
80
+ <span id="pipeCountValue">15</span>
81
+ </div>
82
+ <div class="pipe-count">
83
+ <span>Speed:</span>
84
+ <input type="range" id="speedControl" min="1" max="10" value="5">
85
+ <span id="speedValue">5</span>
86
+ </div>
87
+ <button id="colorBtn">Random Colors</button>
88
+ <button id="resetBtn">Reset</button>
89
+ </div>
90
+
91
+ <script>
92
+ document.addEventListener('DOMContentLoaded', () => {
93
+ const canvas = document.getElementById('pipesCanvas');
94
+ const ctx = canvas.getContext('2d');
95
+ const pipeCountInput = document.getElementById('pipeCount');
96
+ const pipeCountValue = document.getElementById('pipeCountValue');
97
+ const speedControl = document.getElementById('speedControl');
98
+ const speedValue = document.getElementById('speedValue');
99
+ const colorBtn = document.getElementById('colorBtn');
100
+ const resetBtn = document.getElementById('resetBtn');
101
+
102
+ // Set canvas size
103
+ function resizeCanvas() {
104
+ canvas.width = window.innerWidth;
105
+ canvas.height = window.innerHeight;
106
+ }
107
+
108
+ resizeCanvas();
109
+ window.addEventListener('resize', resizeCanvas);
110
+
111
+ // Pipe settings
112
+ let pipeCount = parseInt(pipeCountInput.value);
113
+ let speed = parseInt(speedControl.value);
114
+ let useRandomColors = false;
115
+ let pipes = [];
116
+ const colors = [
117
+ '#0078d7', '#107c10', '#e81123', '#ffb900',
118
+ '#881798', '#00b7c3', '#ff8c00', '#5c2d91'
119
+ ];
120
+
121
+ // Pipe class
122
+ class Pipe {
123
+ constructor() {
124
+ this.reset();
125
+ this.color = colors[Math.floor(Math.random() * colors.length)];
126
+ }
127
+
128
+ reset() {
129
+ this.x = Math.random() * canvas.width;
130
+ this.y = Math.random() * canvas.height;
131
+ this.direction = Math.floor(Math.random() * 4); // 0: right, 1: down, 2: left, 3: up
132
+ this.length = 0;
133
+ this.maxLength = 50 + Math.random() * 100;
134
+ this.speed = 2 + Math.random() * 3;
135
+ this.bendCount = 0;
136
+ this.maxBends = 2 + Math.floor(Math.random() * 3);
137
+ }
138
+
139
+ update() {
140
+ const moveAmount = this.speed * (speed / 5);
141
+
142
+ switch(this.direction) {
143
+ case 0: // right
144
+ this.x += moveAmount;
145
+ break;
146
+ case 1: // down
147
+ this.y += moveAmount;
148
+ break;
149
+ case 2: // left
150
+ this.x -= moveAmount;
151
+ break;
152
+ case 3: // up
153
+ this.y -= moveAmount;
154
+ break;
155
+ }
156
+
157
+ this.length += moveAmount;
158
+
159
+ // Check if we should bend
160
+ if (this.length >= this.maxLength && this.bendCount < this.maxBends) {
161
+ this.length = 0;
162
+ this.bendCount++;
163
+ this.maxLength = 50 + Math.random() * 100;
164
+
165
+ // Randomly choose to turn left or right relative to current direction
166
+ if (Math.random() > 0.5) {
167
+ this.direction = (this.direction + 1) % 4;
168
+ } else {
169
+ this.direction = (this.direction - 1 + 4) % 4;
170
+ }
171
+ }
172
+
173
+ // Check if we should reset
174
+ if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height ||
175
+ (this.length >= this.maxLength && this.bendCount >= this.maxBends)) {
176
+ this.reset();
177
+ }
178
+ }
179
+
180
+ draw(ctx) {
181
+ ctx.strokeStyle = useRandomColors ?
182
+ `hsl(${Math.random() * 360}, 100%, 50%)` : this.color;
183
+ ctx.lineWidth = 8;
184
+ ctx.lineCap = 'round';
185
+
186
+ ctx.beginPath();
187
+
188
+ // Draw the pipe segment based on direction
189
+ switch(this.direction) {
190
+ case 0: // right
191
+ ctx.moveTo(this.x - this.length, this.y);
192
+ ctx.lineTo(this.x, this.y);
193
+ break;
194
+ case 1: // down
195
+ ctx.moveTo(this.x, this.y - this.length);
196
+ ctx.lineTo(this.x, this.y);
197
+ break;
198
+ case 2: // left
199
+ ctx.moveTo(this.x + this.length, this.y);
200
+ ctx.lineTo(this.x, this.y);
201
+ break;
202
+ case 3: // up
203
+ ctx.moveTo(this.x, this.y + this.length);
204
+ ctx.lineTo(this.x, this.y);
205
+ break;
206
+ }
207
+
208
+ ctx.stroke();
209
+
210
+ // Draw the pipe joint
211
+ ctx.fillStyle = useRandomColors ?
212
+ `hsl(${Math.random() * 360}, 100%, 50%)` : this.color;
213
+ ctx.beginPath();
214
+ ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
215
+ ctx.fill();
216
+ }
217
+ }
218
+
219
+ // Initialize pipes
220
+ function initPipes() {
221
+ pipes = [];
222
+ for (let i = 0; i < pipeCount; i++) {
223
+ pipes.push(new Pipe());
224
+ }
225
+ }
226
+
227
+ initPipes();
228
+
229
+ // Animation loop
230
+ function animate() {
231
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
232
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
233
+
234
+ for (let pipe of pipes) {
235
+ pipe.update();
236
+ pipe.draw(ctx);
237
+ }
238
+
239
+ requestAnimationFrame(animate);
240
+ }
241
+
242
+ animate();
243
+
244
+ // Event listeners
245
+ pipeCountInput.addEventListener('input', () => {
246
+ pipeCount = parseInt(pipeCountInput.value);
247
+ pipeCountValue.textContent = pipeCount;
248
+ initPipes();
249
+ });
250
+
251
+ speedControl.addEventListener('input', () => {
252
+ speed = parseInt(speedControl.value);
253
+ speedValue.textContent = speed;
254
+ });
255
+
256
+ colorBtn.addEventListener('click', () => {
257
+ useRandomColors = !useRandomColors;
258
+ colorBtn.textContent = useRandomColors ? 'Solid Colors' : 'Random Colors';
259
+ });
260
+
261
+ resetBtn.addEventListener('click', () => {
262
+ initPipes();
263
+ });
264
+
265
+ // Mouse movement to reset position (like a real screensaver)
266
+ let mouseX = 0;
267
+ let mouseY = 0;
268
+ let lastMouseMove = Date.now();
269
+
270
+ document.addEventListener('mousemove', (e) => {
271
+ mouseX = e.clientX;
272
+ mouseY = e.clientY;
273
+ lastMouseMove = Date.now();
274
+
275
+ // If mouse is moved, reset all pipes
276
+ if (Date.now() - lastMouseMove < 100) {
277
+ for (let pipe of pipes) {
278
+ pipe.reset();
279
+ }
280
+ }
281
+ });
282
+ });
283
+ </script>
284
+ </body>
285
  </html>