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

Add UI layout and placeholder graphic

Browse Source 
HTML:
- doc structure
- static placeholder content
- add fonts (VT323, Silkscreen)

CSS:
- full v1 styling
- dynamically scales content based on image size
- clean cutoff of overflow text for usernames and goal names
This commit is contained in:
RolimirKal
2025-10-30 13:55:12 -04:00
parent 47218deb87
commit 70c0b3984c
4 changed files with 221 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
index.html
View File

@@ -2,16 +2,69 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/css?family=VT323' rel='stylesheet'>
<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>
<div class="timer-box">
<div class="timer-time">
00:00
<main>
<div class='contentContainer'>
<img id='MainHeart' src='src/youve_got_mail_whiteheart.png'>
<div class='infoGroup'>
<div class='infoBox' id='InfoBox1'>
<h1 id='Timer'>
24:16
</h1>
<p id='TimerInfo'>
!subathon for details
</p>
</div>
<div class='infoBox' id='InfoBox2'>
<h2 id='GoalLabel'>
Current Goal:
</h2>
<h3 id='GoalName'>
Discord Watch Party + Puzzles
</h3>
<p id='GoalProgress'>
1524/3000 Points
</p>
</div>
<div class='infoBox' id='InfoBox3'>
<h2 id='TopUsers'>
Top 3 Gifters:
</h2>
<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>
</main>
</body>
</html>
</html>