417 lines
14 KiB
HTML
417 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SonicForge Studio - Professional DAW Editor</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
|
|
<script src="/static/js/services/fluidsynthLoader.js?v=202607271245"></script>
|
|
<script src="/static/js/services/api.js?v=202607271016"></script>
|
|
<script src="/static/js/services/audioEngine.js?v=202607271016"></script>
|
|
<script src="/static/js/services/storage.js?v=202607271016"></script>
|
|
<script src="/static/js/services/soundfontStorage.js?v=202607271016"></script>
|
|
<script src="/static/js/services/soundfontPlayer.js?v=202608031245"></script>
|
|
<script src="/static/js/services/aiGateway.js?v=202607271016"></script>
|
|
<script src="/static/js/services/dawCommandDispatcher.js?v=202607271016"></script>
|
|
<script src="/static/js/services/pianoRollTabService.js?v=202607272044"></script>
|
|
<script src="/static/js/services/ghostNoteExtractor.js?v=202607271727"></script>
|
|
<script src="/static/js/services/midiExtractor.js?v=202607281052"></script>
|
|
<script src="/static/js/services/promptTemplateManager.js?v=202607281039"></script>
|
|
<script src="/static/js/services/undoRedoEngine.js?v=202607290941"></script>
|
|
<script src="/static/js/app.precompiled.js?v=202608031300" defer></script>
|
|
<link rel="stylesheet" href="/static/css/styles.css?v=202607271016">
|
|
<style>
|
|
:root {
|
|
--right-sidebar-width: 320px;
|
|
--bottom-strip-height: 220px;
|
|
--top-bar-height: 80px;
|
|
--status-bar-height: 25px;
|
|
--panel-border-color: #2a2a2a;
|
|
}
|
|
|
|
body {
|
|
background-color: #1a1a1a;
|
|
color: #c0c0c0;
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
}
|
|
|
|
.daw-bg {
|
|
background-color: #1e1e1e;
|
|
}
|
|
|
|
.daw-panel {
|
|
background-color: #262626;
|
|
}
|
|
|
|
.daw-header {
|
|
background-color: #2e2e2e;
|
|
}
|
|
|
|
.daw-border {
|
|
border-color: #181818;
|
|
}
|
|
|
|
.daw-track-active {
|
|
background-color: #333333;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #141414;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #3a3a3a;
|
|
border: 2px solid #141414;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #4a4a4a;
|
|
}
|
|
|
|
.knob-container {
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.knob-dial {
|
|
transform-origin: center;
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
.selection-interactive-box {
|
|
min-width: 4px;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
scrollbar-width: none;
|
|
/* Firefox */
|
|
-ms-overflow-style: none;
|
|
/* IE 10+ */
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
/* Safari and Chrome */
|
|
}
|
|
|
|
/* Fullscreen Fixed App Shell */
|
|
.daw-app-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background-color: #121212;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* Middle Section holding Main Workspace and Right Sidebar */
|
|
.daw-body-container {
|
|
display: flex;
|
|
flex: 1;
|
|
height: calc(100vh - var(--top-bar-height) - var(--bottom-strip-height) - var(--status-bar-height));
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Auto-expanding Main Workspace */
|
|
.daw-main-workspace {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Right Sidebar with Width controlled via CSS Variable */
|
|
.daw-right-sidebar {
|
|
width: var(--right-sidebar-width);
|
|
min-width: 200px;
|
|
max-width: 600px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #1a1a1a;
|
|
border-left: 1px solid var(--panel-border-color);
|
|
}
|
|
|
|
/* Vertically stacked child Panels in Right Sidebar */
|
|
.sidebar-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: #1e1e1e;
|
|
border-bottom: 1px solid var(--panel-border-color);
|
|
}
|
|
|
|
#panel-media-explorer {
|
|
height: 50%;
|
|
/* Default 50/50 split */
|
|
min-height: 100px;
|
|
}
|
|
|
|
#panel-ai {
|
|
flex: 1;
|
|
/* Fills remaining height */
|
|
min-height: 100px;
|
|
}
|
|
|
|
/* BOTTOM ROW: Enables Horizontal Scrolling */
|
|
.daw-bottom-strip {
|
|
height: var(--bottom-strip-height);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px;
|
|
overflow-x: auto;
|
|
/* Enables horizontal scroll when panels overflow */
|
|
overflow-y: hidden;
|
|
background-color: #161616;
|
|
border-top: 1px solid var(--panel-border-color);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Optimized custom horizontal scrollbar for DAW styling */
|
|
.daw-bottom-strip::-webkit-scrollbar {
|
|
height: 8px;
|
|
}
|
|
|
|
.daw-bottom-strip::-webkit-scrollbar-thumb {
|
|
background: #3a3a3a;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.daw-bottom-strip::-webkit-scrollbar-thumb:hover {
|
|
background: #00ffcc;
|
|
}
|
|
|
|
/* Sub-panels inside the bottom strip */
|
|
.bottom-panel {
|
|
flex: 0 0 auto;
|
|
/* Prevents shrinking, locks content dimensions */
|
|
width: 320px;
|
|
height: 100%;
|
|
background-color: #222;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* RESIZER HANDLES */
|
|
.resizer-col-handle {
|
|
width: 5px;
|
|
cursor: ew-resize;
|
|
/* Horizontal resize cursor */
|
|
background: transparent;
|
|
transition: background 0.2s;
|
|
z-index: 10;
|
|
}
|
|
|
|
.resizer-col-handle:hover,
|
|
.resizer-col-handle:active {
|
|
background: #00ffcc;
|
|
}
|
|
|
|
.resizer-row-handle {
|
|
height: 5px;
|
|
cursor: ns-resize;
|
|
/* Vertical resize cursor */
|
|
background: transparent;
|
|
transition: background 0.2s;
|
|
z-index: 10;
|
|
}
|
|
|
|
.resizer-row-handle:hover,
|
|
.resizer-row-handle:active {
|
|
background: #00ffcc;
|
|
}
|
|
|
|
/* Disable mouse pointer events on SVG icons to prevent SVGAnimatedString className type errors in event listeners */
|
|
svg, i[data-lucide] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Ozone Mastering Module Styles */
|
|
.oz-panel {
|
|
background: linear-gradient(180deg, #131822 0%, #0d1118 100%);
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
}
|
|
.oz-card {
|
|
background: #18202c;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
transition: all 0.15s ease;
|
|
}
|
|
.oz-card-active {
|
|
background: #1e2a3a;
|
|
border-color: #38bdf8;
|
|
box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
|
|
}
|
|
.knob-container { touch-action: none; user-select: none; }
|
|
.knob-dial {
|
|
transition: transform 0.05s ease-out;
|
|
box-shadow: inset 0 1px 3px rgba(255,255,255,0.15), 0 3px 8px rgba(0,0,0,0.8);
|
|
}
|
|
.oz-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
|
|
.oz-scrollbar::-webkit-scrollbar-track { background: #080b12; }
|
|
.oz-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 2px; }
|
|
.oz-scrollbar::-webkit-scrollbar-thumb:hover { background: #334155; }
|
|
.oz-font-mono { font-family: 'JetBrains Mono', monospace; }
|
|
|
|
/* Master & Track Strip Console Styles (from md/47, md/48) */
|
|
.strip-bg {
|
|
background: linear-gradient(180deg, #2f2f2f 0%, #222222 100%);
|
|
border: 1px solid #141414;
|
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.8);
|
|
}
|
|
.strip-bg-track {
|
|
background: linear-gradient(180deg, #2c2c2c 0%, #1e1e1e 100%);
|
|
border: 1px solid #111111;
|
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.85);
|
|
}
|
|
|
|
.fader-track {
|
|
background: #121212;
|
|
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.9), 1px 1px 0 rgba(255,255,255,0.05);
|
|
}
|
|
.fader-track-bg {
|
|
background: #101010;
|
|
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.9), 1px 1px 0 rgba(255,255,255,0.05);
|
|
}
|
|
|
|
/* DAW Metallic Button */
|
|
.btn-daw {
|
|
background: linear-gradient(180deg, #444 0%, #2a2a2a 100%);
|
|
border: 1px solid #1a1a1a;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.5);
|
|
transition: all 0.1s ease;
|
|
}
|
|
.btn-daw:hover {
|
|
background: linear-gradient(180deg, #555 0%, #333 100%);
|
|
}
|
|
.btn-daw:active {
|
|
box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
|
|
transform: translateY(0.5px);
|
|
}
|
|
|
|
/* Teal Active State (FX & Power Button) */
|
|
.btn-teal-active {
|
|
background: linear-gradient(180deg, #10b981 0%, #047857 100%) !important;
|
|
border-color: #34d399 !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
|
|
}
|
|
|
|
/* Mute Active State */
|
|
.btn-mute-active {
|
|
background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%) !important;
|
|
border-color: #f87171 !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
|
|
}
|
|
|
|
/* Solo Active State */
|
|
.btn-solo-active {
|
|
background: linear-gradient(180deg, #eab308 0%, #854d0e 100%) !important;
|
|
border-color: #fde047 !important;
|
|
color: #000000 !important;
|
|
box-shadow: 0 0 8px rgba(234, 179, 8, 0.6) !important;
|
|
}
|
|
|
|
/* Mono Active State */
|
|
.btn-mono-active {
|
|
background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important;
|
|
border-color: #60a5fa !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Record Arm Active State */
|
|
.btn-arm-active {
|
|
background: radial-gradient(circle, #ef4444 0%, #7f1d1d 100%) !important;
|
|
border-color: #fca5a5 !important;
|
|
box-shadow: 0 0 12px rgba(239, 68, 68, 0.9), inset 0 1px 2px rgba(255,255,255,0.8) !important;
|
|
animation: pulse-red 1.2s infinite alternate;
|
|
}
|
|
|
|
@keyframes pulse-red {
|
|
0% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); }
|
|
100% { box-shadow: 0 0 16px rgba(239, 68, 68, 1); }
|
|
}
|
|
|
|
/* Custom Vertical Range Fader Slider */
|
|
input[type=range].fader-slider {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
writing-mode: vertical-lr;
|
|
direction: rtl;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
flex: 1;
|
|
min-height: 20px;
|
|
width: 100%;
|
|
}
|
|
input[type=range].fader-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
height: 24px;
|
|
width: 22px;
|
|
background: linear-gradient(180deg, #e2e8f0 0%, #64748b 45%, #1e293b 50%, #94a3b8 100%);
|
|
border: 1px solid #000000;
|
|
border-radius: 2px;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.9);
|
|
}
|
|
input[type=range].fader-slider::-moz-range-thumb {
|
|
height: 24px;
|
|
width: 22px;
|
|
background: linear-gradient(180deg, #e2e8f0 0%, #64748b 45%, #1e293b 50%, #94a3b8 100%);
|
|
border: 1px solid #000000;
|
|
border-radius: 2px;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.9);
|
|
}
|
|
|
|
/* Media Explorer: horizontal volume slider + selected file row */
|
|
input[type=range].me-fader-slider {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: #111;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
border: 1px solid #555;
|
|
cursor: pointer;
|
|
}
|
|
input[type=range].me-fader-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
height: 16px;
|
|
width: 12px;
|
|
background: linear-gradient(180deg, #e2e8f0 0%, #64748b 50%, #1e293b 100%);
|
|
border: 1px solid #000;
|
|
border-radius: 2px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
|
cursor: pointer;
|
|
}
|
|
.file-row-selected {
|
|
background-color: #3399ff !important;
|
|
color: #ffffff !important;
|
|
}
|
|
.file-row-selected .file-icon { color: #ffffff !important; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="h-screen w-screen flex flex-col">
|
|
<div id="root" class="h-full w-full flex flex-col"></div>
|
|
</body>
|
|
|
|
</html> |