final commit of the day

anthonyhuang07 · May 8, 2024 · 1349435 · 1349435
1 parent c6fff9b
commit 1349435
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
     <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=Rubik&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
 
     <link rel="icon" type="image/x-icon" href="https://i.imgur.com/WB8I5Hx.png">
 
@@ -68,12 +69,12 @@ <h3>Pomodoro</h3>
                                 <div class="inputTime">
                                     <div>
                                         <input type="number" id="pomoinput" value="25" min="0">
-                                        <input class="unit" value="mins" disabled>
+                                        <div class="unit" onclick="focusInput('pomoinput')">mins</div>
                                     </div>
                                     <div>
                                         <input title="Pomodoro Seconds" type="number" id="pomoinputsec" value="0"
                                             min="0" max="59">
-                                        <input class="unit" value="mins" disabled>
+                                        <div class="unit" onclick="focusInput('pomoinputsec')">secs</div>
                                     </div>
                                 </div>
                             </div>
@@ -83,12 +84,12 @@ <h3>Short Break</h3>
                                     <div>
                                         <input title="Short Break Minutes" type="number" id="shortinput" value="5"
                                             min="0">
-                                        <div class="unit">mins</div>
+                                        <div class="unit" onclick="focusInput('shortinput')">mins</div>
                                     </div>
                                     <div>
                                         <input title="Short Break Seconds" type="number" id="shortinputsec" value="0"
                                             min="0" max="59">
-                                        <div class="unit">secs</div>
+                                        <div class="unit" onclick="focusInput('shortinputsec')">secs</div>
                                     </div>
                                 </div>
                             </div>
@@ -98,12 +99,12 @@ <h3>Long Break</h3>
                                     <div>
                                         <input title="Long Break Minutes" type="number" id="longinput" value="15"
                                             min="0">
-                                        <div class="unit">mins</div>
+                                        <div class="unit" onclick="focusInput('longinput')">mins</div>
                                     </div>
                                     <div>
                                         <input title="Long Break Seconds" type="number" id="longinputsec" value="0"
                                             min="0" max="59">
-                                        <div class="unit">secs</div>
+                                        <div class="unit" onclick="focusInput('longinputsec')">secs</div>
                                     </div>
                                 </div>
                             </div>

diff --git a/src/main.css b/src/main.css
@@ -72,6 +72,12 @@ main h1 {
 
 main h2 {
     font-size: 2em;
+    font-weight: 650;
+}
+
+main h3 {
+    margin-bottom: 0.5rem;
+    font-weight: 500;
 }
 
 main button {
@@ -151,11 +157,11 @@ i {
     border-radius: 1rem;
     width: 60%;
     height: 80%;
-    font-family: 'Rubik', sans-serif;
     transition: display 0.5s;
     animation-name: menuAppear;
     animation-duration: 0.75s;
     animation-timing-function: ease;
+    font-family: "Inter", sans-serif;
 }
 
 @keyframes menuAppear {
@@ -178,7 +184,7 @@ i {
 #form button {
     text-align: center;
     font-size: 1.25em;
-    font-family: 'Rubik', sans-serif;
+    font-family: "Inter", sans-serif;
     border-radius: 1000rem;
     padding: 0.5rem;
     border: 0;
@@ -204,7 +210,7 @@ i {
 }
 
 #pomodoro-timers input {
-    font-family: 'Rubik', sans-serif;
+    font-family: "Inter", sans-serif;
     font-size: 1em;
     background-color: black;
     color: white;
@@ -220,10 +226,6 @@ i {
     margin: 0;
 }
 
-#pomodoro-timers h3 {
-    margin-bottom: 0.5rem;
-}
-
 #timerz {
     display: flex;
     margin-bottom: 2rem;
@@ -246,6 +248,15 @@ i {
     appearance: textfield;
     padding: 0.5rem;
     margin-bottom: 0.5rem;
+    transition: border-color 0.25s;
+}
+
+#timerz .inputTime div input:focus{
+    border-color: white;
+}
+
+#timerz .inputTime div input:focus + .unit{
+    border-color: white;
 }
 
 #timerz .inputTime div .unit {
@@ -256,16 +267,24 @@ i {
     color: #b3b3b3 !important;
     padding: 0.5rem;
     margin-bottom: 0.5rem;
+    font-weight: 300;
+    transition: border-color 0.25s;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor:text;
 }
 
 #customizations {
-    width: 80%;
-    text-align: center;
-    grid-area: main;
-    display: none;
+    width: 100%;
+    height: 80%;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    align-items: flex-start;
+    margin: 2rem 0 2rem 0;
+    overflow: scroll;
 }
 
 #customizations button {
@@ -316,11 +335,11 @@ i {
     border: 1px hsl(0, 0%, 50%) solid !important;
 }
 
-#customizations>#backgroundcusto>div {
+#customizations>#backgroundcustom>div {
     padding: 1.915rem;
 }
 
-#backgroundcusto {
+#backgroundcustom {
     display: flex;
     flex-direction: row;
     margin-bottom: 2rem;
@@ -364,8 +383,6 @@ i {
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
 }
 
 #menuButtons {

diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -298,6 +298,10 @@ function resetToDefaults() {
     localStorage.setItem("shortTime", shortTime.toString());
     localStorage.setItem("longTime", longTime.toString());
 }
+function focusInput(inputId) {
+    const input = document.getElementById(inputId);
+    input.focus();
+}
 form.addEventListener('submit', function (e) {
     e.preventDefault();
     settings.style.display = "none";

diff --git a/src/scripts/main.ts b/src/scripts/main.ts
@@ -338,6 +338,11 @@ function resetToDefaults() {
   localStorage.setItem("longTime", longTime.toString());
 }
 
+function focusInput(inputId: string) {
+  const input = document.getElementById(inputId) as HTMLInputElement;
+  input.focus();
+}
+
 form.addEventListener('submit', function (e) {
   e.preventDefault();
   settings.style.display = "none";