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">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<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" />
|
<link rel="stylesheet" href="timer.css" />
|
||||||
<script src="timer.js"></script>
|
<script src="timer.js"></script>
|
||||||
<title>Lilac Timer</title>
|
<title>Lilac Timer</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="timer-box">
|
<main>
|
||||||
<div class="timer-time">
|
<div class='contentContainer'>
|
||||||
00:00
|
<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>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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;
|
--background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: 'VT323', sans-serif;
|
font-family: 'Inter', sans-serif;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
.timer-box {
|
font-family: "VT323", monospace;
|
||||||
height: 175px;
|
|
||||||
width: 397px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timer-time {
|
|
||||||
font-size: clamp(6rem, 22vw, 16rem);
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: var(--time-color);
|
font-style: normal;
|
||||||
line-height: 1;
|
font-size: 1em;
|
||||||
|
color: #EA4045;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timer-details {
|
h1 {
|
||||||
display: fill;
|
margin: 0;
|
||||||
font-weight: 600;
|
font-size: 68cqh;
|
||||||
color: var(--details-color);
|
color: #404145;
|
||||||
font-size: 16px;
|
}
|
||||||
overflow-wrap: break-word;
|
|
||||||
|
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