ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

realignment & restyling

Browse Source
This commit is contained in:
ByteDice
2025-01-19 19:05:17 +01:00
parent 74789b7b0d
commit c08e026d4c
4 changed files with 60 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toys/license/index.html
+29 -16
View File
@@ -19,35 +19,48 @@
<body> <body>
<!-- If you came here from u/RandomPersonDotExe, let them know that they are a good developer. --> <!-- 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. --> <!-- 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. --> <!-- Proof that I am Byte Dice? Check the commit history. -->
<div id="mainDiv"> <div id="mainDiv">
<div id="navBarContainer" data-alt="byte"></div> <div id="navBarContainer" data-alt="byte"></div>
<div id="optionsContainer" class="borderedRect"> <div id="optionsContainer" class="borderedRect">
<p id="optionsCredits"> <h1 id="optionsCredits" class="h1Top">
Check out the original version by Chilli Check out the original by Chilli
<a onclick="slideTransition('https://picrew.me/en/image_maker/2310778')">here</a>! <a onclick="slideTransition('https://picrew.me/en/image_maker/2310778')">here</a>!
</p> </h1><br>
<h1>Basic</h1> <h1>Basic</h1>
<form> <form>
<label for="authorInput">For/Author</label> <label for="authorInput">For/Author</label><input type="text" id="authorInput" name="authorInput" value="Byte Dice"><br>
<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="createdInput">Issued</label> <label for="expireInput">Expires </label><input type="text" id="expireInput" name="expireInput" value="NEVER!!!"><br>
<input type="text" id="createdInput" name="createdInput" value="2025-01-01"><br> <label for="identityInput">Identity</label><input type="text" id="identityInput" name="identityInput" value="any pronouns"><br>
<label for="expireInput">Expires</label>
<input type="text" id="expireInput" name="expireInput" value="NEVER!!!"><br> <label for="sillyInput">Silly</label><div id="sillyNumberValue">03</div>
<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"> <div class="sliderDiv">
<input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput"> <input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput">
</div><br> </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> </form>
</div> </div>
toys/license/license.css
+1 -4
View File
@@ -2,10 +2,7 @@
width: 600px; width: 600px;
height: 400px; height: 400px;
padding: 40px 10px 40px 40px; padding: 40px 10px 40px 40px;
position: absolute; margin: calc(5px * var(--pxDensity)) auto calc(30px * var(--pxDensity)) auto;
left: 50%;
bottom: 0%;
transform: translate(-50%, calc(-22px * var(--pxDensity)));
font-size: 0.75rem; font-size: 0.75rem;
box-sizing: border-box; box-sizing: border-box;
display: grid; display: grid;
toys/license/options.css
+27 -7
View File
@@ -1,11 +1,11 @@
#optionsContainer { #optionsContainer {
display: inline; display: block;
position: absolute; margin: 0% auto;
top: 0%;
left: round(50%, var(--pxDensityPx));
transform: translate(-50%);
width: max-content; width: max-content;
padding: calc(2px * var(--pxDensity)); padding: calc(2px * var(--pxDensity));
overflow-y: scroll;
max-height: 45vh;
max-width: 100vw;
} }
#optionsCredits { #optionsCredits {
margin: 0%; margin: 0%;
@@ -18,7 +18,7 @@ label {
0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border); 0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
padding: calc(1px * var(--pxDensity)); 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; box-sizing: border-box;
width: round(auto, var(--pxDensity)); width: round(auto, var(--pxDensity));
height: round(auto, var(--pxDensity)); height: round(auto, var(--pxDensity));
@@ -38,6 +38,7 @@ input {
width: round(auto, var(--pxDensity)); width: round(auto, var(--pxDensity));
height: round(auto, var(--pxDensity)); height: round(auto, var(--pxDensity));
color: inherit; color: inherit;
display: inline-block;
} }
.slider { .slider {
-webkit-appearance: none; -webkit-appearance: none;
@@ -54,7 +55,6 @@ input {
outline: none; outline: none;
padding: 0%; padding: 0%;
} }
.slider::-webkit-slider-thumb, .slider::-moz-range-thumb { .slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
@@ -99,3 +99,23 @@ input {
height: auto; height: auto;
aspect-ratio: 1 / 1; 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));
}
toys/license/style.css
+3
View File
@@ -12,3 +12,6 @@ a {
a:visited { a:visited {
color: #551A8B; color: #551A8B;
} }
.mainDiv {
text-align: center;
}