462 lines
16 KiB
HTML
462 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Looper Pedal Display</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #111;
|
|
font-family: 'Courier New', monospace;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.display-container {
|
|
width: 600px;
|
|
height: 380px;
|
|
background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
|
|
border: 3px solid #333;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.8);
|
|
}
|
|
|
|
.metronome-section {
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
.metronome-track {
|
|
width: 200px;
|
|
height: 4px;
|
|
background: #333;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
}
|
|
|
|
.metronome-indicator {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #00ff88;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: -8px;
|
|
left: 90px;
|
|
box-shadow: 0 0 15px #00ff88;
|
|
animation: metronome 1s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes metronome {
|
|
0% { left: 10px; background: #666; box-shadow: 0 0 5px #666; }
|
|
50% { background: #00ff88; box-shadow: 0 0 15px #00ff88; }
|
|
100% { left: 170px; background: #666; box-shadow: 0 0 5px #666; }
|
|
}
|
|
|
|
.tempo-display {
|
|
position: absolute;
|
|
right: 0;
|
|
color: #00ff88;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.columns-section {
|
|
height: 45px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.column-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.column {
|
|
flex: 1;
|
|
margin: 0 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.column.active .progress-bar {
|
|
border: 2px solid #00ff88;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 40px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #0066cc, #00aaff);
|
|
border-radius: 6px;
|
|
position: relative;
|
|
}
|
|
|
|
.bar-markers {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.bar-marker {
|
|
flex: 1;
|
|
border-right: 1px solid #666;
|
|
}
|
|
|
|
.bar-marker:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.tracks-section {
|
|
height: 250px;
|
|
}
|
|
|
|
.tracks-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-template-rows: repeat(5, 1fr);
|
|
gap: 4px;
|
|
height: 250px;
|
|
}
|
|
|
|
.track-cell {
|
|
border: 1px solid #333;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.track-cell.empty {
|
|
background: #1a1a1a;
|
|
border-color: #333;
|
|
}
|
|
|
|
.track-cell.ready {
|
|
background: #0a3020;
|
|
border-color: #00aa66;
|
|
}
|
|
|
|
.track-cell.playing {
|
|
background: #002a40;
|
|
border-color: #0088cc;
|
|
}
|
|
|
|
.track-cell.active-row {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.track-cell.selected.track-cell.recording {
|
|
background: #cc4444;
|
|
border-color: #440a0a;
|
|
color: #440a0a;
|
|
}
|
|
|
|
.track-state {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.track-cell.empty .track-state {
|
|
color: #666;
|
|
border-color: #666;
|
|
}
|
|
|
|
.track-cell.ready .track-state {
|
|
color: #00aa66;
|
|
border-color: #00aa66;
|
|
}
|
|
|
|
.track-cell.playing .track-state {
|
|
color: #0088cc;
|
|
border-color: #0088cc;
|
|
}
|
|
|
|
.volume-bar {
|
|
position: absolute;
|
|
bottom: 2px;
|
|
left: 2px;
|
|
right: 2px;
|
|
height: 2px;
|
|
background: #333;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.volume-fill {
|
|
height: 100%;
|
|
background: #00ff88;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.pedal-info {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 15px;
|
|
right: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #888;
|
|
font-size: 11px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="display-container">
|
|
<!-- Metronome Section -->
|
|
<div class="metronome-section">
|
|
<div class="metronome-track">
|
|
<div class="metronome-indicator"></div>
|
|
</div>
|
|
<div class="tempo-display">120 BPM</div>
|
|
</div>
|
|
|
|
<!-- Columns Section -->
|
|
<div class="columns-section">
|
|
<div class="column-header">
|
|
<div class="column">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 75%;">
|
|
<div class="bar-markers">
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 25%;">
|
|
<div class="bar-markers">
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 0%;">
|
|
<div class="bar-markers">
|
|
<div class="bar-marker"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 90%;">
|
|
<div class="bar-markers">
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
<div class="bar-marker"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 0%;">
|
|
<div class="bar-markers">
|
|
<div class="bar-marker"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tracks Section -->
|
|
<div class="tracks-section">
|
|
<div class="tracks-grid">
|
|
<!-- Row 1 -->
|
|
<div class="track-cell ready">
|
|
<div class="track-state">READY</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 80%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell playing">
|
|
<div class="track-state">PLAY</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 75%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell ready">
|
|
<div class="track-state">READY</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 60%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2 (Current) -->
|
|
<div class="track-cell ready active-row">
|
|
<div class="track-state">READY</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 65%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell recording selected active-row">
|
|
<div class="track-state">REC</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty active-row">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell playing active-row">
|
|
<div class="track-state">PLAY</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 45%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty active-row">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 3 -->
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell ready">
|
|
<div class="track-state">READY</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 70%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 4 -->
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 5 -->
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="track-cell empty">
|
|
<div class="track-state">---</div>
|
|
<div class="volume-bar">
|
|
<div class="volume-fill" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |