Hugging Face's logo

Spaces:
FrOsTiKoO
/
da
Running

App Files Community
FrOsTiKoO commited on
Commit
631554c
·
verified ·
1 Parent(s): 3beb0ab

🐳 20/02 - 18:33 - Полностью переделай дизайн сайта, при этом не меняя сути функционала.

Browse files
Files changed (1) hide show
  1. index.html +250 -100
index.html CHANGED
@@ -6,161 +6,319 @@
6
  <title>Авторизация и регистрация</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
  .form-container {
11
- perspective: 1000px;
12
  }
 
13
  .form-flip {
14
  transform-style: preserve-3d;
15
- transition: transform 0.6s;
16
  }
 
17
  .form-flip.flipped {
18
  transform: rotateY(180deg);
19
  }
 
20
  .form-front, .form-back {
21
  backface-visibility: hidden;
22
  position: absolute;
23
  width: 100%;
 
24
  }
 
25
  .form-back {
26
  transform: rotateY(180deg);
27
  }
28
- .input-effect {
29
- transition: all 0.3s;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
- .input-effect:focus {
 
32
  transform: translateY(-2px);
33
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
34
  }
35
- .btn-hover {
36
- transition: all 0.3s;
 
 
 
37
  }
38
- .btn-hover:hover {
 
 
39
  transform: translateY(-2px);
40
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
41
  }
42
- .pulse {
43
- animation: pulse 2s infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  }
45
- @keyframes pulse {
46
- 0% { transform: scale(1); }
47
- 50% { transform: scale(1.05); }
48
- 100% { transform: scale(1); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  }
50
  </style>
51
  </head>
52
- <body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen flex items-center justify-center p-4">
53
- <div class="w-full max-w-md">
54
- <div class="text-center mb-8">
55
- <h1 class="text-3xl font-bold text-gray-800 mb-2">Добро пожаловать!</h1>
56
- <p class="text-gray-600">Войдите или зарегистрируйтесь, чтобы продолжить</p>
 
 
 
 
 
 
 
 
 
57
  </div>
58
 
59
- <div class="bg-white rounded-xl shadow-xl overflow-hidden relative form-container h-96">
 
60
  <div class="form-flip relative w-full h-full">
61
- <!-- Форма входа -->
62
  <div class="form-front p-8 h-full flex flex-col">
63
- <div class="text-center mb-6">
64
- <i class="fas fa-user-circle text-5xl text-blue-500 mb-2"></i>
65
- <h2 class="text-2xl font-semibold text-gray-800">Вход в аккаунт</h2>
66
  </div>
67
 
68
  <form id="loginForm" class="flex-1 flex flex-col">
69
- <div class="mb-4">
70
- <label for="loginEmail" class="block text-gray-700 text-sm font-medium mb-1">Email</label>
71
- <div class="relative">
72
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
73
- <i class="fas fa-envelope text-gray-400"></i>
 
 
 
74
  </div>
75
- <input type="email" id="loginEmail" class="input-effect w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Ваш email" required>
76
  </div>
77
- </div>
78
-
79
- <div class="mb-4">
80
- <label for="loginPassword" class="block text-gray-700 text-sm font-medium mb-1">Пароль</label>
81
- <div class="relative">
82
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
83
- <i class="fas fa-lock text-gray-400"></i>
 
84
  </div>
85
- <input type="password" id="loginPassword" class="input-effect w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Ваш пароль" required>
86
  </div>
87
  </div>
88
 
89
- <div class="flex items-center justify-between mb-6">
90
- <div class="flex items-center">
91
- <input type="checkbox" id="rememberMe" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
92
- <label for="rememberMe" class="ml-2 block text-sm text-gray-700">Запомнить меня</label>
93
- </div>
94
- <a href="#" class="text-sm text-blue-600 hover:text-blue-800">Забыли пароль?</a>
95
  </div>
96
 
97
- <button type="submit" class="btn-hover bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 mb-4 pulse">
98
- Войти
99
  </button>
100
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
101
  <div class="text-center mt-auto">
102
- <p class="text-gray-600 text-sm">Ещё нет аккаунта?
103
- <button type="button" onclick="flipForm()" class="text-blue-600 hover:text-blue-800 font-medium">Зарегистрироваться</button>
 
104
  </p>
105
  </div>
106
  </form>
107
  </div>
108
 
109
- <!-- Форма регистрации -->
110
  <div class="form-back p-8 h-full flex flex-col">
111
  <div class="text-center mb-6">
112
- <i class="fas fa-user-plus text-5xl text-purple-500 mb-2"></i>
113
- <h2 class="text-2xl font-semibold text-gray-800">Создать аккаунт</h2>
114
  </div>
115
 
116
  <form id="registerForm" class="flex-1 flex flex-col">
117
- <div class="mb-4">
118
- <label for="registerName" class="block text-gray-700 text-sm font-medium mb-1">Имя</label>
119
- <div class="relative">
120
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
121
- <i class="fas fa-user text-gray-400"></i>
 
 
 
122
  </div>
123
- <input type="text" id="registerName" class="input-effect w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Ваше имя" required>
124
  </div>
125
- </div>
126
-
127
- <div class="mb-4">
128
- <label for="registerEmail" class="block text-gray-700 text-sm font-medium mb-1">Email</label>
129
- <div class="relative">
130
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
131
- <i class="fas fa-envelope text-gray-400"></i>
 
132
  </div>
133
- <input type="email" id="registerEmail" class="input-effect w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Ваш email" required>
134
  </div>
135
- </div>
136
-
137
- <div class="mb-4">
138
- <label for="registerPassword" class="block text-gray-700 text-sm font-medium mb-1">Пароль</label>
139
- <div class="relative">
140
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
141
- <i class="fas fa-lock text-gray-400"></i>
 
142
  </div>
143
- <input type="password" id="registerPassword" class="input-effect w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Придумайте пароль" required>
144
  </div>
145
- </div>
146
-
147
- <div class="mb-6">
148
- <label for="registerConfirmPassword" class="block text-gray-700 text-sm font-medium mb-1">Подтвердите пароль</label>
149
- <div class="relative">
150
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
151
- <i class="fas fa-lock text-gray-400"></i>
 
152
  </div>
153
- <input type="password" id="registerConfirmPassword" class="input-effect w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Повторите пароль" required>
154
  </div>
155
  </div>
156
 
157
- <button type="submit" class="btn-hover bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 mb-4">
158
- Зарегистрироваться
 
 
 
 
 
 
 
159
  </button>
160
 
161
  <div class="text-center mt-auto">
162
- <p class="text-gray-600 text-sm">Уже есть аккаунт?
163
- <button type="button" onclick="flipForm()" class="text-purple-600 hover:text-purple-800 font-medium">Войти</button>
 
164
  </p>
165
  </div>
166
  </form>
@@ -168,19 +326,11 @@
168
  </div>
169
  </div>
170
 
171
- <div class="mt-6 text-center">
172
- <p class="text-gray-600 text-sm">Или войдите с помощью</p>
173
- <div class="flex justify-center space-x-4 mt-3">
174
- <button class="btn-hover bg-red-500 hover:bg-red-600 text-white p-2 rounded-full">
175
- <i class="fab fa-google"></i>
176
- </button>
177
- <button class="btn-hover bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
178
- <i class="fab fa-facebook-f"></i>
179
- </button>
180
- <button class="btn-hover bg-gray-800 hover:bg-gray-900 text-white p-2 rounded-full">
181
- <i class="fab fa-github"></i>
182
- </button>
183
- </div>
184
  </div>
185
  </div>
186
 
 
6
  <title>Авторизация и регистрация</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
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  <style>
11
+ * {
12
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
13
+ }
14
+
15
+ body {
16
+ background: #0f0f0f;
17
+ min-height: 100vh;
18
+ }
19
+
20
+ .glass-card {
21
+ background: rgba(255, 255, 255, 0.03);
22
+ backdrop-filter: blur(20px);
23
+ border: 1px solid rgba(255, 255, 255, 0.08);
24
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
25
+ }
26
+
27
  .form-container {
28
+ perspective: 1200px;
29
  }
30
+
31
  .form-flip {
32
  transform-style: preserve-3d;
33
+ transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
34
  }
35
+
36
  .form-flip.flipped {
37
  transform: rotateY(180deg);
38
  }
39
+
40
  .form-front, .form-back {
41
  backface-visibility: hidden;
42
  position: absolute;
43
  width: 100%;
44
+ height: 100%;
45
  }
46
+
47
  .form-back {
48
  transform: rotateY(180deg);
49
  }
50
+
51
+ .input-field {
52
+ background: rgba(255, 255, 255, 0.05);
53
+ border: 1px solid rgba(255, 255, 255, 0.1);
54
+ transition: all 0.3s ease;
55
+ }
56
+
57
+ .input-field:focus {
58
+ background: rgba(255, 255, 255, 0.08);
59
+ border-color: rgba(255, 255, 255, 0.3);
60
+ box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);
61
+ }
62
+
63
+ .btn-primary {
64
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
65
+ transition: all 0.3s ease;
66
  }
67
+
68
+ .btn-primary:hover {
69
  transform: translateY(-2px);
70
+ box-shadow: 0 10px 30px -10px rgba(102, 126, 234, 0.5);
71
  }
72
+
73
+ .btn-social {
74
+ background: rgba(255, 255, 255, 0.05);
75
+ border: 1px solid rgba(255, 255, 255, 0.1);
76
+ transition: all 0.3s ease;
77
  }
78
+
79
+ .btn-social:hover {
80
+ background: rgba(255, 255, 255, 0.1);
81
  transform: translateY(-2px);
 
82
  }
83
+
84
+ .gradient-text {
85
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
86
+ -webkit-background-clip: text;
87
+ -webkit-text-fill-color: transparent;
88
+ background-clip: text;
89
+ }
90
+
91
+ .floating-orb {
92
+ position: absolute;
93
+ border-radius: 50%;
94
+ filter: blur(80px);
95
+ opacity: 0.4;
96
+ animation: float 20s infinite ease-in-out;
97
+ }
98
+
99
+ @keyframes float {
100
+ 0%, 100% { transform: translate(0, 0) scale(1); }
101
+ 25% { transform: translate(50px, -50px) scale(1.1); }
102
+ 50% { transform: translate(-30px, 30px) scale(0.9); }
103
+ 75% { transform: translate(30px, 50px) scale(1.05); }
104
  }
105
+
106
+ .orb-1 {
107
+ width: 400px;
108
+ height: 400px;
109
+ background: #667eea;
110
+ top: -200px;
111
+ left: -200px;
112
+ animation-delay: 0s;
113
+ }
114
+
115
+ .orb-2 {
116
+ width: 300px;
117
+ height: 300px;
118
+ background: #764ba2;
119
+ bottom: -150px;
120
+ right: -150px;
121
+ animation-delay: -5s;
122
+ }
123
+
124
+ .orb-3 {
125
+ width: 250px;
126
+ height: 250px;
127
+ background: #f093fb;
128
+ top: 50%;
129
+ left: 50%;
130
+ animation-delay: -10s;
131
+ }
132
+
133
+ .divider {
134
+ display: flex;
135
+ align-items: center;
136
+ text-align: center;
137
+ color: rgba(255, 255, 255, 0.4);
138
+ }
139
+
140
+ .divider::before, .divider::after {
141
+ content: '';
142
+ flex: 1;
143
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
144
+ }
145
+
146
+ .divider span {
147
+ padding: 0 1rem;
148
+ font-size: 0.875rem;
149
+ }
150
+
151
+ .link-hover {
152
+ position: relative;
153
+ }
154
+
155
+ .link-hover::after {
156
+ content: '';
157
+ position: absolute;
158
+ bottom: -2px;
159
+ left: 0;
160
+ width: 0;
161
+ height: 1px;
162
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
163
+ transition: width 0.3s ease;
164
+ }
165
+
166
+ .link-hover:hover::after {
167
+ width: 100%;
168
  }
169
  </style>
170
  </head>
171
+ <body class="flex items-center justify-center p-4 relative overflow-hidden">
172
+ <!-- Animated background orbs -->
173
+ <div class="floating-orb orb-1"></div>
174
+ <div class="floating-orb orb-2"></div>
175
+ <div class="floating-orb orb-3"></div>
176
+
177
+ <div class="w-full max-w-md relative z-10">
178
+ <!-- Header -->
179
+ <div class="text-center mb-10">
180
+ <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 mb-6 shadow-lg shadow-indigo-500/30">
181
+ <i class="fas fa-shield-alt text-2xl text-white"></i>
182
+ </div>
183
+ <h1 class="text-4xl font-bold text-white mb-3 tracking-tight">С возвращением</h1>
184
+ <p class="text-gray-400 text-lg">Войдите в свой аккаунт или создайте новый</p>
185
  </div>
186
 
187
+ <!-- Form Card -->
188
+ <div class="glass-card rounded-3xl overflow-hidden relative form-container" style="min-height: 520px;">
189
  <div class="form-flip relative w-full h-full">
190
+ <!-- Login Form -->
191
  <div class="form-front p-8 h-full flex flex-col">
192
+ <div class="text-center mb-8">
193
+ <h2 class="text-2xl font-semibold text-white mb-2">Вход в аккаунт</h2>
194
+ <p class="text-gray-400 text-sm">Введите свои данные для входа</p>
195
  </div>
196
 
197
  <form id="loginForm" class="flex-1 flex flex-col">
198
+ <div class="space-y-5">
199
+ <div>
200
+ <label for="loginEmail" class="block text-gray-300 text-sm font-medium mb-2">Email адрес</label>
201
+ <div class="relative">
202
+ <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
203
+ <i class="fas fa-envelope text-gray-500"></i>
204
+ </div>
205
+ <input type="email" id="loginEmail" class="input-field w-full pl-12 pr-4 py-3.5 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="name@example.com" required>
206
  </div>
 
207
  </div>
208
+
209
+ <div>
210
+ <label for="loginPassword" class="block text-gray-300 text-sm font-medium mb-2">Пароль</label>
211
+ <div class="relative">
212
+ <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
213
+ <i class="fas fa-lock text-gray-500"></i>
214
+ </div>
215
+ <input type="password" id="loginPassword" class="input-field w-full pl-12 pr-4 py-3.5 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="••••••••" required>
216
  </div>
 
217
  </div>
218
  </div>
219
 
220
+ <div class="flex items-center justify-between mt-5 mb-6">
221
+ <label class="flex items-center cursor-pointer group">
222
+ <input type="checkbox" id="rememberMe" class="w-4 h-4 rounded border-gray-600 bg-gray-800 text-indigo-500 focus:ring-indigo-500 focus:ring-offset-0">
223
+ <span class="ml-2 text-sm text-gray-400 group-hover:text-gray-300 transition-colors">Запомнить меня</span>
224
+ </label>
225
+ <a href="#" class="text-sm text-indigo-400 hover:text-indigo-300 link-hover">Забыли пароль?</a>
226
  </div>
227
 
228
+ <button type="submit" class="btn-primary w-full py-3.5 rounded-xl text-white font-semibold text-base mb-6">
229
+ Войти в аккаунт
230
  </button>
231
 
232
+ <div class="divider mb-6">
233
+ <span>или продолжить через</span>
234
+ </div>
235
+
236
+ <div class="flex justify-center gap-3 mb-6">
237
+ <button type="button" class="btn-social w-12 h-12 rounded-xl flex items-center justify-center text-white">
238
+ <i class="fab fa-google text-lg"></i>
239
+ </button>
240
+ <button type="button" class="btn-social w-12 h-12 rounded-xl flex items-center justify-center text-white">
241
+ <i class="fab fa-apple text-lg"></i>
242
+ </button>
243
+ <button type="button" class="btn-social w-12 h-12 rounded-xl flex items-center justify-center text-white">
244
+ <i class="fab fa-github text-lg"></i>
245
+ </button>
246
+ </div>
247
+
248
  <div class="text-center mt-auto">
249
+ <p class="text-gray-400 text-sm">
250
+ Ещё нет аккаунта?
251
+ <button type="button" onclick="flipForm()" class="text-indigo-400 hover:text-indigo-300 font-medium link-hover ml-1">Создать аккаунт</button>
252
  </p>
253
  </div>
254
  </form>
255
  </div>
256
 
257
+ <!-- Register Form -->
258
  <div class="form-back p-8 h-full flex flex-col">
259
  <div class="text-center mb-6">
260
+ <h2 class="text-2xl font-semibold text-white mb-2">Создать аккаунт</h2>
261
+ <p class="text-gray-400 text-sm">Заполните данные для регистрации</p>
262
  </div>
263
 
264
  <form id="registerForm" class="flex-1 flex flex-col">
265
+ <div class="space-y-4">
266
+ <div>
267
+ <label for="registerName" class="block text-gray-300 text-sm font-medium mb-2">Полное имя</label>
268
+ <div class="relative">
269
+ <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
270
+ <i class="fas fa-user text-gray-500"></i>
271
+ </div>
272
+ <input type="text" id="registerName" class="input-field w-full pl-12 pr-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="Иван Иванов" required>
273
  </div>
 
274
  </div>
275
+
276
+ <div>
277
+ <label for="registerEmail" class="block text-gray-300 text-sm font-medium mb-2">Email адрес</label>
278
+ <div class="relative">
279
+ <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
280
+ <i class="fas fa-envelope text-gray-500"></i>
281
+ </div>
282
+ <input type="email" id="registerEmail" class="input-field w-full pl-12 pr-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="name@example.com" required>
283
  </div>
 
284
  </div>
285
+
286
+ <div>
287
+ <label for="registerPassword" class="block text-gray-300 text-sm font-medium mb-2">Пароль</label>
288
+ <div class="relative">
289
+ <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
290
+ <i class="fas fa-lock text-gray-500"></i>
291
+ </div>
292
+ <input type="password" id="registerPassword" class="input-field w-full pl-12 pr-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="••••••••" required>
293
  </div>
 
294
  </div>
295
+
296
+ <div>
297
+ <label for="registerConfirmPassword" class="block text-gray-300 text-sm font-medium mb-2">Подтвердите пароль</label>
298
+ <div class="relative">
299
+ <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
300
+ <i class="fas fa-lock text-gray-500"></i>
301
+ </div>
302
+ <input type="password" id="registerConfirmPassword" class="input-field w-full pl-12 pr-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none" placeholder="••••••••" required>
303
  </div>
 
304
  </div>
305
  </div>
306
 
307
+ <div class="mt-5 mb-4">
308
+ <label class="flex items-start cursor-pointer group">
309
+ <input type="checkbox" class="w-4 h-4 mt-0.5 rounded border-gray-600 bg-gray-800 text-indigo-500 focus:ring-indigo-500 focus:ring-offset-0">
310
+ <span class="ml-2 text-sm text-gray-400 group-hover:text-gray-300 transition-colors">Я согласен с <a href="#" class="text-indigo-400 hover:text-indigo-300">условиями использования</a> и <a href="#" class="text-indigo-400 hover:text-indigo-300">политикой конфиденциальности</a></span>
311
+ </label>
312
+ </div>
313
+
314
+ <button type="submit" class="btn-primary w-full py-3.5 rounded-xl text-white font-semibold text-base mb-4">
315
+ Создать аккаунт
316
  </button>
317
 
318
  <div class="text-center mt-auto">
319
+ <p class="text-gray-400 text-sm">
320
+ Уже есть аккаунт?
321
+ <button type="button" onclick="flipForm()" class="text-indigo-400 hover:text-indigo-300 font-medium link-hover ml-1">Войти</button>
322
  </p>
323
  </div>
324
  </form>
 
326
  </div>
327
  </div>
328
 
329
+ <!-- Footer -->
330
+ <div class="mt-8 text-center">
331
+ <p class="text-gray-500 text-xs">
332
+ Защищено с помощью <span class="gradient-text font-medium">256-bit SSL</span> шифрования
333
+ </p>
 
 
 
 
 
 
 
 
334
  </div>
335
  </div>
336