Sousa45 commited on
Commit
159e583
·
verified ·
1 Parent(s): 1833711

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +676 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Var
3
- emoji: 👀
4
- colorFrom: indigo
5
- colorTo: blue
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: var
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,676 @@
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>Sistema VAR - Câmeras WiFi</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
+ .camera-view {
11
+ position: relative;
12
+ background-color: #111;
13
+ border: 2px solid #333;
14
+ overflow: hidden;
15
+ transition: all 0.3s ease;
16
+ }
17
+ .camera-view::before {
18
+ content: "";
19
+ display: block;
20
+ padding-top: 56.25%; /* 16:9 Aspect Ratio */
21
+ }
22
+ .camera-content {
23
+ position: absolute;
24
+ top: 0;
25
+ left: 0;
26
+ bottom: 0;
27
+ right: 0;
28
+ display: flex;
29
+ justify-content: center;
30
+ align-items: center;
31
+ color: white;
32
+ font-size: 1.5rem;
33
+ }
34
+ .offside-line {
35
+ position: absolute;
36
+ height: 2px;
37
+ width: 100%;
38
+ background-color: red;
39
+ z-index: 10;
40
+ }
41
+ .player-marker {
42
+ position: absolute;
43
+ width: 12px;
44
+ height: 12px;
45
+ border-radius: 50%;
46
+ background-color: yellow;
47
+ z-index: 20;
48
+ }
49
+ .selected-camera {
50
+ border: 3px solid #3B82F6;
51
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
52
+ }
53
+ .decision-panel {
54
+ transition: all 0.3s ease;
55
+ max-width: 800px;
56
+ margin: 0 auto;
57
+ }
58
+ .wifi-strength {
59
+ position: absolute;
60
+ top: 10px;
61
+ right: 10px;
62
+ display: flex;
63
+ align-items: center;
64
+ background-color: rgba(0,0,0,0.7);
65
+ padding: 2px 5px;
66
+ border-radius: 10px;
67
+ font-size: 12px;
68
+ }
69
+ .wifi-icon {
70
+ margin-right: 3px;
71
+ }
72
+ .wifi-excellent { color: #4ade80; }
73
+ .wifi-good { color: #a3e635; }
74
+ .wifi-fair { color: #facc15; }
75
+ .wifi-weak { color: #f97316; }
76
+ .wifi-poor { color: #ef4444; }
77
+ .replay-timeline {
78
+ -webkit-appearance: none;
79
+ width: 100%;
80
+ height: 6px;
81
+ background: #4b5563;
82
+ border-radius: 3px;
83
+ margin-top: 8px;
84
+ }
85
+ .replay-timeline::-webkit-slider-thumb {
86
+ -webkit-appearance: none;
87
+ width: 16px;
88
+ height: 16px;
89
+ background: #3b82f6;
90
+ border-radius: 50%;
91
+ cursor: pointer;
92
+ }
93
+ .camera-feed {
94
+ position: absolute;
95
+ top: 0;
96
+ left: 0;
97
+ width: 100%;
98
+ height: 100%;
99
+ object-fit: cover;
100
+ }
101
+ .camera-overlay {
102
+ position: absolute;
103
+ top: 0;
104
+ left: 0;
105
+ width: 100%;
106
+ height: 100%;
107
+ background: rgba(0,0,0,0.3);
108
+ display: flex;
109
+ flex-direction: column;
110
+ justify-content: center;
111
+ align-items: center;
112
+ color: white;
113
+ }
114
+ </style>
115
+ </head>
116
+ <body class="bg-gray-900 text-white">
117
+ <div class="container mx-auto px-4 py-6">
118
+ <!-- Header -->
119
+ <header class="flex justify-between items-center mb-6">
120
+ <div>
121
+ <h1 class="text-3xl font-bold text-blue-400">
122
+ <i class="fas fa-video mr-2"></i>Sistema VAR WiFi
123
+ </h1>
124
+ <p class="text-gray-400">Análise de Impedimento - Câmeras Sem Fio</p>
125
+ </div>
126
+ <div class="flex items-center space-x-4">
127
+ <button id="scan-cameras" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg">
128
+ <i class="fas fa-wifi mr-2"></i>Procurar Câmeras
129
+ </button>
130
+ <button id="toggle-panel" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg">
131
+ <i class="fas fa-sliders-h mr-2"></i>Painel
132
+ </button>
133
+ </div>
134
+ </header>
135
+
136
+ <!-- Camera Grid -->
137
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6" id="camera-grid">
138
+ <!-- Cameras will be added dynamically -->
139
+ <div class="text-center py-10 text-gray-500" id="no-cameras">
140
+ <i class="fas fa-wifi-slash text-4xl mb-3"></i>
141
+ <p>Nenhuma câmera conectada</p>
142
+ <button onclick="scanCameras()" class="mt-4 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg">
143
+ <i class="fas fa-sync-alt mr-2"></i>Procurar Câmeras
144
+ </button>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Selected Camera View -->
149
+ <div class="mb-6 bg-gray-800 rounded-lg p-4">
150
+ <div class="flex justify-between items-center mb-4">
151
+ <h2 class="text-xl font-semibold">Visualização Selecionada</h2>
152
+ <div class="flex items-center space-x-3">
153
+ <span id="camera-fps" class="text-sm bg-gray-700 px-2 py-1 rounded">0 FPS</span>
154
+ <span id="camera-resolution" class="text-sm bg-gray-700 px-2 py-1 rounded">--</span>
155
+ <span id="camera-latency" class="text-sm bg-gray-700 px-2 py-1 rounded">0ms</span>
156
+ </div>
157
+ </div>
158
+ <div class="camera-view" id="selected-camera-view">
159
+ <div class="camera-overlay">
160
+ <i class="fas fa-eye text-gray-600 text-4xl mb-2"></i>
161
+ <p>Selecione uma câmera para visualizar</p>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Enhanced Replay Controls -->
166
+ <div class="mt-4">
167
+ <div class="flex justify-between items-center mb-1">
168
+ <span class="text-sm text-gray-400">00:00:00</span>
169
+ <span class="text-sm text-gray-400" id="replay-duration">00:00:10</span>
170
+ </div>
171
+ <input type="range" min="0" max="100" value="0" class="replay-timeline" id="replay-timeline">
172
+ <div class="flex justify-between bg-gray-700 p-3 rounded-lg mt-2">
173
+ <button onclick="skipToStart()" class="text-white hover:text-blue-400 px-2">
174
+ <i class="fas fa-fast-backward"></i>
175
+ </button>
176
+ <button onclick="frameBackward()" class="text-white hover:text-blue-400 px-2">
177
+ <i class="fas fa-step-backward"></i>
178
+ </button>
179
+ <button onclick="playPause()" class="text-white hover:text-blue-400 px-4">
180
+ <i class="fas fa-play" id="play-icon"></i>
181
+ </button>
182
+ <button onclick="frameForward()" class="text-white hover:text-blue-400 px-2">
183
+ <i class="fas fa-step-forward"></i>
184
+ </button>
185
+ <button onclick="skipToEnd()" class="text-white hover:text-blue-400 px-2">
186
+ <i class="fas fa-fast-forward"></i>
187
+ </button>
188
+ <button onclick="slowMotion()" class="text-white hover:text-blue-400 px-2">
189
+ <i class="fas fa-tachometer-alt"></i>
190
+ </button>
191
+ <div class="flex items-center ml-2">
192
+ <span class="text-sm mr-2">Velocidade:</span>
193
+ <select id="playback-speed" class="bg-gray-600 text-white text-sm rounded px-2 py-1">
194
+ <option value="0.25">0.25x</option>
195
+ <option value="0.5">0.5x</option>
196
+ <option value="1" selected>1x</option>
197
+ <option value="2">2x</option>
198
+ <option value="4">4x</option>
199
+ </select>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Decision Panel -->
206
+ <div id="decision-panel" class="decision-panel w-full bg-gray-800 rounded-lg p-4 mb-6">
207
+ <div class="flex justify-between items-center mb-4">
208
+ <h2 class="text-xl font-semibold">Painel de Decisão</h2>
209
+ <div class="flex items-center space-x-2">
210
+ <span class="text-sm">Bateria:</span>
211
+ <div class="w-24 bg-gray-700 h-2 rounded-full overflow-hidden">
212
+ <div id="camera-battery" class="bg-green-500 h-full" style="width: 80%"></div>
213
+ </div>
214
+ <span id="battery-percent" class="text-sm">80%</span>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
219
+ <!-- Offside Analysis -->
220
+ <div>
221
+ <h3 class="text-lg font-medium mb-2">Análise de Impedimento</h3>
222
+ <div class="bg-gray-700 p-3 rounded-lg mb-3">
223
+ <div class="flex justify-between mb-2">
224
+ <span>Último defensor:</span>
225
+ <span id="last-defender">--</span>
226
+ </div>
227
+ <div class="flex justify-between mb-2">
228
+ <span>Atacante:</span>
229
+ <span id="attacker-pos">--</span>
230
+ </div>
231
+ <div class="flex justify-between font-bold">
232
+ <span>Diferença:</span>
233
+ <span id="offside-diff">--</span>
234
+ </div>
235
+ </div>
236
+ <div class="flex space-x-2">
237
+ <button onclick="drawOffsideLine()" class="flex-1 bg-yellow-600 hover:bg-yellow-700 py-2 rounded">
238
+ <i class="fas fa-ruler-horizontal mr-2"></i>Traçar Linha
239
+ </button>
240
+ <button onclick="clearOffsideLine()" class="flex-1 bg-gray-600 hover:bg-gray-700 py-2 rounded">
241
+ <i class="fas fa-eraser mr-2"></i>Limpar
242
+ </button>
243
+ <button onclick="takeScreenshot()" class="flex-1 bg-blue-600 hover:bg-blue-700 py-2 rounded">
244
+ <i class="fas fa-camera mr-2"></i>Capturar
245
+ </button>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Decision Buttons -->
250
+ <div>
251
+ <h3 class="text-lg font-medium mb-2">Decisão</h3>
252
+ <div class="grid grid-cols-2 gap-2">
253
+ <button onclick="makeDecision('goal')" class="bg-green-600 hover:bg-green-700 py-3 rounded-lg">
254
+ <i class="fas fa-check-circle mr-2"></i>Gol Válido
255
+ </button>
256
+ <button onclick="makeDecision('offside')" class="bg-red-600 hover:bg-red-700 py-3 rounded-lg">
257
+ <i class="fas fa-times-circle mr-2"></i>Impedimento
258
+ </button>
259
+ <button onclick="makeDecision('no-offside')" class="bg-blue-600 hover:bg-blue-700 py-3 rounded-lg">
260
+ <i class="fas fa-check mr-2"></i>Sem Impedimento
261
+ </button>
262
+ <button onclick="makeDecision('inconclusive')" class="bg-gray-600 hover:bg-gray-700 py-3 rounded-lg">
263
+ <i class="fas fa-question mr-2"></i>Inconclusivo
264
+ </button>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Decision Log -->
270
+ <div class="mt-6">
271
+ <h3 class="text-lg font-medium mb-2">Histórico de Decisões</h3>
272
+ <div class="bg-gray-700 p-3 rounded-lg max-h-40 overflow-y-auto">
273
+ <div class="text-sm" id="decision-log">
274
+ <!-- Decisions will be added here -->
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Status Bar -->
281
+ <footer class="mt-6 bg-gray-800 p-3 rounded-lg flex justify-between items-center">
282
+ <div class="flex items-center space-x-4">
283
+ <div class="flex items-center">
284
+ <div id="wifi-status" class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
285
+ <span id="wifi-status-text">Conectado</span>
286
+ </div>
287
+ <div>
288
+ <span>Árbitro VAR: <span class="font-semibold">Carlos Silva</span></span>
289
+ </div>
290
+ </div>
291
+ <div class="flex items-center space-x-4">
292
+ <div>
293
+ <span>Câmeras: <span id="connected-cameras" class="font-semibold">0</span>/<span id="total-cameras">6</span></span>
294
+ </div>
295
+ <div>
296
+ <span>Estádio: <span class="font-semibold">Maracanã</span></span>
297
+ </div>
298
+ </div>
299
+ </footer>
300
+ </div>
301
+
302
+ <script>
303
+ // Camera data
304
+ const cameraDatabase = [
305
+ { id: 1, name: "Visão Geral", ip: "192.168.1.101", wifiStrength: 4, fps: 60, resolution: "1080p", battery: 85 },
306
+ { id: 2, name: "Lateral Esquerda", ip: "192.168.1.102", wifiStrength: 3, fps: 50, resolution: "1080p", battery: 72 },
307
+ { id: 3, name: "Lateral Direita", ip: "192.168.1.103", wifiStrength: 2, fps: 50, resolution: "1080p", battery: 65 },
308
+ { id: 4, name: "Linha de Fundo", ip: "192.168.1.104", wifiStrength: 4, fps: 60, resolution: "4K", battery: 90 },
309
+ { id: 5, name: "Zoom Ataque", ip: "192.168.1.105", wifiStrength: 3, fps: 60, resolution: "4K", battery: 78 },
310
+ { id: 6, name: "Zoom Defesa", ip: "192.168.1.106", wifiStrength: 1, fps: 30, resolution: "720p", battery: 45 }
311
+ ];
312
+
313
+ let connectedCameras = [];
314
+ let selectedCamera = null;
315
+ let isPlaying = false;
316
+ let currentTime = 0;
317
+ let replayInterval;
318
+
319
+ // Initialize
320
+ document.addEventListener('DOMContentLoaded', function() {
321
+ updateCameraStatus();
322
+ updateDecisionLog();
323
+ });
324
+
325
+ // Scan for WiFi cameras
326
+ function scanCameras() {
327
+ document.getElementById('no-cameras').classList.add('hidden');
328
+ const cameraGrid = document.getElementById('camera-grid');
329
+ cameraGrid.innerHTML = '';
330
+
331
+ // Simulate scanning
332
+ const scanning = document.createElement('div');
333
+ scanning.className = 'col-span-full text-center py-10 text-gray-500';
334
+ scanning.innerHTML = `
335
+ <i class="fas fa-wifi fa-spin text-4xl mb-3"></i>
336
+ <p>Procurando câmeras WiFi...</p>
337
+ `;
338
+ cameraGrid.appendChild(scanning);
339
+
340
+ // After delay, show found cameras
341
+ setTimeout(() => {
342
+ cameraGrid.innerHTML = '';
343
+ cameraDatabase.forEach(camera => {
344
+ const wifiClass = getWifiStrengthClass(camera.wifiStrength);
345
+ const wifiIcon = getWifiStrengthIcon(camera.wifiStrength);
346
+
347
+ const cameraElement = document.createElement('div');
348
+ cameraElement.className = 'camera-view cursor-pointer relative';
349
+ cameraElement.id = `camera-${camera.id}`;
350
+ cameraElement.onclick = () => selectCamera(camera.id);
351
+
352
+ cameraElement.innerHTML = `
353
+ <div class="camera-content">
354
+ <div class="text-center">
355
+ <i class="fas fa-video text-gray-600 text-4xl mb-2"></i>
356
+ <p>Câmera ${camera.id} - ${camera.name}</p>
357
+ <p class="text-sm text-gray-400 mt-1">${camera.ip}</p>
358
+ </div>
359
+ </div>
360
+ <div class="wifi-strength">
361
+ <i class="wifi-icon ${wifiClass} ${wifiIcon}"></i>
362
+ <span>${getWifiStrengthText(camera.wifiStrength)}</span>
363
+ </div>
364
+ `;
365
+
366
+ cameraGrid.appendChild(cameraElement);
367
+ });
368
+
369
+ connectedCameras = [...cameraDatabase];
370
+ updateCameraStatus();
371
+ }, 2000);
372
+ }
373
+
374
+ // Camera selection
375
+ function selectCamera(cameraNumber) {
376
+ // Remove selection from all cameras
377
+ document.querySelectorAll('.camera-view').forEach(cam => {
378
+ cam.classList.remove('selected-camera');
379
+ });
380
+
381
+ // Add selection to clicked camera
382
+ const cameraElement = document.getElementById(`camera-${cameraNumber}`);
383
+ cameraElement.classList.add('selected-camera');
384
+ selectedCamera = cameraNumber;
385
+
386
+ // Update selected camera view
387
+ const selectedView = document.getElementById('selected-camera-view');
388
+ selectedView.innerHTML = `
389
+ <div class="camera-overlay">
390
+ <i class="fas fa-circle-notch fa-spin text-4xl mb-2"></i>
391
+ <p>Conectando à câmera ${cameraNumber}...</p>
392
+ </div>
393
+ `;
394
+
395
+ // Find camera data
396
+ const camera = cameraDatabase.find(c => c.id === cameraNumber);
397
+
398
+ // After delay, show camera feed (simulated)
399
+ setTimeout(() => {
400
+ selectedView.innerHTML = `
401
+ <img src="https://via.placeholder.com/800x450/333/666?text=C%C3%A2mera+${cameraNumber}+${camera.resolution}"
402
+ class="camera-feed" alt="Camera Feed">
403
+ <div class="absolute top-0 left-0 p-2 bg-black bg-opacity-70 text-sm">
404
+ CAM ${cameraNumber} - ${camera.name} | ${camera.resolution}
405
+ </div>
406
+ `;
407
+
408
+ // Update camera info
409
+ document.getElementById('camera-fps').textContent = `${camera.fps} FPS`;
410
+ document.getElementById('camera-resolution').textContent = camera.resolution;
411
+ document.getElementById('camera-latency').textContent = `${Math.floor(Math.random() * 50) + 10}ms`;
412
+ document.getElementById('camera-battery').style.width = `${camera.battery}%`;
413
+ document.getElementById('battery-percent').textContent = `${camera.battery}%`;
414
+
415
+ // Update battery color based on level
416
+ const batteryElement = document.getElementById('camera-battery');
417
+ if (camera.battery > 60) {
418
+ batteryElement.className = 'bg-green-500 h-full';
419
+ } else if (camera.battery > 30) {
420
+ batteryElement.className = 'bg-yellow-500 h-full';
421
+ } else {
422
+ batteryElement.className = 'bg-red-500 h-full';
423
+ }
424
+ }, 1000);
425
+ }
426
+
427
+ // WiFi strength helpers
428
+ function getWifiStrengthClass(strength) {
429
+ switch(strength) {
430
+ case 4: return 'wifi-excellent';
431
+ case 3: return 'wifi-good';
432
+ case 2: return 'wifi-fair';
433
+ case 1: return 'wifi-weak';
434
+ default: return 'wifi-poor';
435
+ }
436
+ }
437
+
438
+ function getWifiStrengthIcon(strength) {
439
+ switch(strength) {
440
+ case 4: return 'fa-wifi';
441
+ case 3: return 'fa-wifi';
442
+ case 2: return 'fa-wifi';
443
+ case 1: return 'fa-wifi';
444
+ default: return 'fa-wifi';
445
+ }
446
+ }
447
+
448
+ function getWifiStrengthText(strength) {
449
+ switch(strength) {
450
+ case 4: return 'Excelente';
451
+ case 3: return 'Boa';
452
+ case 2: return 'Média';
453
+ case 1: return 'Fraca';
454
+ default: return 'Ruim';
455
+ }
456
+ }
457
+
458
+ // Update camera connection status
459
+ function updateCameraStatus() {
460
+ document.getElementById('connected-cameras').textContent = connectedCameras.length;
461
+ document.getElementById('total-cameras').textContent = cameraDatabase.length;
462
+
463
+ if (connectedCameras.length === 0) {
464
+ document.getElementById('wifi-status').className = 'w-3 h-3 rounded-full bg-red-500 mr-2';
465
+ document.getElementById('wifi-status-text').textContent = 'Desconectado';
466
+ } else {
467
+ document.getElementById('wifi-status').className = 'w-3 h-3 rounded-full bg-green-500 mr-2';
468
+ document.getElementById('wifi-status-text').textContent = 'Conectado';
469
+ }
470
+ }
471
+
472
+ // Offside line functions
473
+ function drawOffsideLine() {
474
+ if (!selectedCamera) {
475
+ alert('Selecione uma câmera primeiro!');
476
+ return;
477
+ }
478
+
479
+ const selectedView = document.getElementById('selected-camera-view');
480
+ const content = selectedView.querySelector('.camera-feed');
481
+
482
+ if (!content) {
483
+ alert('Aguarde a conexão com a câmera...');
484
+ return;
485
+ }
486
+
487
+ // Clear any existing lines
488
+ const existingLine = selectedView.querySelector('.offside-line');
489
+ if (existingLine) existingLine.remove();
490
+
491
+ // Clear any existing markers
492
+ const existingMarkers = selectedView.querySelectorAll('.player-marker');
493
+ existingMarkers.forEach(marker => marker.remove());
494
+
495
+ // Create offside line (random position for demo)
496
+ const line = document.createElement('div');
497
+ line.className = 'offside-line';
498
+ line.style.top = `${30 + Math.random() * 40}%`;
499
+ selectedView.appendChild(line);
500
+
501
+ // Create defender marker
502
+ const defenderMarker = document.createElement('div');
503
+ defenderMarker.className = 'player-marker';
504
+ defenderMarker.style.top = `${parseFloat(line.style.top) + 2 + Math.random() * 5}%`;
505
+ defenderMarker.style.left = `${30 + Math.random() * 40}%`;
506
+ selectedView.appendChild(defenderMarker);
507
+
508
+ // Create attacker marker
509
+ const attackerMarker = document.createElement('div');
510
+ attackerMarker.className = 'player-marker';
511
+ attackerMarker.style.top = `${parseFloat(line.style.top) - 2 - Math.random() * 5}%`;
512
+ attackerMarker.style.left = `${30 + Math.random() * 40}%`;
513
+ selectedView.appendChild(attackerMarker);
514
+
515
+ // Update analysis panel
516
+ const diff = (parseFloat(attackerMarker.style.top) - parseFloat(defenderMarker.style.top)) / 100 * 1.8;
517
+ document.getElementById('last-defender').textContent = '2.45m';
518
+ document.getElementById('attacker-pos').textContent = (2.45 + diff).toFixed(2) + 'm';
519
+ document.getElementById('offside-diff').textContent = (diff >= 0 ? '+' : '') + diff.toFixed(2) + 'm';
520
+
521
+ // Color code based on offside
522
+ const diffElement = document.getElementById('offside-diff');
523
+ if (diff >= 0) {
524
+ diffElement.className = 'text-red-500 font-bold';
525
+ } else {
526
+ diffElement.className = 'text-green-500 font-bold';
527
+ }
528
+ }
529
+
530
+ function clearOffsideLine() {
531
+ const selectedView = document.getElementById('selected-camera-view');
532
+ const line = selectedView.querySelector('.offside-line');
533
+ if (line) line.remove();
534
+
535
+ const markers = selectedView.querySelectorAll('.player-marker');
536
+ markers.forEach(marker => marker.remove());
537
+
538
+ // Reset analysis panel
539
+ document.getElementById('last-defender').textContent = '--';
540
+ document.getElementById('attacker-pos').textContent = '--';
541
+ document.getElementById('offside-diff').textContent = '--';
542
+ document.getElementById('offside-diff').className = 'font-bold';
543
+ }
544
+
545
+ // Decision functions
546
+ function makeDecision(decision) {
547
+ const decisions = {
548
+ 'goal': { text: 'Gol Válido', icon: 'fas fa-check-circle', color: 'green' },
549
+ 'offside': { text: 'Impedimento', icon: 'fas fa-times-circle', color: 'red' },
550
+ 'no-offside': { text: 'Sem Impedimento', icon: 'fas fa-check', color: 'blue' },
551
+ 'inconclusive': { text: 'Inconclusivo', icon: 'fas fa-question', color: 'gray' }
552
+ };
553
+
554
+ const selected = decisions[decision];
555
+ if (!selected) return;
556
+
557
+ // Show confirmation
558
+ alert(`Decisão registrada: ${selected.text}`);
559
+
560
+ // Add to decision log
561
+ const log = document.getElementById('decision-log');
562
+ const newEntry = document.createElement('div');
563
+ newEntry.className = `flex justify-between py-1 ${log.children.length ? 'border-t border-gray-600' : ''}`;
564
+ newEntry.innerHTML = `
565
+ <span>${getCurrentTime()} - ${selected.text}</span>
566
+ <span class="text-${selected.color}-400">
567
+ ${decision === 'goal' || decision === 'no-offside' ? '✓' : '×'}
568
+ </span>
569
+ `;
570
+ log.insertBefore(newEntry, log.firstChild);
571
+ }
572
+
573
+ function updateDecisionLog() {
574
+ const decisions = [
575
+ { time: '45\'', text: 'Gol validado', result: '✓', color: 'green' },
576
+ { time: '32\'', text: 'Impedimento', result: '×', color: 'red' },
577
+ { time: '15\'', text: 'Sem impedimento', result: '✓', color: 'blue' }
578
+ ];
579
+
580
+ const log = document.getElementById('decision-log');
581
+ log.innerHTML = '';
582
+
583
+ decisions.forEach(decision => {
584
+ const entry = document.createElement('div');
585
+ entry.className = `flex justify-between py-1 ${log.children.length ? 'border-t border-gray-600' : ''}`;
586
+ entry.innerHTML = `
587
+ <span>${decision.time} - ${decision.text}</span>
588
+ <span class="text-${decision.color}-400">${decision.result}</span>
589
+ `;
590
+ log.appendChild(entry);
591
+ });
592
+ }
593
+
594
+ function getCurrentTime() {
595
+ const now = new Date();
596
+ return `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
597
+ }
598
+
599
+ // Replay controls
600
+ function playPause() {
601
+ const icon = document.getElementById('play-icon');
602
+ if (icon.classList.contains('fa-play')) {
603
+ icon.classList.remove('fa-play');
604
+ icon.classList.add('fa-pause');
605
+ isPlaying = true;
606
+
607
+ // Simulate playback
608
+ replayInterval = setInterval(() => {
609
+ currentTime += 1;
610
+ if (currentTime > 100) currentTime = 100;
611
+ document.getElementById('replay-timeline').value = currentTime;
612
+ }, 100);
613
+ } else {
614
+ icon.classList.remove('fa-pause');
615
+ icon.classList.add('fa-play');
616
+ isPlaying = false;
617
+ clearInterval(replayInterval);
618
+ }
619
+ }
620
+
621
+ function skipToStart() {
622
+ currentTime = 0;
623
+ document.getElementById('replay-timeline').value = currentTime;
624
+ if (isPlaying) {
625
+ clearInterval(replayInterval);
626
+ playPause();
627
+ }
628
+ }
629
+
630
+ function skipToEnd() {
631
+ currentTime = 100;
632
+ document.getElementById('replay-timeline').value = currentTime;
633
+ if (isPlaying) {
634
+ clearInterval(replayInterval);
635
+ playPause();
636
+ }
637
+ }
638
+
639
+ function frameForward() {
640
+ if (currentTime < 100) {
641
+ currentTime += 1;
642
+ document.getElementById('replay-timeline').value = currentTime;
643
+ }
644
+ }
645
+
646
+ function frameBackward() {
647
+ if (currentTime > 0) {
648
+ currentTime -= 1;
649
+ document.getElementById('replay-timeline').value = currentTime;
650
+ }
651
+ }
652
+
653
+ function slowMotion() {
654
+ const speedSelect = document.getElementById('playback-speed');
655
+ speedSelect.value = '0.25';
656
+ alert('Câmera lenta ativada (0.25x)');
657
+ }
658
+
659
+ function takeScreenshot() {
660
+ if (!selectedCamera) {
661
+ alert('Selecione uma câmera primeiro!');
662
+ return;
663
+ }
664
+
665
+ alert('Captura de tela salva no sistema');
666
+ // In a real implementation, this would save the current camera view
667
+ }
668
+
669
+ // Event listeners
670
+ document.getElementById('scan-cameras').addEventListener('click', scanCameras);
671
+ document.getElementById('replay-timeline').addEventListener('input', function(e) {
672
+ currentTime = parseInt(e.target.value);
673
+ });
674
+ </script>
675
+ <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=Sousa45/var" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
676
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ Crie um sistema de VAR em PT (Br) com capacidade de 6 Câmeras e a categoria impedimento sem impedimento
2
+ Centralize o painel de decisão e retire o cronometro
3
+ coloque o controle do replay abaixo Visualização selecinada
4
+ Cameras via wifi