"Untitled"
Bootstrap 4.1.1 Snippet by AxelRocha

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interfaz Grabadora Láser</title> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Roboto', sans-serif; background-color: #f4f4f4; color: #333; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } h1 { margin-bottom: 20px; color: #4A90E2; } .container { background: white; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 300px; text-align: center; } .display { border: 2px solid #4A90E2; border-radius: 5px; padding: 10px; margin: 10px 0; font-size: 24px; background: #e7f3ff; } button { padding: 10px 20px; font-size: 18px; margin: 10px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } button#startButton, button#stopButton { background-color: #ccc; color: #fff; cursor: not-allowed; } button#startButton.active { background-color: #4CAF50; cursor: pointer; } button#stopButton.active { background-color: #f44336; cursor: pointer; } button:hover.active { opacity: 0.9; } .timer { font-size: 24px; margin-top: 20px; font-weight: bold; } </style> </head> <body> <h1>Grabadora LáserSix</h1> <div class="container"> <input type="file" id="imageInput" accept="image/*" /> <div class="display" id="display1">Voltaje: 0 V</div> <div class="display" id="display2">Amperaje: 0 A</div> <div class="display" id="display3">Temperatura: 0 °C</div> <button id="startButton" class="inactive">Iniciar</button> <button id="stopButton" class="inactive">Parar</button> <div class="timer" id="timer">Tiempo útil del láser: 0 s</div> </div> <script> let isRunning = false; let elapsedTime = 0; let timerInterval; const timerDisplay = document.getElementById('timer'); const startButton = document.getElementById('startButton'); const stopButton = document.getElementById('stopButton'); const imageInput = document.getElementById('imageInput'); imageInput.addEventListener('change', () => { if (imageInput.files.length > 0) { startButton.classList.add('active'); stopButton.classList.add('active'); startButton.disabled = false; stopButton.disabled = false; } else { startButton.classList.remove('active'); stopButton.classList.remove('active'); startButton.disabled = true; stopButton.disabled = true; } }); startButton.addEventListener('click', () => { if (!isRunning) { isRunning = true; startTimer(); } }); stopButton.addEventListener('click', () => { isRunning = false; clearInterval(timerInterval); }); function startTimer() { timerInterval = setInterval(() => { elapsedTime++; timerDisplay.innerText = `Tiempo útil del láser: ${elapsedTime} s`; }, 1000); } function updateDisplays() { document.getElementById('display1').innerText = `Voltaje: ${Math.random().toFixed(2)} V`; document.getElementById('display2').innerText = `Amperaje: ${Math.random().toFixed(2)} A`; document.getElementById('display3').innerText = `Temperatura: ${Math.random().toFixed(2)} °C`; } setInterval(updateDisplays, 1000); </script> </body> </html>

Related: See More

Vue Light Bootstrap Dashboard

Questions / Comments: