From 31bc26c72f15f1d391204d653ae7fc028274ebf7 Mon Sep 17 00:00:00 2001
From: RolimirKal <rolimirkal21@gmail.com>
Date: Fri, 31 Oct 2025 10:43:14 -0400
Subject: [PATCH] Completed v2

- aligned elements to graphic

- minimized wasted space (lots of small manual adjustments)

- extra wrappers for better formatting

- tested various text lengths to ensure static elements sizing
---
 index.html | 52 +++++++++++++++++++++++++------------------------
 timer.css  | 57 +++++++++++++++++++++++++++++-------------------------
 2 files changed, 58 insertions(+), 51 deletions(-)

diff --git a/index.html b/index.html
index bb9e324..eda994f 100644
--- a/index.html
+++ b/index.html
@@ -33,37 +33,39 @@
               </h3>
               <div id='GoalProgressWrap'>
                 <p id='GoalProgress'>
-                  0000/0000 Points
+                  1234/5678
                 </p>
               </div>
             </div>
             <div class='infoBox' id='InfoBox3'>
               <h2 id='TopUsers'>
-                Top 3:
+                Leaderboard
               </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 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>
diff --git a/timer.css b/timer.css
index 574ae52..6e4cec7 100644
--- a/timer.css
+++ b/timer.css
@@ -125,6 +125,7 @@ p {
 #InfoBox3 {
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 23% 23% 23%;
+  transform: translate(0%, -16%) scale(1, 1);
   /*
   justify-self: left;
   align-self: stretch;
@@ -147,68 +148,72 @@ p {
 }
 
 #GoalName {
-  width: 95%;
+  width: 100%;
   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%);
+  mask-image: linear-gradient(to right, black 85%, transparent 100%);
 }
 
 #GoalProgressWrap {
   width: fit-content;
-  padding-left: .5cqh;
-  padding-right: .5cqh;
-  transform: translate(6%, 0%) scale(1, 1.2);
+  padding-left: .8cqh;
+  padding-right: .8cqh;
+  transform: translate(7%, 0%) scale(1, 1);
   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;
+  transform: translate(0%, -8%) scale(1, 1.4);
+  font-size: 1.3em;
   text-align: center;
-  margin: 0 auto 0 auto;
-  */
+  font-weight: bold;
+}
+
+#TopUsers {
+  transform: translate(6%, 0%) scale(1.2, 1.2);
+  font-weight: normal;
+  font-size: 1.1em;
+}
+
+.giftUserWrap {
+  transform: translate(18%, -8%) scale(1, 1);
 }
 
 .giftUserRow {
   width: 100%;
   display: grid;
-  grid-template-columns: 10% 1fr;
+  grid-template-columns: 8% 1fr;
   grid-template-rows: 1fr;
   text-wrap: nowrap;
   overflow: hidden;
   text-align: left;
   justify-self: left;
-  transform: translate(0%, 0%);
+  text-align: center;
+  transform: translate(0%, 0%) scale(1, 1.2);
+  font-size: 1.4em;
+  line-height: 90%;
 }
 
 .giftUserName {
   margin-left: 0%;
   color: #32B993;
+  text-align: left;
 }
 
 #GiftUserName1 {
-  width: 54%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  width: 24cqw;
+  mask-image: linear-gradient(to right, black 85%, transparent 100%);
 }
 #GiftUserName2 {
-  width: 46%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  width: 20cqw;
+  mask-image: linear-gradient(to right, black 75%, transparent 100%);
 }
 #GiftUserName3 {
-  width: 38%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  width: 14cqw;
+  mask-image: linear-gradient(to right, black 60%, transparent 100%);
 }
\ No newline at end of file