Spectrum/index.html
2024-01-03 02:08:06 -06:00

230 lines
5.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Spectrum</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
:root {
--base-color: 330, 50%;
}
input:disabled {
opacity: 0.8;
}
input[type="range"] {
width: calc(100% - 0.125em);
}
span {
vertical-align: middle;
}
.sbs2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5em;
}
.sbs2.lh {
grid-template-columns: auto min-content;
}
.sbs2.rh {
grid-template-columns: min-content auto;
}
.span3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 0.25em 0;
margin-bottom: 0.5em;
}
.span3 span:first-child {
text-align: start;
}
.span3 span:nth-child(2) {
text-align: center;
}
.span3 span:last-child {
text-align: end;
}
input[type="range"]:not(.ro):disabled:-webkit-slider-thumb {
opacity: 0;
}
input[type="range"]:not(.ro):disabled::-moz-range-thumb {
opacity: 0;
}
body.readOnly .hideIfReadOnly {
display: none;
}
body .showIfReadOnly {
display: none;
}
body.readOnly .showIfReadOnly {
display: initial;
}
</style>
</head>
<body>
<noscript>
<style>
section {
display: none;
}
</style>
<h1>Heads up!</h1>
<p>You need to enable JavaScript in order to use Spectrum.</p>
</noscript>
<header>
<section>
<h1>Spectrum</h1>
<p>Like spectrum.avris.it, but a little more detailed.</p>
</section>
</header>
<section class="hideIfReadOnly">
<h2>Name</h2>
<p>What's your name? This will be used throughout the form.</p>
<label>
<input
id="spec-name"
type="text"
value=""
placeholder="[Subject Name Here]"
/>
</label>
</section>
<section>
<h2>Gender</h2>
<h3>Identity</h3>
<label>
<input id="spec-gen-idt-amt" type="range" min="0" max="4" value="2" />
<div class="span3">
<span>Agender</span>
<span>Indifferent</span>
<span>Regular</span>
</div>
</label>
<label for="spec-gen-idt">
<input id="spec-gen-idt" type="range" min="0" max="8" value="4" />
<div class="span3">
<span>Male</span>
<span>Androgynous</span>
<span>Female</span>
</div>
</label>
<p class="description" id="spec-gen-idt-dsc"></p>
<h3>Expression</h3>
<div class="sbs2 rh">
<label for="spec-gen-exp-ovr" class="checkbox">
<input id="spec-gen-exp-ovr" type="checkbox" />
<span class="checkbox"></span>
</label>
<label for="spec-gen-exp">
<input id="spec-gen-exp" type="range" min="0" max="10" value="5" />
<div class="span3">
<span>Hypermasculine</span>
<span>Androgynous</span>
<span>Hyperfeminine</span>
</div>
</label>
</div>
<p class="description" id="spec-gen-exp-dsc"></p>
</section>
<section>
<h2>Sexual orientation</h2>
<label>
<input id="spec-sex-ori-amt" type="range" min="0" max="4" value="2" />
<div class="span3">
<span>Asexual</span>
<span>Regular</span>
<span>Hypersexual</span>
</div>
</label>
<label for="spec-sex-ori">
<input id="spec-sex-ori" type="range" min="0" max="4" value="2" />
<div class="span3">
<span>Hetero</span>
<span>Bi / Pan</span>
<span>Homo</span>
</div>
</label>
<p class="description" id="spec-sex-ori-dsc"></p>
</section>
<section>
<h2>Romantic orientation</h2>
<label>
<input id="spec-rom-ori-amt" type="range" min="0" max="4" value="2" />
<div class="span3">
<span>Aromantic</span>
<span>Regular</span>
<span>Hyperromantic</span>
</div>
</label>
<label for="spec-rom-ori">
<input id="spec-rom-ori" type="range" min="0" max="4" value="2" />
<div class="span3">
<span>Hetero</span>
<span>Bi / Pan</span>
<span>Homo</span>
</div>
</label>
<p class="description" id="spec-rom-ori-dsc"></p>
</section>
<section>
<h2>Relationship attitude</h2>
<h3>Commitment</h3>
<label for="spec-rel-att-amt">
<input id="spec-rel-att-amt" type="range" min="0" max="4" value="2" />
<div class="span3">
<span>Uncomfortable</span>
<span>Regular</span>
<span>Dedicated</span>
</div>
</label>
<h3>Openness</h3>
<label for="spec-rel-att">
<input id="spec-rel-att" type="range" min="0" max="4" value="2" />
<div class="span3">
<span>Monogamous</span>
<span>Open</span>
<span>Polygamous</span>
</div>
</label>
<p class="description" id="spec-rel-att-dsc"></p>
</section>
<section class="hideIfReadOnly">
<h2>Share it!</h2>
<p>Here's a shareable link:</p>
<p>
<a href="..." target="_blank" id="spec-share-link">...</a>
</p>
</section>
<section class="showIfReadOnly">
<h2>Create your own spectrum</h2>
<p><a href="/">Click here</a> to create your own!</p>
</section>
<footer>
<section>
<p>
Spectrum 🄯 2024
<a href="https://abtmtr.link/" target="_blank">MeowcaTheoRange</a>
</p>
</section>
</footer>
<script src="./scripts/index.js"></script>
<script>
parseURL();
</script>
</body>
</html>