CarmiCoven/subathon-timer
2
0
Fork 0
forked from HoloTech/twitch-subathon-timer
Code Pull Requests Activity

Completed v3

Browse Source 
- layout change, reorganized elements and duplicated graphic to avoid using z-index which did not function in OBS browser sources - DO NOT REMOVE DUPLICATE HEART GRAPHIC -

- animation!!! + more wrappers to split up static vs dynamic effects

- temp legacy versions for easier comparisons (no-bold and uniform-font html+css)

- js content tweaks to maintain parity with layout template
This commit is contained in:
RolimirKal
2025-10-31 18:50:34 -04:00
parent 1f49e82035
commit 960c037362
7 changed files with 750 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
index.html
View File

@@ -13,9 +13,53 @@
<body> <body>
<main> <main>
<div class='contentContainer'> <div class='contentContainer'>
<img id='MainHeart' src='src/youve_got_mail_whiteheart.png'> <img class='mainHeart' src='src/youve_got_mail_whiteheart.png'>
<div class='infoWrap'> <div class='infoWrap'>
<div class='infoGroup'> <div class='infoGroup'>
<div class='infoBox' id='InfoBox3'>
<p id='TopUsers'>
Leaderboard:
</p>
<div class='giftUserWrap'>
<div class='giftUserRow' id='GiftUserRow1'>
<p class='giftUserNum' id='GiftUserNum1'>
1
</p>
<div class='scrollWrap' id='ScrollWrapName1'>
<div class='scrollWrapW' id='ScrollWrapNameW1'>
<p class='giftUserName'id='GiftUserName1'>
Usernamethatisverylong
</p>
</div>
</div>
</div>
<div class='giftUserRow' id='GiftUserRow2'>
<p class='giftUserNum' id='GiftUserNum2'>
2
</p>
<div class='scrollWrap' id='ScrollWrapName2'>
<div class='scrollWrapW' id='ScrollWrapNameW2'>
<p class='giftUserName'id='GiftUserName2'>
Usernamethatisverylong
</p>
</div>
</div>
</div>
<div class='giftUserRow' id='GiftUserRow3'>
<p class='giftUserNum' id='GiftUserNum3'>
3
</p>
<div class='scrollWrap' id='ScrollWrapName3'>
<div class='scrollWrapW' id='ScrollWrapNameW3'>
<p class='giftUserName'id='GiftUserName3'>
Usernamethatisverylong
</p>
</div>
</div>
</div>
</div>
</div>
<img class='mainHeart' id='SecondHeart' src='src/youve_got_mail_whiteheart.png'>
<div class='infoBox' id='InfoBox1'> <div class='infoBox' id='InfoBox1'>
<h1 id='Timer'> <h1 id='Timer'>
00:00 00:00
@@ -25,49 +69,22 @@
</p> </p>
</div> </div>
<div class='infoBox' id='InfoBox2'> <div class='infoBox' id='InfoBox2'>
<h2 id='GoalLabel'> <p id='GoalLabel'>
Next Goal: Next Goal:
</h2> </p>
<h3 id='GoalName'> <div class='scrollWrap' id='ScrollWrapGoal'>
Discord Watch Party + Puzzles <div class='scrollWrapW' id='ScrollWrapGoalW'>
</h3> <p id='GoalName'>
Discord Watch Party + Puzzles
</p>
</div>
</div>
<div id='GoalProgressWrap'> <div id='GoalProgressWrap'>
<p id='GoalProgress'> <p id='GoalProgress'>
1234/5678 1234/5678
</p> </p>
</div> </div>
</div> </div>
<div class='infoBox' id='InfoBox3'>
<h2 id='TopUsers'>
Leaderboard
</h2>
<div class='giftUserWrap'>
<div class='giftUserRow' id='GiftUserRow1'>
<p class='giftUserNum' id='GiftUserNum1'>
1
</p>
<p class='giftUserName'id='GiftUserName1'>
Usernamethatisverylong
</p>
</div>
<div class='giftUserRow' id='GiftUserRow2'>
<p class='giftUserNum' id='GiftUserNum2'>
2
</p>
<p class='giftUserName'id='GiftUserName2'>
Usernamethatisverylong
</p>
</div>
<div class='giftUserRow' id='GiftUserRow3'>
<p class='giftUserNum' id='GiftUserNum3'>
3
</p>
<p class='giftUserName'id='GiftUserName3'>
Usernamethatisverylong
</p>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

222
no-bold.css Normal file
View File

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

76
no-bold.html Normal file
View File

