Hugging Face's logo

Spaces:
Chadu
/
redflaginspi
Running

App Files Community
Chadu commited on
Commit
2d600ad
·
verified ·
1 Parent(s): fc6ce75

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +328 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Redflaginspi
3
- emoji: 💻
4
- colorFrom: pink
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: redflaginspi
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,328 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Red or Green - Résultats Sexuels</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Oswald', sans-serif;
15
+ background-color: #000;
16
+ color: white;
17
+ overflow-x: hidden;
18
+ }
19
+
20
+ .title-font {
21
+ font-family: 'Bebas Neue', cursive;
22
+ }
23
+
24
+ .hexagon {
25
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
26
+ }
27
+
28
+ .tilt-right {
29
+ transform: rotate(2deg);
30
+ }
31
+
32
+ .tilt-left {
33
+ transform: rotate(-2deg);
34
+ }
35
+
36
+ .glow-red {
37
+ text-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
38
+ }
39
+
40
+ .glow-green {
41
+ text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
42
+ }
43
+
44
+ .progress-bar {
45
+ height: 20px;
46
+ background: linear-gradient(90deg, #00ff00 0%, #ffff00 50%, #ff0000 100%);
47
+ border-radius: 10px;
48
+ position: relative;
49
+ }
50
+
51
+ .progress-marker {
52
+ position: absolute;
53
+ top: -5px;
54
+ width: 3px;
55
+ height: 30px;
56
+ background: white;
57
+ transform: translateX(-50%);
58
+ }
59
+
60
+ .badge {
61
+ border: 2px solid;
62
+ display: inline-block;
63
+ padding: 2px 8px;
64
+ border-radius: 12px;
65
+ font-size: 0.8rem;
66
+ font-weight: bold;
67
+ }
68
+
69
+ .question-card {
70
+ border-left: 4px solid;
71
+ transition: all 0.3s ease;
72
+ }
73
+
74
+ .question-card:hover {
75
+ transform: scale(1.02);
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="min-h-screen p-4">
80
+ <div class="max-w-md mx-auto">
81
+ <!-- Header -->
82
+ <header class="mb-6 text-center">
83
+ <div class="flex justify-center mb-2">
84
+ <div class="bg-red-600 px-4 py-1 tilt-right">
85
+ <h1 class="title-font text-3xl tracking-wider">RED OR GREEN</h1>
86
+ </div>
87
+ </div>
88
+ <p class="text-yellow-400 text-sm">TON PROFIL PSYCHOSEXUEL DÉVOILÉ</p>
89
+ </header>
90
+
91
+ <!-- Main Score -->
92
+ <section class="mb-8">
93
+ <div class="bg-black border-2 border-white p-4 tilt-left relative">
94
+ <div class="absolute -top-3 -left-3 bg-red-600 w-8 h-8 flex items-center justify-center">
95
+ <i class="fas fa-skull text-white"></i>
96
+ </div>
97
+
98
+ <h2 class="title-font text-4xl text-center mb-2 glow-red">PRÉDATEUR SEXUEL</h2>
99
+ <p class="text-center text-sm mb-4">"Tu fais peur même aux vibromasseurs professionnels"</p>
100
+
101
+ <div class="mb-4">
102
+ <div class="flex justify-between text-xs mb-1">
103
+ <span>0%</span>
104
+ <span>50%</span>
105
+ <span>100%</span>
106
+ </div>
107
+ <div class="progress-bar">
108
+ <div class="progress-marker" style="left: 78%;"></div>
109
+ </div>
110
+ <div class="text-right mt-1">
111
+ <span class="text-xl font-bold text-red-500">78%</span>
112
+ <span class="text-xs">RED FLAG</span>
113
+ </div>
114
+ </div>
115
+
116
+ <div class="grid grid-cols-2 gap-2 mt-4">
117
+ <div class="bg-gray-900 p-2 text-center">
118
+ <p class="text-xs">RED FLAGS</p>
119
+ <p class="text-2xl font-bold text-red-500">31/40</p>
120
+ </div>
121
+ <div class="bg-gray-900 p-2 text-center">
122
+ <p class="text-xs">RÉPONSES EXTRÊMES</p>
123
+ <p class="text-2xl font-bold text-yellow-500">42%</p>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </section>
128
+
129
+ <!-- Radar Chart -->
130
+ <section class="mb-8">
131
+ <div class="bg-black border-2 border-white p-4 relative">
132
+ <div class="absolute -top-3 -left-3 bg-green-500 w-8 h-8 flex items-center justify-center">
133
+ <i class="fas fa-chart-pie text-white"></i>
134
+ </div>
135
+
136
+ <h3 class="title-font text-2xl mb-4 text-center">PROFIL HEXAGONAL</h3>
137
+
138
+ <div class="flex justify-center">
139
+ <canvas id="radarChart" width="300" height="300"></canvas>
140
+ </div>
141
+
142
+ <div class="grid grid-cols-2 gap-2 mt-4 text-xs">
143
+ <div class="flex items-center">
144
+ <div class="w-3 h-3 bg-red-500 mr-2"></div>
145
+ <span>Impulsivité</span>
146
+ </div>
147
+ <div class="flex items-center">
148
+ <div class="w-3 h-3 bg-yellow-500 mr-2"></div>
149
+ <span>Transgressivité</span>
150
+ </div>
151
+ <div class="flex items-center">
152
+ <div class="w-3 h-3 bg-green-500 mr-2"></div>
153
+ <span>Contrôle</span>
154
+ </div>
155
+ <div class="flex items-center">
156
+ <div class="w-3 h-3 bg-blue-400 mr-2"></div>
157
+ <span>Expérimentation</span>
158
+ </div>
159
+ <div class="flex items-center">
160
+ <div class="w-3 h-3 bg-purple-500 mr-2"></div>
161
+ <span>Attachement</span>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+ <!-- Badges -->
168
+ <section class="mb-8">
169
+ <div class="bg-black border-2 border-white p-4 relative">
170
+ <div class="absolute -top-3 -left-3 bg-yellow-500 w-8 h-8 flex items-center justify-center">
171
+ <i class="fas fa-trophy text-black"></i>
172
+ </div>
173
+
174
+ <h3 class="title-font text-2xl mb-4 text-center">TES CLASSEMENTS</h3>
175
+
176
+ <div class="grid grid-cols-1 gap-3">
177
+ <div class="flex items-center justify-between">
178
+ <div class="flex items-center">
179
+ <i class="fas fa-venus mr-2 text-pink-500"></i>
180
+ <span>Top parmi les hommes</span>
181
+ </div>
182
+ <span class="badge bg-red-600 border-red-600">TOP 5%</span>
183
+ </div>
184
+
185
+ <div class="flex items-center justify-between">
186
+ <div class="flex items-center">
187
+ <i class="fas fa-map-marker-alt mr-2 text-blue-400"></i>
188
+ <span>Région Île-de-France</span>
189
+ </div>
190
+ <span class="badge bg-yellow-500 border-yellow-500 text-black">TOP 8%</span>
191
+ </div>
192
+
193
+ <div class="flex items-center justify-between">
194
+ <div class="flex items-center">
195
+ <i class="fas fa-birthday-cake mr-2 text-green-500"></i>
196
+ <span>Tranche 25-35 ans</span>
197
+ </div>
198
+ <span class="badge bg-red-600 border-red-600">TOP 7%</span>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </section>
203
+
204
+ <!-- Highlights -->
205
+ <section class="mb-8">
206
+ <div class="bg-black border-2 border-white p-4 relative">
207
+ <div class="absolute -top-3 -left-3 bg-purple-500 w-8 h-8 flex items-center justify-center">
208
+ <i class="fas fa-exclamation-triangle text-white"></i>
209
+ </div>
210
+
211
+ <h3 class="title-font text-2xl mb-4 text-center">TES RÉPONSES CHOQUANTES</h3>
212
+
213
+ <div class="space-y-4">
214
+ <!-- Question 1 -->
215
+ <div class="question-card border-red-500 bg-gray-900 p-3">
216
+ <p class="font-bold text-red-400 mb-1">"Un partenaire endormi est un partenaire consentant"</p>
217
+ <div class="flex justify-between text-xs">
218
+ <span class="text-red-400">Ta réponse : <strong>D'ACCORD</strong></span>
219
+ <span>Seulement <strong>3%</strong> comme toi</span>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Question 2 -->
224
+ <div class="question-card border-yellow-500 bg-gray-900 p-3">
225
+ <p class="font-bold text-yellow-400 mb-1">"La jalousie rend le sexe plus excitant"</p>
226
+ <div class="flex justify-between text-xs">
227
+ <span class="text-yellow-400">Ta réponse : <strong>TOUT À FAIT D'ACCORD</strong></span>
228
+ <span>Seulement <strong>7%</strong> comme toi</span>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Question 3 -->
233
+ <div class="question-card border-purple-500 bg-gray-900 p-3">
234
+ <p class="font-bold text-purple-400 mb-1">"J'ai déjà simulé des sentiments pour coucher"</p>
235
+ <div class="flex justify-between text-xs">
236
+ <span class="text-purple-400">Ta réponse : <strong>PLUSIEURS FOIS</strong></span>
237
+ <span>Seulement <strong>12%</strong> comme toi</span>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Question 4 -->
242
+ <div class="question-card border-pink-500 bg-gray-900 p-3">
243
+ <p class="font-bold text-pink-400 mb-1">"Le sexe est meilleur avec des inconnus"</p>
244
+ <div class="flex justify-between text-xs">
245
+ <span class="text-pink-400">Ta réponse : <strong>TOUJOURS</strong></span>
246
+ <span>Seulement <strong>9%</strong> comme toi</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- Share Button -->
254
+ <section class="mb-8">
255
+ <button class="w-full bg-gradient-to-r from-red-600 to-green-500 py-3 font-bold text-lg tilt-right hover:from-green-500 hover:to-red-600 transition-all duration-300">
256
+ <i class="fas fa-share-alt mr-2"></i> PARTAGER CE SCORE
257
+ </button>
258
+ </section>
259
+
260
+ <!-- Footer -->
261
+ <footer class="text-center text-xs text-gray-500">
262
+ <p>Scanne le QR code pour tester tes potes</p>
263
+ <div class="flex justify-center my-2">
264
+ <div class="bg-white p-2 w-24 h-24 flex items-center justify-center">
265
+ <i class="fas fa-qrcode text-4xl text-black"></i>
266
+ </div>
267
+ </div>
268
+ <p>redorgreen.app/test-sexualite</p>
269
+ </footer>
270
+ </div>
271
+
272
+ <script>
273
+ // Radar Chart Configuration
274
+ const ctx = document.getElementById('radarChart').getContext('2d');
275
+ const radarChart = new Chart(ctx, {
276
+ type: 'radar',
277
+ data: {
278
+ labels: ['Impulsivité', 'Transgressivité', 'Contrôle', 'Expérimentation', 'Attachement'],
279
+ datasets: [{
280
+ label: 'Ton profil',
281
+ data: [85, 72, 45, 68, 90],
282
+ backgroundColor: 'rgba(255, 0, 0, 0.2)',
283
+ borderColor: 'rgba(255, 0, 0, 1)',
284
+ borderWidth: 2,
285
+ pointBackgroundColor: 'rgba(255, 0, 0, 1)',
286
+ pointRadius: 4
287
+ }]
288
+ },
289
+ options: {
290
+ scales: {
291
+ r: {
292
+ angleLines: {
293
+ color: 'rgba(255, 255, 255, 0.2)'
294
+ },
295
+ grid: {
296
+ color: 'rgba(255, 255, 255, 0.2)'
297
+ },
298
+ pointLabels: {
299
+ color: 'white',
300
+ font: {
301
+ family: 'Oswald',
302
+ size: 10
303
+ }
304
+ },
305
+ ticks: {
306
+ backdropColor: 'rgba(0, 0, 0, 0)',
307
+ color: 'rgba(255, 255, 255, 0.5)',
308
+ stepSize: 20
309
+ },
310
+ suggestedMin: 0,
311
+ suggestedMax: 100
312
+ }
313
+ },
314
+ plugins: {
315
+ legend: {
316
+ display: false
317
+ }
318
+ },
319
+ elements: {
320
+ line: {
321
+ tension: 0.1
322
+ }
323
+ }
324
+ }
325
+ });
326
+ </script>
327
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Chadu/redflaginspi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
328
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Crée une page de résultat unique et percutante, conçue pour un affichage mobile plein écran, destinée à être screenshotée et partagée facilement. Il s’agit du résultat d’un test de 40 questions réalisé dans l’application Red or Green, qui évalue le niveau de "Red Flag" (comportements problématiques) de l’utilisateur dans une catégorie choisie (ici : Sexuelle). 🎯 Objectif : L’affichage doit être dense, clair et graphique, pour que l’utilisateur ait envie de partager cette image comme un mème ou un score. 🎨 Direction artistique obligatoire : Fond noir Palette de couleurs vives : rouge, vert, jaune, blanc Typographie moderne et lisible, style street / jeu / provoc Boutons et blocs avec bords francs ou légèrement inclinés Éléments visuels : barre de progression, jauges, badges, icônes Ambiance visuelle générale : provocante, fun, ludique, sombre ✅ La page de résultat doit contenir : Jauge graphique (type barre colorée en dégradé vert → rouge) montrant le pourcentage global de Red Flag obtenu (0 à 100%). Titre provocateur basé sur ce score global Exemples : « Prédateur sexuel », « Sain mais flingué », « Pur produit de la street » Description brève et humoristique qui donne un commentaire sarcastique sur le score. Badges / Classements relatifs, comme : Top X% des utilisateurs de même genre Top X% de sa région (ex : Nord de France) Top X% de sa tranche d’âge Highlights personnalisés (x4) : Afficher 4 questions du test auxquelles l’utilisateur a donné une réponse minoritaire / extrême Afficher la question, la réponse de l’utilisateur, et le % de gens ayant répondu pareil Stats supplémentaires obligatoires : Nombre total de red flags détectés Pourcentage de réponses extrêmes Score par sous-catégorie (voir ci-dessous) Répartition Red vs Green (%) 🔷 Ajout obligatoire : Diagramme hexagonal Intègre un diagramme radar (hexagone à 5 branches) pour représenter les 5 sous-catégories de la catégorie sexuelle. Chaque axe montre un score de Red Flag spécifique (0 à 100%) dans ces dimensions : Impulsivité sexuelle → Pulsions incontrôlées, comportement compulsif Transgressivité / tabou → Attirance pour les comportements hors norme Contrôle et consentement → Rapport à la notion de limites, pouvoir, clarté du consentement Expérimentation → Variété, curiosité, ouverture sexuelle Attachement & sexualité émotionnelle → Détachement affectif, usage du sexe comme stratégie émotionnelle Le diagramme doit être central ou bien visible, facilement lisible et identifiable visuellement comme un “profil psychosexuel”.