Hugging Face's logo

Spaces:
kramp
/
m-e-b-riot-wall-revolution
Running

App Files Community
kramp HF Staff commited on
Commit
ef6e4b6
·
verified ·
1 Parent(s): f8cc97b

can you refactor it to use the svelte.js framrwork instead of custom elements?

Browse files
Files changed (5) hide show
  1. src/app.html +16 -0
  2. src/app.postcss +36 -0
  3. src/lib/components/Footer.svelte +47 -0
  4. src/lib/components/Navbar.svelte +92 -0
  5. src/routes/+page.svelte +248 -0
src/app.html ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>M.e.B - Punk Rock Revolution</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
10
+ %svelte.head%
11
+ </head>
12
+ <body class="font-['Roboto_Condensed']">
13
+ <div id="svelte">%svelte.body%</div>
14
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
15
+ </body>
16
+ </html>
src/app.postcss ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom styles */
2
+ @import 'tailwindcss/base';
3
+ @import 'tailwindcss/components';
4
+ @import 'tailwindcss/utilities';
5
+
6
+ /* Custom scrollbar */
7
+ ::-webkit-scrollbar {
8
+ width: 10px;
9
+ }
10
+
11
+ ::-webkit-scrollbar-track {
12
+ background: #1a1a1a;
13
+ }
14
+
15
+ ::-webkit-scrollbar-thumb {
16
+ background: #dc2626;
17
+ border-radius: 5px;
18
+ }
19
+
20
+ ::-webkit-scrollbar-thumb:hover {
21
+ background: #b91c1c;
22
+ }
23
+
24
+ /* Animation for elements */
25
+ @keyframes pulse {
26
+ 0%, 100% {
27
+ opacity: 1;
28
+ }
29
+ 50% {
30
+ opacity: 0.8;
31
+ }
32
+ }
33
+
34
+ .animate-pulse {
35
+ animation: pulse 2s infinite;
36
+ }
src/lib/components/Footer.svelte ADDED
@@ -0,0 +1,47 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```svelte
2
+ <script>
3
+ import { onMount } from 'svelte';
4
+ import feather from 'feather-icons';
5
+
6
+ onMount(() => {
7
+ feather.replace();
8
+ });
9
+ </script>
10
+
11
+ <style>
12
+ footer {
13
+ background: rgba(0, 0, 0, 0.9);
14
+ color: white;
15
+ padding: 2rem;
16
+ text-align: center;
17
+ border-top: 2px solid #dc2626;
18
+ }
19
+ .social-links {
20
+ display: flex;
21
+ justify-content: center;
22
+ gap: 1.5rem;
23
+ margin-bottom: 1.5rem;
24
+ }
25
+ .social-links a {
26
+ color: white;
27
+ transition: color 0.3s;
28
+ }
29
+ .social-links a:hover {
30
+ color: #dc2626;
31
+ }
32
+ .copyright {
33
+ font-size: 0.9rem;
34
+ opacity: 0.8;
35
+ }
36
+ </style>
37
+
38
+ <footer>
39
+ <div class="social-links">
40
+ <a href="#"><i data-feather="facebook"></i></a>
41
+ <a href="#"><i data-feather="instagram"></i></a>
42
+ <a href="#"><i data-feather="youtube"></i></a>
43
+ <a href="#"><i data-feather="music"></i></a>
44
+ </div>
45
+ <p class="copyright">&copy; {new Date().getFullYear()} M.e.B. All rights reserved. Made with anger and electricity.</p>
46
+ </footer>
47
+ ```
src/lib/components/Navbar.svelte ADDED
@@ -0,0 +1,92 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```svelte
2
+ <script>
3
+ import { onMount } from 'svelte';
4
+ import feather from 'feather-icons';
5
+
6
+ onMount(() => {
7
+ feather.replace();
8
+ });
9
+ </script>
10
+
11
+ <style>
12
+ nav {
13
+ background: rgba(0, 0, 0, 0.9);
14
+ padding: 1rem 2rem;
15
+ display: flex;
16
+ justify-content: space-between;
17
+ align-items: center;
18
+ position: fixed;
19
+ top: 0;
20
+ left: 0;
21
+ right: 0;
22
+ z-index: 1000;
23
+ border-bottom: 2px solid #dc2626;
24
+ }
25
+ .logo {
26
+ color: white;
27
+ font-weight: bold;
28
+ font-size: 1.5rem;
29
+ text-transform: uppercase;
30
+ letter-spacing: 2px;
31
+ }
32
+ .logo span {
33
+ color: #dc2626;
34
+ }
35
+ ul {
36
+ display: flex;
37
+ gap: 2rem;
38
+ list-style: none;
39
+ margin: 0;
40
+ padding: 0;
41
+ }
42
+ a {
43
+ color: white;
44
+ text-decoration: none;
45
+ text-transform: uppercase;
46
+ font-weight: bold;
47
+ letter-spacing: 1px;
48
+ position: relative;
49
+ padding: 0.5rem 0;
50
+ }
51
+ a:hover {
52
+ color: #dc2626;
53
+ }
54
+ a.active {
55
+ color: #dc2626;
56
+ }
57
+ a.active::after {
58
+ content: '';
59
+ position: absolute;
60
+ bottom: 0;
61
+ left: 0;
62
+ width: 100%;
63
+ height: 2px;
64
+ background: #dc2626;
65
+ }
66
+ .mobile-menu {
67
+ display: none;
68
+ }
69
+ @media (max-width: 768px) {
70
+ ul {
71
+ display: none;
72
+ }
73
+ .mobile-menu {
74
+ display: block;
75
+ }
76
+ }
77
+ </style>
78
+
79
+ <nav>
80
+ <div class="logo">M<span>.e</span>B</div>
81
+ <ul>
82
+ <li><a href="#home">Home</a></li>
83
+ <li><a href="#about">The Band</a></li>
84
+ <li><a href="#music">Music</a></li>
85
+ <li><a href="#shows">Shows</a></li>
86
+ <li><a href="#contact">Contact</a></li>
87
+ </ul>
88
+ <div class="mobile-menu">
89
+ <i data-feather="menu" class="text-white w-8 h-8"></i>
90
+ </div>
91
+ </nav>
92
+ ```
src/routes/+page.svelte ADDED
@@ -0,0 +1,248 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```svelte
2
+ <script>
3
+ import Navbar from '../lib/components/Navbar.svelte';
4
+ import Footer from '../lib/components/Footer.svelte';
5
+
6
+ // Data for the page
7
+ const bandMembers = [
8
+ {
9
+ name: 'Max "Shredder"',
10
+ role: 'Vocals/Guitar',
11
+ desc: 'The screaming heart of M.e.B',
12
+ img: 'http://static.photos/people/320x240/1'
13
+ },
14
+ {
15
+ name: 'Eli "Bash"',
16
+ role: 'Drums',
17
+ desc: 'Human metronome with anger issues',
18
+ img: 'http://static.photos/people/320x240/2'
19
+ },
20
+ {
21
+ name: 'Ben "Thunder"',
22
+ role: 'Bass',
23
+ desc: 'Provides the earthquake frequencies',
24
+ img: 'http://static.photos/people/320x240/3'
25
+ },
26
+ {
27
+ name: 'Lee "Spark"',
28
+ role: 'Guitar',
29
+ desc: 'Creates the lightning storms',
30
+ img: 'http://static.photos/people/320x240/4'
31
+ }
32
+ ];
33
+
34
+ const albums = [
35
+ {
36
+ title: 'Wall Breakers (2015)',
37
+ cover: 'http://static.photos/monochrome/640x360/1',
38
+ tracks: ['Broken Foundations', 'Riot Inside', 'Concrete Dreams', 'Noise Complaint']
39
+ },
40
+ {
41
+ title: 'Rebel Sound (2018)',
42
+ cover: 'http://static.photos/monochrome/640x360/2',
43
+ tracks: ['Destroy Rebuild', 'Last Warning', 'System Fail', 'Moshpit Anthem']
44
+ },
45
+ {
46
+ title: 'No Apologies (2022)',
47
+ cover: 'http://static.photos/monochrome/640x360/3',
48
+ tracks: ['No Apologies', 'Burn It Down', 'Last Stand', 'Final Warning']
49
+ }
50
+ ];
51
+
52
+ const pastShows = [
53
+ { date: 'June 15, 2023', venue: 'The Riot Club, NYC', note: 'Sold Out' },
54
+ { date: 'April 22, 2023', venue: 'Underground Arena, Chicago', note: 'Moshpit Mayhem' },
55
+ { date: 'March 8, 2023', venue: 'The Broken Amp, LA', note: 'Guitar Smashed' }
56
+ ];
57
+
58
+ const upcomingShows = [
59
+ { date: 'August 12, 2023', venue: 'The Basement, Austin', status: 'Tickets Available' },
60
+ { date: 'September 5, 2023', venue: 'Chaos Factory, Seattle', status: 'Tickets Available' },
61
+ { date: 'October 18, 2023', venue: 'Rebel Yell Festival, Denver', status: 'Limited Availability' }
62
+ ];
63
+ </script>
64
+
65
+ <style>
66
+ .broken-wall {
67
+ background-image: url('http://static.photos/textures/1200x630/7');
68
+ background-size: cover;
69
+ background-attachment: fixed;
70
+ position: relative;
71
+ }
72
+ .broken-wall::before {
73
+ content: '';
74
+ position: absolute;
75
+ top: 0;
76
+ left: 0;
77
+ right: 0;
78
+ bottom: 0;
79
+ background: rgba(0, 0, 0, 0.7);
80
+ }
81
+
82
+ section {
83
+ position: relative;
84
+ z-index: 10;
85
+ }
86
+
87
+ /* Add other styles from original CSS */
88
+ </style>
89
+
90
+ <div class="broken-wall text-white min-h-screen">
91
+ <Navbar />
92
+
93
+ <!-- Hero Section -->
94
+ <section class="relative py-32 px-6">
95
+ <div class="max-w-6xl mx-auto text-center">
96
+ <h1 class="text-6xl md:text-8xl font-bold mb-6 tracking-tight">M.e.B</h1>
97
+ <p class="text-xl md:text-2xl mb-10 font-mono uppercase">Breaking walls since 2012</p>
98
+ <div class="flex justify-center gap-4">
99
+ <a href="#shows" class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase tracking-wider">Upcoming Shows</a>
100
+ <a href="#music" class="px-6 py-3 border-2 border-white hover:bg-white hover:text-black rounded-md font-bold uppercase tracking-wider">Our Music</a>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- About Section -->
106
+ <section id="about" class="relative py-20 px-6 bg-black bg-opacity-80">
107
+ <div class="max-w-6xl mx-auto">
108
+ <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block">The Band</h2>
109
+
110
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mt-12">
111
+ {#each bandMembers as member}
112
+ <div class="text-center">
113
+ <div class="w-40 h-40 mx-auto mb-4 overflow-hidden rounded-full border-4 border-red-600">
114
+ <img src={member.img} alt={member.name} class="w-full h-full object-cover" />
115
+ </div>
116
+ <h3 class="text-2xl font-bold">{member.name}</h3>
117
+ <p class="text-red-400">{member.role}</p>
118
+ <p class="mt-2 text-gray-300">{member.desc}</p>
119
+ </div>
120
+ {/each}
121
+ </div>
122
+
123
+ <div class="mt-16 max-w-3xl mx-auto text-center">
124
+ <p class="text-xl leading-relaxed">
125
+ M.e.B formed in a basement in 2012 when four angry teenagers decided the world needed more noise.
126
+ Since then, we've been tearing up stages across the country with our raw energy and unapologetic sound.
127
+ We don't do pretty - we do loud, fast, and in your face.
128
+ </p>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- Music Section -->
134
+ <section id="music" class="relative py-20 px-6">
135
+ <div class="max-w-6xl mx-auto">
136
+ <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block">Our Noise</h2>
137
+
138
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
139
+ {#each albums as album}
140
+ <div class="bg-black bg-opacity-80 p-6 rounded-lg hover:scale-105 transition-transform">
141
+ <div class="mb-4 overflow-hidden rounded-lg">
142
+ <img src={album.cover} alt="Album Cover" class="w-full h-auto" />
143
+ </div>
144
+ <h3 class="text-2xl font-bold mb-2">{album.title}</h3>
145
+ <ol class="list-decimal list-inside space-y-1 text-gray-300">
146
+ {#each album.tracks as track}
147
+ <li>{track}</li>
148
+ {/each}
149
+ </ol>
150
+ <button class="mt-4 px-4 py-2 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase text-sm">Listen</button>
151
+ </div>
152
+ {/each}
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- Shows Section -->
158
+ <section id="shows" class="relative py-20 px-6 bg-black bg-opacity-80">
159
+ <div class="max-w-6xl mx-auto">
160
+ <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block">Live & Loud</h2>
161
+
162
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
163
+ <!-- Past Shows -->
164
+ <div>
165
+ <h3 class="text-2xl font-bold mb-6 text-red-400 uppercase">Past Shows</h3>
166
+ <div class="space-y-4">
167
+ {#each pastShows as show}
168
+ <div class="border-l-4 border-red-600 pl-4 py-2">
169
+ <p class="font-bold">{show.date}</p>
170
+ <p>{show.venue}</p>
171
+ <p class="text-sm text-gray-400">{show.note}</p>
172
+ </div>
173
+ {/each}
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Upcoming Shows -->
178
+ <div>
179
+ <h3 class="text-2xl font-bold mb-6 text-red-400 uppercase">Upcoming Shows</h3>
180
+ <div class="space-y-4">
181
+ {#each upcomingShows as show}
182
+ <div class="border-l-4 border-red-600 pl-4 py-2">
183
+ <p class="font-bold">{show.date}</p>
184
+ <p>{show.venue}</p>
185
+ <p class="text-sm text-red-400">{show.status}</p>
186
+ <button class="mt-2 px-3 py-1 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase text-xs">Get Tickets</button>
187
+ </div>
188
+ {/each}
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </section>
194
+
195
+ <!-- Contact Section -->
196
+ <section id="contact" class="relative py-20 px-6">
197
+ <div class="max-w-6xl mx-auto">
198
+ <h2 class="text-4xl font-bold mb-12 text-center uppercase border-b-2 border-red-600 pb-4 inline-block">Join The Riot</h2>
199
+
200
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mt-12">
201
+ <!-- Social Media -->
202
+ <div class="bg-black bg-opacity-80 p-8 rounded-lg">
203
+ <h3 class="text-2xl font-bold mb-6">Follow The Chaos</h3>
204
+ <div class="flex space-x-6">
205
+ <a href="#" class="text-white hover:text-red-400 transition-colors">
206
+ <i data-feather="facebook" class="w-8 h-8"></i>
207
+ </a>
208
+ <a href="#" class="text-white hover:text-red-400 transition-colors">
209
+ <i data-feather="instagram" class="w-8 h-8"></i>
210
+ </a>
211
+ <a href="#" class="text-white hover:text-red-400 transition-colors">
212
+ <i data-feather="youtube" class="w-8 h-8"></i>
213
+ </a>
214
+ <a href="#" class="text-white hover:text-red-400 transition-colors">
215
+ <i data-feather="music" class="w-8 h-8"></i>
216
+ </a>
217
+ </div>
218
+ <p class="mt-6 text-gray-300">
219
+ Stay updated with our latest shows, releases, and occasional rants against the system.
220
+ </p>
221
+ </div>
222
+
223
+ <!-- Contact Form -->
224
+ <div class="bg-black bg-opacity-80 p-8 rounded-lg">
225
+ <h3 class="text-2xl font-bold mb-6">Book Us / Contact</h3>
226
+ <form class="space-y-4">
227
+ <div>
228
+ <label for="name" class="block mb-1">Name</label>
229
+ <input type="text" id="name" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-red-600">
230
+ </div>
231
+ <div>
232
+ <label for="email" class="block mb-1">Email</label>
233
+ <input type="email" id="email" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-red-600">
234
+ </div>
235
+ <div>
236
+ <label for="message" class="block mb-1">Message</label>
237
+ <textarea id="message" rows="4" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-red-600"></textarea>
238
+ </div>
239
+ <button type="submit" class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-md font-bold uppercase tracking-wider">Send</button>
240
+ </form>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </section>
245
+
246
+ <Footer />
247
+ </div>
248
+ ```