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>
<main>
<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='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'>
<h1 id='Timer'>
00:00
@@ -25,49 +69,22 @@
</p>
</div>
<div class='infoBox' id='InfoBox2'>
<h2 id='GoalLabel'>
<p id='GoalLabel'>
Next Goal:
</h2>
<h3 id='GoalName'>
Discord Watch Party + Puzzles
</h3>
</p>
<div class='scrollWrap' id='ScrollWrapGoal'>
<div class='scrollWrapW' id='ScrollWrapGoalW'>
<p id='GoalName'>
Discord Watch Party + Puzzles
</p>
</div>
</div>
<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>