Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,212 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, Stars } from '@react-three/drei';
+import * as THREE from 'three';
+import Navbar from '../components/Navbar';
+import PlanetInfo from '../components/PlanetInfo';
+import StarField from '../components/StarField';
+import Sun from '../components/Sun';
+import Planet from '../components/Planet';
+
+export default function SolarSystem() {
+  const [selectedPlanet, setSelectedPlanet] = useState(null);
+  const [speed, setSpeed] = useState(1);
+  const [cameraDistance, setCameraDistance] = useState(100);
+  const [viewMode, setViewMode] = useState('solar-system');
+  const [planetData, setPlanetData] = useState(null);
+
+  // Planet data configuration
+  const planets = [
+    { 
+      name: "Mercury", 
+      size: 2, 
+      distance: 30, 
+      speed: 0.04, 
+      color: "#A5A5A5",
+      texture: null,
+      onClick: () => handlePlanetClick("mercury")
+    },
+    { 
+      name: "Venus", 
+      size: 3.5, 
+      distance: 45, 
+      speed: 0.03, 
+      color: "#E3BB76",
+      texture: null,
+      onClick: () => handlePlanetClick("venus")
+    },
+    { 
+      name: "Earth", 
+      size: 3.6, 
+      distance: 60, 
+      speed: 0.02, 
+      color: "#22A6B3",
+      texture: null,
+      onClick: () => handlePlanetClick("earth")
+    },
+    { 
+      name: "Mars", 
+      size: 2.8, 
+      distance: 75, 
+      speed: 0.018, 
+      color: "#FF6B6B",
+      texture: null,
+      onClick: () => handlePlanetClick("mars")
+    },
+    { 
+      name: "Jupiter", 
+      size: 10, 
+      distance: 100, 
+      speed: 0.012, 
+      color: "#DDA15E",
+      texture: null,
+      onClick: () => handlePlanetClick("jupiter")
+    },
+    { 
+      name: "Saturn", 
+      size: 8.5, 
+      distance: 130, 
+      speed: 0.01, 
+      color: "#BC8F5F",
+      texture: null,
+      hasRings: true,
+      onClick: () => handlePlanetClick("saturn")
+    },
+    { 
+      name: "Uranus", 
+      size: 6, 
+      distance: 160, 
+      speed: 0.008, 
+      color: "#7ED6DF",
+      texture: null,
+      onClick: () => handlePlanetClick("uranus")
+    },
+    { 
+      name: "Neptune", 
+      size: 5.8, 
+      distance: 190, 
+      speed: 0.006, 
+      color: "#219EBD",
+      texture: null,
+      onClick: () => handlePlanetClick("neptune")
+    }
+  ];
+
+  const handlePlanetClick = (planetName) => {
+    setSelectedPlanet(planetName);
+    // Update camera position for better view
+    setCameraDistance(40);
+  };
+
+  const handleClosePlanetInfo = () => {
+    setSelectedPlanet(null);
+    setCameraDistance(100);
+  };
+
+  return (
+    <div className="min-h-screen bg-black text-white font-sans overflow-hidden">
+      {/* Navbar */}
+      <Navbar 
+        setView={setViewMode} 
+        speed={speed} 
+        setSpeed={setSpeed} 
+      />
+
+      {/* 3D Canvas */}
+      <div className="h-screen w-full relative">
+        <Canvas camera={{ position: [0, 80, 100], fov: 60 }}>
+          {/* Lights */}
+          <ambientLight intensity={0.2} />
+          <pointLight position={[100, 100, 50]} intensity={1} color="#FFFFFF" />
+          
+          {/* Controls */}
+          <OrbitControls 
+            enablePan={false}
+            minDistance={20}
+            maxDistance={500}
+            rotateSpeed={0.5}
+            zoomSpeed={0.8}
+            dampingFactor={0.1}
+          />
+          
+          {/* Starfield */}
+          <StarField count={2000} />
+          
+          {/* Sun */}
+          <Sun 
+            onClick={() => handlePlanetClick('sun')} 
+          />
+          
+          {/* Planets */}
+          {planets.map((planet) => (
+            <Planet 
+              key={planet.name}
+              name={planet.name}
+              size={planet.size}
+              distance={planet.distance}
+              speed={planet.speed * speed}
+              color={planet.color}
+              texture={planet.texture}
+              onClick={planet.onClick}
+              hasRings={planet.hasRings}
+            />
+          ))}
+          
+          {/* Orbit lines for clarity */}
+          <group>
+            {planets.map((planet, i) => (
+              <mesh key={`orbit-${i}`} rotation={[-Math.PI / 2, 0, 0]}>
+                <ringGeometry args={[planet.distance - 0.2, planet.distance + 0.2, 64]} />
+                <meshBasicMaterial color="#FFFFFF" transparent opacity={0.05} />
+              </mesh>
+            ))}
+          </group>
+        </Canvas>
+        
+        {/* Planet Info Modal */}
+        {selectedPlanet && (
+          <PlanetInfo 
+            planet={selectedPlanet} 
+            onClose={handleClosePlanetInfo} 
+          />
+        )}
+
+        {/* Info Panel */}
+        <div className="absolute bottom-6 left-6 right-6 md:left-10 md:right-auto md:w-80 bg-black/60 backdrop-blur-md rounded-xl border border-white/10 p-6 z-10">
+          <h2 className="text-xl font-bold mb-3 bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">
+            Interactive Solar System
+          </h2>
+          <p className="text-gray-300 mb-4 text-sm">
+            Click on any planet to learn more about it. Use your mouse to rotate, zoom, and explore the solar system.
+          </p>
+          <div className="space-y-2 text-xs text-gray-400">
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-yellow-400 shadow-[0_0_8px_rgba(253,224,71,0.8)]"></div>
+              <span>Click the Sun or planets to explore</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-blue-500"></div>
+              <span>Earth is our home planet</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-red-500"></div>
+              <span>Mars - the Red Planet</span>
+            </div>
+          </div>
+        </div>
+        
+        {/* Footer Attribution */}
+        <div className="absolute bottom-4 right-4 z-10">
+          <a 
+            href="https://huggingface.co/spaces/akhaliq/anycoder" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="text-xs text-gray-500 hover:text-gray-300 transition-colors"
+          >
+            Built with anycoder
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}