104 lines
4.6 KiB
HTML
104 lines
4.6 KiB
HTML
<!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> |