@@ -0,0 +1,76 @@
<!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="no-bold.css" />
<script src="timer.js"></script>
<title>v2 onefont</title>
</head>
<body>
<main>
<div class='contentContainer'>
<img id='MainHeart' src='src/youve_got_mail_whiteheart.png'>
<div class='infoWrap'>
<div class='infoGroup'>
<div class='infoBox' id='InfoBox1'>
<h1 id='Timer'>
00:00
</h1>
<p id='TimerInfo'>
!subathon for details
</p>
</div>
<div class='infoBox' id='InfoBox2'>
<h2 id='GoalLabel'>
Next Goal:
</h2>
<h3 id='GoalName'>
Discord Watch Party + Puzzles
</h3>
<div id='GoalProgressWrap'>
<p id='GoalProgress'>
1234/5678
</p>
</div>
</div>
<div class='infoBox' id='InfoBox3'>
<h2 id='TopUsers'>
Leaderboard:
</h2>
<div class='giftUserWrap'>
<div class='giftUserRow' id='GiftUserRow1'>
<p class='giftUserNum' id='GiftUserNum1'>
1
</p>
<p class='giftUserName'id='GiftUserName1'>
Usernamethatisverylong
</p>
</div>
<div class='giftUserRow' id='GiftUserRow2'>
<p class='giftUserNum' id='GiftUserNum2'>
2
</p>
<p class='giftUserName'id='GiftUserName2'>
Usernamethatisverylong
</p>
</div>
<div class='giftUserRow' id='GiftUserRow3'>
<p class='giftUserNum' id='GiftUserNum3'>
3
</p>
<p class='giftUserName'id='GiftUserName3'>
Usernamethatisverylong
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>

133
timer.css
View File

@@ -14,6 +14,7 @@ html, body {
padding: 0; padding: 0;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
background-color: var(--background-color); background-color: var(--background-color);
background-color: transparent;
overflow: hidden; overflow: hidden;
} }
@@ -36,6 +37,7 @@ h2 {
margin: 0; margin: 0;
font-size: 1.4em; font-size: 1.4em;
color: #404145; color: #404145;
font-weight: normal;
} }
h3 { h3 {
@@ -47,19 +49,26 @@ h3 {
p { p {
margin: 0; margin: 0;
font-size: 1em; font-size: 1.4em;
line-height: 95%;
} }
.contentContainer { .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: 100vw; max-width: 75vw;
}
#SecondHeart {
position: absolute;
top: 0px;
left: 0px;
} }
.infoWrap { .infoWrap {
@@ -71,16 +80,12 @@ p {
top: 0px; top: 0px;
display: grid; display: grid;
grid-template-columns: 56% 34% 1fr; grid-template-columns: 56% 34% 1fr;
/*
grid-template-rows: 11% 28% 16% 16% 1fr;
*/
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 {
display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
grid-column-start: 2; grid-column-start: 2;
@@ -92,68 +97,50 @@ p {
.infoBox { .infoBox {
height: auto; height: auto;
width: 100%; width: 100%;
/*
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: auto;
place-items: center;
*/
font-size: 4cqh; font-size: 4cqh;
transform: translate(12%, -68%);
} }
#InfoBox1 { #InfoBox1 {
margin-top: 4cqh;
/*
justify-self: left;
align-self: stretch;
*/
/*
transform: translate(-8%, 5%);
*/
} }
#InfoBox2 { #InfoBox2 {
/* transform: translate(-1%, -88%);
display: grid;
width: 100%;
justify-self: left;
align-self: stretch;
*/
transform: translate(0%, -12%);
} }
#InfoBox3 { #InfoBox3 {
grid-template-columns: 1fr; width: 110%;
grid-template-rows: 1fr 23% 23% 23%; position: relative;
transform: translate(0%, -16%) scale(1, 1); transform: translate(88%, 25%) scale(1, 1);
/* border-radius: 3cqh;
justify-self: left; border: .4cqh solid;
align-self: stretch; border-color: #00A0F3;
transform: translate(0%, -32%); background-color: white;
*/
} }
#Timer { #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 { #TimerInfo {
transform: translate(0%, -60%); transform: translate(0%, -60%);
font-size: 1em;
display: none; display: none;
} }
#GoalLabel { #GoalLabel {
transform: translate(5%, 0%) scale(1.05, 1.2); transform: translate(5%, 0%) scale(1);
color: #404145;
} }
#GoalName { #GoalName {
width: 100%; width: fit-content;
transform: translate(8%, -10%) scale(1, 1.4); position: relative;
color: #32B993; color: #32B993;
text-wrap: nowrap; text-wrap: nowrap;
overflow: hidden; animation: myScroll 12s linear infinite;
mask-image: linear-gradient(to right, black 85%, transparent 100%);
} }
#GoalProgressWrap { #GoalProgressWrap {
@@ -164,24 +151,23 @@ p {
border-radius: 3cqh; border-radius: 3cqh;
border: .4cqh solid; border: .4cqh solid;
border-color: #404145; border-color: #404145;
margin: 0 auto 0 auto; margin: 0 auto .8cqh auto;
} }
#GoalProgress { #GoalProgress {
transform: translate(0%, -8%) scale(1, 1.4); transform: translate(0%, -8%) scale(1);
font-size: 1.3em;
text-align: center; text-align: center;
font-weight: bold;
} }
#TopUsers { #TopUsers {
transform: translate(6%, 0%) scale(1.2, 1.2); margin-bottom: 2%;
transform: translate(0%, 0%) scale(1);
font-weight: normal; font-weight: normal;
font-size: 1.1em; color: #404145;
} }
.giftUserWrap { .giftUserWrap {
transform: translate(18%, -8%) scale(1, 1); transform: translate(11%, -8%) scale(1, 1);
} }
.giftUserRow { .giftUserRow {
@@ -191,29 +177,52 @@ p {
grid-template-rows: 1fr; grid-template-rows: 1fr;
text-wrap: nowrap; text-wrap: nowrap;
overflow: hidden; overflow: hidden;
text-align: left;
justify-self: left;
text-align: center; text-align: center;
transform: translate(0%, 0%) scale(1, 1.2); transform: translate(0%, 0%) scale(1, 1);
font-size: 1.4em;
line-height: 90%;
} }
.giftUserName { .giftUserName {
width: fit-content;
margin-left: 0%; margin-left: 0%;
position: relative;
color: #32B993; color: #32B993;
text-align: left; text-align: left;
} }
#GiftUserName1 { #GiftUserName1 {
width: 24cqw; animation: myScroll 9s linear infinite;
mask-image: linear-gradient(to right, black 85%, transparent 100%);
} }
#GiftUserName2 { #GiftUserName2 {
width: 20cqw; animation: myScroll 9s 3s linear infinite;
mask-image: linear-gradient(to right, black 75%, transparent 100%);
} }
#GiftUserName3 { #GiftUserName3 {
width: 14cqw; animation: myScroll 9s 6s linear infinite;
mask-image: linear-gradient(to right, black 60%, transparent 100%); }
.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%;}
} }

