Skip to content

Commit 7e4c7a9

Browse files
ZipasaurusZipasaurus
authored
Merge pull request #2 from Zipasaurus/local-note-
update branch
2 parents 8df0b20 + ab4df13 commit 7e4c7a9

3 files changed

Lines changed: 501 additions & 214 deletions

File tree

‎.gitignore‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,48 @@
1-
```
2-
# Logs and temp files
3-
*.log
4-
*.tmp
5-
*.swp
6-
7-
# Environment
8-
.env
9-
.env.local
10-
*.env.*
11-
12-
# Editors
13-
.vscode/
14-
.idea/
1+
```gitignore
2+
# Compiled and build artifacts
3+
*.pyc
4+
__pycache__/
5+
*.o
6+
*.obj
7+
*.class
8+
*.exe
9+
*.dll
10+
*.so
11+
*.a
12+
*.out
1513

1614
# Dependencies
1715
node_modules/
1816
venv/
1917
.venv/
20-
__pycache__/
21-
.mypy_cache/
22-
.pytest_cache/
18+
.env
19+
.env.local
20+
.env.*
21+
22+
# Build directories
2323
dist/
2424
build/
2525
target/
26+
27+
# Cache directories
28+
.mypy_cache/
29+
.pytest_cache/
2630
.gradle/
31+
.julia/
32+
zig-cache/
33+
34+
# Editors and IDEs
35+
.vscode/
36+
.idea/
37+
*.swp
38+
*.swo
2739

2840
# System files
2941
.DS_Store
3042
Thumbs.db
3143

32-
# Compiled files
33-
*.pyc
34-
*.class
35-
*.o
36-
*.exe
37-
*.dll
38-
*.so
39-
*.a
40-
*.obj
41-
*.out
42-
43-
# Coverage
44+
# Logs and coverage
45+
*.log
4446
coverage/
4547
htmlcov/
4648
.coverage

‎index.html‎

Lines changed: 80 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -8,61 +8,105 @@
88
</head>
99
<body>
1010
<!-- Dashboard View -->
11-
<div id="dashboard" class="view active">
11+
<div id="dashboard-view">
1212
<header>
1313
<h1>📋 Project Board</h1>
14-
<button id="newProjectBtn" class="btn-primary">+ New Project</button>
14+
<button id="create-project-btn" class="primary-btn">+ New Project</button>
1515
</header>
16-
17-
<div id="projectsGrid" class="projects-grid">
18-
<!-- Projects will be rendered here -->
19-
</div>
20-
21-
<div id="emptyState" class="empty-state">
22-
<p>No projects yet. Create your first project!</p>
23-
</div>
16+
<div id="projects-grid" class="projects-grid"></div>
2417
</div>
2518

2619
<!-- Whiteboard View -->
27-
<div id="whiteboard" class="view">
20+
<div id="whiteboard-view" class="hidden">
2821
<header class="whiteboard-header">
29-
<button id="backBtn" class="btn-secondary">← Back</button>
30-
<h2 id="projectTitle">Project Name</h2>
22+
<button id="back-btn" class="secondary-btn">← Back</button>
23+
<h2 id="project-title-display">Project Name</h2>
3124
<div class="toolbar">
32-
<button id="addNoteBtn" class="btn-tool" title="Add Sticky Note">📝 Note</button>
33-
<button id="addImageBtn" class="btn-tool" title="Add Image">🖼️ Image</button>
34-
<button id="connectModeBtn" class="btn-tool" title="Connect Notes">🔗 Connect</button>
25+
<button id="add-note-btn" title="Add Sticky Note">📝 Note</button>
26+
<button id="add-image-btn" title="Add Image">🖼️ Image</button>
27+
<input type="file" id="image-upload" accept="image/*" class="hidden">
28+
<button id="connect-mode-btn" title="Connect Nodes">🔗 Connect</button>
29+
<button id="bg-settings-btn" title="Background Settings">🎨 Background</button>
30+
<button id="undo-btn" title="Undo">↩️ Undo</button>
31+
<button id="redo-btn" title="Redo">↪️ Redo</button>
32+
<button id="export-btn" title="Export Project">💾 Export</button>
33+
<input type="file" id="import-file" accept=".json" class="hidden">
34+
<button id="import-btn" title="Import Project">📂 Import</button>
3535
</div>
3636
</header>
3737

