Spaces:
Running
Running
remova o fab grande com as duas ingrenagens, deixe so os outros 3, utilize um icone de zzz (dormindo) para o estado de sleep ativo e de um bra莽o rob贸tico para quando estiver acordado. e no de start coloque icones q represente ligado e desligado (energizado, desenergizado) - Initial Deployment
5c988cd
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Machine Control FAB</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .fab-container { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| z-index: 999; | |
| } | |
| .fab-buttons { | |
| display: flex; | |
| flex-direction: column-reverse; | |
| gap: 15px; | |
| } | |
| .fab-button { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: white; | |
| color: #333; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| transition: all 0.2s ease; | |
| position: relative; | |
| } | |
| .fab-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .fab-button .tooltip { | |
| position: absolute; | |
| right: 60px; | |
| background: #333; | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.2s; | |
| } | |
| .fab-button:hover .tooltip { | |
| opacity: 1; | |
| } | |
| .fab-button.active { | |
| background: #3b82f6; | |
| color: white; | |
| transform: scale(1.1); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); | |
| } | |
| .fab-button.active i { | |
| animation: bounce 0.5s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.3); } | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } | |
| } | |
| .pulse { | |
| animation: pulse 1.5s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto p-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-6">Machine Control Panel</h1> | |
| <p class="text-gray-600 mb-8">This page demonstrates a floating action button with machine controls. Click the blue button at the bottom right to access the controls.</p> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold mb-4">Machine Status</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-gray-400 mr-2" id="power-status-indicator"></div> | |
| <span id="power-status-text">Machine is off</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-gray-400 mr-2" id="sleep-status-indicator"></div> | |
| <span id="sleep-status-text">Sleep mode inactive</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="fab-container"> | |
| <div class="fab-buttons" id="fabButtons"> | |
| <div class="fab-button" id="documentBtn"> | |
| <i class="fas fa-file-alt"></i> | |
| <span class="tooltip">Open Document</span> | |
| </div> | |
| <div class="fab-button" id="sleepBtn"> | |
| <i class="fas fa-robot"></i> | |
| <span class="tooltip">Sleep Mode</span> | |
| </div> | |
| <div class="fab-button" id="powerBtn"> | |
| <i class="fas fa-bolt"></i> | |
| <span class="tooltip">Power Control</span> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const fabMain = document.getElementById('fabMain'); | |
| const fabButtons = document.getElementById('fabButtons'); | |
| const documentBtn = document.getElementById('documentBtn'); | |
| const sleepBtn = document.getElementById('sleepBtn'); | |
| const powerBtn = document.getElementById('powerBtn'); | |
| const sleepSwitch = document.getElementById('sleepSwitch'); | |
| const powerSwitch = document.getElementById('powerSwitch'); | |
| const powerStatusText = document.getElementById('power-status-text'); | |
| const sleepStatusText = document.getElementById('sleep-status-text'); | |
| const powerStatusIndicator = document.getElementById('power-status-indicator'); | |
| const sleepStatusIndicator = document.getElementById('sleep-status-indicator'); | |
| let isMenuOpen = false; | |
| let isMachineOn = false; | |
| let isSleepModeOn = false; | |
| // Document button | |
| documentBtn.addEventListener('click', function() { | |
| alert('Opening machine documentation...'); | |
| // In a real app, this would open a document | |
| closeMenu(); | |
| }); | |
| // Sleep mode button | |
| sleepBtn.addEventListener('click', function() { | |
| isSleepModeOn = !isSleepModeOn; | |
| this.classList.toggle('active'); | |
| if (isSleepModeOn) { | |
| sleepStatusText.textContent = 'Sleep mode active'; | |
| sleepStatusIndicator.className = 'w-3 h-3 rounded-full bg-yellow-500 mr-2'; | |
| this.querySelector('i').className = 'fas fa-bed'; | |
| } else { | |
| sleepStatusText.textContent = 'Sleep mode inactive'; | |
| sleepStatusIndicator.className = 'w-3 h-3 rounded-full bg-gray-400 mr-2'; | |
| this.querySelector('i').className = 'fas fa-robot'; | |
| } | |
| }); | |
| // Power button | |
| powerBtn.addEventListener('click', function() { | |
| isMachineOn = !isMachineOn; | |
| this.classList.toggle('active'); | |
| if (isMachineOn) { | |
| powerStatusText.textContent = 'Machine is running'; | |
| powerStatusIndicator.className = 'w-3 h-3 rounded-full bg-green-500 mr-2'; | |
| this.querySelector('i').className = 'fas fa-plug-circle-check'; | |
| // If machine was sleeping, wake it up | |
| if (isSleepModeOn) { | |
| isSleepModeOn = false; | |
| sleepBtn.classList.remove('active'); | |
| sleepStatusText.textContent = 'Sleep mode inactive'; | |
| sleepStatusIndicator.className = 'w-3 h-3 rounded-full bg-gray-400 mr-2'; | |
| sleepBtn.querySelector('i').className = 'fas fa-robot'; | |
| } | |
| } else { | |
| powerStatusText.textContent = 'Machine is off'; | |
| powerStatusIndicator.className = 'w-3 h-3 rounded-full bg-gray-400 mr-2'; | |
| this.querySelector('i').className = 'fas fa-plug-circle-xmark'; | |
| } | |
| }); | |
| function closeMenu() { | |
| isMenuOpen = false; | |
| fabButtons.classList.remove('show'); | |
| fabMain.innerHTML = '<i class="fas fa-cogs text-xl"></i>'; | |
| fabMain.style.background = 'linear-gradient(135deg, #3b82f6, #1d4ed8)'; | |
| fabMain.classList.add('pulse'); | |
| } | |
| // Close menu when clicking outside | |
| document.addEventListener('click', function(e) { | |
| if (!fabMain.contains(e.target) && !fabButtons.contains(e.target)) { | |
| if (isMenuOpen) { | |
| closeMenu(); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <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=MVCavalheiroJr/fab-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |