Quick-push checkpoint

- messy, under renovations - IDs for important content (timer, goal progress, username elements) should be final
Scaling method and structure refactor
2025-10-31 07:34:08 -04:00 · 2025-10-31 05:48:40 -04:00 · 2025-10-31 04:15:21 -04:00 · 2025-10-30 13:55:12 -04:00 · 2025-10-30 23:48:42 +10:00 · 2025-10-30 19:42:30 +10:00
5 changed files with 259 additions and 24 deletions
--- a/index.html
+++ b/index.html
@@ -2,16 +2,73 @@
 <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="timer.css" />
    <script src="timer.js"></script>
-    <title>Croccy Timer</title>
+    <title>v2 onefont</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='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'>
+                  0000/0000 Points
+                </p>
+              </div>
+            </div>
+            <div class='infoBox' id='InfoBox3'>
+              <h2 id='TopUsers'>
+                Top 3:
+              </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>
-</html>
+</html>
--- a/src/youve_got_mail_screenheart.png
+++ b/src/youve_got_mail_screenheart.png
--- a/src/youve_got_mail_whiteheart.png
+++ b/src/youve_got_mail_whiteheart.png
--- a/timer.css
+++ b/timer.css
@@ -4,6 +4,10 @@
  --background-color: transparent;
 }

+* {
+  box-sizing: border-box;
+}
+
 html, body {
  height: 100%;
  margin: 0;
@@ -13,24 +17,198 @@ html, body {
  overflow: hidden;
 }

-
-.timer-box {
-  height: 175px;
-  width: 397px;
-  padding: 5px;
-}
-
-.timer-time {
-  font-size: clamp(6rem, 22vw, 16rem);
+main {
+  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
-  color: var(--time-color);
-  line-height: 1;
+  font-style: normal;
+  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: 3.4em;
+  color: #404145;
+  font-weight: normal;
 }
+
+h2 {
+  margin: 0;
+  font-size: 1.4em;
+  color: #404145;
+}
+
+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%;
+  /*
+  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: 95%;
+  transform: translate(8%, -10%) scale(1, 1.4);
+  color: #32B993;
+  text-wrap: nowrap;
+  overflow: hidden;
+  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+}
+
+#GoalProgressWrap {
+  width: fit-content;
+  padding-left: .5cqh;
+  padding-right: .5cqh;
+  transform: translate(6%, 0%) scale(1, 1.2);
+  border-radius: 3cqh;
+  border: .4cqh solid;
+  border-color: #404145;
+  font-size: .9em;
+  text-align: center;
+  margin: 0 auto 0 auto;
+}
+
+#GoalProgress {
+  /*
+  width: fit-content;
+  padding-left: .5cqh;
+  padding-right: .5cqh;
+  transform: translate(6%, 0%) scale(1, 1.2);
+  border-radius: 3cqh;
+  border: .4cqh solid;
+  border-color: #404145;
+  font-size: .9em;
+  text-align: center;
+  margin: 0 auto 0 auto;
+  */
+}
+
+.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(0%, 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%);
+}
--- a/timer.js
+++ b/timer.js
@@ -1,5 +1,5 @@
 window.addEventListener("DOMContentLoaded", () => {
-  const websocket = new WebSocket("wss://izashi.thewisewolf.dev/tracker/timer/ws");
+  const websocket = new WebSocket("wss://lilac.thewisewolf.dev/tracker/timer/ws");

  websocket.addEventListener("open", () => {
    communicate(websocket);
Author	SHA1	Message	Date
RolimirKal	9544579ebe	Quick-push checkpoint - messy, under renovations - IDs for important content (timer, goal progress, username elements) should be final	2025-10-31 07:34:08 -04:00
RolimirKal	f8bce7a50c	Scaling method and structure refactor - Unify scaling method based on image height instead of individual elements for better iteration control. - Restructure layout method to reduce reliance on manual grid definitions, remove unnecessary grid blocks, and improve dynamic layout for simpler iteration - Breaks layout, needs new polish pass	2025-10-31 05:48:40 -04:00
RolimirKal	b1fb0299d2	v2-Init Create branch and rollback point for v2 prototyping	2025-10-31 04:15:21 -04:00
RolimirKal	70c0b3984c	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	2025-10-30 13:55:12 -04:00
Interitio	47218deb87	Change font to VT323	2025-10-30 23:48:42 +10:00
Interitio	df6ce48681	Update name	2025-10-30 19:42:30 +10:00
Interitio	90c8774011	Update websocket URL	2025-10-30 19:20:39 +10:00