Skip to content

Instantly share code, notes, and snippets.

@pasterp

pasterp/index.html

Created May 31, 2023 17:57
Show Gist options
  • Save pasterp/0251aabf3b6d7ffd15fcb45aa0f2ac54 to your computer and use it in GitHub Desktop.
Save pasterp/0251aabf3b6d7ffd15fcb45aa0f2ac54 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<!-- made by /u/pasterp -->
<title>Universal Gender Application</title>
<style>
:root {
--primary: white;
--secondary: #535c68;
--accent: #22a6b3;
}
* {
font-family: Arial, Helvetica, sans-serif;
color: var(--secondary);
}
body {
padding: 5%;
margin: auto;
background-color: var(--primary);
}
input[type=text],
input[type=range] select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
padding: 12px 20px;
margin-top: 5px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
fieldset {
margin-top: 5px;
border-radius: 4px;
border: 1px solid var(--secondary);
}
.slider-container {
margin: auto;
margin-top: 5px;
width: 100%;
display: flex;
justify-content: space-between;
}
.slider-container>* {
min-width: 10%;
text-align: center;
}
.slider {
appearance: none;
width: 90%;
margin-top: 20px;
height: 5px;
border-radius: 4px;
outline: none;
background-color: var(--secondary);
cursor: pointer;
}
.slider::-webkit-slider-thumb {
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--accent);
}
.slider::-moz-range-thumb {
border: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--accent);
}
.container {
margin: auto;
margin-top: 25px;
margin-bottom: 25px;
width: 50%;
}
</style>
</head>
<body>
<form target="#">
<fieldset>
<legend>Sign Up</legend>
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="email">Email</label>
<input type="text" id="email" name="email">
<fieldset>
<legend>Gender</legend>
<select id="gender_difficulty" name="gender_difficulty">
<option value="1">Beginner</option>
<option value="2">Intermediate</option>
<option value="3">Advanced</option>
<option value="4">Expert</option>
<option value="5">Hardcore</option>
<option value="6">Elevated</option>
<option value="7">Custom</option>
</select>
<div id="gender_form">
</div>
</fieldset>
<input type="submit">
</fieldset>
</form>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
let select = document.getElementById("gender_difficulty");
let form = document.getElementById("gender_form");
console.log(form);
select.addEventListener("change", (e) => {
let value = e.target.value;
let template = document.getElementById(""+value).innerHTML;
form.innerHTML = template;
});
select.dispatchEvent(new Event("change"));
});
</script>
<script type="text/html" id="1">
<input type="radio" name="gender" id="man"><label for="man">Man</label><br/>
<input type="radio" name="gender" id="woman"><label for="woman">Woman</label><br/>
<input type="radio" name="gender" id="enby"><label for="enby">Non-Binary</label><br/>
</script>
<script type="text/html" id="2">
<div class="slider-container">
<label>Man</label><input type="range" min="1" max="100" name="men-women-slider"
class="slider"><label>Woman</label>
</div>
</script>
<script type="text/html" id="3">
<div class="slider-container">
<label>Masculine</label><input type="range" min="1" max="100" name="men-women-slider"
class="slider"><label>Feminine</label>
</div>
<div class="slider-container">
<label>Agender</label><input type="range" min="1" max="100" name="men-women-slider"
class="slider"><label>Hypergender</label>
</div>
<div class="slider-container">
<label>Queer</label><input type="range" min="1" max="100" name="men-women-slider"
class="slider"><label>Normative</label>
</div>
</script>
<script type="text/html" id="4">
<div class="slider-container">
<label>Hypomasculine</label><input type="range" min="1" max="100" name="men-women-slider"
class="slider"><label>Hypermasculine</label>
</div>
<div class="slider-container">
<label>Hypofeminine</label><input type="range" min="1" max="100" name="men-women-slider"
class="slider"><label>Hyperfeminine</label>
</div>
<div class="slider-container">
<label>Gendersolid</label><input type="range" min="1" max="100" name="men-women-slider"
class="slider"><label>Genderfluid</label>
</div>
<div class="slider-container">
<label>Cisgender</label><input type="range" min="1" max="100" name="men-women-slider"
class="slider"><label>Transgender</label>
</div>
<div class="slider-container">
<label>Queer</label><input type="range" min="1" max="100" name="men-women-slider"
class="slider"><label>Normative</label>
</div>
<!-- Table for astro signs -->
<div class="container">
<!-- Emmet is so cool table>(thead>tr>th*11)+tbody>(tr>td+td*11>input:radio)*12 -->
<table>
<thead>
<tr>
<th></th>
<th>Sun</th>
<th>Moon</th>
<th>Rising</th>
<th>Mercury</th>
<th>Venus</th>
<th>Mars</th>
<th>Jupiter</th>
<th>Saturn</th>
<th>Uranus</th>
<th>Neptune</th>
<th>Pluto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aries</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Taurus</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Gemini</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Cancer</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Leo</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Virgo</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Libra</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Scorpio</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Sagittarius</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Capricorn</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Aquarius</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
<tr>
<td>Pisces</td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
<td><input type="radio" name="astro_radio"></td>
</tr>
</tbody>
</table>
</div>
<!-- Aura color picker (oops can't find a good color-picker so let's use the standard one)-->
<div class="container">
<label for="aura">Aura - pick your color </label>
<input type="color" id="aura" name="aura" value="#22a6b3">
</div>
<div class="slider-container"><label>Nerd</label><input type="range" min="1" max="100"
name="men-women-slider" class="slider"><label>Jock</label></div>
<div class="slider-container"><label>Wretched</label><input type="range" min="1" max="100"
name="men-women-slider" class="slider"><label>Ethereal</label></div>
<div class="slider-container"><label>Herbivore</label><input type="range" min="1" max="100"
name="men-women-slider" class="slider"><label>Carnivore</label></div>
<div class="slider-container"><label>Cringe</label><input type="range" min="1" max="100"
name="men-women-slider" class="slider"><label>Based</label></div>
<!-- alignement selector -->
<div class="container">
<table>
<thead>
<tr>
<td></td>
<th>Lawful</th>
<th>Neutral</th>
<th>Chaotic</th>
<tbody>
<tr>
<td>Good</td>
<td><input type="radio" name="alignement_radio"></td>
<td><input type="radio" name="alignement_radio"></td>
<td><input type="radio" name="alignement_radio"></td>
</tr>
<tr>
<td>Neutral</td>
<td><input type="radio" name="alignement_radio"></td>
<td><input type="radio" name="alignement_radio"></td>
<td><input type="radio" name="alignement_radio"></td>
</tr>
<tr>
<td>Evil</td>
<td><input type="radio" name="alignement_radio"></td>
<td><input type="radio" name="alignement_radio"></td>
<td><input type="radio" name="alignement_radio"></td>
</tr>
</tbody>
</tr>
</thead>
</table>
</div>
<div class="slider-container"><label>Pure of Heart, Dumb of Ass</label><input type="range" min="1"
max="100" name="men-women-slider" class="slider"><label>Vilain (Sexy)</label></div>
<div class="slider-container"><label>Hoarder</label><input type="range" min="1" max="100"
name="men-women-slider" class="slider"><label>Spartan</label></div>
<div class="slider-container"><label>Top</label><input type="range" min="1" max="100"
name="men-women-slider" class="slider"><label>Bottom</label></div>
<div class="slider-container"><label>Cats</label><input type="range" min="1" max="100"
name="men-women-slider" class="slider"><label>Dogs</label></div>
<div class="slider-container"><label>Podcasts</label><input type="range" min="1" max="100"
name="men-women-slider" class="slider"><label>Music</label></div>
</script>
<script type="text/html" id="5">
<textarea name="hardcoded">
</textarea>
</script>
<script type="text/html" id="6">
<input type="radio" name="gender_" id="yes" value="1"><label for="yes">Yes</label><br/>
<input type="radio" name="gender_" id="no" value="0"><label for="no">No</label>
</script>
<script type="text/html" id="7">
<label for="gender_file">Upload your gender</label><br/>
<input type="file" id="gender_file" name="file">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment