better fonts, next button anim (slightly broken))

web-app/seafoam/src/index.html

@@ -16,7 +16,7 @@
           </div>
         </div>
         <div class="menubutton" onclick="resetMenu()"><h2 class="buttontext">GENERATE</h2></div>
-        <div class="menubutton" onclick="routeMenu()""><h2 class="buttontext">ROUTES</h2></div>
+        <div class="menubutton" onclick="routeMenu()""><h2 class="buttontext">OLD ROUTES</h2></div>
       </div>
       <div class="main">
         <div class="menucontainer" id="menua">
@@ -29,6 +29,7 @@
           <div class="menuscreen" id="menua1">
             <div class="lefttextcontainer">
               <div class="infobox">
+                <h4 class="infotitlesuperscript">Step One:</h4>
                 <h1 class="infotitle">ROUTE AREA</h1>
                 <h3 class="infodesc">Click to choose the area where your route will generate.</h3>
                 <form>
@@ -37,7 +38,7 @@
                 </form>
               </div>
               <div class="nextbutton">
-                <h2 class="nextbuttontext" onclick="moveStep()">NEXT &#8594</h2>
+                <h2 class="nextbuttontext" id="mapnextbutton" onclick="moveStep()">NEXT &#8594</h2>
               </div>
             </div>
             <div class="rightcontentcontainer">
@@ -86,6 +87,7 @@
           <div class="menuscreen" id="menua2">
             <div class="lefttextcontainer">
               <div class="infobox">
+                <h4 class="infotitlesuperscript">Step Two:</h4>
                 <h1 class="infotitle">WAYPOINTS</h1>
                 <h3 class="infodesc">Enter desired waypoints- route may be +-10% of the value.</h3>
               </div>
@@ -102,6 +104,7 @@
           <div class="menuscreen" id="menua3">
             <div class="lefttextcontainer">
               <div class="infobox">
+                <h4 class="infotitlesuperscript">Step Three:</h4>
                 <h1 class="infotitle">SETTINGS</h1>
               </div>
               <div class="settingbox">
@@ -148,6 +151,7 @@
           <div class="menuscreen" id="menua4">
             <div class="lefttextcontainer">
               <div class="infobox">
+                <h4 class="infotitlesuperscript">Step Four:</h4>
                 <h1 class="infotitle">GENERATE</h1>
                 <h3 class="infodesc">Your route is being generated. Please wait.</h3>
               </div>
