diff --git a/index.html b/index.html index eda994f..7ef00bb 100644 --- a/index.html +++ b/index.html @@ -13,9 +13,53 @@
- +
+
+

+ Leaderboard: +

+
+
+

+ 1 +

+
+
+

+ Usernamethatisverylong +

+
+
+
+
+

+ 2 +

+
+
+

+ Usernamethatisverylong +

+
+
+
+
+

+ 3 +

+
+
+

+ Usernamethatisverylong +

+
+
+
+
+
+

00:00 @@ -25,49 +69,22 @@

-

+

Next Goal: -

-

- Discord Watch Party + Puzzles -

+

+
+
+

+ Discord Watch Party + Puzzles +

+
+

1234/5678

-
-

- Leaderboard -

-
-
-

- 1 -

-

- Usernamethatisverylong -

-
-
-

- 2 -

-

- Usernamethatisverylong -

-
-
-

- 3 -

-

- Usernamethatisverylong -

-
-
-
diff --git a/no-bold.css b/no-bold.css new file mode 100644 index 0000000..ad1a73c --- /dev/null +++ b/no-bold.css @@ -0,0 +1,222 @@ +:root { + --time-color: #453960; + --details-color: #403060; + --background-color: transparent; +} + +* { + box-sizing: border-box; +} + +html, body { + height: 100%; + margin: 0; + padding: 0; + font-family: 'Inter', sans-serif; + background-color: var(--background-color); + overflow: hidden; +} + +main { + font-family: "Silkscreen", sans-serif; + font-weight: 400; + font-style: normal; + color: #EA4045; + height: 100%; +} + +h1 { + margin: 0; + font-size: 3.4em; + color: #404145; + font-weight: normal; +} + +h2 { + margin: 0; + font-size: 1.4em; + color: #404145; + font-weight: normal; +} + +h3 { + margin: 0; + font-size: 1em; + color: #404145; + font-weight: normal; +} + +p { + margin: 0; + font-size: 1em; +} + + .contentContainer { + height: fit-content; + width: fit-content; + position: relative; + text-align: center; + } + + #MainHeart { + max-height: 100vh; + max-width: 100vw; + } + +.infoWrap { + container-type: size; + height: 100%; + width: 100%; + position: absolute; + left: 0px; + top: 0px; + display: grid; + grid-template-columns: 56% 34% 1fr; + /* + grid-template-rows: 11% 28% 16% 16% 1fr; + */ + grid-template-rows: 11% 1fr 29%; + place-items: center; + text-wrap: nowrap; +} + +.infoGroup { + display: block; + height: 100%; + width: 100%; + grid-column-start: 2; + grid-column-end: 2; + grid-row-start: 2; + grid-row-end: 2; +} + +.infoBox { + height: auto; + width: 100%; + /* + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-auto-rows: auto; + place-items: center; + */ + font-size: 4cqh; +} + +#InfoBox1 { + margin-top: 4cqh; + /* + justify-self: left; + align-self: stretch; + */ + /* + transform: translate(-8%, 5%); + */ +} + +#InfoBox2 { + /* + display: grid; + width: 100%; + justify-self: left; + align-self: stretch; + */ + transform: translate(0%, -12%); +} + +#InfoBox3 { + grid-template-columns: 1fr; + grid-template-rows: 1fr 23% 23% 23%; + transform: translate(0%, -16%) scale(1, 1); + /* + justify-self: left; + align-self: stretch; + transform: translate(0%, -32%); + */ +} + +#Timer { + transform: translate(-9%, 3%) scale(.95, 1.2); +} + +#TimerInfo { + transform: translate(0%, -60%); + font-size: 1em; + display: none; +} + +#GoalLabel { + transform: translate(5%, 0%) scale(1.05, 1.2); +} + +#GoalName { + width: 100%; + transform: translate(8%, -10%) scale(1, 1.4); + color: #32B993; + text-wrap: nowrap; + overflow: hidden; + mask-image: linear-gradient(to right, black 85%, transparent 100%); +} + +#GoalProgressWrap { + width: fit-content; + padding-left: .8cqh; + padding-right: .8cqh; + transform: translate(7%, 0%) scale(1, 1); + border-radius: 3cqh; + border: .4cqh solid; + border-color: #404145; + margin: 0 auto 0 auto; +} + +#GoalProgress { + transform: translate(0%, -8%) scale(1, 1.4); + font-size: 1.3em; + text-align: center; + /* + font-weight: bold; + */ +} + +#TopUsers { + transform: translate(6%, 0%) scale(1.15, 1.2); + font-weight: normal; + font-size: 1.1em; +} + +.giftUserWrap { + transform: translate(18%, -8%) scale(1, 1); +} + +.giftUserRow { + width: 100%; + display: grid; + grid-template-columns: 8% 1fr; + grid-template-rows: 1fr; + text-wrap: nowrap; + overflow: hidden; + text-align: left; + justify-self: left; + text-align: center; + transform: translate(0%, 0%) scale(1, 1.2); + font-size: 1.4em; + line-height: 90%; +} + +.giftUserName { + margin-left: 0%; + color: #32B993; + text-align: left; +} + +#GiftUserName1 { + width: 24cqw; + mask-image: linear-gradient(to right, black 85%, transparent 100%); +} +#GiftUserName2 { + width: 20cqw; + mask-image: linear-gradient(to right, black 75%, transparent 100%); +} +#GiftUserName3 { + width: 14cqw; + mask-image: linear-gradient(to right, black 60%, transparent 100%); +} \ No newline at end of file diff --git a/no-bold.html b/no-bold.html new file mode 100644 index 0000000..40767df --- /dev/null +++ b/no-bold.html @@ -0,0 +1,76 @@ + + + + + + + + + + + v2 onefont + + +
+
+ +
+
+
+

+ 00:00 +

+

+ !subathon for details +

+
+
+

+ Next Goal: +

+

+ Discord Watch Party + Puzzles +

+
+

+ 1234/5678 +

+
+
+
+

+ Leaderboard: +

+
+
+

+ 1 +

+

+ Usernamethatisverylong +

+
+
+

+ 2 +

+

+ Usernamethatisverylong +

+
+
+

+ 3 +

+

+ Usernamethatisverylong +

+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/timer.css b/timer.css index 6e4cec7..1a6a2db 100644 --- a/timer.css +++ b/timer.css @@ -14,6 +14,7 @@ html, body { padding: 0; font-family: 'Inter', sans-serif; background-color: var(--background-color); + background-color: transparent; overflow: hidden; } @@ -36,6 +37,7 @@ h2 { margin: 0; font-size: 1.4em; color: #404145; + font-weight: normal; } h3 { @@ -47,19 +49,26 @@ h3 { p { margin: 0; - font-size: 1em; + font-size: 1.4em; + line-height: 95%; } - .contentContainer { +.contentContainer { height: fit-content; width: fit-content; position: relative; text-align: center; } - #MainHeart { +.mainHeart { max-height: 100vh; - max-width: 100vw; + max-width: 75vw; + } + + #SecondHeart { + position: absolute; + top: 0px; + left: 0px; } .infoWrap { @@ -71,16 +80,12 @@ p { top: 0px; display: grid; grid-template-columns: 56% 34% 1fr; - /* - grid-template-rows: 11% 28% 16% 16% 1fr; - */ grid-template-rows: 11% 1fr 29%; place-items: center; text-wrap: nowrap; } .infoGroup { - display: block; height: 100%; width: 100%; grid-column-start: 2; @@ -92,68 +97,50 @@ p { .infoBox { height: auto; width: 100%; - /* - display: grid; - grid-template-columns: repeat(1, 1fr); - grid-auto-rows: auto; - place-items: center; - */ font-size: 4cqh; + transform: translate(12%, -68%); } #InfoBox1 { - margin-top: 4cqh; - /* - justify-self: left; - align-self: stretch; - */ - /* - transform: translate(-8%, 5%); - */ } #InfoBox2 { - /* - display: grid; - width: 100%; - justify-self: left; - align-self: stretch; - */ - transform: translate(0%, -12%); + transform: translate(-1%, -88%); } #InfoBox3 { - grid-template-columns: 1fr; - grid-template-rows: 1fr 23% 23% 23%; - transform: translate(0%, -16%) scale(1, 1); - /* - justify-self: left; - align-self: stretch; - transform: translate(0%, -32%); - */ + width: 110%; + position: relative; + transform: translate(88%, 25%) scale(1, 1); + border-radius: 3cqh; + border: .4cqh solid; + border-color: #00A0F3; + background-color: white; + } #Timer { - transform: translate(-9%, 3%) scale(.95, 1.2); + margin-top: 10%; + margin-bottom: 2%; + transform: translate(-7.5%, 3%) scale(.95, 1.2); } #TimerInfo { transform: translate(0%, -60%); - font-size: 1em; display: none; } #GoalLabel { - transform: translate(5%, 0%) scale(1.05, 1.2); + transform: translate(5%, 0%) scale(1); + color: #404145; } #GoalName { - width: 100%; - transform: translate(8%, -10%) scale(1, 1.4); + width: fit-content; + position: relative; color: #32B993; text-wrap: nowrap; - overflow: hidden; - mask-image: linear-gradient(to right, black 85%, transparent 100%); + animation: myScroll 12s linear infinite; } #GoalProgressWrap { @@ -164,24 +151,23 @@ p { border-radius: 3cqh; border: .4cqh solid; border-color: #404145; - margin: 0 auto 0 auto; + margin: 0 auto .8cqh auto; } #GoalProgress { - transform: translate(0%, -8%) scale(1, 1.4); - font-size: 1.3em; + transform: translate(0%, -8%) scale(1); text-align: center; - font-weight: bold; } #TopUsers { - transform: translate(6%, 0%) scale(1.2, 1.2); + margin-bottom: 2%; + transform: translate(0%, 0%) scale(1); font-weight: normal; - font-size: 1.1em; + color: #404145; } .giftUserWrap { - transform: translate(18%, -8%) scale(1, 1); + transform: translate(11%, -8%) scale(1, 1); } .giftUserRow { @@ -191,29 +177,52 @@ p { grid-template-rows: 1fr; text-wrap: nowrap; overflow: hidden; - text-align: left; - justify-self: left; text-align: center; - transform: translate(0%, 0%) scale(1, 1.2); - font-size: 1.4em; - line-height: 90%; + transform: translate(0%, 0%) scale(1, 1); } .giftUserName { + width: fit-content; margin-left: 0%; + position: relative; color: #32B993; text-align: left; } #GiftUserName1 { - width: 24cqw; - mask-image: linear-gradient(to right, black 85%, transparent 100%); + animation: myScroll 9s linear infinite; } #GiftUserName2 { - width: 20cqw; - mask-image: linear-gradient(to right, black 75%, transparent 100%); + animation: myScroll 9s 3s linear infinite; } #GiftUserName3 { - width: 14cqw; - mask-image: linear-gradient(to right, black 60%, transparent 100%); + animation: myScroll 9s 6s linear infinite; +} + +.scrollWrap { + width: 100%; + mask-image: linear-gradient(to right, transparent 0%, black 5%, black 85%, transparent 100%); +} + +#ScrollWrapGoal { + transform: translate(8%, -10%) scale(1); +} + +.scrollWrapName { +} + +.scrollWrapW { + width: fit-content; +} + +#ScrollWrapGoalW { +} + +@keyframes myScroll { + 0% {left: 0%; top: 0%;} + 10% {left: 0%; top: 0%;} + 85% {left: -100%; top: 0%;} + 89.99% {left: -100%; top: 0%;} + 90% {left: 0%; top: 100%;} + 100% {left: 0%; top: 0%;} } \ No newline at end of file diff --git a/timer.js b/timer.js index e93c379..8f98264 100644 --- a/timer.js +++ b/timer.js @@ -111,16 +111,16 @@ class TimerRenderer { */ reset() { this.timer.textContent = "00:00"; - this.goal_label.textContent = "Current Goal:"; + this.goal_label.textContent = "Next Goal:"; this.goal_name.textContent = "Be awesome"; - this.goal_progress.textContent = "00/00 Points"; + this.goal_progress.textContent = "00/00"; - this.topusers_label.textContent = "Top 3 Gifters"; - this.topusers_user1_num.textContent = "1."; + this.topusers_label.textContent = "Leaderboard:"; + this.topusers_user1_num.textContent = "1"; this.topusers_user1_name.textContent = "Anonymous"; - this.topusers_user2_num.textContent = "2."; + this.topusers_user2_num.textContent = "2"; this.topusers_user2_name.textContent = "Anonymous"; - this.topusers_user3_num.textContent = "3."; + this.topusers_user3_num.textContent = "3"; this.topusers_user3_name.textContent = "Anonymous"; } @@ -167,7 +167,7 @@ class TimerRenderer { this.goal_name.textContent = name; // Bitwise OR done to convert floats to integers if needed - this.goal_progress.textContent = String(current | 0) + '/' + String(required | 0) + ' Points' + this.goal_progress.textContent = String(current | 0) + '/' + String(required | 0) } /** @@ -189,7 +189,7 @@ class TimerRenderer { render_users(users) { if (users.length >= 1) { - this.topusers_user1_num.textContent = "1."; + this.topusers_user1_num.textContent = "1"; this.topusers_user1_name.textContent = users[0].user_name; } else { this.topusers_user1_num.textContent = ""; @@ -197,7 +197,7 @@ class TimerRenderer { } if (users.length >= 2) { - this.topusers_user2_num.textContent = "2."; + this.topusers_user2_num.textContent = "2"; this.topusers_user2_name.textContent = users[1].user_name; } else { this.topusers_user2_num.textContent = ""; @@ -205,7 +205,7 @@ class TimerRenderer { } if (users.length >= 3) { - this.topusers_user3_num.textContent = "3."; + this.topusers_user3_num.textContent = "3"; this.topusers_user3_name.textContent = users[2].user_name; } else { this.topusers_user3_num.textContent = ""; diff --git a/uniform-font.css b/uniform-font.css new file mode 100644 index 0000000..b7c968d --- /dev/null +++ b/uniform-font.css @@ -0,0 +1,241 @@ +:root { + --time-color: #453960; + --details-color: #403060; + --background-color: transparent; +} + +* { + box-sizing: border-box; +} + +html, body { + height: 100%; + margin: 0; + padding: 0; + font-family: 'Inter', sans-serif; + background-color: var(--background-color); + overflow: hidden; +} + +main { + font-family: "Silkscreen", sans-serif; + font-weight: 400; + font-style: normal; + color: #EA4045; + height: 100%; +} + +h1 { + margin: 0; + font-size: 3.4em; + color: #404145; + font-weight: normal; +} + +h2 { + margin: 0; + font-size: 1.4em; + color: #404145; + font-weight: normal; +} + +h3 { + margin: 0; + font-size: 1em; + color: #404145; + font-weight: normal; +} + +p { + margin: 0; + font-size: 1.4em; + line-height: 95%; +} + + .contentContainer { + height: fit-content; + width: fit-content; + position: relative; + text-align: center; + } + + #MainHeart { + max-height: 100vh; + max-width: 100vw; + } + +.infoWrap { + container-type: size; + height: 100%; + width: 100%; + position: absolute; + left: 0px; + top: 0px; + display: grid; + grid-template-columns: 56% 34% 1fr; + /* + grid-template-rows: 11% 28% 16% 16% 1fr; + */ + grid-template-rows: 11% 1fr 29%; + place-items: center; + text-wrap: nowrap; +} + +.infoGroup { + display: block; + height: 100%; + width: 100%; + grid-column-start: 2; + grid-column-end: 2; + grid-row-start: 2; + grid-row-end: 2; +} + +.infoBox { + height: auto; + width: 100%; + /* + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-auto-rows: auto; + place-items: center; + */ + font-size: 4cqh; +} + +#InfoBox1 { + /* + justify-self: left; + align-self: stretch; + */ + /* + transform: translate(-8%, 5%); + */ +} + +#InfoBox2 { + /* + display: grid; + width: 100%; + justify-self: left; + align-self: stretch; + */ + transform: translate(0%, -12%); +} + +#InfoBox3 { + grid-template-columns: 1fr; + grid-template-rows: 1fr 23% 23% 23%; + transform: translate(0%, -16%) scale(1, 1); + /* + justify-self: left; + align-self: stretch; + transform: translate(0%, -32%); + */ +} + +#Timer { + margin-top: 10%; + transform: translate(-7.5%, 3%) scale(.95, 1.2); +} + +#TimerInfo { + transform: translate(0%, -60%); + /* uni + font-size: 1em; + */ + display: none; +} + +#GoalLabel { + transform: translate(5%, 0%) scale(1); + color: #404145; +} + +#GoalName { + width: 100%; + transform: translate(8%, -10%) scale(1); + color: #32B993; + text-wrap: nowrap; + overflow: hidden; + mask-image: linear-gradient(to right, black 85%, transparent 100%); +} + +#GoalProgressWrap { + width: fit-content; + padding-left: .8cqh; + padding-right: .8cqh; + transform: translate(7%, 0%) scale(1, 1); + border-radius: 3cqh; + border: .4cqh solid; + border-color: #404145; + margin: 0 auto .8cqh auto; +} + +#GoalProgress { + transform: translate(0%, -8%) scale(1); + /* uni + font-size: 1.3em; + */ + text-align: center; + /* + font-weight: bold; + */ +} + +#TopUsers { + transform: translate(0%, 0%) scale(1); + font-weight: normal; + color: #404145; + /* uni + font-size: 1.1em; + */ +} + +.giftUserWrap { + transform: translate(18%, -8%) scale(1, 1); +} + +.giftUserRow { + width: 100%; + display: grid; + grid-template-columns: 8% 1fr; + grid-template-rows: 1fr; + text-wrap: nowrap; + overflow: hidden; + text-align: left; + justify-self: left; + text-align: center; + transform: translate(0%, 0%) scale(1, 1); + /* uni + font-size: 1.4em; + */ + /* + line-height: 95%; + */ +} + +.giftUserName { + margin-left: 0%; + color: #32B993; + text-align: left; + /* + background-color: blue; + */ +} + +#GiftUserName1 { + width: 23.5cqw; + mask-image: linear-gradient(to right, black 80%, transparent 100%); +} +#GiftUserName2 { + width: 21.5cqw; + mask-image: linear-gradient(to right, black 75%, transparent 100%); + /* + background-color: red; + */ +} +#GiftUserName3 { + width: 18cqw; + mask-image: linear-gradient(to right, black 65%, transparent 100%); +} \ No newline at end of file diff --git a/uniform-font.html b/uniform-font.html new file mode 100644 index 0000000..060ea5e --- /dev/null +++ b/uniform-font.html @@ -0,0 +1,76 @@ + + + + + + + + + + + v2 onefont + + +
+
+ +
+
+
+

+ 00:00 +

+

+ !subathon for details +

+
+
+

+ Next Goal: +

+

+ Discord Watch Party + Puzzles +

+
+

+ 1234/5678 +

+
+
+
+

+ Leaderboard +

+
+
+

+ 1 +

+

+ Usernamethatisverylong +

+
+
+

+ 2 +

+

+ Usernamethatisverylong +

+
+
+

+ 3 +

+

+ Usernamethatisverylong +

+
+
+
+
+
+
+
+ + \ No newline at end of file