38-
<div id="canvas" class="canvas">
39-
<!-- Notes and connections will be rendered here -->
38+
<div id="canvas-container">
39+
<div id="canvas">
40+
<div id="canvas-content"></div>
41+
<svg id="connections-layer"></svg>
42+
</div>
43+
</div>
44+
45+
<!-- Formatting Toolbar (appears when text selected) -->
46+
<div id="format-toolbar" class="hidden">
47+
<label>Font Size:
48+
<select id="font-size-select">
49+
<option value="12">12px</option>
50+
<option value="14">14px</option>
51+
<option value="16" selected>16px</option>
52+
<option value="18">18px</option>
53+
<option value="20">20px</option>
54+
<option value="24">24px</option>
55+
<option value="28">28px</option>
56+
<option value="32">32px</option>
57+
</select>
58+
</label>
59+
<label>Color:
60+
<input type="color" id="text-color-picker" value="#000000">
61+
</label>
62+
<label>Note Color:
63+
<input type="color" id="note-color-picker" value="#fef3c7">
64+
</label>
65+
<label>Image Position:
66+
<select id="image-position-select">
67+
<option value="top">Image Top</option>
68+
<option value="bottom">Image Bottom</option>
69+
</select>
70+
</label>
4071
</div>
4172
</div>
4273

4374
<!-- Create/Edit Project Modal -->
44-
<div id="projectModal" class="modal">
75+
<div id="project-modal" class="modal hidden">
4576
<div class="modal-content">
46-
<h3 id="modalTitle">Create New Project</h3>
47-
<form id="projectForm">
48-
<div class="form-group">
49-
<label for="projectName">Project Name</label>
50-
<input type="text" id="projectName" required placeholder="Enter project name">
51-
</div>
52-
<div class="form-group">
53-
<label for="projectDescription">Description</label>
54-
<textarea id="projectDescription" rows="4" placeholder="Enter project description"></textarea>
55-
</div>
56-
<div class="modal-actions">
57-
<button type="button" id="cancelBtn" class="btn-secondary">Cancel</button>
58-
<button type="submit" class="btn-primary">Save</button>
59-
</div>
60-
</form>
77+
<h3 id="modal-title">Create New Project</h3>
78+
<input type="text" id="project-name-input" placeholder="Project Name" required>
79+
<textarea id="project-desc-input" placeholder="Project Description" rows="4"></textarea>
80+
<div class="modal-buttons">
81+
<button id="cancel-project-btn" class="secondary-btn">Cancel</button>
82+
<button id="save-project-btn" class="primary-btn">Save</button>
83+
</div>
6184
</div>
6285
</div>
6386

64-
<!-- Hidden file input for images -->
65-
<input type="file" id="imageInput" accept="image/*" style="display: none;">
87+
<!-- Background Settings Modal -->
88+
<div id="bg-modal" class="modal hidden">
89+
<div class="modal-content">
90+
<h3>Background Settings</h3>
91+
<div class="bg-options">
92+
<h4>Preset Backgrounds</h4>
93+
<div class="preset-grids">
94+
<button class="bg-preset" data-bg="none">None</button>
95+
<button class="bg-preset" data-bg="dots">Dots</button>
96+
<button class="bg-preset" data-bg="grid">Grid</button>
97+
<button class="bg-preset" data-bg="lines">Lines</button>
98+
<button class="bg-preset" data-bg="gradient1">Gradient 1</button>
99+
<button class="bg-preset" data-bg="gradient2">Gradient 2</button>
100+
<button class="bg-preset" data-bg="gradient3">Gradient 3</button>
101+
<button class="bg-preset" data-bg="dark">Dark</button>
102+
</div>
103+
<h4>Custom Image</h4>
104+
<input type="file" id="bg-upload" accept="image/*">
105+
<button id="clear-bg-btn" class="secondary-btn">Clear Custom BG</button>
106+
</div>
107+
<button id="close-bg-btn" class="primary-btn">Close</button>
108+
</div>
109+
</div>
66110

67111
<script src="app.js"></script>
68112
</body>

0 commit comments

Comments
 (0)