Hugging Face's logo

Spaces:
ApacheWinchester
/
asd
Running

App Files Community
ApacheWinchester commited on
Commit
a73a649
·
verified ·
1 Parent(s): c38f070

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +270 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Asd
3
- emoji: 📊
4
- colorFrom: purple
5
- colorTo: red
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: asd
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,270 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NutriPro - Seu Portal Nutricional Premium</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 gradientBackground {
11
+ 0% { background-position: 0% 50%; }
12
+ 50% { background-position: 100% 50%; }
13
+ 100% { background-position: 0% 50%; }
14
+ }
15
+
16
+ .dynamic-bg {
17
+ background: linear-gradient(-45deg, #3b82f6, #4ade80, #f59e0b, #ec4899);
18
+ background-size: 400% 400%;
19
+ animation: gradientBackground 15s ease infinite;
20
+ }
21
+
22
+ .fruit-card {
23
+ transform-style: preserve-3d;
24
+ transition: all 0.5s ease;
25
+ perspective: 1000px;
26
+ }
27
+
28
+ .fruit-card:hover {
29
+ transform: translateY(-10px) rotateX(5deg);
30
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
31
+ }
32
+
33
+ @keyframes float {
34
+ 0% { transform: translateY(0px) rotate(0deg); }
35
+ 50% { transform: translateY(-10px) rotate(5deg); }
36
+ 100% { transform: translateY(0px) rotate(0deg); }
37
+ }
38
+
39
+ .floating {
40
+ animation: float 6s ease-in-out infinite;
41
+ }
42
+
43
+ .login-form {
44
+ backdrop-filter: blur(10px);
45
+ background-color: rgba(255, 255, 255, 0.1);
46
+ }
47
+
48
+ .text-glow {
49
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="font-sans text-white min-h-screen dynamic-bg flex flex-col">
54
+ <!-- Floating fruit decoration -->
55
+ <div class="fixed top-16 left-16 text-6xl opacity-20 floating">
56
+ <i class="fas fa-apple-alt"></i>
57
+ </div>
58
+ <div class="fixed top-1/4 right-20 text-5xl opacity-25 floating" style="animation-delay: 0.5s;">
59
+ <i class="fas fa-lemon"></i>
60
+ </div>
61
+ <div class="fixed bottom-32 left-1/4 text-7xl opacity-30 floating" style="animation-delay: 1s;">
62
+ <i class="fas fa-pepper-hot"></i>
63
+ </div>
64
+ <div class="fixed top-1/2 right-1/3 text-6xl opacity-15 floating" style="animation-delay: 1.5s;">
65
+ <i class="fas fa-stroopwafel"></i>
66
+ </div>
67
+ <div class="fixed bottom-20 right-32 text-8xl opacity-25 floating" style="animation-delay: 2s;">
68
+ <i class="fas fa-carrot"></i>
69
+ </div>
70
+
71
+ <!-- Header -->
72
+ <header class="py-6 px-4 sm:px-6 lg:px-8">
73
+ <div class="flex justify-between items-center">
74
+ <div class="flex items-center space-x-3">
75
+ <i class="fas fa-leaf text-3xl text-green-300"></i>
76
+ <h1 class="text-3xl font-bold text-glow">
77
+ <span class="text-green-300">Nutri</span><span class="text-white">Pro</span>
78
+ </h1>
79
+ </div>
80
+ <div>
81
+ <a href="#" class="text-sm bg-white bg-opacity-10 hover:bg-opacity-20 px-4 py-2 rounded-full transition duration-300">
82
+ Conheça mais <i class="fas fa-arrow-right ml-1"></i>
83
+ </a>
84
+ </div>
85
+ </div>
86
+ </header>
87
+
88
+ <!-- Main Content -->
89
+ <main class="flex-grow flex items-center justify-center p-4">
90
+ <div class="max-w-6xl w-full grid md:grid-cols-2 gap-8">
91
+ <!-- Fruit Cards Section -->
92
+ <div class="grid grid-cols-2 gap-6 self-center">
93
+ <!-- Fruit 1 -->
94
+ <div class="fruit-card bg-white bg-opacity-10 rounded-2xl p-6 border border-white border-opacity-20 shadow-xl">
95
+ <div class="text-center">
96
+ <i class="fas fa-apple-alt text-5xl mb-4 text-pink-200"></i>
97
+ <h3 class="text-xl font-semibold mb-1 text-pink-100">Rubi Celestial</h3>
98
+ <p class="text-xs text-white text-opacity-70">Maçã Verde Premium</p>
99
+ <div class="mt-3 h-1 bg-white bg-opacity-20 rounded-full">
100
+ <div class="h-1 bg-green-300 rounded-full w-3/4"></div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Fruit 2 -->
106
+ <div class="fruit-card bg-white bg-opacity-10 rounded-2xl p-6 border border-white border-opacity-20 shadow-xl">
107
+ <div class="text-center">
108
+ <i class="fas fa-citrus text-5xl mb-4 text-yellow-200"></i>
109
+ <h3 class="text-xl font-semibold mb-1 text-yellow-100">Sol Dourado</h3>
110
+ <p class="text-xs text-white text-opacity-70">Laranja Bahia</p>
111
+ <div class="mt-3 h-1 bg-white bg-opacity-20 rounded-full">
112
+ <div class="h-1 bg-orange-300 rounded-full w-2/3"></div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Fruit 3 -->
118
+ <div class="fruit-card bg-white bg-opacity-10 rounded-2xl p-6 border border-white border-opacity-20 shadow-xl">
119
+ <div class="text-center">
120
+ <i class="fas fa-watermelon text-5xl mb-4 text-red-200"></i>
121
+ <h3 class="text-xl font-semibold mb-1 text-red-100">Coração Carmesim</h3>
122
+ <p class="text-xs text-white text-opacity-70">Melancia Sem Sementes</p>
123
+ <div class="mt-3 h-1 bg-white bg-opacity-20 rounded-full">
124
+ <div class="h-1 bg-red-400 rounded-full w-4/5"></div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Fruit 4 -->
130
+ <div class="fruit-card bg-white bg-opacity-10 rounded-2xl p-6 border border-white border-opacity-20 shadow-xl">
131
+ <div class="text-center">
132
+ <i class="fas fa-seedling text-5xl mb-4 text-green-200"></i>
133
+ <h3 class="text-xl font-semibold mb-1 text-green-100">Esmeralda Tropical</h3>
134
+ <p class="text-xs text-white text-opacity-70">Kiwi Gold</p>
135
+ <div class="mt-3 h-1 bg-white bg-opacity-20 rounded-full">
136
+ <div class="h-1 bg-green-500 rounded-full w-1/2"></div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Login Form -->
143
+ <div class="login-form self-center rounded-2xl p-8 border border-white border-opacity-20 shadow-2xl relative overflow-hidden">
144
+ <!-- Decorative elements -->
145
+ <div class="absolute -top-20 -right-20 w-40 h-40 rounded-full bg-purple-400 opacity-10"></div>
146
+ <div class="absolute -bottom-16 -left-16 w-32 h-32 rounded-full bg-cyan-400 opacity-10"></div>
147
+
148
+ <div class="relative z-10">
149
+ <h2 class="text-3xl font-bold mb-2 text-center">Acesso Exclusivo</h2>
150
+ <p class="text-center text-white text-opacity-80 mb-8">Entre no seu portal nutricional premium</p>
151
+
152
+ <form class="space-y-5">
153
+ <div>
154
+ <label for="email" class="block text-sm font-medium mb-1">E-mail</label>
155
+ <div class="relative">
156
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
157
+ <i class="fas fa-envelope text-gray-400"></i>
158
+ </div>
159
+ <input type="email" id="email" class="w-full pl-10 pr-4 py-3 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-300 focus:border-transparent placeholder-white placeholder-opacity-50" placeholder="seu@email.com">
160
+ </div>
161
+ </div>
162
+
163
+ <div>
164
+ <label for="password" class="block text-sm font-medium mb-1">Senha</label>
165
+ <div class="relative">
166
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
167
+ <i class="fas fa-lock text-gray-400"></i>
168
+ </div>
169
+ <input type="password" id="password" class="w-full pl-10 pr-4 py-3 bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-300 focus:border-transparent placeholder-white placeholder-opacity-50" placeholder="********">
170
+ </div>
171
+ </div>
172
+
173
+ <div class="flex items-center justify-between">
174
+ <div class="flex items-center">
175
+ <input id="remember" type="checkbox" class="h-4 w-4 bg-white bg-opacity-10 border border-white border-opacity-20 rounded focus:ring-green-300">
176
+ <label for="remember" class="ml-2 block text-sm">Lembrar-me</label>
177
+ </div>
178
+ <a href="#" class="text-sm text-green-300 hover:text-green-200">Esqueceu a senha?</a>
179
+ </div>
180
+
181
+ <button type="submit" class="w-full bg-gradient-to-r from-green-400 to-cyan-500 py-3 px-4 rounded-lg font-medium hover:opacity-90 transition duration-300 flex items-center justify-center">
182
+ <i class="fas fa-sign-in-alt mr-2"></i> Entrar
183
+ </button>
184
+
185
+ <div class="text-center text-sm">
186
+ <span class="text-white text-opacity-70">Não tem uma conta? </span>
187
+ <a href="#" class="text-green-300 font-medium hover:text-green-200">Cadastre-se</a>
188
+ </div>
189
+ </form>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </main>
194
+
195
+ <!-- Footer -->
196
+ <footer class="py-6 text-center text-white text-opacity-70 text-sm">
197
+ <p>© 2023 NutriPro - Todos os direitos reservados. Alimentando vidas com excelência.</p>
198
+ </footer>
199
+
200
+ <script>
201
+ // Dynamic background color change
202
+ const colors = [
203
+ 'linear-gradient(-45deg, #3b82f6, #4ade80, #f59e0b, #ec4899)',
204
+ 'linear-gradient(-45deg, #8b5cf6, #ec4899, #f59e0b, #84cc16)',
205
+ 'linear-gradient(-45deg, #06b6d4, #3b82f6, #8b5cf6, #d946ef)',
206
+ 'linear-gradient(-45deg, #f97316, #f59e0b, #84cc16, #10b981)'
207
+ ];
208
+
209
+ let currentColor = 0;
210
+ const body = document.querySelector('body');
211
+
212
+ function changeBackground() {
213
+ currentColor = (currentColor + 1) % colors.length;
214
+ body.style.background = colors[currentColor];
215
+ }
216
+
217
+ // Change background every 15 seconds
218
+ setInterval(changeBackground, 15000);
219
+
220
+ // Fruit card hover effects enhancement
221
+ document.querySelectorAll('.fruit-card').forEach(card => {
222
+ card.addEventListener('mouseenter', () => {
223
+ const icon = card.querySelector('i');
224
+ icon.style.transform = 'scale(1.1) rotate(5deg)';
225
+ icon.style.transition = 'all 0.3s ease';
226
+ });
227
+
228
+ card.addEventListener('mouseleave', () => {
229
+ const icon = card.querySelector('i');
230
+ icon.style.transform = 'scale(1) rotate(0deg)';
231
+ });
232
+ });
233
+
234
+ // Form submission handling (mock)
235
+ document.querySelector('form').addEventListener('submit', function(e) {
236
+ e.preventDefault();
237
+ const email = document.getElementById('email').value;
238
+ const password = document.getElementById('password').value;
239
+
240
+ // Simple validation
241
+ if(email === '' || password === '') {
242
+ alert('Por favor, preencha todos os campos.');
243
+ return;
244
+ }
245
+
246
+ // Mock login
247
+ alert(`Bem-vindo ao NutriPro, ${email}! (Login simulado para demonstração)`);
248
+ });
249
+
250
+ // Animate elements on scroll
251
+ const animateOnScroll = () => {
252
+ const elements = document.querySelectorAll('.fruit-card');
253
+ elements.forEach((el, index) => {
254
+ const elTop = el.getBoundingClientRect().top;
255
+ const windowHeight = window.innerHeight;
256
+
257
+ if(elTop < windowHeight - 100) {
258
+ setTimeout(() => {
259
+ el.style.opacity = '1';
260
+ el.style.transform = 'translateY(0) rotateX(0)';
261
+ }, index * 100);
262
+ }
263
+ });
264
+ };
265
+
266
+ window.addEventListener('scroll', animateOnScroll);
267
+ window.addEventListener('load', animateOnScroll);
268
+ </script>
269
+ <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=ApacheWinchester/asd" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
270
+ </html>