Initial commit
This commit is contained in:
462
display_mockup.html
Normal file
462
display_mockup.html
Normal file
@@ -0,0 +1,462 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user