added option to name your designs

Author: NobodydeBunny

README.md

@@ -1,6 +1,6 @@
 <div align="center">
 
-# 🎨 ColorForge
+<img src="assets/icon.png" alt="Color Forge logo" width="400">
 
 ### **Material Theme Builder — for the Web**
 *Forge raw colors into complete, production-ready UI systems*

app.js

@@ -522,9 +522,11 @@ function exportImage() {
   ctx.fillStyle = '#0f0f13';
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
+  const titleEl   = document.getElementById('appTitle');
+  const titleText = (titleEl ? titleEl.value.trim() : '') || 'Material Theme Builder';
   ctx.fillStyle = '#f0f0f6';
   ctx.font = 'bold 20px "Syne", sans-serif';
-  ctx.fillText('Color Forge — Material Theme', PAD, 38);
+  ctx.fillText('Color Forge — ' + titleText, PAD, 38);
 
   all.forEach(({ hex, label }, i) => {
     const col = i % COLS;
@@ -865,6 +867,22 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   });
 
+  // Title rename hint — shows every load, hides once user actually changes the value
+  const titleInput = document.getElementById('appTitle');
+  const titleHint  = document.getElementById('titleHint');
+  localStorage.removeItem('cf-title-seen'); // clear any stuck state
+
+  titleInput.addEventListener('input', () => {
+    titleHint.classList.add('hidden');
+  });
+  titleInput.addEventListener('blur', () => {
+    if (titleInput.value.trim() !== 'Material Theme Builder') {
+      titleHint.classList.add('hidden');
+    } else {
+      titleHint.classList.remove('hidden');
+    }
+  });
+
   // Initial render
   renderAll();
 });

assets/icon.png

@@ -17,12 +17,15 @@
     <div class="header-left">
       <div class="logo">
         <div class="logo-mark1">
-          <img src="assets/icon.png" alt="Color Forge Logo" width="75dp" height="75dp"/>
+          <img src="assets/icon.png" alt="Color Forge Logo" width="50dp" height="50dp"/>
         </div>
         <span class="logo-text">Color<strong>Forge</strong></span>
       </div>
       <div class="header-rule"></div>
-      <span class="header-tag">Material Theme Builder</span>
+      <div class="title-wrap">
+        <input type="text" id="appTitle" class="header-tag-input" value="Material Theme Builder" spellcheck="false" />
+        <span class="title-hint" id="titleHint">rename</span>
+      </div>
     </div>
     <div class="header-right">
       <button class="hbtn hbtn-ghost" id="btnPreset">⬡ Presets</button>

index.html

@@ -95,6 +95,61 @@ body {
 .header-rule { width: 1px; height: 18px; background: var(--border2); }
 .header-tag  { font-size: 12px; color: var(--text-3); font-weight: 600; letter-spacing: .3px; }
 
+.title-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.header-tag-input {
+  font-family: var(--font);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: .3px;
+  color: var(--text-3);
+  background: transparent;
+  border: none;
+  outline: none;
+  border-bottom: 1px dashed transparent;
+  transition: border-color .2s, color .2s;
+  width: 190px;
+  caret-color: var(--teal);
+}
+.header-tag-input:hover {
+  border-bottom-color: var(--border2);
+  color: var(--text-2);
+}
+.header-tag-input:focus {
+  color: var(--text);
+  border-bottom-color: var(--teal);
+}
+
+.title-hint {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .3px;
+  color: var(--text-3);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity .4s;
+}
+.title-hint::before {
+  content: '✎';
+  font-size: 11px;
+  color: var(--teal);
+  opacity: .7;
+}
+.title-hint.hidden {
+  opacity: 0;
+  width: 0;
+  overflow: hidden;
+}
+
 /* Header buttons */
 .hbtn {
   display: inline-flex; align-items: center; gap: 5px;