Hugging Face's logo

Spaces:
akhaliq
/
anycoder-coffee-music
Running

App Files Community
akhaliq HF Staff commited on
Commit
2ff11be
·
verified ·
1 Parent(s): 84f2f29

Upload folder using huggingface_hub

Browse files
Files changed (3) hide show
  1. assets/css/styles.css +325 -0
  2. assets/js/script.js +29 -0
  3. index.html +115 -19
assets/css/styles.css ADDED
@@ -0,0 +1,325 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary: #2c3e50;
3
+ --secondary: #e67e22;
4
+ --light: #ecf0f1;
5
+ --dark: #111;
6
+ --text: #333;
7
+ --white: #fff;
8
+ --highlight: #3498db;
9
+ }
10
+
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ html {
18
+ scroll-behavior: smooth;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Roboto', sans-serif;
23
+ line-height: 1.6;
24
+ color: var(--text);
25
+ background-color: var(--white);
26
+ }
27
+
28
+ .container {
29
+ width: 90%;
30
+ max-width: 1200px;
31
+ margin: 0 auto;
32
+ padding: 0 20px;
33
+ }
34
+
35
+ h1, h2, h3 {
36
+ font-family: 'Source Code Pro', monospace;
37
+ margin-bottom: 1rem;
38
+ color: var(--primary);
39
+ }
40
+
41
+ h1 {
42
+ font-size: 2.5rem;
43
+ }
44
+
45
+ h2 {
46
+ font-size: 2rem;
47
+ text-align: center;
48
+ margin-bottom: 2rem;
49
+ position: relative;
50
+ padding-bottom: 1rem;
51
+ }
52
+
53
+ h2::after {
54
+ content: '';
55
+ position: absolute;
56
+ bottom: 0;
57
+ left: 50%;
58
+ transform: translateX(-50%);
59
+ width: 50px;
60
+ height: 3px;
61
+ background-color: var(--secondary);
62
+ }
63
+
64
+ .highlight {
65
+ color: var(--secondary);
66
+ }
67
+
68
+ a {
69
+ text-decoration: none;
70
+ color: var(--highlight);
71
+ transition: color 0.3s;
72
+ }
73
+
74
+ a:hover {
75
+ color: var(--secondary);
76
+ }
77
+
78
+ button {
79
+ cursor: pointer;
80
+ border: none;
81
+ padding: 0.8rem 1.5rem;
82
+ font-size: 1rem;
83
+ border-radius: 4px;
84
+ transition: all 0.3s;
85
+ }
86
+
87
+ .cta-button {
88
+ background-color: var(--secondary);
89
+ color: var(--white);
90
+ font-weight: 700;
91
+ margin-top: 1.5rem;
92
+ }
93
+
94
+ .cta-button:hover {
95
+ background-color: #d35400;
96
+ transform: translateY(-2px);
97
+ }
98
+
99
+ /* Header Styles */
100
+ header {
101
+ background-color: var(--primary);
102
+ color: var(--white);
103
+ padding: 1rem 0;
104
+ position: fixed;
105
+ width: 100%;
106
+ top: 0;
107
+ z-index: 100;
108
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
109
+ }
110
+
111
+ nav {
112
+ display: flex;
113
+ justify-content: space-between;
114
+ align-items: center;
115
+ }
116
+
117
+ .logo {
118
+ font-family: 'Source Code Pro', monospace;
119
+ font-size: 1.5rem;
120
+ font-weight: 700;
121
+ }
122
+
123
+ .logo span {
124
+ color: var(--secondary);
125
+ }
126
+
127
+ .nav-links {
128
+ display: flex;
129
+ list-style: none;
130
+ }
131
+
132
+ .nav-links li {
133
+ margin-left: 1.5rem;
134
+ }
135
+
136
+ .nav-links a {
137
+ color: var(--white);
138
+ font-family: 'Source Code Pro', monospace;
139
+ }
140
+
141
+ .nav-links a:hover {
142
+ color: var(--secondary);
143
+ }
144
+
145
+ .menu-toggle {
146
+ display: none;
147
+ background: none;
148
+ flex-direction: column;
149
+ justify-content: space-between;
150
+ height: 21px;
151
+ }
152
+
153
+ .bar {
154
+ width: 25px;
155
+ height: 3px;
156
+ background-color: var(--white);
157
+ border-radius: 3px;
158
+ }
159
+
160
+ /* Hero Section */
161
+ .hero {
162
+ height: 100vh;
163
+ display: flex;
164
+ align-items: center;
165
+ background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)), url('https://images.unsplash.com/photo-1559056199-641a0ac8b55e?ixlib=rb-4.0.3') center/cover no-repeat;
166
+ color: var(--white);
167
+ text-align: center;
168
+ }
169
+
170
+ .hero-content {
171
+ max-width: 800px;
172
+ margin: 0 auto;
173
+ }
174
+
175
+ .hero h1 {
176
+ font-size: 3rem;
177
+ color: var(--white);
178
+ margin-bottom: 1.5rem;
179
+ }
180
+
181
+ .hero p {
182
+ font-size: 1.2rem;
183
+ margin-bottom: 2rem;
184
+ }
185
+
186
+ /* Features Section */
187
+ .features {
188
+ padding: 5rem 0;
189
+ background-color: var(--light);
190
+ }
191
+
192
+ .feature-grid {
193
+ display: grid;
194
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
195
+ gap: 2rem;
196
+ }
197
+
198
+ .feature-card {
199
+ background-color: var(--white);
200
+ padding: 2rem;
201
+ border-radius: 8px;
202
+ text-align: center;
203
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
204
+ transition: transform 0.3s;
205
+ }
206
+
207
+ .feature-card:hover {
208
+ transform: translateY(-10px);
209
+ }
210
+
211
+ .feature-icon {
212
+ font-size: 2.5rem;
213
+ margin-bottom: 1rem;
214
+ }
215
+
216
+ /* Beans Section */
217
+ .beans {
218
+ padding: 5rem 0;
219
+ background-color: var(--white);
220
+ }
221
+
222
+ .beans-grid {
223
+ display: grid;
224
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
225
+ gap: 2rem;
226
+ }
227
+
228
+ .bean-card {
229
+ background-color: var(--light);
230
+ padding: 2rem;
231
+ border-radius: 8px;
232
+ text-align: center;
233
+ position: relative;
234
+ border: 2px solid transparent;
235
+ transition: all 0.3s;
236
+ }
237
+
238
+ .bean-card:hover {
239
+ border-color: var(--secondary);
240
+ }
241
+
242
+ .price {
243
+ display: block;
244
+ font-size: 1.5rem;
245
+ font-weight: 700;
246
+ color: var(--primary);
247
+ margin-top: 1rem;
248
+ font-family: 'Source Code Pro', monospace;
249
+ }
250
+
251
+ /* Footer */
252
+ footer {
253
+ background-color: var(--dark);
254
+ color: var(--white);
255
+ padding: 3rem 0 1rem;
256
+ }
257
+
258
+ .footer-logo {
259
+ font-family: 'Source Code Pro', monospace;
260
+ font-size: 1.8rem;
261
+ margin-bottom: 1rem;
262
+ text-align: center;
263
+ }
264
+
265
+ .footer-logo span {
266
+ color: var(--secondary);
267
+ }
268
+
269
+ .footer-content {
270
+ text-align: center;
271
+ }
272
+
273
+ .social-links {
274
+ margin: 1.5rem 0;
275
+ }
276
+
277
+ .social-links a {
278
+ color: var(--white);
279
+ margin: 0 1rem;
280
+ }
281
+
282
+ .social-links a:hover {
283
+ color: var(--secondary);
284
+ }
285
+
286
+ .copyright {
287
+ margin-top: 1.5rem;
288
+ font-size: 0.9rem;
289
+ color: #95a5a6;
290
+ }
291
+
292
+ /* Responsive Styles */
293
+ @media (max-width: 768px) {
294
+ h1 {
295
+ font-size: 2rem;
296
+ }
297
+
298
+ .hero h1 {
299
+ font-size: 2.5rem;
300
+ }
301
+
302
+ .menu-toggle {
303
+ display: flex;
304
+ }
305
+
306
+ .nav-links {
307
+ position: fixed;
308
+ top: 70px;
309
+ right: -100%;
310
+ flex-direction: column;
311
+ background-color: var(--primary);
312
+ width: 100%;
313
+ text-align: center;
314
+ transition: all 0.5s;
315
+ padding: 2rem 0;
316
+ }
317
+
318
+ .nav-links.active {
319
+ right: 0;
320
+ }
321
+
322
+ .nav-links li {
323
+ margin: 1rem 0;
324
+ }
325
+ }
assets/js/script.js ADDED
@@ -0,0 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ const menuToggle = document.getElementById('menu-toggle');
3
+ const navLinks = document.querySelector('.nav-links');
4
+
5
+ menuToggle.addEventListener('click', function() {
6
+ navLinks.classList.toggle('active');
7
+ });
8
+
9
+ // Close menu when clicking on a link
10
+ document.querySelectorAll('.nav-links a').forEach(link => {
11
+ link.addEventListener('click', () => {
12
+ navLinks.classList.remove('active');
13
+ });
14
+ });
15
+
16
+ // Smooth scrolling for anchor links
17
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
18
+ anchor.addEventListener('click', function(e) {
19
+ e.preventDefault();
20
+ const target = document.querySelector(this.getAttribute('href'));
21
+ if (target) {
22
+ window.scrollTo({
23
+ top: target.offsetTop - 70,
24
+ behavior: 'smooth'
25
+ });
26
+ }
27
+ });
28
+ });
29
+ });
index.html CHANGED
@@ -1,19 +1,115 @@
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
+ <meta name="description" content="Anycoder Coffee - Premium coffee for developers who code">
7
+ <title>Anycoder Coffee - Fuel Your Code</title>
8
+ <link rel="stylesheet" href="assets/css/styles.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Source+Code+Pro:wght@400;700&display=swap" rel="stylesheet">
12
+ </head>
13
+ <body>
14
+ <header>
15
+ <nav class="container">
16
+ <div class="logo">Anycoder<span>Coffee</span></div>
17
+ <ul class="nav-links">
18
+ <li><a href="#home">Home</a></li>
19
+ <li><a href="#beans">Beans</a></li>
20
+ <li><a href="#features">Features</a></li>
21
+ <li><a href="#contact">Contact</a></li>
22
+ </ul>
23
+ <button id="menu-toggle" class="menu-toggle">
24
+ <span class="bar"></span>
25
+ <span class="bar"></span>
26
+ <span class="bar"></span>
27
+ </button>
28
+ </nav>
29
+ </header>
30
+
31
+ <main>
32
+ <section id="home" class="hero">
33
+ <div class="container">
34
+ <div class="hero-content">
35
+ <h1>Coffee For Those Who <span className="highlight">Code</span></h1>
36
+ <p>Premium coffee crafted specifically for developers. Enhance focus, boost productivity, and fuel your brilliance one cup at a time.</p>
37
+ <button class="cta-button">Brew Your Perfect Cup</button>
38
+ </div>
39
+ <div class="anycoder-music" style="max-width:420px;margin:16px auto;padding:12px 16px;border:1px solid #e5e7eb;border-radius:12px;background:linear-gradient(180deg,#fafafa,#f3f4f6);box-shadow:0 2px 8px rgba(0,0,0,0.06)">
40
+ <div style="font-size:13px;color:#374151;margin-bottom:8px;display:flex;align-items:center;gap:6px">
41
+ <span>🎵 Generated music</span>
42
+ </div>
43
+ <audio controls autoplay loop style="width:100%;outline:none;">
44
+ <source src="https://huggingface.co/datasets/akhaliq/anycoder-media/resolve/main/audio/20250824_214408_e309d458_generated_music.mp3" type="audio/mpeg" />
45
+ Your browser does not support the audio element.
46
+ </audio>
47
+ </div>
48
+ </div>
49
+ </section>
50
+
51
+ <section id="features" class="features">
52
+ <div class="container">
53
+ <h2>Why Anycoder Coffee?</h2>
54
+ <div class="feature-grid">
55
+ <div class="feature-card">
56
+ <div class="feature-icon">⚡</div>
57
+ <h3>Enhanced Focus</h3>
58
+ <p>Specially blended to maintain mental clarity during long coding sessions.</p>
59
+ </div>
60
+ <div class="feature-card">
61
+ <div class="feature-icon">🧠</div>
62
+ <h3>Boost Creativity</h3>
63
+ <p>Unlock new solutions and innovative thinking with every cup.</p>
64
+ </div>
65
+ <div class="feature-card">
66
+ <div class="feature-icon">⏱️</div>
67
+ <h3>Sustained Energy</h3>
68
+ <p>No crash formula keeps you productive from first commit to final deployment.</p>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </section>
73
+
74
+ <section id="beans" class="beans">
75
+ <div class="container">
76
+ <h2>Our Developer Blends</h2>
77
+ <div class="beans-grid">
78
+ <div class="bean-card">
79
+ <h3>Debug Debug</h3>
80
+ <p>Dark roast with bold flavor to power through challenging bug fixes.</p>
81
+ <span class="price">$14.99</span>
82
+ </div>
83
+ <div class="bean-card">
84
+ <h3>Commit Commit</h3>
85
+ <p>Medium roast with smooth finish for those frequent commit moments.</p>
86
+ <span class="price">$12.99</span>
87
+ </div>
88
+ <div class="bean-card">
89
+ <h3>Deploy Deploy</h3>
90
+ <p>Light roast with bright notes to celebrate successful deployments.</p>
91
+ <span class="price">$13.99</span>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </section>
96
+ </main>
97
+
98
+ <footer id="contact">
99
+ <div class="container">
100
+ <div class="footer-content">
101
+ <div class="footer-logo">Anycoder<span>Coffee</span></div>
102
+ <p>Made with ❤️ for developers everywhere</p>
103
+ <div class="social-links">
104
+ <a href="#">Twitter</a>
105
+ <a href="#">GitHub</a>
106
+ <a href="#">Instagram</a>
107
+ </div>
108
+ <p class="copyright">&copy; 2023 Anycoder Coffee. All rights reserved.</p>
109
+ </div>
110
+ </div>
111
+ </footer>
112
+
113
+ <script src="assets/js/script.js"></script>
114
+ </body>
115
+ </html>