Skip to content

Commit 06c7489

Browse files
committed
added option to name your designs
1 parent d68b9f8 commit 06c7489

10 files changed

Lines changed: 80 additions & 4 deletions

File tree

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div align="center">
22

3-
# 🎨 ColorForge
3+
<img src="assets/icon.png" alt="Color Forge logo" width="400">
44

55
### **Material Theme Builder — for the Web**
66
*Forge raw colors into complete, production-ready UI systems*

app.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -522,9 +522,11 @@ function exportImage() {
522522
ctx.fillStyle = '#0f0f13';
523523
ctx.fillRect(0, 0, canvas.width, canvas.height);
524524

525+
const titleEl = document.getElementById('appTitle');
526+
const titleText = (titleEl ? titleEl.value.trim() : '') || 'Material Theme Builder';
525527
ctx.fillStyle = '#f0f0f6';
526528
ctx.font = 'bold 20px "Syne", sans-serif';
527-
ctx.fillText('Color Forge — Material Theme', PAD, 38);
529+
ctx.fillText('Color Forge — ' + titleText, PAD, 38);
528530

529531
all.forEach(({ hex, label }, i) => {
530532
const col = i % COLS;
@@ -865,6 +867,22 @@ document.addEventListener('DOMContentLoaded', () => {
865867
});
866868
});
867869

870+
// Title rename hint — shows every load, hides once user actually changes the value
871+
const titleInput = document.getElementById('appTitle');
872+
const titleHint = document.getElementById('titleHint');
873+
localStorage.removeItem('cf-title-seen'); // clear any stuck state
874+
875+
titleInput.addEventListener('input', () => {
876+
titleHint.classList.add('hidden');
877+
});
878+
titleInput.addEventListener('blur', () => {
879+
if (titleInput.value.trim() !== 'Material Theme Builder') {
880+
titleHint.classList.add('hidden');
881+
} else {
882+
titleHint.classList.remove('hidden');
883+
}
884+
});
885+
868886
// Initial render
869887
renderAll();
870888
});

assets/icon.png

-1.11 MB
Loading

index.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,15 @@
1717
<div class="header-left">
1818
<div class="logo">
1919
<div class="logo-mark1">
20-
<img src="assets/icon.png" alt="Color Forge Logo" width="75dp" height="75dp"/>
20+
<img src="assets/icon.png" alt="Color Forge Logo" width="50dp" height="50dp"/>
2121
</div>
2222
<span class="logo-text">Color<strong>Forge</strong></span>
2323
</div>
2424
<div class="header-rule"></div>
25-
<span class="header-tag">Material Theme Builder</span>
25+
<div class="title-wrap">
26+
<input type="text" id="appTitle" class="header-tag-input" value="Material Theme Builder" spellcheck="false" />
27+
<span class="title-hint" id="titleHint">rename</span>
28+
</div>
2629
</div>
2730
<div class="header-right">
2831
<button class="hbtn hbtn-ghost" id="btnPreset">⬡ Presets</button>

preview/code_export.png

-7.19 KB
Loading

preview/contrast_check.png

194 KB
Loading

preview/presets.png

127 KB
Loading

preview/preview.png

-3.69 KB
Loading

preview/ui_preview.png

-2.54 KB
Loading

style.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,61 @@ body {
9595
.header-rule { width: 1px; height: 18px; background: var(--border2); }
9696
.header-tag { font-size: 12px; color: var(--text-3); font-weight: 600; letter-spacing: .3px; }
9797

98+
.title-wrap {
99+
position: relative;
100+
display: flex;
101+
align-items: center;
102+
gap: 6px;
103+
}
104+
105+
.header-tag-input {
106+
font-family: var(--font);
107+
font-size: 12px;
108+
font-weight: 600;
109+
letter-spacing: .3px;
110+
color: var(--text-3);
111+
background: transparent;
112+
border: none;
113+
outline: none;
114+
border-bottom: 1px dashed transparent;
115+
transition: border-color .2s, color .2s;
116+
width: 190px;
117+
caret-color: var(--teal);
118+
}
119+
.header-tag-input:hover {
120+
border-bottom-color: var(--border2);
121+
color: var(--text-2);
122+
}
123+
.header-tag-input:focus {
124+
color: var(--text);
125+
border-bottom-color: var(--teal);
126+
}
127+
128+
.title-hint {
129+
display: flex;
130+
align-items: center;
131+
gap: 4px;
132+
font-size: 10px;
133+
font-weight: 700;
134+
letter-spacing: .3px;
135+
color: var(--text-3);
136+
white-space: nowrap;
137+
pointer-events: none;
138+
opacity: 1;
139+
transition: opacity .4s;
140+
}
141+
.title-hint::before {
142+
content: '✎';
143+
font-size: 11px;
144+
color: var(--teal);
145+
opacity: .7;
146+
}
147+
.title-hint.hidden {
148+
opacity: 0;
149+
width: 0;
150+
overflow: hidden;
151+
}
152+
98153
/* Header buttons */
99154
.hbtn {
100155
display: inline-flex; align-items: center; gap: 5px;

0 commit comments

Comments
 (0)