init

web/templates/create.html

@@ -0,0 +1,145 @@
+{{template "base.html" .}}
+
+{{define "content"}}
+<div class="max-w-4xl mx-auto p-6">
+    <!-- Header -->
+    <div class="mb-6">
+        <h1 class="text-3xl font-bold text-white mb-4">Create New Note</h1>
+        {{if .folder_path}}
+        <p class="text-gray-400">
+            <i class="fas fa-folder mr-2"></i>
+            Creating in: <span class="text-blue-400">{{.folder_path}}</span>
+        </p>
+        {{end}}
+    </div>
+
+    <!-- Create Form -->
+    <form id="create-form" class="space-y-6">
+        <div class="bg-gray-800 rounded-lg p-6">
+            <!-- Title Input -->
+            <div class="mb-6">
+                <label for="title" class="block text-sm font-medium text-gray-300 mb-2">
+                    Note Title
+                </label>
+                <input type="text" id="title" name="title" required
+                       class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                       placeholder="Enter note title (e.g., My New Note)">
+                <p class="text-xs text-gray-500 mt-1">The .md extension will be added automatically</p>
+            </div>
+
+            <!-- Content Editor -->
+            <div class="mb-6">
+                <label for="content" class="block text-sm font-medium text-gray-300 mb-2">
+                    Content
+                </label>
+                <textarea id="content" name="content" rows="20"
+                          class="editor-textarea"
+                          placeholder="# Your Note Title
+
+Start writing your note here using Markdown syntax...
+
+## Examples
+
+- **Bold text**
+- *Italic text*
+- [Links](https://example.com)
+- ![Images](image.png)
+- `Code snippets`
+
+```javascript
+// Code blocks
+console.log('Hello, World!');
+```
+
+> Blockquotes
+
+| Tables | Work | Too |
+|--------|------|-----|
+| Cell 1 | Cell 2 | Cell 3 |
+"></textarea>
+            </div>
+
+            <!-- Actions -->
+            <div class="flex items-center justify-between">
+                <a href="{{if .folder_path}}/folder/{{.folder_path}}{{else}}/{{end}}" class="btn-secondary">
+                    <i class="fas fa-arrow-left mr-2"></i>Cancel
+                </a>
+                <button type="submit" class="btn-primary">
+                    <i class="fas fa-save mr-2"></i>Create Note
+                </button>
+            </div>
+        </div>
+    </form>
+</div>
+{{end}}
+
+{{define "scripts"}}
+<script>
+    const createForm = document.getElementById('create-form');
+    const titleInput = document.getElementById('title');
+    const contentTextarea = document.getElementById('content');
+
+    createForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const title = titleInput.value.trim();
+        const content = contentTextarea.value;
+        const folderPath = '{{.folder_path}}';
+
+        if (!title) {
+            showNotification('Please enter a note title', 'error');
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('title', title);
+        formData.append('content', content);
+        formData.append('folder_path', folderPath);
+
+        fetch('/create', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                showNotification('Note created successfully', 'success');
+                if (data.redirect) {
+                    window.location.href = data.redirect;
+                }
+            } else {
+                throw new Error(data.error || 'Failed to create note');
+            }
+        })
+        .catch(error => {
+            showNotification('Error: ' + error.message, 'error');
+        });
+    });
+
+    // Auto-resize textarea
+    contentTextarea.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = (this.scrollHeight) + 'px';
+    });
+
+    // Keyboard shortcuts
+    contentTextarea.addEventListener('keydown', function(e) {
+        // Ctrl+S or Cmd+S to save
+        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+            e.preventDefault();
+            createForm.dispatchEvent(new Event('submit'));
+        }
+        
+        // Tab for indentation
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            const start = this.selectionStart;
+            const end = this.selectionEnd;
+            const value = this.value;
+            
+            this.value = value.substring(0, start) + '\t' + value.substring(end);
+            this.selectionStart = this.selectionEnd = start + 1;
+        }
+    });
+</script>
+{{end}}