234 lines
6 KiB
HTML
234 lines
6 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"].off:-webkit-slider-thumb {
|
|
opacity: 0;
|
|
}
|
|
|
|
input[type="range"].off::-moz-range-thumb {
|
|
opacity: 0;
|
|
}
|
|
|
|
input[type="range"].off {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
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>
|