Hugging Face's logo

Spaces:
zp1112
/
rrr
Running

App Files Community
zp1112 commited on
Commit
18952dc
·
verified ·
1 Parent(s): d202809

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +250 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Rrr
3
- emoji: ⚡
4
- colorFrom: yellow
5
  colorTo: pink
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: rrr
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: pink
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,250 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Simple Elegant Website</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
+ /* Custom CSS for animations */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .animate-fade-in {
17
+ animation: fadeIn 1s ease-out forwards;
18
+ }
19
+
20
+ .delay-1 { animation-delay: 0.2s; }
21
+ .delay-2 { animation-delay: 0.4s; }
22
+ .delay-3 { animation-delay: 0.6s; }
23
+
24
+ /* Custom gradient */
25
+ .gradient-bg {
26
+ background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
27
+ }
28
+
29
+ /* Custom scrollbar */
30
+ ::-webkit-scrollbar {
31
+ width: 8px;
32
+ }
33
+
34
+ ::-webkit-scrollbar-track {
35
+ background: #f1f1f1;
36
+ }
37
+
38
+ ::-webkit-scrollbar-thumb {
39
+ background: #6B73FF;
40
+ border-radius: 4px;
41
+ }
42
+
43
+ ::-webkit-scrollbar-thumb:hover {
44
+ background: #000DFF;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="font-sans antialiased text-gray-800 bg-gray-50">
49
+ <!-- Navigation -->
50
+ <nav class="bg-white shadow-sm fixed w-full z-10">
51
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
52
+ <div class="flex justify-between h-16">
53
+ <div class="flex items-center">
54
+ <div class="flex-shrink-0 flex items-center">
55
+ <i class="fas fa-rocket text-indigo-600 text-2xl mr-2"></i>
56
+ <span class="text-xl font-bold text-indigo-600">SimpleSite</span>
57
+ </div>
58
+ </div>
59
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
60
+ <a href="#" class="text-indigo-600 px-3 py-2 text-sm font-medium">Home</a>
61
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Features</a>
62
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a>
63
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Contact</a>
64
+ <button class="gradient-bg text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 transition">Get Started</button>
65
+ </div>
66
+ <div class="-mr-2 flex items-center md:hidden">
67
+ <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
68
+ <span class="sr-only">Open main menu</span>
69
+ <i class="fas fa-bars"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Mobile menu -->
76
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
77
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
78
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-indigo-600 bg-indigo-50">Home</a>
79
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-indigo-600 hover:bg-indigo-50">Features</a>
80
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-indigo-600 hover:bg-indigo-50">About</a>
81
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-indigo-600 hover:bg-indigo-50">Contact</a>
82
+ <button class="w-full gradient-bg text-white px-4 py-2 rounded-md text-base font-medium hover:opacity-90 transition mt-2">Get Started</button>
83
+ </div>
84
+ </div>
85
+ </nav>
86
+
87
+ <!-- Hero Section -->
88
+ <div class="pt-24 pb-12 md:pt-32 md:pb-20">
89
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
90
+ <div class="md:flex md:items-center md:justify-between">
91
+ <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in">
92
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Build something <span class="text-indigo-600">amazing</span></h1>
93
+ <p class="text-lg text-gray-600 mb-8">Our platform helps you create beautiful websites quickly and easily. No coding required.</p>
94
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
95
+ <button class="gradient-bg text-white px-6 py-3 rounded-md text-base font-medium hover:opacity-90 transition">Get Started</button>
96
+ <button class="border border-gray-300 bg-white text-gray-700 px-6 py-3 rounded-md text-base font-medium hover:bg-gray-50 transition">Learn More</button>
97
+ </div>
98
+ </div>
99
+ <div class="md:w-1/2 animate-fade-in delay-1">
100
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Hero image" class="rounded-lg shadow-xl w-full h-auto">
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Features Section -->
107
+ <div class="py-12 bg-white">
108
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
109
+ <div class="text-center mb-12 animate-fade-in">
110
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Powerful Features</h2>
111
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Everything you need to build your next great idea</p>
112
+ </div>
113
+
114
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
115
+ <!-- Feature 1 -->
116
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300 animate-fade-in delay-1">
117
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mb-4">
118
+ <i class="fas fa-bolt text-white text-xl"></i>
119
+ </div>
120
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Fast Performance</h3>
121
+ <p class="text-gray-600">Our platform is optimized for speed, ensuring your website loads in milliseconds.</p>
122
+ </div>
123
+
124
+ <!-- Feature 2 -->
125
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300 animate-fade-in delay-2">
126
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mb-4">
127
+ <i class="fas fa-mobile-alt text-white text-xl"></i>
128
+ </div>
129
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Responsive Design</h3>
130
+ <p class="text-gray-600">Looks great on any device, from mobile phones to desktop computers.</p>
131
+ </div>
132
+
133
+ <!-- Feature 3 -->
134
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition duration-300 animate-fade-in delay-3">
135
+ <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mb-4">
136
+ <i class="fas fa-cog text-white text-xl"></i>
137
+ </div>
138
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Easy Customization</h3>
139
+ <p class="text-gray-600">Change colors, fonts, and layouts with just a few clicks.</p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- CTA Section -->
146
+ <div class="gradient-bg py-16">
147
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
148
+ <h2 class="text-3xl font-bold text-white mb-6">Ready to get started?</h2>
149
+ <p class="text-lg text-indigo-100 mb-8 max-w-2xl mx-auto">Join thousands of satisfied customers who are already building amazing websites with our platform.</p>
150
+ <button class="bg-white text-indigo-600 px-8 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 transition">Sign up for free</button>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Footer -->
155
+ <footer class="bg-gray-900 text-white py-12">
156
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
158
+ <div>
159
+ <h3 class="text-xl font-bold mb-4">SimpleSite</h3>
160
+ <p class="text-gray-400">Making web development accessible to everyone.</p>
161
+ <div class="flex space-x-4 mt-4">
162
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
163
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
164
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
165
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
166
+ </div>
167
+ </div>
168
+ <div>
169
+ <h4 class="text-lg font-semibold mb-4">Product</h4>
170
+ <ul class="space-y-2">
171
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
172
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
173
+ <li><a href="#" class="text-gray-400 hover:text-white">Templates</a></li>
174
+ <li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li>
175
+ </ul>
176
+ </div>
177
+ <div>
178
+ <h4 class="text-lg font-semibold mb-4">Company</h4>
179
+ <ul class="space-y-2">
180
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
181
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
182
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
183
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
184
+ </ul>
185
+ </div>
186
+ <div>
187
+ <h4 class="text-lg font-semibold mb-4">Legal</h4>
188
+ <ul class="space-y-2">
189
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
190
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
191
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookies</a></li>
192
+ </ul>
193
+ </div>
194
+ </div>
195
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
196
+ <p>&copy; 2023 SimpleSite. All rights reserved.</p>
197
+ </div>
198
+ </div>
199
+ </footer>
200
+
201
+ <script>
202
+ // Mobile menu toggle
203
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
204
+ const mobileMenu = document.getElementById('mobile-menu');
205
+
206
+ mobileMenuButton.addEventListener('click', () => {
207
+ mobileMenu.classList.toggle('hidden');
208
+ });
209
+
210
+ // Smooth scrolling for anchor links
211
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
212
+ anchor.addEventListener('click', function (e) {
213
+ e.preventDefault();
214
+
215
+ const targetId = this.getAttribute('href');
216
+ if (targetId === '#') return;
217
+
218
+ const targetElement = document.querySelector(targetId);
219
+ if (targetElement) {
220
+ window.scrollTo({
221
+ top: targetElement.offsetTop - 80,
222
+ behavior: 'smooth'
223
+ });
224
+
225
+ // Close mobile menu if open
226
+ if (!mobileMenu.classList.contains('hidden')) {
227
+ mobileMenu.classList.add('hidden');
228
+ }
229
+ }
230
+ });
231
+ });
232
+
233
+ // Add scroll animation class when elements come into view
234
+ const observer = new IntersectionObserver((entries) => {
235
+ entries.forEach(entry => {
236
+ if (entry.isIntersecting) {
237
+ entry.target.classList.add('animate-fade-in');
238
+ observer.unobserve(entry.target);
239
+ }
240
+ });
241
+ }, {
242
+ threshold: 0.1
243
+ });
244
+
245
+ document.querySelectorAll('.animate-fade-in').forEach(element => {
246
+ observer.observe(element);
247
+ });
248
+ </script>
249
+ <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=zp1112/rrr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
250
+ </html>