Hugging Face's logo

Spaces:
akhaliq
/
anycoder-d269e617
Running

App Files Community
akhaliq HF Staff commited on
Commit
824d6a8
·
verified ·
1 Parent(s): fa579ec

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +412 -19
index.html CHANGED
@@ -1,19 +1,412 @@
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>Google Search</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ body {
16
+ font-family: 'Arial', sans-serif;
17
+ background-color: #121212;
18
+ color: #fff;
19
+ min-height: 100vh;
20
+ display: flex;
21
+ flex-direction: column;
22
+ align-items: center;
23
+ padding: 20px;
24
+ }
25
+
26
+ .header {
27
+ width: 100%;
28
+ display: flex;
29
+ justify-content: space-between;
30
+ align-items: center;
31
+ margin-bottom: 40px;
32
+ }
33
+
34
+ .built-with {
35
+ font-size: 14px;
36
+ color: #888;
37
+ text-decoration: none;
38
+ transition: color 0.3s ease;
39
+ }
40
+
41
+ .built-with:hover {
42
+ color: #fff;
43
+ }
44
+
45
+ .share-icon {
46
+ background: rgba(255, 255, 255, 0.1);
47
+ border-radius: 50%;
48
+ width: 36px;
49
+ height: 36px;
50
+ display: flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ cursor: pointer;
54
+ transition: background 0.3s ease;
55
+ }
56
+
57
+ .share-icon:hover {
58
+ background: rgba(255, 255, 255, 0.2);
59
+ }
60
+
61
+ .logo-container {
62
+ margin: 40px 0;
63
+ position: relative;
64
+ display: flex;
65
+ align-items: center;
66
+ }
67
+
68
+ .google-logo {
69
+ font-size: 180px;
70
+ font-weight: 900;
71
+ color: #4285f4;
72
+ text-shadow: 0 2px 10px rgba(66, 133, 244, 0.3);
73
+ position: relative;
74
+ z-index: 2;
75
+ }
76
+
77
+ .google-logo .g {
78
+ color: #4285f4;
79
+ }
80
+
81
+ .google-logo .o {
82
+ color: #ea4335;
83
+ }
84
+
85
+ .google-logo .o:nth-child(2) {
86
+ color: #fbbc05;
87
+ }
88
+
89
+ .google-logo .g:nth-child(4) {
90
+ color: #34a853;
91
+ }
92
+
93
+ .google-logo .l {
94
+ color: #4285f4;
95
+ }
96
+
97
+ .google-logo .e {
98
+ color: #ea4335;
99
+ }
100
+
101
+ .video-thumbnail {
102
+ position: absolute;
103
+ width: 180px;
104
+ height: 120px;
105
+ border-radius: 8px;
106
+ overflow: hidden;
107
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
108
+ z-index: 1;
109
+ left: 50%;
110
+ transform: translateX(-50%);
111
+ border: 3px solid rgba(255, 255, 255, 0.2);
112
+ }
113
+
114
+ .video-thumbnail img {
115
+ width: 100%;
116
+ height: 100%;
117
+ object-fit: cover;
118
+ }
119
+
120
+ .play-button {
121
+ position: absolute;
122
+ top: 50%;
123
+ left: 50%;
124
+ transform: translate(-50%, -50%);
125
+ width: 50px;
126
+ height: 50px;
127
+ background: rgba(255, 255, 255, 0.8);
128
+ border-radius: 50%;
129
+ display: flex;
130
+ align-items: center;
131
+ justify-content: center;
132
+ cursor: pointer;
133
+ transition: background 0.3s ease;
134
+ }
135
+
136
+ .play-button:hover {
137
+ background: rgba(255, 255, 255, 1);
138
+ }
139
+
140
+ .play-button i {
141
+ color: #333;
142
+ font-size: 24px;
143
+ }
144
+
145
+ .search-container {
146
+ width: 100%;
147
+ max-width: 600px;
148
+ margin: 20px 0 40px;
149
+ }
150
+
151
+ .search-bar {
152
+ display: flex;
153
+ align-items: center;
154
+ background: #333;
155
+ border-radius: 24px;
156
+ padding: 12px 20px;
157
+ position: relative;
158
+ }
159
+
160
+ .add-tab {
161
+ background: none;
162
+ border: none;
163
+ color: #888;
164
+ font-size: 24px;
165
+ margin-right: 15px;
166
+ cursor: pointer;
167
+ transition: color 0.3s ease;
168
+ }
169
+
170
+ .add-tab:hover {
171
+ color: #fff;
172
+ }
173
+
174
+ .search-input {
175
+ flex: 1;
176
+ background: none;
177
+ border: none;
178
+ color: #fff;
179
+ font-size: 16px;
180
+ outline: none;
181
+ padding: 8px 0;
182
+ }
183
+
184
+ .search-input::placeholder {
185
+ color: #888;
186
+ }
187
+
188
+ .search-icons {
189
+ display: flex;
190
+ align-items: center;
191
+ margin-left: 15px;
192
+ }
193
+
194
+ .search-icon {
195
+ width: 36px;
196
+ height: 36px;
197
+ display: flex;
198
+ align-items: center;
199
+ justify-content: center;
200
+ color: #888;
201
+ cursor: pointer;
202
+ transition: color 0.3s ease;
203
+ margin-left: 10px;
204
+ }
205
+
206
+ .search-icon:hover {
207
+ color: #fff;
208
+ }
209
+
210
+ .ai-mode {
211
+ background: rgba(66, 133, 244, 0.2);
212
+ border-radius: 20px;
213
+ padding: 8px 16px;
214
+ margin-left: 15px;
215
+ display: flex;
216
+ align-items: center;
217
+ cursor: pointer;
218
+ transition: background 0.3s ease;
219
+ }
220
+
221
+ .ai-mode:hover {
222
+ background: rgba(66, 133, 244, 0.3);
223
+ }
224
+
225
+ .ai-mode i {
226
+ margin-right: 8px;
227
+ color: #4285f4;
228
+ }
229
+
230
+ .ai-mode-text {
231
+ color: #fff;
232
+ font-size: 14px;
233
+ }
234
+
235
+ .search-buttons {
236
+ display: flex;
237
+ justify-content: center;
238
+ gap: 20px;
239
+ margin: 30px 0;
240
+ }
241
+
242
+ .search-button {
243
+ padding: 12px 24px;
244
+ border: none;
245
+ border-radius: 4px;
246
+ font-size: 16px;
247
+ cursor: pointer;
248
+ transition: all 0.3s ease;
249
+ font-weight: 500;
250
+ }
251
+
252
+ .google-search {
253
+ background: #333;
254
+ color: #fff;
255
+ }
256
+
257
+ .google-search:hover {
258
+ background: #444;
259
+ }
260
+
261
+ .im-feeling-lucky {
262
+ background: #333;
263
+ color: #fff;
264
+ }
265
+
266
+ .im-feeling-lucky:hover {
267
+ background: #444;
268
+ }
269
+
270
+ .footer {
271
+ margin-top: auto;
272
+ text-align: center;
273
+ color: #888;
274
+ font-size: 14px;
275
+ display: flex;
276
+ align-items: center;
277
+ justify-content: center;
278
+ gap: 8px;
279
+ }
280
+
281
+ .footer:hover {
282
+ color: #fff;
283
+ }
284
+
285
+ @media (max-width: 768px) {
286
+ .google-logo {
287
+ font-size: 120px;
288
+ }
289
+
290
+ .video-thumbnail {
291
+ width: 120px;
292
+ height: 80px;
293
+ }
294
+
295
+ .play-button {
296
+ width: 40px;
297
+ height: 40px;
298
+ }
299
+
300
+ .play-button i {
301
+ font-size: 20px;
302
+ }
303
+
304
+ .search-buttons {
305
+ flex-direction: column;
306
+ gap: 10px;
307
+ }
308
+
309
+ .search-button {
310
+ width: 100%;
311
+ text-align: center;
312
+ }
313
+ }
314
+
315
+ @media (max-width: 480px) {
316
+ .google-logo {
317
+ font-size: 90px;
318
+ }
319
+
320
+ .video-thumbnail {
321
+ width: 90px;
322
+ height: 60px;
323
+ }
324
+
325
+ .play-button {
326
+ width: 30px;
327
+ height: 30px;
328
+ }
329
+
330
+ .play-button i {
331
+ font-size: 16px;
332
+ }
333
+ }
334
+ </style>
335
+ </head>
336
+ <body>
337
+ <div class="header">
338
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a>
339
+ <div class="share-icon">
340
+ <i class="fas fa-share-alt"></i>
341
+ </div>
342
+ </div>
343
+
344
+ <div class="logo-container">
345
+ <div class="google-logo">
346
+ <span class="g">G</span>
347
+ <span class="o">o</span>
348
+ <span class="o">o</span>
349
+ <span class="g">g</span>
350
+ <span class="l">l</span>
351
+ <span class="e">e</span>
352
+ </div>
353
+ <div class="video-thumbnail">
354
+ <img src="https://picsum.photos/seed/sunset/180/120.jpg" alt="Video thumbnail">
355
+ <div class="play-button">
356
+ <i class="fas fa-play"></i>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="search-container">
362
+ <div class="search-bar">
363
+ <button class="add-tab">
364
+ <i class="fas fa-plus"></i>
365
+ </button>
366
+ <input type="text" class="search-input" placeholder="Search Google or type a URL">
367
+ <div class="search-icons">
368
+ <div class="search-icon">
369
+ <i class="fas fa-microphone"></i>
370
+ </div>
371
+ <div class="search-icon">
372
+ <i class="fas fa-cog"></i>
373
+ </div>
374
+ <div class="ai-mode">
375
+ <i class="fas fa-magic"></i>
376
+ <span class="ai-mode-text">AI Mode</span>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="search-buttons">
383
+ <button class="search-button google-search">Google Search</button>
384
+ <button class="search-button im-feeling-lucky">I'm Feeling Lucky</button>
385
+ </div>
386
+
387
+ <div class="footer">
388
+ Want to know what the world searched for in 2025?
389
+ <i class="fas fa-question-circle"></i>
390
+ </div>
391
+
392
+ <script>
393
+ // Add interactivity if needed
394
+ document.querySelector('.play-button').addEventListener('click', function() {
395
+ alert('Video would play here');
396
+ });
397
+
398
+ document.querySelector('.ai-mode').addEventListener('click', function() {
399
+ alert('AI Mode activated');
400
+ });
401
+
402
+ document.querySelector('.share-icon').addEventListener('click', function() {
403
+ alert('Share functionality would open here');
404
+ });
405
+
406
+ document.querySelector('.built-with').addEventListener('click', function(e) {
407
+ e.preventDefault();
408
+ window.open('https://huggingface.co/spaces/akhaliq/anycoder', '_blank');
409
+ });
410
+ </script>
411
+ </body>
412
+ </html>