Hugging Face's logo

Spaces:
bdsmgdjfv
/
anycoder-e37012b8
Running

App Files Community
bdsmgdjfv commited on
Commit
95dfc02
ยท
verified ยท
1 Parent(s): 369afdc

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +563 -19
index.html CHANGED
@@ -1,19 +1,563 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ุชุทุจูŠู‚ ู†ุชูู„ูƒุณ</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #e50914;
11
+ --dark: #141414;
12
+ --light: #f3f3f3;
13
+ --gray: #999;
14
+ --transition: all 0.3s ease;
15
+ }
16
+
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ box-sizing: border-box;
21
+ font-family: 'Arial', sans-serif;
22
+ }
23
+
24
+ body {
25
+ background-color: var(--dark);
26
+ color: var(--light);
27
+ overflow-x: hidden;
28
+ }
29
+
30
+ /* Header */
31
+ header {
32
+ position: fixed;
33
+ top: 0;
34
+ left: 0;
35
+ width: 100%;
36
+ z-index: 100;
37
+ padding: 20px 50px;
38
+ display: flex;
39
+ justify-content: space-between;
40
+ align-items: center;
41
+ background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
42
+ transition: var(--transition);
43
+ }
44
+
45
+ header.scrolled {
46
+ background-color: var(--dark);
47
+ }
48
+
49
+ .logo {
50
+ height: 40px;
51
+ }
52
+
53
+ .logo img {
54
+ height: 100%;
55
+ }
56
+
57
+ .nav-links {
58
+ display: flex;
59
+ gap: 20px;
60
+ }
61
+
62
+ .nav-links a {
63
+ color: var(--light);
64
+ text-decoration: none;
65
+ font-size: 14px;
66
+ transition: var(--transition);
67
+ }
68
+
69
+ .nav-links a:hover {
70
+ color: var(--gray);
71
+ }
72
+
73
+ .user-menu {
74
+ display: flex;
75
+ align-items: center;
76
+ gap: 20px;
77
+ }
78
+
79
+ .search-box {
80
+ position: relative;
81
+ }
82
+
83
+ .search-box input {
84
+ background-color: rgba(0,0,0,0.5);
85
+ border: 1px solid var(--gray);
86
+ color: var(--light);
87
+ padding: 5px 10px;
88
+ border-radius: 4px;
89
+ width: 0;
90
+ opacity: 0;
91
+ transition: var(--transition);
92
+ }
93
+
94
+ .search-box.active input {
95
+ width: 200px;
96
+ opacity: 1;
97
+ }
98
+
99
+ .search-box i {
100
+ cursor: pointer;
101
+ }
102
+
103
+ .profile {
104
+ display: flex;
105
+ align-items: center;
106
+ gap: 10px;
107
+ }
108
+
109
+ .profile img {
110
+ width: 32px;
111
+ height: 32px;
112
+ border-radius: 4px;
113
+ }
114
+
115
+ /* Hero Section */
116
+ .hero {
117
+ height: 100vh;
118
+ position: relative;
119
+ background: linear-gradient(to top, var(--dark) 0%, transparent 100%);
120
+ }
121
+
122
+ .hero::before {
123
+ content: '';
124
+ position: absolute;
125
+ top: 0;
126
+ left: 0;
127
+ width: 100%;
128
+ height: 100%;
129
+ background: url('https://assets.nflxext.com/ffe/siteui/vlv3/9d3533b2-0e2b-40b2-95e0-ecd7979cc88b/a3873901-5b7c-46eb-b9fa-12fea5197bd3/EG-en-20240311-popsignuptwoweeks-perspective_alpha_website_large.jpg') no-repeat center center/cover;
130
+ z-index: -1;
131
+ }
132
+
133
+ .hero-content {
134
+ position: absolute;
135
+ bottom: 20%;
136
+ left: 50px;
137
+ max-width: 600px;
138
+ }
139
+
140
+ .hero-content h1 {
141
+ font-size: 3rem;
142
+ margin-bottom: 20px;
143
+ }
144
+
145
+ .hero-content p {
146
+ font-size: 1.2rem;
147
+ margin-bottom: 20px;
148
+ }
149
+
150
+ .hero-buttons {
151
+ display: flex;
152
+ gap: 10px;
153
+ }
154
+
155
+ .btn {
156
+ padding: 10px 25px;
157
+ border-radius: 4px;
158
+ border: none;
159
+ font-weight: bold;
160
+ cursor: pointer;
161
+ transition: var(--transition);
162
+ display: flex;
163
+ align-items: center;
164
+ gap: 10px;
165
+ }
166
+
167
+ .btn-primary {
168
+ background-color: var(--primary);
169
+ color: var(--light);
170
+ }
171
+
172
+ .btn-secondary {
173
+ background-color: rgba(109, 109, 110, 0.7);
174
+ color: var(--light);
175
+ }
176
+
177
+ .btn:hover {
178
+ opacity: 0.8;
179
+ }
180
+
181
+ /* Content Sections */
182
+ .content {
183
+ padding: 50px;
184
+ margin-top: -100px;
185
+ position: relative;
186
+ z-index: 10;
187
+ }
188
+
189
+ .section {
190
+ margin-bottom: 50px;
191
+ }
192
+
193
+ .section-title {
194
+ font-size: 1.5rem;
195
+ margin-bottom: 20px;
196
+ }
197
+
198
+ .carousel {
199
+ display: flex;
200
+ gap: 10px;
201
+ overflow-x: auto;
202
+ scroll-snap-type: x mandatory;
203
+ scrollbar-width: none;
204
+ padding-bottom: 20px;
205
+ }
206
+
207
+ .carousel::-webkit-scrollbar {
208
+ display: none;
209
+ }
210
+
211
+ .movie-card {
212
+ flex: 0 0 auto;
213
+ width: 200px;
214
+ scroll-snap-align: start;
215
+ position: relative;
216
+ transition: var(--transition);
217
+ }
218
+
219
+ .movie-card:hover {
220
+ transform: scale(1.05);
221
+ z-index: 20;
222
+ }
223
+
224
+ .movie-card img {
225
+ width: 100%;
226
+ border-radius: 4px;
227
+ }
228
+
229
+ .movie-info {
230
+ position: absolute;
231
+ bottom: 0;
232
+ left: 0;
233
+ right: 0;
234
+ background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
235
+ padding: 20px 10px;
236
+ opacity: 0;
237
+ transition: var(--transition);
238
+ }
239
+
240
+ .movie-card:hover .movie-info {
241
+ opacity: 1;
242
+ }
243
+
244
+ .movie-info h3 {
245
+ font-size: 16px;
246
+ margin-bottom: 5px;
247
+ }
248
+
249
+ .movie-info p {
250
+ font-size: 12px;
251
+ color: var(--gray);
252
+ }
253
+
254
+ /* Footer */
255
+ footer {
256
+ background-color: var(--dark);
257
+ padding: 50px;
258
+ text-align: center;
259
+ color: var(--gray);
260
+ font-size: 14px;
261
+ }
262
+
263
+ .footer-links {
264
+ display: flex;
265
+ justify-content: center;
266
+ flex-wrap: wrap;
267
+ gap: 20px;
268
+ margin-bottom: 20px;
269
+ }
270
+
271
+ .footer-links a {
272
+ color: var(--gray);
273
+ text-decoration: none;
274
+ }
275
+
276
+ .footer-links a:hover {
277
+ text-decoration: underline;
278
+ }
279
+
280
+ .built-with {
281
+ margin-top: 20px;
282
+ }
283
+
284
+ .built-with a {
285
+ color: var(--primary);
286
+ text-decoration: none;
287
+ }
288
+
289
+ /* Responsive */
290
+ @media (max-width: 768px) {
291
+ header {
292
+ padding: 20px;
293
+ }
294
+
295
+ .hero-content {
296
+ left: 20px;
297
+ max-width: 80%;
298
+ }
299
+
300
+ .hero-content h1 {
301
+ font-size: 2rem;
302
+ }
303
+
304
+ .hero-content p {
305
+ font-size: 1rem;
306
+ }
307
+
308
+ .content {
309
+ padding: 20px;
310
+ }
311
+
312
+ .movie-card {
313
+ width: 150px;
314
+ }
315
+ }
316
+
317
+ @media (max-width: 480px) {
318
+ .nav-links {
319
+ display: none;
320
+ }
321
+
322
+ .hero-content {
323
+ text-align: center;
324
+ left: 50%;
325
+ transform: translateX(-50%);
326
+ }
327
+
328
+ .hero-buttons {
329
+ flex-direction: column;
330
+ }
331
+
332
+ .section-title {
333
+ font-size: 1.2rem;
334
+ }
335
+
336
+ .movie-card {
337
+ width: 120px;
338
+ }
339
+ }
340
+ </style>
341
+ </head>
342
+ <body>
343
+ <header>
344
+ <div class="logo">
345
+ <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" alt="Netflix Logo">
346
+ </div>
347
+ <nav class="nav-links">
348
+ <a href="#">ุงู„ุฑุฆูŠุณูŠุฉ</a>
349
+ <a href="#">ู…ุณู„ุณู„ุงุช</a>
350
+ <a href="#">ุฃูู„ุงู…</a>
351
+ <a href="#">ุงู„ู…ุญุชูˆู‰ ุงู„ุฌุฏูŠุฏ</a>
352
+ <a href="#">ู‚ุงุฆู…ุชูŠ</a>
353
+ </nav>
354
+ <div class="user-menu">
355
+ <div class="search-box">
356
+ <i class="fas fa-search"></i>
357
+ <input type="text" placeholder="ุจุญุซ...">
358
+ </div>
359
+ <div class="profile">
360
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile">
361
+ <i class="fas fa-caret-down"></i>
362
+ </div>
363
+ </div>
364
+ </header>
365
+
366
+ <section class="hero">
367
+ <div class="hero-content">
368
+ <h1>ู…ุณู„ุณู„ ุงู„ุญูุฑุฉ</h1>
369
+ <p>ุชุฏูˆุฑ ุฃุญุฏุงุซ ุงู„ู…ุณู„ุณู„ ุญูˆู„ ุนุงุฆู„ุฉ "ูƒูˆุดูˆูุงู„ูŠ" ุงู„ุชูŠ ุชุณูŠุทุฑ ุนู„ู‰ ุญูŠ "ุงู„ุญูุฑุฉ" ููŠ ุฅุณุทู†ุจูˆู„ุŒ ูˆู…ุง ูŠุญุฏุซ ุนู†ุฏู…ุง ูŠู‚ุฑุฑ ุดุงุจ ูŠุฏุนู‰ "ูŠุงู…ุงุฌ" ุงู„ุงู†ุชู‚ุงู… ู…ู†ู‡ู….</p>
370
+ <div class="hero-buttons">
371
+ <button class="btn btn-primary"><i class="fas fa-play"></i> ุชุดุบูŠู„</button>
372
+ <button class="btn btn-secondary"><i class="fas fa-info-circle"></i> ู…ุนู„ูˆู…ุงุช</button>
373
+ </div>
374
+ </div>
375
+ </section>
376
+
377
+ <main class="content">
378
+ <section class="section">
379
+ <h2 class="section-title">ุงู„ู…ุณู„ุณู„ุงุช ุงู„ุนุฑุจูŠุฉ</h2>
380
+ <div class="carousel">
381
+ <div class="movie-card">
382
+ <img src="https://via.placeholder.com/200x300?text=ู…ุณู„ุณู„+1" alt="ู…ุณู„ุณู„ 1">
383
+ <div class="movie-info">
384
+ <h3>ู…ุณู„ุณู„ 1</h3>
385
+ <p>2023 | ุฏุฑุงู…ุง</p>
386
+ </div>
387
+ </div>
388
+ <div class="movie-card">
389
+ <img src="https://via.placeholder.com/200x300?text=ู…ุณู„ุณู„+2" alt="ู…ุณู„ุณู„ 2">
390
+ <div class="movie-info">
391
+ <h3>ู…ุณู„ุณู„ 2</h3>
392
+ <p>2023 | ุฃูƒุดู†</p>
393
+ </div>
394
+ </div>
395
+ <div class="movie-card">
396
+ <img src="https://via.placeholder.com/200x300?text=ู…ุณู„ุณู„+3" alt="ู…ุณู„ุณู„ 3">
397
+ <div class="movie-info">
398
+ <h3>ู…ุณู„ุณู„ 3</h3>
399
+ <p>2023 | ูƒูˆู…ูŠุฏูŠ</p>
400
+ </div>
401
+ </div>
402
+ <div class="movie-card">
403
+ <img src="https://via.placeholder.com/200x300?text=ู…ุณู„ุณู„+4" alt="ู…ุณู„ุณู„ 4">
404
+ <div class="movie-info">
405
+ <h3>ู…ุณู„ุณู„ 4</h3>
406
+ <p>2023 | ุฑูˆู…ุงู†ุณูŠ</p>
407
+ </div>
408
+ </div>
409
+ <div class="movie-card">
410
+ <img src="https://via.placeholder.com/200x300?text=ู…ุณู„ุณู„+5" alt="ู…ุณู„ุณู„ 5">
411
+ <div class="movie-info">
412
+ <h3>ู…ุณู„ุณู„ 5</h3>
413
+ <p>2023 | ุชุดูˆูŠู‚</p>
414
+ </div>
415
+ </div>
416
+ <div class="movie-card">
417
+ <img src="https://via.placeholder.com/200x300?text=ู…ุณู„ุณู„+6" alt="ู…ุณู„ุณู„ 6">
418
+ <div class="movie-info">
419
+ <h3>ู…ุณู„ุณู„ 6</h3>
420
+ <p>2023 | ุชุงุฑูŠุฎูŠ</p>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </section>
425
+
426
+ <section class="section">
427
+ <h2 class="section-title">ุงู„ุฃูู„ุงู… ุงู„ุนุฑุจูŠุฉ</h2>
428
+ <div class="carousel">
429
+ <div class="movie-card">
430
+ <img src="https://via.placeholder.com/200x300?text=ููŠู„ู…+1" alt="ููŠู„ู… 1">
431
+ <div class="movie-info">
432
+ <h3>ููŠู„ู… 1</h3>
433
+ <p>2023 | ุฏุฑุงู…ุง</p>
434
+ </div>
435
+ </div>
436
+ <div class="movie-card">
437
+ <img src="https://via.placeholder.com/200x300?text=ููŠู„ู…+2" alt="ููŠู„ู… 2">
438
+ <div class="movie-info">
439
+ <h3>ููŠู„ู… 2</h3>
440
+ <p>2023 | ุฃูƒุดู†</p>
441
+ </div>
442
+ </div>
443
+ <div class="movie-card">
444
+ <img src="https://via.placeholder.com/200x300?text=ููŠู„ู…+3" alt="ููŠู„ู… 3">
445
+ <div class="movie-info">
446
+ <h3>ููŠู„ู… 3</h3>
447
+ <p>2023 | ูƒูˆู…ูŠุฏูŠ</p>
448
+ </div>
449
+ </div>
450
+ <div class="movie-card">
451
+ <img src="https://via.placeholder.com/200x300?text=ููŠู„ู…+4" alt="ููŠู„ู… 4">
452
+ <div class="movie-info">
453
+ <h3>ููŠู„ู… 4</h3>
454
+ <p>2023 | ุฑูˆู…ุงู†ุณูŠ</p>
455
+ </div>
456
+ </div>
457
+ <div class="movie-card">
458
+ <img src="https://via.placeholder.com/200x300?text=ููŠู„ู…+5" alt="ููŠู„ู… 5">
459
+ <div class="movie-info">
460
+ <h3>ููŠู„ู… 5</h3>
461
+ <p>2023 | ุชุดูˆูŠู‚</p>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </section>
466
+
467
+ <section class="section">
468
+ <h2 class="section-title">ุงู„ุฃูƒุซุฑ ู…ุดุงู‡ุฏุฉ</h2>
469
+ <div class="carousel">
470
+ <div class="movie-card">
471
+ <img src="https://via.placeholder.com/200x300?text=ุงู„ุฃูƒุซุฑ+1" alt="ุงู„ุฃูƒุซุฑ 1">
472
+ <div class="movie-info">
473
+ <h3>ุงู„ุฃูƒุซุฑ 1</h3>
474
+ <p>2023 | ุฏุฑุงู…ุง</p>
475
+ </div>
476
+ </div>
477
+ <div class="movie-card">
478
+ <img src="https://via.placeholder.com/200x300?text=ุงู„ุฃูƒุซุฑ+2" alt="ุงู„ุฃูƒุซุฑ 2">
479
+ <div class="movie-info">
480
+ <h3>ุงู„ุฃูƒุซุฑ 2</h3>
481
+ <p>2023 | ุฃูƒุดู†</p>
482
+ </div>
483
+ </div>
484
+ <div class="movie-card">
485
+ <img src="https://via.placeholder.com/200x300?text=ุงู„ุฃูƒุซุฑ+3" alt="ุงู„ุฃูƒุซุฑ 3">
486
+ <div class="movie-info">
487
+ <h3>ุงู„ุฃูƒุซุฑ 3</h3>
488
+ <p>2023 | ูƒูˆู…ูŠุฏูŠ</p>
489
+ </div>
490
+ </div>
491
+ <div class="movie-card">
492
+ <img src="https://via.placeholder.com/200x300?text=ุงู„ุฃูƒุซุฑ+4" alt="ุงู„ุฃูƒุซุฑ 4">
493
+ <div class="movie-info">
494
+ <h3>ุงู„ุฃูƒุซุฑ 4</h3>
495
+ <p>2023 | ุฑูˆู…ุงู†ุณูŠ</p>
496
+ </div>
497
+ </div>
498
+ <div class="movie-card">
499
+ <img src="https://via.placeholder.com/200x300?text=ุงู„ุฃูƒุซุฑ+5" alt="ุงู„ุฃูƒุซุฑ 5">
500
+ <div class="movie-info">
501
+ <h3>ุงู„ุฃูƒุซุฑ 5</h3>
502
+ <p>2023 | ุชุดูˆูŠู‚</p>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </section>
507
+ </main>
508
+
509
+ <footer>
510
+ <div class="footer-links">
511
+ <a href="#">ุญูˆู„ ู†ุชูู„ูƒุณ</a>
512
+ <a href="#">ู…ุฑูƒุฒ ุงู„ู…ุณุงุนุฏุฉ</a>
513
+ <a href="#">ุงู„ูˆุธุงุฆู</a>
514
+ <a href="#">ุดุฑูˆุท ุงู„ุงุณุชุฎุฏุงู…</a>
515
+ <a href="#">ุฎุตูˆุตูŠุชู†ุง</a>
516
+ <a href="#">ุชูุถูŠู„ุงุช ุงู„ูƒูˆูƒูŠุฒ</a>
517
+ <a href="#">ู…ุนู„ูˆู…ุงุช ุงู„ุดุฑูƒุฉ</a>
518
+ </div>
519
+ <p>ยฉ 2023 Netflix, Inc.</p>
520
+ <div class="built-with">
521
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
522
+ </div>
523
+ </footer>
524
+
525
+ <script>
526
+ // Header scroll effect
527
+ window.addEventListener('scroll', () => {
528
+ const header = document.querySelector('header');
529
+ if (window.scrollY > 100) {
530
+ header.classList.add('scrolled');
531
+ } else {
532
+ header.classList.remove('scrolled');
533
+ }
534
+ });
535
+
536
+ // Search box toggle
537
+ const searchIcon = document.querySelector('.search-box i');
538
+ const searchInput = document.querySelector('.search-box input');
539
+
540
+ searchIcon.addEventListener('click', () => {
541
+ document.querySelector('.search-box').classList.toggle('active');
542
+ if (document.querySelector('.search-box').classList.contains('active')) {
543
+ searchInput.focus();
544
+ }
545
+ });
546
+
547
+ // Movie carousel hover effect
548
+ const movieCards = document.querySelectorAll('.movie-card');
549
+ movieCards.forEach(card => {
550
+ card.addEventListener('mouseenter', () => {
551
+ card.style.zIndex = '20';
552
+ });
553
+ card.addEventListener('mouseleave', () => {
554
+ card.style.zIndex = '1';
555
+ });
556
+ });
557
+
558
+ // RTL direction for Arabic content
559
+ document.documentElement.setAttribute('dir', 'rtl');
560
+ document.documentElement.setAttribute('lang', 'ar');
561
+ </script>
562
+ </body>
563
+ </html>