You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
6.4 KiB
127 lines
6.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BATL CARLA Orchestrator</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-background"></div>
|
|
<div class="app-container">
|
|
|
|
<!-- Sidebar / Scenario Selection -->
|
|
<aside class="sidebar glass-panel">
|
|
<div class="brand">
|
|
<div class="brand-icon">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
|
|
</div>
|
|
<div>
|
|
<h1>BATL CARLA</h1>
|
|
<span class="subtitle">Orchestrator v1.0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="section-title">SCENARIOS</div>
|
|
<div id="scenario-list" class="scenario-list">
|
|
<!-- Populated dynamically via JS -->
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Workspace -->
|
|
<main class="main-content">
|
|
|
|
<!-- Parameters Configuration -->
|
|
<section class="controls glass-panel pop-in">
|
|
<div class="panel-header">
|
|
<h2>Configuration parameters</h2>
|
|
</div>
|
|
|
|
<form id="launch-form" class="form-grid">
|
|
|
|
<div class="input-group">
|
|
<label for="frames">Simulation Duration (Frames)</label>
|
|
<div class="input-wrapper">
|
|
<input type="number" id="frames" name="frames" placeholder="e.g. 200">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="weather">Weather Preset</label>
|
|
<div class="select-wrapper">
|
|
<select id="weather" name="weather">
|
|
<!-- Populated dynamically -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group toggle-group">
|
|
<div class="toggle-text">
|
|
<label for="no_record">Dry Run Mode</label>
|
|
<span class="helper">Disable multi-sensor data recording to disk</span>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="no_record" name="no_record">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="full-width">
|
|
<div class="section-title" style="margin-top: 1rem;">DYNAMIC SCENARIO PARAMETERS</div>
|
|
<div id="dynamic-params-container" class="form-grid">
|
|
<!-- Populated dynamically when a scenario is selected -->
|
|
<div class="input-group full-width">
|
|
<span class="helper">Select a scenario to view its tunable parameters.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions full-width">
|
|
<button type="submit" id="launch-btn" class="btn btn-primary pulse-hover">
|
|
<span class="btn-text" id="launch-text">Launch Simulation</span>
|
|
<div class="loader-spinner" id="launch-spinner" style="display: none;"></div>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Live Terminal Pane -->
|
|
<section class="terminal glass-panel slide-up">
|
|
<div class="terminal-header">
|
|
<div class="window-controls">
|
|
<span class="dot red"></span>
|
|
<span class="dot yellow"></span>
|
|
<span class="dot green"></span>
|
|
</div>
|
|
<span class="terminal-title">carla312 — Simulation Standard Output</span>
|
|
<div class="terminal-actions">
|
|
<button id="clear-terminal" class="icon-btn" title="Clear stdout">
|
|
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Interactive Progress Bar -->
|
|
<div id="sim-progress-container" style="display: none; padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.15);">
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #a0aec0; letter-spacing: 0.5px;">
|
|
<span>SIMULATION STATUS</span>
|
|
<span id="sim-progress-text">0% (0 / 0 frames)</span>
|
|
</div>
|
|
<div style="width: 100%; background: #1a202c; border-radius: 4px; overflow: hidden; height: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);">
|
|
<div id="sim-progress-fill" style="width: 0%; height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); box-shadow: 0 0 10px rgba(96,165,250,0.5); transition: width 0.15s ease-out;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-body" id="terminal-output">
|
|
<div class="log-line system">> Application initialized. Fetching presets...</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Application Logic -->
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|