155 lines
6.4 KiB
HTML
155 lines
6.4 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>
|
|
<section id="site-state">
|
|
<div id="site-details">
|
|
<h1 id="domain">example.com</h1>
|
|
<p>MetamorPOV replacements are <b id="state">disabled</b> for this website</p>
|
|
</div>
|
|
<button type="button" id="toggle" title="Toggle to enable">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>
|
|
</button>
|
|
</section>
|
|
|
|
<section id="config">
|
|
<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" class="hide unhide-slow">
|
|
<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 id="other-final">
|
|
<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>
|
|
|
|
<div class="primary-prompt">
|
|
<label for="lhs-1">I also want to replace...</label>
|
|
</div>
|
|
|
|
<ul id="also"></ul>
|
|
|
|
<div id="button-grid">
|
|
<button type="submit" id="save" title="Save options">
|
|
<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" title="Restore options from last 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="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>
|
|
</section>
|
|
</main>
|
|
|
|
<ul id="links">
|
|
<li>
|
|
<a href="https://git.viscogliosi-pate.com/jean/metamorpov/wiki" target="_blank">
|
|
<p>How to write for MetamorPOV</p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="mailto:metamorpov@viscogliosi-pate.com" target="_blank">
|
|
<p>Report an issue</p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://git.viscogliosi-pate.com/jean/metamorpov" target="_blank">
|
|
<p>Source code</p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</body>
|
|
</html>
|