Hugging Face's logo

Spaces:
henboff
/
projetando
Running

App Files Community
henboff commited on
Commit
835c922
·
verified ·
1 Parent(s): 9f05f35

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +262 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Projetando
3
- emoji: 🔥
4
- colorFrom: yellow
5
- colorTo: purple
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: projetando
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,262 @@
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>Projetando - Dashboard de Manutenção</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 fadeIn {
11
+ from { opacity: 0; }
12
+ to { opacity: 1; }
13
+ }
14
+
15
+ @keyframes slideUp {
16
+ from { transform: translateY(20px); opacity: 0; }
17
+ to { transform: translateY(0); opacity: 1; }
18
+ }
19
+
20
+ @keyframes pulse {
21
+ 0%, 100% { transform: scale(1); }
22
+ 50% { transform: scale(1.05); }
23
+ }
24
+
25
+ @keyframes rotate {
26
+ from { transform: rotate(0deg); }
27
+ to { transform: rotate(360deg); }
28
+ }
29
+
30
+ .splash-screen {
31
+ animation: fadeIn 0.5s ease-out;
32
+ }
33
+
34
+ .splash-content {
35
+ animation: slideUp 0.8s ease-out 0.3s both;
36
+ }
37
+
38
+ .logo {
39
+ animation: pulse 2s infinite ease-in-out;
40
+ }
41
+
42
+ .loading-spinner {
43
+ animation: rotate 1.5s linear infinite;
44
+ }
45
+
46
+ .main-content {
47
+ display: none;
48
+ opacity: 0;
49
+ transition: opacity 0.8s ease;
50
+ }
51
+
52
+ .fade-in {
53
+ opacity: 1;
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-gray-100 font-sans">
58
+ <!-- Splash Screen -->
59
+ <div id="splash" class="splash-screen fixed inset-0 flex items-center justify-center bg-gradient-to-br from-blue-600 to-blue-800 z-50">
60
+ <div class="splash-content text-center px-4">
61
+ <div class="logo mb-8">
62
+ <i class="fas fa-cogs text-white text-6xl"></i>
63
+ </div>
64
+ <h1 class="text-4xl font-bold text-white mb-2">PROJETANDO</h1>
65
+ <p class="text-xl text-blue-100 mb-8">Dashboard de Manutenção Industrial</p>
66
+
67
+ <div class="loading-spinner inline-block text-white text-2xl mb-6">
68
+ <i class="fas fa-circle-notch"></i>
69
+ </div>
70
+
71
+ <div class="text-blue-200">
72
+ <p>Carregando dados dos equipamentos...</p>
73
+ <div class="w-full bg-blue-500 bg-opacity-30 rounded-full h-2 mt-2">
74
+ <div id="progress-bar" class="bg-white h-2 rounded-full" style="width: 0%"></div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Main Content (hidden initially) -->
81
+ <div id="main" class="main-content min-h-screen">
82
+ <!-- Header -->
83
+ <header class="bg-white shadow-sm">
84
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
85
+ <div class="flex items-center">
86
+ <i class="fas fa-cogs text-blue-600 text-2xl mr-3"></i>
87
+ <h1 class="text-2xl font-bold text-gray-800">PROJETANDO</h1>
88
+ </div>
89
+ <nav class="hidden md:block">
90
+ <ul class="flex space-x-6">
91
+ <li><a href="#" class="text-blue-600 font-medium">Dashboard</a></li>
92
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Equipamentos</a></li>
93
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Ordens de Serviço</a></li>
94
+ <li><a href="#" class="text-gray-600 hover:text-blue-600">Relatórios</a></li>
95
+ </ul>
96
+ </nav>
97
+ <div class="flex items-center">
98
+ <button class="md:hidden text-gray-600">
99
+ <i class="fas fa-bars text-xl"></i>
100
+ </button>
101
+ <div class="ml-4 hidden md:block">
102
+ <span class="text-gray-700">Eng. Responsável</span>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </header>
107
+
108
+ <!-- Main Dashboard -->
109
+ <main class="container mx-auto px-4 py-8">
110
+ <div class="mb-8">
111
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Visão Consolidada de Manutenção</h2>
112
+ <p class="text-gray-600">Monitoramento em tempo real do status dos equipamentos e ordens de serviço</p>
113
+ </div>
114
+
115
+ <!-- Stats Cards -->
116
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
117
+ <div class="bg-white rounded-lg shadow p-6">
118
+ <div class="flex items-center">
119
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
120
+ <i class="fas fa-industry text-xl"></i>
121
+ </div>
122
+ <div>
123
+ <p class="text-gray-500">Equipamentos</p>
124
+ <h3 class="text-2xl font-bold">42</h3>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="bg-white rounded-lg shadow p-6">
130
+ <div class="flex items-center">
131
+ <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
132
+ <i class="fas fa-check-circle text-xl"></i>
133
+ </div>
134
+ <div>
135
+ <p class="text-gray-500">Operacionais</p>
136
+ <h3 class="text-2xl font-bold">35</h3>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="bg-white rounded-lg shadow p-6">
142
+ <div class="flex items-center">
143
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
144
+ <i class="fas fa-tools text-xl"></i>
145
+ </div>
146
+ <div>
147
+ <p class="text-gray-500">OS em Andamento</p>
148
+ <h3 class="text-2xl font-bold">5</h3>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="bg-white rounded-lg shadow p-6">
154
+ <div class="flex items-center">
155
+ <div class="p-3 rounded-full bg-red-100 text-red-600 mr-4">
156
+ <i class="fas fa-exclamation-triangle text-xl"></i>
157
+ </div>
158
+ <div>
159
+ <p class="text-gray-500">Críticos</p>
160
+ <h3 class="text-2xl font-bold">2</h3>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Main Dashboard Content -->
167
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
168
+ <!-- Equipment Status -->
169
+ <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
170
+ <div class="p-6 border-b">
171
+ <h3 class="text-xl font-semibold text-gray-800">Status dos Equipamentos</h3>
172
+ </div>
173
+ <div class="p-6">
174
+ <div class="h-64 flex items-center justify-center">
175
+ <p class="text-gray-500">Gráfico de status dos equipamentos será exibido aqui</p>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Recent OS -->
181
+ <div class="bg-white rounded-lg shadow overflow-hidden">
182
+ <div class="p-6 border-b">
183
+ <h3 class="text-xl font-semibold text-gray-800">Ordens de Serviço Recentes</h3>
184
+ </div>
185
+ <div class="divide-y">
186
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
187
+ <div class="flex justify-between items-center mb-1">
188
+ <span class="font-medium">OS-2023-045</span>
189
+ <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Em Andamento</span>
190
+ </div>
191
+ <p class="text-sm text-gray-600">Máquina de Moldagem #12</p>
192
+ <p class="text-xs text-gray-500 mt-1">Iniciada: 15/11/2023</p>
193
+ </div>
194
+
195
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
196
+ <div class="flex justify-between items-center mb-1">
197
+ <span class="font-medium">OS-2023-044</span>
198
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Concluída</span>
199
+ </div>
200
+ <p class="text-sm text-gray-600">Esteira Transportadora #5</p>
201
+ <p class="text-xs text-gray-500 mt-1">Concluída: 14/11/2023</p>
202
+ </div>
203
+
204
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
205
+ <div class="flex justify-between items-center mb-1">
206
+ <span class="font-medium">OS-2023-043</span>
207
+ <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">Urgente</span>
208
+ </div>
209
+ <p class="text-sm text-gray-600">Compressor Principal</p>
210
+ <p class="text-xs text-gray-500 mt-1">Iniciada: 13/11/2023</p>
211
+ </div>
212
+
213
+ <div class="p-4 hover:bg-gray-50 cursor-pointer">
214
+ <div class="flex justify-between items-center mb-1">
215
+ <span class="font-medium">OS-2023-042</span>
216
+ <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Programada</span>
217
+ </div>
218
+ <p class="text-sm text-gray-600">Forno Industrial #3</p>
219
+ <p class="text-xs text-gray-500 mt-1">Programada: 17/11/2023</p>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </main>
225
+ </div>
226
+
227
+ <script>
228
+ // Simulate loading process
229
+ document.addEventListener('DOMContentLoaded', function() {
230
+ let progress = 0;
231
+ const progressBar = document.getElementById('progress-bar');
232
+ const splash = document.getElementById('splash');
233
+ const main = document.getElementById('main');
234
+
235
+ const loadingInterval = setInterval(() => {
236
+ progress += Math.random() * 10;
237
+ if (progress > 100) progress = 100;
238
+ progressBar.style.width = `${progress}%`;
239
+
240
+ if (progress >= 100) {
241
+ clearInterval(loadingInterval);
242
+
243
+ // Fade out splash screen
244
+ splash.style.opacity = '0';
245
+ splash.style.transition = 'opacity 0.5s ease';
246
+
247
+ // After fade out, show main content
248
+ setTimeout(() => {
249
+ splash.style.display = 'none';
250
+ main.style.display = 'block';
251
+
252
+ // Fade in main content
253
+ setTimeout(() => {
254
+ main.classList.add('fade-in');
255
+ }, 50);
256
+ }, 500);
257
+ }
258
+ }, 300);
259
+ });
260
+ </script>
261
+ <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=henboff/projetando" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
262
+ </html>