Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
199 lines (174 loc) · 11.4 KB
/
Copy pathindex.html
File metadata and controls
199 lines (174 loc) · 11.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meshy UI Clone</title>
<link rel="icon" href="/assets/brand_assets/logo.svg">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body {
background-color: #121212;
color: #ffffff;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Custom hover transition for the bottom cards */
.card-hover {
transition: all 0.2s ease-in-out;
}
.card-hover:hover {
transform: translateY(-2px);
border-color: #4b5563;
}
/* Gradient for the top banner */
.banner-gradient {
background: linear-gradient(135deg, #fff0f0 0%, #ffe4e6 100%);
}
</style>
</head>
<body class="min-h-screen flex flex-col">
<nav class="flex items-center justify-between px-6 py-4 bg-[#0a0a0a] border-b border-gray-800 text-sm">
<div class="flex items-center space-x-8">
<div class="flex items-center space-x-2 text-green-400 font-bold text-xl cursor-pointer">
<img src="/assets/brand_assets/logo.svg" alt="Xemy" class="h-6 w-auto">
</div>
<div class="hidden lg:flex space-x-6 font-semibold text-gray-300">
<a href="#" class="hover:text-white flex items-center text-green-400">
<i class="fa-solid fa-shapes mr-2"></i> Workspace <i class="fa-solid fa-caret-down ml-1 text-xs"></i>
</a>
<a href="#" class="text-green-400">Community</a>
<a href="#" class="hover:text-white transition-colors">My Assets</a>
<a href="#" class="hover:text-white transition-colors">API</a>
<a href="#" class="hover:text-white flex items-center transition-colors">
Learn <i class="fa-solid fa-caret-down ml-1 text-xs"></i>
</a>
<a href="#" class="hover:text-white flex items-center transition-colors">
Resources <i class="fa-solid fa-caret-down ml-1 text-xs"></i>
</a>
</div>
</div>
<div class="flex items-center space-x-5">
<div class="flex items-center text-yellow-500 font-bold bg-[#1a1a1a] px-3 py-1.5 rounded-full border border-yellow-900/50 cursor-pointer hover:bg-[#222]">
<i class="fa-solid fa-coins mr-2"></i> 400
</div>
<button class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-1.5 rounded-md font-bold flex items-center transition-colors shadow-lg">
<i class="fa-solid fa-crown mr-2 text-yellow-300"></i> Upgrade
</button>
<i class="fa-solid fa-gift text-gray-300 hover:text-white text-lg cursor-pointer"></i>
<i class="fa-regular fa-circle-question text-gray-300 hover:text-white text-lg cursor-pointer"></i>
<div class="relative cursor-pointer">
<i class="fa-regular fa-bell text-gray-300 hover:text-white text-xl"></i>
<span class="absolute -top-1.5 -right-2 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full border border-[#0a0a0a]">160</span>
</div>
<div class="w-8 h-8 bg-purple-800 rounded-full cursor-pointer flex items-center justify-center border border-gray-600 overflow-hidden">
<i class="fa-solid fa-user-astronaut text-purple-300 text-xs"></i>
</div>
</div>
</nav>
<main class="flex-grow px-6 pt-10 pb-24 max-w-[1400px] mx-auto w-full">
<div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-20">
<div class="col-span-2 banner-gradient rounded-xl p-6 text-black flex justify-between items-center cursor-pointer relative overflow-hidden shadow-lg">
<div class="relative z-10">
<span class="bg-white/80 backdrop-blur-sm px-2 py-1 rounded text-[10px] font-extrabold text-gray-600 uppercase tracking-wider">New Feature</span>
<h2 class="text-[28px] font-black mt-3 leading-[1.1] text-red-600 uppercase tracking-tight">
Generate 3D<br>Characters<br>Your Way
</h2>
<button class="mt-5 bg-gradient-to-r from-orange-400 to-orange-500 hover:from-orange-500 hover:to-orange-600 text-white px-5 py-2 rounded-full font-bold shadow-md transition-all">
Try It Now »
</button>
</div>
<div class="w-32 h-32 bg-white rounded-xl shadow-inner flex flex-col items-center justify-center text-gray-400 text-xs border border-red-100 z-10 p-2">
<i class="fa-solid fa-person-walking text-3xl mb-2 text-red-400"></i>
<span class="text-center font-semibold">Custom<br>Pose</span>
</div>
</div>
<div class="bg-slate-800 rounded-xl relative overflow-hidden cursor-pointer group h-48">
<div class="absolute inset-0 bg-blue-900/40 group-hover:bg-blue-800/40 transition-colors"></div>
<div class="absolute top-3 left-3 bg-teal-300 text-teal-900 text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Community</div>
<div class="absolute bottom-3 left-3 text-white text-sm font-bold truncate pr-3 w-full">Easter Challenge...</div>
<i class="fa-solid fa-arrow-down absolute top-3 right-3 text-green-400 bg-black/50 p-1 rounded"></i>
</div>
<div class="bg-slate-800 rounded-xl relative overflow-hidden cursor-pointer group h-48">
<div class="absolute inset-0 bg-orange-900/30 group-hover:bg-orange-800/30 transition-colors"></div>
<div class="absolute top-3 left-3 bg-transparent border border-white/50 text-white text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Tutorial</div>
<div class="absolute bottom-3 left-3 text-white text-sm font-bold truncate pr-3 w-full">How to Build a 3D...</div>
<i class="fa-solid fa-arrow-down absolute top-3 right-3 text-green-400 bg-black/50 p-1 rounded"></i>
</div>
<div class="bg-slate-800 rounded-xl relative overflow-hidden cursor-pointer group h-48">
<div class="absolute inset-0 bg-cyan-900/30 group-hover:bg-cyan-800/30 transition-colors"></div>
<div class="absolute top-3 left-3 bg-cyan-200 text-cyan-900 text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">Workflow</div>
<div class="absolute bottom-3 left-3 text-white text-sm font-bold truncate pr-3 w-full">Make Stylized 3D...</div>
<i class="fa-solid fa-arrow-down absolute top-3 right-3 text-green-400 bg-black/50 p-1 rounded"></i>
</div>
</div>
<h1 class="text-[28px] font-bold text-center mb-12 tracking-wide text-gray-100">
Hi, onasogaemmanuel02! How can Meshy help you today?
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
<div class="action-card card-hover bg-[#151515] border border-gray-800 rounded-2xl p-5 flex items-center cursor-pointer shadow-lg">
<div class="w-14 h-14 bg-gradient-to-br from-pink-900/40 to-pink-500/10 rounded-xl mr-4 flex items-center justify-center text-2xl text-pink-400 border border-pink-900/50">
<i class="fa-regular fa-image"></i>
</div>
<div>
<h3 class="font-bold text-base text-gray-100 mb-0.5">Image to 3D</h3>
<p class="text-[13px] text-gray-400 leading-tight">Generate 3D models from images</p>
</div>
</div>
<div class="action-card card-hover bg-[#151515] border border-gray-800 rounded-2xl p-5 flex items-center cursor-pointer shadow-lg">
<div class="w-14 h-14 bg-gradient-to-br from-green-900/40 to-green-500/10 rounded-xl mr-4 flex items-center justify-center text-2xl text-green-400 border border-green-900/50">
<i class="fa-solid fa-t"></i>
</div>
<div>
<h3 class="font-bold text-base text-gray-100 mb-0.5">Text to 3D</h3>
<p class="text-[13px] text-gray-400 leading-tight">Generate 3D models from prompts</p>
</div>
</div>
<div class="action-card card-hover bg-[#151515] border border-gray-800 rounded-2xl p-5 flex items-center cursor-pointer shadow-lg">
<div class="w-14 h-14 bg-gradient-to-br from-purple-900/40 to-purple-500/10 rounded-xl mr-4 flex items-center justify-center text-2xl text-purple-400 border border-purple-900/50">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<div>
<h3 class="font-bold text-base text-gray-100 mb-0.5">Text to Image</h3>
<p class="text-[13px] text-gray-400 leading-tight">Generate images from prompts</p>
</div>
</div>
<div class="action-card card-hover bg-[#151515] border border-gray-800 rounded-2xl p-5 flex items-center cursor-pointer shadow-lg">
<div class="w-14 h-14 bg-gradient-to-br from-blue-900/40 to-blue-500/10 rounded-xl mr-4 flex items-center justify-center text-2xl text-blue-400 border border-blue-900/50">
<i class="fa-solid fa-cube"></i>
</div>
<div>
<h3 class="font-bold text-base text-gray-100 mb-0.5">3D to Video</h3>
<p class="text-[13px] text-gray-400 leading-tight">Generate images or videos from 3D scenes</p>
</div>
</div>
</div>
</main>
<div class="fixed bottom-0 left-0 w-full bg-[#111111]/95 backdrop-blur-sm border-t border-gray-800 py-3 flex justify-center items-center text-sm z-50">
<span class="text-blue-200/70 mr-4 font-medium tracking-wide">
More assets, faster workflows, and private, commercial-safe exports — just $10 for your first month.
</span>
<button class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-1.5 rounded text-sm font-bold transition-colors">
<i class="fa-solid fa-crown mr-2 text-yellow-300"></i> Upgrade
</button>
</div>
<script>
$(document).ready(function() {
// Add a simple click event to the main tool cards
$('.action-card').on('click', function() {
// Flash the card briefly
$(this).fadeOut(100).fadeIn(100);
// Get the tool name and alert the user
const toolName = $(this).find('h3').text();
alert('Opening ' + toolName + ' workspace...');
});
// Hover effect on the top banner button
$('.banner-gradient button').hover(
function() { $(this).css('transform', 'scale(1.05)'); },
function() { $(this).css('transform', 'scale(1)'); }
);
});
</script>
</body>
</html>