-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
171 lines (160 loc) · 8.36 KB
/
index.html
File metadata and controls
171 lines (160 loc) · 8.36 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Gradient Artist: Color Theory Puzzle Game</title>
<!-- Styles will be injected by webpack -->
</head>
<body>
<div id="welcome-screen" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh;">
<h1 style="font-size: 3rem; color: var(--accent); margin-bottom: 24px; text-shadow: 0 2px 8px #0002;">Create Something Beautiful</h1>
<button id="ready-button" style="background: var(--accent); color: var(--darker); font-size: 1.5rem; padding: 18px 48px; border-radius: 10px; font-weight: bold; box-shadow: 0 4px 16px #0003; cursor: pointer; border: none; transition: background 0.2s;">Ready</button>
</div>
<div id="message" class="message-area" style="display:none;"></div>
<!-- Score Modal -->
<div id="score-modal" class="modal" style="display:none;">
<div class="modal-content">
<h2>🏆 Your Score 🏆</h2>
<div class="final-score">0</div>
<div class="score-breakdown">
<div class="score-row">
<div class="score-label">Base Score:</div>
<div class="score-value base-score">1000</div>
</div>
<div class="score-row">
<div class="score-label">Time Bonus:</div>
<div class="score-value time-bonus">+0</div>
</div>
<div class="score-row">
<div class="score-label">Blunder Penalty:</div>
<div class="score-value blunder-penalty">-0</div>
</div>
<div class="score-row">
<div class="score-label">Hint Penalty:</div>
<div class="score-value hint-penalty">-0</div>
</div>
</div>
<div class="score-stats">
<div class="score-stat">
<div class="score-stat-value time-value">00:00</div>
<div class="score-stat-label">⏰</div>
</div>
<div class="score-stat">
<div class="score-stat-value blunders-value">0</div>
<div class="score-stat-label">💥</div>
</div>
<div class="score-stat">
<div class="score-stat-value hints-value">0</div>
<div class="score-stat-label">💡</div>
</div>
</div>
<button id="play-again-button" class="play-again">Play Again</button>
</div>
</div>
<div class="game-container" style="display:none;">
<div id="scrambled-matrix" class="matrix">
<!-- Tiles will be generated by JavaScript -->
</div>
<div id="solution-matrix" class="matrix">
<!-- Tiles will be generated by JavaScript -->
</div>
</div>
<div class="game-stats" style="display:none;">
<div class="stat">
<div id="timer-value" class="stat-value">00:00</div>
</div>
<div class="stat">
<div id="blunder-value" class="stat-value">0</div>
<div class="stat-label">💥</div>
</div>
<div class="stat">
<div id="hints-value" class="stat-value">0</div>
<div class="stat-label">💡</div>
</div>
</div>
<div class="controls" style="display:none;">
<button id="check-button">Show Me How ✨</button>
<button id="hint-button">Need a Hint? 💡</button>
<button id="reset-button">Start Fresh</button>
<button id="finish-button" style="display:none;">Finish Game</button>
</div>
<!-- Info Modal Popup -->
<div id="info-modal" class="info-modal">
<div class="info-modal-content">
<button id="close-info-modal" class="close-info-modal">×</button>
<div class="game-info" style="display:block; box-shadow: none; background: none; border: none; padding: 0; margin: 0;">
<h2>Create Something Beautiful:</h2>
<p>Drag colors from the Color Pool to Your Canvas to create stunning palettes. Each row represents a different color relationship. The locked colors (🔒) are your guides - they're already in the perfect spot! Arrange the remaining colors to create harmonious combinations. Need help? Click "Need a Hint" or "Show Me How" for inspiration.</p>
<div class="palette-info">
<div class="palette-type">
<h3>Row 1: Sunset Palette</h3>
<p>Like a sunset fading to night - light to dark variations of one color</p>
<div class="color-sample">
<div style="background-color: #bde0fe;"></div>
<div style="background-color: #a2d2ff;"></div>
<div style="background-color: #8ac8ff;"></div>
<div style="background-color: #72beff;"></div>
<div style="background-color: #5ab4ff;"></div>
</div>
</div>
<div class="palette-type">
<h3>Row 2: Harmony Blend</h3>
<p>Colors that sit next to each other - like spring flowers in a garden</p>
<div class="color-sample">
<div style="background-color: #ffadad;"></div>
<div style="background-color: #ffd6a5;"></div>
<div style="background-color: #fdffb6;"></div>
<div style="background-color: #caffbf;"></div>
<div style="background-color: #9bf6ff;"></div>
</div>
</div>
<div class="palette-type">
<h3>Row 3: Vibrant Trio</h3>
<p>Three bold colors that create energy and excitement</p>
<div class="color-sample">
<div style="background-color: #f15bb5;"></div>
<div style="background-color: #f8c537;"></div>
<div style="background-color: #00bbf9;"></div>
<div style="background-color: #f15bb5;"></div>
<div style="background-color: #00bbf9;"></div>
</div>
</div>
<div class="palette-type">
<h3>Row 4: Dynamic Balance</h3>
<p>A main color with two accent colors that make it pop</p>
<div class="color-sample">
<div style="background-color: #ff7b00;"></div>
<div style="background-color: #ff9e00;"></div>
<div style="background-color: #40916c;"></div>
<div style="background-color: #52b788;"></div>
<div style="background-color: #b5179e;"></div>
</div>
</div>
<div class="palette-type">
<h3>Row 5: Perfect Contrast</h3>
<p>Opposite colors that create dramatic, eye-catching combinations</p>
<div class="color-sample">
<div style="background-color: #ff5c8a;"></div>
<div style="background-color: #ff8fab;"></div>
<div style="background-color: #ffffff;"></div>
<div style="background-color: #a0c4ff;"></div>
<div style="background-color: #4361ee;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Floating Info Button -->
<div id="info-button" class="info-button">
<span>?</span>
</div>
<div class="orientation-overlay" style="display:none;">
<h2>Please Rotate Your Device</h2>
<div class="rotate-icon">📱</div>
<p>This game is best enjoyed in landscape mode. Please rotate your device to play.</p>
</div>
<!-- Scripts will be injected by webpack -->
</body>
</html>