akhaliq HF Staff commited on
Commit
59f9cc6
·
verified ·
1 Parent(s): ceedff9

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +165 -19
index.html CHANGED
@@ -1,19 +1,165 @@
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>Anycoder Coffee Shop</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
+ }
14
+ body {
15
+ color: #333;
16
+ background-color: #f5f5f5;
17
+ line-height: 1.6;
18
+ }
19
+ header {
20
+ background-color: #5d4037;
21
+ color: white;
22
+ padding: 1rem;
23
+ text-align: center;
24
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
25
+ }
26
+ .hero {
27
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1554118811-1e0d582dbf1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
28
+ height: 60vh;
29
+ display: flex;
30
+ flex-direction: column;
31
+ justify-content: center;
32
+ align-items: center;
33
+ color: white;
34
+ text-align: center;
35
+ }
36
+ .hero h1 {
37
+ font-size: 3.5rem;
38
+ margin-bottom: 0.5rem;
39
+ }
40
+ .hero p {
41
+ font-size: 1.5rem;
42
+ max-width: 600px;
43
+ }
44
+ .menu-section {
45
+ padding: 3rem 1rem;
46
+ max-width: 1200px;
47
+ margin: 0 auto;
48
+ }
49
+ .menu-section h2 {
50
+ text-align: center;
51
+ margin-bottom: 2rem;
52
+ font-size: 2.5rem;
53
+ color: #5d4037;
54
+ }
55
+ .menu-grid {
56
+ display: grid;
57
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
58
+ gap: 2rem;
59
+ }
60
+ .menu-item {
61
+ background: white;
62
+ border-radius: 8px;
63
+ overflow: hidden;
64
+ box-shadow: 0 3px 10px rgba(0,0,0,0.1);
65
+ transition: transform 0.3s;
66
+ }
67
+ .menu-item:hover {
68
+ transform: translateY(-5px);
69
+ }
70
+ .menu-item img {
71
+ width: 100%;
72
+ height: 200px;
73
+ object-fit: cover;
74
+ }
75
+ .menu-content {
76
+ padding: 1.5rem;
77
+ }
78
+ .menu-content h3 {
79
+ margin-bottom: 0.5rem;
80
+ color: #5d4037;
81
+ }
82
+ .price {
83
+ color: #8d6e63;
84
+ font-weight: bold;
85
+ font-size: 1.2rem;
86
+ margin: 0.5rem 0;
87
+ }
88
+ .menu-content p {
89
+ color: #666;
90
+ font-size: 0.9rem;
91
+ }
92
+ footer {
93
+ background-color: #5d4037;
94
+ color: white;
95
+ text-align: center;
96
+ padding: 1.5rem;
97
+ margin-top: 2rem;
98
+ }
99
+ @media (max-width: 768px) {
100
+ .hero h1 {
101
+ font-size: 2.5rem;
102
+ }
103
+ .hero p {
104
+ font-size: 1.2rem;
105
+ }
106
+ }
107
+ </style>
108
+ </head>
109
+ <body>
110
+ <header>
111
+ <h1>Anycoder Coffee Shop</h1>
112
+ </header>
113
+
114
+ <section class="hero">
115
+ <h1>Welcome to Anycoder Coffee Shop</h1>
116
+ <p>Where code meets caffeine. Perfect brew for programmers.</p>
117
+ <div style="max-width: 800px; width: 100%; margin-top: 20px;">
118
+ <video controls autoplay muted loop playsinline style="max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; display: block;" onloadstart="this.style.backgroundColor='#f0f0f0'" onerror="this.style.display='none'; console.error('Video failed to load')"><source src="https://huggingface.co/datasets/akhaliq/anycoder-media/resolve/main/video/20250824_213358_68abd385_text_to_video_result.mp4" type="video/mp4" /><p style="text-align: center; color: #666;">Your browser does not support the video tag.</p></video>
119
+ </div>
120
+ </section>
121
+
122
+ <section class="menu-section">
123
+ <h2>Our Menu</h2>
124
+ <div class="menu-grid">
125
+ <div class="menu-item">
126
+ <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Espresso">
127
+ <div class="menu-content">
128
+ <h3>Espresso</h3>
129
+ <p>A strong shot of coffee to kickstart your coding session.</p>
130
+ <div class="price">$3.50</div>
131
+ </div>
132
+ </div>
133
+ <div class="menu-item">
134
+ <img src="https://images.unsplash.com/photo-1533134486753-c833f0ed4866?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Latte">
135
+ <div class="menu-content">
136
+ <h3>Latte</h3>
137
+ <p>Smooth espresso with steamed milk for a gentle caffeine boost.</p>
138
+ <div class="price">$4.50</div>
139
+ </div>
140
+ </div>
141
+ <div class="menu-item">
142
+ <img src="https://images.unsplash.com/photo-1562037372-9de9a79d0c57?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Cappuccino">
143
+ <div class="menu-content">
144
+ <h3>Cappuccino</h3>
145
+ <p>Equal parts espresso, steamed milk, and frothy foam.</p>
146
+ <div class="price">$4.00</div>
147
+ </div>
148
+ </div>
149
+ <div class="menu-item">
150
+ <img src="https://images.unsplash.com/photo-1525634873151-36d36ac3b9e3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Cold Brew">
151
+ <div class="menu-content">
152
+ <h3>Cold Brew</h3>
153
+ <p>Smooth, refreshing coffee steeped for hours, perfect for afternoon debugging.</p>
154
+ <div class="price">$5.00</div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <footer>
161
+ <p>&copy; 2023 Anycoder Coffee Shop. All rights reserved.</p>
162
+ <p>123 Developer Street, Code City CC 10101 | (123) 456-7890</p>
163
+ </footer>
164
+ </body>
165
+ </html>