Spaces:
Running
Running
홈페이지를 하나 만드는데, 3차원으로 커다란 원형 형태로 된 빌딩이 있는데, 그 빌딩을 회전하면서 그 안에 입주된 방을 하나의 페이지 링크로 사용하는거지. 건물을 빙빙돌려가면 전면부에 각 방에 대해 말풍선 뜨든 그 방이 조금 확대되든 어떤 식으로든 표시를 해 줘야겠지. 그리고 새로운 페이지를 만들려면 빈 방을 클릭해서 URL을 링크를 걸면, 자동으로 그 URL의 대표이미지와 메타 정보를 가져와서 스냅샵처럼 보여주면 되겠다.
Browse files
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji: 🐢
|
| 4 |
colorFrom: red
|
| 5 |
-
colorTo:
|
|
|
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: OrbitHub Nexus 🪐
|
|
|
|
| 3 |
colorFrom: red
|
| 4 |
+
colorTo: blue
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
index.html
CHANGED
|
@@ -1,19 +1,72 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>OrbitHub Nexus</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<link rel="stylesheet" href="style.css">
|
| 12 |
+
</head>
|
| 13 |
+
<body class="bg-slate-900 text-white overflow-hidden antialiased h-screen w-screen selection:bg-indigo-500 selection:text-white">
|
| 14 |
+
|
| 15 |
+
<!-- Background Effects -->
|
| 16 |
+
<div class="fixed inset-0 z-0 pointer-events-none">
|
| 17 |
+
<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>
|
| 18 |
+
<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>
|
| 19 |
+
<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>
|
| 20 |
+
</div>
|
| 21 |
+
|
| 22 |
+
<!-- Navbar Web Component -->
|
| 23 |
+
<app-nav></app-nav>
|
| 24 |
+
|
| 25 |
+
<!-- Main 3D Scene Area -->
|
| 26 |
+
<main class="relative z-10 w-full h-full flex flex-col justify-center items-center perspective-container">
|
| 27 |
+
|
| 28 |
+
<!-- Controls hint -->
|
| 29 |
+
<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">
|
| 30 |
+
<i data-feather="mouse-pointer" class="w-4 h-4"></i>
|
| 31 |
+
<span>Drag to rotate • Click room to visit • Plus to add</span>
|
| 32 |
+
</div>
|
| 33 |
+
|
| 34 |
+
<!-- 3D Carousel Container -->
|
| 35 |
+
<div class="scene w-[300px] h-[400px] md:w-[400px] md:h-[500px] relative">
|
| 36 |
+
<div class="carousel relative w-full h-full transform-style-3d" id="carousel">
|
| 37 |
+
<!-- Rooms will be injected here via JS -->
|
| 38 |
+
</div>
|
| 39 |
+
</div>
|
| 40 |
+
|
| 41 |
+
<!-- Active Room Detail (Overlay) -->
|
| 42 |
+
<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">
|
| 43 |
+
<h2 id="detail-title" class="text-xl font-bold text-indigo-300 mb-1 truncate">Room Title</h2>
|
| 44 |
+
<p id="detail-desc" class="text-sm text-slate-300 mb-2 truncate">Room description goes here...</p>
|
| 45 |
+
<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">
|
| 46 |
+
<span>Visit Room</span>
|
| 47 |
+
<i data-feather="external-link" class="w-3 h-3"></i>
|
| 48 |
+
</a>
|
| 49 |
+
</div>
|
| 50 |
+
|
| 51 |
+
<!-- Add Room Button -->
|
| 52 |
+
<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">
|
| 53 |
+
<i data-feather="plus" class="w-8 h-8 group-hover:rotate-90 transition-transform duration-300"></i>
|
| 54 |
+
</button>
|
| 55 |
+
|
| 56 |
+
</main>
|
| 57 |
+
|
| 58 |
+
<!-- Footer Web Component -->
|
| 59 |
+
<app-footer></app-footer>
|
| 60 |
+
|
| 61 |
+
<!-- Modal Component -->
|
| 62 |
+
<add-room-modal id="add-modal"></add-room-modal>
|
| 63 |
+
|
| 64 |
+
<!-- Scripts -->
|
| 65 |
+
<script src="components/navbar.js"></script>
|
| 66 |
+
<script src="components/footer.js"></script>
|
| 67 |
+
<script src="components/add-room-modal.js"></script>
|
| 68 |
+
<script src="script.js"></script>
|
| 69 |
+
<script>feather.replace();</script>
|
| 70 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 71 |
+
</body>
|
| 72 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/**
|
| 2 |
+
* OrbitHub Nexus - Core Logic
|
| 3 |
+
*/
|
| 4 |
+
|
| 5 |
+
// State
|
| 6 |
+
const state = {
|
| 7 |
+
rooms: [
|
| 8 |
+
{
|
| 9 |
+
id: 1,
|
| 10 |
+
title: 'Google',
|
| 11 |
+
url: 'https://google.com',
|
| 12 |
+
image: 'http://static.photos/technology/640x360{"ok":false,"message":"terminated"}
|
style.css
CHANGED
|
@@ -1,28 +1,126 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
|
|
|
| 16 |
}
|
| 17 |
|
| 18 |
-
.
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
.
|
| 27 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/* Custom 3D Scene Styles */
|
| 2 |
+
:root {
|
| 3 |
+
--primary: #4f46e5;
|
| 4 |
+
--secondary: #0f172a;
|
| 5 |
+
--accent: #818cf8;
|
| 6 |
+
}
|
| 7 |
+
|
| 8 |
body {
|
| 9 |
+
margin: 0;
|
| 10 |
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
| 11 |
+
perspective: 1000px; /* Global perspective just in case */
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
.perspective-container {
|
| 15 |
+
perspective: 1200px;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
.scene {
|
| 19 |
+
perspective: 1200px;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
.carousel {
|
| 23 |
+
transform-style: preserve-3d;
|
| 24 |
+
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
/* Room Card Styling */
|
| 28 |
+
.room-card {
|
| 29 |
+
position: absolute;
|
| 30 |
+
width: 100%;
|
| 31 |
+
height: 100%;
|
| 32 |
+
left: 0;
|
| 33 |
+
top: 0;
|
| 34 |
+
border-radius: 20px;
|
| 35 |
+
background: rgba(30, 41, 59, 0.7);
|
| 36 |
+
backdrop-filter: blur(10px);
|
| 37 |
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
| 38 |
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
| 39 |
+
display: flex;
|
| 40 |
+
flex-direction: column;
|
| 41 |
+
overflow: hidden;
|
| 42 |
+
transform-style: preserve-3d;
|
| 43 |
+
transition: all 0.5s ease;
|
| 44 |
+
cursor: pointer;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
.room-card:hover {
|
| 48 |
+
border-color: var(--accent);
|
| 49 |
+
box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
|
| 50 |
}
|
| 51 |
|
| 52 |
+
.room-card.active {
|
| 53 |
+
box-shadow: 0 0 30px rgba(99, 102, 241, 0.6);
|
| 54 |
+
border: 2px solid var(--primary);
|
| 55 |
}
|
| 56 |
|
| 57 |
+
.room-card::before {
|
| 58 |
+
content: '';
|
| 59 |
+
position: absolute;
|
| 60 |
+
inset: 0;
|
| 61 |
+
background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
|
| 62 |
+
pointer-events: none;
|
| 63 |
}
|
| 64 |
|
| 65 |
+
.room-image {
|
| 66 |
+
width: 100%;
|
| 67 |
+
height: 60%;
|
| 68 |
+
object-fit: cover;
|
| 69 |
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
|
| 70 |
}
|
| 71 |
|
| 72 |
+
.room-content {
|
| 73 |
+
padding: 1.5rem;
|
| 74 |
+
flex-grow: 1;
|
| 75 |
+
display: flex;
|
| 76 |
+
flex-direction: column;
|
| 77 |
+
justify-content: center;
|
| 78 |
+
align-items: center;
|
| 79 |
+
text-align: center;
|
| 80 |
+
transform: translateZ(20px); /* Pop out text */
|
| 81 |
}
|
| 82 |
+
|
| 83 |
+
/* Empty Room State */
|
| 84 |
+
.room-card.empty-state {
|
| 85 |
+
background: rgba(15, 23, 42, 0.6);
|
| 86 |
+
border: 2px dashed rgba(99, 102, 241, 0.3);
|
| 87 |
+
display: flex;
|
| 88 |
+
justify-content: center;
|
| 89 |
+
align-items: center;
|
| 90 |
+
}
|
| 91 |
+
.room-card.empty-state:hover {
|
| 92 |
+
background: rgba(99, 102, 241, 0.1);
|
| 93 |
+
border-color: var(--accent);
|
| 94 |
+
}
|
| 95 |
+
.plus-icon-large {
|
| 96 |
+
width: 64px;
|
| 97 |
+
height: 64px;
|
| 98 |
+
color: rgba(99, 102, 241, 0.5);
|
| 99 |
+
transition: transform 0.3s;
|
| 100 |
+
}
|
| 101 |
+
.room-card.empty-state:hover .plus-icon-large {
|
| 102 |
+
transform: scale(1.2) rotate(90deg);
|
| 103 |
+
color: var(--accent);
|
| 104 |
+
}
|
| 105 |
+
|
| 106 |
+
/* Animations */
|
| 107 |
+
@keyframes blob {
|
| 108 |
+
0% { transform: translate(0px, 0px) scale(1); }
|
| 109 |
+
33% { transform: translate(30px, -50px) scale(1.1); }
|
| 110 |
+
66% { transform: translate(-20px, 20px) scale(0.9); }
|
| 111 |
+
100% { transform: translate(0px, 0px) scale(1); }
|
| 112 |
+
}
|
| 113 |
+
.animate-blob {
|
| 114 |
+
animation: blob 7s infinite;
|
| 115 |
+
}
|
| 116 |
+
.animation-delay-2000 {
|
| 117 |
+
animation-delay: 2s;
|
| 118 |
+
}
|
| 119 |
+
.animation-delay-4000 {
|
| 120 |
+
animation-delay: 4s;
|
| 121 |
+
}
|
| 122 |
+
|
| 123 |
+
/* Scrollbar hide */
|
| 124 |
+
::-webkit-scrollbar {
|
| 125 |
+
display: none;
|
| 126 |
+
}
|