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
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));
}