summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--tools/cnn_v2_test/index.html39
-rw-r--r--tools/common/style.css117
-rw-r--r--tools/shader_editor/index.html42
-rw-r--r--tools/spectral_editor/index.html1
-rw-r--r--tools/spectral_editor/style.css106
-rw-r--r--tools/timeline_editor/index.html523
-rw-r--r--tools/track_visualizer/index.html21
7 files changed, 566 insertions, 283 deletions
diff --git a/tools/cnn_v2_test/index.html b/tools/cnn_v2_test/index.html
index e226d0c..84702d5 100644
--- a/tools/cnn_v2_test/index.html
+++ b/tools/cnn_v2_test/index.html
@@ -32,32 +32,21 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CNN v2 Testing Tool</title>
+ <link rel="stylesheet" href="../common/style.css">
<style>
- * { margin: 0; padding: 0; box-sizing: border-box; }
body {
- font-family: 'Courier New', monospace;
- background: #1a1a1a;
- color: #e0e0e0;
display: flex;
flex-direction: column;
height: 100vh;
- overflow: hidden;
}
.header {
- background: #2a2a2a;
padding: 16px;
border-bottom: 1px solid #404040;
- display: flex;
- align-items: center;
gap: 24px;
- flex-wrap: wrap;
}
h1 { font-size: 18px; }
.controls {
- display: flex;
gap: 16px;
- align-items: center;
- flex-wrap: wrap;
}
.control-group {
display: flex;
@@ -66,7 +55,7 @@
}
.control-group label { font-size: 12px; }
input[type="range"] { width: 120px; }
- input[type="number"] { width: 60px; background: #1a1a1a; color: #e0e0e0; border: 1px solid #404040; padding: 4px; }
+ input[type="number"] { width: 60px; padding: 4px; }
.drop-zone {
border: 3px dashed #606060;
padding: 20px;
@@ -80,18 +69,10 @@
color: #4a9eff;
}
button {
- background: #1a1a1a;
- border: 1px solid #404040;
- color: #e0e0e0;
padding: 6px 12px;
font-size: 12px;
- font-family: 'Courier New', monospace;
- cursor: pointer;
- transition: all 0.2s;
- border-radius: 4px;
}
button:hover { border-color: #606060; background: #252525; }
- button:disabled { opacity: 0.3; cursor: not-allowed; }
video { display: none; }
.drop-zone:hover { border-color: #4a9eff; background: #2a3545; }
.drop-zone.active { border-color: #4a9eff; background: #1a2a3a; }
@@ -120,7 +101,6 @@
padding: 24px;
overflow: auto;
position: relative;
- background: #1a1a1a;
}
.video-controls-float {
position: absolute;
@@ -185,7 +165,6 @@
padding: 16px;
}
.panel {
- border: 1px solid #404040;
border-radius: 4px;
overflow: hidden;
}
@@ -228,28 +207,14 @@
margin-bottom: 12px;
}
.layer-buttons button {
- background: #1a1a1a;
- border: 1px solid #404040;
- color: #e0e0e0;
padding: 6px 12px;
font-size: 10px;
- font-family: 'Courier New', monospace;
- cursor: pointer;
- transition: all 0.2s;
- }
- .layer-buttons button:hover {
- border-color: #606060;
- background: #252525;
}
.layer-buttons button.active {
background: #4a9eff;
border-color: #4a9eff;
color: #1a1a1a;
}
- .layer-buttons button:disabled {
- opacity: 0.3;
- cursor: not-allowed;
- }
.layer-buttons button:disabled:hover {
border-color: #404040;
background: #1a1a1a;
diff --git a/tools/common/style.css b/tools/common/style.css
new file mode 100644
index 0000000..1ba4bad
--- /dev/null
+++ b/tools/common/style.css
@@ -0,0 +1,117 @@
+:root {
+ --bg-dark: #1e1e1e;
+ --bg-medium: #252526;
+ --bg-light: #3c3c3c;
+ --text-primary: #d4d4d4;
+ --text-muted: #858585;
+ --accent-blue: #0e639c;
+ --accent-blue-hover: #1177bb;
+ --accent-green: #4ec9b0;
+ --accent-orange: #ce9178;
+ --accent-red: #f48771;
+ --border-color: #858585;
+ --gap: 10px;
+ --radius: 4px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background: var(--bg-dark);
+ color: var(--text-primary);
+ overflow: hidden;
+}
+
+button, .btn, .file-label {
+ background: var(--accent-blue);
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: var(--radius);
+ cursor: pointer;
+ font-size: 14px;
+ display: inline-block;
+ text-align: center;
+}
+
+button:hover, .btn:hover, .file-label:hover {
+ background: var(--accent-blue-hover);
+}
+
+button:disabled, .btn:disabled {
+ background: var(--bg-light);
+ cursor: not-allowed;
+}
+
+input[type="file"] {
+ display: none;
+}
+
+input, select {
+ background: var(--bg-light);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius);
+ color: var(--text-primary);
+ padding: 8px;
+ font-size: 14px;
+}
+
+.container {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.header {
+ background: var(--bg-medium);
+ padding: 15px;
+ border-bottom: 1px solid var(--border-color);
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+
+h1 {
+ color: var(--accent-green);
+ font-size: 18px;
+ white-space: nowrap;
+}
+
+.controls {
+ display: flex;
+ gap: var(--gap);
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.panel {
+ background: var(--bg-medium);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius);
+ padding: 15px;
+}
+
+.error-message {
+ background: #5a1d1d;
+ color: var(--accent-red);
+ padding: 10px;
+ border-radius: var(--radius);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+ margin: 10px 0;
+}
+
+.success-message {
+ background: #1e5231;
+ color: #89d185;
+ padding: 10px;
+ border-radius: var(--radius);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+ margin: 10px 0;
+}
diff --git a/tools/shader_editor/index.html b/tools/shader_editor/index.html
index bad0abb..d93a595 100644
--- a/tools/shader_editor/index.html
+++ b/tools/shader_editor/index.html
@@ -4,26 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WGSL Shader Editor</title>
+ <link rel="stylesheet" href="../common/style.css">
<style>
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
- background: #1e1e1e;
- color: #d4d4d4;
- overflow: hidden;
- height: 100vh;
-}
-
-.container {
- display: flex;
- height: 100vh;
-}
-
.preview-pane {
flex: 0 0 57%;
background: #252526;
@@ -89,26 +71,13 @@ body {
}
.control-group button {
- background: #0e639c;
- color: #fff;
- border: none;
padding: 6px 12px;
- border-radius: 3px;
- cursor: pointer;
font-size: 13px;
}
-.control-group button:hover {
- background: #1177bb;
-}
-
.control-group input[type="number"],
.control-group select {
- background: #3c3c3c;
- color: #d4d4d4;
- border: 1px solid #3e3e42;
padding: 4px 8px;
- border-radius: 3px;
font-size: 13px;
}
@@ -153,19 +122,10 @@ body {
}
.editor-header button {
- background: #0e639c;
- color: #fff;
- border: none;
padding: 6px 12px;
- border-radius: 3px;
- cursor: pointer;
font-size: 13px;
}
-.editor-header button:hover {
- background: #1177bb;
-}
-
.editor-container {
flex: 1;
position: relative;
diff --git a/tools/spectral_editor/index.html b/tools/spectral_editor/index.html
index 75658ae..2d5f3e5 100644
--- a/tools/spectral_editor/index.html
+++ b/tools/spectral_editor/index.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spectral Brush Editor</title>
+ <link rel="stylesheet" href="../common/style.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
diff --git a/tools/spectral_editor/style.css b/tools/spectral_editor/style.css
index 48f7463..87fb54e 100644
--- a/tools/spectral_editor/style.css
+++ b/tools/spectral_editor/style.css
@@ -1,18 +1,4 @@
-/* Spectral Brush Editor Styles */
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- background: #1e1e1e;
- color: #d4d4d4;
- overflow: hidden;
- height: 100vh;
-}
+/* Spectral Brush Editor Specific Styles */
#app {
display: flex;
@@ -20,41 +6,12 @@ body {
height: 100vh;
}
-/* Header */
-header {
- background: #252526;
- padding: 12px 20px;
- border-bottom: 1px solid #3e3e42;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-header h1 {
- font-size: 18px;
- font-weight: 600;
- color: #cccccc;
-}
-
-.header-controls {
- display: flex;
- align-items: center;
- gap: 15px;
-}
-
-.file-info {
- font-size: 13px;
- color: #858585;
-}
-
-/* Main content area */
.main-content {
display: flex;
flex: 1;
overflow: hidden;
}
-/* Canvas container (80% width) */
.canvas-container {
flex: 1;
position: relative;
@@ -89,7 +46,6 @@ header h1 {
display: none;
}
-/* Mini spectrum viewer (bottom-right overlay) */
.spectrum-viewer {
position: absolute;
bottom: 10px;
@@ -99,12 +55,8 @@ header h1 {
background: rgba(30, 30, 30, 0.9);
border: 1px solid #3e3e42;
border-radius: 3px;
- display: block; /* Always visible */
- pointer-events: none; /* Don't interfere with mouse events */
-}
-
-.spectrum-viewer.active {
- display: block; /* Keep for backward compatibility */
+ display: block;
+ pointer-events: none;
}
#spectrumCanvas {
@@ -123,7 +75,6 @@ header h1 {
color: #858585;
}
-/* Toolbar (20% width) */
.toolbar {
width: 250px;
background: #252526;
@@ -155,16 +106,6 @@ header h1 {
transition: background 0.2s;
}
-.btn-toolbar:hover {
- background: #1177bb;
-}
-
-.btn-toolbar:disabled {
- background: #3e3e42;
- color: #858585;
- cursor: not-allowed;
-}
-
.btn-toolbar.btn-danger {
background: #a82d2d;
}
@@ -199,7 +140,6 @@ header h1 {
border-color: #0e639c;
}
-/* Point info panel */
.point-info {
margin-top: 10px;
padding: 10px;
@@ -224,7 +164,6 @@ header h1 {
font-family: monospace;
}
-/* Control panel (bottom) */
.control-panel {
background: #252526;
border-top: 1px solid #3e3e42;
@@ -314,16 +253,6 @@ header h1 {
transition: background 0.2s;
}
-.btn-playback:hover:not(:disabled) {
- background: #1177bb;
-}
-
-.btn-playback:disabled {
- background: #3e3e42;
- color: #858585;
- cursor: not-allowed;
-}
-
.btn-playback kbd {
background: rgba(255, 255, 255, 0.1);
padding: 2px 5px;
@@ -331,7 +260,6 @@ header h1 {
font-size: 11px;
}
-/* Action bar (bottom) */
.action-bar {
background: #2d2d30;
border-top: 1px solid #3e3e42;
@@ -365,11 +293,6 @@ header h1 {
border-color: #0e639c;
}
-.btn-action:disabled {
- color: #858585;
- cursor: not-allowed;
-}
-
.btn-primary {
padding: 6px 16px;
background: #0e639c;
@@ -381,17 +304,11 @@ header h1 {
transition: background 0.2s;
}
-.btn-primary:hover {
- background: #1177bb;
-}
-
-/* Icon styling */
.icon {
font-size: 14px;
line-height: 1;
}
-/* Modal */
.modal {
position: fixed;
z-index: 1000;
@@ -490,7 +407,6 @@ header h1 {
color: #cccccc;
}
-/* Scrollbar styling */
::-webkit-scrollbar {
width: 10px;
height: 10px;
@@ -509,7 +425,6 @@ header h1 {
background: #4e4e52;
}
-/* Waveform intensity viewer */
.waveform-container {
position: relative;
height: 120px;
@@ -570,24 +485,9 @@ header h1 {
transition: background 0.2s;
}
-.btn-copy:hover, .btn-snap:hover {
- background: #1177bb;
-}
-
-.btn-copy:active, .btn-snap:active {
- background: #0d5a8f;
-}
-
.spectrogram-wrapper {
flex: 1;
position: relative;
overflow: hidden;
z-index: 1;
}
-
-#spectrogramCanvas {
- width: 100%;
- height: 100%;
- display: block;
- cursor: crosshair;
-}
diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index 9768343..c5e0264 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -4,107 +4,466 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timeline Editor - timeline.seq</title>
+ <link rel="stylesheet" href="../common/style.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%231e1e1e'/><rect x='10' y='30' width='15' height='40' fill='%234ec9b0'/><rect x='30' y='20' width='15' height='60' fill='%234ec9b0'/><rect x='50' y='35' width='15' height='30' fill='%234ec9b0'/><rect x='70' y='15' width='15' height='70' fill='%234ec9b0'/></svg>">
<style>
- :root {
- --bg-dark: #1e1e1e;
- --bg-medium: #252526;
- --bg-light: #3c3c3c;
- --text-primary: #d4d4d4;
- --text-muted: #858585;
- --accent-blue: #0e639c;
- --accent-blue-hover: #1177bb;
- --accent-green: #4ec9b0;
- --accent-orange: #ce9178;
- --accent-red: #f48771;
- --border-color: #858585;
- --gap: 10px;
- --radius: 4px;
+ body {
+ padding: 20px;
+ min-height: 100vh;
}
- * { margin: 0; padding: 0; box-sizing: border-box; }
- body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-dark); color: var(--text-primary); padding: 20px; min-height: 100vh; }
- .container { max-width: 100%; width: 100%; margin: 0 auto; }
+ .container {
+ max-width: 100%;
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ header {
+ background: var(--bg-medium);
+ padding: 20px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ flex-wrap: wrap;
+ }
+
+ .zoom-controls {
+ display: flex;
+ gap: var(--gap);
+ flex-wrap: wrap;
+ align-items: center;
+ margin-bottom: var(--gap);
+ }
+
+ .checkbox-label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ user-select: none;
+ }
- header { background: var(--bg-medium); padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
- h1 { color: var(--accent-green); white-space: nowrap; }
- .controls { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; }
- .zoom-controls { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: center; margin-bottom: var(--gap); }
+ .checkbox-label input[type="checkbox"] {
+ cursor: pointer;
+ }
- button, .file-label { background: var(--accent-blue); color: white; border: none; padding: 10px 20px; border-radius: var(--radius); cursor: pointer; font-size: 14px; display: inline-block; }
- button:hover, .file-label:hover { background: var(--accent-blue-hover); }
- button:disabled { background: var(--bg-light); cursor: not-allowed; }
- input[type="file"] { display: none; }
+ .timeline-container {
+ background: var(--bg-medium);
+ border-radius: 8px;
+ position: relative;
+ height: calc(100vh - 280px);
+ min-height: 500px;
+ display: flex;
+ flex-direction: column;
+ }
- .checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
- .checkbox-label input[type="checkbox"] { cursor: pointer; }
+ .timeline-content {
+ flex: 1;
+ overflow: auto;
+ position: relative;
+ padding: 0 20px 20px 20px;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ }
- .timeline-container { background: var(--bg-medium); border-radius: 8px; position: relative; height: calc(100vh - 280px); min-height: 500px; display: flex; flex-direction: column; }
- .timeline-content { flex: 1; overflow: auto; position: relative; padding: 0 20px 20px 20px; scrollbar-width: none; -ms-overflow-style: none; }
- .timeline-content::-webkit-scrollbar { display: none; }
- .timeline { position: relative; min-height: 100%; }
+ .timeline-content::-webkit-scrollbar {
+ display: none;
+ }
- .sticky-header { position: sticky; top: 0; background: var(--bg-medium); z-index: 100; padding: 20px 20px 10px 20px; border-bottom: 2px solid var(--bg-light); flex-shrink: 0; }
- .waveform-container { position: relative; height: 80px; overflow: hidden; background: rgba(0, 0, 0, 0.5); border-radius: var(--radius); cursor: crosshair; }
- #cpuLoadCanvas { position: absolute; left: 0; bottom: 0; height: 10px; display: block; z-index: 1; }
- #waveformCanvas { position: absolute; left: 0; top: 0; height: 80px; display: block; z-index: 2; }
- .waveform-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(78, 201, 176, 0.6); pointer-events: none; z-index: 3; display: none; }
- .waveform-tooltip { position: absolute; background: rgba(30, 30, 30, 0.95); color: var(--text-primary); padding: 6px 10px; border-radius: 4px; font-size: 12px; pointer-events: none; z-index: 4; display: none; white-space: nowrap; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
+ .timeline {
+ position: relative;
+ min-height: 100%;
+ }
- .playback-indicator { position: absolute; top: 0; bottom: 0; left: 20px; width: 2px; background: var(--accent-red); box-shadow: 0 0 4px rgba(244, 135, 113, 0.8); pointer-events: none; z-index: 110; display: none; }
+ .sticky-header {
+ position: sticky;
+ top: 0;
+ background: var(--bg-medium);
+ z-index: 100;
+ padding: 20px 20px 10px 20px;
+ border-bottom: 2px solid var(--bg-light);
+ flex-shrink: 0;
+ }
- .time-markers { position: relative; height: 30px; margin-top: var(--gap); border-bottom: 1px solid var(--bg-light); }
- .time-marker { position: absolute; top: 0; font-size: 12px; color: var(--text-muted); }
- .time-marker::before { content: ''; position: absolute; left: 0; top: 20px; width: 1px; height: 10px; background: var(--bg-light); }
- .time-marker::after { content: ''; position: absolute; left: 0; top: 30px; width: 1px; height: 10000px; background: rgba(100, 100, 60, 0.9); pointer-events: none; }
+ .waveform-container {
+ position: relative;
+ height: 80px;
+ overflow: hidden;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: var(--radius);
+ cursor: crosshair;
+ }
+
+ #cpuLoadCanvas {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ height: 10px;
+ display: block;
+ z-index: 1;
+ }
+
+ #waveformCanvas {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 80px;
+ display: block;
+ z-index: 2;
+ }
+
+ .waveform-cursor {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background: rgba(78, 201, 176, 0.6);
+ pointer-events: none;
+ z-index: 3;
+ display: none;
+ }
+
+ .waveform-tooltip {
+ position: absolute;
+ background: rgba(30, 30, 30, 0.95);
+ color: var(--text-primary);
+ padding: 6px 10px;
+ border-radius: 4px;
+ font-size: 12px;
+ pointer-events: none;
+ z-index: 4;
+ display: none;
+ white-space: nowrap;
+ border: 1px solid var(--border-color);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+ }
+
+ .playback-indicator {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 20px;
+ width: 2px;
+ background: var(--accent-red);
+ box-shadow: 0 0 4px rgba(244, 135, 113, 0.8);
+ pointer-events: none;
+ z-index: 110;
+ display: none;
+ }
+
+ .time-markers {
+ position: relative;
+ height: 30px;
+ margin-top: var(--gap);
+ border-bottom: 1px solid var(--bg-light);
+ }
+
+ .time-marker {
+ position: absolute;
+ top: 0;
+ font-size: 12px;
+ color: var(--text-muted);
+ }
+
+ .time-marker::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 20px;
+ width: 1px;
+ height: 10px;
+ background: var(--bg-light);
+ }
+
+ .time-marker::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 30px;
+ width: 1px;
+ height: 10000px;
+ background: rgba(100, 100, 60, 0.9);
+ pointer-events: none;
+ }
+
+ .sequence {
+ position: absolute;
+ background: #264f78;
+ border: 2px solid var(--accent-blue);
+ border-radius: var(--radius);
+ padding: 8px;
+ cursor: move;
+ min-height: 40px;
+ transition: box-shadow 0.2s;
+ }
+
+ .sequence:hover {
+ box-shadow: 0 0 10px rgba(14, 99, 156, 0.5);
+ }
+
+ .sequence.selected {
+ border-color: var(--accent-green);
+ box-shadow: 0 0 10px rgba(78, 201, 176, 0.5);
+ }
+
+ .sequence.collapsed {
+ overflow: hidden !important;
+ background: #1a3a4a !important;
+ }
+
+ .sequence.collapsed .sequence-name {
+ display: none !important;
+ }
+
+ .sequence.active-playing {
+ border-color: var(--accent-green);
+ background: #2a5f4a;
+ }
+
+ .sequence.active-flash {
+ animation: sequenceFlash 0.6s ease-out;
+ }
- .sequence { position: absolute; background: #264f78; border: 2px solid var(--accent-blue); border-radius: var(--radius); padding: 8px; cursor: move; min-height: 40px; transition: box-shadow 0.2s; }
- .sequence:hover { box-shadow: 0 0 10px rgba(14, 99, 156, 0.5); }
- .sequence.selected { border-color: var(--accent-green); box-shadow: 0 0 10px rgba(78, 201, 176, 0.5); }
- .sequence.collapsed { overflow: hidden !important; background: #1a3a4a !important; }
- .sequence.collapsed .sequence-name { display: none !important; }
- .sequence.active-playing { border-color: var(--accent-green); background: #2a5f4a; }
- .sequence.active-flash { animation: sequenceFlash 0.6s ease-out; }
@keyframes sequenceFlash {
- 0% { box-shadow: 0 0 20px rgba(78, 201, 176, 0.8); border-color: var(--accent-green); }
- 100% { box-shadow: 0 0 10px rgba(14, 99, 156, 0.5); border-color: var(--accent-blue); }
+ 0% {
+ box-shadow: 0 0 20px rgba(78, 201, 176, 0.8);
+ border-color: var(--accent-green);
+ }
+ 100% {
+ box-shadow: 0 0 10px rgba(14, 99, 156, 0.5);
+ border-color: var(--accent-blue);
+ }
}
- .sequence-header { position: absolute; top: 0; left: 0; right: 0; padding: 8px; z-index: 5; cursor: move; user-select: none; }
- .sequence-header-name { font-size: 14px; font-weight: bold; color: #ffffff; }
- .sequence:not(.collapsed) .sequence-header-name { display: none; }
- .sequence-name { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: #ffffff; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.7); pointer-events: none; white-space: nowrap; opacity: 1; transition: opacity 0.3s ease; z-index: 10; }
- .sequence.hovered .sequence-name { opacity: 0; }
+ .sequence-header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding: 8px;
+ z-index: 5;
+ cursor: move;
+ user-select: none;
+ }
- .effect { position: absolute; background: #3a3d41; border: 1px solid var(--border-color); border-radius: 3px; padding: 4px 8px; cursor: move; font-size: 11px; transition: box-shadow 0.2s; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- .effect:hover { box-shadow: 0 0 8px rgba(133, 133, 133, 0.5); background: #45484d; }
- .effect.selected { border-color: var(--accent-orange); box-shadow: 0 0 8px rgba(206, 145, 120, 0.5); }
- .effect.conflict { background: #4a1d1d; border-color: var(--accent-red); box-shadow: 0 0 8px rgba(244, 135, 113, 0.6); }
- .effect.conflict:hover { background: #5a2424; }
- .effect-handle { position: absolute; top: 0; width: 6px; height: 100%; background: rgba(78, 201, 176, 0.8); cursor: ew-resize; display: none; z-index: 10; }
- .effect.selected .effect-handle { display: block; }
- .effect-handle.left { left: 0; border-radius: 3px 0 0 3px; }
- .effect-handle.right { right: 0; border-radius: 0 3px 3px 0; }
- .effect-handle:hover { background: var(--accent-green); width: 8px; }
+ .sequence-header-name {
+ font-size: 14px;
+ font-weight: bold;
+ color: #ffffff;
+ }
- .properties-panel { position: fixed; bottom: 20px; left: 20px; width: 350px; max-height: 80vh; background: var(--bg-medium); padding: 15px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); z-index: 1000; overflow-y: auto; transition: transform 0.3s ease; }
- .properties-panel.collapsed { transform: translateY(calc(100% + 40px)); }
- .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--bg-light); }
- .panel-header h2 { margin: 0; color: var(--accent-green); font-size: 16px; }
- .panel-toggle { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); padding: 4px 8px; border-radius: 3px; cursor: pointer; font-size: 12px; }
- .panel-toggle:hover { background: var(--bg-light); }
- .panel-collapse-btn { position: fixed; bottom: 20px; left: 20px; background: var(--bg-medium); border: 1px solid var(--border-color); color: var(--text-primary); padding: 8px 12px; border-radius: var(--radius); cursor: pointer; z-index: 999; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); display: none; }
- .panel-collapse-btn:hover { background: var(--bg-light); }
- .panel-collapse-btn.visible { display: block; }
+ .sequence:not(.collapsed) .sequence-header-name {
+ display: none;
+ }
- .property-group { margin-bottom: 15px; }
- .property-group label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 14px; }
- .property-group input, .property-group select { width: 100%; padding: 8px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius); color: var(--text-primary); font-size: 14px; }
+ .sequence-name {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 24px;
+ font-weight: bold;
+ color: #ffffff;
+ text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.7);
+ pointer-events: none;
+ white-space: nowrap;
+ opacity: 1;
+ transition: opacity 0.3s ease;
+ z-index: 10;
+ }
- .stats { background: var(--bg-dark); padding: 10px; border-radius: var(--radius); margin-top: 10px; font-size: 12px; color: var(--text-muted); }
- #messageArea { position: fixed; top: 80px; right: 20px; z-index: 2000; max-width: 400px; }
- .error { background: #5a1d1d; color: var(--accent-red); padding: 10px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
- .success { background: #1e5231; color: #89d185; padding: 10px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
+ .sequence.hovered .sequence-name {
+ opacity: 0;
+ }
+
+ .effect {
+ position: absolute;
+ background: #3a3d41;
+ border: 1px solid var(--border-color);
+ border-radius: 3px;
+ padding: 4px 8px;
+ cursor: move;
+ font-size: 11px;
+ transition: box-shadow 0.2s;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .effect:hover {
+ box-shadow: 0 0 8px rgba(133, 133, 133, 0.5);
+ background: #45484d;
+ }
+
+ .effect.selected {
+ border-color: var(--accent-orange);
+ box-shadow: 0 0 8px rgba(206, 145, 120, 0.5);
+ }
+
+ .effect.conflict {
+ background: #4a1d1d;
+ border-color: var(--accent-red);
+ box-shadow: 0 0 8px rgba(244, 135, 113, 0.6);
+ }
+
+ .effect.conflict:hover {
+ background: #5a2424;
+ }
+
+ .effect-handle {
+ position: absolute;
+ top: 0;
+ width: 6px;
+ height: 100%;
+ background: rgba(78, 201, 176, 0.8);
+ cursor: ew-resize;
+ display: none;
+ z-index: 10;
+ }
+
+ .effect.selected .effect-handle {
+ display: block;
+ }
+
+ .effect-handle.left {
+ left: 0;
+ border-radius: 3px 0 0 3px;
+ }
+
+ .effect-handle.right {
+ right: 0;
+ border-radius: 0 3px 3px 0;
+ }
+
+ .effect-handle:hover {
+ background: var(--accent-green);
+ width: 8px;
+ }
+
+ .properties-panel {
+ position: fixed;
+ bottom: 20px;
+ left: 20px;
+ width: 350px;
+ max-height: 80vh;
+ background: var(--bg-medium);
+ padding: 15px;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+ overflow-y: auto;
+ transition: transform 0.3s ease;
+ }
+
+ .properties-panel.collapsed {
+ transform: translateY(calc(100% + 40px));
+ }
+
+ .panel-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 15px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--bg-light);
+ }
+
+ .panel-header h2 {
+ margin: 0;
+ color: var(--accent-green);
+ font-size: 16px;
+ }
+
+ .panel-toggle {
+ background: transparent;
+ border: 1px solid var(--border-color);
+ color: var(--text-primary);
+ padding: 4px 8px;
+ border-radius: 3px;
+ cursor: pointer;
+ font-size: 12px;
+ }
+
+ .panel-toggle:hover {
+ background: var(--bg-light);
+ }
+
+ .panel-collapse-btn {
+ position: fixed;
+ bottom: 20px;
+ left: 20px;
+ background: var(--bg-medium);
+ border: 1px solid var(--border-color);
+ color: var(--text-primary);
+ padding: 8px 12px;
+ border-radius: var(--radius);
+ cursor: pointer;
+ z-index: 999;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+ display: none;
+ }
+
+ .panel-collapse-btn:hover {
+ background: var(--bg-light);
+ }
+
+ .panel-collapse-btn.visible {
+ display: block;
+ }
+
+ .property-group {
+ margin-bottom: 15px;
+ }
+
+ .property-group label {
+ display: block;
+ margin-bottom: 5px;
+ color: var(--text-muted);
+ font-size: 14px;
+ }
+
+ .property-group input,
+ .property-group select {
+ width: 100%;
+ }
+
+ .stats {
+ background: var(--bg-dark);
+ padding: 10px;
+ border-radius: var(--radius);
+ margin-top: 10px;
+ font-size: 12px;
+ color: var(--text-muted);
+ }
+
+ #messageArea {
+ position: fixed;
+ top: 80px;
+ right: 20px;
+ z-index: 2000;
+ max-width: 400px;
+ }
+
+ .error {
+ background: #5a1d1d;
+ color: var(--accent-red);
+ padding: 10px;
+ border-radius: var(--radius);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+ }
+
+ .success {
+ background: #1e5231;
+ color: #89d185;
+ padding: 10px;
+ border-radius: var(--radius);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+ }
</style>
</head>
<body>
diff --git a/tools/track_visualizer/index.html b/tools/track_visualizer/index.html
index 4a613ec..d1e7480 100644
--- a/tools/track_visualizer/index.html
+++ b/tools/track_visualizer/index.html
@@ -4,18 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Track Visualizer</title>
+ <link rel="stylesheet" href="../common/style.css">
<style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- background: #1e1e1e;
- color: #d4d4d4;
- overflow: hidden;
- }
#controls {
padding: 15px;
background: #2d2d2d;
@@ -27,16 +17,8 @@
}
button, input[type="file"] {
padding: 8px 16px;
- background: #0e639c;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
font-size: 14px;
}
- button:hover {
- background: #1177bb;
- }
input[type="file"] {
padding: 6px 12px;
}
@@ -58,7 +40,6 @@
width: 100%;
height: calc(100vh - 70px);
overflow: auto;
- background: #1e1e1e;
}
#timeline-canvas {
display: block;
generated by cgit v1.2.3 (git 2.51.0) at 2026-02-16 02:21:58 +0000