CarmiCoven/BookBar
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Checkpoint

Browse Source 
I haven't touched this code in a month and need a rollback point for when I break everything.
This commit is contained in:
RolimirKal
2026-07-25 17:39:21 -04:00
parent cc14fc933d
commit 3c2c8ec0ae
2 changed files with 292 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bar.html
+21
View File
@@ -0,0 +1,21 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=VT323&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<link rel="stylesheet" href="timer.css" />
<script src="timer.js"></script>
<title>Lilac Timer</title>
</head>
<body>
<main>
<div class='widgetContainer'>
<div class="layoutContainer">
</div>
</div>
</main>
</body>
</html>
timer.css
+110 -78
View File
@@ -52,14 +52,22 @@ p {
font-size: 1.3em; font-size: 1.3em;
} }
.contentContainer {
/*
*** Timer Widget ***
*/
.contentContainer {
height: fit-content; height: fit-content;
width: fit-content; width: fit-content;
position: relative; position: relative;
text-align: center; text-align: center;
} }
.mainHeart { .mainHeart {
max-height: 100vh; max-height: 100vh;
max-width: 72vw; max-width: 72vw;
} }
@@ -70,7 +78,7 @@ p {
left: 0px; left: 0px;
} }
.infoWrap { .infoWrap {
container-type: size; container-type: size;
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -82,36 +90,36 @@ p {
grid-template-rows: 11% 1fr 29%; grid-template-rows: 11% 1fr 29%;
place-items: center; place-items: center;
text-wrap: nowrap; text-wrap: nowrap;
} }
.infoGroup { .infoGroup {
height: 100%; height: 100%;
width: 100%; width: 100%;
grid-column-start: 2; grid-column-start: 2;
grid-column-end: 2; grid-column-end: 2;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 2; grid-row-end: 2;
} }
.infoBox { .infoBox {
height: auto; height: auto;
width: 100%; width: 100%;
font-size: 4cqh; font-size: 4cqh;
} }
#InfoBox1 { #InfoBox1 {
transform: translate(-2%, 0%); transform: translate(-2%, 0%);
margin-top: -50%; margin-top: -50%;
} }
#InfoBox2 { #InfoBox2 {
/* -- !!DO NOT REMOVE!! -- /* -- !!DO NOT REMOVE!! --
Removing this transform kills the goal label and I do not know why Removing this transform kills the goal label and I do not know why
*/ */
transform: translate(0%, 0%); transform: translate(0%, 0%);
} }
#InfoBox3 { #InfoBox3 {
width: 142%; width: 142%;
position: relative; position: relative;
transform: translate(65%, 10%) scale(1, 1); transform: translate(65%, 10%) scale(1, 1);
@@ -120,26 +128,26 @@ p {
border-color: #00A0F3; border-color: #00A0F3;
background-color: white; background-color: white;
padding: .4ch 0 .4ch 0; padding: .4ch 0 .4ch 0;
} }
#Timer { #Timer {
/* /*
margin-top: 10%; margin-top: 10%;
margin-bottom: 2%; margin-bottom: 2%;
*/ */
transform: translate(0%, 0%) scale(.95, 1.2); transform: translate(0%, 0%) scale(.95, 1.2);
} }
#TimerInfo { #TimerInfo {
transform: translate(0%, -60%); transform: translate(0%, -60%);
display: none; display: none;
} }
#GoalLabel { #GoalLabel {
color: #404145; color: #404145;
} }
#GoalName { #GoalName {
width: fit-content; width: fit-content;
position: relative; position: relative;
color: #32B993; color: #32B993;
@@ -148,9 +156,9 @@ p {
padding-right: 4%; padding-right: 4%;
transform: translate(.5ch, 0%); transform: translate(.5ch, 0%);
/* --- animation-duration = JS VAR --- */ /* --- animation-duration = JS VAR --- */
} }
#GoalNameDupe { #GoalNameDupe {
width: fit-content; width: fit-content;
position: relative; position: relative;
color: #32B993; color: #32B993;
@@ -158,9 +166,9 @@ p {
padding-right: 4%; padding-right: 4%;
transform: translate(.5ch, 0%); transform: translate(.5ch, 0%);
/* --- animation-duration = JS VAR --- */ /* --- animation-duration = JS VAR --- */
} }
#GoalProgressWrap { #GoalProgressWrap {
width: fit-content; width: fit-content;
padding-left: .8cqh; padding-left: .8cqh;
padding-right: .8cqh; padding-right: .8cqh;
@@ -169,32 +177,32 @@ p {
border-color: #404145; border-color: #404145;
margin: .4ch auto 0 auto; margin: .4ch auto 0 auto;
overflow: hidden; overflow: hidden;
} }
#GoalProgressBar { #GoalProgressBar {
width: 110%; width: 110%;
background-color: #FC98B3; background-color: #FC98B3;
transform: translate(-5%, 0%) scale(1, 1.5); transform: translate(-5%, 0%) scale(1, 1.5);
} }
#GoalProgress { #GoalProgress {
transform: translate(0%, -8%) scale(1); transform: translate(0%, -8%) scale(1);
text-align: center; text-align: center;
margin-top: -19%; margin-top: -19%;
color: #404145; color: #404145;
} }
#TopUsers { #TopUsers {
margin-bottom: 2%; margin-bottom: 2%;
font-weight: normal; font-weight: normal;
color: #404145; color: #404145;
} }
.giftUserWrap { .giftUserWrap {
transform: translate(9%, -8%) scale(1, 1); transform: translate(9%, -8%) scale(1, 1);
} }
.giftUserRow { .giftUserRow {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 2ch 14ch 5ch; grid-template-columns: 2ch 14ch 5ch;
@@ -202,9 +210,9 @@ p {
text-wrap: nowrap; text-wrap: nowrap;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
} }
.giftUserNum { .giftUserNum {
border-right: 1.5px solid #00A0F3; border-right: 1.5px solid #00A0F3;
border-image: linear-gradient(to top, border-image: linear-gradient(to top,
transparent 0%, transparent 0%,
@@ -212,9 +220,9 @@ p {
#00A0F3 35%, #00A0F3 35%,
#00A0F3 65%, #00A0F3 65%,
transparent 95%) 1; transparent 95%) 1;
} }
.giftUserScore { .giftUserScore {
border-left: 1.5px solid #00A0F3; border-left: 1.5px solid #00A0F3;
border-image: linear-gradient(to top, border-image: linear-gradient(to top,
transparent 0%, transparent 0%,
@@ -224,9 +232,9 @@ p {
transparent 95%) 1; transparent 95%) 1;
text-align: right; text-align: right;
padding-right: .25ch; padding-right: .25ch;
} }
.giftUserName { .giftUserName {
width: fit-content; width: fit-content;
margin-left: 0%; margin-left: 0%;
position: relative; position: relative;
@@ -235,9 +243,9 @@ p {
display: inline-block; display: inline-block;
padding-right: 4%; padding-right: 4%;
transform: translate(.5ch, 0%); transform: translate(.5ch, 0%);
} }
.giftUserNameDupe { .giftUserNameDupe {
width: fit-content; width: fit-content;
margin-left: 0%; margin-left: 0%;
position: relative; position: relative;
@@ -245,43 +253,43 @@ p {
text-align: left; text-align: left;
padding-right: 4%; padding-right: 4%;
transform: translate(.5ch, 0%); transform: translate(.5ch, 0%);
} }
#GiftUserName1 { #GiftUserName1 {
/* --- animation-duration = JS VAR --- */ /* --- animation-duration = JS VAR --- */
} }
#GiftUserName2 { #GiftUserName2 {
/* --- animation-duration = JS VAR --- */ /* --- animation-duration = JS VAR --- */
} }
#GiftUserName3 { #GiftUserName3 {
/* --- animation-duration = JS VAR --- */ /* --- animation-duration = JS VAR --- */
} }
#GiftUserNameDupe1 { #GiftUserNameDupe1 {
/* --- animation-duration = JS VAR --- */ /* --- animation-duration = JS VAR --- */
} }
#GiftUserNameDupe2 { #GiftUserNameDupe2 {
/* --- animation-duration = JS VAR --- */ /* --- animation-duration = JS VAR --- */
} }
#GiftUserNameDupe3 { #GiftUserNameDupe3 {
/* --- animation-duration = JS VAR --- */ /* --- animation-duration = JS VAR --- */
} }
.scrollWrap { .scrollWrap {
width: 100%; width: 100%;
} }
.rightFadeWrap { .rightFadeWrap {
/* /*
mask-image: linear-gradient(to right, black 75%, transparent 90%); mask-image: linear-gradient(to right, black 75%, transparent 90%);
*/ */
} }
#RightFadeWrapInfoBox2 { #RightFadeWrapInfoBox2 {
width: 90%; width: 90%;
border-left: 1.5px solid #00A0F3; border-left: 1.5px solid #00A0F3;
border-right: 1.5px solid #00A0F3; border-right: 1.5px solid #00A0F3;
@@ -292,43 +300,67 @@ p {
#00A0F3 60%, #00A0F3 60%,
transparent 95%) 1; transparent 95%) 1;
transform: translate(1ch, 0%) scale(1); transform: translate(1ch, 0%) scale(1);
} }
.fadeLeft { .fadeLeft {
mask-image: linear-gradient(to right, mask-image: linear-gradient(to right,
transparent 0%, transparent 0%,
black 1ch, black 1ch,
black calc(100% - 2ch), black calc(100% - 2ch),
transparent 100%); transparent 100%);
} }
#ScrollWrapGoal { #ScrollWrapGoal {
/* /*
width: 90%; width: 90%;
*/ */
} }
.scrollWrapName { .scrollWrapName {
} }
.scrollWrapW { .scrollWrapW {
width: fit-content; width: fit-content;
display: flex; display: flex;
} }
#ScrollWrapGoalW { #ScrollWrapGoalW {
} }
.hide { .hide {
display: none; display: none;
} }
.scrollAnim { .scrollAnim {
animation: myScroll linear infinite; animation: myScroll linear infinite;
} }
@keyframes myScroll { @keyframes myScroll {
0% {left: 0%; top: 0%;} 0% {left: 0%; top: 0%;}
42% {left: 0%; top: 0%;} 42% {left: 0%; top: 0%;}
100% {left: -54%; top: 0%;} 100% {left: -54%; top: 0%;}
} }
/*
*** Progres Bar Widget ***
*/
.widgetContainer {
max-height: 16vh;
max-width: 100vw;
position: relative;
text-align: center;
background-color: lightblue;
container-type: inline-size;
container-name: sidebar;
}
.layoutContainer {
height: clamp(64px, calc(.164*100vw), calc(.164*100vw));
width: clamp(36.563px, 100vw, 100vw);
position: relative;
text-align: center;
background-color: grey;
}