Hugging Face's logo

Spaces:
obov
/
space
Running

App Files Community
obov commited on
Commit
4c3ffe7
ยท
verified ยท
1 Parent(s): e5c9c10

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +281 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Space
3
- emoji: ๐Ÿ“Š
4
- colorFrom: pink
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: space
3
+ emoji: ๐Ÿณ
4
+ colorFrom: red
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,281 @@
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>Interactive Particle Canvas</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ body {
10
+ overflow: hidden;
11
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
12
+ }
13
+
14
+ canvas {
15
+ position: fixed;
16
+ top: 0;
17
+ left: 0;
18
+ z-index: 1;
19
+ }
20
+
21
+ .content {
22
+ position: relative;
23
+ z-index: 2;
24
+ pointer-events: none;
25
+ }
26
+
27
+ .particle {
28
+ position: absolute;
29
+ border-radius: 50%;
30
+ pointer-events: none;
31
+ transform: translate(-50%, -50%);
32
+ }
33
+
34
+ .controls {
35
+ position: fixed;
36
+ bottom: 2rem;
37
+ left: 50%;
38
+ transform: translateX(-50%);
39
+ z-index: 10;
40
+ pointer-events: all;
41
+ background: rgba(255, 255, 255, 0.1);
42
+ backdrop-filter: blur(10px);
43
+ border-radius: 9999px;
44
+ padding: 0.5rem 1rem;
45
+ display: flex;
46
+ gap: 1rem;
47
+ align-items: center;
48
+ }
49
+
50
+ button {
51
+ pointer-events: all;
52
+ background: rgba(255, 255, 255, 0.2);
53
+ border: none;
54
+ color: white;
55
+ padding: 0.5rem 1rem;
56
+ border-radius: 9999px;
57
+ cursor: pointer;
58
+ transition: all 0.3s ease;
59
+ }
60
+
61
+ button:hover {
62
+ background: rgba(255, 255, 255, 0.3);
63
+ transform: scale(1.05);
64
+ }
65
+
66
+ .title {
67
+ font-size: 5rem;
68
+ font-weight: 800;
69
+ background: linear-gradient(to right, #ff758c, #ff7eb3, #a18cd1, #8ec5fc);
70
+ -webkit-background-clip: text;
71
+ background-clip: text;
72
+ color: transparent;
73
+ text-align: center;
74
+ margin-bottom: 2rem;
75
+ }
76
+
77
+ .subtitle {
78
+ font-size: 1.5rem;
79
+ color: rgba(255, 255, 255, 0.8);
80
+ text-align: center;
81
+ max-width: 600px;
82
+ margin: 0 auto 3rem;
83
+ }
84
+
85
+ @media (max-width: 768px) {
86
+ .title {
87
+ font-size: 3rem;
88
+ }
89
+
90
+ .subtitle {
91
+ font-size: 1rem;
92
+ padding: 0 1rem;
93
+ }
94
+
95
+ .controls {
96
+ flex-direction: column;
97
+ border-radius: 1rem;
98
+ padding: 1rem;
99
+ }
100
+ }
101
+ </style>
102
+ </head>
103
+ <body>
104
+ <canvas id="canvas"></canvas>
105
+
106
+ <div class="content min-h-screen flex flex-col justify-center items-center px-4">
107
+ <h1 class="title">Cosmic Harmony</h1>
108
+ <p class="subtitle">Move your cursor to paint the canvas with colorful particles. Each interaction creates a unique visual symphony.</p>
109
+ </div>
110
+
111
+ <div class="controls">
112
+ <button id="clearBtn">Clear Canvas</button>
113
+ <button id="colorBtn">Change Colors</button>
114
+ <button id="modeBtn">Toggle Mode</button>
115
+ </div>
116
+
117
+ <script>
118
+ document.addEventListener('DOMContentLoaded', () => {
119
+ const canvas = document.getElementById('canvas');
120
+ const ctx = canvas.getContext('2d');
121
+ const clearBtn = document.getElementById('clearBtn');
122
+ const colorBtn = document.getElementById('colorBtn');
123
+ const modeBtn = document.getElementById('modeBtn');
124
+
125
+ // Set canvas to full window size
126
+ canvas.width = window.innerWidth;
127
+ canvas.height = window.innerHeight;
128
+
129
+ // Particle system
130
+ let particles = [];
131
+ let mouseX = 0;
132
+ let mouseY = 0;
133
+ let isMouseDown = false;
134
+ let colorPalette = [
135
+ '#FF758C', '#FF7EB3', '#A18CD1', '#8EC5FC',
136
+ '#87F5FB', '#A3FFD6', '#B7FFB1', '#FFD166'
137
+ ];
138
+ let currentMode = 'trail'; // 'trail' or 'explosion'
139
+
140
+ // Initialize
141
+ function init() {
142
+ window.addEventListener('resize', onResize);
143
+ canvas.addEventListener('mousemove', onMouseMove);
144
+ canvas.addEventListener('mousedown', onMouseDown);
145
+ canvas.addEventListener('mouseup', onMouseUp);
146
+ canvas.addEventListener('touchmove', onTouchMove);
147
+ canvas.addEventListener('touchstart', onTouchStart);
148
+ canvas.addEventListener('touchend', onTouchEnd);
149
+
150
+ clearBtn.addEventListener('click', clearCanvas);
151
+ colorBtn.addEventListener('click', changeColors);
152
+ modeBtn.addEventListener('click', toggleMode);
153
+
154
+ animate();
155
+ }
156
+
157
+ // Animation loop
158
+ function animate() {
159
+ ctx.fillStyle = 'rgba(26, 26, 46, 0.05)';
160
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
161
+
162
+ // Update and draw particles
163
+ for (let i = 0; i < particles.length; i++) {
164
+ const p = particles[i];
165
+
166
+ p.x += p.vx;
167
+ p.y += p.vy;
168
+ p.life--;
169
+
170
+ if (p.life <= 0) {
171
+ particles.splice(i, 1);
172
+ i--;
173
+ continue;
174
+ }
175
+
176
+ ctx.globalAlpha = p.life / p.maxLife;
177
+ ctx.fillStyle = p.color;
178
+ ctx.beginPath();
179
+ ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
180
+ ctx.fill();
181
+ }
182
+
183
+ requestAnimationFrame(animate);
184
+ }
185
+
186
+ // Create particles
187
+ function createParticles(x, y) {
188
+ const particleCount = currentMode === 'trail' ? 3 : 50;
189
+ const baseSize = currentMode === 'trail' ? 2 : 4;
190
+
191
+ for (let i = 0; i < particleCount; i++) {
192
+ const angle = Math.random() * Math.PI * 2;
193
+ const speed = currentMode === 'trail' ?
194
+ Math.random() * 0.5 :
195
+ Math.random() * 5;
196
+
197
+ particles.push({
198
+ x: x,
199
+ y: y,
200
+ vx: Math.cos(angle) * speed,
201
+ vy: Math.sin(angle) * speed,
202
+ radius: baseSize + Math.random() * 3,
203
+ color: colorPalette[Math.floor(Math.random() * colorPalette.length)],
204
+ life: currentMode === 'trail' ? 50 + Math.random() * 50 : 30 + Math.random() * 50,
205
+ maxLife: currentMode === 'trail' ? 100 : 80
206
+ });
207
+ }
208
+ }
209
+
210
+ // Event handlers
211
+ function onMouseMove(e) {
212
+ mouseX = e.clientX;
213
+ mouseY = e.clientY;
214
+ if (isMouseDown) {
215
+ createParticles(mouseX, mouseY);
216
+ }
217
+ }
218
+
219
+ function onMouseDown() {
220
+ isMouseDown = true;
221
+ createParticles(mouseX, mouseY);
222
+ }
223
+
224
+ function onMouseUp() {
225
+ isMouseDown = false;
226
+ }
227
+
228
+ function onTouchMove(e) {
229
+ e.preventDefault();
230
+ const touch = e.touches[0];
231
+ mouseX = touch.clientX;
232
+ mouseY = touch.clientY;
233
+ createParticles(mouseX, mouseY);
234
+ }
235
+
236
+ function onTouchStart(e) {
237
+ const touch = e.touches[0];
238
+ mouseX = touch.clientX;
239
+ mouseY = touch.clientY;
240
+ createParticles(mouseX, mouseY);
241
+ }
242
+
243
+ function onTouchEnd() {
244
+ // No action needed
245
+ }
246
+
247
+ function onResize() {
248
+ canvas.width = window.innerWidth;
249
+ canvas.height = window.innerHeight;
250
+ }
251
+
252
+ function clearCanvas() {
253
+ ctx.fillStyle = '#1a1a2e';
254
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
255
+ particles = [];
256
+ }
257
+
258
+ function changeColors() {
259
+ // Generate a new random color palette
260
+ colorPalette = [];
261
+ const hueBase = Math.random() * 360;
262
+
263
+ for (let i = 0; i < 8; i++) {
264
+ const hue = (hueBase + (i * 45) + Math.random() * 30) % 360;
265
+ const saturation = 70 + Math.random() * 30;
266
+ const lightness = 60 + Math.random() * 20;
267
+ colorPalette.push(`hsl(${hue}, ${saturation}%, ${lightness}%)`);
268
+ }
269
+ }
270
+
271
+ function toggleMode() {
272
+ currentMode = currentMode === 'trail' ? 'explosion' : 'trail';
273
+ modeBtn.textContent = currentMode === 'trail' ? 'Explosion Mode' : 'Trail Mode';
274
+ }
275
+
276
+ // Start the app
277
+ init();
278
+ });
279
+ </script>
280
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - ๐Ÿงฌ <a href="https://enzostvs-deepsite.hf.space?remix=obov/space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
281
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ์•„๋ฌด๋„ ๋ณธ์ ์—†๋Š” ์ƒˆ๋กœ์šด ์•„๋ฆ„๋‹ค์šด๊ฑธ ๋งŒ๋“ค์–ด์ค˜