127 lines
4.1 KiB
HTML
127 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="UTF-8">
|
|
<html>
|
|
<head>
|
|
<link href='options.css' rel='stylesheet' type='text/css'>
|
|
<script src="options.js" type="text/javascript"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<h1 class="visually-hidden">Options</h1>
|
|
|
|
<form>
|
|
<h2 class="visually-hidden">Name</h2>
|
|
|
|
<div class="primary-prompt">
|
|
<label for="y-n">My name is</label>
|
|
<input type="text" id="y-n" name="name">
|
|
</div>
|
|
|
|
<h2 class="visually-hidden">Pronouns</h2>
|
|
|
|
<div class="primary-prompt">
|
|
<label for="prn-preset">My pronouns are</label>
|
|
<select id="prn-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>
|
|
|
|
<div id="prn-other">
|
|
<div class="prn">
|
|
<label for="prn-s">Subjective</label>
|
|
<input type="text" id="prn-s" name="subjective" placeholder="e.g. he, they">
|
|
</div>
|
|
|
|
<div class="prn">
|
|
<label for="prn-o">Objective</label>
|
|
<input type="text" id="prn-o" name="objective" placeholder="e.g. her, them">
|
|
</div>
|
|
|
|
<div class="prn">
|
|
<label for="prn-p">Possessive</label>
|
|
<input type="text" id="prn-p" name="possessive" placeholder="e.g. his, their">
|
|
</div>
|
|
|
|
<div class="prn">
|
|
<label for="prn-a">Adjective</label>
|
|
<input type="text" id="prn-a" name="adjective" placeholder="e.g. hers, theirs">
|
|
</div>
|
|
|
|
<div class="prn">
|
|
<label for="prn-r">Reflexive</label>
|
|
<input type="text" id="prn-r" name="reflexive" placeholder="e.g. himself, themself">
|
|
</div>
|
|
|
|
<div class="prn">
|
|
<label for="prn-h-abbr">Honorific abbr.</label>
|
|
<input type="text" id="prn-h-abbr" name="honorific-abbr" placeholder="e.g. Ms., Mx.">
|
|
</div>
|
|
|
|
<div class="prn">
|
|
<label for="prn-h">Honorific</label>
|
|
<input type="text" id="prn-h" name="honorific" placeholder="e.g. mister, mix">
|
|
</div>
|
|
|
|
<div class="prn">
|
|
<label for="prn-n-adult">Adult noun</label>
|
|
<input type="text" id="prn-n-adult" name="adult-noun" placeholder="e.g. woman, person">
|
|
</div>
|
|
|
|
<div class="prn">
|
|
<label for="prn-n-child">Child noun</label>
|
|
<input type="text" id="prn-n-child" name="child-noun" placeholder="e.g. boy, kid">
|
|
</div>
|
|
|
|
<div class="prn">
|
|
<label for="prn-plural">Conjugates</label>
|
|
<select id="prn-plural" name="conjugates">
|
|
<option value="singular">singular</option>
|
|
<option value="plural">plural</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<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="replace-1">I also want to replace...</label>
|
|
|
|
<div class="replace">
|
|
<input type="text" id="replace-1" name="replace-1">
|
|
<label for="replace-with-1">with</label>
|
|
<input type="text" id="replace-with-1" name="replace-with-1">
|
|
<img src="../img/delete.svg" alt="Clear fields">
|
|
</div>
|
|
|
|
<div id="button-grid">
|
|
<button>
|
|
<img src="../img/save.svg" alt="">
|
|
Save
|
|
</button>
|
|
|
|
<button>
|
|
<img src="../img/revert.svg" alt="">
|
|
Revert
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
</body>
|
|
</html>
|