247 lines
7.4 KiB
HTML
247 lines
7.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<title>Enlistment</title>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="profile.html">Profile</a></li>
|
|
<li><a href="form.html">Form</a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class="container">
|
|
<h1>Personnel Enlistment</h1>
|
|
<form>
|
|
<fieldset>
|
|
<legend>Biological Identity</legend>
|
|
|
|
<div class="field">
|
|
<label for="fullname">Full legal name</label>
|
|
<input
|
|
id="fullname"
|
|
type="text"
|
|
placeholder="e.g. Ellen L. Ripley"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="email"
|
|
>Comm address <abbr title="Electronic Mail">(email)</abbr></label
|
|
>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
placeholder="unit@weyland-yutani.com"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="dob"
|
|
>Date of birth
|
|
<abbr title="Earth Standard Calendar">(ESC)</abbr></label
|
|
>
|
|
<input id="dob" type="date" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="phone">Contact frequency</label>
|
|
<input
|
|
id="phone"
|
|
type="tel"
|
|
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
|
|
placeholder="123-456-7890"
|
|
/>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="website"
|
|
>Personnel dossier
|
|
<abbr title="Uniform Resource Locator">(URL)</abbr></label
|
|
>
|
|
<input id="website" type="url" placeholder="https://" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="gender">Biological classification</label>
|
|
<select id="gender">
|
|
<option value="">-- Unspecified --</option>
|
|
<option>Non-binary</option>
|
|
<option>Female</option>
|
|
<option>Male</option>
|
|
<option>Other</option>
|
|
<option>Prefer not to say</option>
|
|
<option>Synthetic (non-applicable)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="origin">Colony of origin</label>
|
|
<input id="origin" list="colonies" placeholder="Begin typing…" />
|
|
<datalist id="colonies">
|
|
<option value="Earth (Sol III)"></option>
|
|
<option value="LV-426 (Acheron)"></option>
|
|
<option value="LV-223"></option>
|
|
<option value="Fiorina 161"></option>
|
|
<option value="Origae-6"></option>
|
|
<option value="Fury 161"></option>
|
|
</datalist>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="bio">Operative profile</label>
|
|
<textarea
|
|
id="bio"
|
|
rows="3"
|
|
maxlength="200"
|
|
placeholder="Summarise your operational history…"
|
|
></textarea>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Operational Preferences</legend>
|
|
|
|
<div class="field">
|
|
<label for="volume">Alert volume</label>
|
|
<input id="volume" type="range" min="0" max="100" value="50" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="favcolor">Suit beacon color</label>
|
|
<input id="favcolor" type="color" value="#7dff40" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="avatar">Biometric photo</label>
|
|
<input id="avatar" type="file" accept="image/*" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<span>Preferred dispatch channel</span>
|
|
<label>
|
|
<input type="radio" name="contact" value="email" checked />
|
|
Comm burst
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="contact" value="phone" />
|
|
Voice channel
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="contact" value="mail" />
|
|
Physical dispatch
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<span>Mission specialisations</span>
|
|
<label>
|
|
<input type="checkbox" name="interests" value="tech" />
|
|
Systems engineering
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" name="interests" value="recon" />
|
|
Recon & surveillance
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" name="interests" value="medical" />
|
|
Medical & biosafety
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" name="interests" value="combat" />
|
|
Combat operations
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" name="interests" value="xeno" />
|
|
Xenobiology
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="seniority">Clearance tier</label>
|
|
<output id="seniorityOutput" for="seniority">3</output>
|
|
<input
|
|
id="seniority"
|
|
type="range"
|
|
min="0"
|
|
max="10"
|
|
value="3"
|
|
oninput="seniorityOutput.value = seniority.value"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Access Credentials</legend>
|
|
|
|
<div class="field">
|
|
<label for="username">Operative callsign</label>
|
|
<input
|
|
id="username"
|
|
type="text"
|
|
minlength="3"
|
|
placeholder="min. 3 characters"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="password">Auth passphrase</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
minlength="6"
|
|
placeholder="min. 6 characters"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="storage">Assigned storage allocation</label>
|
|
<meter
|
|
id="storage"
|
|
value="32"
|
|
min="0"
|
|
max="100"
|
|
low="70"
|
|
high="90"
|
|
optimum="0"
|
|
>
|
|
32%
|
|
</meter>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div>
|
|
<input id="ToS" type="checkbox" />
|
|
<label for="ToS">
|
|
I acknowledge and accept the
|
|
<a href="#">Weyland-Yutani Personnel Directive 937</a>.
|
|
</label>
|
|
</div>
|
|
|
|
<details>
|
|
<summary>How is my data processed?</summary>
|
|
<p>
|
|
All personnel data is logged to MU-TH-UR 6000 and retained for the
|
|
duration of active service. Records may be accessed by
|
|
<abbr title="Weyland-Yutani Corporation">W-Y</abbr> command under
|
|
standing Order 937. Crew are advised: all other priorities are
|
|
rescinded.
|
|
</p>
|
|
</details>
|
|
|
|
<div class="actions">
|
|
<button type="submit">Enlist</button>
|
|
<button type="reset">Clear</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|