colorpalette/index.html at main · ICodingStack/colorpalette · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
<!DOCTYPE html>
<html lang="en" class="dark" data-theme="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ColorPalette — Artistic Palettes That Inspire</title>
  <meta name="description" content="The most elegant & artistic color palette generator. Create harmonious, mood-driven palettes for your next project." />
<link rel="icon" type="image/x-icon" href="https://blackbirdo.com/images/icon.png" />
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Google Fonts: Cormorant Garamond (luxury display) + DM Sans (body) -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet" />

  <!-- Custom Stylesheet -->
  <link rel="stylesheet" href="css/style.css" />

  <!-- Tailwind Config -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            display: ['Cormorant Garamond', 'serif'],
            body: ['DM Sans', 'sans-serif'],
            mono: ['DM Mono', 'monospace'],
          },
        }
      }
    }
  </script>
</head>
<body class="font-body bg-cp-bg text-cp-text min-h-screen overflow-x-hidden overflow-y-auto transition-colors duration-500 -webkit-overflow-scrolling: touch">

  <!-- ═══════════════════════════════════════════
       CANVAS: Floating particle background
  ═══════════════════════════════════════════ -->
  <canvas id="particle-canvas" class="fixed inset-0 pointer-events-none z-0" aria-hidden="true"></canvas>

  <!-- ═══════════════════════════════════════════
       HEADER
  ═══════════════════════════════════════════ -->
  <header class="cp-header fixed top-0 left-0 right-0 z-50 px-6 py-4 flex items-center justify-between">
    <div class="flex items-center gap-3">
      <!-- Logo Mark -->
      <div class="logo-mark w-9 h-9 rounded-xl flex items-center justify-center relative overflow-hidden" aria-hidden="true">
        <div class="logo-swatch-a absolute inset-0 opacity-90"></div>
        <svg class="relative z-10 w-5 h-5 text-white drop-shadow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
          <path d="M12 2C12 2 16 7 16 12C16 17 12 22 12 22" stroke="currentColor" stroke-width="1.5"/>
          <path d="M2 12H22" stroke="currentColor" stroke-width="1.5"/>
          <circle cx="12" cy="12" r="3" fill="currentColor"/>
        </svg>
      </div>
      <div>
        <h1 class="font-display text-xl font-semibold tracking-tight leading-none cp-logo-text">ColorPalette</h1>
        <p class="text-xs font-body font-light opacity-50 tracking-widest uppercase mt-0.5">Artistic Palettes That Inspire</p>
      </div>
    </div>

    <nav class="flex items-center gap-3">
      <!-- History button -->
      <button id="btn-history" class="cp-icon-btn" title="Recent Palettes" aria-label="View recent palettes">
        <svg class="w-4.5 h-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
        </svg>
      </button>
      <!-- Favorites button -->
      <button id="btn-favorites" class="cp-icon-btn" title="Saved Palettes" aria-label="View saved palettes">
        <svg class="w-4.5 h-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
      </button>
      <!-- GitHub link -->
      <a href="https://github.com/ICodingStack/colorpalette" target="_blank" rel="noopener" class="cp-icon-btn" title="GitHub" aria-label="View on GitHub">
        <svg class="w-4.5 h-4.5" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
        </svg>
      </a>
      <!-- Theme toggle -->
      <button id="btn-theme" class="cp-icon-btn theme-toggle" title="Toggle theme" aria-label="Toggle dark/light mode">
        <svg class="w-4.5 h-4.5 icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
        </svg>
        <svg class="w-4.5 h-4.5 icon-sun hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
        </svg>
      </button>
    </nav>
  </header>

  <!-- ═══════════════════════════════════════════
       HERO SECTION
  ═══════════════════════════════════════════ -->
  <section class="hero-section relative z-10 pt-36 pb-16 px-6 text-center">
    <div class="hero-glow absolute inset-0 pointer-events-none" aria-hidden="true"></div>
    <p class="hero-eyebrow inline-flex items-center gap-2 text-xs font-mono uppercase tracking-[0.2em] opacity-60 mb-6">
      <span class="w-4 h-px bg-current inline-block"></span>
      The Art of Color
      <span class="w-4 h-px bg-current inline-block"></span>
    </p>
    <h2 class="hero-title font-display text-6xl md:text-8xl font-light leading-[0.9] mb-6">
      Palettes That<br/><em class="italic font-light">Inspire</em>
    </h2>
    <p class="hero-subtitle max-w-md mx-auto text-base font-light opacity-60 leading-relaxed mb-10">
      Craft harmonious color palettes with precision. From mood-driven collections to exact color science — every shade, perfectly curated.
    </p>
    <div class="flex flex-wrap items-center justify-center gap-3">
      <button id="btn-surprise" class="cp-btn-primary group">
        <span class="btn-icon">✦</span>
        Surprise Me
        <span class="btn-shimmer"></span>
      </button>
      <button id="btn-scroll-to-picker" class="cp-btn-ghost">
        Pick a Color
        <svg class="w-3.5 h-3.5 inline-block ml-1 transition-transform group-hover:translate-y-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
      </button>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       CURRENT PALETTE SHOWCASE
  ═══════════════════════════════════════════ -->
  <section id="palette-showcase" class="relative z-10 px-4 md:px-8 mb-12">
    <div class="max-w-5xl mx-auto">
      <!-- Palette Bar -->
      <div id="palette-bar" class="palette-bar flex rounded-2xl overflow-hidden shadow-2xl" role="list" aria-label="Current color palette">
        <!-- Swatches injected by JS -->
      </div>

     <!-- Palette actions -->
        <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
          <div class="flex items-center gap-2">
            <span id="palette-name" class="font-display text-lg font-light italic opacity-70">— Generating...</span>
          </div>

          <!-- Contrast Checker -->
          <div id="contrast-checker" class="flex flex-wrap gap-2 text-xs font-mono"></div>

          <div class="flex items-center gap-2">
            <button id="btn-favorite-current" class="cp-action-btn" title="Save palette" aria-label="Save current palette to favorites">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
              </svg>
              Save
            </button>
            <button id="btn-export" class="cp-action-btn" title="Export palette" aria-label="Export palette">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
              </svg>
              Export
            </button>
          </div>
        </div>
    </div>
  </section>

  <!-- ═══════════════════════════════════════════
       MAIN WORKSPACE
  ═══════════════════════════════════════════ -->
  <main id="workspace" class="relative z-10 max-w-7xl mx-auto px-4 md:px-8 pb-24 grid grid-cols-1 lg:grid-cols-[1fr_380px] gap-8">

    <!-- LEFT COLUMN -->
    <div class="space-y-8">

      <!-- ─── COLOR PICKER ─── -->
      <section id="color-picker-section" class="cp-card">
        <div class="cp-card-header">
          <h3 class="cp-card-title">Color Picker</h3>
          <div class="flex gap-1.5" role="tablist" aria-label="Color format tabs">
            <button class="cp-tab active" data-tab="hex" role="tab" aria-selected="true">HEX</button>
            <button class="cp-tab" data-tab="rgb" role="tab" aria-selected="false">RGB</button>
            <button class="cp-tab" data-tab="hsl" role="tab" aria-selected="false">HSL</button>
            <button class="cp-tab" data-tab="oklch" role="tab" aria-selected="false">OKLCH</button>
          </div>
        </div>

        <!-- Spectrum Canvas -->
        <div class="relative mb-5">
          <canvas id="spectrum-canvas" class="w-full h-44 rounded-xl cursor-crosshair touch-none" width="700" height="176" aria-label="Color spectrum picker"></canvas>
          <div id="spectrum-cursor" class="spectrum-cursor" aria-hidden="true"></div>
        </div>

        <!-- Hue Slider -->
        <div class="mb-4">
          <label class="cp-label">Hue</label>
          <div class="relative">
            <canvas id="hue-canvas" class="w-full h-5 rounded-full cursor-pointer touch-none" width="700" height="20" aria-label="Hue slider"></canvas>
            <div id="hue-thumb" class="hue-thumb" aria-hidden="true"></div>
          </div>
        </div>

        <!-- Alpha Slider -->
        <div class="mb-5">
          <label class="cp-label">Opacity</label>
          <div class="relative">
            <canvas id="alpha-canvas" class="w-full h-5 rounded-full cursor-pointer touch-none" width="700" height="20" aria-label="Opacity slider"></canvas>
            <div id="alpha-thumb" class="hue-thumb" aria-hidden="true"></div>
          </div>
        </div>

        <!-- Color Value Inputs -->
        <div class="color-inputs">
          <div class="preview-swatch-container">
            <div id="color-preview-swatch" class="color-preview-swatch rounded-xl shadow-lg cursor-pointer" title="Click to copy hex" role="button" tabindex="0" aria-label="Current color preview — click to copy"></div>
          </div>
          <div id="color-input-fields" class="flex-1 grid grid-cols-1 gap-2">
            <!-- Dynamic inputs injected by JS -->
          </div>
        </div>
      </section>

      <!-- ─── MOOD PALETTES ─── -->
      <section class="cp-card">
        <div class="cp-card-header">
          <h3 class="cp-card-title">Mood Palettes</h3>
          <span class="cp-badge">8 Moods</span>
        </div>
        <div id="mood-grid" class="grid grid-cols-2 sm:grid-cols-4 gap-3">
          <!-- Mood cards injected by JS -->
        </div>
      </section>

      <!-- ─── COLOR LIBRARY ─── -->
      <section class="cp-card">
        <div class="cp-card-header">
          <h3 class="cp-card-title">Color Library</h3>
          <div class="relative">
            <input id="color-search" type="text" placeholder="Search colors…" class="cp-search-input" aria-label="Search color library" />
            <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 opacity-40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          </div>
        </div>
        <div class="space-y-4">
          <!-- Library groups injected by JS -->
          <div id="color-library-container"></div>
        </div>
      </section>

    </div>

    <!-- RIGHT COLUMN -->
    <div class="space-y-8">

      <!-- ─── LIVE PREVIEW ─── -->
      <section class="cp-card">
        <div class="cp-card-header">
          <h3 class="cp-card-title">Live Preview</h3>
          <div class="flex gap-1.5" role="tablist" aria-label="Preview mode tabs">
            <button class="cp-tab active" data-preview="card" role="tab">Card</button>
            <button class="cp-tab" data-preview="phone" role="tab">Phone</button>
            <button class="cp-tab" data-preview="poster" role="tab">Poster</button>
          </div>
        </div>
        <div id="preview-container" class="preview-container min-h-64">
          <!-- Preview rendered by JS -->
        </div>
      </section>

      <!-- ─── EXPORT ─── -->
      <section id="export-panel" class="cp-card hidden">
        <div class="cp-card-header">
          <h3 class="cp-card-title">Export</h3>
          <button id="btn-close-export" class="cp-icon-btn text-sm" aria-label="Close export panel">✕</button>
        </div>
        <div class="grid grid-cols-2 gap-2">
          <button class="cp-export-btn" data-format="css">CSS Variables</button>
          <button class="cp-export-btn" data-format="tailwind">Tailwind Config</button>
          <button class="cp-export-btn" data-format="scss">SCSS</button>
          <button class="cp-export-btn" data-format="json">JSON</button>
          <button class="cp-export-btn col-span-2" data-format="png">PNG Image</button>
        </div>
        <div id="export-code-block" class="mt-3 hidden">
          <pre id="export-code" class="cp-code-block text-xs overflow-auto max-h-40"></pre>
          <button id="btn-copy-export" class="cp-action-btn w-full mt-2 justify-center">Copy to Clipboard</button>
        </div>
      </section>

      <!-- ─── HISTORY ─── -->
      <section id="history-panel" class="cp-card hidden">
        <div class="cp-card-header">
          <h3 class="cp-card-title">Recent Palettes</h3>
          <button id="btn-clear-history" class="cp-icon-btn text-xs opacity-60 hover:opacity-100" aria-label="Clear history">Clear</button>
        </div>
        <div id="history-list" class="space-y-2 max-h-80 overflow-y-auto cp-scrollbar">
          <!-- History items injected by JS -->
        </div>
        <p id="history-empty" class="text-sm opacity-40 text-center py-6 italic font-display">No history yet</p>
      </section>

      <!-- ─── FAVORITES ─── -->
      <section id="favorites-panel" class="cp-card hidden">
        <div class="cp-card-header">
          <h3 class="cp-card-title">Saved Palettes</h3>
          <span id="favorites-count" class="cp-badge">0</span>
        </div>
        <div id="favorites-list" class="space-y-2 max-h-80 overflow-y-auto cp-scrollbar">
          <!-- Favorites injected by JS -->
        </div>
        <p id="favorites-empty" class="text-sm opacity-40 text-center py-6 italic font-display">No saved palettes yet</p>
      </section>

    </div>
  </main>

