-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathgrid.html
More file actions
180 lines (180 loc) · 10.5 KB
/
Copy pathgrid.html
File metadata and controls
180 lines (180 loc) · 10.5 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
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>grid</title>
<meta name="description" content="Paint a 24×24 grid with Wada Sanzo colors.">
<meta property="og:title" content="24x24 paint grid">
<meta property="og:url" content="http://zesameri.github.io/grid.html">
<link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link href="./css/grid.css" rel="stylesheet">
<script>
(function () {
try {
if (localStorage.getItem('grid-theme') === 'light') {
document.documentElement.removeAttribute('data-theme');
} else {
document.documentElement.setAttribute('data-theme', 'dark');
}
} catch (e) {}
})();
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" class="icon-sprite" aria-hidden="true">
<symbol id="icon-paintbrush" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="m14.622 17.897-10.68-2.913"/>
<path d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z"/>
<path d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"/>
</symbol>
<symbol id="icon-pipette" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12"/>
<path d="m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z"/>
<path d="m2 22 .414-.414"/>
</symbol>
<symbol id="icon-eraser" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21"/>
<path d="m5.082 11.09 8.828 8.828"/>
</symbol>
<symbol id="icon-trash-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M10 11v6"/>
<path d="M14 11v6"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
<path d="M3 6h18"/>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</symbol>
<symbol id="icon-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<rect width="18" height="18" x="3" y="3" rx="2"/>
</symbol>
<symbol id="icon-ramp" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<rect x="3" y="5" width="4" height="14" opacity="1"/>
<rect x="10" y="5" width="4" height="14" opacity="0.55"/>
<rect x="17" y="5" width="4" height="14" opacity="0.15"/>
</symbol>
<symbol id="icon-save" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/>
<path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/>
<path d="M7 3v4a1 1 0 0 0 1 1h7"/>
</symbol>
<symbol id="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"/>
<path d="M12 2v2"/>
<path d="M12 20v2"/>
<path d="m4.93 4.93 1.41 1.41"/>
<path d="m17.66 17.66 1.41 1.41"/>
<path d="M2 12h2"/>
<path d="M20 12h2"/>
<path d="m6.34 17.66-1.41 1.41"/>
<path d="m19.07 4.93-1.41 1.41"/>
</symbol>
<symbol id="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/>
</symbol>
</svg>
<button type="button" class="tool tool-icon theme-toggle" id="themeBtn" aria-pressed="true" aria-label="Switch to light mode">
<svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true" hidden><use href="#icon-sun"/></svg>
<svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-moon"/></svg>
</button>
<div class="page">
<header class="page-head">
<h1>Color Grid</h1>
<p class="hint">
Tap to fill cells.
Colors from <a href="./wada-colors.html">Wada Sanzo</a>.
</p>
</header>
<main class="workspace">
<section class="grid-panel">
<div class="grid-stage">
<div class="grid-wrap no-borders">
<table id="grid" aria-label="24 by 24 paint grid"></table>
</div>
</div>
<div class="paint-controls">
<div class="current">
<div class="current-swatch" id="currentSwatch"></div>
<span class="current-label" id="currentLabel">Brush</span>
</div>
<div class="tool-row">
<button type="button" class="tool tool-icon" id="brushBtn" aria-pressed="true" aria-label="Brush" title="Brush">
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-paintbrush"/></svg>
</button>
<button type="button" class="tool tool-icon" id="dropperBtn" aria-label="Pick color" title="Pick color" aria-expanded="false" aria-haspopup="dialog">
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-pipette"/></svg>
</button>
<button type="button" class="tool tool-icon" id="rampBtn" aria-pressed="false" aria-label="Ramp to black" title="Ramp to black — drag on grid">
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-ramp"/></svg>
</button>
<button type="button" class="tool tool-icon" id="eraserBtn" aria-pressed="false" aria-label="Eraser" title="Eraser">
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-eraser"/></svg>
</button>
<button type="button" class="tool tool-icon" id="clearBtn" aria-label="Clear all" title="Clear all">
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-trash-2"/></svg>
</button>
<button type="button" class="tool tool-icon" id="bordersBtn" aria-pressed="false" aria-label="Borders" title="Borders">
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-square"/></svg>
</button>
<button type="button" class="tool tool-icon" id="saveBtn" aria-label="Save image" title="Save image">
<svg viewBox="0 0 24 24" aria-hidden="true"><use href="#icon-save"/></svg>
</button>
</div>
</div>
<div class="tone-ramp-wrap">
<button type="button" class="tone-ramp-label" id="toneRampLabel" aria-pressed="false">To black</button>
<div class="tone-ramp" id="toneRamp" role="listbox" aria-label="Five steps from color to black"></div>
</div>
<div class="grid-sizing" aria-label="Silver grid sizing">
<label class="grid-sizing-label">
<span>Silver bands</span>
<input type="range" id="silverSize" min="0.25" max="2" step="0.05" value="1" aria-valuemin="0.25" aria-valuemax="2" aria-valuenow="1">
<output id="silverSizeVal" for="silverSize">1×</output>
</label>
<p class="grid-sizing-units" id="silverSizeUnits" aria-live="polite" title="Band width on a 96-unit axis">4 silver · 4 paint</p>
<label class="grid-sizing-toggle">
<input type="checkbox" id="compactGridToggle">
<span>Drop center row & column</span>
</label>
</div>
</section>
<section class="palette-panel">
<section class="recent-section" aria-label="Recently used colors">
<h2>Recently used</h2>
<div class="recent" id="recentPalette" role="listbox">
<span class="recent-empty" id="recentEmpty">Paint to fill this list</span>
</div>
</section>
<div class="palette-scroll" id="paletteScroll">
<p class="loading-palette" id="paletteLoading">Loading colors…</p>
</div>
</section>
</main>
</div>
<footer class="site-footer" id="footer">
<a class="footer__link--home" href=".">home</a>
<a class="footer__link--writings" href="./writings.html">words</a>
<a class="footer__link--art" href="./art.html">art</a>
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muze</a>
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">trash</a>
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">code</a>
</footer>
<div id="colorPickerBackdrop" class="color-picker-backdrop" hidden></div>
<div id="colorPickerPopover" class="color-picker-popover" role="dialog" aria-label="Pick color" hidden>
<div class="color-picker-sv" id="colorPickerSv">
<div class="color-picker-sv-white"></div>
<div class="color-picker-sv-black"></div>
<div class="color-picker-sv-cursor" id="colorPickerSvCursor"></div>
</div>
<input type="range" id="colorPickerHue" class="color-picker-slider color-picker-hue" min="0" max="360" value="0" aria-label="Hue">
<input type="range" id="colorPickerSat" class="color-picker-slider color-picker-sat" min="0" max="100" value="100" aria-label="Saturation">
<input type="range" id="colorPickerVal" class="color-picker-slider color-picker-val" min="0" max="100" value="100" aria-label="Brightness">
<div class="color-picker-hex-row">
<div class="color-picker-preview" id="colorPickerPreview" aria-hidden="true"></div>
<input type="text" id="colorPickerHex" class="color-picker-hex" maxlength="7" spellcheck="false" aria-label="Hex color" inputmode="text" autocomplete="off">
</div>
</div>
<script src="./js/paint-palette-data.js"></script>
<script src="./js/grid.js?v=10" defer></script>
</body>
</html>