134 lines
5.1 KiB
HTML
134 lines
5.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<link href='popup.css' rel='stylesheet' type='text/css'>
|
||
|
|
<script src="popup.js" type="text/javascript"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<main>
|
||
|
|
<div id="site-enabled">
|
||
|
|
<h1 id="hostname">mycoolsite.com</h1>
|
||
|
|
<!--<p>Enable the site bla bla</p>-->
|
||
|
|
<img src="img/toggle-on.svg" alt="Toggle to disable"/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="configuration">
|
||
|
|
<form id="options">
|
||
|
|
<h2 class="visually-hidden">Name</h2>
|
||
|
|
|
||
|
|
<div class="primary-prompt">
|
||
|
|
<label for="name">My name is</label>
|
||
|
|
<input type="text" id="name" name="name">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 class="visually-hidden">Pronouns</h2>
|
||
|
|
|
||
|
|
<div class="primary-prompt">
|
||
|
|
<label for="preset">My pronouns are</label>
|
||
|
|
<select id="preset" name="preset">
|
||
|
|
<option value=""></option>
|
||
|
|
<option value="he">he/him</option>
|
||
|
|
<option value="she">she/her</option>
|
||
|
|
<option value="they">they/them</option>
|
||
|
|
<option value="other">other</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul id="other">
|
||
|
|
<li>
|
||
|
|
<label for="subjective">Subjective</label>
|
||
|
|
<input type="text" id="subjective" name="subjective" placeholder="e.g. he, they">
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<label for="objective">Objective</label>
|
||
|
|
<input type="text" id="objective" name="objective" placeholder="e.g. her, them">
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<label for="possessive">Possessive</label>
|
||
|
|
<input type="text" id="possessive" name="possessive" placeholder="e.g. his, their">
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<label for="adjective">Adjective</label>
|
||
|
|
<input type="text" id="adjective" name="adjective" placeholder="e.g. hers, theirs">
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<label for="reflexive">Reflexive</label>
|
||
|
|
<input type="text" id="reflexive" name="reflexive" placeholder="e.g. himself, themself">
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<label for="honorific-abbr">Honorific abbr.</label>
|
||
|
|
<input type="text" id="abbr" name="honorific-abbr" placeholder="e.g. Ms., Mx.">
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<label for="honorific">Honorific</label>
|
||
|
|
<input type="text" id="honorific" name="honorific" placeholder="e.g. mister, mix">
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<label for="noun-adult">Adult noun</label>
|
||
|
|
<input type="text" id="adult" name="adult-noun" placeholder="e.g. woman, person">
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<label for="noun-child">Child noun</label>
|
||
|
|
<input type="text" id="child" name="child-noun" placeholder="e.g. boy, kid">
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<label for="plurality">Conjugates</label>
|
||
|
|
<select id="plurality" name="conjugates">
|
||
|
|
<option value="singular">singular</option>
|
||
|
|
<option value="plural">plural</option>
|
||
|
|
</select>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2 class="visually-hidden">Perspective</h2>
|
||
|
|
|
||
|
|
<div class="primary-prompt">
|
||
|
|
<label for="pov">I prefer to read in</label>
|
||
|
|
<select id="pov" name="pov">
|
||
|
|
<option value=""></option>
|
||
|
|
<option value="first">first-person</option>
|
||
|
|
<option value="second">second-person</option>
|
||
|
|
<option value="third">third-person</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 class="visually-hidden">Also replace</h2>
|
||
|
|
|
||
|
|
<label class="primary-prompt" for="lhs-1">I also want to replace...</label>
|
||
|
|
|
||
|
|
<ul id="also"></ul>
|
||
|
|
|
||
|
|
<div id="button-grid">
|
||
|
|
<button type="submit" id="save">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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"/></svg>
|
||
|
|
<p>Save</p>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button type="button" id="restore">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>
|
||
|
|
<p>Restore</p>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<ul id="links">
|
||
|
|
<li><a href="https://git.viscogliosi-pate.com/jean/metamorpov/wiki" target="_blank">How to write for MetamorPOV</a></li>
|
||
|
|
<li><a href="mailto:metamorpov@viscogliosi-pate.com" target="_blank">Report an issue</a></li>
|
||
|
|
<li><a href="https://git.viscogliosi-pate.com/jean/metamorpov" target="_blank">Source code</a></li>
|
||
|
|
</ul>
|
||
|
|
</body>
|
||
|
|
</html>
|