438 lines
15 KiB
HTML
438 lines
15 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Ideas</title>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" rel="noopener" target="_blank" href="./style.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
rel="noopener"
|
|
target="_blank"
|
|
href="./example.css"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<h1>Options</h1>
|
|
|
|
<div class="controls">
|
|
<div id="hue-selector-div">
|
|
<h2>--color-priduck-hue</h2>
|
|
|
|
<div class="slidecontainer">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="360"
|
|
value="180"
|
|
class="slider"
|
|
id="hue-selector"
|
|
/>
|
|
</div>
|
|
|
|
<div id="output">
|
|
<strong>Hue: </strong>
|
|
<span id="hue"></span>
|
|
<div id="hue-box"> </div>
|
|
</div>
|
|
</div>
|
|
<div id="color-scheme-selector">
|
|
<h2>prefers-color-scheme</h2>
|
|
<div>
|
|
<input
|
|
type="radio"
|
|
id="auto-color-scheme"
|
|
name="color-scheme"
|
|
value="auto"
|
|
checked
|
|
/>
|
|
<label for="auto-color-scheme">Auto</label>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="radio"
|
|
id="light-color-scheme"
|
|
name="color-scheme"
|
|
value="light"
|
|
/>
|
|
<label for="light-color-scheme">Light</label>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="radio"
|
|
id="dark-color-scheme"
|
|
name="color-scheme"
|
|
value="dark"
|
|
/>
|
|
<label for="dark-color-scheme">Dark</label>
|
|
</div>
|
|
</div>
|
|
<div id="prefers-contrast-selector">
|
|
<h2>prefers-contrast</h2>
|
|
<div>
|
|
<input
|
|
type="radio"
|
|
id="auto-contrast-selector"
|
|
name="contrast"
|
|
value="auto"
|
|
checked
|
|
/>
|
|
<label for="auto-contrast-selector">Auto</label>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="radio"
|
|
id="more-contrast-selector"
|
|
name="contrast"
|
|
value="more"
|
|
/>
|
|
<label for="more-contrast-selector">More</label>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="radio"
|
|
id="less-contrast-selector"
|
|
name="contrast"
|
|
value="less"
|
|
/>
|
|
<label for="less-contrast-selector">Less</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h1>Color Grid</h1>
|
|
|
|
<table>
|
|
<tr>
|
|
<th></th>
|
|
<th>c0</th>
|
|
<th>c1</th>
|
|
<th>c2</th>
|
|
<th>c3</th>
|
|
<th>c4</th>
|
|
<th>c5</th>
|
|
<th>c6</th>
|
|
<th>c7</th>
|
|
<th>c8</th>
|
|
<th>c9</th>
|
|
</tr>
|
|
<tr>
|
|
<th>b0</th>
|
|
<td id="c0b0" class="fg-dark bg-c0b0">c0b0</td>
|
|
<td id="c1b0" class="fg-dark bg-c1b0">c1b0</td>
|
|
<td id="c2b0" class="fg-dark bg-c2b0">c2b0</td>
|
|
<td id="c3b0" class="fg-dark bg-c3b0">c3b0</td>
|
|
<td id="c4b0" class="fg-dark bg-c4b0">c4b0</td>
|
|
<td id="c5b0" class="fg-dark bg-c5b0">c5b0</td>
|
|
<td id="c6b0" class="fg-dark bg-c6b0">c6b0</td>
|
|
<td id="c7b0" class="fg-dark bg-c7b0">c7b0</td>
|
|
<td id="c8b0" class="fg-dark bg-c8b0">c8b0</td>
|
|
<td id="c9b0" class="fg-dark bg-c9b0">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>b1</th>
|
|
<td id="c0b1" class="fg-dark bg-c0b1">c0b1</td>
|
|
<td id="c1b1" class="fg-dark bg-c1b1">c1b1</td>
|
|
<td id="c2b1" class="fg-dark bg-c2b1">c2b1</td>
|
|
<td id="c3b1" class="fg-dark bg-c3b1">c3b1</td>
|
|
<td id="c4b1" class="fg-dark bg-c4b1">c4b1</td>
|
|
<td id="c5b1" class="fg-dark bg-c5b1">c5b1</td>
|
|
<td id="c6b1" class="fg-dark bg-c6b1">c6b1</td>
|
|
<td id="c7b1" class="fg-dark bg-c7b1">c7b1</td>
|
|
<td id="c8b1" class="fg-dark bg-c8b1">c8b1</td>
|
|
<td id="c9b1" class="fg-dark bg-c9b1">c9b1</td>
|
|
</tr>
|
|
<tr>
|
|
<th>b2</th>
|
|
<td id="c0b2" class="fg-dark bg-c0b2">c0b2</td>
|
|
<td id="c1b2" class="fg-dark bg-c1b2">c1b2</td>
|
|
<td id="c2b2" class="fg-dark bg-c2b2">c2b2</td>
|
|
<td id="c3b2" class="fg-dark bg-c3b2">c3b2</td>
|
|
<td id="c4b2" class="fg-dark bg-c4b2">c4b2</td>
|
|
<td id="c5b2" class="fg-dark bg-c5b2">c5b2</td>
|
|
<td id="c6b2" class="fg-dark bg-c6b2">c6b2</td>
|
|
<td id="c7b2" class="fg-dark bg-c7b2">c7b2</td>
|
|
<td id="c8b2" class="fg-dark bg-c8b2">c8b2</td>
|
|
<td id="c9b2" class="fg-dark bg-c9b2">c9b2</td>
|
|
</tr>
|
|
<tr>
|
|
<th>b3</th>
|
|
<td id="c0b3" class="fg-dark bg-c0b3">c0b3</td>
|
|
<td id="c1b3" class="fg-dark bg-c1b3">c1b3</td>
|
|
<td id="c2b3" class="fg-dark bg-c2b3">c2b3</td>
|
|
<td id="c3b3" class="fg-dark bg-c3b3">c3b3</td>
|
|
<td id="c4b3" class="fg-dark bg-c4b3">c4b3</td>
|
|
<td id="c5b3" class="fg-dark bg-c5b3">c5b3</td>
|
|
<td id="c6b3" class="fg-dark bg-c6b3">c6b3</td>
|
|
<td id="c7b3" class="fg-dark bg-c7b3">c7b3</td>
|
|
<td id="c8b3" class="fg-dark bg-c8b3">c8b3</td>
|
|
<td id="c9b3" class="fg-dark bg-c9b3">c9b3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>b4</th>
|
|
<td id="c0b4" class="fg-dark bg-c0b4">c0b4</td>
|
|
<td id="c1b4" class="fg-dark bg-c1b4">c1b4</td>
|
|
<td id="c2b4" class="fg-dark bg-c2b4">c2b4</td>
|
|
<td id="c3b4" class="fg-dark bg-c3b4">c3b4</td>
|
|
<td id="c4b4" class="fg-dark bg-c4b4">c4b4</td>
|
|
<td id="c5b4" class="fg-dark bg-c5b4">c5b4</td>
|
|
<td id="c6b4" class="fg-dark bg-c6b4">c6b4</td>
|
|
<td id="c7b4" class="fg-dark bg-c7b4">c7b4</td>
|
|
<td id="c8b4" class="fg-dark bg-c8b4">c8b4</td>
|
|
<td id="c9b4" class="fg-dark bg-c9b4">c9b4</td>
|
|
</tr>
|
|
<tr>
|
|
<th>b5</th>
|
|
<td id="c0b5" class="fg-light bg-c0b5">c0b5</td>
|
|
<td id="c1b5" class="fg-light bg-c1b5">c1b5</td>
|
|
<td id="c2b5" class="fg-light bg-c2b5">c2b5</td>
|
|
<td id="c3b5" class="fg-light bg-c3b5">c3b5</td>
|
|
<td id="c4b5" class="fg-light bg-c4b5">c4b5</td>
|
|
<td id="c5b5" class="fg-light bg-c5b5">c5b5</td>
|
|
<td id="c6b5" class="fg-light bg-c6b5">c6b5</td>
|
|
<td id="c7b5" class="fg-light bg-c7b5">c7b5</td>
|
|
<td id="c8b5" class="fg-light bg-c8b5">c8b5</td>
|
|
<td id="c9b5" class="fg-light bg-c9b5">c9b5</td>
|
|
</tr>
|
|
<tr>
|
|
<th>b6</th>
|
|
<td id="c0b6" class="fg-light bg-c0b6">c0b6</td>
|
|
<td id="c1b6" class="fg-light bg-c1b6">c1b6</td>
|
|
<td id="c2b6" class="fg-light bg-c2b6">c2b6</td>
|
|
<td id="c3b6" class="fg-light bg-c3b6">c3b6</td>
|
|
<td id="c4b6" class="fg-light bg-c4b6">c4b6</td>
|
|
<td id="c5b6" class="fg-light bg-c5b6">c5b6</td>
|
|
<td id="c6b6" class="fg-light bg-c6b6">c6b6</td>
|
|
<td id="c7b6" class="fg-light bg-c7b6">c7b6</td>
|
|
<td id="c8b6" class="fg-light bg-c8b6">c8b6</td>
|
|
<td id="c9b6" class="fg-light bg-c9b6">c9b6</td>
|
|
</tr>
|
|
<tr>
|
|
<th>b7</th>
|
|
<td id="c0b7" class="fg-light bg-c0b7">c0b7</td>
|
|
<td id="c1b7" class="fg-light bg-c1b7">c1b7</td>
|
|
<td id="c2b7" class="fg-light bg-c2b7">c2b7</td>
|
|
<td id="c3b7" class="fg-light bg-c3b7">c3b7</td>
|
|
<td id="c4b7" class="fg-light bg-c4b7">c4b7</td>
|
|
<td id="c5b7" class="fg-light bg-c5b7">c5b7</td>
|
|
<td id="c6b7" class="fg-light bg-c6b7">c6b7</td>
|
|
<td id="c7b7" class="fg-light bg-c7b7">c7b7</td>
|
|
<td id="c8b7" class="fg-light bg-c8b7">c8b7</td>
|
|
<td id="c9b7" class="fg-light bg-c9b7">c9b7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>b8</th>
|
|
<td id="c0b8" class="fg-light bg-c0b8">c0b8</td>
|
|
<td id="c1b8" class="fg-light bg-c1b8">c1b8</td>
|
|
<td id="c2b8" class="fg-light bg-c2b8">c2b8</td>
|
|
<td id="c3b8" class="fg-light bg-c3b8">c3b8</td>
|
|
<td id="c4b8" class="fg-light bg-c4b8">c4b8</td>
|
|
<td id="c5b8" class="fg-light bg-c5b8">c5b8</td>
|
|
<td id="c6b8" class="fg-light bg-c6b8">c6b8</td>
|
|
<td id="c7b8" class="fg-light bg-c7b8">c7b8</td>
|
|
<td id="c8b8" class="fg-light bg-c8b8">c8b8</td>
|
|
<td id="c9b8" class="fg-light bg-c9b8">c9b8</td>
|
|
</tr>
|
|
<tr>
|
|
<th>b9</th>
|
|
<td id="c0b9" class="fg-light bg-c0b9">c0b9</td>
|
|
<td id="c1b9" class="fg-light bg-c1b9">c1b9</td>
|
|
<td id="c2b9" class="fg-light bg-c2b9">c2b9</td>
|
|
<td id="c3b9" class="fg-light bg-c3b9">c3b9</td>
|
|
<td id="c4b9" class="fg-light bg-c4b9">c4b9</td>
|
|
<td id="c5b9" class="fg-light bg-c5b9">c5b9</td>
|
|
<td id="c6b9" class="fg-light bg-c6b9">c6b9</td>
|
|
<td id="c7b9" class="fg-light bg-c7b9">c7b9</td>
|
|
<td id="c8b9" class="fg-light bg-c8b9">c8b9</td>
|
|
<td id="c9b9" class="fg-light bg-c9b9">c9b9</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h1>Contrast Grid</h1>
|
|
|
|
<table>
|
|
<tr>
|
|
<th></th>
|
|
<th>c0</th>
|
|
<th>c1</th>
|
|
<th>c2</th>
|
|
<th>c3</th>
|
|
<th>c4</th>
|
|
<th>c5</th>
|
|
<th>c6</th>
|
|
<th>c7</th>
|
|
<th>c8</th>
|
|
<th>c9</th>
|
|
</tr>
|
|
<tr>
|
|
<th>+5</th>
|
|
<td class="fg-c0b5 bg-c0b0">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c1b5 bg-c1b0">c1b0</td>
|
|
<td class="fg-c2b5 bg-c2b0">c2b0</td>
|
|
<td class="fg-c3b5 bg-c3b0">c3b0</td>
|
|
<td class="fg-c4b5 bg-c4b0">c4b0</td>
|
|
<td class="fg-c5b5 bg-c5b0">c5b0</td>
|
|
<td class="fg-c6b5 bg-c6b0">c6b0</td>
|
|
<td class="fg-c7b5 bg-c7b0">c7b0</td>
|
|
<td class="fg-c8b5 bg-c8b0">c8b0</td>
|
|
<td class="fg-c8b5 bg-c9b0">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>+7</th>
|
|
<td class="fg-c0b7 bg-c0b0">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c1b7 bg-c1b0">c1b0</td>
|
|
<td class="fg-c2b7 bg-c2b0">c2b0</td>
|
|
<td class="fg-c3b7 bg-c3b0">c3b0</td>
|
|
<td class="fg-c4b7 bg-c4b0">c4b0</td>
|
|
<td class="fg-c5b7 bg-c5b0">c5b0</td>
|
|
<td class="fg-c6b7 bg-c6b0">c6b0</td>
|
|
<td class="fg-c7b7 bg-c7b0">c7b0</td>
|
|
<td class="fg-c8b7 bg-c8b0">c8b0</td>
|
|
<td class="fg-c8b7 bg-c9b0">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>+9</th>
|
|
<td class="fg-c0b9 bg-c0b0">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c1b9 bg-c1b0">c1b0</td>
|
|
<td class="fg-c2b9 bg-c2b0">c2b0</td>
|
|
<td class="fg-c3b9 bg-c3b0">c3b0</td>
|
|
<td class="fg-c4b9 bg-c4b0">c4b0</td>
|
|
<td class="fg-c5b9 bg-c5b0">c5b0</td>
|
|
<td class="fg-c6b9 bg-c6b0">c6b0</td>
|
|
<td class="fg-c7b9 bg-c7b0">c7b0</td>
|
|
<td class="fg-c8b9 bg-c8b0">c8b0</td>
|
|
<td class="fg-c8b9 bg-c9b0">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>-3</th>
|
|
<td class="fg-c0b3 bg-c0b9">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c1b3 bg-c1b9">c1b0</td>
|
|
<td class="fg-c2b3 bg-c2b9">c2b0</td>
|
|
<td class="fg-c3b3 bg-c3b9">c3b0</td>
|
|
<td class="fg-c4b3 bg-c4b9">c4b0</td>
|
|
<td class="fg-c5b3 bg-c5b9">c5b0</td>
|
|
<td class="fg-c6b3 bg-c6b9">c6b0</td>
|
|
<td class="fg-c7b3 bg-c7b9">c7b0</td>
|
|
<td class="fg-c8b3 bg-c8b9">c8b0</td>
|
|
<td class="fg-c8b3 bg-c9b9">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>-7</th>
|
|
<td class="fg-c0b2 bg-c0b9">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c1b2 bg-c1b9">c1b0</td>
|
|
<td class="fg-c2b2 bg-c2b9">c2b0</td>
|
|
<td class="fg-c3b2 bg-c3b9">c3b0</td>
|
|
<td class="fg-c4b2 bg-c4b9">c4b0</td>
|
|
<td class="fg-c5b2 bg-c5b9">c5b0</td>
|
|
<td class="fg-c6b2 bg-c6b9">c6b0</td>
|
|
<td class="fg-c7b2 bg-c7b9">c7b0</td>
|
|
<td class="fg-c8b2 bg-c8b9">c8b0</td>
|
|
<td class="fg-c8b2 bg-c9b9">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>-9</th>
|
|
<td class="fg-c0b0 bg-c0b9">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c1b0 bg-c1b9">c1b0</td>
|
|
<td class="fg-c2b0 bg-c2b9">c2b0</td>
|
|
<td class="fg-c3b0 bg-c3b9">c3b0</td>
|
|
<td class="fg-c4b0 bg-c4b9">c4b0</td>
|
|
<td class="fg-c5b0 bg-c5b9">c5b0</td>
|
|
<td class="fg-c6b0 bg-c6b9">c6b0</td>
|
|
<td class="fg-c7b0 bg-c7b9">c7b0</td>
|
|
<td class="fg-c8b0 bg-c8b9">c8b0</td>
|
|
<td class="fg-c8b0 bg-c9b9">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>+5</th>
|
|
<td class="fg-c5b5 bg-c0b0">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c6b5 bg-c1b0">c1b0</td>
|
|
<td class="fg-c7b5 bg-c2b0">c2b0</td>
|
|
<td class="fg-c8b5 bg-c3b0">c3b0</td>
|
|
<td class="fg-c9b5 bg-c4b0">c4b0</td>
|
|
<td class="fg-c0b5 bg-c5b0">c5b0</td>
|
|
<td class="fg-c1b5 bg-c6b0">c6b0</td>
|
|
<td class="fg-c2b5 bg-c7b0">c7b0</td>
|
|
<td class="fg-c3b5 bg-c8b0">c8b0</td>
|
|
<td class="fg-c4b5 bg-c9b0">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>+7</th>
|
|
<td class="fg-c5b7 bg-c0b0">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c6b7 bg-c1b0">c1b0</td>
|
|
<td class="fg-c7b7 bg-c2b0">c2b0</td>
|
|
<td class="fg-c8b7 bg-c3b0">c3b0</td>
|
|
<td class="fg-c9b7 bg-c4b0">c4b0</td>
|
|
<td class="fg-c0b7 bg-c5b0">c5b0</td>
|
|
<td class="fg-c1b7 bg-c6b0">c6b0</td>
|
|
<td class="fg-c2b7 bg-c7b0">c7b0</td>
|
|
<td class="fg-c3b7 bg-c8b0">c8b0</td>
|
|
<td class="fg-c4b7 bg-c9b0">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>+9</th>
|
|
<td class="fg-c5b9 bg-c0b0">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c6b9 bg-c1b0">c1b0</td>
|
|
<td class="fg-c7b9 bg-c2b0">c2b0</td>
|
|
<td class="fg-c8b9 bg-c3b0">c3b0</td>
|
|
<td class="fg-c9b9 bg-c4b0">c4b0</td>
|
|
<td class="fg-c0b9 bg-c5b0">c5b0</td>
|
|
<td class="fg-c1b9 bg-c6b0">c6b0</td>
|
|
<td class="fg-c2b9 bg-c7b0">c7b0</td>
|
|
<td class="fg-c3b9 bg-c8b0">c8b0</td>
|
|
<td class="fg-c4b9 bg-c9b0">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>-3</th>
|
|
<td class="fg-c5b3 bg-c0b9">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c6b3 bg-c1b9">c1b0</td>
|
|
<td class="fg-c7b3 bg-c2b9">c2b0</td>
|
|
<td class="fg-c8b3 bg-c3b9">c3b0</td>
|
|
<td class="fg-c9b3 bg-c4b9">c4b0</td>
|
|
<td class="fg-c0b3 bg-c5b9">c5b0</td>
|
|
<td class="fg-c1b3 bg-c6b9">c6b0</td>
|
|
<td class="fg-c2b3 bg-c7b9">c7b0</td>
|
|
<td class="fg-c3b3 bg-c8b9">c8b0</td>
|
|
<td class="fg-c4b3 bg-c9b9">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>-7</th>
|
|
<td class="fg-c5b2 bg-c0b9">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c6b2 bg-c1b9">c1b0</td>
|
|
<td class="fg-c7b2 bg-c2b9">c2b0</td>
|
|
<td class="fg-c8b2 bg-c3b9">c3b0</td>
|
|
<td class="fg-c9b2 bg-c4b9">c4b0</td>
|
|
<td class="fg-c0b2 bg-c5b9">c5b0</td>
|
|
<td class="fg-c1b2 bg-c6b9">c6b0</td>
|
|
<td class="fg-c2b2 bg-c7b9">c7b0</td>
|
|
<td class="fg-c3b2 bg-c8b9">c8b0</td>
|
|
<td class="fg-c4b2 bg-c9b9">c9b0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>-9</th>
|
|
<td class="fg-c5b0 bg-c0b9">c0b0</td>
|
|
<!-- fg-c0b7 bg-c0b0 -->
|
|
<td class="fg-c6b0 bg-c1b9">c1b0</td>
|
|
<td class="fg-c7b0 bg-c2b9">c2b0</td>
|
|
<td class="fg-c8b0 bg-c3b9">c3b0</td>
|
|
<td class="fg-c9b0 bg-c4b9">c4b0</td>
|
|
<td class="fg-c0b0 bg-c5b9">c5b0</td>
|
|
<td class="fg-c1b0 bg-c6b9">c6b0</td>
|
|
<td class="fg-c2b0 bg-c7b9">c7b0</td>
|
|
<td class="fg-c3b0 bg-c8b9">c8b0</td>
|
|
<td class="fg-c4b0 bg-c9b9">c9b0</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
<script src="./example.js"></script>
|
|
</html>
|