width: 0%;
transition: width 0.1s linear;
}
.section-markers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.section-marker {
position: absolute;
top: 0;
width: 2px;
height: 100%;
background: var(--warning);
}
.status-display {
display: flex;
flex-direction: column;
gap: 5px;
text-align: right;
}
.current-section {
font-weight: 600;
color: var(--primary);
}
/* 响应式设计 */
@media (max-width: 1400px) {
.app-container {
grid-template-columns: 280px 1fr;
}
.advanced-panel {
grid-column: 1 / -1;
}
}
@media (max-width: 1024px) {
.app-container {
grid-template-columns: 1fr;
}
.sidebar, .advanced-panel {
order: 2;
}
.main-content {
order: 1;
}
}
</style>
</head>
<body>
<div class="app-container">
<!-- 头部控制栏 -->
<div class="header">
<div class="logo">
<h1>🎵 高级音乐编排系统</h1>
<p style="font-size: 12px; color: var(--secondary);">专业级语音合成与音乐制作</p>
</div>
<div class="master-controls">
<div class="control-group">
<label>🎶 BPM</label>
<input type="number" id="bpm" value="120" min="60" max="240">
</div>
<div class="control-group">
<label>🎵 音调</label>
<input type="range" id="pitch" min="0.5" max="2.0" step="0.1" value="1.0">
</div>
<div class="control-group">
<label>🔊 音量</label>
<input type="range" id="volume" min="0" max="1.0" step="0.1" value="0.7">
</div>
<div class="control-group">
<label>💾 预设</label>
<select id="preset-select">
<option value="pop">流行歌曲</option>
<option value="rock">摇滚</option>
<option value="ballad">民谣</option>
<option value="electronic">电子音乐</option>
<option value="custom">自定义</option>
</select>
</div>
</div>
<div class="header-actions">
<button id="save-preset">💾 保存预设</button>
<button id="export-audio">📤 导出音频</button>
<button id="help-btn">❓ 帮助</button>
</div>
</div>
<!-- 左侧边栏 -->
<div class="sidebar">
<div class="section">
<h3>🎤 发音人库</h3>
<div class="voice-grid">
<div class="voice-option active" data-voice="female1">
<div class="voice-preview">👩</div>
<div>
<div>温柔女声</div>
<div style="font-size: 11px; color: var(--secondary);">适合抒情歌曲</div>
</div>
</div>
<div class="voice-option" data-voice="female2">
<div class="voice-preview">💃</div>
<div>
<div>活泼女声</div>
<div style="font-size: 11px; color: var(--secondary);">适合流行歌曲</div>
</div>
</div>
<div class="voice-option" data-voice="male1">
<div class="voice-preview">👨</div>
<div>
<div>沉稳男声</div>
<div style="font-size: 11px; color: var(--secondary);">适合民谣</div>
</div>
</div>
<div class="voice-option" data-voice="male2">
<div class="voice-preview">🎤</div>
<div>
<div>激昂男声</div>
<div style="font-size: 11px; color: var(--secondary);">适合摇滚</div>
</div>
</div>
<div class="voice-option" data-voice="child">
<div class="voice-preview">👦</div>
<div>
<div>童声</div>
<div style="font-size: 11px; color: var(--secondary);">适合儿歌</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>🎹 乐器库</h3>
<div class="instrument-grid">
<div class="instrument-option active" data-instrument="piano">
<div>🎹 钢琴</div>
</div>
<div class="instrument-option" data-instrument="strings">
<div>🎻 弦乐</div>
</div>
<div class="instrument-option" data-instrument="guitar">
<div>🎸 吉他</div>
</div>
<div class="instrument-option" data-instrument="flute">
<div>🎵 长笛</div>
</div>
<div class="instrument-option" data-instrument="drums">
<div>🥁 鼓组</div>
</div>
<div class="instrument-option" data-instrument="bass">
<div>🎸 贝斯</div>
</div>
<div class="instrument-option" data-instrument="synth">
<div>🔊 合成器</div>
</div>
<div class="instrument-option" data-instrument="brass">