9); }
100% { background: var(--primary-1); transform: scale(1); }
}
@keyframes rhymeSplit {
0% { transform: scale(1); }
25% { transform: scale(1.3) rotate(10deg); background: var(--primary-3); }
50% { transform: scale(0.5) translateX(-50px); opacity: 0.7; background: var(--primary-2); }
75% { transform: scale(0.5) translateX(50px); opacity: 0.7; background: var(--primary-2); }
100% { transform: scale(1) translateX(0); opacity: 1; background: var(--primary-1); }
}
@keyframes rhymeFun {
0% { background: var(--primary-1); border-radius: var(--radius-md); }
25% { background: var(--warning-1); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
50% { background: var(--success-1); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1.2); }
75% { background: var(--primary-3); border-radius: 40% 60% 70% 30% / 40% 50% 50% 60%; }
100% { background: var(--primary-1); border-radius: var(--radius-md); transform: scale(1); }
}
</style>
</head>
<body>
<div class="master-container">
<!-- 消息通知系统 -->
<div class="message-system" id="message-system"></div>
<!-- 加载覆盖层 -->
<div class="loading-overlay" id="loading-overlay" style="display: none;">
<div class="loading-spinner"></div>
</div>
<!-- 顶部导航系统 -->
<nav class="nav-system">
<div class="nav-container">
<div class="nav-brand">
<h1 class="nav-title">🎵 谐音编程与音乐合成实验室</h1>
<span class="nav-subtitle">系统思维 × 过程思维 × 极限思维</span>
</div>
<div class="nav-tabs">
<button class="nav-tab active" data-tab="rhyme-system">谐音编程</button>
<button class="nav-tab" data-tab="music-system">音乐合成</button>
<button class="nav-tab" data-tab="visual-system">视觉反馈</button>
<button class="nav-tab" data-tab="experiment-system">实验工坊</button>
</div>
<div class="nav-actions">
<button class="btn btn-outline" id="save-btn">💾 保存</button>
<button class="btn btn-outline" id="export-btn">📤 导出</button>
<button class="btn btn-info" id="help-btn">❓ 帮助</button>
</div>
</div>
</nav>
<!-- 主内容区域 -->
<main class="main-content">
<!-- 谐音编程系统 -->
<div class="system-panels" id="rhyme-system" style="display: block;">
<!-- 左侧边栏 -->
<div class="sidebar-system">
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">🧠 谐音动作库</h3>
</div>
<div class="panel-content">
<div class="card-grid card-grid-2">
<div class="card active" data-action="onckdck">
<div>🖱️ onckdck</div>
<div style="font-size: 0.75rem; color: var(--gray-600);">点击动作</div>
</div>
<div class="card" data-action="onckpck">
<div>👏 onckpck</div>
<div style="font-size: 0.75rem; color: var(--gray-600);">拍开动作</div>
</div>
<div class="card" data-action="onckyck">
<div>✅ onckyck</div>
<div style="font-size: 0.75rem; color: var(--gray-600);">确认动作</div>
</div>
<div class="card" data-action="onckfck">
<div>❌ onckfck</div>
<div style="font-size: 0.75rem; color: var(--gray-600);">取消动作</div>
</div>
<div class="card" data-action="onckqck">
<div>🔄 onckqck</div>
<div style="font-size: 0.75rem; color: var(--gray-600);">圈旋动作</div>
</div>
<div class="card" data-action="onckxck">
<div>🎯 onckxck</div>
<div style="font-size: 0.75rem; color: var(--gray-600);">选择动作</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">⚙️ 动作参数</h3>
</div>
<div class="panel-content">
<div class="input-group">
<label class="input-label">目标元素</label>
<select class="input-field" id="rhyme-target">
<option value="element1">元素1</option>
<option value="element2">元素2</option>
<option value="element3">元素3</option>
<option value="all">所有元素</option>
</select>
</div>
<div class="input-group">
<label class="input-label">动作参数</label>
<input type="text" class="input-field" id="rhyme-param" placeholder="输入参数...">
</div>
<button class="btn btn-primary" id="execute-rhyme">🚀 执行动作</button>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h3 class="panel-title">📊 系统状态</h3>