93 lines
3.1 KiB
HTML
93 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Volume Booster</title>
|
|
<link rel="stylesheet" href="popup.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
|
|
<!-- Kopfzeile -->
|
|
<header class="head">
|
|
<div class="brand">
|
|
<!-- Icon: Lautsprecher mit Wellen -->
|
|
<svg class="brand-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M11 5 6 9H2v6h4l5 4V5z" />
|
|
<path d="M15.5 8.5a5 5 0 0 1 0 7" />
|
|
<path d="M18.5 5.5a9 9 0 0 1 0 13" />
|
|
</svg>
|
|
<div class="brand-text">
|
|
<span class="brand-name">Volume Booster</span>
|
|
<span class="brand-site" id="siteLabel">aktiver Tab</span>
|
|
</div>
|
|
</div>
|
|
<span class="badge" id="statusBadge">100%</span>
|
|
</header>
|
|
|
|
<!-- Großer Wert -->
|
|
<div class="readout">
|
|
<span class="readout-value" id="readoutValue">100</span>
|
|
<span class="readout-unit">%</span>
|
|
</div>
|
|
|
|
<!-- Slider -->
|
|
<div class="slider-wrap">
|
|
<input type="range" id="slider" min="0" max="600" step="10" value="100" />
|
|
<div class="ticks">
|
|
<span>0</span><span>100</span><span>300</span><span>600</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Steuerknöpfe -->
|
|
<div class="controls">
|
|
<button class="ctrl" id="btnDown" title="Leiser">
|
|
<!-- Minus -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round">
|
|
<path d="M5 12h14" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="ctrl ctrl-mute" id="btnMute" title="Stummschalten">
|
|
<!-- Mute -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M11 5 6 9H2v6h4l5 4V5z" />
|
|
<path d="m22 9-6 6" />
|
|
<path d="m16 9 6 6" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="ctrl" id="btnUp" title="Lauter">
|
|
<!-- Plus -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round">
|
|
<path d="M12 5v14M5 12h14" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Schnellwahl -->
|
|
<div class="presets">
|
|
<button class="preset" data-v="100">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 12a9 9 0 1 0 9-9" /><path d="M3 12V5h7" />
|
|
</svg>
|
|
100%
|
|
</button>
|
|
<button class="preset" data-v="200">200%</button>
|
|
<button class="preset" data-v="400">400%</button>
|
|
<button class="preset" data-v="600">
|
|
<!-- Blitz für Maximum -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
|
|
</svg>
|
|
600%
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Fußzeile / Hinweis -->
|
|
<p class="note" id="note">Über 100 % wird der Tab-Ton verstärkt.</p>
|
|
|
|
</div>
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|