|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Interactive Solar System Cube</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.scene { |
|
|
perspective: 1000px; |
|
|
width: 100%; |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); |
|
|
} |
|
|
|
|
|
.cube { |
|
|
width: 300px; |
|
|
height: 300px; |
|
|
position: relative; |
|
|
transform-style: preserve-3d; |
|
|
animation: rotate 30s infinite linear; |
|
|
transform: rotateX(-15deg) rotateY(0deg); |
|
|
} |
|
|
|
|
|
.face { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border: 2px solid rgba(255, 255, 255, 0.1); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
background: rgba(0, 0, 0, 0.1); |
|
|
box-shadow: inset 0 0 80px rgba(0, 150, 255, 0.2); |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
|
|
|
.face::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: url('https://www.transparenttextures.com/patterns/stardust.png'); |
|
|
opacity: 0.2; |
|
|
} |
|
|
|
|
|
.front { transform: rotateY(0deg) translateZ(150px); } |
|
|
.back { transform: rotateY(180deg) translateZ(150px); } |
|
|
.right { transform: rotateY(90deg) translateZ(150px); } |
|
|
.left { transform: rotateY(-90deg) translateZ(150px); } |
|
|
.top { transform: rotateX(90deg) translateZ(150px); } |
|
|
.bottom { transform: rotateX(-90deg) translateZ(150px); } |
|
|
|
|
|
.sun { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
background: radial-gradient(circle, #ffde00, #ff7b00); |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 0 50px #ff7b00, 0 0 100px #ffde00; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.planet { |
|
|
border-radius: 50%; |
|
|
position: absolute; |
|
|
transform-style: preserve-3d; |
|
|
cursor: pointer; |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.planet:hover { |
|
|
transform: scale(1.5); |
|
|
box-shadow: 0 0 15px currentColor; |
|
|
z-index: 20; |
|
|
} |
|
|
|
|
|
.orbit { |
|
|
position: absolute; |
|
|
border: 1px dashed rgba(255, 255, 255, 0.1); |
|
|
border-radius: 50%; |
|
|
transform-style: preserve-3d; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
|
|
|
@keyframes rotate { |
|
|
from { transform: rotateX(-15deg) rotateY(0deg); } |
|
|
to { transform: rotateX(-15deg) rotateY(360deg); } |
|
|
} |
|
|
|
|
|
@keyframes planet-rotate { |
|
|
from { transform: translate(-50%, -50%) rotateZ(0deg); } |
|
|
to { transform: translate(-50%, -50%) rotateZ(360deg); } |
|
|
} |
|
|
|
|
|
.controls { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
z-index: 100; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.control-group { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
padding: 10px; |
|
|
border-radius: 50px; |
|
|
backdrop-filter: blur(5px); |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.planet-info { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
left: 20px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
padding: 15px; |
|
|
border-radius: 12px; |
|
|
max-width: 300px; |
|
|
display: none; |
|
|
backdrop-filter: blur(5px); |
|
|
border-left: 4px solid; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); |
|
|
transform: translateY(20px); |
|
|
opacity: 0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.planet-info.visible { |
|
|
display: block; |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.stats { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
margin-top: 10px; |
|
|
font-size: 0.8rem; |
|
|
color: #ccc; |
|
|
} |
|
|
|
|
|
.stat-item { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.zoom-indicator { |
|
|
margin-top: 10px; |
|
|
width: 150px; |
|
|
height: 8px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 4px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.zoom-level { |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
width: 50%; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.title { |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
text-align: center; |
|
|
z-index: 100; |
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
padding: 10px 20px; |
|
|
border-radius: 50px; |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.cube { |
|
|
width: 200px; |
|
|
height: 200px; |
|
|
} |
|
|
|
|
|
.face { |
|
|
border-width: 1px; |
|
|
} |
|
|
|
|
|
.front { transform: rotateY(0deg) translateZ(100px); } |
|
|
.back { transform: rotateY(180deg) translateZ(100px); } |
|
|
.right { transform: rotateY(90deg) translateZ(100px); } |
|
|
.left { transform: rotateY(-90deg) translateZ(100px); } |
|
|
.top { transform: rotateX(90deg) translateZ(100px); } |
|
|
.bottom { transform: rotateX(-90deg) translateZ(100px); } |
|
|
|
|
|
.sun { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
} |
|
|
|
|
|
.planet-info { |
|
|
max-width: calc(100% - 40px); |
|
|
left: 20px; |
|
|
right: 20px; |
|
|
} |
|
|
|
|
|
.control-group { |
|
|
flex-direction: column; |
|
|
border-radius: 12px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-black text-white overflow-hidden"> |
|
|
<div class="title"> |
|
|
<h1 class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Interactive Solar System Cube</h1> |
|
|
</div> |
|
|
|
|
|
<div class="scene"> |
|
|
<div class="cube"> |
|
|
|
|
|
<div class="face front"></div> |
|
|
<div class="face back"></div> |
|
|
<div class="face right"></div> |
|
|
<div class="face left"></div> |
|
|
<div class="face top"></div> |
|
|
<div class="face bottom"></div> |
|
|
|
|
|
|
|
|
<div class="sun"></div> |
|
|
|
|
|
|
|
|
<div class="orbit" style="width: 60px; height: 60px; animation: planet-rotate 2s infinite linear"> |
|
|
<div class="planet mercury" style="width: 8px; height: 8px; background: #b5b5b5; top: 0; left: 50%; color: #b5b5b5;"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="orbit" style="width: 90px; height: 90px; animation: planet-rotate 5s infinite linear"> |
|
|
<div class="planet venus" style="width: 12px; height: 12px; background: #e6c229; top: 0; left: 50%; color: #e6c229;"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="orbit" style="width: 120px; height: 120px; animation: planet-rotate 8s infinite linear"> |
|
|
<div class="planet earth" style="width: 12px; height: 12px; background: #1da1f2; top: 0; left: 50%; color: #1da1f2;"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="orbit" style="width: 150px; height: 150px; animation: planet-rotate 12s infinite linear"> |
|
|
<div class="planet mars" style="width: 10px; height: 10px; background: #e36327; top: 0; left: 50%; color: #e36327;"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="orbit" style="width: 180px; height: 180px; animation: planet-rotate 20s infinite linear"> |
|
|
<div class="planet jupiter" style="width: 20px; height: 20px; background: #e36b2d; top: 0; left: 50%; color: #e36b2d;"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="orbit" style="width: 210px; height: 210px; animation: planet-rotate 30s infinite linear"> |
|
|
<div class="planet saturn" style="width: 18px; height: 18px; background: #e3c27d; top: 0; left: 50%; color: #e3c27d;"> |
|
|
<div style="position: absolute; width: 30px; height: 5px; background: rgba(227, 194, 125, 0.5); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="orbit" style="width: 240px; height: 240px; animation: planet-rotate 40s infinite linear"> |
|
|
<div class="planet uranus" style="width: 14px; height: 14px; background: #4fd0e7; top: 0; left: 50%; color: #4fd0e7;"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="orbit" style="width: 270px; height: 270px; animation: planet-rotate 50s infinite linear"> |
|
|
<div class="planet neptune" style="width: 14px; height: 14px; background: #5b73e8; top: 0; left: 50%; color: #5b73e8;"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="planet-info" id="planetInfo"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<div id="planetIcon" class="w-6 h-6 rounded-full"></div> |
|
|
<h3 class="font-bold text-lg" id="planetName">Planeta</h3> |
|
|
</div> |
|
|
<p class="text-sm mt-2" id="planetDescription">Información sobre el planeta</p> |
|
|
<div class="stats mt-3"> |
|
|
<div class="stat-item"> |
|
|
<span class="text-xs opacity-70">Distancia</span> |
|
|
<span id="planetDistance" class="font-medium">0 AU</span> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<span class="text-xs opacity-70">Periodo</span> |
|
|
<span id="planetPeriod" class="font-medium">0 días</span> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<span class="text-xs opacity-70">Lunas</span> |
|
|
<span id="planetMoons" class="font-medium">0</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="controls"> |
|
|
<div class="control-group"> |
|
|
<button onclick="toggleAnimation()" class="bg-blue-600 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center transition-all"> |
|
|
<i class="fas fa-pause" id="playPauseIcon"></i> |
|
|
</button> |
|
|
<button onclick="zoomIn()" class="bg-green-600 hover:bg-green-700 w-10 h-10 rounded-full flex items-center justify-center transition-all"> |
|
|
<i class="fas fa-search-plus"></i> |
|
|
</button> |
|
|
<button onclick="zoomOut()" class="bg-red-600 hover:bg-red-700 w-10 h-10 rounded-full flex items-center justify-center transition-all"> |
|
|
<i class="fas fa-search-minus"></i> |
|
|
</button> |
|
|
<button onclick="resetView()" class="bg-purple-600 hover:bg-purple-700 w-10 h-10 rounded-full flex items-center justify-center transition-all"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="zoom-indicator"> |
|
|
<div class="zoom-level" id="zoomLevel"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const cube = document.querySelector('.cube'); |
|
|
const planetInfo = document.getElementById('planetInfo'); |
|
|
const playPauseIcon = document.getElementById('playPauseIcon'); |
|
|
const zoomLevel = document.getElementById('zoomLevel'); |
|
|
let isRotating = true; |
|
|
let currentZoom = 50; |
|
|
|
|
|
|
|
|
const planets = { |
|
|
mercury: { |
|
|
name: "Mercurio", |
|
|
description: "El planeta más pequeño y cercano al Sol. Temperaturas extremas de -173°C a 427°C. No tiene atmósfera real para retener el calor.", |
|
|
distance: "0.39 AU", |
|
|
period: "88 días", |
|
|
moons: 0, |
|
|
color: "#b5b5b5", |
|
|
icon: "fas fa-temperature-high" |
|
|
}, |
|
|
venus: { |
|
|
name: "Venus", |
|
|
description: "El planeta más caliente (462°C) con una atmósfera densa de CO₂. Brillo intenso desde la Tierra. Gira en dirección contraria a la mayoría de planetas.", |
|
|
distance: "0.72 AU", |
|
|
period: "225 días", |
|
|
moons: 0, |
|
|
color: "#e6c229", |
|
|
icon: "fas fa-fire" |
|
|
}, |
|
|
earth: { |
|
|
name: "Tierra", |
|
|
description: "Nuestro hogar. Único planeta conocido con vida. 71% cubierto por agua. Tiene un poderoso campo magnético que nos protege de la radiación solar.", |
|
|
distance: "1 AU", |
|
|
period: "365 días", |
|
|
moons: 1, |
|
|
color: "#1da1f2", |
|
|
icon: "fas fa-globe-americas" |
|
|
}, |
|
|
mars: { |
|
|
name: "Marte", |
|
|
description: "El planeta rojo. Tiene el volcán más grande del sistema solar (Olympus Mons). Posee dos pequeñas lunas: Fobos y Deimos.", |
|
|
distance: "1.52 AU", |
|
|
period: "687 días", |
|
|
moons: 2, |
|
|
color: "#e36327", |
|
|
icon: "fas fa-mountain" |
|
|
}, |
|
|
jupiter: { |
|
|
name: "Júpiter", |
|
|
description: "El planeta más grande. Tiene 79 lunas conocidas y la Gran Mancha Roja (tormenta gigante que lleva siglos activa). Su masa es 2.5 veces la de todos los otros planetas juntos.", |
|
|
distance: "5.20 AU", |
|
|
period: "12 años", |
|
|
moons: 79, |
|
|
color: "#e36b2d", |
|
|
icon: "fas fa-star" |
|
|
}, |
|
|
saturn: { |
|
|
name: "Saturno", |
|
|
description: "Conocido por sus espectaculares anillos hechos de hielo y roca. Es el planeta menos denso del sistema solar; podría flotar en agua.", |
|
|
distance: "9.58 AU", |
|
|
period: "29 años", |
|
|
moons: 82, |
|
|
color: "#e3c27d", |
|
|
icon: "fas fa-ring" |
|
|
}, |
|
|
uranus: { |
|
|
name: "Urano", |
|
|
description: "Gira de lado (97° de inclinación). Tiene 13 anillos y 27 lunas. Su atmósfera contiene metano, que le da su color azul verdoso.", |
|
|
distance: "19.20 AU", |
|
|
period: "84 años", |
|
|
moons: 27, |
|
|
color: "#4fd0e7", |
|
|
icon: "fas fa-undo" |
|
|
}, |
|
|
neptune: { |
|
|
name: "Neptuno", |
|
|
description: "El planeta más ventoso (vientos de 2,100 km/h). Tarda 165 años en orbitar el Sol. Fue el primer planeta encontrado mediante predicciones matemáticas.", |
|
|
distance: "30.05 AU", |
|
|
period: "165 años", |
|
|
moons: 14, |
|
|
color: "#5b73e8", |
|
|
icon: "fas fa-wind" |
|
|
}, |
|
|
sun: { |
|
|
name: "Sol", |
|
|
description: "Nuestra estrella. Contiene el 99.86% de la masa del sistema solar. Su núcleo alcanza 15 millones de °C, donde ocurre la fusión nuclear.", |
|
|
distance: "0 AU", |
|
|
period: "25 días (rotación ecuatorial)", |
|
|
moons: "Todos los planetas", |
|
|
color: "#ff7b00", |
|
|
icon: "fas fa-sun" |
|
|
} |
|
|
}; |
|
|
|
|
|
function toggleAnimation() { |
|
|
isRotating = !isRotating; |
|
|
if (isRotating) { |
|
|
cube.style.animationPlayState = 'running'; |
|
|
document.querySelectorAll('.orbit').forEach(orbit => { |
|
|
orbit.style.animationPlayState = 'running'; |
|
|
}); |
|
|
playPauseIcon.classList.remove('fa-play'); |
|
|
playPauseIcon.classList.add('fa-pause'); |
|
|
} else { |
|
|
cube.style.animationPlayState = 'paused'; |
|
|
document.querySelectorAll('.orbit').forEach(orbit => { |
|
|
orbit.style.animationPlayState = 'paused'; |
|
|
}); |
|
|
playPauseIcon.classList.remove('fa-pause'); |
|
|
playPauseIcon.classList.add('fa-play'); |
|
|
} |
|
|
} |
|
|
|
|
|
function zoomIn() { |
|
|
const currentSize = parseInt(cube.style.width) || 300; |
|
|
if (currentSize < 500) { |
|
|
cube.style.width = `${currentSize + 50}px`; |
|
|
cube.style.height = `${currentSize + 50}px`; |
|
|
updateCubeFaces(currentSize + 50); |
|
|
currentZoom = Math.min(100, currentZoom + 10); |
|
|
updateZoomIndicator(); |
|
|
} |
|
|
} |
|
|
|
|
|
function zoomOut() { |
|
|
const currentSize = parseInt(cube.style.width) || 300; |
|
|
if (currentSize > 150) { |
|
|
cube.style.width = `${currentSize - 50}px`; |
|
|
cube.style.height = `${currentSize - 50}px`; |
|
|
updateCubeFaces(currentSize - 50); |
|
|
currentZoom = Math.max(0, currentZoom - 10); |
|
|
updateZoomIndicator(); |
|
|
} |
|
|
} |
|
|
|
|
|
function resetView() { |
|
|
cube.style.width = '300px'; |
|
|
cube.style.height = '300px'; |
|
|
updateCubeFaces(300); |
|
|
cube.style.transform = 'rotateX(-15deg) rotateY(0deg)'; |
|
|
currentZoom = 50; |
|
|
updateZoomIndicator(); |
|
|
|
|
|
if (!isRotating) { |
|
|
toggleAnimation(); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateZoomIndicator() { |
|
|
zoomLevel.style.width = `${currentZoom}%`; |
|
|
} |
|
|
|
|
|
function updateCubeFaces(size) { |
|
|
const translateZ = size / 2; |
|
|
document.querySelector('.front').style.transform = `rotateY(0deg) translateZ(${translateZ}px)`; |
|
|
document.querySelector('.back').style.transform = `rotateY(180deg) translateZ(${translateZ}px)`; |
|
|
document.querySelector('.right').style.transform = `rotateY(90deg) translateZ(${translateZ}px)`; |
|
|
document.querySelector('.left').style.transform = `rotateY(-90deg) translateZ(${translateZ}px)`; |
|
|
document.querySelector('.top').style.transform = `rotateX(90deg) translateZ(${translateZ}px)`; |
|
|
document.querySelector('.bottom').style.transform = `rotateX(-90deg) translateZ(${translateZ}px)`; |
|
|
|
|
|
|
|
|
const sun = document.querySelector('.sun'); |
|
|
const newSunSize = size / 6; |
|
|
sun.style.width = `${newSunSize}px`; |
|
|
sun.style.height = `${newSunSize}px`; |
|
|
|
|
|
|
|
|
const orbits = document.querySelectorAll('.orbit'); |
|
|
const orbitSizes = [60, 90, 120, 150, 180, 210, 240, 270]; |
|
|
const scaleFactor = size / 300; |
|
|
|
|
|
orbits.forEach((orbit, index) => { |
|
|
const newSize = orbitSizes[index] * scaleFactor; |
|
|
orbit.style.width = `${newSize}px`; |
|
|
orbit.style.height = `${newSize}px`; |
|
|
|
|
|
|
|
|
const planet = orbit.querySelector('.planet'); |
|
|
const planetSize = parseFloat(planet.style.width) / (300 / size); |
|
|
planet.style.width = `${planetSize}px`; |
|
|
planet.style.height = `${planetSize}px`; |
|
|
|
|
|
|
|
|
if (planet.classList.contains('saturn')) { |
|
|
const ring = planet.querySelector('div'); |
|
|
const ringWidth = 30 * scaleFactor; |
|
|
const ringHeight = 5 * scaleFactor; |
|
|
ring.style.width = `${ringWidth}px`; |
|
|
ring.style.height = `${ringHeight}px`; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.planet, .sun').forEach(planet => { |
|
|
planet.addEventListener('mouseenter', (e) => { |
|
|
const planetClass = Array.from(e.target.classList).find(cls => cls in planets); |
|
|
if (planetClass) { |
|
|
const info = planets[planetClass]; |
|
|
|
|
|
|
|
|
document.getElementById('planetName').textContent = info.name; |
|
|
document.getElementById('planetDescription').textContent = info.description; |
|
|
document.getElementById('planetDistance').textContent = info.distance; |
|
|
document.getElementById('planetPeriod').textContent = info.period; |
|
|
document.getElementById('planetMoons').textContent = info.moons; |
|
|
|
|
|
|
|
|
const planetIcon = document.getElementById('planetIcon'); |
|
|
planetIcon.className = ''; |
|
|
planetIcon.classList.add('w-6', 'h-6', 'rounded-full', 'flex', 'items-center', 'justify-center'); |
|
|
planetIcon.style.background = info.color; |
|
|
|
|
|
const icon = document.createElement('i'); |
|
|
icon.className = info.icon + ' text-white text-xs'; |
|
|
planetIcon.appendChild(icon); |
|
|
|
|
|
|
|
|
planetInfo.style.borderLeftColor = info.color; |
|
|
|
|
|
|
|
|
planetInfo.classList.add('visible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
planet.addEventListener('mouseleave', () => { |
|
|
planetInfo.classList.remove('visible'); |
|
|
}); |
|
|
|
|
|
planet.addEventListener('click', (e) => { |
|
|
const planetClass = Array.from(e.target.classList).find(cls => cls in planets); |
|
|
if (planetClass) { |
|
|
const info = planets[planetClass]; |
|
|
alert(`Has seleccionado ${info.name}!\n${info.description}`); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
let isDragging = false; |
|
|
let previousMousePosition = { x: 0, y: 0 }; |
|
|
let currentRotation = { x: -15, y: 0 }; |
|
|
|
|
|
cube.addEventListener('mousedown', (e) => { |
|
|
isDragging = true; |
|
|
previousMousePosition = { x: e.clientX, y: e.clientY }; |
|
|
cube.style.cursor = 'grabbing'; |
|
|
}); |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
if (!isDragging) return; |
|
|
|
|
|
const deltaMove = { |
|
|
x: e.clientX - previousMousePosition.x, |
|
|
y: e.clientY - previousMousePosition.y |
|
|
}; |
|
|
|
|
|
currentRotation.y += deltaMove.x * 0.5; |
|
|
currentRotation.x = Math.max(-90, Math.min(90, currentRotation.x - deltaMove.y * 0.5)); |
|
|
|
|
|
cube.style.transform = `rotateX(${currentRotation.x}deg) rotateY(${currentRotation.y}deg)`; |
|
|
previousMousePosition = { x: e.clientX, y: e.clientY }; |
|
|
}); |
|
|
|
|
|
document.addEventListener('mouseup', () => { |
|
|
isDragging = false; |
|
|
cube.style.cursor = 'grab'; |
|
|
}); |
|
|
|
|
|
|
|
|
cube.addEventListener('touchstart', (e) => { |
|
|
isDragging = true; |
|
|
previousMousePosition = { |
|
|
x: e.touches[0].clientX, |
|
|
y: e.touches[0].clientY |
|
|
}; |
|
|
e.preventDefault(); |
|
|
}, { passive: false }); |
|
|
|
|
|
document.addEventListener('touchmove', (e) => { |
|
|
if (!isDragging) return; |
|
|
|
|
|
const deltaMove = { |
|
|
x: e.touches[0].clientX - previousMousePosition.x, |
|
|
y: e.touches[0].clientY - previousMousePosition.y |
|
|
}; |
|
|
|
|
|
currentRotation.y += deltaMove.x * 0.5; |
|
|
currentRotation.x = Math.max(-90, Math.min(90, currentRotation.x - deltaMove.y * 0.5)); |
|
|
|
|
|
cube.style.transform = `rotateX(${currentRotation.x}deg) rotateY(${currentRotation.y}deg)`; |
|
|
previousMousePosition = { |
|
|
x: e.touches[0].clientX, |
|
|
y: e.touches[0].clientY |
|
|
}; |
|
|
|
|
|
e.preventDefault(); |
|
|
}, { passive: false }); |
|
|
|
|
|
document.addEventListener('touchend', () => { |
|
|
isDragging = false; |
|
|
}); |
|
|
|
|
|
|
|
|
updateZoomIndicator(); |
|
|
</script> |
|
|
<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=Ateneo/interactive-solar-system-cube" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
