184 lines
7.6 KiB
HTML
184 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ESP32 SIP Phone</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>ESP32 SIP Phone</h1>
|
|
<div id="status-bar">
|
|
<span id="wifi-status" class="status-item">WiFi: --</span>
|
|
<span id="sip-status" class="status-item">SIP: --</span>
|
|
<span id="audio-status" class="status-item">Audio: --</span>
|
|
</div>
|
|
</header>
|
|
|
|
<nav>
|
|
<button class="nav-btn active" data-tab="status">Status</button>
|
|
<button class="nav-btn" data-tab="wifi">WLAN</button>
|
|
<button class="nav-btn" data-tab="sip">SIP</button>
|
|
<button class="nav-btn" data-tab="bluetooth">Bluetooth</button>
|
|
<button class="nav-btn" data-tab="system">System</button>
|
|
</nav>
|
|
|
|
<main>
|
|
<!-- Status Tab -->
|
|
<section id="tab-status" class="tab-content active">
|
|
<div class="card">
|
|
<h2>Anrufstatus</h2>
|
|
<div id="call-info">
|
|
<p id="call-state">Kein aktiver Anruf</p>
|
|
<p id="call-remote"></p>
|
|
<p id="call-duration"></p>
|
|
</div>
|
|
<div id="call-buttons" class="button-group hidden">
|
|
<button id="btn-answer" class="btn btn-success">Annehmen</button>
|
|
<button id="btn-reject" class="btn btn-danger">Ablehnen</button>
|
|
<button id="btn-hangup" class="btn btn-danger">Auflegen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Audio</h2>
|
|
<p>Aktive Quelle: <strong id="audio-source">--</strong></p>
|
|
<p>USB Headset: <span id="usb-connected">--</span></p>
|
|
<p>Bluetooth Headset: <span id="bt-connected">--</span></p>
|
|
<div class="volume-control">
|
|
<label>Lautstarke:</label>
|
|
<input type="range" id="volume-slider" min="0" max="100" value="80">
|
|
<span id="volume-value">80%</span>
|
|
</div>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="mute-checkbox"> Stummschalten
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- WiFi Tab -->
|
|
<section id="tab-wifi" class="tab-content">
|
|
<div class="card">
|
|
<h2>WLAN-Konfiguration</h2>
|
|
<form id="wifi-form">
|
|
<div class="form-group">
|
|
<label for="wifi-ssid">SSID:</label>
|
|
<div class="input-with-button">
|
|
<input type="text" id="wifi-ssid" required>
|
|
<button type="button" id="btn-scan-wifi" class="btn btn-secondary">Scannen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="wifi-scan-results" class="scan-results hidden"></div>
|
|
|
|
<div class="form-group">
|
|
<label for="wifi-password">Passwort:</label>
|
|
<input type="password" id="wifi-password">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>IP-Konfiguration:</label>
|
|
<div class="radio-group">
|
|
<label><input type="radio" name="ip-mode" value="dhcp" checked> DHCP</label>
|
|
<label><input type="radio" name="ip-mode" value="static"> Statisch</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="static-ip-config" class="hidden">
|
|
<div class="form-group">
|
|
<label for="static-ip">IP-Adresse:</label>
|
|
<input type="text" id="static-ip" placeholder="192.168.1.100">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="gateway">Gateway:</label>
|
|
<input type="text" id="gateway" placeholder="192.168.1.1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="netmask">Netzmaske:</label>
|
|
<input type="text" id="netmask" placeholder="255.255.255.0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="dns">DNS:</label>
|
|
<input type="text" id="dns" placeholder="8.8.8.8">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Speichern</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SIP Tab -->
|
|
<section id="tab-sip" class="tab-content">
|
|
<div class="card">
|
|
<h2>SIP-Konfiguration</h2>
|
|
<form id="sip-form">
|
|
<div class="form-group">
|
|
<label for="sip-server">Server:</label>
|
|
<input type="text" id="sip-server" placeholder="pbx.example.com" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="sip-port">Port:</label>
|
|
<input type="number" id="sip-port" value="5060">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="sip-username">Benutzername:</label>
|
|
<input type="text" id="sip-username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="sip-password">Passwort:</label>
|
|
<input type="password" id="sip-password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="sip-display-name">Anzeigename:</label>
|
|
<input type="text" id="sip-display-name" placeholder="Max Mustermann">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Speichern</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Bluetooth Tab -->
|
|
<section id="tab-bluetooth" class="tab-content">
|
|
<div class="card">
|
|
<h2>Bluetooth Headsets</h2>
|
|
<p class="hint">USB-Headsets haben Vorrang vor Bluetooth.</p>
|
|
|
|
<button id="btn-scan-bt" class="btn btn-secondary">Geräte suchen</button>
|
|
|
|
<h3>Gepaarte Geräte</h3>
|
|
<div id="bt-paired-devices" class="device-list">
|
|
<p class="no-devices">Keine Geräte gepaart</p>
|
|
</div>
|
|
|
|
<h3>Gefundene Geräte</h3>
|
|
<div id="bt-found-devices" class="device-list">
|
|
<p class="no-devices">Starte Suche...</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- System Tab -->
|
|
<section id="tab-system" class="tab-content">
|
|
<div class="card">
|
|
<h2>System</h2>
|
|
<div class="button-group">
|
|
<button id="btn-reboot" class="btn btn-secondary">Neustart</button>
|
|
<button id="btn-factory-reset" class="btn btn-danger">Werksreset</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Info</h2>
|
|
<p>ESP32-S3 Bluetooth SIP Client</p>
|
|
<p>Hotspot: ESP32-SIP-Phone</p>
|
|
<p>Standard-IP: 192.168.4.1</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|