-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
260 lines (236 loc) · 13.2 KB
/
Copy pathindex.html
File metadata and controls
260 lines (236 loc) · 13.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>3D Learning Hub | Education Evolved</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: { sans: ['Outfit', 'sans-serif'] },
colors: {
brand: {
dark: '#0B0F19',
DEFAULT: '#00F0FF',
accent: '#7000FF'
}
},
backgroundImage: {
'hero-pattern': "radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.05) 0%, transparent 50%), linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px)",
},
backgroundSize: {
'hero-pattern': '100% 100%, 40px 40px, 40px 40px'
},
animation: {
'fade-in-up': 'fadeInUp 1s ease-out forwards',
'float': 'float 8s ease-in-out infinite',
'pulse-glow': 'pulseGlow 4s ease-in-out infinite'
},
keyframes: {
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(30px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-15px)' },
},
pulseGlow: {
'0%, 100%': { opacity: '0.3', transform: 'scale(1)' },
'50%': { opacity: '0.6', transform: 'scale(1.1)' },
}
}
}
}
}
</script>
<style>
body {
background-color: #050810;
color: #fff;
}
/* Darker background */
.glass-card {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Bouncier transition */
}
.glass-card:hover {
border-color: rgba(0, 240, 255, 0.4);
transform: translateY(-12px) scale(1.03);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
box-shadow: 0 25px 50px -12px rgba(0, 240, 255, 0.15), 0 0 20px rgba(0, 240, 255, 0.1) inset;
}
/* Decorative Background Blob */
.blob {
position: absolute;
background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
border-radius: 50%;
filter: blur(80px);
z-index: -1;
}
</style>
</head>
<body class="min-h-screen flex flex-col bg-hero-pattern bg-fixed relative overflow-x-hidden">
<!-- Decorative Blobs -->
<div class="blob w-[800px] h-[800px] -top-40 -left-40 animate-pulse-glow"></div>
<div class="blob w-[600px] h-[600px] bottom-0 right-0 bg-brand-accent/20 animate-pulse-glow"
style="animation-delay: 2s;"></div>
<!-- Navigation -->
<nav class="border-b border-white/5 backdrop-blur-xl sticky top-0 z-50 bg-black/20">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div class="flex items-center space-x-3 group cursor-pointer">
<div
class="w-10 h-10 bg-gradient-to-tr from-brand to-brand-accent rounded-xl shadow-[0_0_15px_rgba(0,240,255,0.3)] group-hover:shadow-[0_0_25px_rgba(0,240,255,0.5)] transition-all duration-300">
</div>
<span
class="text-2xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400 group-hover:to-white transition-all">3D
HUB</span>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex space-x-8 text-sm font-medium text-gray-400">
<a href="index.html"
class="text-white relative after:content-[''] after:absolute after:-bottom-1 after:left-0 after:w-full after:h-px after:bg-brand">Home</a>
<a href="modules.html" class="hover:text-brand transition-colors relative group">Explorer <span
class="absolute -bottom-1 left-0 w-0 h-px bg-brand transition-all group-hover:w-full"></span></a>
<a href="about.html" class="hover:text-brand transition-colors relative group">About <span
class="absolute -bottom-1 left-0 w-0 h-px bg-brand transition-all group-hover:w-full"></span></a>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="mobile-menu-btn" class="text-white hover:text-brand transition-colors">
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu"
class="hidden md:hidden absolute top-20 left-0 w-full bg-[#050810]/95 backdrop-blur-xl border-b border-white/10 p-6 flex flex-col space-y-6 shadow-2xl">
<a href="index.html" class="text-lg font-medium text-white block border-l-2 border-brand pl-4">Home</a>
<a href="modules.html"
class="text-lg font-medium text-gray-400 hover:text-brand transition-colors block border-l-2 border-transparent hover:border-brand pl-4">Explorer</a>
<a href="about.html"
class="text-lg font-medium text-gray-400 hover:text-brand transition-colors block border-l-2 border-transparent hover:border-brand pl-4">About</a>
</div>
</nav>
<!-- Hero Section -->
<main class="flex-grow max-w-7xl mx-auto px-6 py-28 w-full relative z-10">
<div class="text-center mb-32 animate-fade-in-up">
<div
class="inline-block mb-4 px-4 py-1.5 rounded-full border border-brand/20 bg-brand/5 text-brand text-xs font-bold tracking-widest uppercase backdrop-blur-sm animate-[fadeInUp_1s_ease-out_0.1s_forwards] opacity-0">
Next Gen Education
</div>
<h1 class="text-7xl md:text-8xl font-bold mb-8 leading-tight tracking-tight animate-float">
<span class="text-white drop-shadow-lg">Learn
in</span>
<br />
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-brand via-cyan-400 to-brand-accent drop-shadow-[0_0_30px_rgba(0,240,255,0.2)]">Dimension.</span>
</h1>
<p
class="text-xl md:text-2xl text-gray-300 max-w-2xl mx-auto mb-12 opacity-0 animate-[fadeInUp_1s_ease-out_0.3s_forwards] leading-relaxed">
Step inside the machinery. Interactive 3D models that transform abstract concepts into tangible
experiences.
</p>
<div
class="flex items-center justify-center space-x-6 opacity-0 animate-[fadeInUp_1s_ease-out_0.5s_forwards]">
<a href="modules.html"
class="group relative px-8 py-4 bg-white text-black font-bold rounded-full overflow-hidden transition-all hover:scale-105 hover:shadow-[0_0_40px_rgba(255,255,255,0.3)]">
<span class="relative z-10 flex items-center">
Launch Explorer
<svg class="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</span>
<div
class="absolute inset-0 bg-gradient-to-r from-brand to-brand-accent opacity-0 group-hover:opacity-10 transition-opacity">
</div>
</a>
<a href="about.html"
class="px-8 py-4 text-gray-300 font-medium hover:text-white transition-colors border border-white/10 rounded-full hover:bg-white/5 hover:border-white/30">
Learn More
</a>
</div>
</div>
<!-- Content Grid (Moved to modules.html) -->
</main>
<footer class="border-t border-white/5 py-8 text-center text-gray-500 text-sm">
<p>© 2025 3D Learning Hub. Educational Use Only.</p>
</footer>
<!-- Chatbot Widget -->
<div id="chatbot-widget" class="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50">
<!-- Chat Button -->
<button id="chat-toggle"
class="w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-gradient-to-br from-brand to-brand-accent text-white shadow-lg hover:shadow-2xl transform hover:scale-110 transition-all duration-300 flex items-center justify-center">
<svg class="w-6 h-6 sm:w-7 sm:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
</path>
</svg>
</button>
<!-- Chat Window -->
<div id="chat-window"
class="hidden absolute bottom-20 right-0 w-80 sm:w-96 bg-gray-900 border border-brand/30 rounded-2xl shadow-2xl flex flex-col max-h-96 sm:max-h-[500px]">
<!-- Header -->
<div class="bg-gradient-to-r from-brand/20 to-brand-accent/20 p-4 rounded-t-2xl border-b border-brand/20">
<h3 class="text-lg font-bold text-white">3D Model Assistant</h3>
<p class="text-xs text-gray-400">Ask about our 3D models</p>
</div>
<!-- Messages Container -->
<div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4">
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-brand/20 flex items-center justify-center flex-shrink-0">
<span class="text-brand text-sm">🤖</span>
</div>
<div class="bg-gray-800 rounded-lg p-3 max-w-xs">
<p class="text-sm text-gray-300">Hi! I'm your 3D Learning Hub assistant. Ask me anything about
our models, like "Tell me about the Jet Engine" or "What is DNA?"</p>
</div>
</div>
</div>
<!-- Input Area -->
<div class="border-t border-brand/20 p-4 space-y-2">
<div class="flex gap-2">
<input id="chat-input" type="text" placeholder="Ask about 3D models..."
class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-brand/50 transition-colors">
<button id="chat-send"
class="bg-brand text-black rounded-lg px-4 py-2 font-semibold hover:bg-brand/90 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
</svg>
</button>
</div>
<div id="chat-loading" class="hidden flex items-center gap-2 text-xs text-gray-400">
<span class="inline-block w-2 h-2 bg-brand rounded-full animate-bounce"></span>
<span>Thinking...</span>
</div>
</div>
</div>
</div>
<script>
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>
<script type="module" src="js/chatbot.js"></script>
</body>
</html>