113 lines
4.9 KiB
HTML
113 lines
4.9 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 rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" 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>
|
|
|
|
<div id="container-regulacion" class="regulacion-box" style="display: none;">
|
|
<md-checkbox id="chk-regulacion"></md-checkbox>
|
|
<label for="chk-regulacion">Parada de regulación</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.</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 map-card" style="grid-column: span 2; min-height: 400px; padding: 0; overflow: hidden; position: relative;">
|
|
<div class="vol-header" style="position: absolute; top: 16px; left: 16px; z-index: 1000; background: rgba(255,255,255,0.8); padding: 4px 12px; border-radius: 20px; backdrop-filter: blur(4px);">
|
|
<md-icon>map</md-icon><span>Mapa de Red TsSAEx</span>
|
|
</div>
|
|
<div id="map" style="width: 100%; height: 100%; min-height: 400px;"></div>
|
|
</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> |