Hugging Face's logo

Spaces:
vikashpatel
/
beam
Running

App Files Community
vikashpatel commited on
Commit
76634cb
·
verified ·
1 Parent(s): ca1883f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +551 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Beam
3
- emoji: 🚀
4
- colorFrom: yellow
5
- colorTo: gray
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: beam
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,551 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BeamGen - Animated Beam Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ 50: '#f0f9ff',
17
+ 100: '#e0f2fe',
18
+ 200: '#bae6fd',
19
+ 300: '#7dd3fc',
20
+ 400: '#38bdf8',
21
+ 500: '#0ea5e9',
22
+ 600: '#0284c7',
23
+ 700: '#0369a1',
24
+ 800: '#075985',
25
+ 900: '#0c4a6e',
26
+ },
27
+ dark: {
28
+ 800: '#1e293b',
29
+ 900: '#0f172a',
30
+ }
31
+ },
32
+ animation: {
33
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
34
+ 'float': 'float 6s ease-in-out infinite',
35
+ },
36
+ keyframes: {
37
+ float: {
38
+ '0%, 100%': { transform: 'translateY(0)' },
39
+ '50%': { transform: 'translateY(-10px)' },
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ </script>
46
+ <style>
47
+ .gradient-beam {
48
+ background: linear-gradient(90deg, rgba(14, 165, 233, 0) 0%, rgba(14, 165, 233, 0.5) 25%, rgba(14, 165, 233, 0.5) 75%, rgba(14, 165, 233, 0) 100%);
49
+ height: 2px;
50
+ position: relative;
51
+ overflow: hidden;
52
+ }
53
+
54
+ .gradient-beam::after {
55
+ content: '';
56
+ position: absolute;
57
+ top: 0;
58
+ left: 0;
59
+ right: 0;
60
+ bottom: 0;
61
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
62
+ animation: beam-animation 2s ease-in-out infinite;
63
+ }
64
+
65
+ @keyframes beam-animation {
66
+ 0% { transform: translateX(-100%); }
67
+ 100% { transform: translateX(100%); }
68
+ }
69
+
70
+ .canvas-container {
71
+ background-image:
72
+ linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
73
+ linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
74
+ background-size: 20px 20px;
75
+ }
76
+
77
+ .custom-scrollbar::-webkit-scrollbar {
78
+ width: 6px;
79
+ height: 6px;
80
+ }
81
+
82
+ .custom-scrollbar::-webkit-scrollbar-track {
83
+ background: rgba(255, 255, 255, 0.05);
84
+ }
85
+
86
+ .custom-scrollbar::-webkit-scrollbar-thumb {
87
+ background: rgba(255, 255, 255, 0.2);
88
+ border-radius: 3px;
89
+ }
90
+
91
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
92
+ background: rgba(255, 255, 255, 0.3);
93
+ }
94
+
95
+ .tab-active {
96
+ position: relative;
97
+ }
98
+
99
+ .tab-active::after {
100
+ content: '';
101
+ position: absolute;
102
+ bottom: -1px;
103
+ left: 0;
104
+ right: 0;
105
+ height: 2px;
106
+ background-color: #0ea5e9;
107
+ }
108
+
109
+ .dot-grid {
110
+ background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
111
+ background-size: 10px 10px;
112
+ }
113
+ </style>
114
+ </head>
115
+ <body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 transition-colors duration-200">
116
+ <!-- Navigation -->
117
+ <nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-dark-800/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700">
118
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
119
+ <div class="flex items-center justify-between h-16">
120
+ <div class="flex items-center">
121
+ <div class="flex-shrink-0 flex items-center">
122
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
123
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-white">
124
+ <path d="M5 12h14"></path>
125
+ <path d="M12 5l7 7-7 7"></path>
126
+ </svg>
127
+ </div>
128
+ <span class="ml-2 text-xl font-bold dark:text-white">BeamGen</span>
129
+ </div>
130
+ <div class="hidden md:block">
131
+ <div class="ml-10 flex items-baseline space-x-4">
132
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-primary-500 text-white">Editor</a>
133
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700">Gallery</a>
134
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700">Docs</a>
135
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700">Pricing</a>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ <div class="hidden md:block">
140
+ <div class="ml-4 flex items-center md:ml-6">
141
+ <button type="button" class="p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none">
142
+ <span class="sr-only">Dark mode</span>
143
+ <i class="fas fa-moon" id="dark-mode-toggle"></i>
144
+ </button>
145
+ <button class="ml-4 px-4 py-2 rounded-md text-sm font-medium border border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white transition-colors">
146
+ Sign in
147
+ </button>
148
+ <button class="ml-2 px-4 py-2 rounded-md text-sm font-medium bg-primary-500 text-white hover:bg-primary-600 transition-colors">
149
+ Sign up
150
+ </button>
151
+ </div>
152
+ </div>
153
+ <div class="-mr-2 flex md:hidden">
154
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none">
155
+ <span class="sr-only">Open main menu</span>
156
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
157
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
158
+ </svg>
159
+ </button>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </nav>
164
+
165
+ <!-- Main Content -->
166
+ <div class="pt-16 pb-12 flex flex-col h-screen">
167
+ <div class="flex flex-1 overflow-hidden">
168
+ <!-- Sidebar -->
169
+ <div class="w-64 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 overflow-y-auto custom-scrollbar">
170
+ <div class="p-4">
171
+ <div class="flex items-center justify-between mb-4">
172
+ <h2 class="text-lg font-semibold">Beam Properties</h2>
173
+ <button class="text-xs text-primary-500 hover:text-primary-600">Reset</button>
174
+ </div>
175
+
176
+ <div class="space-y-6">
177
+ <!-- Path Type -->
178
+ <div>
179
+ <h3 class="text-sm font-medium mb-2">Path Type</h3>
180
+ <div class="grid grid-cols-3 gap-2">
181
+ <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center">
182
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
183
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16" />
184
+ </svg>
185
+ <span class="text-xs mt-1">Straight</span>
186
+ </button>
187
+ <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center">
188
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
189
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14" />
190
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5l7 7-7 7" />
191
+ </svg>
192
+ <span class="text-xs mt-1">Curved</span>
193
+ </button>
194
+ <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center">
195
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
196
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m7-7H5" />
197
+ </svg>
198
+ <span class="text-xs mt-1">Zigzag</span>
199
+ </button>
200
+ <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center">
201
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
202
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
203
+ </svg>
204
+ <span class="text-xs mt-1">Circular</span>
205
+ </button>
206
+ <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center">
207
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
208
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
209
+ </svg>
210
+ <span class="text-xs mt-1">Spline</span>
211
+ </button>
212
+ <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center">
213
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
214
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
215
+ </svg>
216
+ <span class="text-xs mt-1">3D</span>
217
+ </button>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Color Settings -->
222
+ <div>
223
+ <h3 class="text-sm font-medium mb-2">Color</h3>
224
+ <div class="flex space-x-2 mb-2">
225
+ <button class="px-3 py-1 text-xs rounded-md bg-gray-100 dark:bg-gray-700">Solid</button>
226
+ <button class="px-3 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">Gradient</button>
227
+ <button class="px-3 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">Animated</button>
228
+ </div>
229
+ <div class="flex items-center space-x-2">
230
+ <div class="w-8 h-8 rounded-md bg-gradient-to-r from-purple-500 to-pink-500 cursor-pointer"></div>
231
+ <input type="text" value="#0ea5e9" class="flex-1 text-xs px-2 py-1 border rounded-md dark:bg-gray-700">
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Width Slider -->
236
+ <div>
237
+ <div class="flex justify-between items-center mb-1">
238
+ <h3 class="text-sm font-medium">Width</h3>
239
+ <span class="text-xs">4px</span>
240
+ </div>
241
+ <input type="range" min="1" max="20" value="4" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
242
+ </div>
243
+
244
+ <!-- Opacity Slider -->
245
+ <div>
246
+ <div class="flex justify-between items-center mb-1">
247
+ <h3 class="text-sm font-medium">Opacity</h3>
248
+ <span class="text-xs">80%</span>
249
+ </div>
250
+ <input type="range" min="0" max="100" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
251
+ </div>
252
+
253
+ <!-- Animation Settings -->
254
+ <div>
255
+ <h3 class="text-sm font-medium mb-2">Animation</h3>
256
+ <div class="grid grid-cols-2 gap-2 mb-2">
257
+ <button class="px-2 py-1 text-xs rounded-md bg-gray-100 dark:bg-gray-700">On Load</button>
258
+ <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">On Hover</button>
259
+ <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">On Click</button>
260
+ <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">On Scroll</button>
261
+ </div>
262
+ <div class="flex justify-between items-center mb-1">
263
+ <span class="text-xs">Speed</span>
264
+ <span class="text-xs">Medium</span>
265
+ </div>
266
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
267
+ </div>
268
+
269
+ <!-- Effects -->
270
+ <div>
271
+ <h3 class="text-sm font-medium mb-2">Effects</h3>
272
+ <div class="space-y-2">
273
+ <label class="flex items-center space-x-2">
274
+ <input type="checkbox" class="rounded text-primary-500">
275
+ <span class="text-sm">Pulsing</span>
276
+ </label>
277
+ <label class="flex items-center space-x-2">
278
+ <input type="checkbox" class="rounded text-primary-500">
279
+ <span class="text-sm">Sparkling</span>
280
+ </label>
281
+ <label class="flex items-center space-x-2">
282
+ <input type="checkbox" class="rounded text-primary-500" checked>
283
+ <span class="text-sm">Glow</span>
284
+ </label>
285
+ <label class="flex items-center space-x-2">
286
+ <input type="checkbox" class="rounded text-primary-500">
287
+ <span class="text-sm">Particles</span>
288
+ </label>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Main Canvas -->
296
+ <div class="flex-1 flex flex-col overflow-hidden">
297
+ <!-- Toolbar -->
298
+ <div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 p-2 flex items-center justify-between">
299
+ <div class="flex space-x-2">
300
+ <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
301
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
302
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
303
+ </svg>
304
+ </button>
305
+ <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
306
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
307
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
308
+ </svg>
309
+ </button>
310
+ <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
311
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
312
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
313
+ </svg>
314
+ </button>
315
+ <div class="border-l border-gray-200 dark:border-gray-700 mx-2"></div>
316
+ <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
317
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
318
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
319
+ </svg>
320
+ </button>
321
+ <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
322
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
323
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
324
+ </svg>
325
+ </button>
326
+ </div>
327
+ <div class="flex space-x-2">
328
+ <button class="px-3 py-1 text-sm rounded-md border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
329
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
330
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
331
+ </svg>
332
+ Export
333
+ </button>
334
+ <button class="px-3 py-1 text-sm rounded-md bg-primary-500 text-white hover:bg-primary-600">
335
+ Save
336
+ </button>
337
+ </div>
338
+ </div>
339
+
340
+ <!-- Canvas Area -->
341
+ <div class="flex-1 overflow-auto canvas-container dot-grid relative">
342
+ <div class="absolute inset-0 flex items-center justify-center">
343
+ <div class="w-full max-w-2xl mx-auto p-8">
344
+ <div class="relative">
345
+ <!-- Sample Beam -->
346
+ <div class="gradient-beam w-full mb-8"></div>
347
+
348
+ <!-- Start and End Points -->
349
+ <div class="flex justify-between">
350
+ <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center cursor-move shadow-lg">
351
+ <div class="w-3 h-3 bg-white rounded-full"></div>
352
+ </div>
353
+ <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center cursor-move shadow-lg">
354
+ <div class="w-3 h-3 bg-white rounded-full"></div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Control Points (for curved beams) -->
359
+ <div class="absolute top-1/2 left-1/4 transform -translate-y-1/2">
360
+ <div class="w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center cursor-move shadow-lg">
361
+ <div class="w-2 h-2 bg-white rounded-full"></div>
362
+ </div>
363
+ </div>
364
+ <div class="absolute top-1/2 right-1/4 transform -translate-y-1/2">
365
+ <div class="w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center cursor-move shadow-lg">
366
+ <div class="w-2 h-2 bg-white rounded-full"></div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <!-- Properties Panel -->
375
+ <div class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 p-4">
376
+ <div class="flex border-b border-gray-200 dark:border-gray-700">
377
+ <button class="px-4 py-2 text-sm font-medium tab-active">Beam</button>
378
+ <button class="px-4 py-2 text-sm font-medium">Path</button>
379
+ <button class="px-4 py-2 text-sm font-medium">Effects</button>
380
+ <button class="px-4 py-2 text-sm font-medium">Export</button>
381
+ </div>
382
+ <div class="mt-4 grid grid-cols-2 gap-4">
383
+ <div>
384
+ <label class="block text-sm font-medium mb-1">Direction</label>
385
+ <select class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700">
386
+ <option>Forward</option>
387
+ <option>Reverse</option>
388
+ <option>Bidirectional</option>
389
+ <option>Ping Pong</option>
390
+ </select>
391
+ </div>
392
+ <div>
393
+ <label class="block text-sm font-medium mb-1">Easing</label>
394
+ <select class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700">
395
+ <option>Linear</option>
396
+ <option>Ease In</option>
397
+ <option>Ease Out</option>
398
+ <option>Ease In Out</option>
399
+ </select>
400
+ </div>
401
+ <div>
402
+ <label class="block text-sm font-medium mb-1">Duration (ms)</label>
403
+ <input type="number" value="2000" class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700">
404
+ </div>
405
+ <div>
406
+ <label class="block text-sm font-medium mb-1">Delay (ms)</label>
407
+ <input type="number" value="0" class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700">
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+
413
+ <!-- Export Panel -->
414
+ <div class="w-80 flex-shrink-0 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 overflow-y-auto custom-scrollbar">
415
+ <div class="p-4">
416
+ <h2 class="text-lg font-semibold mb-4">Export Settings</h2>
417
+
418
+ <div class="space-y-6">
419
+ <!-- Framework Selection -->
420
+ <div>
421
+ <h3 class="text-sm font-medium mb-2">Framework</h3>
422
+ <div class="grid grid-cols-2 gap-2">
423
+ <button class="px-2 py-2 text-xs rounded-md bg-gray-100 dark:bg-gray-700 flex flex-col items-center">
424
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
425
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
426
+ </svg>
427
+ <span class="mt-1">React</span>
428
+ </button>
429
+ <button class="px-2 py-2 text-xs rounded-md border border-gray-200 dark:border-gray-600 flex flex-col items-center">
430
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
431
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
432
+ </svg>
433
+ <span class="mt-1">Vue</span>
434
+ </button>
435
+ <button class="px-2 py-2 text-xs rounded-md border border-gray-200 dark:border-gray-600 flex flex-col items-center">
436
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
437
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
438
+ </svg>
439
+ <span class="mt-1">Svelte</span>
440
+ </button>
441
+ <button class="px-2 py-2 text-xs rounded-md border border-gray-200 dark:border-gray-600 flex flex-col items-center">
442
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
443
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
444
+ </svg>
445
+ <span class="mt-1">JS</span>
446
+ </button>
447
+ </div>
448
+ </div>
449
+
450
+ <!-- Export Format -->
451
+ <div>
452
+ <h3 class="text-sm font-medium mb-2">Format</h3>
453
+ <div class="grid grid-cols-3 gap-2">
454
+ <button class="px-2 py-1 text-xs rounded-md bg-gray-100 dark:bg-gray-700">Code</button>
455
+ <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">SVG</button>
456
+ <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">CSS</button>
457
+ <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">GIF</button>
458
+ <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">MP4</button>
459
+ <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">WebM</button>
460
+ </div>
461
+ </div>
462
+
463
+ <!-- Code Preview -->
464
+ <div>
465
+ <h3 class="text-sm font-medium mb-2">Code Preview</h3>
466
+ <div class="bg-gray-800 text-gray-200 p-3 rounded-md text-xs font-mono overflow-x-auto">
467
+ <pre><code>import React from 'react';
468
+ import './Beam.css';
469
+
470
+ const AnimatedBeam = () => {
471
+ return (
472
+ &lt;div className="beam-container"&gt;
473
+ &lt;div className="gradient-beam" /&gt;
474
+ &lt;/div&gt;
475
+ );
476
+ };
477
+
478
+ export default AnimatedBeam;</code></pre>
479
+ </div>
480
+ <button class="mt-2 w-full py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 flex items-center justify-center">
481
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
482
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
483
+ </svg>
484
+ Copy Code
485
+ </button>
486
+ </div>
487
+
488
+ <!-- Download Options -->
489
+ <div>
490
+ <h3 class="text-sm font-medium mb-2">Download</h3>
491
+ <div class="space-y-2">
492
+ <button class="w-full py-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center">
493
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
494
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
495
+ </svg>
496
+ Download SVG
497
+ </button>
498
+ <button class="w-full py-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center">
499
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
500
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
501
+ </svg>
502
+ Download GIF
503
+ </button>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <script>
513
+ // Dark mode toggle
514
+ const darkModeToggle = document.getElementById('dark-mode-toggle');
515
+ const html = document.documentElement;
516
+
517
+ darkModeToggle.addEventListener('click', () => {
518
+ html.classList.toggle('dark');
519
+ if (html.classList.contains('dark')) {
520
+ darkModeToggle.classList.replace('fa-moon', 'fa-sun');
521
+ } else {
522
+ darkModeToggle.classList.replace('fa-sun', 'fa-moon');
523
+ }
524
+ });
525
+
526
+ // Check for saved theme preference or use system preference
527
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
528
+ html.classList.add('dark');
529
+ darkModeToggle.classList.replace('fa-moon', 'fa-sun');
530
+ } else {
531
+ html.classList.remove('dark');
532
+ darkModeToggle.classList.replace('fa-sun', 'fa-moon');
533
+ }
534
+
535
+ // Save theme preference
536
+ darkModeToggle.addEventListener('click', () => {
537
+ const isDark = html.classList.contains('dark');
538
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
539
+ });
540
+
541
+ // Tab switching
542
+ const tabs = document.querySelectorAll('.flex.border-b button');
543
+ tabs.forEach(tab => {
544
+ tab.addEventListener('click', () => {
545
+ tabs.forEach(t => t.classList.remove('tab-active'));
546
+ tab.classList.add('tab-active');
547
+ });
548
+ });
549
+ </script>
550
+ <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=vikashpatel/beam" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
551
+ </html>
prompts.txt ADDED
File without changes