20
timer.js
View File

@@ -111,16 +111,16 @@ class TimerRenderer {
*/ */
reset() { reset() {
this.timer.textContent = "00:00"; 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_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_label.textContent = "Leaderboard:";
this.topusers_user1_num.textContent = "1."; this.topusers_user1_num.textContent = "1";
this.topusers_user1_name.textContent = "Anonymous"; 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_user2_name.textContent = "Anonymous";
this.topusers_user3_num.textContent = "3."; this.topusers_user3_num.textContent = "3";
this.topusers_user3_name.textContent = "Anonymous"; this.topusers_user3_name.textContent = "Anonymous";
} }
@@ -167,7 +167,7 @@ class TimerRenderer {
this.goal_name.textContent = name; this.goal_name.textContent = name;
// Bitwise OR done to convert floats to integers if needed // 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) { render_users(users) {
if (users.length >= 1) { 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; this.topusers_user1_name.textContent = users[0].user_name;
} else { } else {
this.topusers_user1_num.textContent = ""; this.topusers_user1_num.textContent = "";
@@ -197,7 +197,7 @@ class TimerRenderer {
} }
if (users.length >= 2) { 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; this.topusers_user2_name.textContent = users[1].user_name;
} else { } else {
this.topusers_user2_num.textContent = ""; this.topusers_user2_num.textContent = "";
@@ -205,7 +205,7 @@ class TimerRenderer {
} }
if (users.length >= 3) { 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; this.topusers_user3_name.textContent = users[2].user_name;
} else { } else {
this.topusers_user3_num.textContent = ""; this.topusers_user3_num.textContent = "";

241
uniform-font.css Normal file
View File

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

76
uniform-font.html Normal file
View File

@@ -0,0 +1,76 @@
<!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="uniform-font.css" />
<script src="timer.js"></script>
<title>v2 onefont</title>
</head>
<body>
<main>
<div class='contentContainer'>
<img id='MainHeart' src='src/youve_got_mail_whiteheart.png'>
<div class='infoWrap'>
<div class='infoGroup'>
<div class='infoBox' id='InfoBox1'>
<h1 id='Timer'>
00:00
</h1>
<p id='TimerInfo'>
!subathon for details
</p>
</div>
<div class='infoBox' id='InfoBox2'>
<p id='GoalLabel'>
Next Goal:
</p>
<p id='GoalName'>
Discord Watch Party + Puzzles
</p>
<div id='GoalProgressWrap'>
<p id='GoalProgress'>
1234/5678
</p>
</div>
</div>
<div class='infoBox' id='InfoBox3'>
<p id='TopUsers'>
Leaderboard
</p>
<div class='giftUserWrap'>
<div class='giftUserRow' id='GiftUserRow1'>
<p class='giftUserNum' id='GiftUserNum1'>
1
</p>
<p class='giftUserName'id='GiftUserName1'>
Usernamethatisverylong
</p>
</div>
<div class='giftUserRow' id='GiftUserRow2'>
<p class='giftUserNum' id='GiftUserNum2'>
2
</p>
<p class='giftUserName'id='GiftUserName2'>
Usernamethatisverylong
</p>
</div>
<div class='giftUserRow' id='GiftUserRow3'>
<p class='giftUserNum' id='GiftUserNum3'>
3
</p>
<p class='giftUserName'id='GiftUserName3'>
Usernamethatisverylong
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>