Spaces:

U2
/

orbithub-nexus

Running

홈페이지를 하나 만드는데, 3차원으로 커다란 원형 형태로 된 빌딩이 있는데, 그 빌딩을 회전하면서 그 안에 입주된 방을 하나의 페이지 링크로 사용하는거지. 건물을 빙빙돌려가면 전면부에 각 방에 대해 말풍선 뜨든 그 방이 조금 확대되든 어떤 식으로든 표시를 해 줘야겠지. 그리고 새로운 페이지를 만들려면 빈 방을 클릭해서 URL을 링크를 걸면, 자동으로 그 URL의 대표이미지와 메타 정보를 가져와서 스냅샵처럼 보여주면 되겠다.

2c04447 verified 4 months ago

raw

history blame contribute delete

3.94 kB

	<!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>