239 lines
6.7 KiB
HTML
239 lines
6.7 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>
|
|
<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/api.js?v=202607232050"></script>
|
|
<script src="/static/js/services/audioEngine.js?v=202607232050"></script>
|
|
<script src="/static/js/services/storage.js?v=202607232050"></script>
|
|
<script src="/static/js/services/soundfontPlayer.js?v=202607232050"></script>
|
|
<script src="/static/js/services/aiGateway.js?v=202607232050"></script>
|
|
<script src="/static/js/services/dawCommandDispatcher.js?v=202607232050"></script>
|
|
<script src="/static/js/app.precompiled.js?v=202607232050" defer></script>
|
|
<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;
|
|
}
|
|
</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> |