index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OrbitHub Nexus</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-slate-900 text-white overflow-hidden antialiased h-screen w-screen selection:bg-indigo-500 selection:text-white">

    <!-- Background Effects -->
    <div class="fixed inset-0 z-0 pointer-events-none">
        <div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-indigo-600 rounded-full mix-blend-screen filter blur-[120px] opacity-20 animate-blob"></div>
        <div class="absolute top-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-600 rounded-full mix-blend-screen filter blur-[120px] opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute bottom-[-10%] left-[20%] w-[40%] h-[40%] bg-pink-600 rounded-full mix-blend-screen filter blur-[120px] opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <!-- Navbar Web Component -->
    <app-nav></app-nav>

    <!-- Main 3D Scene Area -->
    <main class="relative z-10 w-full h-full flex flex-col justify-center items-center perspective-container">
        
        <!-- Controls hint -->
        <div class="absolute top-24 left-1/2 transform -translate-x-1/2 text-slate-400 text-sm flex items-center gap-2 opacity-70 pointer-events-none">
            <i data-feather="mouse-pointer" class="w-4 h-4"></i>
            <span>Drag to rotate • Click room to visit • Plus to add</span>
        </div>

        <!-- 3D Carousel Container -->
        <div class="scene w-[300px] h-[400px] md:w-[400px] md:h-[500px] relative">
            <div class="carousel relative w-full h-full transform-style-3d" id="carousel">
                <!-- Rooms will be injected here via JS -->
            </div>
        </div>

        <!-- Active Room Detail (Overlay) -->
        <div id="room-detail" class="absolute bottom-10 left-1/2 transform -translate-x-1/2 translate-y-20 opacity-0 transition-all duration-500 ease-out bg-slate-800/80 backdrop-blur-md p-4 rounded-2xl border border-slate-700 shadow-2xl w-[90%] max-w-md text-center z-20">
            <h2 id="detail-title" class="text-xl font-bold text-indigo-300 mb-1 truncate">Room Title</h2>
            <p id="detail-desc" class="text-sm text-slate-300 mb-2 truncate">Room description goes here...</p>
            <a id="detail-link" href="#" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm transition-colors">
                <span>Visit Room</span>
                <i data-feather="external-link" class="w-3 h-3"></i>
            </a>
        </div>

        <!-- Add Room Button -->
        <button id="btn-add-room" class="absolute bottom-8 right-8 w-14 h-14 bg-indigo-600 hover:bg-indigo-500 text-white rounded-full shadow-lg hover:shadow-indigo-500/50 transition-all duration-300 transform hover:scale-110 flex items-center justify-center z-30 group">
            <i data-feather="plus" class="w-8 h-8 group-hover:rotate-90 transition-transform duration-300"></i>
        </button>

    </main>

    <!-- Footer Web Component -->
    <app-footer></app-footer>

    <!-- Modal Component -->
    <add-room-modal id="add-modal"></add-room-modal>

    <!-- Scripts -->
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="components/add-room-modal.js"></script>
    <script src="script.js"></script>
    <script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>