Hugging Face's logo

Spaces:
clementpep
/
collectif-corse
Sleeping

App Files Community
Clément PEPONNET commited on
Commit
0b084f3
·
1 Parent(s): 22f233b

feat: first version of the web app

Browse files
Files changed (4) hide show
  1. README.md +31 -3
  2. app.py +21 -0
  3. index.html +359 -0
  4. requirements.txt +1 -0
README.md CHANGED
@@ -1,7 +1,7 @@
1
  ---
2
  title: Collectif Corse
3
- emoji: 📈
4
- colorFrom: blue
5
  colorTo: blue
6
  sdk: gradio
7
  sdk_version: 5.49.1
@@ -9,4 +9,32 @@ app_file: app.py
9
  pinned: false
10
  ---
11
 
12
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  ---
2
  title: Collectif Corse
3
+ emoji: 🎵
4
+ colorFrom: red
5
  colorTo: blue
6
  sdk: gradio
7
  sdk_version: 5.49.1
 
9
  pinned: false
10
  ---
11
 
12
+ # A Voce di a Muntagna - Collectif Corse
13
+
14
+ Collectif de chant polyphonique corse basé en Normandie.
15
+
16
+ ## Description
17
+
18
+ Notre collectif perpétue la tradition du chant polyphonique corse (paghjella) en Normandie, particulièrement au Domaine de Gaston.
19
+
20
+ Nous nous produisons régulièrement dans l'ambiance unique de nos représentations à 4h du matin au pied du Manoir.
21
+
22
+ ## Valeurs
23
+
24
+ - **L'Identità** - L'identité corse
25
+ - **A Fratellanza** - La fraternité
26
+ - **A Tradizione** - La tradition musicale
27
+ - **L'Onore** - L'honneur et le respect
28
+
29
+ ## Membres
30
+
31
+ Le collectif est composé par :
32
+ - Benoit
33
+ - Clément (aka Poupouille)
34
+ - Swan
35
+ - Charles
36
+ - Martin
37
+
38
+ ---
39
+
40
+ *Ci vole à campà per cantà, è cantà per campà*
app.py ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import gradio as gr
2
+
3
+ # Read the HTML file
4
+ with open("index.html", "r", encoding="utf-8") as f:
5
+ html_content = f.read()
6
+
7
+ # Create Gradio interface with custom HTML
8
+ with gr.Blocks(css="""
9
+ .gradio-container {
10
+ padding: 0 !important;
11
+ max-width: 100% !important;
12
+ }
13
+ #html-component {
14
+ height: 100vh !important;
15
+ width: 100% !important;
16
+ }
17
+ """) as demo:
18
+ gr.HTML(html_content, elem_id="html-component")
19
+
20
+ if __name__ == "__main__":
21
+ demo.launch()
index.html ADDED
@@ -0,0 +1,359 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Collectif Corse - Polyphonies Corses en Normandie</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
10
+ <style>
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ body {
18
+ font-family: 'Cormorant Garamond', serif;
19
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
20
+ color: #f0e6d2;
21
+ min-height: 100vh;
22
+ overflow-x: hidden;
23
+ position: relative;
24
+ }
25
+
26
+ /* Animated background elements */
27
+ body::before {
28
+ content: '';
29
+ position: fixed;
30
+ top: 0;
31
+ left: 0;
32
+ width: 100%;
33
+ height: 100%;
34
+ background-image:
35
+ radial-gradient(circle at 20% 50%, rgba(204, 51, 51, 0.1) 0%, transparent 50%),
36
+ radial-gradient(circle at 80% 80%, rgba(139, 0, 0, 0.1) 0%, transparent 50%);
37
+ pointer-events: none;
38
+ z-index: 0;
39
+ }
40
+
41
+ .container {
42
+ position: relative;
43
+ z-index: 1;
44
+ max-width: 1200px;
45
+ margin: 0 auto;
46
+ padding: 40px 20px;
47
+ }
48
+
49
+ header {
50
+ text-align: center;
51
+ padding: 60px 20px 40px;
52
+ border-bottom: 3px solid #cc3333;
53
+ margin-bottom: 60px;
54
+ position: relative;
55
+ }
56
+
57
+ h1 {
58
+ font-family: 'Cinzel', serif;
59
+ font-size: 4rem;
60
+ font-weight: 700;
61
+ color: #cc3333;
62
+ text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
63
+ margin-bottom: 20px;
64
+ letter-spacing: 4px;
65
+ text-transform: uppercase;
66
+ }
67
+
68
+ .subtitle {
69
+ font-size: 1.8rem;
70
+ color: #f0e6d2;
71
+ font-style: italic;
72
+ margin-bottom: 10px;
73
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
74
+ }
75
+
76
+ .tagline {
77
+ font-size: 1.3rem;
78
+ color: #d4af37;
79
+ margin-top: 20px;
80
+ font-weight: 600;
81
+ }
82
+
83
+ .decorative-line {
84
+ width: 200px;
85
+ height: 3px;
86
+ background: linear-gradient(90deg, transparent, #cc3333, transparent);
87
+ margin: 30px auto;
88
+ }
89
+
90
+ .main-content {
91
+ background: rgba(22, 33, 62, 0.8);
92
+ border: 2px solid #cc3333;
93
+ border-radius: 15px;
94
+ padding: 50px;
95
+ margin-bottom: 40px;
96
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
97
+ backdrop-filter: blur(10px);
98
+ }
99
+
100
+ .section {
101
+ margin-bottom: 40px;
102
+ }
103
+
104
+ h2 {
105
+ font-family: 'Cinzel', serif;
106
+ font-size: 2.5rem;
107
+ color: #cc3333;
108
+ margin-bottom: 25px;
109
+ text-align: center;
110
+ letter-spacing: 2px;
111
+ }
112
+
113
+ .info-box {
114
+ background: rgba(15, 52, 96, 0.6);
115
+ border-left: 5px solid #d4af37;
116
+ padding: 25px;
117
+ margin: 20px 0;
118
+ border-radius: 8px;
119
+ line-height: 1.8;
120
+ font-size: 1.2rem;
121
+ }
122
+
123
+ .info-box strong {
124
+ color: #d4af37;
125
+ font-size: 1.3rem;
126
+ }
127
+
128
+ .highlight {
129
+ color: #cc3333;
130
+ font-weight: 600;
131
+ }
132
+
133
+ .values {
134
+ display: grid;
135
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
136
+ gap: 30px;
137
+ margin-top: 30px;
138
+ }
139
+
140
+ .value-card {
141
+ background: rgba(15, 52, 96, 0.7);
142
+ border: 2px solid #cc3333;
143
+ border-radius: 10px;
144
+ padding: 30px;
145
+ text-align: center;
146
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
147
+ }
148
+
149
+ .value-card:hover {
150
+ transform: translateY(-5px);
151
+ box-shadow: 0 10px 30px rgba(204, 51, 51, 0.4);
152
+ }
153
+
154
+ .value-icon {
155
+ font-size: 3rem;
156
+ margin-bottom: 15px;
157
+ }
158
+
159
+ .value-card h3 {
160
+ font-family: 'Cinzel', serif;
161
+ font-size: 1.5rem;
162
+ color: #d4af37;
163
+ margin-bottom: 10px;
164
+ }
165
+
166
+ .value-card p {
167
+ font-size: 1.1rem;
168
+ line-height: 1.6;
169
+ }
170
+
171
+ .schedule {
172
+ background: rgba(139, 0, 0, 0.3);
173
+ border: 2px solid #d4af37;
174
+ border-radius: 10px;
175
+ padding: 30px;
176
+ margin-top: 30px;
177
+ text-align: center;
178
+ }
179
+
180
+ .schedule h3 {
181
+ font-family: 'Cinzel', serif;
182
+ font-size: 2rem;
183
+ color: #d4af37;
184
+ margin-bottom: 20px;
185
+ }
186
+
187
+ .schedule-details {
188
+ font-size: 1.3rem;
189
+ line-height: 2;
190
+ }
191
+
192
+ .schedule-details .time {
193
+ font-size: 2rem;
194
+ color: #cc3333;
195
+ font-weight: 700;
196
+ display: block;
197
+ margin: 15px 0;
198
+ }
199
+
200
+ .quote {
201
+ font-style: italic;
202
+ font-size: 1.4rem;
203
+ text-align: center;
204
+ color: #d4af37;
205
+ margin: 40px 0;
206
+ padding: 30px;
207
+ border-top: 2px solid #cc3333;
208
+ border-bottom: 2px solid #cc3333;
209
+ line-height: 1.8;
210
+ }
211
+
212
+ footer {
213
+ text-align: center;
214
+ padding: 30px 20px;
215
+ margin-top: 60px;
216
+ border-top: 2px solid #cc3333;
217
+ opacity: 0.7;
218
+ }
219
+
220
+ .members {
221
+ font-size: 0.9rem;
222
+ color: #b8b8b8;
223
+ line-height: 1.6;
224
+ }
225
+
226
+ @media (max-width: 768px) {
227
+ h1 {
228
+ font-size: 2.5rem;
229
+ }
230
+
231
+ .subtitle {
232
+ font-size: 1.3rem;
233
+ }
234
+
235
+ .main-content {
236
+ padding: 30px 20px;
237
+ }
238
+
239
+ h2 {
240
+ font-size: 2rem;
241
+ }
242
+
243
+ .values {
244
+ grid-template-columns: 1fr;
245
+ }
246
+ }
247
+
248
+ /* Subtle animation */
249
+ @keyframes fadeIn {
250
+ from {
251
+ opacity: 0;
252
+ transform: translateY(20px);
253
+ }
254
+ to {
255
+ opacity: 1;
256
+ transform: translateY(0);
257
+ }
258
+ }
259
+
260
+ .container > * {
261
+ animation: fadeIn 1s ease-out;
262
+ }
263
+ </style>
264
+ </head>
265
+ <body>
266
+ <div class="container">
267
+ <header>
268
+ <h1>A Voce di a Muntagna</h1>
269
+ <div class="subtitle">Polyphonies Corses en Terre Normande</div>
270
+ <div class="decorative-line"></div>
271
+ <div class="tagline">L'âme de la Corse résonne au cœur de la Normandie</div>
272
+ </header>
273
+
274
+ <div class="main-content">
275
+ <section class="section">
276
+ <h2>Notre Mission</h2>
277
+ <div class="info-box">
278
+ Nous sommes un collectif passionné qui perpétue la tradition du <strong>chant polyphonique corse</strong>,
279
+ cette pratique ancestrale inscrite au patrimoine culturel immatériel de l'UNESCO.
280
+ Nos voix s'élèvent pour partager les valeurs d'<span class="highlight">honneur</span>,
281
+ de <span class="highlight">fraternité</span> et de <span class="highlight">fierté</span>
282
+ qui animent le peuple corse depuis des siècles.
283
+ </div>
284
+ </section>
285
+
286
+ <section class="section">
287
+ <h2>Nos Valeurs</h2>
288
+ <div class="values">
289
+ <div class="value-card">
290
+ <div class="value-icon">⛰️</div>
291
+ <h3>L'Identità</h3>
292
+ <p>L'identité corse, fierté de notre terre et de nos racines</p>
293
+ </div>
294
+ <div class="value-card">
295
+ <div class="value-icon">🤝</div>
296
+ <h3>A Fratellanza</h3>
297
+ <p>La fraternité, lien indéfectible qui nous unit</p>
298
+ </div>
299
+ <div class="value-card">
300
+ <div class="value-icon">🎵</div>
301
+ <h3>A Tradizione</h3>
302
+ <p>La tradition musicale transmise de génération en génération</p>
303
+ </div>
304
+ <div class="value-card">
305
+ <div class="value-icon">💪</div>
306
+ <h3>L'Onore</h3>
307
+ <p>L'honneur et le respect, piliers de notre communauté</p>
308
+ </div>
309
+ </div>
310
+ </section>
311
+
312
+ <div class="quote">
313
+ "Ci vole à campà per cantà, è cantà per campà"<br>
314
+ <small>— Il faut vivre pour chanter, et chanter pour vivre</small>
315
+ </div>
316
+
317
+ <section class="section">
318
+ <h2>Nos Représentations</h2>
319
+ <div class="schedule">
320
+ <h3>Rendez-vous Traditionnel</h3>
321
+ <div class="schedule-details">
322
+ 📍 <strong>Domaine de Gaston</strong> - Normandie<br>
323
+ 🏛️ Au pied du <strong>Manoir</strong><br>
324
+ <span class="time">🌙 4h00 du matin</span>
325
+ <div style="margin-top: 20px; font-style: italic; color: #d4af37;">
326
+ Dans la nuit normande, nos chants résonnent<br>
327
+ comme un écho de nos montagnes corses
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="info-box" style="margin-top: 30px;">
333
+ <strong>Performances régulières</strong> — Notre collectif se produit régulièrement en Normandie,
334
+ perpétuant la tradition des <em>paghjelle</em> et des chants sacrés corses.
335
+ Chaque représentation est un moment de communion et de partage de notre héritage culturel.
336
+ </div>
337
+ </section>
338
+
339
+ <section class="section">
340
+ <h2>Le Chant Polyphonique Corse</h2>
341
+ <div class="info-box">
342
+ La <strong>paghjella</strong> est au cœur de notre répertoire. Cette forme de chant polyphonique
343
+ à trois voix incarne l'âme corse : la <em>seconda</em> (voix basse) pose les fondations,
344
+ la <em>bassu</em> (voix médiane) apporte la profondeur, et la <em>terza</em> (voix haute)
345
+ s'envole vers les sommets. Ensemble, elles créent une harmonie unique qui traverse les siècles.
346
+ </div>
347
+ </section>
348
+ </div>
349
+
350
+ <footer>
351
+ <div class="decorative-line"></div>
352
+ <div class="members">
353
+ Collectif composé par<br>
354
+ Benoit • Clément (aka Poupouille) • Swan • Charles • Martin
355
+ </div>
356
+ </footer>
357
+ </div>
358
+ </body>
359
+ </html>
requirements.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ gradio==5.49.1