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

updated styles, added toy/tool 'hub', started on license generator tool

Browse Source
This commit is contained in:
ByteDice
2025-01-18 01:54:08 +01:00
parent dbff79a0a2
commit 37a7ca9b55
12 changed files with 157 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/boykisserLicenseEmpty.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

assets/icons/dice3_8x8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 495 B

global/globalScript.js
+2 -1
View File
@@ -1,7 +1,8 @@
const PAGES = {
null: -1,
SYNTHWAVE: 0,
LICENSE: 1,
TOYS: 1,
LICENSE: 2,
}
const CONSOLE_COLORS = {
red: "color: #FF0000;",
global/globalStyle.css
+16 -4
View File
@@ -1,13 +1,13 @@
:root {
--navBar_Inner: #43608D;
--navBar_Border: #2F3E56;
--navBar_SecondInner: #344b6c;
--navBarBtn_Inner: #474747;
--navBarBtn_Border: #232323;
--pxDensity: 1;
--pxDensityPx: 1px;
--bottomPxMargin: 1px;
}
html {
font-family: "Roboto", sans-serif;
font-size: 1rem;
@@ -15,17 +15,29 @@ html {
background-color: #323232;
overflow: hidden;
}
canvas {
position: absolute;
}
.pxFont {
font-family: "Roboto", sans-serif;
font-size: 1rem;
}
@keyframes slide-left {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
.borderedRect {
background-color: var(--navBar_Inner);
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
calc(-1px * var(--pxDensity)) 0px var(--navBar_Border),
0px calc(1px * var(--pxDensity)) var(--navBar_Border),
0px calc(-1px * var(--pxDensity)) var(--navBar_Border);
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
padding: 0%;
}
.invisible {
background-color: transparent;
border: none;
color: inherit;
}
global/navBar.css
+2 -10
View File
@@ -6,14 +6,6 @@ li {
}
.navBar {
background-color: var(--navBar_Inner);
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
calc(-1px * var(--pxDensity)) 0px var(--navBar_Border),
0px calc(1px * var(--pxDensity)) var(--navBar_Border),
0px calc(-1px * var(--pxDensity)) var(--navBar_Border);
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
padding: 0%;
display: inline;
position: absolute;
top: round(calc(100% - calc(5px * var(--pxDensity))), var(--pxDensityPx));
@@ -29,11 +21,11 @@ li {
border: none;
filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
}
.navBtn:hover {
button:hover {
filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
cursor: pointer;
}
.navBtn:active {
button:active {
filter: brightness(0.75);
transform: translateY(calc(1px * var(--pxDensity)));
}
global/navBar.js
+1 -1
View File
@@ -12,7 +12,7 @@ function onLoadNavBar() {
navBarAligner.className = "navBarAligner"
const navBar = document.createElement("ul")
navBar.className = "navBar"
navBar.className = "navBar borderedRect"
for (let btn of navBarJson) {
toys/index.html
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<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">
<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>
</head>
<body>
<div id="mainDiv">
<div id="navBarContainer" data-alt="byte"></div>
<ul>
<li class="toyLi">
<button onclick="slideTransition('/toys/license')" class="toyContainer borderedRect">
<img class="toyImg" src="/assets/boykisserLicenseEmpty.png">
<div class="toyTextContainer">
<h1>Boykisser license generator</h1>
<p>Automatically generates a "Boykissser license" for you. Free of charge.</p>
</div>
</button>
</li>
</ul>
</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>
<!-- local -->
<script src="script.js"></script>
</body>
</html>
toys/license/index.html
+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<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">
<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 - Boykisser license</title>
</head>
<body>
<div id="mainDiv">
<div id="navBarContainer" data-alt="byte"></div>
<div id="optionsContainer" class="borderedRect optionsContainer">aaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="licenseContainer"></div>
</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>
<!-- local -->
<script src="script.js"></script>
</body>
</html>
toys/license/script.js
+1
View File
@@ -0,0 +1 @@
CURRENT_PAGE = PAGES.LICENSE
toys/license/style.css
+9
View File
@@ -0,0 +1,9 @@
.optionsContainer {
display: inline;
position: absolute;
top: 0%;
left: round(50%, var(--pxDensityPx));
transform: translate(-50%);
width: max-content;
padding: calc(1px * var(--pxDensity));
}
toys/script.js
+1
View File
@@ -0,0 +1 @@
CURRENT_PAGE = PAGES.TOYS
toys/style.css
+41
View File
@@ -0,0 +1,41 @@
.toyContainer {
border: none;
width: calc(64px * var(--pxDensity));
height: calc(48px * var(--pxDensity));
display: grid;
grid-template-columns: 1fr;
grid-template-rows: calc(32px * var(--pxDensity)) 1fr;
}
.toyImg {
image-rendering: pixelated;
overflow: hidden;
max-width: calc(62px * var(--pxDensity));
height: calc(32px * var(--pxDensity));
margin: 0% 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: scroll;
}
h1 {
margin: 0%;
margin-bottom: calc(1px * var(--pxDensity));
}
p {
font-size: 1.3rem;
margin: 0%;
}
button:hover {
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)));
}
.toyLi {
margin: calc(3px * var(--pxDensity));
}