kkhattabi213/megafonias-vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Primer commit de Megafonías TsSAEx

Browse Source
This commit is contained in:
Karim Khattabi
2026-02-10 11:38:26 +01:00
commit 1b0e879ba2
61 changed files with 2521 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
index.html Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Megafonías TsSAEx</title>
<link rel="stylesheet" href="/src/style.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
</head>
<body>
<div id="loading-screen">
<div class="loading-content">
<img src="/logo.svg" alt="bus-logo" class="splash-logo">
<h2 class="brand-name loading-title">Megafonías TsSAEx</h2>
<md-linear-progress indeterminate></md-linear-progress>
</div>
</div>
<main id="app">
<header class="top-app-bar">
<h1 class="brand-name">Megafonías TsSAEx</h1>
</header>
<div class="dashboard-grid">
<section class="m3-card">
<div class="vol-header"><md-icon>meeting_room</md-icon><span>Panel Interior</span></div>
<md-filled-select id="int-linea" label="Línea"></md-filled-select>
<md-filled-select id="int-parada" label="Parada" disabled></md-filled-select>
<div class="radio-container">
<label><md-radio name="tipo" value="actual" checked></md-radio>Parada actual</label>
<label><md-radio name="tipo" value="siguiente"></md-radio>Parada siguiente</label>
</div>
<md-filled-button id="btn-int">Anunciar Parada</md-filled-button>
</section>
<section class="m3-card secondary">
<div class="vol-header"><md-icon>campaign</md-icon><span>Exterior</span></div>
<p style="margin:0; opacity:0.7; font-size:0.9rem;">Configuración de letrero y megafonía externa para paradas.</p>
<md-filled-tonal-button id="btn-abrir-exterior">
<md-icon slot="icon">open_in_new</md-icon>Configurar Exterior
</md-filled-tonal-button>
</section>
<section class="m3-card specials-card">
<div class="vol-header"><md-icon>stars</md-icon><span>Especiales</span></div>
<div class="button-grid-specials">
<md-filled-tonal-button id="btn-colision" class="danger-btn">
<md-icon slot="icon">warning</md-icon>Colisión
</md-filled-tonal-button>
<md-filled-tonal-button id="btn-hora">
<md-icon slot="icon">schedule</md-icon>Hora
</md-filled-tonal-button>
<md-filled-tonal-button id="btn-saldo">
<md-icon slot="icon">account_balance_wallet</md-icon>Saldo
</md-filled-tonal-button>
<md-filled-tonal-button id="btn-insuficiente">
<md-icon slot="icon">block</md-icon>Insuf.
</md-filled-tonal-button>
</div>
</section>
<section class="m3-card tertiary">
<div class="vol-header"><md-icon>volume_up</md-icon><span>Volumen General</span></div>
<md-slider id="vol" min="0" max="1" step="0.01" value="0.8"></md-slider>
</section>
<section class="m3-card editor-card">
<div class="vol-header"><md-icon>edit_note</md-icon><span>Editor de Líneas</span></div>
<div class="editor-controls">
<md-outlined-text-field id="ed-id-linea" label="ID Línea (ej. L1)"></md-outlined-text-field>
<md-outlined-text-field id="ed-nombre-linea" label="Nombre (ej. Línea 1)"></md-outlined-text-field>
</div>
<div id="lista-paradas-editor"></div>
<div class="editor-actions">
<md-filled-tonal-button id="btn-add-parada-ed"><md-icon slot="icon">add</md-icon>Añadir Parada</md-filled-tonal-button>
<md-filled-button id="btn-generar-json">Exportar JSON</md-filled-button>
</div>
<pre id="output-json" class="json-preview"></pre>
</section>
</div>
<md-dialog id="dialog-exterior">
<div slot="headline"><md-icon>record_voice_over</md-icon> Exterior</div>
<form slot="content" id="form-ext" method="dialog">
<div class="dialog-layout">
<md-filled-select id="ext-linea" label="Línea"></md-filled-select>
<md-filled-select id="ext-destino" label="Destino" disabled></md-filled-select>
<md-filled-select id="ext-coche" label="Coche"></md-filled-select>
<div class="vol-header" style="margin-top:10px"><md-icon>volume_down</md-icon><span>Volumen Exterior</span></div>
<md-slider id="vol-ext" min="0" max="1" step="0.01" value="0.9"></md-slider>
</div>
</form>
<div slot="actions">
<md-text-button form="form-ext" value="close">Cerrar</md-text-button>
<md-filled-button id="btn-reproducir-ext">Reproducir</md-filled-button>
</div>
</md-dialog>
</main>
<script type="module" src="/src/main.js"></script>
</body>
</html>