<!-- Accessibility Live Region -->
<div id="a11y-live"
     aria-live="polite"
     aria-atomic="true"
     class="sr-only">
</div>

  <!-- ═══════════════════════════════════════════
       TOAST NOTIFICATION
  ═══════════════════════════════════════════ -->
    <div id="toast-container"
       class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[9999] flex flex-col items-center gap-2 pointer-events-none"
       aria-live="polite"
       aria-atomic="true">
  </div>

  <!-- ═══════════════════════════════════════════
       COLOR DETAIL MODAL
  ═══════════════════════════════════════════ -->
  <div id="color-modal" class="cp-modal hidden" role="dialog" aria-modal="true" aria-label="Color details">
    <div class="cp-modal-backdrop" id="modal-backdrop"></div>
    <div class="cp-modal-content">
      <button id="modal-close" class="cp-modal-close" aria-label="Close modal">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
      <div id="modal-swatch" class="modal-swatch rounded-2xl mb-4"></div>
      <h4 id="modal-color-name" class="font-display text-2xl font-light mb-1"></h4>
      <p id="modal-color-family" class="text-xs opacity-50 uppercase tracking-widest mb-4 font-mono"></p>
      <div id="modal-values" class="space-y-2"></div>
    </div>
  </div>

    <!-- Footer -->
  <footer class="py-8 text-center text-xs opacity-50 font-mono tracking-widest">
    Made with ❤️ by <a href="https://blackbirdo.com" target="_blank" class="hover:text-cp-accent transition-colors">BlackBirdo</a>
  </footer>

  <!-- ═══════════════════════════════════════════
       SCRIPTS
  ═══════════════════════════════════════════ -->
  <script src="js/utils.js"></script>
  <script src="js/color-picker.js"></script>
  <script src="js/palette-generator.js"></script>
  <script src="js/main.js"></script>
</body>
</html>