b75c716dba
- Center media control buttons horizontally - Remove tempo button (playspeed always 1x) - Display time above button group for better UX - Clean up unused SpeedSelector component
146 lines
4.0 KiB
HTML
146 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Media Controls Test</title>
|
||
<style>
|
||
body {
|
||
background: #0f0f12;
|
||
color: white;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.transport-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 4px 0 12px;
|
||
}
|
||
|
||
.time-display {
|
||
font-family: monospace;
|
||
font-size: 12px;
|
||
color: rgba(255,255,255,0.35);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.current-time {
|
||
color: #d8d8e0;
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.transport-button {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.07);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
color: rgba(255,255,255,0.35);
|
||
}
|
||
|
||
.transport-button:hover {
|
||
background: rgba(255,255,255,0.08);
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
|
||
.play-button {
|
||
width: 46px;
|
||
height: 46px;
|
||
background: #e8a22a;
|
||
border-radius: 50%;
|
||
border: none;
|
||
display: flex;
|
||
alignItems: center;
|
||
justifyContent: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.play-button:hover {
|
||
background: #f0b740;
|
||
}
|
||
|
||
.checklist {
|
||
text-align: left;
|
||
margin: 30px 0;
|
||
color: #e8a22a;
|
||
}
|
||
|
||
.checklist-item {
|
||
margin: 8px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.checklist-item::before {
|
||
content: "✓";
|
||
color: #4dba85;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Media Controls Test</h1>
|
||
|
||
<div class="transport-container">
|
||
<!-- Time display - moved above buttons -->
|
||
<span class="time-display">
|
||
<span class="current-time">1:23</span> / 3:45
|
||
</span>
|
||
|
||
<!-- Button group - centered -->
|
||
<div class="button-group">
|
||
<!-- Skip back -->
|
||
<button class="transport-button" title="−30s">
|
||
◀◀
|
||
</button>
|
||
|
||
<!-- Play/Pause -->
|
||
<button class="play-button">
|
||
▶
|
||
</button>
|
||
|
||
<!-- Skip forward -->
|
||
<button class="transport-button" title="+30s">
|
||
▶▶
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="checklist">
|
||
<h3>Changes Implemented:</h3>
|
||
<div class="checklist-item">Media control buttons are centered horizontally</div>
|
||
<div class="checklist-item">Tempo button (SpeedSelector) has been removed</div>
|
||
<div class="checklist-item">Time display is positioned above the button group</div>
|
||
<div class="checklist-item">Clean layout with proper spacing</div>
|
||
</div>
|
||
|
||
<script>
|
||
console.log('Media controls test loaded successfully');
|
||
|
||
// Test button interactions
|
||
const buttons = document.querySelectorAll('button');
|
||
buttons.forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
if (this.classList.contains('play-button')) {
|
||
this.textContent = this.textContent === '▶' ? '❚❚' : '▶';
|
||
}
|
||
console.log('Button clicked:', this.title || this.textContent);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |