First Commit, Code by Claude 4.7 Opus

This commit is contained in:
Tronax 2026-05-14 00:10:32 +02:00
commit ec216264b1
4 changed files with 171 additions and 0 deletions

69
popup.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="de">
<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>
<script src="popup.js"></script>
</body>
</html>