3D Solar System & Planetary Orbit Motion

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Solar System Orbit</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
    <style>
        body { margin: 0; overflow: hidden; }
        .space-container { perspective: 1000px; }
        .solar-system { transform-style: preserve-3d; transform: rotateX(65deg) rotateY(-10deg); }
        .orbit { border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 50%; position: absolute; transform-style: preserve-3d; animation: spin linear infinite; }
        .dark .orbit { border: 1px solid rgba(255, 255, 255, 0.15); }
        .planet { border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
        @keyframes spin { 100% { transform: rotateZ(360deg); } }
    </style>
</head>
<body class="h-full flex items-center justify-center space-container bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors duration-300">

    <div class="absolute top-6 z-20 text-center pointer-events-none">
        <h1 class="text-3xl font-extrabold text-slate-900 dark:text-white tracking-widest uppercase">3D Solar System</h1>
        <p class="text-xs text-purple-600 dark:text-purple-400 font-mono mt-1">Pure CSS3 3D Orbital Mechanics</p>
    </div>

    <!-- Solar System Workspace -->
    <div class="solar-system w-[600px] h-[600px] relative flex items-center justify-center">
        <!-- Sun -->
        <div class="w-16 h-16 bg-amber-400 rounded-full shadow-[0_0_50px_#f59e0b] relative z-10"></div>

        <!-- Mercury -->
        <div class="orbit w-[120px] h-[120px]" style="animation-duration: 4s;">
            <div class="planet w-3 h-3 bg-slate-500 dark:bg-slate-400 shadow-[0_0_8px_#94a3b8]"></div>
        </div>

        <!-- Venus -->
        <div class="orbit w-[180px] h-[180px]" style="animation-duration: 7s;">
            <div class="planet w-4 h-4 bg-amber-500 dark:bg-amber-200 shadow-[0_0_10px_#fde68a]"></div>
        </div>

        <!-- Earth -->
        <div class="orbit w-[260px] h-[260px]" style="animation-duration: 12s;">
            <div class="planet w-5 h-5 bg-cyan-600 dark:bg-cyan-500 shadow-[0_0_12px_#06b6d4]"></div>
        </div>

        <!-- Mars -->
        <div class="orbit w-[340px] h-[340px]" style="animation-duration: 18s;">
            <div class="planet w-4 h-4 bg-rose-600 dark:bg-rose-500 shadow-[0_0_10px_#f43f5e]"></div>
        </div>

        <!-- Jupiter -->
        <div class="orbit w-[450px] h-[450px]" style="animation-duration: 30s;">
            <div class="planet w-8 h-8 bg-amber-700 dark:bg-amber-600 shadow-[0_0_15px_#d97706]"></div>
        </div>
    </div>

</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file