1+ <!doctype html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="utf-8 ">
6+ < meta name ="viewport " content ="width=device-width,initial-scale=1 ">
7+ < title > Theme Switcher </ title >
8+ < link rel ="stylesheet " href ="./styles.css ">
9+ </ head >
10+
11+ < body >
12+ < div class ="container ">
13+ < h1 > Theme Switcher</ h1 >
14+ < p class ="subtitle "> Generate beautiful color palettes with random colors</ p >
15+
16+ < div class ="current-color ">
17+ < div class ="color-preview " id ="colorPreview "> </ div >
18+ < div class ="color-info ">
19+ < div class ="color-value " id ="colorValue "> #6ee7b7</ div >
20+ < div class ="color-label "> Accent Color</ div >
21+ </ div >
22+ < button class ="copy-btn " onclick ="copyColor() "> 📋 Copy</ button >
23+ </ div >
24+
25+ < div class ="palette-display ">
26+ < div class ="palette-label "> Current Palette</ div >
27+ < div class ="palette-colors " id ="paletteColors "> </ div >
28+ </ div >
29+
30+ < div >
31+ < h3 class ="section-subtitle "> Color Selection Panel</ h3 >
32+ < div class ="controls ">
33+ < div class ="control-row ">
34+ < input type ="color " id ="colorPicker " value ="#6ee7b7 ">
35+ < button onclick ="applyColor() "> Apply Color</ button >
36+ </ div >
37+
38+ < button class ="btn-full " onclick ="generateRandomPalette() ">
39+ 🎲 Generate Random Palette
40+ </ button >
41+
42+ < div class ="control-row ">
43+ < button class ="btn-vibrant " onclick ="generateVibrantPalette() " style ="flex: 1 ">
44+ ✨ Vibrant Colors
45+ </ button >
46+ < button class ="btn-pastel " onclick ="generatePastelPalette() " style ="flex: 1 ">
47+ 🌸 Pastel Colors
48+ </ button >
49+ </ div >
50+
51+ < div class ="control-row ">
52+ < input type ="text " id ="paletteName " placeholder ="Palette name... ">
53+ < button onclick ="savePalette() "> 💾 Save</ button >
54+ </ div >
55+
56+ < button class ="btn-full " onclick ="sharePalette() ">
57+ 🔗 Share Palette
58+ </ button >
59+ </ div >
60+ </ div >
61+
62+ < div class ="scheme-grid ">
63+ < button class ="btn-scheme " onclick ="generateScheme('monochromatic') "> Monochromatic</ button >
64+ < button class ="btn-scheme " onclick ="generateScheme('analogous') "> Analogous</ button >
65+ < button class ="btn-scheme " onclick ="generateScheme('complementary') "> Complementary</ button >
66+ < button class ="btn-scheme " onclick ="generateScheme('triadic') "> Triadic</ button >
67+ </ div >
68+
69+ < div class ="saved-section ">
70+ < div class ="section-title "> Saved Palettes</ div >
71+ < div class ="saved-palettes " id ="savedPalettes "> </ div >
72+ </ div >
73+ </ div >
74+ < script src ="main.js "> </ script >
75+ </ body >
76+
77+ </ html >
0 commit comments