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

convert all indents to tabs

Browse Source
This commit is contained in:
ByteDice
2026-06-30 20:45:33 +02:00
parent 6adefe7210
commit 3b71a72636
30 changed files with 1473 additions and 1477 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toys/index.html
+49 -49
View File
@@ -2,70 +2,70 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Toys</title>
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Toys</title>
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/toys">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/toys">
<meta name="description" content="A list of fun web-based tools made by Byte Dice.">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
<meta name="author" content="Byte Dice">
<meta name="description" content="A list of fun web-based tools made by Byte Dice.">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
<meta name="author" content="Byte Dice">
<meta property="og:title" content="Byte Dice">
<meta property="og:description" content="A list of fun web-based tools made by Byte Dice.">
<meta property="og:url" content="https://bytedice.net/toys">
<meta property="og:type" content="website">
<meta property="og:title" content="Byte Dice">
<meta property="og:description" content="A list of fun web-based tools made by Byte Dice.">
<meta property="og:url" content="https://bytedice.net/toys">
<meta property="og:type" content="website">
</head>
<body>
<div id="mainDiv">
<div id="mainDiv">
<img src="/assets/backgrounds/starNoise_512x512.png" draggable="false" id="starNoise">
<canvas id="starfallCanvas"></canvas>
<div class="toyUl">
<div class="toyLi">
<button onclick="slideTransition('/toys/license', event)" class="toyContainer borderedRect">
<img class="toyImg" src="/assets/boykisserLicense.png">
<div class="toyTextContainer">
<h1>Boykisser License Generator</h1>
<p class="desc">Automatically generates a "Boykissser license" for you. Free of charge and very silly.</p>
</div>
</button>
</div>
<div class="toyLi">
<button onclick="slideTransition('/toys/loading', event)" class="toyContainer borderedRect">
<img class="toyImg" src="/assets/byte_dice_fancy_64x64.png">
<div class="toyTextContainer">
<h1>Loading Screen</h1>
<p class="desc">The same loading screen as the website uses but less clutter and infinite. (Loading the rest of the description...)</p>
</div>
</button>
</div>
</div>
<div class="toyUl">
<div class="toyLi">
<button onclick="slideTransition('/toys/license', event)" class="toyContainer borderedRect">
<img class="toyImg" src="/assets/boykisserLicense.png">
<div class="toyTextContainer">
<h1>Boykisser License Generator</h1>
<p class="desc">Automatically generates a "Boykissser license" for you. Free of charge and very silly.</p>
</div>
</button>
</div>
<div class="toyLi">
<button onclick="slideTransition('/toys/loading', event)" class="toyContainer borderedRect">
<img class="toyImg" src="/assets/byte_dice_fancy_64x64.png">
<div class="toyTextContainer">
<h1>Loading Screen</h1>
<p class="desc">The same loading screen as the website uses but less clutter and infinite. (Loading the rest of the description...)</p>
</div>
</button>
</div>
</div>
<div id="navBarContainer" data-alt="byte"></div>
</div>
<div id="navBarContainer" data-alt="byte"></div>
</div>
<div id="loadingScreen"></div>
<div id="loadingScreen"></div>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<script src="/global/navBar.js"></script>
<script src="/global/screenTransition.js"></script>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<script src="/global/navBar.js"></script>
<script src="/global/screenTransition.js"></script>
<!-- local -->
<script src="script.js"></script>
<!-- local -->
<script src="script.js"></script>
<script src="/stars.js"></script>
</body>
toys/license/index.html
+81 -81
View File
@@ -2,77 +2,77 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="license.css">
<link rel="stylesheet" href="options.css">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="license.css">
<link rel="stylesheet" href="options.css">
<!-- fonts -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Yellowtail&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
</style>
<!-- fonts -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Yellowtail&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
</style>
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Boykisser license</title>
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Boykisser license</title>
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/toys/license">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/toys/license">
<meta name="description" content="A 'boykisser license' generator tool. Based off the original by Chilli (link in site). It's completely free of charge and very silly.">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase, Boykisser, license, generator, silly">
<meta name="author" content="Byte Dice">
<meta name="description" content="A 'boykisser license' generator tool. Based off the original by Chilli (link in site). It's completely free of charge and very silly.">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase, Boykisser, license, generator, silly">
<meta name="author" content="Byte Dice">
<meta property="og:title" content="Byte Dice - Boykisser license">
<meta property="og:description" content="A 'boykisser license' generator tool. Based off the original by Chilli (link in site). It's completely free of charge and very silly.">
<meta property="og:url" content="https://bytedice.net/toys/license">
<meta property="og:type" content="website">
<meta property="og:image" content="/assets/boykisserLicense.png">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="399">
<meta property="og:title" content="Byte Dice - Boykisser license">
<meta property="og:description" content="A 'boykisser license' generator tool. Based off the original by Chilli (link in site). It's completely free of charge and very silly.">
<meta property="og:url" content="https://bytedice.net/toys/license">
<meta property="og:type" content="website">
<meta property="og:image" content="/assets/boykisserLicense.png">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="399">
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
<meta name="twitter:card" content="summary_large_image">
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
<meta name="twitter:card" content="summary_large_image">
</head>
<body>
<div id="mainDiv">
<div id="mainDiv">
<img src="/assets/backgrounds/starNoise_512x512.png" draggable="false" id="starNoise">
<canvas id="starfallCanvas"></canvas>
<div class="allContainer">
<div id="optionsContainer" class="borderedRect">
<h1 class="optionsCredits h1Top">
Based on the <a onclick="slideTransition('https://picrew.me/en/image_maker/2310778', event)">original</a> by Chilli!<br>
Boykisser picture presets by <a onclick="slideTransition('https://www.deviantart.com/greenbandit2004', event)">greenbandit2004</a>.<br>
<br>
For takedown requests, please
<a onclick="slideTransition('https://github.com/ByteDice/ByteDiceWeb/issues', event)">submit an issue</a> with the "Copyright" label in the Github repository for this website.
</h1><br>
<h1>Basic</h1><br>
<form class="licenseForm licenseFormContainer">
<label for="titleInput" >Title</label ><input type="text" id="titleInput" name="titleInput" value="Boykisser License">
<label for="authorInput" >User</label ><input type="text" id="authorInput" name="authorInput" value="Byte Dice">
<label for="createdInput" >Issued</label ><input type="text" id="createdInput" name="createdInput" value="2025-01-01">
<label for="expireInput" >Expires</label ><input type="text" id="expireInput" name="expireInput" value="NEVER!!!">
<label for="identityInput">Identity</label ><input type="text" id="identityInput" name="identityInput" value="any pronouns">
<div class="allContainer">
<div id="optionsContainer" class="borderedRect">
<h1 class="optionsCredits h1Top">
Based on the <a onclick="slideTransition('https://picrew.me/en/image_maker/2310778', event)">original</a> by Chilli!<br>
Boykisser picture presets by <a onclick="slideTransition('https://www.deviantart.com/greenbandit2004', event)">greenbandit2004</a>.<br>
<br>
For takedown requests, please
<a onclick="slideTransition('https://github.com/ByteDice/ByteDiceWeb/issues', event)">submit an issue</a> with the "Copyright" label in the Github repository for this website.
</h1><br>
<label for="sillyInput">Silliness</label><div style="display: inline-flex">
<h1>Basic</h1><br>
<form class="licenseForm licenseFormContainer">
<label for="titleInput" >Title</label ><input type="text" id="titleInput" name="titleInput" value="Boykisser License">
<label for="authorInput" >User</label ><input type="text" id="authorInput" name="authorInput" value="Byte Dice">
<label for="createdInput" >Issued</label ><input type="text" id="createdInput" name="createdInput" value="2025-01-01">
<label for="expireInput" >Expires</label ><input type="text" id="expireInput" name="expireInput" value="NEVER!!!">
<label for="identityInput">Identity</label ><input type="text" id="identityInput" name="identityInput" value="any pronouns">
<label for="sillyInput">Silliness</label><div style="display: inline-flex">
<div id="sillyNumberValue">03</div><div class="sliderDiv">
<input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput"></div>
</div>
<input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput"></div>
</div>
<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">
<label for="picInput">Picture</label><div style="display: inline-flex;">
<label for="picInput">Picture</label><div style="display: inline-flex;">
<select id="picInput" name="picInput">
<option value="boykisser" >Boykisser</option>
<option value="bi-kisser" >Bi-kisser</option>
@@ -81,14 +81,14 @@
<option value="trans-kisser" >Trans-kisser</option>
<option value="bytedice" >Byte Dice</option>
<option value="custom" id="customPic">Custom (upload)</option>
</select>
</select>
<label for="picUpload" id="picUploadLabel"><img src="/assets/icons/upload.svg" id="bgUploadIcon" draggable="false"></label>
<input type="file" id="picUpload" name="picUpload" accept=".png,.jpg,.jpeg,.webp">
</div>
</form><br>
</form><br>
<h1>Colors</h1><br>
<form class="licenseForm licenseFormContainer">
<form class="licenseForm licenseFormContainer">
<label for="bgTypeInput" name="bgTypeInput">BG Type</label><div style="display: inline-flex;">
<select id="bgTypeInput", name="bgTypeInput">
<option value="color">Solid Color</option>
@@ -98,21 +98,21 @@
<input type="file" id="bgUpload" name="bgUpload" accept=".png,.jpg,.jpeg,.webp">
</div>
<label for="bgColInput" >Background</label><input type="color" id="bgColInput" name="bgColInput" value="#FFFFFF">
<label for="bgColInput" >Background</label><input type="color" id="bgColInput" name="bgColInput" value="#FFFFFF">
<label for="borderColInput">Borders</label ><input type="color" id="borderColInput" name="borderColInput" value="#000000">
<label for="textColInput" >Text</label ><input type="color" id="textColInput" name="textColInput" value="#000000">
</form><br>
<!--<h1>Advanced</h1><br>
<form class="licenseForm">
<label for="soon2">Soon...</label><input type="text" name="soon2" value="Does nothing"><br>
<\!--
license border radius
pic border radius
title gradient (2 colors + direction) or flag
license bg-image/bg-gradient
-\->
</form>-->
<!--<h1>Advanced</h1><br>
<form class="licenseForm">
<label for="soon2">Soon...</label><input type="text" name="soon2" value="Does nothing"><br>
<\!--
license border radius
pic border radius
title gradient (2 colors + direction) or flag
license bg-image/bg-gradient
-\->
</form>-->
<div style="display: flex; gap: calc(1px * var(--pxDensity))">
<button id="generateButton" class="generateButton navBtn" onclick="generateLicense()">
@@ -125,8 +125,8 @@
Import
</button>
</div>
</div>
</div>
<div style="display: inline-flex; justify-content: center;">
<div id="licenseAnchor" style="display: inline-block; transform-origin: center;">
<div id="licenseContainer" class="blackBorderRect sans">
@@ -171,22 +171,22 @@
</div>
</div>
<div id="navBarContainer" data-alt="byte"></div>
</div>
<div id="navBarContainer" data-alt="byte"></div>
</div>
<div id="loadingScreen"></div>
<div id="loadingScreen"></div>
<!-- libs -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<!-- libs -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<script src="/global/navBar.js"></script>
<script src="/global/screenTransition.js"></script>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<script src="/global/navBar.js"></script>
<script src="/global/screenTransition.js"></script>
<!-- local -->
<!-- local -->
<script src="script.js"></script>
<script src="license.js"></script>
<script src="input.js"></script>
toys/license/input.js
+12 -12
View File
@@ -95,12 +95,12 @@ async function importFromB64(b64) {
try {
let str = atob(b64)
data = JSON.parse(str)
let isValid = validateJSON(data)
if (isValid != true)
{ alert("Invalid data string imported (Invalid fields). Full results:\n" + isValid.join("\n")); return }
jsonData = deepOverride(jsonData, data)
await updLicense()
@@ -145,7 +145,7 @@ function makeOptionsTheSameAsJSON() {
function validateJSON(obj) {
let is_valid = (
typeof obj === "object" &&
obj !== null &&
obj !== null &&
typeof obj.bg === "object" &&
typeof obj.user === "string" &&
typeof obj.title === "string" &&
@@ -198,21 +198,21 @@ function exportData() {
function generateLicense() {
const element = document.getElementById("licenseContainer")
const element = document.getElementById("licenseContainer")
let dupe = element.cloneNode(true)
dupe.style.transform = "initial"
dupe.style.transform = "initial"
dupe.style.left = "300vw"
dupe.style.position = "absolute"
dupe.style.margin = "initial"
document.body.appendChild(dupe)
html2canvas(dupe).then(canvas => {
const link = document.createElement("a");
link.download = "boykisserLicense.png";
link.href = canvas.toDataURL("image/png");
link.click();
});
html2canvas(dupe).then(canvas => {
const link = document.createElement("a");
link.download = "boykisserLicense.png";
link.href = canvas.toDataURL("image/png");
link.click();
});
console.log(dupe.getBoundingClientRect())
toys/license/license.css
+75 -75
View File
@@ -6,122 +6,122 @@
}
.sans {
font-family: "Comic Neue", serif;
font-weight: 400;
font-style: normal;
font-family: "Comic Neue", serif;
font-weight: 400;
font-style: normal;
}
.sans-bold { /* TODO: bold not working */
font-family: "Comic Neue", serif;
font-weight: 700;
font-style: normal;
font-family: "Comic Neue", serif;
font-weight: 700;
font-style: normal;
}
.yellowTail {
font-family: "Yellowtail", serif;
font-weight: 400;
font-style: normal;
font-family: "Yellowtail", serif;
font-weight: 400;
font-style: normal;
}
h2 {
margin: 5px;
margin: 5px;
}
.sillyBar {
width: auto;
height: auto;
background-color: var(--licenseBorderCol);
border: 3px solid var(--licenseBorderCol);
border-radius: 8px;
align-self: center;
display: flex;
gap: 3px;
width: auto;
height: auto;
background-color: var(--licenseBorderCol);
border: 3px solid var(--licenseBorderCol);
border-radius: 8px;
align-self: center;
display: flex;
gap: 3px;
}
.sillyValue {
position: relative;
position: relative;
width: calc(100% / 10);
height: 100%;
aspect-ratio: 1 / 1;
display: block;
aspect-ratio: 1 / 1;
display: block;
}
.on {
background-image: url(/assets/scribble_32x32.png);
background-image: url(/assets/scribble_32x32.png);
}
.off {
background-image: none;
background-color: var(--licenseBgCol);
background-image: none;
background-color: var(--licenseBgCol);
}
.sillyValue:first-child {
border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
}
.sillyValue:last-child {
border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
}
#licenseContainer {
width: 600px;
height: 400px;
padding: 0px 20px 40px 20px;
font-size: 0.75rem;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-rows: repeat(2, auto);
width: 600px;
height: 400px;
padding: 0px 20px 40px 20px;
font-size: 0.75rem;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-rows: repeat(2, auto);
background-color: var(--licenseBgCol);
border: 10px var(--licenseBorderCol) solid;
border-radius: 32px;
color: var(--licenseTextCol);
border: 10px var(--licenseBorderCol) solid;
border-radius: 32px;
color: var(--licenseTextCol);
}
#picContainer {
width: 150px;
height: 150px;
display: block;
overflow: hidden;
background-color: transparent;
border-radius: 32px;
width: 150px;
height: 150px;
display: block;
overflow: hidden;
background-color: transparent;
border-radius: 32px;
border: 10px var(--licenseBorderCol) solid;
}
#picValue {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#credits {
position: absolute;
bottom: 12px;
left: 0%;
margin: 0% 0% 0% 20px;
color: var(--licenseTextCol);
font-size: 0.6rem;
position: absolute;
bottom: 12px;
left: 0%;
margin: 0% 0% 0% 20px;
color: var(--licenseTextCol);
font-size: 0.6rem;
}
#signatureContainer, #DsignatureContainer {
display: inline-flex;
flex-direction: column;
margin: 5% 0% 0% 0%;
display: inline-flex;
flex-direction: column;
margin: 5% 0% 0% 0%;
}
#signatureValue {
margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
text-align: center;
font-size: 1.5rem;
margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
text-align: center;
font-size: 1.5rem;
}
#signHere {
border-top: var(--licenseBorderCol) solid 6px;
margin: 0%;
padding: 0% 25px;
text-align: center;
border-top: var(--licenseBorderCol) solid 6px;
margin: 0%;
padding: 0% 25px;
text-align: center;
}
#detailsContainer {
display: grid;
grid-template-columns: repeat(2, auto);
display: grid;
grid-template-columns: repeat(2, auto);
}
#titleValue {
grid-area: 1 / 1 / 2 / 3;
font-size: 2rem;
margin: 0% auto 0% auto;
height: max-content;
text-align: center;
grid-area: 1 / 1 / 2 / 3;
font-size: 2rem;
margin: 0% auto 0% auto;
height: max-content;
text-align: center;
}
#hashID {
position: absolute;
bottom: 12px;
right: 0%;
margin: 0% 30px 0% 0%;
color: var(--licenseTextCol);
font-size: 0.6rem;
bottom: 12px;
right: 0%;
margin: 0% 30px 0% 0%;
color: var(--licenseTextCol);
font-size: 0.6rem;
}
toys/license/license.js
+2 -2
View File
@@ -31,7 +31,7 @@ class License {
this.setImgValue(json.img)
if (json.bg.type == "image")
{ this.baseE.style.backgroundImage = `url("${json.bg.file}")` }
{ this.baseE.style.backgroundImage = `url("${json.bg.file}")` }
else { this.baseE.style.backgroundImage = "" }
document.documentElement.style.setProperty("--licenseBgCol", json.bg.color)
@@ -77,7 +77,7 @@ let license = new License()
function prependZero(number) {
return number < 10 ? "0" + number : number
return number < 10 ? "0" + number : number
}
toys/license/options.css
+181 -181
View File
@@ -1,259 +1,259 @@
#optionsContainer {
display: block;
margin: calc(2px * var(--pxDensity)) auto 0% auto;
width: max-content;
padding: calc(2px * var(--pxDensity));
overflow-y: scroll;
max-width: min(600px, 100vw);
font-size: min(1.5rem, calc(4px * var(--pxDensity)));
display: block;
margin: calc(2px * var(--pxDensity)) auto 0% auto;
width: max-content;
padding: calc(2px * var(--pxDensity));
overflow-y: scroll;
max-width: min(600px, 100vw);
font-size: min(1.5rem, calc(4px * var(--pxDensity)));
box-sizing: border-box;
}
.optionsCredits {
margin: 0%;
max-width: calc(100% - (4px * var(--pxDensity)));
margin: 0%;
max-width: calc(100% - (4px * var(--pxDensity)));
}
.licenseFormContainer {
display: grid;
grid-template-columns: 40% 60%;
}
.licenseForm label {
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);
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));
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity));
padding: calc(1px * var(--pxDensity));
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity));
font-weight: 800;
}
.licenseForm input[type="text"] {
font-family: "Roboto", sans-serif;
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);
font-family: "Roboto", sans-serif;
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;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity));
color: inherit;
display: inline-block;
padding: calc(1px * var(--pxDensity));
border: none;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity));
color: inherit;
display: inline-block;
}
.licenseForm input[type="text"]:hover {
filter: brightness(1.35);
cursor: pointer;
filter: brightness(1.35);
cursor: pointer;
}
.slider {
-webkit-appearance: none;
appearance: none;
background-color: var(--navBarBtn_Border);
box-shadow: none;
filter: none;
border: none;
font-size: inherit;
box-sizing: border-box;
width: 100%;
height: calc(1px * var(--pxDensity));
margin: 0%;
outline: none;
padding: 0%;
-webkit-appearance: none;
appearance: none;
background-color: var(--navBarBtn_Border);
box-shadow: none;
filter: none;
border: none;
font-size: inherit;
box-sizing: border-box;
width: 100%;
height: calc(1px * var(--pxDensity));
margin: 0%;
outline: none;
padding: 0%;
}
.slider:hover {
filter: brightness(1.35);
cursor: pointer;
filter: brightness(1.35);
cursor: pointer;
}
.slider::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
background-color: var(--navBar_Inner);
border: none;
cursor: pointer;
border-radius: 0%;
width: calc(3px * var(--pxDensity));
height: calc(3px * var(--pxDensity));
-webkit-appearance: none;
appearance: none;
background-color: var(--navBar_Inner);
border: none;
cursor: pointer;
border-radius: 0%;
width: calc(3px * var(--pxDensity));
height: calc(3px * var(--pxDensity));
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: var(--navBar_Inner);
border: none;
cursor: pointer;
border-radius: 0%;
width: calc(3px * var(--pxDensity));
height: calc(3px * var(--pxDensity));
appearance: none;
background-color: var(--navBar_Inner);
border: none;
cursor: pointer;
border-radius: 0%;
width: calc(3px * var(--pxDensity));
height: calc(3px * var(--pxDensity));
}
.sliderDiv {
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);
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;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
padding: calc(1px * var(--pxDensity));
border: none;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: 100%;
height: calc(6px * var(--pxDensity));
color: inherit;
align-items: center;
display: flex;
height: calc(6px * var(--pxDensity));
color: inherit;
align-items: center;
display: flex;
}
#sillyNumberValue {
display: inline;
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);
display: inline;
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;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity));;
aspect-ratio: 1 / 1;
padding: calc(1px * var(--pxDensity));
border: none;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity));;
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);
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;
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: 0%;
margin-top: 0%;
}
select {
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);
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;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: 100%;
height: round(auto, var(--pxDensity));
color: inherit;
display: inline-block;
padding: calc(1px * var(--pxDensity));
border: none;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: 100%;
height: round(auto, var(--pxDensity));
color: inherit;
display: inline-block;
}
select:hover {
filter: brightness(1.35);
cursor: pointer;
filter: brightness(1.35);
cursor: pointer;
}
input[type=file] {
/* height: max-content;
aspect-ratio: 1 / 1;
width: auto;
overflow: hidden; */
display: none;
/* height: max-content;
aspect-ratio: 1 / 1;
width: auto;
overflow: hidden; */
display: none;
}
#picInput, #bgTypeInput {
height: calc(6px * var(--pxDensity));
margin-right: calc(3px * var(--pxDensity));
margin-right: calc(3px * var(--pxDensity));
}
#picUploadLabel, #bgUploadLabel {
height: calc(6px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
background-image: url(/assets/icons/upload.svg);
display: inline-flex;
height: calc(6px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
background-image: url(/assets/icons/upload.svg);
display: inline-flex;
margin-right: calc(2px * var(--pxDensity));
}
#picUploadLabel:hover, #bgUploadLabel:hover {
filter: brightness(1.35);
cursor: pointer;
filter: brightness(1.35);
cursor: pointer;
}
#picUploadLabel:active, #bgUploadLabel:active {
filter: brightness(0.75);
transform: translateY(calc(1px * var(--pxDensity)));
filter: brightness(0.75);
transform: translateY(calc(1px * var(--pxDensity)));
}
#picUploadIcon, #bgUploadIcon {
height: calc(4px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
display: inline-block;
vertical-align: middle;
height: calc(4px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
display: inline-block;
vertical-align: middle;
}
form {
display: inline-block;
display: inline-block;
}
.generateButton {
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);
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: calc(100% - (4px * var(--pxDensity)));
height: calc(6px * var(--pxDensity));
display: inline-flex;
justify-content: center;
/* padding: calc(1px * var(--pxDensity)); */
border: none;
margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: calc(100% - (4px * var(--pxDensity)));
height: calc(6px * var(--pxDensity));
display: inline-flex;
justify-content: center;
align-items: center;
font-size: min(5vmin, 2vmax, 30px);
color: #ffffff
}
.generateButtonIcon {
height: calc(4px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
display: inline-block;
margin: auto 0%;
height: calc(4px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
display: inline-block;
margin: auto 0%;
}
input[type="color"] {
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);
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: 0;
border: none;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity));
color: inherit;
display: inline-block;
padding: 0;
border: none;
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity));
color: inherit;
display: inline-block;
}
input[type="color"]::-moz-color-swatch {
border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
border-radius: 0;
padding: 0;
border-radius: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
border: none;
}
toys/license/style.css
+13 -13
View File
@@ -1,24 +1,24 @@
.allContainer {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
gap: calc(4px * var(--pxDensity));
height: calc(100vh - calc(25px * var(--pxDensity)));
height: calc(100vh - calc(25px * var(--pxDensity)));
}
.blackBorderRect {
background-color: #FFFFFF;
border: 10px #000000 solid;
border-radius: 32px;
color: #000000;
background-color: #FFFFFF;
border: 10px #000000 solid;
border-radius: 32px;
color: #000000;
}
a {
cursor: pointer;
color: #2222FF;
text-decoration: underline;
font-weight: normal;
cursor: pointer;
color: #2222FF;
text-decoration: underline;
font-weight: normal;
}
a:visited {
color: #551A8B;
color: #551A8B;
}
.mainDiv {
text-align: center;
text-align: center;
}
toys/loading/index.html
+31 -32
View File
@@ -2,50 +2,49 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="/global/navBar.css">
<link rel="stylesheet" href="/global/globalStyle.css">
<link rel="stylesheet" href="/global/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Loading...</title>
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Loading...</title>
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/toys/loading">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bytedice.net/toys/loading">
<meta name="description" content="An infinite decorative loading screen.">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
<meta name="author" content="Byte Dice">
<meta name="description" content="An infinite decorative loading screen.">
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase">
<meta name="author" content="Byte Dice">
<meta property="og:title" content="Byte Dice">
<meta property="og:description" content="An infinite decorative loading screen.">
<meta property="og:url" content="https://bytedice.net/toys/loading">
<meta property="og:type" content="website">
<meta property="og:image" content="/assets/backgrounds/embedImage.png">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="720">
<meta property="og:title" content="Byte Dice">
<meta property="og:description" content="An infinite decorative loading screen.">
<meta property="og:url" content="https://bytedice.net/toys/loading">
<meta property="og:type" content="website">
<meta property="og:image" content="/assets/backgrounds/embedImage.png">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="720">
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
<meta name="twitter:card" content="summary_large_image">
<!-- No twitter embeds except for card. Elon can go and fucking return it to its previous owners. -->
<meta name="twitter:card" content="summary_large_image">
</head>
<body>
<div id="mainDiv">
</div>
<div id="mainDiv">
</div>
<div id="loadingScreen"></div>
<div id="loadingScreen"></div>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
<script src="/global/loadingScreen.js"></script>
<!-- local -->
<script src="script.js"></script>
<!-- local -->
<script src="script.js"></script>
</body>
</html>
toys/loading/script.js
+10 -10
View File
@@ -6,28 +6,28 @@ let loadingImg = undefined
function clearLoadingScreenClutter() {
document.getElementById("fakeLoadingToggle").remove()
loadingImg = document.getElementById("loadingImg")
document.getElementById("fakeLoadingToggle").remove()
loadingImg = document.getElementById("loadingImg")
}
function periodicallyChangeTips() {
newTip()
setLoadingProgress("")
newTip()
setLoadingProgress("")
}
function changeLoadingImgSize() {
loadingImg.style.width = `calc(${32 * byteDiceSize}px * var(--pxDensity))`
loadingImg.style.height = `calc(${32 * byteDiceSize}px * var(--pxDensity))`
loadingImg.style.width = `calc(${32 * byteDiceSize}px * var(--pxDensity))`
loadingImg.style.height = `calc(${32 * byteDiceSize}px * var(--pxDensity))`
}
window.onkeydown = function(e) { // keycodes 48..57 = 0-9
let code = e.keyCode
let code = e.keyCode
if (!(code >= 48 && code <= 57)) { return }
if (!(code >= 48 && code <= 57)) { return }
byteDiceSize = (code - 48) / 9 + 1
changeLoadingImgSize()
byteDiceSize = (code - 48) / 9 + 1
changeLoadingImgSize()
}
toys/style.css
+29 -29
View File
@@ -1,47 +1,47 @@
.toyContainer {
border: none;
display: inline-grid;
border: none;
display: inline-grid;
width: 25%;
min-width: 100%;
max-width: 512px;
grid-template-columns: 1fr;
grid-template-rows: calc(32px * var(--pxDensity)) 1fr;
color: inherit;
grid-template-columns: 1fr;
grid-template-rows: calc(32px * var(--pxDensity)) 1fr;
color: inherit;
}
.toyImg {
image-rendering: pixelated;
overflow: hidden;
width: 100%;
height: 100%;
image-rendering: pixelated;
overflow: hidden;
width: 100%;
height: 100%;
object-fit: contain;
margin: auto auto;
margin: auto auto;
}
.toyTextContainer {
background-color: var(--navBar_SecondInner);
padding: calc(1px * var(--pxDensity));
border-top: calc(1px * var(--pxDensity)) solid var(--navBar_Border);
text-align: left;
overflow-y: scroll;
overflow-x: hidden;
height: calc(16px * var(--pxDensity));
background-color: var(--navBar_SecondInner);
padding: calc(1px * var(--pxDensity));
border-top: calc(1px * var(--pxDensity)) solid var(--navBar_Border);
text-align: left;
overflow-y: scroll;
overflow-x: hidden;
height: calc(16px * var(--pxDensity));
font-size: min(5vmin, 2vmax, 25px);
}
h1 {
font-size: max(1.2em, 2.5vmin);
margin: 0%;
margin-bottom: calc(1px * var(--pxDensity));
font-size: max(1.2em, 2.5vmin);
margin: 0%;
margin-bottom: calc(1px * var(--pxDensity));
}
.desc {
font-size: max(1em, 2vmin);
margin: 0%;
font-size: max(1em, 2vmin);
margin: 0%;
}
button:hover {
filter: brightness(1.15) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
cursor: pointer;
filter: brightness(1.15) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
cursor: pointer;
}
button:active {
filter: brightness(0.85);
transform: translateY(calc(1px * var(--pxDensity)));
filter: brightness(0.85);
transform: translateY(calc(1px * var(--pxDensity)));
}
.toyUl {
padding: calc(3px * var(--pxDensity));
@@ -53,9 +53,9 @@ button:active {
margin: 0 auto;
}
.toyLi {
margin: 0;
margin: 0;
}
ul {
margin: 0%;
padding: 0%;
margin: 0%;
padding: 0%;
}