137 lines
3.5 KiB
HTML
137 lines
3.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
|
||
|
|
<title>Automatic colour palette maker</title>
|
||
|
|
|
||
|
|
<meta
|
||
|
|
name="description"
|
||
|
|
content="A tool to help me, with limited colour vision, make accessible colour palettes."
|
||
|
|
/>
|
||
|
|
<meta name="robots" content="index,follow" />
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="/scheme.css" />
|
||
|
|
|
||
|
|
<script src="/scheme.js" type="module"></script>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>
|
||
|
|
Automatic colour palette maker
|
||
|
|
</h1>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<section>
|
||
|
|
<h2>
|
||
|
|
Explanation
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<p>Pick colours for each of the styles.</p>
|
||
|
|
<p>Related colours will be automatically calculated: a slightly darker border, a contrasting text colour, and hover/focus/active highlights.
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>
|
||
|
|
Pick colours
|
||
|
|
</h2>
|
||
|
|
<form id="color-picker">
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="preview">
|
||
|
|
<h2>
|
||
|
|
Preview
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<nav>
|
||
|
|
<p>Text in a nav <a href="#somewhere">link</a></p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<button>default</button>
|
||
|
|
<button class="success">success</button>
|
||
|
|
<button class="info">info</button>
|
||
|
|
<button class="warning">warning</button>
|
||
|
|
<button class="danger">danger</button>
|
||
|
|
<button class="primary">primary</button>
|
||
|
|
</p>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2>A heading</h2>
|
||
|
|
|
||
|
|
<p>A long line of text, which is pretty good as far as things go.</p>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<p>Text after a horizontal rule.</p>
|
||
|
|
|
||
|
|
<hr class="faint">
|
||
|
|
|
||
|
|
<p>Text after a faint horizontal rule.</p>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr><th>H</th><th>eading</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>a</td><td>b</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<p class="help-block muted">Help text</p>
|
||
|
|
|
||
|
|
<input type="text" value="text"></input>
|
||
|
|
|
||
|
|
<input class="answered" value="answered"></input>
|
||
|
|
|
||
|
|
<input class="has-errors" value="has errors"></input>
|
||
|
|
|
||
|
|
<input class="has-warnings" value="has warnings"></input>
|
||
|
|
|
||
|
|
<p>Text with <code>monospace code</code></p>
|
||
|
|
|
||
|
|
<pre>
|
||
|
|
pre-formatted
|
||
|
|
text
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
<p>Text to press a <kbd>k</kbd>ey.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="plain-text">
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Text with
|
||
|
|
<a href="#somewhere">a link</a>
|
||
|
|
and text styled
|
||
|
|
<span class="success">success</span> or
|
||
|
|
<span class="info">info</span> or
|
||
|
|
<span class="warning">warning</span> or
|
||
|
|
<span class="danger">danger</span> or
|
||
|
|
<span class="muted">muted</span>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<button>default</button>
|
||
|
|
<button class="success">success</button>
|
||
|
|
<button class="info">info</button>
|
||
|
|
<button class="warning">warning</button>
|
||
|
|
<button class="danger">danger</button>
|
||
|
|
<button class="primary">primary</button>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="alerts"></div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>
|
||
|
|
Made by <a href="https://somethingorotherwhatever.com">clp</a>.
|
||
|
|
</p>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|