Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Motif player layout and alignment

Browse Source 
- Reorganize controls into a cleaner horizontal flow
- Place Generate, Stop, and Volume controls in one row
- Better visual alignment and spacing
- Progress bar section sits cleanly below controls
- Responsive flexbox layout that wraps on smaller screens
- Remove awkward two-column grid layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
b1rdmania
2025-12-18 19:20:52 +00:00
parent 3031614914
commit a262f714e5
1 changed files with 41 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+41 -27
View File
@@ -232,28 +232,41 @@
box-shadow: 0 30px 120px rgba(0, 0, 0, 0.65);
}
.motif-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 18px;
align-items: start;
display: flex;
flex-direction: column;
gap: 16px;
}
@media (max-width: 920px) {
.motif-grid {
grid-template-columns: 1fr;
}
.motif-header {
margin-bottom: 6px;
}
.motif-actions {
display: grid;
gap: 10px;
.motif-controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.motif-actions button.primary {
.motif-controls button {
flex-shrink: 0;
}
.motif-controls button.primary {
flex: 1;
min-width: 180px;
padding: 12px 16px;
font-weight: 700;
}
.motif-actions button.primary:hover {
.motif-controls button.primary:hover {
box-shadow: 0 16px 60px rgba(255, 170, 68, 0.15);
border-color: rgba(255, 170, 68, 0.55);
}
.motif-controls .volume-control {
flex: 1;
min-width: 200px;
margin-top: 0;
}
.motif-controls .volume-control label {
font-size: 0.85em;
min-width: 55px;
}
.motif-kicker {
font-size: 0.85em;
color: #b6b6b6;
@@ -285,8 +298,8 @@
}
.motif-progress-container {
margin-top: 20px;
padding-top: 20px;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid rgba(255, 170, 68, 0.15);
}
.progress-time {
@@ -458,28 +471,29 @@
<div class="motif-stage">
<div class="motif-grid">
<div>
<div class="motif-header">
<h4 style="margin:0; color:#ffaa44; text-shadow: 0 0 18px rgba(255,170,68,0.15);">Procedural Synthesis</h4>
<p class="motif-kicker">Web Audio oscillators with dynamic filtering and envelopes.</p>
</div>
<div class="motif-actions">
<div class="motif-controls">
<button id="motifBtn" class="primary" disabled>Generate & Play</button>
<button id="motifStopBtn" disabled>Stop</button>
<div class="volume-control">
<label for="motifVolume">Volume:</label>
<label for="motifVolume">Volume</label>
<input type="range" id="motifVolume" min="0" max="1" step="0.01" value="0.3" />
</div>
</div>
</div>
<div class="motif-progress-container" id="motifProgressContainer" style="display: none;">
<div class="progress-time">
<span id="motifCurrentTime">0:00</span>
<span id="motifDuration">0:00</span>
</div>
<div class="progress-bar-wrapper">
<input type="range" id="motifProgressBar" class="progress-bar" min="0" max="100" value="0" step="0.1" />
<div class="progress-fill" id="motifProgressFill"></div>
<div class="motif-progress-container" id="motifProgressContainer" style="display: none;">
<div class="progress-time">
<span id="motifCurrentTime">0:00</span>
<span id="motifDuration">0:00</span>
</div>
<div class="progress-bar-wrapper">
<input type="range" id="motifProgressBar" class="progress-bar" min="0" max="100" value="0" step="0.1" />
<div class="progress-fill" id="motifProgressFill"></div>
</div>
</div>
</div>
</div>