3 files changed, 74 insertions, 0 deletions
diff --git a/tools/editor/index.html b/tools/editor/index.html
new file mode 100644
index 0000000..43a37f9
--- /dev/null
+++ b/tools/editor/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spectrogram Editor</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Spectrogram Editor</h1>
+    
+    <input type="file" id="wavFileInput" accept=".wav">
+    <label for="wavFileInput">Load WAV File</label>
+
+    <div id="editorContainer">
+        <canvas id="spectrogramCanvas"></canvas>
+        <div id="controls">
+            <h2>Tools</h2>
+            <button id="lineTool">Line</button>
+            <button id="ellipseTool">Ellipse</button>
+            <button id="noiseTool">Noise</button>
+            <!-- Add more tool controls later -->
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/tools/editor/script.js b/tools/editor/script.js
new file mode 100644
index 0000000..9311d6d
--- /dev/null
+++ b/tools/editor/script.js
@@ -0,0 +1,11 @@
+// This is the core JavaScript for the Spectrogram Editor.
+// It handles file loading, visualization, tool interaction, and saving.
+
+// Placeholder for core functionality
+console.log("Spectrogram Editor script loaded.");
+
+// TODO: Implement WAV loading and spectrogram calculation
+// TODO: Implement canvas drawing and event handling for tools
+// TODO: Implement shape generation (strokes, ellipses, noise)
+// TODO: Implement JSON save/load functionality
+// TODO: Implement .spec export functionality
diff --git a/tools/editor/style.css b/tools/editor/style.css
new file mode 100644
index 0000000..f610969
--- /dev/null
+++ b/tools/editor/style.css
@@ -0,0 +1,35 @@
+body {
+    font-family: sans-serif;
+    margin: 20px;
+    background-color: #f4f4f4;
+}
+
+h1, h2 {
+    color: #333;
+}
+
+#editorContainer {
+    display: flex;
+    margin-top: 20px;
+}
+
+#spectrogramCanvas {
+    border: 1px solid #ccc;
+    background-color: #fff;
+    margin-right: 20px;
+}
+
+#controls {
+    border: 1px solid #ccc;
+    padding: 15px;
+    background-color: #eee;
+    min-width: 200px;
+}
+
+#controls button {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
+    padding: 10px;
+    cursor: pointer;
+}