Hugging Face's logo

Spaces:
Diegobrons
/
s1
Running

App Files Community
Diegobrons commited on
Commit
5e8a306
·
verified ·
1 Parent(s): 629bd60

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +707 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: S1
3
- emoji: 🏢
4
- colorFrom: purple
5
- colorTo: yellow
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: s1
3
+ emoji: 🐳
4
+ colorFrom: red
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,707 @@
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>EcoPlast - Gestão de Plásticos de E-lixo</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #4ade80 0%, #3b82f6 100%);
12
+ }
13
+ .plastic-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .floating-btn {
18
+ animation: float 3s ease-in-out infinite;
19
+ }
20
+ @keyframes float {
21
+ 0% { transform: translateY(0px); }
22
+ 50% { transform: translateY(-10px); }
23
+ 100% { transform: translateY(0px); }
24
+ }
25
+ .plastic-type-1 { background-color: #FF5733; }
26
+ .plastic-type-2 { background-color: #33FF57; }
27
+ .plastic-type-3 { background-color: #3357FF; }
28
+ .plastic-type-4 { background-color: #F3FF33; }
29
+ .plastic-type-5 { background-color: #FF33F3; }
30
+ .plastic-type-6 { background-color: #33FFF3; }
31
+ .plastic-type-7 { background-color: #8A33FF; }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50 font-sans">
35
+ <!-- Header -->
36
+ <header class="gradient-bg text-white shadow-lg">
37
+ <div class="container mx-auto px-4 py-6">
38
+ <div class="flex justify-between items-center">
39
+ <div class="flex items-center space-x-2">
40
+ <i class="fas fa-recycle text-3xl"></i>
41
+ <h1 class="text-2xl font-bold">EcoPlast</h1>
42
+ </div>
43
+ <nav class="hidden md:flex space-x-8">
44
+ <a href="#features" class="hover:text-gray-200 transition">Recursos</a>
45
+ <a href="#process" class="hover:text-gray-200 transition">Processo</a>
46
+ <a href="#plastics" class="hover:text-gray-200 transition">Tipos de Plástico</a>
47
+ <a href="#contact" class="hover:text-gray-200 transition">Contato</a>
48
+ </nav>
49
+ <button class="md:hidden text-xl">
50
+ <i class="fas fa-bars"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </header>
55
+
56
+ <!-- Hero Section -->
57
+ <section class="gradient-bg text-white py-20">
58
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
59
+ <div class="md:w-1/2 mb-10 md:mb-0">
60
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Transformando e-lixo em recursos valiosos</h2>
61
+ <p class="text-xl mb-8">Nosso sistema ajuda na identificação e separação de plásticos provenientes de sucata eletrônica, garantindo a destinação correta para cada tipo de material.</p>
62
+ <div class="flex space-x-4">
63
+ <button class="bg-white text-green-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition shadow-lg">
64
+ Comece agora
65
+ </button>
66
+ <button class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-green-600 transition">
67
+ Saiba mais
68
+ </button>
69
+ </div>
70
+ </div>
71
+ <div class="md:w-1/2 flex justify-center">
72
+ <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
73
+ alt="Plásticos de e-lixo"
74
+ class="rounded-xl shadow-2xl max-w-md w-full">
75
+ </div>
76
+ </div>
77
+ </section>
78
+
79
+ <!-- Features Section -->
80
+ <section id="features" class="py-20 bg-white">
81
+ <div class="container mx-auto px-4">
82
+ <h2 class="text-3xl font-bold text-center mb-16">Como o EcoPlast ajuda sua empresa</h2>
83
+
84
+ <div class="grid md:grid-cols-3 gap-10">
85
+ <!-- Feature 1 -->
86
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-xl transition">
87
+ <div class="text-green-500 text-4xl mb-4">
88
+ <i class="fas fa-fingerprint"></i>
89
+ </div>
90
+ <h3 class="text-xl font-semibold mb-3">Identificação Automática</h3>
91
+ <p class="text-gray-600">Nosso sistema utiliza inteligência artificial para identificar automaticamente os tipos de plástico presentes no e-lixo.</p>
92
+ </div>
93
+
94
+ <!-- Feature 2 -->
95
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-xl transition">
96
+ <div class="text-blue-500 text-4xl mb-4">
97
+ <i class="fas fa-sort-amount-down"></i>
98
+ </div>
99
+ <h3 class="text-xl font-semibold mb-3">Classificação Precisa</h3>
100
+ <p class="text-gray-600">Classificamos os plásticos de acordo com os padrões internacionais, garantindo a correta destinação para cada tipo.</p>
101
+ </div>
102
+
103
+ <!-- Feature 3 -->
104
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-xl transition">
105
+ <div class="text-purple-500 text-4xl mb-4">
106
+ <i class="fas fa-chart-line"></i>
107
+ </div>
108
+ <h3 class="text-xl font-semibold mb-3">Otimização de Recursos</h3>
109
+ <p class="text-gray-600">Aumente seus lucros vendendo cada tipo de plástico para os compradores específicos que oferecem os melhores preços.</p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Process Section -->
116
+ <section id="process" class="py-20 bg-gray-50">
117
+ <div class="container mx-auto px-4">
118
+ <h2 class="text-3xl font-bold text-center mb-16">Nosso Processo de Separação</h2>
119
+
120
+ <div class="relative">
121
+ <!-- Timeline -->
122
+ <div class="hidden md:block absolute left-1/2 h-full w-1 bg-green-400 transform -translate-x-1/2"></div>
123
+
124
+ <!-- Process Steps -->
125
+ <div class="space-y-16">
126
+ <!-- Step 1 -->
127
+ <div class="relative flex flex-col md:flex-row items-center">
128
+ <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 md:text-right">
129
+ <h3 class="text-2xl font-semibold mb-2">1. Coleta do E-lixo</h3>
130
+ <p class="text-gray-600">Recebemos a sucata eletrônica e realizamos a triagem inicial para separar componentes perigosos.</p>
131
+ </div>
132
+ <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 bg-green-500 rounded-full w-8 h-8"></div>
133
+ <div class="md:w-1/2 md:pl-16">
134
+ <img src="https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
135
+ alt="Coleta de e-lixo"
136
+ class="rounded-xl shadow-md w-full max-w-md">
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Step 2 -->
141
+ <div class="relative flex flex-col md:flex-row items-center">
142
+ <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 order-2 md:order-1">
143
+ <img src="https://images.unsplash.com/photo-1611270630257-9a9d7b0a0b6a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
144
+ alt="Identificação de plásticos"
145
+ class="rounded-xl shadow-md w-full max-w-md">
146
+ </div>
147
+ <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 bg-green-500 rounded-full w-8 h-8"></div>
148
+ <div class="md:w-1/2 md:pl-16 order-1 md:order-2 md:text-left">
149
+ <h3 class="text-2xl font-semibold mb-2">2. Identificação dos Plásticos</h3>
150
+ <p class="text-gray-600">Utilizamos tecnologia avançada para identificar os diferentes tipos de plásticos presentes nos componentes eletrônicos.</p>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Step 3 -->
155
+ <div class="relative flex flex-col md:flex-row items-center">
156
+ <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 md:text-right">
157
+ <h3 class="text-2xl font-semibold mb-2">3. Separação e Classificação</h3>
158
+ <p class="text-gray-600">Os plásticos são separados por tipo e classificados de acordo com suas propriedades e possibilidades de reciclagem.</p>
159
+ </div>
160
+ <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 bg-green-500 rounded-full w-8 h-8"></div>
161
+ <div class="md:w-1/2 md:pl-16">
162
+ <img src="https://images.unsplash.com/photo-1604176354204-9268737828e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D3D&auto=format&fit=crop&w=500&q=80"
163
+ alt="Separação de plásticos"
164
+ class="rounded-xl shadow-md w-full max-w-md">
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Step 4 -->
169
+ <div class="relative flex flex-col md:flex-row items-center">
170
+ <div class="md:w-1/2 md:pr-16 mb-8 md:mb-0 order-2 md:order-1">
171
+ <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
172
+ alt="Destinação de plásticos"
173
+ class="rounded-xl shadow-md w-full max-w-md">
174
+ </div>
175
+ <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 bg-green-500 rounded-full w-8 h-8"></div>
176
+ <div class="md:w-1/2 md:pl-16 order-1 md:order-2 md:text-left">
177
+ <h3 class="text-2xl font-semibold mb-2">4. Destinação Correta</h3>
178
+ <p class="text-gray-600">Cada tipo de plástico é encaminhado para os compradores específicos, maximizando o valor de revenda e garantindo a reciclagem adequada.</p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </section>
185
+
186
+ <!-- Plastics Guide Section -->
187
+ <section id="plastics" class="py-20 bg-white">
188
+ <div class="container mx-auto px-4">
189
+ <h2 class="text-3xl font-bold text-center mb-16">Guia de Identificação de Plásticos</h2>
190
+
191
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
192
+ <!-- Plastic Type 1 -->
193
+ <div class="plastic-card bg-gray-50 rounded-xl overflow-hidden shadow-md transition duration-300">
194
+ <div class="plastic-type-1 h-32 flex items-center justify-center">
195
+ <i class="fas fa-mobile-alt text-white text-5xl"></i>
196
+ </div>
197
+ <div class="p-6">
198
+ <h3 class="text-xl font-bold mb-2">ABS (Acrilonitrila Butadieno Estireno)</h3>
199
+ <p class="text-gray-600 mb-4">Comum em teclados, carcaças de computadores e eletrodomésticos. Resistente ao impacto e fácil de moldar.</p>
200
+ <div class="flex justify-between items-center">
201
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 7</span>
202
+ <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Plastic Type 2 -->
208
+ <div class="plastic-card bg-gray-50 rounded-xl overflow-hidden shadow-md transition duration-300">
209
+ <div class="plastic-type-2 h-32 flex items-center justify-center">
210
+ <i class="fas fa-plug text-white text-5xl"></i>
211
+ </div>
212
+ <div class="p-6">
213
+ <h3 class="text-xl font-bold mb-2">PC (Policarbonato)</h3>
214
+ <p class="text-gray-600 mb-4">Encontrado em CDs, DVDs, lentes e componentes ópticos. Transparente e altamente resistente.</p>
215
+ <div class="flex justify-between items-center">
216
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 7</span>
217
+ <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Plastic Type 3 -->
223
+ <div class="plastic-card bg-gray-50 rounded-xl overflow-hidden shadow-md transition duration-300">
224
+ <div class="plastic-type-3 h-32 flex items-center justify-center">
225
+ <i class="fas fa-tv text-white text-5xl"></i>
226
+ </div>
227
+ <div class="p-6">
228
+ <h3 class="text-xl font-bold mb-2">HIPS (Poliestireno de Alto Impacto)</h3>
229
+ <p class="text-gray-600 mb-4">Usado em monitores, TVs e embalagens. Reconhecível pelo som metálico quando batido.</p>
230
+ <div class="flex justify-between items-center">
231
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 6</span>
232
+ <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Plastic Type 4 -->
238
+ <div class="plastic-card bg-gray-50 rounded-xl overflow-hidden shadow-md transition duration-300">
239
+ <div class="plastic-type-4 h-32 flex items-center justify-center">
240
+ <i class="fas fa-battery-three-quarters text-white text-5xl"></i>
241
+ </div>
242
+ <div class="p-6">
243
+ <h3 class="text-xl font-bold mb-2">PP (Polipropileno)</h3>
244
+ <p class="text-gray-600 mb-4">Presente em baterias, componentes internos e isolantes. Resistente a produtos químicos.</p>
245
+ <div class="flex justify-between items-center">
246
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 5</span>
247
+ <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Plastic Type 5 -->
253
+ <div class="plastic-card bg-gray-50 rounded-xl overflow-hidden shadow-md transition duration-300">
254
+ <div class="plastic-type-5 h-32 flex items-center justify-center">
255
+ <i class="fas fa-headphones text-white text-5xl"></i>
256
+ </div>
257
+ <div class="p-6">
258
+ <h3 class="text-xl font-bold mb-2">PVC (Policloreto de Vinila)</h3>
259
+ <p class="text-gray-600 mb-4">Usado em fios, cabos e revestimentos. Flexível e resistente à chama.</p>
260
+ <div class="flex justify-between items-center">
261
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 3</span>
262
+ <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Plastic Type 6 -->
268
+ <div class="plastic-card bg-gray-50 rounded-xl overflow-hidden shadow-md transition duration-300">
269
+ <div class="plastic-type-6 h-32 flex items-center justify-center">
270
+ <i class="fas fa-microchip text-white text-5xl"></i>
271
+ </div>
272
+ <div class="p-6">
273
+ <h3 class="text-xl font-bold mb-2">PBT (Politereftalato de Butileno)</h3>
274
+ <p class="text-gray-600 mb-4">Encontrado em conectores, componentes elétricos e peças de precisão. Boa estabilidade dimensional.</p>
275
+ <div class="flex justify-between items-center">
276
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Código 7</span>
277
+ <button class="text-blue-500 hover:text-blue-700 font-medium">Saiba mais</button>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="mt-16 text-center">
284
+ <button class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-full font-semibold transition shadow-lg">
285
+ Ver todos os tipos de plástico
286
+ </button>
287
+ </div>
288
+ </div>
289
+ </section>
290
+
291
+ <!-- Identification Tool -->
292
+ <section class="py-20 bg-gray-50">
293
+ <div class="container mx-auto px-4">
294
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
295
+ <div class="md:flex">
296
+ <div class="md:w-1/2 p-10 gradient-bg text-white">
297
+ <h2 class="text-3xl font-bold mb-6">Identificador de Plásticos</h2>
298
+ <p class="mb-8">Use nossa ferramenta interativa para identificar o tipo de plástico encontrado no e-lixo.</p>
299
+ <div class="flex items-center mb-4">
300
+ <div class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center mr-4">
301
+ <i class="fas fa-camera"></i>
302
+ </div>
303
+ <p>Tire uma foto do material</p>
304
+ </div>
305
+ <div class="flex items-center mb-4">
306
+ <div class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center mr-4">
307
+ <i class="fas fa-flask"></i>
308
+ </div>
309
+ <p>Realize o teste de densidade</p>
310
+ </div>
311
+ <div class="flex items-center">
312
+ <div class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center mr-4">
313
+ <i class="fas fa-check-circle"></i>
314
+ </div>
315
+ <p>Obtenha a identificação precisa</p>
316
+ </div>
317
+ </div>
318
+ <div class="md:w-1/2 p-10">
319
+ <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center">
320
+ <i class="fas fa-cloud-upload-alt text-5xl text-gray-400 mb-4"></i>
321
+ <h3 class="text-xl font-semibold mb-2">Arraste e solte a imagem aqui</h3>
322
+ <p class="text-gray-500 mb-6">ou clique para selecionar um arquivo</p>
323
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full font-medium transition">
324
+ Selecionar arquivo
325
+ </button>
326
+ </div>
327
+
328
+ <div class="mt-8">
329
+ <h4 class="font-semibold mb-3">Ou responda algumas perguntas:</h4>
330
+ <div class="space-y-4">
331
+ <div>
332
+ <label class="block text-gray-700 mb-1">O plástico é flexível?</label>
333
+ <div class="flex space-x-4">
334
+ <button class="px-4 py-2 bg-gray-200 rounded-full">Sim</button>
335
+ <button class="px-4 py-2 bg-gray-200 rounded-full">Não</button>
336
+ </div>
337
+ </div>
338
+ <div>
339
+ <label class="block text-gray-700 mb-1">Qual a aparência da chama quando queimado?</label>
340
+ <select class="w-full p-2 border rounded">
341
+ <option>Selecione uma opção</option>
342
+ <option>Chama amarela com fuligem preta</option>
343
+ <option>Chama azul com base amarela</option>
344
+ <option>Queima com dificuldade</option>
345
+ </select>
346
+ </div>
347
+ <div>
348
+ <label class="block text-gray-700 mb-1">Qual o som quando batido?</label>
349
+ <select class="w-full p-2 border rounded">
350
+ <option>Selecione uma opção</option>
351
+ <option>Som metálico</option>
352
+ <option>Som abafado</option>
353
+ <option>Som oco</option>
354
+ </select>
355
+ </div>
356
+ </div>
357
+ <button class="mt-6 w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-full font-semibold transition">
358
+ Identificar Plástico
359
+ </button>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </section>
366
+
367
+ <!-- Marketplace Section -->
368
+ <section class="py-20 bg-white">
369
+ <div class="container mx-auto px-4">
370
+ <h2 class="text-3xl font-bold text-center mb-4">Mercado de Plásticos Reciclados</h2>
371
+ <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Conectamos sua empresa com compradores especializados para cada tipo de plástico recuperado.</p>
372
+
373
+ <div class="grid md:grid-cols-3 gap-8">
374
+ <!-- Marketplace Card 1 -->
375
+ <div class="border border-gray-200 rounded-xl p-6 hover:shadow-lg transition">
376
+ <div class="flex items-center mb-4">
377
+ <div class="w-12 h-12 rounded-full bg-blue-100 text-blue-500 flex items-center justify-center mr-4">
378
+ <i class="fas fa-industry"></i>
379
+ </div>
380
+ <h3 class="text-xl font-semibold">Compradores de ABS</h3>
381
+ </div>
382
+ <p class="text-gray-600 mb-4">Empresas especializadas na fabricação de novos produtos eletrônicos e automotivos.</p>
383
+ <div class="flex justify-between items-center">
384
+ <span class="text-green-500 font-bold">R$ 2,80/kg</span>
385
+ <button class="text-blue-500 hover:text-blue-700 font-medium">Ver ofertas</button>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Marketplace Card 2 -->
390
+ <div class="border border-gray-200 rounded-xl p-6 hover:shadow-lg transition">
391
+ <div class="flex items-center mb-4">
392
+ <div class="w-12 h-12 rounded-full bg-purple-100 text-purple-500 flex items-center justify-center mr-4">
393
+ <i class="fas fa-building"></i>
394
+ </div>
395
+ <h3 class="text-xl font-semibold">Compradores de PC</h3>
396
+ </div>
397
+ <p class="text-gray-600 mb-4">Indústrias que utilizam policarbonato em produtos de alta resistência e transparência.</p>
398
+ <div class="flex justify-between items-center">
399
+ <span class="text-green-500 font-bold">R$ 4,15/kg</span>
400
+ <button class="text-blue-500 hover:text-blue-700 font-medium">Ver ofertas</button>
401
+ </div>
402
+ </div>
403
+
404
+ <!-- Marketplace Card 3 -->
405
+ <div class="border border-gray-200 rounded-xl p-6 hover:shadow-lg transition">
406
+ <div class="flex items-center mb-4">
407
+ <div class="w-12 h-12 rounded-full bg-green-100 text-green-500 flex items-center justify-center mr-4">
408
+ <i class="fas fa-recycle"></i>
409
+ </div>
410
+ <h3 class="text-xl font-semibold">Compradores de PP</h3>
411
+ </div>
412
+ <p class="text-gray-600 mb-4">Empresas de reciclagem que transformam o material em novos produtos plásticos.</p>
413
+ <div class="flex justify-between items-center">
414
+ <span class="text-green-500 font-bold">R$ 1,95/kg</span>
415
+ <button class="text-blue-500 hover:text-blue-700 font-medium">Ver ofertas</button>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="mt-12 text-center">
421
+ <button class="border-2 border-green-500 text-green-500 hover:bg-green-500 hover:text-white px-8 py-3 rounded-full font-semibold transition">
422
+ Acessar o Mercado Completo
423
+ </button>
424
+ </div>
425
+ </div>
426
+ </section>
427
+
428
+ <!-- Contact Section -->
429
+ <section id="contact" class="py-20 bg-gray-50">
430
+ <div class="container mx-auto px-4">
431
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
432
+ <div class="md:flex">
433
+ <div class="md:w-1/2 p-12 gradient-bg text-white">
434
+ <h2 class="text-3xl font-bold mb-6">Entre em Contato</h2>
435
+ <p class="mb-8">Tem dúvidas sobre a separação de plásticos de e-lixo? Nossa equipe está pronta para ajudar.</p>
436
+
437
+ <div class="space-y-6">
438
+ <div class="flex items-start">
439
+ <div class="text-2xl mr-4 mt-1">
440
+ <i class="fas fa-map-marker-alt"></i>
441
+ </div>
442
+ <div>
443
+ <h4 class="font-semibold">Endereço</h4>
444
+ <p>Av. Sustentabilidade, 1234<br>Eco Parque Industrial<br>São Paulo - SP</p>
445
+ </div>
446
+ </div>
447
+
448
+ <div class="flex items-start">
449
+ <div class="text-2xl mr-4 mt-1">
450
+ <i class="fas fa-phone-alt"></i>
451
+ </div>
452
+ <div>
453
+ <h4 class="font-semibold">Telefone</h4>
454
+ <p>(11) 1234-5678</p>
455
+ </div>
456
+ </div>
457
+
458
+ <div class="flex items-start">
459
+ <div class="text-2xl mr-4 mt-1">
460
+ <i class="fas fa-envelope"></i>
461
+ </div>
462
+ <div>
463
+ <h4 class="font-semibold">Email</h4>
464
+ <p>[email protected]</p>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="mt-10 flex space-x-4">
470
+ <a href="#" class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center">
471
+ <i class="fab fa-facebook-f"></i>
472
+ </a>
473
+ <a href="#" class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center">
474
+ <i class="fab fa-instagram"></i>
475
+ </a>
476
+ <a href="#" class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center">
477
+ <i class="fab fa-linkedin-in"></i>
478
+ </a>
479
+ <a href="#" class="w-10 h-10 rounded-full bg-white text-green-500 flex items-center justify-center">
480
+ <i class="fab fa-youtube"></i>
481
+ </a>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="md:w-1/2 p-12">
486
+ <h3 class="text-2xl font-bold mb-6">Envie sua mensagem</h3>
487
+ <form>
488
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
489
+ <div>
490
+ <label class="block text-gray-700 mb-2">Nome</label>
491
+ <input type="text" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
492
+ </div>
493
+ <div>
494
+ <label class="block text-gray-700 mb-2">Email</label>
495
+ <input type="email" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
496
+ </div>
497
+ </div>
498
+ <div class="mb-6">
499
+ <label class="block text-gray-700 mb-2">Assunto</label>
500
+ <input type="text" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
501
+ </div>
502
+ <div class="mb-6">
503
+ <label class="block text-gray-700 mb-2">Mensagem</label>
504
+ <textarea rows="5" class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"></textarea>
505
+ </div>
506
+ <button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-full font-semibold transition shadow-lg">
507
+ Enviar Mensagem
508
+ </button>
509
+ </form>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </section>
515
+
516
+ <!-- FAQ Section -->
517
+ <section class="py-20 bg-white">
518
+ <div class="container mx-auto px-4 max-w-4xl">
519
+ <h2 class="text-3xl font-bold text-center mb-12">Perguntas Frequentes</h2>
520
+
521
+ <div class="space-y-4">
522
+ <!-- FAQ Item 1 -->
523
+ <div class="border border-gray-200 rounded-xl overflow-hidden">
524
+ <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
525
+ <h3 class="font-semibold text-lg">Como identificar corretamente os tipos de plástico no e-lixo?</h3>
526
+ <i class="fas fa-chevron-down text-green-500"></i>
527
+ </button>
528
+ <div class="px-6 pb-6 hidden">
529
+ <p class="text-gray-600">Recomendamos utilizar nossa ferramenta de identificação que combina análise visual, testes de densidade e características de queima. Para maior precisão, você pode enviar amostras para nosso laboratório de análise.</p>
530
+ </div>
531
+ </div>
532
+
533
+ <!-- FAQ Item 2 -->
534
+ <div class="border border-gray-200 rounded-xl overflow-hidden">
535
+ <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
536
+ <h3 class="font-semibold text-lg">Quais os plásticos mais valiosos no e-lixo?</h3>
537
+ <i class="fas fa-chevron-down text-green-500"></i>
538
+ </button>
539
+ <div class="px-6 pb-6 hidden">
540
+ <p class="text-gray-600">O policarbonato (PC) e o ABS são os plásticos mais valiosos, amplamente utilizados em componentes eletrônicos. O valor varia conforme a pureza do material e condições de mercado, podendo alcançar até R$ 5,00/kg.</p>
541
+ </div>
542
+ </div>
543
+
544
+ <!-- FAQ Item 3 -->
545
+ <div class="border border-gray-200 rounded-xl overflow-hidden">
546
+ <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
547
+ <h3 class="font-semibold text-lg">Como preparar os plásticos para venda?</h3>
548
+ <i class="fas fa-chevron-down text-green-500"></i>
549
+ </button>
550
+ <div class="px-6 pb-6 hidden">
551
+ <p class="text-gray-600">1. Limpe os plásticos removendo metais e outros contaminantes<br>
552
+ 2. Separe por tipo e cor<br>
553
+ 3. Triture em flocos uniformes quando possível<br>
554
+ 4. Armazene em big bags ou fardos bem identificados<br>
555
+ 5. Mantenha em local seco até a coleta</p>
556
+ </div>
557
+ </div>
558
+
559
+ <!-- FAQ Item 4 -->
560
+ <div class="border border-gray-200 rounded-xl overflow-hidden">
561
+ <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
562
+ <h3 class="font-semibold text-lg">Quais os prazos para retirada dos materiais?</h3>
563
+ <i class="fas fa-chevron-down text-green-500"></i>
564
+ </button>
565
+ <div class="px-6 pb-6 hidden">
566
+ <p class="text-gray-600">Para volumes acima de 500kg, realizamos a coleta em até 5 dias úteis após a confirmação da venda. Para menores quantidades, trabalhamos com coleta agendada semanalmente em cada região.</p>
567
+ </div>
568
+ </div>
569
+
570
+ <!-- FAQ Item 5 -->
571
+ <div class="border border-gray-200 rounded-xl overflow-hidden">
572
+ <button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
573
+ <h3 class="font-semibold text-lg">Como são realizados os pagamentos?</h3>
574
+ <i class="fas fa-chevron-down text-green-500"></i>
575
+ </button>
576
+ <div class="px-6 pb-6 hidden">
577
+ <p class="text-gray-600">O pagamento é realizado via transferência bancária em até 3 dias úteis após a pesagem e análise de qualidade do material em nosso centro de processamento. Também oferecemos opção de antecipação de recebíveis para clientes cadastrados.</p>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </section>
583
+
584
+ <!-- CTA Section -->
585
+ <section class="gradient-bg text-white py-16">
586
+ <div class="container mx-auto px-4 text-center">
587
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para otimizar sua reciclagem de plásticos?</h2>
588
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Junte-se a dezenas de empresas que já transformaram seu e-lixo em receita com nossa plataforma.</p>
589
+ <button class="bg-white text-green-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition shadow-xl text-lg">
590
+ Cadastre-se Gratuitamente
591
+ </button>
592
+ </div>
593
+ </section>
594
+
595
+ <!-- Footer -->
596
+ <footer class="bg-gray-900 text-white py-12">
597
+ <div class="container mx-auto px-4">
598
+ <div class="grid md:grid-cols-4 gap-12 mb-12">
599
+ <!-- Footer Column 1 -->
600
+ <div>
601
+ <div class="flex items-center space-x-2 mb-4">
602
+ <i class="fas fa-recycle text-2xl text-green-400"></i>
603
+ <h3 class="text-xl font-bold">EcoPlast</h3>
604
+ </div>
605
+ <p class="text-gray-400">Transformando e-lixo em oportunidades sustentáveis através da tecnologia e inovação.</p>
606
+ </div>
607
+
608
+ <!-- Footer Column 2 -->
609
+ <div>
610
+ <h4 class="text-lg font-semibold mb-4">Links Rápidos</h4>
611
+ <ul class="space-y-2">
612
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Início</a></li>
613
+ <li><a href="#features" class="text-gray-400 hover:text-white transition">Recursos</a></li>
614
+ <li><a href="#process" class="text-gray-400 hover:text-white transition">Processo</a></li>
615
+ <li><a href="#plastics" class="text-gray-400 hover:text-white transition">Tipos de Plástico</a></li>
616
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contato</a></li>
617
+ </ul>
618
+ </div>
619
+
620
+ <!-- Footer Column 3 -->
621
+ <div>
622
+ <h4 class="text-lg font-semibold mb-4">Recursos</h4>
623
+ <ul class="space-y-2">
624
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Identificador de Plásticos</a></li>
625
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mercado de Reciclados</a></li>
626
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Guia de Separação</a></li>
627
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Treinamentos</a></li>
628
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
629
+ </ul>
630
+ </div>
631
+
632
+ <!-- Footer Column 4 -->
633
+ <div>
634
+ <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
635
+ <p class="text-gray-400 mb-4">Assine para receber novidades e dicas sobre reciclagem de plásticos.</p>
636
+ <form class="flex">
637
+ <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full">
638
+ <button type="submit" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded-r-lg">
639
+ <i class="fas fa-paper-plane"></i>
640
+ </button>
641
+ </form>
642
+ <div class="flex space-x-4 mt-4">
643
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center">
644
+ <i class="fab fa-facebook-f"></i>
645
+ </a>
646
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center">
647
+ <i class="fab fa-twitter"></i>
648
+ </a>
649
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center">
650
+ <i class="fab fa-instagram"></i>
651
+ </a>
652
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-700 flex items-center justify-center">
653
+ <i class="fab fa-linkedin-in"></i>
654
+ </a>
655
+ </div>
656
+ </div>
657
+ </div>
658
+
659
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
660
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 EcoPlast. Todos os direitos reservados.</p>
661
+ <div class="flex space-x-6">
662
+ <a href="#" class="text-gray-400 hover:text-white transition">Termos de Serviço</a>
663
+ <a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a>
664
+ <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ </footer>
669
+
670
+ <!-- Floating Action Button -->
671
+ <div class="fixed bottom-8 right-8">
672
+ <button class="floating-btn w-16 h-16 rounded-full bg-green-500 text-white shadow-xl flex items-center justify-center text-2xl">
673
+ <i class="fas fa-comment-dots"></i>
674
+ </button>
675
+ </div>
676
+
677
+ <script>
678
+ // FAQ toggle functionality
679
+ document.querySelectorAll('footer button').forEach(button => {
680
+ button.addEventListener('click', () => {
681
+ const content = button.nextElementSibling;
682
+ const icon = button.querySelector('i');
683
+
684
+ if (content.classList.contains('hidden')) {
685
+ content.classList.remove('hidden');
686
+ icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
687
+ } else {
688
+ content.classList.add('hidden');
689
+ icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
690
+ }
691
+ });
692
+ });
693
+
694
+ // Mobile menu toggle (would need proper implementation)
695
+ // This is just a placeholder
696
+ document.querySelector('.md\\:hidden button').addEventListener('click', () => {
697
+ alert('Mobile menu would open here in a real implementation');
698
+ });
699
+
700
+ // Plastic identification form submission
701
+ document.querySelector('#identify-plastic').addEventListener('submit', (e) => {
702
+ e.preventDefault();
703
+ alert('Plastic identification would be processed here');
704
+ });
705
+ </script>
706
+ <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=Diegobrons/s1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
707
+ </html>
prompts.txt ADDED
File without changes