Hugging Face's logo

Spaces:
gurramsaikumar
/
anycoder-1bbe73e2
Running

App Files Community
gurramsaikumar commited on
Commit
e6dc9f7
·
verified ·
1 Parent(s): 3683a21

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +352 -19
index.html CHANGED
@@ -1,19 +1,352 @@
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>RythuBox - Built with anycoder</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-color: #2e8b57;
11
+ --secondary-color: #3cb371;
12
+ --accent-color: #f5f5f5;
13
+ --text-color: #333;
14
+ --light-text: #666;
15
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16
+ --transition: all 0.3s ease;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
+ line-height: 1.6;
28
+ color: var(--text-color);
29
+ background-color: var(--accent-color);
30
+ display: flex;
31
+ flex-direction: column;
32
+ min-height: 100vh;
33
+ }
34
+
35
+ header {
36
+ background-color: white;
37
+ box-shadow: var(--shadow);
38
+ padding: 1rem 2rem;
39
+ display: flex;
40
+ justify-content: space-between;
41
+ align-items: center;
42
+ position: sticky;
43
+ top: 0;
44
+ z-index: 100;
45
+ }
46
+
47
+ .logo-container {
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 1rem;
51
+ }
52
+
53
+ .logo {
54
+ width: 50px;
55
+ height: 50px;
56
+ background-color: var(--primary-color);
57
+ border-radius: 8px;
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: center;
61
+ color: white;
62
+ font-weight: bold;
63
+ font-size: 1.5rem;
64
+ position: relative;
65
+ overflow: hidden;
66
+ }
67
+
68
+ .logo::before {
69
+ content: '';
70
+ position: absolute;
71
+ top: -10px;
72
+ left: -10px;
73
+ width: 70px;
74
+ height: 70px;
75
+ background: linear-gradient(45deg, transparent, transparent 40%, var(--secondary-color) 40%, var(--secondary-color) 60%, transparent 60%);
76
+ border-radius: 50%;
77
+ transform: rotate(45deg);
78
+ opacity: 0.2;
79
+ }
80
+
81
+ .logo-text {
82
+ font-size: 1.5rem;
83
+ font-weight: 700;
84
+ color: var(--primary-color);
85
+ }
86
+
87
+ .anycoder-link {
88
+ color: var(--light-text);
89
+ text-decoration: none;
90
+ font-size: 0.9rem;
91
+ transition: var(--transition);
92
+ }
93
+
94
+ .anycoder-link:hover {
95
+ color: var(--primary-color);
96
+ }
97
+
98
+ main {
99
+ flex: 1;
100
+ display: flex;
101
+ flex-direction: column;
102
+ align-items: center;
103
+ justify-content: center;
104
+ padding: 2rem;
105
+ text-align: center;
106
+ max-width: 1200px;
107
+ margin: 0 auto;
108
+ width: 100%;
109
+ }
110
+
111
+ .hero-section {
112
+ margin-bottom: 3rem;
113
+ }
114
+
115
+ .hero-logo {
116
+ width: 150px;
117
+ height: 150px;
118
+ background-color: var(--primary-color);
119
+ border-radius: 12px;
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ color: white;
124
+ font-weight: bold;
125
+ font-size: 3rem;
126
+ margin: 0 auto 1.5rem;
127
+ position: relative;
128
+ overflow: hidden;
129
+ box-shadow: var(--shadow);
130
+ transition: var(--transition);
131
+ }
132
+
133
+ .hero-logo:hover {
134
+ transform: scale(1.05);
135
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
136
+ }
137
+
138
+ .hero-logo::before {
139
+ content: '';
140
+ position: absolute;
141
+ top: -20px;
142
+ left: -20px;
143
+ width: 190px;
144
+ height: 190px;
145
+ background: linear-gradient(45deg, transparent, transparent 40%, var(--secondary-color) 40%, var(--secondary-color) 60%, transparent 60%);
146
+ border-radius: 50%;
147
+ transform: rotate(45deg);
148
+ opacity: 0.2;
149
+ }
150
+
151
+ h1 {
152
+ font-size: 2.5rem;
153
+ margin-bottom: 1rem;
154
+ color: var(--primary-color);
155
+ }
156
+
157
+ .tagline {
158
+ font-size: 1.2rem;
159
+ color: var(--light-text);
160
+ max-width: 600px;
161
+ margin: 0 auto 2rem;
162
+ }
163
+
164
+ .features {
165
+ display: grid;
166
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
167
+ gap: 2rem;
168
+ width: 100%;
169
+ margin-top: 2rem;
170
+ }
171
+
172
+ .feature-card {
173
+ background: white;
174
+ border-radius: 8px;
175
+ padding: 2rem;
176
+ box-shadow: var(--shadow);
177
+ transition: var(--transition);
178
+ text-align: left;
179
+ }
180
+
181
+ .feature-card:hover {
182
+ transform: translateY(-5px);
183
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
184
+ }
185
+
186
+ .feature-icon {
187
+ font-size: 2.5rem;
188
+ color: var(--primary-color);
189
+ margin-bottom: 1rem;
190
+ }
191
+
192
+ .feature-card h3 {
193
+ margin-bottom: 0.5rem;
194
+ color: var(--primary-color);
195
+ }
196
+
197
+ footer {
198
+ background-color: var(--primary-color);
199
+ color: white;
200
+ text-align: center;
201
+ padding: 2rem;
202
+ margin-top: auto;
203
+ }
204
+
205
+ .social-links {
206
+ display: flex;
207
+ justify-content: center;
208
+ gap: 1.5rem;
209
+ margin-bottom: 1rem;
210
+ }
211
+
212
+ .social-links a {
213
+ color: white;
214
+ font-size: 1.5rem;
215
+ transition: var(--transition);
216
+ }
217
+
218
+ .social-links a:hover {
219
+ color: var(--secondary-color);
220
+ transform: translateY(-3px);
221
+ }
222
+
223
+ .copyright {
224
+ font-size: 0.9rem;
225
+ opacity: 0.8;
226
+ }
227
+
228
+ @media (max-width: 768px) {
229
+ header {
230
+ flex-direction: column;
231
+ gap: 1rem;
232
+ padding: 1rem;
233
+ }
234
+
235
+ .logo-container {
236
+ flex-direction: column;
237
+ gap: 0.5rem;
238
+ }
239
+
240
+ h1 {
241
+ font-size: 2rem;
242
+ }
243
+
244
+ .tagline {
245
+ font-size: 1rem;
246
+ }
247
+
248
+ .hero-logo {
249
+ width: 120px;
250
+ height: 120px;
251
+ font-size: 2.5rem;
252
+ }
253
+ }
254
+
255
+ @media (max-width: 480px) {
256
+ .hero-logo {
257
+ width: 100px;
258
+ height: 100px;
259
+ font-size: 2rem;
260
+ }
261
+
262
+ h1 {
263
+ font-size: 1.8rem;
264
+ }
265
+
266
+ .features {
267
+ grid-template-columns: 1fr;
268
+ }
269
+ }
270
+ </style>
271
+ </head>
272
+ <body>
273
+ <header>
274
+ <div class="logo-container">
275
+ <div class="logo">RB</div>
276
+ <div class="logo-text">RythuBox</div>
277
+ </div>
278
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
279
+ <i class="fas fa-code"></i> Built with anycoder
280
+ </a>
281
+ </header>
282
+
283
+ <main>
284
+ <section class="hero-section">
285
+ <div class="hero-logo">RB</div>
286
+ <h1>Welcome to RythuBox</h1>
287
+ <p class="tagline">Empowering farmers with innovative solutions for better agriculture and sustainable farming practices.</p>
288
+ </section>
289
+
290
+ <section class="features">
291
+ <div class="feature-card">
292
+ <div class="feature-icon">
293
+ <i class="fas fa-seedling"></i>
294
+ </div>
295
+ <h3>Smart Farming</h3>
296
+ <p>Advanced agricultural solutions to maximize your yield with minimal resources.</p>
297
+ </div>
298
+
299
+ <div class="feature-card">
300
+ <div class="feature-icon">
301
+ <i class="fas fa-chart-line"></i>
302
+ </div>
303
+ <h3>Market Insights</h3>
304
+ <p>Real-time market data and analytics to help you make informed decisions.</p>
305
+ </div>
306
+
307
+ <div class="feature-card">
308
+ <div class="feature-icon">
309
+ <i class="fas fa-users"></i>
310
+ </div>
311
+ <h3>Community Support</h3>
312
+ <p>Connect with fellow farmers and experts to share knowledge and experiences.</p>
313
+ </div>
314
+ </section>
315
+ </main>
316
+
317
+ <footer>
318
+ <div class="social-links">
319
+ <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
320
+ <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
321
+ <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
322
+ <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
323
+ </div>
324
+ <p class="copyright">© 2023 RythuBox. All rights reserved.</p>
325
+ </footer>
326
+
327
+ <script>
328
+ // Simple animation for the logo on page load
329
+ document.addEventListener('DOMContentLoaded', function() {
330
+ const logo = document.querySelector('.hero-logo');
331
+ logo.style.transform = 'scale(0.8)';
332
+ logo.style.opacity = '0';
333
+
334
+ setTimeout(() => {
335
+ logo.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
336
+ logo.style.transform = 'scale(1)';
337
+ logo.style.opacity = '1';
338
+ }, 100);
339
+ });
340
+
341
+ // Add smooth scrolling for any anchor links
342
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
343
+ anchor.addEventListener('click', function (e) {
344
+ e.preventDefault();
345
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
346
+ behavior: 'smooth'
347
+ });
348
+ });
349
+ });
350
+ </script>
351
+ </body>
352
+ </html>