Hugging Face's logo

Spaces:
Kast8
/
https-snahct-com-post-targe
Running

App Files Community
Kast8 commited on
Commit
4f596c4
·
verified ·
1 Parent(s): 7687c8b

Snapchat - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +397 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Https Snahct Com Post Targe
3
- emoji: 🌖
4
- colorFrom: pink
5
- colorTo: red
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: https-snahct-com-post-targe
3
+ emoji: 🐳
4
+ colorFrom: blue
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,397 @@
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>Snapchat Clone</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
+ <style>
10
+ .camera-view {
11
+ position: relative;
12
+ width: 100%;
13
+ height: 100vh;
14
+ background: linear-gradient(to bottom, #FFFC00, #FFD700);
15
+ overflow: hidden;
16
+ }
17
+
18
+ .camera-overlay {
19
+ position: absolute;
20
+ top: 0;
21
+ left: 0;
22
+ width: 100%;
23
+ height: 100%;
24
+ pointer-events: none;
25
+ }
26
+
27
+ .snap-button {
28
+ width: 70px;
29
+ height: 70px;
30
+ border-radius: 50%;
31
+ border: 4px solid white;
32
+ background: rgba(255, 255, 255, 0.3);
33
+ transition: all 0.2s;
34
+ }
35
+
36
+ .snap-button:active {
37
+ transform: scale(0.95);
38
+ }
39
+
40
+ .story-circle {
41
+ width: 60px;
42
+ height: 60px;
43
+ border-radius: 50%;
44
+ border: 3px solid #FFFC00;
45
+ background: linear-gradient(45deg, #FF5F6D, #FFC371);
46
+ }
47
+
48
+ .chat-bubble {
49
+ background: rgba(255, 255, 255, 0.9);
50
+ border-radius: 18px;
51
+ max-width: 70%;
52
+ }
53
+
54
+ .unread-badge {
55
+ width: 20px;
56
+ height: 20px;
57
+ border-radius: 50%;
58
+ background: #FF0000;
59
+ color: white;
60
+ font-size: 12px;
61
+ }
62
+
63
+ .tab-bar {
64
+ background: rgba(255, 255, 255, 0.9);
65
+ backdrop-filter: blur(10px);
66
+ }
67
+
68
+ .snap-animation {
69
+ animation: snapFlash 0.5s;
70
+ }
71
+
72
+ @keyframes snapFlash {
73
+ 0% { opacity: 0; }
74
+ 50% { opacity: 1; }
75
+ 100% { opacity: 0; }
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="bg-gray-100 font-sans">
80
+ <!-- Camera View -->
81
+ <div class="camera-view" id="cameraView">
82
+ <!-- Camera overlay with controls -->
83
+ <div class="camera-overlay flex flex-col justify-between p-4">
84
+ <!-- Top bar -->
85
+ <div class="flex justify-between items-center">
86
+ <button class="pointer-events-auto bg-black bg-opacity-30 text-white rounded-full p-2">
87
+ <i class="fas fa-cog text-xl"></i>
88
+ </button>
89
+ <div class="flex space-x-2">
90
+ <button class="pointer-events-auto bg-black bg-opacity-30 text-white rounded-full px-3 py-1 text-sm">
91
+ Memories
92
+ </button>
93
+ <button class="pointer-events-auto bg-black bg-opacity-30 text-white rounded-full px-3 py-1 text-sm">
94
+ Scan
95
+ </button>
96
+ </div>
97
+ <button class="pointer-events-auto bg-black bg-opacity-30 text-white rounded-full p-2">
98
+ <i class="fas fa-bolt text-xl"></i>
99
+ </button>
100
+ </div>
101
+
102
+ <!-- Camera controls -->
103
+ <div class="flex flex-col items-center space-y-4">
104
+ <div class="flex space-x-4 items-center">
105
+ <button class="pointer-events-auto bg-black bg-opacity-30 text-white rounded-full p-2">
106
+ <i class="fas fa-music text-xl"></i>
107
+ </button>
108
+ <button class="pointer-events-auto bg-black bg-opacity-30 text-white rounded-full p-2">
109
+ <i class="fas fa-cut text-xl"></i>
110
+ </button>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Bottom controls -->
115
+ <div class="flex justify-between items-center">
116
+ <button class="pointer-events-auto bg-black bg-opacity-30 text-white rounded-full p-3">
117
+ <i class="fas fa-images text-xl"></i>
118
+ </button>
119
+
120
+ <!-- Snap button -->
121
+ <button id="snapButton" class="pointer-events-auto snap-button flex items-center justify-center">
122
+ <div class="w-full h-full rounded-full bg-white opacity-30"></div>
123
+ </button>
124
+
125
+ <button class="pointer-events-auto bg-black bg-opacity-30 text-white rounded-full p-3">
126
+ <i class="fas fa-sync-alt text-xl"></i>
127
+ </button>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Flash effect (hidden by default) -->
132
+ <div id="flashEffect" class="absolute inset-0 bg-white opacity-0 snap-animation hidden"></div>
133
+ </div>
134
+
135
+ <!-- Stories View (hidden by default) -->
136
+ <div id="storiesView" class="hidden h-screen bg-white">
137
+ <div class="p-4">
138
+ <div class="flex justify-between items-center mb-6">
139
+ <h1 class="text-2xl font-bold">Stories</h1>
140
+ <button class="text-gray-500">
141
+ <i class="fas fa-search text-xl"></i>
142
+ </button>
143
+ </div>
144
+
145
+ <div class="space-y-6">
146
+ <!-- My Story -->
147
+ <div class="flex items-center space-x-4">
148
+ <div class="story-circle flex items-center justify-center">
149
+ <i class="fas fa-plus text-white text-xl"></i>
150
+ </div>
151
+ <div>
152
+ <h3 class="font-bold">My Story</h3>
153
+ <p class="text-gray-500 text-sm">Tap to add to your story</p>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Friends Stories -->
158
+ <div>
159
+ <h3 class="font-bold text-gray-500 mb-3">Friends</h3>
160
+ <div class="space-y-4">
161
+ <!-- Story 1 -->
162
+ <div class="flex items-center space-x-4">
163
+ <div class="story-circle flex items-center justify-center">
164
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover" alt="Friend">
165
+ </div>
166
+ <div>
167
+ <h3 class="font-bold">Sarah</h3>
168
+ <p class="text-gray-500 text-sm">2h ago</p>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Story 2 -->
173
+ <div class="flex items-center space-x-4">
174
+ <div class="story-circle flex items-center justify-center">
175
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover" alt="Friend">
176
+ </div>
177
+ <div>
178
+ <h3 class="font-bold">Mike</h3>
179
+ <p class="text-gray-500 text-sm">4h ago</p>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Story 3 -->
184
+ <div class="flex items-center space-x-4">
185
+ <div class="story-circle flex items-center justify-center">
186
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-full h-full rounded-full object-cover" alt="Friend">
187
+ </div>
188
+ <div>
189
+ <h3 class="font-bold">Emma</h3>
190
+ <p class="text-gray-500 text-sm">6h ago</p>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Chat View (hidden by default) -->
200
+ <div id="chatView" class="hidden h-screen bg-white">
201
+ <div class="p-4">
202
+ <div class="flex justify-between items-center mb-6">
203
+ <h1 class="text-2xl font-bold">Chat</h1>
204
+ <button class="text-gray-500">
205
+ <i class="fas fa-edit text-xl"></i>
206
+ </button>
207
+ </div>
208
+
209
+ <div class="space-y-4">
210
+ <!-- Chat 1 -->
211
+ <div class="flex items-center space-x-4">
212
+ <div class="w-12 h-12 rounded-full bg-yellow-300 flex items-center justify-center">
213
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-full h-full rounded-full object-cover" alt="Friend">
214
+ </div>
215
+ <div class="flex-1">
216
+ <h3 class="font-bold">Sarah</h3>
217
+ <p class="text-gray-500 text-sm">Hey! How are you?</p>
218
+ </div>
219
+ <div class="text-right">
220
+ <p class="text-gray-500 text-sm">2m ago</p>
221
+ <div class="unread-badge flex items-center justify-center mt-1">3</div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Chat 2 -->
226
+ <div class="flex items-center space-x-4">
227
+ <div class="w-12 h-12 rounded-full bg-pink-300 flex items-center justify-center">
228
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-full h-full rounded-full object-cover" alt="Friend">
229
+ </div>
230
+ <div class="flex-1">
231
+ <h3 class="font-bold">Mike</h3>
232
+ <p class="text-gray-500 text-sm">Check out this snap!</p>
233
+ </div>
234
+ <div class="text-right">
235
+ <p class="text-gray-500 text-sm">15m ago</p>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Chat 3 -->
240
+ <div class="flex items-center space-x-4">
241
+ <div class="w-12 h-12 rounded-full bg-blue-300 flex items-center justify-center">
242
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-full h-full rounded-full object-cover" alt="Friend">
243
+ </div>
244
+ <div class="flex-1">
245
+ <h3 class="font-bold">Emma</h3>
246
+ <p class="text-gray-500 text-sm">Let's meet up later</p>
247
+ </div>
248
+ <div class="text-right">
249
+ <p class="text-gray-500 text-sm">1h ago</p>
250
+ <div class="unread-badge flex items-center justify-center mt-1">1</div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Tab Bar -->
258
+ <div class="tab-bar fixed bottom-0 left-0 right-0 flex justify-around items-center p-3 border-t border-gray-200">
259
+ <button id="cameraTab" class="text-gray-700 p-2 rounded-full bg-yellow-100">
260
+ <i class="fas fa-camera text-xl"></i>
261
+ </button>
262
+ <button id="storiesTab" class="text-gray-500 p-2 rounded-full">
263
+ <i class="fas fa-users text-xl"></i>
264
+ </button>
265
+ <button id="chatTab" class="text-gray-500 p-2 rounded-full">
266
+ <i class="fas fa-comment text-xl"></i>
267
+ </button>
268
+ </div>
269
+
270
+ <script>
271
+ // Tab switching functionality
272
+ const cameraTab = document.getElementById('cameraTab');
273
+ const storiesTab = document.getElementById('storiesTab');
274
+ const chatTab = document.getElementById('chatTab');
275
+
276
+ const cameraView = document.getElementById('cameraView');
277
+ const storiesView = document.getElementById('storiesView');
278
+ const chatView = document.getElementById('chatView');
279
+
280
+ cameraTab.addEventListener('click', () => {
281
+ cameraView.classList.remove('hidden');
282
+ storiesView.classList.add('hidden');
283
+ chatView.classList.add('hidden');
284
+
285
+ cameraTab.classList.add('bg-yellow-100');
286
+ cameraTab.classList.remove('text-gray-500');
287
+ cameraTab.classList.add('text-gray-700');
288
+
289
+ storiesTab.classList.remove('bg-yellow-100');
290
+ storiesTab.classList.add('text-gray-500');
291
+ storiesTab.classList.remove('text-gray-700');
292
+
293
+ chatTab.classList.remove('bg-yellow-100');
294
+ chatTab.classList.add('text-gray-500');
295
+ chatTab.classList.remove('text-gray-700');
296
+ });
297
+
298
+ storiesTab.addEventListener('click', () => {
299
+ cameraView.classList.add('hidden');
300
+ storiesView.classList.remove('hidden');
301
+ chatView.classList.add('hidden');
302
+
303
+ cameraTab.classList.remove('bg-yellow-100');
304
+ cameraTab.classList.add('text-gray-500');
305
+ cameraTab.classList.remove('text-gray-700');
306
+
307
+ storiesTab.classList.add('bg-yellow-100');
308
+ storiesTab.classList.remove('text-gray-500');
309
+ storiesTab.classList.add('text-gray-700');
310
+
311
+ chatTab.classList.remove('bg-yellow-100');
312
+ chatTab.classList.add('text-gray-500');
313
+ chatTab.classList.remove('text-gray-700');
314
+ });
315
+
316
+ chatTab.addEventListener('click', () => {
317
+ cameraView.classList.add('hidden');
318
+ storiesView.classList.add('hidden');
319
+ chatView.classList.remove('hidden');
320
+
321
+ cameraTab.classList.remove('bg-yellow-100');
322
+ cameraTab.classList.add('text-gray-500');
323
+ cameraTab.classList.remove('text-gray-700');
324
+
325
+ storiesTab.classList.remove('bg-yellow-100');
326
+ storiesTab.classList.add('text-gray-500');
327
+ storiesTab.classList.remove('text-gray-700');
328
+
329
+ chatTab.classList.add('bg-yellow-100');
330
+ chatTab.classList.remove('text-gray-500');
331
+ chatTab.classList.add('text-gray-700');
332
+ });
333
+
334
+ // Snap button functionality
335
+ const snapButton = document.getElementById('snapButton');
336
+ const flashEffect = document.getElementById('flashEffect');
337
+
338
+ snapButton.addEventListener('click', () => {
339
+ // Show flash effect
340
+ flashEffect.classList.remove('hidden');
341
+ flashEffect.classList.remove('opacity-0');
342
+ flashEffect.classList.add('opacity-100');
343
+
344
+ // Reset after animation
345
+ setTimeout(() => {
346
+ flashEffect.classList.add('opacity-0');
347
+ flashEffect.classList.remove('opacity-100');
348
+ setTimeout(() => {
349
+ flashEffect.classList.add('hidden');
350
+ }, 500);
351
+ }, 500);
352
+
353
+ // Vibrate on snap (if supported)
354
+ if ('vibrate' in navigator) {
355
+ navigator.vibrate(50);
356
+ }
357
+ });
358
+
359
+ // Swipe between tabs (simplified version)
360
+ let startX = 0;
361
+ let endX = 0;
362
+
363
+ document.addEventListener('touchstart', (e) => {
364
+ startX = e.changedTouches[0].screenX;
365
+ });
366
+
367
+ document.addEventListener('touchend', (e) => {
368
+ endX = e.changedTouches[0].screenX;
369
+ handleSwipe();
370
+ });
371
+
372
+ function handleSwipe() {
373
+ const threshold = 50;
374
+
375
+ if (startX - endX > threshold) {
376
+ // Swipe left - go to stories if on camera
377
+ if (!cameraView.classList.contains('hidden')) {
378
+ storiesTab.click();
379
+ }
380
+ // Or go to chat if on stories
381
+ else if (!storiesView.classList.contains('hidden')) {
382
+ chatTab.click();
383
+ }
384
+ } else if (endX - startX > threshold) {
385
+ // Swipe right - go to camera if on stories
386
+ if (!storiesView.classList.contains('hidden')) {
387
+ cameraTab.click();
388
+ }
389
+ // Or go to stories if on chat
390
+ else if (!chatView.classList.contains('hidden')) {
391
+ storiesTab.click();
392
+ }
393
+ }
394
+ }
395
+ </script>
396
+ <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=Kast8/https-snahct-com-post-targe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
397
+ </html>