forked from HoloTech/twitch-subathon-timer
Add UI layout and placeholder graphic
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:
61
index.html
61
index.html
@@ -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>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/youve_got_mail_screenheart.png
Normal file
BIN
src/youve_got_mail_screenheart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 517 KiB |
BIN
src/youve_got_mail_whiteheart.png
Normal file
BIN
src/youve_got_mail_whiteheart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 481 KiB |
180
timer.css
180
timer.css
@@ -4,33 +4,177 @@
|
||||
--background-color: transparent;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'VT323', sans-serif;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--background-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.timer-box {
|
||||
height: 175px;
|
||||
width: 397px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.timer-time {
|
||||
font-size: clamp(6rem, 22vw, 16rem);
|
||||
main {
|
||||
font-family: "VT323", monospace;
|
||||
font-weight: 400;
|
||||
color: var(--time-color);
|
||||
line-height: 1;
|
||||
font-style: normal;
|
||||
font-size: 1em;
|
||||
color: #EA4045;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.timer-details {
|
||||
display: fill;
|
||||
font-weight: 600;
|
||||
color: var(--details-color);
|
||||
font-size: 16px;
|
||||
overflow-wrap: break-word;
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 68cqh;
|
||||
color: #404145;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 40cqh;
|
||||
color: #404145;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: "Silkscreen", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
margin: 0;
|
||||
font-size: 16cqh;
|
||||
color: #404145;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-family: "Silkscreen", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 20cqh;
|
||||
}
|
||||
|
||||
.contentContainer {
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#MainHeart {
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.infoGroup {
|
||||
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;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
container-type: size;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
grid-auto-rows: auto;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#InfoBox1 {
|
||||
width: 100%;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 2;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 2;
|
||||
justify-self: left;
|
||||
align-self: stretch;
|
||||
transform: translate(-8%, 5%);
|
||||
}
|
||||
|
||||
#InfoBox2 {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 2;
|
||||
grid-row-start: 3;
|
||||
grid-row-end: 3;
|
||||
justify-self: left;
|
||||
align-self: stretch;
|
||||
transform: translate(6%, -24%);
|
||||
}
|
||||
|
||||
#InfoBox3 {
|
||||
width: 100%;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 2;
|
||||
grid-row-start: 4;
|
||||
grid-row-end: 4;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 23% 23% 23%;
|
||||
justify-self: left;
|
||||
align-self: stretch;
|
||||
transform: translate(0%, -32%);
|
||||
}
|
||||
|
||||
#TimerInfo {
|
||||
transform: translate(0%, -175%);
|
||||
font-size: 9cqh;
|
||||
}
|
||||
|
||||
#GoalLabel {
|
||||
transform: translate(0%, -20%);
|
||||
}
|
||||
|
||||
#GoalName {
|
||||
width: 85%;
|
||||
transform: translate(10%, -110%);
|
||||
color: #32B993;
|
||||
text-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
mask-image: linear-gradient(to right, black 70%, transparent 100%);
|
||||
}
|
||||
|
||||
#GoalProgress {
|
||||
transform: translate(0%, -75%);
|
||||
border-radius: 8cqh;
|
||||
border: 2cqh solid;
|
||||
border-color: #404145;
|
||||
}
|
||||
|
||||
.giftUserRow {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 10% 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
text-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
justify-self: left;
|
||||
transform: translate(18%, 0%);
|
||||
}
|
||||
|
||||
.giftUserName {
|
||||
margin-left: 0%;
|
||||
color: #32B993;
|
||||
}
|
||||
|
||||
#GiftUserName1 {
|
||||
width: 54%;
|
||||
mask-image: linear-gradient(to right, black 70%, transparent 100%);
|
||||
}
|
||||
#GiftUserName2 {
|
||||
width: 46%;
|
||||
mask-image: linear-gradient(to right, black 70%, transparent 100%);
|
||||
}
|
||||
#GiftUserName3 {
|
||||
width: 38%;
|
||||
mask-image: linear-gradient(to right, black 70%, transparent 100%);
|
||||
}
|
||||
Reference in New Issue
Block a user