Hugging Face's logo

Spaces:
User48320479
/
opti
Running

App Files Community
User48320479 commited on
Commit
e33a80e
·
verified ·
1 Parent(s): a40b0ee

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +229 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Opti
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: indigo
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: opti
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,229 @@
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="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Xopticа - Магазин модных очков и линз</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
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .logo-text {
18
+ font-weight: 700;
19
+ letter-spacing: 1px;
20
+ position: relative;
21
+ }
22
+
23
+ .logo-text::after {
24
+ content: '';
25
+ position: absolute;
26
+ bottom: -5px;
27
+ left: 0;
28
+ width: 100%;
29
+ height: 2px;
30
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
31
+ }
32
+
33
+ .hero-gradient {
34
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%);
35
+ }
36
+
37
+ .glass-card {
38
+ backdrop-filter: blur(16px) saturate(180%);
39
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
40
+ background-color: rgba(255, 255, 255, 0.75);
41
+ border-radius: 12px;
42
+ border: 1px solid rgba(209, 213, 219, 0.3);
43
+ }
44
+
45
+ .product-card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
48
+ }
49
+
50
+ .nav-link {
51
+ position: relative;
52
+ }
53
+
54
+ .nav-link::after {
55
+ content: '';
56
+ position: absolute;
57
+ bottom: -2px;
58
+ left: 0;
59
+ width: 0;
60
+ height: 2px;
61
+ background-color: #3b82f6;
62
+ transition: width 0.3s ease;
63
+ }
64
+
65
+ .nav-link:hover::after {
66
+ width: 100%;
67
+ }
68
+
69
+ .input-focus:focus {
70
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
71
+ }
72
+
73
+ .scroll-hidden::-webkit-scrollbar {
74
+ display: none;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-gray-50">
79
+ <!-- Header -->
80
+ <header class="sticky top-0 z-50 bg-white shadow-sm">
81
+ <div class="container mx-auto px-4 py-3">
82
+ <div class="flex items-center justify-between">
83
+ <!-- Logo -->
84
+ <div class="flex items-center space-x-2">
85
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
86
+ <i class="fas fa-glasses text-blue-500 text-xl"></i>
87
+ </div>
88
+ <span class="logo-text text-2xl text-gray-800">xoptic<span class="text-blue-500">a</span></span>
89
+ </div>
90
+
91
+ <!-- Navigation -->
92
+ <nav class="hidden md:flex items-center space-x-8">
93
+ <a href="#home" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Главная</a>
94
+ <a href="#products" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Очки</a>
95
+ <a href="#services" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Услуги</a>
96
+ <a href="#about" class="nav-link text-gray-600 hover:text-blue-500 font-medium">О нас</a>
97
+ <a href="#contacts" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Контакты</a>
98
+ </nav>
99
+
100
+ <!-- Mobile menu button -->
101
+ <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
102
+ <i class="fas fa-bars text-2xl"></i>
103
+ </button>
104
+
105
+ <!-- Mobile menu -->
106
+ <div id="mobile-menu" class="hidden absolute top-16 left-0 right-0 bg-white shadow-lg py-4 px-6">
107
+ <div class="flex flex-col space-y-4">
108
+ <a href="#home" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Главная</a>
109
+ <a href="#products" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Очки</a>
110
+ <a href="#services" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Услуги</a>
111
+ <a href="#about" class="nav-link text-gray-600 hover:text-blue-500 font-medium">О нас</a>
112
+ <a href="#contacts" class="nav-link text-gray-600 hover:text-blue-500 font-medium">Контакты</a>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Cart and User -->
117
+ <div class="hidden md:flex items-center space-x-4">
118
+ <button class="text-gray-600 hover:text-blue-500 relative">
119
+ <i class="fas fa-search text-xl"></i>
120
+ </button>
121
+ <button class="text-gray-600 hover:text-blue-500 relative">
122
+ <i class="fas fa-heart text-xl"></i>
123
+ </button>
124
+ <button class="text-gray-600 hover:text-blue-500 relative">
125
+ <i class="fas fa-shopping-cart text-xl"></i>
126
+ <span class="absolute -top-2 -right-2 bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
127
+ </button>
128
+ <button class="text-gray-600 hover:text-blue-500">
129
+ <i class="fas fa-user text-xl"></i>
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </header>
135
+
136
+ <!-- Hero Section -->
137
+ <section id="home" class="hero-gradient py-16 md:py-24">
138
+ <div class="container mx-auto px-4">
139
+ <div class="flex flex-col md:flex-row items-center">
140
+ <div class="md:w-1/2 mb-10 md:mb-0">
141
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-800 leading-tight mb-6">
142
+ Видеть мир <span class="text-blue-500">четко</span> и <span class="text-indigo-500">стильно</span>
143
+ </h1>
144
+ <p class="text-lg text-gray-600 mb-8">
145
+ Xopticа - это современная оптика с широким выбором очков, линз и аксессуаров. Мы заботимся о вашем зрении и вашем стиле.
146
+ </p>
147
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
148
+ <a href="#products" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-6 rounded-lg transition duration-300 text-center">
149
+ Выбрать очки
150
+ </a>
151
+ <a href="#services" class="border border-blue-500 text-blue-500 hover:bg-blue-50 font-medium py-3 px-6 rounded-lg transition duration-300 text-center">
152
+ Наши услуги
153
+ </a>
154
+ </div>
155
+ </div>
156
+ <div class="md:w-1/2 flex justify-center">
157
+ <div class="relative w-full max-w-md">
158
+ <div class="glass-card p-6 rounded-2xl shadow-lg">
159
+ <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"
160
+ alt="Модные очки"
161
+ class="w-full h-auto rounded-lg shadow-md">
162
+ </div>
163
+ <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-indigo-100 rounded-full -z-10"></div>
164
+ <div class="absolute -top-6 -right-6 w-24 h-24 bg-blue-100 rounded-full -z-10"></div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Brands Section -->
172
+ <section class="py-12 bg-white">
173
+ <div class="container mx-auto px-4">
174
+ <h2 class="text-2xl font-semibold text-center text-gray-700 mb-10">Наши бренды</h2>
175
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
176
+ <div class="w-24 h-16 flex items-center justify-center">
177
+ <img src="https://via.placeholder.com/100x50?text=Ray-Ban" alt="Ray-Ban" class="object-contain grayscale hover:grayscale-0 transition duration-300">
178
+ </div>
179
+ <div class="w-24 h-16 flex items-center justify-center">
180
+ <img src="https://via.placeholder.com/100x50?text=Oakley" alt="Oakley" class="object-contain grayscale hover:grayscale-0 transition duration-300">
181
+ </div>
182
+ <div class="w-24 h-16 flex items-center justify-center">
183
+ <img src="https://via.placeholder.com/100x50?text=Prada" alt="Prada" class="object-contain grayscale hover:grayscale-0 transition duration-300">
184
+ </div>
185
+ <div class="w-24 h-16 flex items-center justify-center">
186
+ <img src="https://via.placeholder.com/100x50?text=Gucci" alt="Gucci" class="object-contain grayscale hover:grayscale-0 transition duration-300">
187
+ </div>
188
+ <div class="w-24 h-16 flex items-center justify-center">
189
+ <img src="https://via.placeholder.com/100x50?text=Dior" alt="Dior" class="object-contain grayscale hover:grayscale-0 transition duration-300">
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </section>
194
+
195
+ <!-- Products Section -->
196
+ <section id="products" class="py-16 bg-gray-50">
197
+ <div class="container mx-auto px-4">
198
+ <div class="text-center mb-12">
199
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Наши коллекции</h2>
200
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">
201
+ Откройте для себя идеальные очки, которые подчеркнут вашу индивидуальность
202
+ </p>
203
+ </div>
204
+
205
+ <!-- Categories -->
206
+ <div class="flex justify-center mb-10">
207
+ <div class="inline-flex rounded-md shadow-sm">
208
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:outline-none active:bg-blue-50 active:text-blue-600 transition duration-150">
209
+ Все
210
+ </button>
211
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:outline-none active:bg-blue-50 active:text-blue-600 transition duration-150">
212
+ Для зрения
213
+ </button>
214
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:outline-none active:bg-blue-50 active:text-blue-600 transition duration-150">
215
+ Солнцезащитные
216
+ </button>
217
+ <button type="button" class="category-btn px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:outline-none active:bg-blue-50 active:text-blue-600 transition duration-150">
218
+ Аксессуары
219
+ </button>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Products Grid -->
224
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
225
+ <!-- Product 1 -->
226
+ <div class="product-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-xl">
227
+ <div class="relative">
228
+ <img src="https://images.
229
+ </html>