Spaces:
Running
Running
Add 2 files
Browse files- README.md +7 -5
- index.html +336 -19
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
6 |
sdk: static
|
7 |
pinned: false
|
|
|
|
|
8 |
---
|
9 |
|
10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
1 |
---
|
2 |
+
title: test
|
3 |
+
emoji: 🐳
|
4 |
+
colorFrom: blue
|
5 |
+
colorTo: blue
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
+
tags:
|
9 |
+
- deepsite
|
10 |
---
|
11 |
|
12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
@@ -1,19 +1,336 @@
|
|
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>Creative Studio | Welcome</title>
|
7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
9 |
+
<style>
|
10 |
+
@keyframes float {
|
11 |
+
0%, 100% {
|
12 |
+
transform: translateY(0);
|
13 |
+
}
|
14 |
+
50% {
|
15 |
+
transform: translateY(-20px);
|
16 |
+
}
|
17 |
+
}
|
18 |
+
.floating {
|
19 |
+
animation: float 6s ease-in-out infinite;
|
20 |
+
}
|
21 |
+
.gradient-text {
|
22 |
+
background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
|
23 |
+
-webkit-background-clip: text;
|
24 |
+
background-clip: text;
|
25 |
+
color: transparent;
|
26 |
+
}
|
27 |
+
.blob {
|
28 |
+
filter: blur(60px);
|
29 |
+
opacity: 0.7;
|
30 |
+
}
|
31 |
+
</style>
|
32 |
+
</head>
|
33 |
+
<body class="bg-gray-900 text-white overflow-x-hidden">
|
34 |
+
<!-- Blob background elements -->
|
35 |
+
<div class="fixed -left-40 -top-40 w-80 h-80 rounded-full bg-purple-600 blob"></div>
|
36 |
+
<div class="fixed -right-40 bottom-20 w-96 h-96 rounded-full bg-indigo-600 blob"></div>
|
37 |
+
|
38 |
+
<!-- Navigation -->
|
39 |
+
<nav class="relative z-10 py-6 px-6 lg:px-16 flex justify-between items-center">
|
40 |
+
<div class="text-2xl font-bold gradient-text">CreativeStudio</div>
|
41 |
+
<div class="hidden md:flex space-x-8">
|
42 |
+
<a href="#" class="hover:text-purple-400 transition">Home</a>
|
43 |
+
<a href="#" class="hover:text-purple-400 transition">Works</a>
|
44 |
+
<a href="#" class="hover:text-purple-400 transition">Services</a>
|
45 |
+
<a href="#" class="hover:text-purple-400 transition">About</a>
|
46 |
+
<a href="#" class="hover:text-purple-400 transition">Contact</a>
|
47 |
+
</div>
|
48 |
+
<button class="md:hidden text-2xl" id="menu-toggle">
|
49 |
+
<i class="fas fa-bars"></i>
|
50 |
+
</button>
|
51 |
+
</nav>
|
52 |
+
|
53 |
+
<!-- Hero Section -->
|
54 |
+
<section class="relative z-10 px-6 lg:px-16 py-20 md:py-32">
|
55 |
+
<div class="max-w-5xl mx-auto text-center">
|
56 |
+
<h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">
|
57 |
+
We craft <span class="gradient-text">digital experiences</span> that inspire
|
58 |
+
</h1>
|
59 |
+
<p class="text-xl text-gray-300 max-w-3xl mx-auto mb-12">
|
60 |
+
Our studio combines creativity and technology to build beautiful, functional digital products that people love.
|
61 |
+
</p>
|
62 |
+
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
63 |
+
<button class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full font-semibold hover:shadow-lg hover:shadow-purple-500/20 transition">
|
64 |
+
Get Started
|
65 |
+
</button>
|
66 |
+
<button class="px-8 py-4 border border-gray-700 rounded-full font-semibold hover:bg-gray-800 transition">
|
67 |
+
View Portfolio
|
68 |
+
</button>
|
69 |
+
</div>
|
70 |
+
</div>
|
71 |
+
</section>
|
72 |
+
|
73 |
+
<!-- Features Section -->
|
74 |
+
<section class="relative z-10 px-6 lg:px-16 py-16 md:py-24 bg-gray-800/30 backdrop-blur-lg rounded-3xl mx-4 md:mx-16 my-12">
|
75 |
+
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
|
76 |
+
What we offer
|
77 |
+
</h2>
|
78 |
+
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
79 |
+
<!-- Feature 1 -->
|
80 |
+
<div class="bg-gray-800/50 p-8 rounded-2xl hover:bg-gray-800/70 transition transform hover:-translate-y-2">
|
81 |
+
<div class="w-16 h-16 rounded-xl bg-indigo-600 flex items-center justify-center mb-6">
|
82 |
+
<i class="fas fa-paint-brush text-2xl"></i>
|
83 |
+
</div>
|
84 |
+
<h3 class="text-xl font-bold mb-3">UI/UX Design</h3>
|
85 |
+
<p class="text-gray-300">
|
86 |
+
Beautiful, intuitive interfaces designed for seamless user experiences across all devices.
|
87 |
+
</p>
|
88 |
+
</div>
|
89 |
+
<!-- Feature 2 -->
|
90 |
+
<div class="bg-gray-800/50 p-8 rounded-2xl hover:bg-gray-800/70 transition transform hover:-translate-y-2">
|
91 |
+
<div class="w-16 h-16 rounded-xl bg-purple-600 flex items-center justify-center mb-6">
|
92 |
+
<i class="fas fa-code text-2xl"></i>
|
93 |
+
</div>
|
94 |
+
<h3 class="text-xl font-bold mb-3">Web Development</h3>
|
95 |
+
<p class="text-gray-300">
|
96 |
+
Custom web applications built with modern technologies for performance and scalability.
|
97 |
+
</p>
|
98 |
+
</div>
|
99 |
+
<!-- Feature 3 -->
|
100 |
+
<div class="bg-gray-800/50 p-8 rounded-2xl hover:bg-gray-800/70 transition transform hover:-translate-y-2">
|
101 |
+
<div class="w-16 h-16 rounded-xl bg-pink-600 flex items-center justify-center mb-6">
|
102 |
+
<i class="fas fa-chart-line text-2xl"></i>
|
103 |
+
</div>
|
104 |
+
<h3 class="text-xl font-bold mb-3">Digital Strategy</h3>
|
105 |
+
<p class="text-gray-300">
|
106 |
+
Data-driven strategies to grow your online presence and engage your target audience.
|
107 |
+
</p>
|
108 |
+
</div>
|
109 |
+
</div>
|
110 |
+
</section>
|
111 |
+
|
112 |
+
<!-- Showcase Section -->
|
113 |
+
<section class="relative z-10 px-6 lg:px-16 py-16 md:py-24">
|
114 |
+
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
|
115 |
+
Our Recent Work
|
116 |
+
</h2>
|
117 |
+
<p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
|
118 |
+
Here's a selection of our favorite projects we've completed recently.
|
119 |
+
</p>
|
120 |
+
<div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto" id="projects-container">
|
121 |
+
<!-- Projects will be added by JavaScript -->
|
122 |
+
</div>
|
123 |
+
</section>
|
124 |
+
|
125 |
+
<!-- Testimonials -->
|
126 |
+
<section class="relative z-10 px-6 lg:px-16 py-16 md:py-24 bg-gray-800/30 backdrop-blur-lg rounded-3xl mx-4 md:mx-16 my-12">
|
127 |
+
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
|
128 |
+
What our clients say
|
129 |
+
</h2>
|
130 |
+
<div class="max-w-4xl mx-auto">
|
131 |
+
<div class="relative p-8 md:p-12 bg-gray-800/50 rounded-3xl text-center">
|
132 |
+
<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 w-16 h-16 rounded-full overflow-hidden border-4 border-purple-600">
|
133 |
+
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-full h-full object-cover">
|
134 |
+
</div>
|
135 |
+
<p class="text-xl italic mb-6">
|
136 |
+
"Working with CreativeStudio transformed our online presence. Their team delivered beyond our expectations with creative solutions and attention to detail."
|
137 |
+
</p>
|
138 |
+
<h4 class="font-bold text-lg mb-1">Sarah Johnson</h4>
|
139 |
+
<p class="text-gray-400 text-sm">CEO, TechSolutions</p>
|
140 |
+
<div class="flex justify-center mt-4 space-x-1">
|
141 |
+
<i class="fas fa-star text-yellow-400"></i>
|
142 |
+
<i class="fas fa-star text-yellow-400"></i>
|
143 |
+
<i class="fas fa-star text-yellow-400"></i>
|
144 |
+
<i class="fas fa-star text-yellow-400"></i>
|
145 |
+
<i class="fas fa-star text-yellow-400"></i>
|
146 |
+
</div>
|
147 |
+
</div>
|
148 |
+
</div>
|
149 |
+
</section>
|
150 |
+
|
151 |
+
<!-- CTA Section -->
|
152 |
+
<section class="relative z-10 px-6 lg:px-16 py-20 md:py-32 text-center">
|
153 |
+
<div class="max-w-4xl mx-auto bg-gradient-to-r from-indigo-900/50 to-purple-900/50 p-16 rounded-3xl">
|
154 |
+
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to bring your ideas to life?</h2>
|
155 |
+
<p class="text-xl text-gray-300 mb-8">Let's create something amazing together.</p>
|
156 |
+
<button class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full font-semibold hover:shadow-lg hover:shadow-purple-500/20 transition">
|
157 |
+
Start Your Project
|
158 |
+
</button>
|
159 |
+
</div>
|
160 |
+
</section>
|
161 |
+
|
162 |
+
<!-- Footer -->
|
163 |
+
<footer class="relative z-10 px-6 lg:px-16 py-12 border-t border-gray-800">
|
164 |
+
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
|
165 |
+
<div>
|
166 |
+
<div class="text-2xl font-bold gradient-text mb-4">CreativeStudio</div>
|
167 |
+
<p class="text-gray-400">Creating digital experiences that captivate and convert.</p>
|
168 |
+
</div>
|
169 |
+
<div>
|
170 |
+
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
|
171 |
+
<ul class="space-y-2">
|
172 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
|
173 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li>
|
174 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Portfolio</a></li>
|
175 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
|
176 |
+
</ul>
|
177 |
+
</div>
|
178 |
+
<div>
|
179 |
+
<h4 class="text-lg font-semibold mb-4">Services</h4>
|
180 |
+
<ul class="space-y-2">
|
181 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">UI/UX Design</a></li>
|
182 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Web Development</a></li>
|
183 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">App Development</a></li>
|
184 |
+
<li><a href="#" class="text-gray-400 hover:text-white transition">Branding</a></li>
|
185 |
+
</ul>
|
186 |
+
</div>
|
187 |
+
<div>
|
188 |
+
<h4 class="text-lg font-semibold mb-4">Connect</h4>
|
189 |
+
<div class="flex space-x-4">
|
190 |
+
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600 transition">
|
191 |
+
<i class="fab fa-twitter"></i>
|
192 |
+
</a>
|
193 |
+
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition">
|
194 |
+
<i class="fab fa-linkedin"></i>
|
195 |
+
</a>
|
196 |
+
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition">
|
197 |
+
<i class="fab fa-instagram"></i>
|
198 |
+
</a>
|
199 |
+
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-500 transition">
|
200 |
+
<i class="fab fa-facebook"></i>
|
201 |
+
</a>
|
202 |
+
</div>
|
203 |
+
</div>
|
204 |
+
</div>
|
205 |
+
<div class="max-w-6xl mx-auto border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
|
206 |
+
<p>© 2023 CreativeStudio. All rights reserved.</p>
|
207 |
+
</div>
|
208 |
+
</footer>
|
209 |
+
|
210 |
+
<!-- Floating elements -->
|
211 |
+
<div class="fixed bottom-6 right-6 w-16 h-16 rounded-full bg-indigo-600 flex items-center justify-center shadow-xl hover:shadow-2xl transition floating cursor-pointer" id="chat-button">
|
212 |
+
<i class="fas fa-comment-dots text-2xl"></i>
|
213 |
+
</div>
|
214 |
+
|
215 |
+
<!-- Chat window (hidden by default) -->
|
216 |
+
<div id="chat-window" class="fixed bottom-24 right-6 w-80 h-96 bg-gray-800 rounded-2xl shadow-2xl hidden flex flex-col border border-gray-700 overflow-hidden">
|
217 |
+
<div class="bg-gray-900 px-4 py-3 flex justify-between items-center border-b border-gray-700">
|
218 |
+
<h3 class="font-semibold">Live Chat</h3>
|
219 |
+
<button id="close-chat" class="text-gray-400 hover:text-white">
|
220 |
+
<i class="fas fa-times"></i>
|
221 |
+
</button>
|
222 |
+
</div>
|
223 |
+
<div class="flex-1 p-4 overflow-y-auto" id="chat-messages">
|
224 |
+
<div class="mb-4">
|
225 |
+
<div class="bg-gray-700 rounded-xl p-3 inline-block max-w-xs">
|
226 |
+
<p>Hello! How can we help you today?</p>
|
227 |
+
</div>
|
228 |
+
<p class="text-xs text-gray-400 mt-1">CreativeStudio Support</p>
|
229 |
+
</div>
|
230 |
+
</div>
|
231 |
+
<div class="p-3 border-t border-gray-700">
|
232 |
+
<div class="flex items-center bg-gray-700 rounded-xl px-4 py-2">
|
233 |
+
<input type="text" placeholder="Type a message..." class="flex-1 bg-transparent outline-none">
|
234 |
+
<button class="ml-2 text-purple-400">
|
235 |
+
<i class="fas fa-paper-plane"></i>
|
236 |
+
</button>
|
237 |
+
</div>
|
238 |
+
</div>
|
239 |
+
</div>
|
240 |
+
|
241 |
+
<!-- Mobile menu (hidden by default) -->
|
242 |
+
<div id="mobile-menu" class="fixed inset-0 bg-gray-900/90 backdrop-blur-md z-50 flex items-center justify-center hidden">
|
243 |
+
<div class="text-center">
|
244 |
+
<button id="close-menu" class="absolute top-6 right-6 text-2xl">
|
245 |
+
<i class="fas fa-times"></i>
|
246 |
+
</button>
|
247 |
+
<ul class="space-y-8 text-2xl">
|
248 |
+
<li><a href="#" class="hover:text-purple-400 transition">Home</a></li>
|
249 |
+
<li><a href="#" class="hover:text-purple-400 transition">Works</a></li>
|
250 |
+
<li><a href="#" class="hover:text-purple-400 transition">Services</a></li>
|
251 |
+
<li><a href="#" class="hover:text-purple-400 transition">About</a></li>
|
252 |
+
<li><a href="#" class="hover:text-purple-400 transition">Contact</a></li>
|
253 |
+
</ul>
|
254 |
+
</div>
|
255 |
+
</div>
|
256 |
+
|
257 |
+
<script>
|
258 |
+
// Project data
|
259 |
+
const projects = [
|
260 |
+
{
|
261 |
+
title: "E-commerce Platform",
|
262 |
+
description: "A modern e-commerce solution with seamless checkout experience",
|
263 |
+
tags: ["UI/UX", "Web Development"],
|
264 |
+
color: "bg-indigo-600"
|
265 |
+
},
|
266 |
+
{
|
267 |
+
title: "Mobile Banking App",
|
268 |
+
description: "Secure and intuitive banking application for iOS and Android",
|
269 |
+
tags: ["App Design", "Development"],
|
270 |
+
color: "bg-purple-600"
|
271 |
+
},
|
272 |
+
{
|
273 |
+
title: "Corporate Website",
|
274 |
+
description: "Responsive website with CMS for easy content management",
|
275 |
+
tags: ["Web Design", "CMS"],
|
276 |
+
color: "bg-pink-600"
|
277 |
+
},
|
278 |
+
{
|
279 |
+
title: "SaaS Dashboard",
|
280 |
+
description: "Analytics dashboard with real-time data visualization",
|
281 |
+
tags: ["UI/UX", "Data Visualization"],
|
282 |
+
color: "bg-blue-600"
|
283 |
+
}
|
284 |
+
];
|
285 |
+
|
286 |
+
// Load projects
|
287 |
+
document.addEventListener('DOMContentLoaded', function() {
|
288 |
+
const projectsContainer = document.getElementById('projects-container');
|
289 |
+
|
290 |
+
projects.forEach(project => {
|
291 |
+
const projectEl = document.createElement('div');
|
292 |
+
projectEl.className = 'flex flex-col rounded-2xl overflow-hidden group cursor-pointer';
|
293 |
+
projectEl.innerHTML = `
|
294 |
+
<div class="aspect-video ${project.color} flex items-center justify-center text-5xl text-white/30">
|
295 |
+
<i class="fas fa-image group-hover:scale-110 transition-transform"></i>
|
296 |
+
</div>
|
297 |
+
<div class="p-6 bg-gray-800/50 group-hover:bg-gray-800 transition">
|
298 |
+
<h3 class="text-xl font-bold mb-2">${project.title}</h3>
|
299 |
+
<p class="text-gray-300 mb-4">${project.description}</p>
|
300 |
+
<div class="flex flex-wrap gap-2">
|
301 |
+
${project.tags.map(tag => `<span class="text-xs px-3 py-1 rounded-full bg-gray-700">${tag}</span>`).join('')}
|
302 |
+
</div>
|
303 |
+
</div>
|
304 |
+
`;
|
305 |
+
projectsContainer.appendChild(projectEl);
|
306 |
+
});
|
307 |
+
|
308 |
+
// Chat toggle
|
309 |
+
const chatButton = document.getElementById('chat-button');
|
310 |
+
const chatWindow = document.getElementById('chat-window');
|
311 |
+
const closeChat = document.getElementById('close-chat');
|
312 |
+
|
313 |
+
chatButton.addEventListener('click', function() {
|
314 |
+
chatWindow.classList.toggle('hidden');
|
315 |
+
});
|
316 |
+
|
317 |
+
closeChat.addEventListener('click', function() {
|
318 |
+
chatWindow.classList.add('hidden');
|
319 |
+
});
|
320 |
+
|
321 |
+
// Mobile menu toggle
|
322 |
+
const menuToggle = document.getElementById('menu-toggle');
|
323 |
+
const mobileMenu = document.getElementById('mobile-menu');
|
324 |
+
const closeMenu = document.getElementById('close-menu');
|
325 |
+
|
326 |
+
menuToggle.addEventListener('click', function() {
|
327 |
+
mobileMenu.classList.remove('hidden');
|
328 |
+
});
|
329 |
+
|
330 |
+
closeMenu.addEventListener('click', function() {
|
331 |
+
mobileMenu.classList.add('hidden');
|
332 |
+
});
|
333 |
+
});
|
334 |
+
</script>
|
335 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=littlebird13/test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
|
336 |
+
</html>
|