159 lines
4.6 KiB
HTML
159 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<<<<<<< HEAD
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
width: 240px;
|
|
font-family: -apple-system, sans-serif;
|
|
background: #1c1c1e;
|
|
color: #fff;
|
|
padding: 16px;
|
|
}
|
|
h1 {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
margin-bottom: 16px;
|
|
color: rgba(255,255,255,0.6);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.value {
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
margin-bottom: 16px;
|
|
}
|
|
.value span { font-size: 18px; color: rgba(255,255,255,0.5); }
|
|
input[type=range] {
|
|
width: 100%;
|
|
accent-color: #30d158;
|
|
margin-bottom: 6px;
|
|
}
|
|
.marks {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 10px;
|
|
color: rgba(255,255,255,0.3);
|
|
margin-bottom: 16px;
|
|
}
|
|
button {
|
|
width: 100%;
|
|
padding: 8px;
|
|
background: rgba(255,255,255,0.06);
|
|
border: none;
|
|
border-radius: 8px;
|
|
color: rgba(255,255,255,0.6);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { background: rgba(255,255,255,0.1); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>VOLUME BOOSTER</h1>
|
|
<div class="value">
|
|
<span id="display">100</span><span>%</span>
|
|
</div>
|
|
<input type="range" id="slider"
|
|
min="0" max="600" step="1" value="100">
|
|
<div class="marks">
|
|
<span>0%</span>
|
|
<span>200%</span>
|
|
<span>400%</span>
|
|
<span>600%</span>
|
|
</div>
|
|
<button id="reset">↺ Zurücksetzen</button>
|
|
=======
|
|
<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>
|
|
>>>>>>> 2056a0d (First Commit, Code by Claude 4.7 Opus)
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|