realignment & restyling
This commit is contained in:
+29
-16
@@ -19,35 +19,48 @@
|
||||
<body>
|
||||
<!-- If you came here from u/RandomPersonDotExe, let them know that they are a good developer. -->
|
||||
<!-- Also, u/RandomPersonDotExe and Byte Dice are the same person. -->
|
||||
<!-- Proof for the above comment? None, but I am Byte Dice and randomPerson sent you this saying it's their work -->
|
||||
<!-- Proof for the above comment? None, but I am Byte Dice and randomPerson probably sent you this saying it's their work -->
|
||||
<!-- Proof that I am Byte Dice? Check the commit history. -->
|
||||
|
||||
<div id="mainDiv">
|
||||
<div id="navBarContainer" data-alt="byte"></div>
|
||||
|
||||
<div id="optionsContainer" class="borderedRect">
|
||||
<p id="optionsCredits">
|
||||
Check out the original version by Chilli
|
||||
<h1 id="optionsCredits" class="h1Top">
|
||||
Check out the original by Chilli
|
||||
<a onclick="slideTransition('https://picrew.me/en/image_maker/2310778')">here</a>!
|
||||
</p>
|
||||
</h1><br>
|
||||
|
||||
<h1>Basic</h1>
|
||||
<form>
|
||||
<label for="authorInput">For/Author</label>
|
||||
<input type="text" id="authorInput" name="authorInput" value="Byte Dice"><br>
|
||||
<label for="createdInput">Issued</label>
|
||||
<input type="text" id="createdInput" name="createdInput" value="2025-01-01"><br>
|
||||
<label for="expireInput">Expires</label>
|
||||
<input type="text" id="expireInput" name="expireInput" value="NEVER!!!"><br>
|
||||
<label for="identityInput">Identity</label>
|
||||
<input type="text" id="identityInput" name="identityInput" value="any pronouns"><br>
|
||||
<label for="sillyInput">Silly</label>
|
||||
<div id="sillyNumberValue">03</div>
|
||||
<label for="authorInput">For/Author</label><input type="text" id="authorInput" name="authorInput" value="Byte Dice"><br>
|
||||
<label for="createdInput">Issued </label><input type="text" id="createdInput" name="createdInput" value="2025-01-01"><br>
|
||||
<label for="expireInput">Expires </label><input type="text" id="expireInput" name="expireInput" value="NEVER!!!"><br>
|
||||
<label for="identityInput">Identity</label><input type="text" id="identityInput" name="identityInput" value="any pronouns"><br>
|
||||
|
||||
<label for="sillyInput">Silly</label><div id="sillyNumberValue">03</div>
|
||||
<div class="sliderDiv">
|
||||
<input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput">
|
||||
</div><br>
|
||||
<label for="signatureInput">Signature</label>
|
||||
<input type="text" id="signatureInput" name="signatureInput" value="Byte Dice">
|
||||
|
||||
<label for="signatureInput">Signature</label><input type="text" id="signatureInput" name="signatureInput" value="Byte Dice">
|
||||
<!-- Title & picture -->
|
||||
</form>
|
||||
|
||||
<h1>Extra</h1>
|
||||
<form>
|
||||
<!-- decorations like
|
||||
the QR-code
|
||||
license bg-image/bg-color
|
||||
-->
|
||||
</form>
|
||||
|
||||
<h1>Advanced</h1>
|
||||
<form>
|
||||
<!--
|
||||
license border radius
|
||||
pic border radius
|
||||
-->
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,10 +2,7 @@
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
padding: 40px 10px 40px 40px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0%;
|
||||
transform: translate(-50%, calc(-22px * var(--pxDensity)));
|
||||
margin: calc(5px * var(--pxDensity)) auto calc(30px * var(--pxDensity)) auto;
|
||||
font-size: 0.75rem;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
#optionsContainer {
|
||||
display: inline;
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: round(50%, var(--pxDensityPx));
|
||||
transform: translate(-50%);
|
||||
display: block;
|
||||
margin: 0% auto;
|
||||
width: max-content;
|
||||
padding: calc(2px * var(--pxDensity));
|
||||
overflow-y: scroll;
|
||||
max-height: 45vh;
|
||||
max-width: 100vw;
|
||||
}
|
||||
#optionsCredits {
|
||||
margin: 0%;
|
||||
@@ -18,7 +18,7 @@ label {
|
||||
0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
|
||||
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: round(auto, var(--pxDensity));
|
||||
@@ -38,6 +38,7 @@ input {
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: round(auto, var(--pxDensity));
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
}
|
||||
.slider {
|
||||
-webkit-appearance: none;
|
||||
@@ -54,7 +55,6 @@ input {
|
||||
outline: none;
|
||||
padding: 0%;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
@@ -98,4 +98,24 @@ input {
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
h1 {
|
||||
background-color: var(--navBarBtn_Inner);
|
||||
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
|
||||
calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
|
||||
0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
|
||||
0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
|
||||
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
border: none;
|
||||
margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: round(auto, var(--pxDensity));
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
display: inline-block;
|
||||
}
|
||||
.h1Top {
|
||||
margin-top: calc(2px * var(--pxDensity));
|
||||
}
|
||||
@@ -11,4 +11,7 @@ a {
|
||||
}
|
||||
a:visited {
|
||||
color: #551A8B;
|
||||
}
|
||||
.mainDiv {
|
||||
text-align: center;
|
||||
}
|
||||
Reference in New Issue
Block a user