Hugging Face's logo

Spaces:
docto41
/
scania
Running

App Files Community
docto41 commited on
Commit
10b3f66
·
verified ·
1 Parent(s): 370cac0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +350 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Scania
3
- emoji: 🐠
4
  colorFrom: purple
5
- colorTo: indigo
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: scania
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: yellow
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,350 @@
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>Euro Truck Simulator: Réunion Edition</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ background-color: #1a1a2e;
15
+ color: #e6e6e6;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .truck-dashboard {
20
+ background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
21
+ border-radius: 15px;
22
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
23
+ }
24
+
25
+ .speedometer {
26
+ background: rgba(0, 0, 0, 0.7);
27
+ border: 3px solid #e94560;
28
+ border-radius: 50%;
29
+ box-shadow: 0 0 20px #e94560;
30
+ }
31
+
32
+ .needle {
33
+ transform-origin: bottom center;
34
+ transition: transform 0.5s ease-out;
35
+ }
36
+
37
+ .road {
38
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="%232a2a3a"/><path d="M100 0 L100 200" stroke="%23e94560" stroke-width="4" stroke-dasharray="10,10"/></svg>');
39
+ animation: roadMove 2s linear infinite;
40
+ }
41
+
42
+ @keyframes roadMove {
43
+ 0% { background-position: 0 0; }
44
+ 100% { background-position: 0 200px; }
45
+ }
46
+
47
+ .truck-shadow {
48
+ filter: drop-shadow(0 0 15px rgba(233, 69, 96, 0.7));
49
+ }
50
+
51
+ .map-container {
52
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><rect width="400" height="400" fill="%231f1f2e"/><path d="M200,50 L250,100 L300,80 L350,150 L300,200 L250,180 L200,250 L150,200 L100,250 L50,200 L100,150 L150,180 Z" fill="%2335355e" stroke="%23e94560" stroke-width="2"/></svg>');
53
+ background-size: cover;
54
+ border-radius: 10px;
55
+ }
56
+
57
+ .mission-card:hover {
58
+ transform: translateY(-5px);
59
+ box-shadow: 0 10px 20px rgba(233, 69, 96, 0.3);
60
+ }
61
+
62
+ .piton-shadow {
63
+ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="min-h-screen">
68
+ <!-- Navigation Bar -->
69
+ <nav class="bg-gray-900 text-white py-4 px-6 shadow-lg">
70
+ <div class="container mx-auto flex justify-between items-center">
71
+ <div class="flex items-center space-x-2">
72
+ <i class="fas fa-truck text-2xl text-red-500"></i>
73
+ <h1 class="text-2xl font-bold">Truck Simulator <span class="text-red-500">Réunion</span></h1>
74
+ </div>
75
+ <div class="hidden md:flex space-x-6">
76
+ <a href="#" class="hover:text-red-400 transition">Accueil</a>
77
+ <a href="#" class="hover:text-red-400 transition">Missions</a>
78
+ <a href="#" class="hover:text-red-400 transition">Garage</a>
79
+ <a href="#" class="hover:text-red-400 transition">Carte</a>
80
+ <a href="#" class="hover:text-red-400 transition">Statistiques</a>
81
+ </div>
82
+ <div class="flex items-center space-x-4">
83
+ <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md transition">
84
+ <i class="fas fa-sign-in-alt mr-2"></i>Connexion
85
+ </button>
86
+ <button class="md:hidden text-2xl">
87
+ <i class="fas fa-bars"></i>
88
+ </button>
89
+ </div>
90
+ </div>
91
+ </nav>
92
+
93
+ <!-- Main Content -->
94
+ <main class="container mx-auto py-8 px-4">
95
+ <!-- Game Dashboard -->
96
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
97
+ <!-- Left Panel - Truck Controls -->
98
+ <div class="truck-dashboard p-6 lg:col-span-2">
99
+ <div class="flex justify-between items-center mb-6">
100
+ <h2 class="text-2xl font-bold">Camion: <span class="text-red-500">Scania R500</span></h2>
101
+ <div class="flex space-x-2">
102
+ <span class="bg-gray-800 px-3 py-1 rounded-full text-sm">€ 42,750</span>
103
+ <span class="bg-gray-800 px-3 py-1 rounded-full text-sm">Niveau 12</span>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Truck Visualization -->
108
+ <div class="relative h-64 mb-8 flex justify-center items-center">
109
+ <div class="absolute inset-0 road opacity-20 rounded-lg"></div>
110
+ <img src="https://cdn-icons-png.flaticon.com/512/2583/2583344.png"
111
+ alt="Truck"
112
+ class="relative z-10 h-48 truck-shadow">
113
+ <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-black to-transparent"></div>
114
+ </div>
115
+
116
+ <!-- Truck Controls -->
117
+ <div class="grid grid-cols-3 gap-4">
118
+ <div class="bg-gray-800 p-4 rounded-lg text-center">
119
+ <div class="text-red-500 text-2xl mb-2">
120
+ <i class="fas fa-gas-pump"></i>
121
+ </div>
122
+ <div class="text-sm">Carburant</div>
123
+ <div class="font-bold">87%</div>
124
+ </div>
125
+ <div class="bg-gray-800 p-4 rounded-lg text-center">
126
+ <div class="text-red-500 text-2xl mb-2">
127
+ <i class="fas fa-cog"></i>
128
+ </div>
129
+ <div class="text-sm">État</div>
130
+ <div class="font-bold">94%</div>
131
+ </div>
132
+ <div class="bg-gray-800 p-4 rounded-lg text-center">
133
+ <div class="text-red-500 text-2xl mb-2">
134
+ <i class="fas fa-road"></i>
135
+ </div>
136
+ <div class="text-sm">Kilométrage</div>
137
+ <div class="font-bold">12,487 km</div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Speedometer -->
142
+ <div class="mt-8 flex justify-center">
143
+ <div class="relative speedometer w-48 h-48 flex items-center justify-center">
144
+ <div class="absolute w-full h-full rounded-full border-8 border-transparent"
145
+ style="background: conic-gradient(from 0deg, #e94560 0%, #e94560 70%, #4a4a6a 70%, #4a4a6a 100%);"></div>
146
+ <div class="absolute w-40 h-40 rounded-full bg-gray-900 flex items-center justify-center">
147
+ <div class="text-center">
148
+ <div class="text-3xl font-bold" id="speed">0</div>
149
+ <div class="text-sm">km/h</div>
150
+ </div>
151
+ </div>
152
+ <div class="needle absolute w-1 h-20 bg-red-500 bottom-24" style="transform: rotate(-90deg);"></div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Right Panel - Missions and Map -->
158
+ <div class="space-y-6">
159
+ <!-- Current Mission -->
160
+ <div class="truck-dashboard p-6">
161
+ <h2 class="text-xl font-bold mb-4">Mission en cours</h2>
162
+ <div class="bg-gray-800 p-4 rounded-lg">
163
+ <div class="flex justify-between items-start mb-2">
164
+ <div>
165
+ <h3 class="font-bold">Livraison de canne à sucre</h3>
166
+ <p class="text-sm text-gray-400">Usine du Gol → Distillerie de Saint-Pierre</p>
167
+ </div>
168
+ <span class="bg-red-600 text-xs px-2 py-1 rounded-full">+ €1,240</span>
169
+ </div>
170
+ <div class="w-full bg-gray-700 h-2 rounded-full mt-2">
171
+ <div class="bg-red-500 h-2 rounded-full" style="width: 45%;"></div>
172
+ </div>
173
+ <div class="flex justify-between text-xs mt-1">
174
+ <span>45% complété</span>
175
+ <span>87 km restants</span>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Map -->
181
+ <div class="truck-dashboard p-6">
182
+ <h2 class="text-xl font-bold mb-4">Carte de la Réunion</h2>
183
+ <div class="map-container h-64 relative">
184
+ <div class="absolute inset-0 bg-black bg-opacity-30 rounded-lg flex items-center justify-center">
185
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Reunion_Island_relief_location_map.jpg/800px-Reunion_Island_relief_location_map.jpg"
186
+ alt="Carte de la Réunion"
187
+ class="max-h-full max-w-full rounded-lg opacity-70">
188
+ </div>
189
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
190
+ <div class="relative">
191
+ <img src="https://cdn-icons-png.flaticon.com/512/2583/2583319.png"
192
+ alt="Position du camion"
193
+ class="h-10 w-10 piton-shadow">
194
+ <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-red-600 text-white text-xs px-1 rounded-full">
195
+ Vous
196
+ </div>
197
+ </div>
198
+ </div>
199
+ <div class="absolute bottom-4 left-4 bg-black bg-opacity-50 text-white text-xs p-2 rounded">
200
+ <i class="fas fa-map-marker-alt text-red-500 mr-1"></i> Route du Littoral
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Available Missions -->
206
+ <div class="truck-dashboard p-6">
207
+ <h2 class="text-xl font-bold mb-4">Missions disponibles</h2>
208
+ <div class="space-y-3">
209
+ <div class="mission-card bg-gray-800 p-4 rounded-lg transition cursor-pointer hover:bg-gray-700">
210
+ <div class="flex justify-between">
211
+ <div>
212
+ <h3 class="font-bold">Produits locaux</h3>
213
+ <p class="text-sm text-gray-400">Saint-Denis → Saint-Pierre</p>
214
+ </div>
215
+ <span class="bg-green-600 text-xs px-2 py-1 rounded-full">+ €980</span>
216
+ </div>
217
+ </div>
218
+ <div class="mission-card bg-gray-800 p-4 rounded-lg transition cursor-pointer hover:bg-gray-700">
219
+ <div class="flex justify-between">
220
+ <div>
221
+ <h3 class="font-bold">Matériaux de construction</h3>
222
+ <p class="text-sm text-gray-400">Le Port → Cilaos</p>
223
+ </div>
224
+ <span class="bg-green-600 text-xs px-2 py-1 rounded-full">+ €1,520</span>
225
+ </div>
226
+ </div>
227
+ <div class="mission-card bg-gray-800 p-4 rounded-lg transition cursor-pointer hover:bg-gray-700">
228
+ <div class="flex justify-between">
229
+ <div>
230
+ <h3 class="font-bold">Marchandises diverses</h3>
231
+ <p class="text-sm text-gray-400">Saint-Benoît → Saint-Paul</p>
232
+ </div>
233
+ <span class="bg-green-600 text-xs px-2 py-1 rounded-full">+ €1,150</span>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Features Section -->
242
+ <div class="mt-16">
243
+ <h2 class="text-3xl font-bold text-center mb-8">Découvrez les routes de la Réunion</h2>
244
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
245
+ <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
246
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://www.reunion.fr/wp-content/uploads/2020/03/route-reunion-1.jpg');"></div>
247
+ <div class="p-6">
248
+ <h3 class="text-xl font-bold mb-2">Route du Littoral</h3>
249
+ <p class="text-gray-400">Parcourez la célèbre route côtière avec ses vues spectaculaires sur l'océan Indien.</p>
250
+ </div>
251
+ </div>
252
+ <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
253
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://www.reunion.fr/wp-content/uploads/2020/03/route-reunion-2.jpg');"></div>
254
+ <div class="p-6">
255
+ <h3 class="text-xl font-bold mb-2">Route des Tamarins</h3>
256
+ <p class="text-gray-400">L'autoroute moderne qui traverse l'île avec des paysages à couper le souffle.</p>
257
+ </div>
258
+ </div>
259
+ <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
260
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://www.reunion.fr/wp-content/uploads/2020/03/route-reunion-3.jpg');"></div>
261
+ <div class="p-6">
262
+ <h3 class="text-xl font-bold mb-2">Route des Cirques</h3>
263
+ <p class="text-gray-400">Défiez les routes sinueuses des cirques avec des dénivelés impressionnants.</p>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </main>
269
+
270
+ <!-- Footer -->
271
+ <footer class="bg-gray-900 text-white py-8 mt-16">
272
+ <div class="container mx-auto px-4">
273
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
274
+ <div>
275
+ <h3 class="text-xl font-bold mb-4">Truck Simulator Réunion</h3>
276
+ <p class="text-gray-400">Découvrez les routes spectaculaires de l'île de la Réunion au volant de votre camion.</p>
277
+ </div>
278
+ <div>
279
+ <h4 class="font-bold mb-4">Navigation</h4>
280
+ <ul class="space-y-2">
281
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li>
282
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Missions</a></li>
283
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Garage</a></li>
284
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Carte</a></li>
285
+ </ul>
286
+ </div>
287
+ <div>
288
+ <h4 class="font-bold mb-4">Support</h4>
289
+ <ul class="space-y-2">
290
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
291
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
292
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions</a></li>
293
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a></li>
294
+ </ul>
295
+ </div>
296
+ <div>
297
+ <h4 class="font-bold mb-4">Réseaux sociaux</h4>
298
+ <div class="flex space-x-4">
299
+ <a href="#" class="text-gray-400 hover:text-white text-2xl transition"><i class="fab fa-facebook"></i></a>
300
+ <a href="#" class="text-gray-400 hover:text-white text-2xl transition"><i class="fab fa-twitter"></i></a>
301
+ <a href="#" class="text-gray-400 hover:text-white text-2xl transition"><i class="fab fa-instagram"></i></a>
302
+ <a href="#" class="text-gray-400 hover:text-white text-2xl transition"><i class="fab fa-youtube"></i></a>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
307
+ <p>© 2023 Truck Simulator Réunion. Tous droits réservés.</p>
308
+ </div>
309
+ </div>
310
+ </footer>
311
+
312
+ <script>
313
+ // Speedometer animation
314
+ let speed = 0;
315
+ const speedElement = document.getElementById('speed');
316
+ const needle = document.querySelector('.needle');
317
+
318
+ function updateSpeedometer() {
319
+ if (speed < 80) {
320
+ speed += 1;
321
+ speedElement.textContent = speed;
322
+
323
+ // Calculate needle rotation (-90deg to 90deg for 0-140km/h)
324
+ const rotation = -90 + (speed / 80) * 180;
325
+ needle.style.transform = `rotate(${rotation}deg)`;
326
+
327
+ setTimeout(updateSpeedometer, 50);
328
+ }
329
+ }
330
+
331
+ // Start the animation when page loads
332
+ window.addEventListener('load', () => {
333
+ setTimeout(updateSpeedometer, 1000);
334
+ });
335
+
336
+ // Mission card hover effect
337
+ const missionCards = document.querySelectorAll('.mission-card');
338
+ missionCards.forEach(card => {
339
+ card.addEventListener('mouseenter', () => {
340
+ card.classList.add('transform');
341
+ card.classList.add('shadow-lg');
342
+ });
343
+ card.addEventListener('mouseleave', () => {
344
+ card.classList.remove('transform');
345
+ card.classList.remove('shadow-lg');
346
+ });
347
+ });
348
+ </script>
349
+ <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=docto41/scania" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
350
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ https://www.hrkgame.com/fr/games/product/euro-truck-simulator-2-goty-edition-scania-truck-driving-simulator#a_aid=xxlgamer :: je veux ce model de jeux mais spécial ile de la REUNION