docto41 commited on
Commit
d5bfcec
·
verified ·
1 Parent(s): b48f158

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +321 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Globe Futuriste
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: globe-futuriste
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
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,321 @@
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>Globe Futuriste</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ body {
10
+ margin: 0;
11
+ overflow: hidden;
12
+ background: #000;
13
+ }
14
+
15
+ canvas {
16
+ display: block;
17
+ }
18
+
19
+ .title {
20
+ position: absolute;
21
+ top: 50%;
22
+ left: 50%;
23
+ transform: translate(-50%, -50%);
24
+ color: rgba(255, 255, 255, 0.7);
25
+ font-family: 'Arial', sans-serif;
26
+ font-size: 2rem;
27
+ text-transform: uppercase;
28
+ letter-spacing: 0.5rem;
29
+ text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
30
+ pointer-events: none;
31
+ z-index: 100;
32
+ }
33
+
34
+ @keyframes pulse {
35
+ 0%, 100% { opacity: 0.3; }
36
+ 50% { opacity: 1; }
37
+ }
38
+
39
+ .controls {
40
+ position: absolute;
41
+ bottom: 20px;
42
+ left: 20px;
43
+ color: white;
44
+ background: rgba(0, 0, 0, 0.5);
45
+ padding: 10px;
46
+ border-radius: 5px;
47
+ font-family: Arial, sans-serif;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body>
52
+ <div class="title">Globe Futuriste</div>
53
+ <div class="controls">
54
+ <div>Cliquez et déplacez pour faire tourner le globe</div>
55
+ <div>Molette pour zoomer</div>
56
+ </div>
57
+ <canvas id="globe"></canvas>
58
+
59
+ <script>
60
+ const canvas = document.getElementById('globe');
61
+ const ctx = canvas.getContext('2d');
62
+
63
+ // Ajuster la taille du canvas à la fenêtre
64
+ canvas.width = window.innerWidth;
65
+ canvas.height = window.innerHeight;
66
+
67
+ // Configuration
68
+ const config = {
69
+ particleCount: 2000,
70
+ starCount: 500,
71
+ globeRadius: Math.min(canvas.width, canvas.height) * 0.4,
72
+ rotationSpeed: 0.001,
73
+ mouseSensitivity: 0.002,
74
+ zoom: 1,
75
+ minZoom: 0.5,
76
+ maxZoom: 2
77
+ };
78
+
79
+ // Variables d'état
80
+ let particles = [];
81
+ let stars = [];
82
+ let rotationX = 0;
83
+ let rotationY = 0;
84
+ let targetRotationX = 0;
85
+ let targetRotationY = 0;
86
+ let isDragging = false;
87
+ let lastMouseX = 0;
88
+ let lastMouseY = 0;
89
+
90
+ // Initialisation
91
+ function init() {
92
+ createParticles();
93
+ createStars();
94
+ animate();
95
+
96
+ // Écouteurs d'événements
97
+ canvas.addEventListener('mousedown', onMouseDown);
98
+ canvas.addEventListener('mousemove', onMouseMove);
99
+ canvas.addEventListener('mouseup', onMouseUp);
100
+ canvas.addEventListener('mouseleave', onMouseUp);
101
+ canvas.addEventListener('wheel', onMouseWheel);
102
+ window.addEventListener('resize', onResize);
103
+ }
104
+
105
+ // Créer les particules pour le globe
106
+ function createParticles() {
107
+ particles = [];
108
+
109
+ for (let i = 0; i < config.particleCount; i++) {
110
+ // Coordonnées sphériques
111
+ const theta = Math.random() * Math.PI * 2; // 0 à 2π
112
+ const phi = Math.acos(2 * Math.random() - 1); // -π/2 à π/2
113
+
114
+ // Convertir en coordonnées cartésiennes
115
+ const x = config.globeRadius * Math.sin(phi) * Math.cos(theta);
116
+ const y = config.globeRadius * Math.sin(phi) * Math.sin(theta);
117
+ const z = config.globeRadius * Math.cos(phi);
118
+
119
+ // Couleur aléatoire
120
+ const hue = Math.floor(Math.random() * 360);
121
+ const color = `hsl(${hue}, 100%, 70%)`;
122
+
123
+ particles.push({
124
+ x, y, z,
125
+ originalX: x,
126
+ originalY: y,
127
+ originalZ: z,
128
+ color,
129
+ size: Math.random() * 2 + 1
130
+ });
131
+ }
132
+ }
133
+
134
+ // Créer les étoiles en arrière-plan
135
+ function createStars() {
136
+ stars = [];
137
+
138
+ for (let i = 0; i < config.starCount; i++) {
139
+ // Position aléatoire dans l'espace 3D
140
+ const distance = 1000 + Math.random() * 2000;
141
+ const x = (Math.random() - 0.5) * distance * 2;
142
+ const y = (Math.random() - 0.5) * distance * 2;
143
+ const z = (Math.random() - 0.5) * distance * 2;
144
+
145
+ // Propriétés de clignotement
146
+ const blinkSpeed = 0.5 + Math.random() * 2;
147
+ const blinkOffset = Math.random() * Math.PI * 2;
148
+
149
+ stars.push({
150
+ x, y, z,
151
+ originalX: x,
152
+ originalY: y,
153
+ originalZ: z,
154
+ size: Math.random() * 3 + 1,
155
+ blinkSpeed,
156
+ blinkOffset
157
+ });
158
+ }
159
+ }
160
+
161
+ // Animation
162
+ function animate() {
163
+ requestAnimationFrame(animate);
164
+
165
+ // Effacer le canvas
166
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
167
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
168
+
169
+ // Mise à jour de la rotation
170
+ if (!isDragging) {
171
+ targetRotationX += config.rotationSpeed;
172
+ targetRotationY += config.rotationSpeed * 0.5;
173
+ }
174
+
175
+ // Interpolation pour une rotation plus fluide
176
+ rotationX += (targetRotationX - rotationX) * 0.1;
177
+ rotationY += (targetRotationY - rotationY) * 0.1;
178
+
179
+ // Dessiner les étoiles
180
+ drawStars();
181
+
182
+ // Dessiner les particules
183
+ drawParticles();
184
+ }
185
+
186
+ // Dessiner les étoiles
187
+ function drawStars() {
188
+ const centerX = canvas.width / 2;
189
+ const centerY = canvas.height / 2;
190
+ const time = Date.now() * 0.001;
191
+
192
+ stars.forEach(star => {
193
+ // Rotation des étoiles (plus lente que le globe)
194
+ const rotatedX = rotateX(star.originalX, star.originalY, star.originalZ, rotationX * 0.2);
195
+ const rotatedY = rotateY(rotatedX.x, rotatedX.y, rotatedX.z, rotationY * 0.2);
196
+ const rotatedZ = rotateY(rotatedY.x, rotatedY.y, rotatedY.z, rotationX * 0.2);
197
+
198
+ // Perspective
199
+ const scale = config.globeRadius / (config.globeRadius + rotatedZ.z);
200
+ const x = centerX + rotatedZ.x * scale * config.zoom;
201
+ const y = centerY + rotatedZ.y * scale * config.zoom;
202
+
203
+ // Clignotement
204
+ const blink = Math.sin(time * star.blinkSpeed + star.blinkOffset) * 0.5 + 0.5;
205
+ const opacity = 0.3 + blink * 0.7;
206
+
207
+ // Dessiner seulement si visible
208
+ if (scale > 0) {
209
+ ctx.beginPath();
210
+ ctx.arc(x, y, star.size * scale, 0, Math.PI * 2);
211
+ ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
212
+ ctx.fill();
213
+ }
214
+ });
215
+ }
216
+
217
+ // Dessiner les particules
218
+ function drawParticles() {
219
+ const centerX = canvas.width / 2;
220
+ const centerY = canvas.height / 2;
221
+
222
+ particles.forEach(particle => {
223
+ // Rotation des particules
224
+ const rotatedX = rotateX(particle.originalX, particle.originalY, particle.originalZ, rotationX);
225
+ const rotatedY = rotateY(rotatedX.x, rotatedX.y, rotatedX.z, rotationY);
226
+ const rotatedZ = rotateY(rotatedY.x, rotatedY.y, rotatedY.z, rotationX);
227
+
228
+ // Perspective
229
+ const scale = config.globeRadius / (config.globeRadius + rotatedZ.z);
230
+ const x = centerX + rotatedZ.x * scale * config.zoom;
231
+ const y = centerY + rotatedZ.y * scale * config.zoom;
232
+
233
+ // Dessiner seulement si visible (devant le globe)
234
+ if (scale > 0) {
235
+ // Effet de profondeur pour la taille et l'opacité
236
+ const depth = (rotatedZ.z + config.globeRadius) / (2 * config.globeRadius);
237
+ const size = particle.size * scale * (0.5 + depth * 0.5);
238
+ const alpha = 0.7 + depth * 0.3;
239
+
240
+ ctx.beginPath();
241
+ ctx.arc(x, y, size, 0, Math.PI * 2);
242
+ ctx.fillStyle = particle.color.replace(')', `, ${alpha})`).replace('hsl', 'hsla');
243
+ ctx.fill();
244
+
245
+ // Ajouter un petit halo lumineux
246
+ if (size > 1) {
247
+ const gradient = ctx.createRadialGradient(x, y, 0, x, y, size * 1.5);
248
+ gradient.addColorStop(0, particle.color.replace(')', `, 0.8)`).replace('hsl', 'hsla'));
249
+ gradient.addColorStop(1, particle.color.replace(')', `, 0)`).replace('hsl', 'hsla'));
250
+
251
+ ctx.beginPath();
252
+ ctx.arc(x, y, size * 1.5, 0, Math.PI * 2);
253
+ ctx.fillStyle = gradient;
254
+ ctx.fill();
255
+ }
256
+ }
257
+ });
258
+ }
259
+
260
+ // Fonctions de rotation 3D
261
+ function rotateX(x, y, z, angle) {
262
+ const cos = Math.cos(angle);
263
+ const sin = Math.sin(angle);
264
+ return {
265
+ x: x,
266
+ y: y * cos - z * sin,
267
+ z: y * sin + z * cos
268
+ };
269
+ }
270
+
271
+ function rotateY(x, y, z, angle) {
272
+ const cos = Math.cos(angle);
273
+ const sin = Math.sin(angle);
274
+ return {
275
+ x: x * cos + z * sin,
276
+ y: y,
277
+ z: -x * sin + z * cos
278
+ };
279
+ }
280
+
281
+ // Gestion des événements de souris
282
+ function onMouseDown(e) {
283
+ isDragging = true;
284
+ lastMouseX = e.clientX;
285
+ lastMouseY = e.clientY;
286
+ }
287
+
288
+ function onMouseMove(e) {
289
+ if (!isDragging) return;
290
+
291
+ const deltaX = e.clientX - lastMouseX;
292
+ const deltaY = e.clientY - lastMouseY;
293
+
294
+ targetRotationX += deltaX * config.mouseSensitivity;
295
+ targetRotationY += deltaY * config.mouseSensitivity;
296
+
297
+ lastMouseX = e.clientX;
298
+ lastMouseY = e.clientY;
299
+ }
300
+
301
+ function onMouseUp() {
302
+ isDragging = false;
303
+ }
304
+
305
+ function onMouseWheel(e) {
306
+ e.preventDefault();
307
+ config.zoom += e.deltaY * -0.001;
308
+ config.zoom = Math.max(config.minZoom, Math.min(config.maxZoom, config.zoom));
309
+ }
310
+
311
+ function onResize() {
312
+ canvas.width = window.innerWidth;
313
+ canvas.height = window.innerHeight;
314
+ config.globeRadius = Math.min(canvas.width, canvas.height) * 0.4;
315
+ }
316
+
317
+ // Démarrer l'application
318
+ init();
319
+ </script>
320
+ <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/globe-futuriste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
321
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ AURORA
2
+ 2 Player 3D BMX RPG RTS Action Adventure Airport Alien Animal Anime Army Art Artillery Asteroid Balance Balloon Baseball Basketball Bike Bird Blackjack Block Bloons Boat Bomb Bow Bowling Box Boxhead Brain Bridge Bunny Business Buttonhunt Car Card Casino Castle Catapult Cell Checkers Chess Christmas City Coloring Cooking Cricket Dating Defense Detective Devil Dice Difference Dinosaur Dirt Bike Doctor Domino Dragon Dress Up Duck Dungeon Dwarf Educational Elephant Emo Epic War Escape Farm Fashion Fire Fish Fishing Flight Food Puzzle Football Funny Geography Girl Gladiator God Golf Good Music Gravity Guitar Gun Hair Halloween Helicopter Hex Hidden Object Hockey Holiday Horror Horse Hunting Idle Island Kissing Magic Mahjong Makeup Management Match 3 Math Maze Memory Monkey Monster Monster Truck Motorcycle Mouse Multiplayer Multiplication Music Mystery Ninja Painting Parking Penguin Pet Physics Pinball Pipe Pirate Pixel Plane Platform Point And Click Poker Police Pong Pool Prison Protector Quick Quiz Racing Ragdoll Restaurant Retro Rhythm Robot Rocket Sandbox Santa School Science Shark Shooter Shootorial Side Scrolling Sim Skateboard Ski Snake Sniper Snow Soccer Solitaire Space Spider Sports Stealth Steampunk Stick Strategy Submachine Submarine Sudoku Sword Tag Tank Team Tennis Time Management Tower Defense Train Turn Based Tutorials Tycoon Typing Vampire Vector Virus War Western Wizard Wolf Word Worm Zombie Science Fiction Fighting Fantasy Turtle Hamster Hedgehog Mouse Only Keyboard Only CCG Stencyl Interactive Fiction One Button Philosophical Minimalism Arcade Atmospheric Top Down Historical Tactical Cute Isometric Rogue-Like Bullet Hell Upgrades Metroidvania Endurance Running HTML5 Minigames Launch Bubble Superhero Military Arena Combat 5 Minute Programming Relaxing Mining Controller Support GGJ14 Kongpanions Whimsy MMO Unity Armadillo Incremental PvP Student Developed Clicker KGJ1 KGJ2 Kongregate Abstract Co-op Psychological Female Protagonist Building Hack and Slash Challenging Scary Mythology Destruction Spy Survival Politics Visual Novel Occult Platformer Simulation Cyberpunk Viking Beat 'Em Up Text-Based Demo Premium Board Role Playing Trivia Beauty Casual Flash FPS .io Shooting Stickman Kongregate is an open platform for all web games and a pioneering game developer in the blockchain space. Resources Developers Players Support
3
+ creer moi une globe geant fait que des particule de couleur qui tourne en rond avec des etoile trasnparent qui clignote je veux en futuriste