Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +321 -19
- prompts.txt +3 -0
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
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 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|