@@ -450,6 +454,7 @@
     function selectSquare(index) {
       if (activeSquareIndex != -1) {
         document.getElementById(activeSquareIndex).style.backgroundColor = "#0e141b";
+        document.getElementById("mapnextbutton").style.opacity = 1;
       }
       activeSquareIndex = parseInt(index);
       let selectedSquareDiv = document.getElementById(index);

web-app/seafoam/src/styles.css

@@ -1,12 +1,33 @@
 @font-face {
-  font-family: "Poppins";
+  font-family: "Poppins-Thin";
-  src: url(assets/poppins.ttf) format("truetype");
+  src: url(assets/fonts/Poppins/Poppins-Thin.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-ExtraLight";
+  src: url(assets/fonts/Poppins/Poppins-ExtraLight.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Light";
+  src: url(assets/fonts/Poppins/Poppins-Light.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Medium";
+  src: url(assets/fonts/Poppins/Poppins-Medium.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-SemiBold";
+  src: url(assets/fonts/Poppins/Poppins-SemiBold.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Bold";
+  src: url(assets/fonts/Poppins/Poppins-Bold.ttf) format("truetype");
 }
 
 :root {
   --main-bg-color: #295d8c;
   --accent-bg-color: #427baf;
   --button-bg-color: #427baf;
+  --white-text-color: rgba(255, 255, 255, 0.8);
 }
 
 html {
@@ -17,7 +38,7 @@ html {
 body {
   user-select: none;
   background-color: var(--main-bg-color);
-  font-family: "Poppins";
+  font-family: "Poppins-Medium";
   margin: 0;
   padding: 0;
   height: 100%;
@@ -51,8 +72,8 @@ body {
 
 .title {
   display: flex;
-  color: #ffffff;
+  color: var(--white-text-color);
-  font-weight: 200;
+  font-weight: 300;
   margin: 0;
 }
 
@@ -67,6 +88,7 @@ body {
   align-items: center;
   margin: 2rem;
   margin-bottom: 5rem;
+  font-family: "Poppins-ExtraLight";
 }
 
 .menubutton {
@@ -76,14 +98,16 @@ body {
   align-items: center;
   height: 5rem;
   font-size: 0.7rem;
-  color: #ffffff;
+  color: var(--white-text-color);
   background-color: #131b23;
   transition: background-color 0.25s;
   padding-left: 2rem;
 }
 
 .buttontext {
-  font-weight: 200;
+  font-family: "Poppins-SemiBold";
+  letter-spacing: 0.2rem;
+  font-size: 12pt;
 }
 
 .menucontainer {
@@ -118,7 +142,7 @@ body {
   margin: 1.5rem;
   font-size: 0.75rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--white-text-color);
   display: inline-block;
   opacity: 0.3;
   transition: opacity 0.25s;
@@ -131,7 +155,7 @@ body {
 .dot {
   height: .8rem;
   width: .8rem;
-  background-color: #ffffff;
+  background-color: var(--white-text-color);
   border-radius: 50%;
   display: block;
   margin: 0.5rem auto auto auto;
@@ -165,34 +189,65 @@ body {
   width: 20rem;
 }
 
+.infotitlesuperscript {
+  font-size: 12pt;
+  font-family: "Poppins-ExtraLight";
+  letter-spacing: 0.05rem;
+  color: var(--white-text-color);
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
 .infotitle {
   font-size: 3rem;
-  font-weight: 500;
+  font-family: "Poppins-Light";
-  color: #ffffff;
+  letter-spacing: 0.1rem;
+  color: var(--white-text-color);
   margin-top: 1rem;
   margin-bottom: 0;
 }
 
 .infodesc {
-  font-size: 0.8rem;
+  font-size: 12pt;
-  font-weight: 300;
+  font-family: "Poppins-Thin";
-  color: #ffffff;
+  letter-spacing: 0.05rem;
+  color: var(--white-text-color);
+}
+
+#mapnextbutton {
+  opacity: 0;
+  transition: opacity 0.5s ease-in;
 }
 
 .nextbutton {
   margin-top: 5rem;
-  transition: background-color 0.1s;
   width: fit-content;
   padding: 0 1rem 0 0;
 }
 
-.nextbutton:hover {
+.nextbuttontext {
-  background-color: var(--button-bg-color);
+  color: var(--white-text-color);
+  font-family: "Poppins-SemiBold";
+  display: inline-block;
+  position: relative;
 }
 
-.nextbuttontext {
+.nextbuttontext::after {
-  color: #ffffff;
+  content: "";
-  font-weight: 200;
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--white-text-color);
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.nextbuttontext:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
 }
 
 .mapbox {
@@ -244,7 +299,7 @@ body {
 
 #mapboxselectedtext {
   text-align: center;
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1rem;
   font-weight: 500;
   opacity: 1;
@@ -259,7 +314,7 @@ body {
   background-color: var(--accent-bg-color);
   height: 2rem;
   width: 7rem;
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   font-family: "Poppins";
@@ -277,7 +332,7 @@ body {
 }
 
 .priorityform {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   margin-right: 1rem;
@@ -289,14 +344,14 @@ body {
   width: 20rem;
   font-size: 1rem;
   font-weight: 300;
-  color: #ffffff;
+  color: var(--white-text-color);
 }
 
 .oobform {
   background-color: var(--accent-bg-color);
   height: 1.5rem;
   width: 5rem;
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   font-family: "Poppins";
@@ -310,11 +365,11 @@ body {
 }
 
 input.angleenable:checked {
-  background-color: #ffffff;
+  background-color: var(--white-text-color);
 }
 
 label.angleenable {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   margin-left: 0.5rem;
@@ -332,7 +387,7 @@ input.anglesettings {
   background-color: var(--accent-bg-color);
   height: 1.5rem;
   width: 5rem;
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   font-family: "Poppins";
@@ -345,7 +400,7 @@ input.anglesettings::-webkit-inner-spin-button {
 }
 
 label.anglesettings {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   margin-left: 0.5rem;
@@ -358,7 +413,7 @@ label.anglesettings {
 }
 
 .routeoutput {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   user-select: text;
@@ -370,7 +425,7 @@ label.anglesettings {
 }
 
 .routestats {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   margin-top: 1rem;
@@ -386,7 +441,7 @@ label.anglesettings {
 .routestitle {
   font-size: 3rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--white-text-color);
   /* margin-top: 1rem;
   margin-bottom: 0; */
 }
@@ -394,7 +449,7 @@ label.anglesettings {
 .routesdesc {
   font-size: 0.8rem;
   font-weight: 300;
-  color: #ffffff;
+  color: var(--white-text-color);
 }
 
 /* .routeviewbox {
@@ -408,7 +463,7 @@ label.anglesettings {
 .routetitle {
   font-size: 1.5rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--white-text-color);
   /* margin-top: 1rem;
   margin-bottom: 0; */
 }
@@ -428,7 +483,7 @@ label.anglesettings {
 } */
 
 label.mfbox {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1rem;
   font-weight: 300;
   margin-left: 0.5rem;