v1

src/assets/stylesheets/browse.scss

@@ -11,7 +11,7 @@ $white: #fff;
     180deg,
     rgb(0 37 84 / 100%) 0%,
     rgb(0 124 190 / 100%) 50%,
-    rgb(255, 255, 255) 100%
+    rgb(255 255 255) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -50,7 +50,7 @@ $white: #fff;
   background-color: transparent;
   margin-bottom: 50px;
   animation: fadeInUp;
-  animation-duration: .5s;
+  animation-duration: 0.5s;
 }
 
 .browse-title {
@@ -71,8 +71,8 @@ $white: #fff;
   height: 150px;
   background: linear-gradient(
     -30deg,
-    rgb(187, 208, 236) 0%,
-    rgba(255, 255, 255, 1) 100%
+    rgb(187 208 236) 0%,
+    rgb(255 255 255 / 100%) 100%
   );
   display: flex;
   align-items: center;
@@ -86,7 +86,7 @@ $white: #fff;
   cursor: pointer;
   text-decoration: none;
   background-color: transparent;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
 }
 
 .browse-cable-image {
@@ -97,7 +97,7 @@ $white: #fff;
   background-color: white;
   border: $gray solid 1px;
   border-radius: 10px;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
   aspect-ratio: 1/1;
 }
 
@@ -146,10 +146,9 @@ $white: #fff;
   font-size: 15px;
   margin-bottom: 2px;
   color: $light-blue;
-  color: $light-blue;
   width: auto;
-  height: auto;
   font-family: "Gotham Medium";
+  height: auto;
 }
 
 .browse-search {
@@ -157,8 +156,8 @@ $white: #fff;
   height: 50px;
   background: linear-gradient(
     -30deg,
-    rgb(187, 208, 236) 0%,
-    rgba(255, 255, 255, 1) 100%
+    rgb(187 208 236) 0%,
+    rgb(255 255 255 / 100%) 100%
   );
   display: flex;
   align-items: center;
@@ -171,7 +170,7 @@ $white: #fff;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
   background-color: transparent;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
 }
 
 .browse-search input {
@@ -188,4 +187,4 @@ $white: #fff;
   border-right: none;
   padding-left: 20px;
   padding-top: 2px;
-}
+}

src/assets/stylesheets/cabledetail.scss

@@ -11,7 +11,7 @@ $white: #fff;
     180deg,
     rgb(0 37 84 / 100%) 0%,
     rgb(0 124 190 / 100%) 50%,
-    rgb(255, 255, 255) 100%
+    rgb(255 255 255) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -49,7 +49,7 @@ $white: #fff;
   overflow: hidden;
   background-color: transparent;
   animation: fadeInUp;
-  animation-duration: .5s;
+  animation-duration: 0.5s;
 }
 
 .cable-main {
@@ -57,8 +57,8 @@ $white: #fff;
   height: 200px;
   background: linear-gradient(
     -30deg,
-    rgb(187, 208, 236) 0%,
-    rgba(255, 255, 255, 1) 100%
+    rgb(187 208 236) 0%,
+    rgb(255 255 255 / 100%) 100%
   );
   display: flex;
   align-items: center;
@@ -71,7 +71,7 @@ $white: #fff;
   margin-top: 5px;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
 }
 
 .cable-actions {
@@ -96,8 +96,8 @@ $white: #fff;
   height: 100%;
   background: linear-gradient(
     -30deg,
-    rgb(187, 208, 236) 0%,
-    rgba(255, 255, 255, 1) 100%
+    rgb(187 208 236) 0%,
+    rgb(255 255 255 / 100%) 100%
   );
   display: flex;
   align-items: center;
@@ -107,7 +107,7 @@ $white: #fff;
   border: 1px solid $gray;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
   cursor: pointer;
   overflow: visible;
 }
@@ -116,8 +116,8 @@ $white: #fff;
   width: auto;
   background: linear-gradient(
     -30deg,
-    rgb(187, 194, 236) 0%,
-    rgba(255, 255, 255, 1) 100%
+    rgb(187 194 236) 0%,
+    rgb(255 255 255 / 100%) 100%
   );
 }
 
@@ -143,7 +143,7 @@ $white: #fff;
   margin-right: 25px;
   border: $gray solid 1px;
   border-radius: 10px;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
 }
 
 .cable-main-label {
@@ -183,7 +183,6 @@ $white: #fff;
   background-color: transparent;
   font-size: 16px;
   color: $light-blue;
-  color: $light-blue;
   width: auto;
   height: auto;
   font-family: "Gotham Medium";
@@ -194,8 +193,7 @@ $white: #fff;
   height: auto;
   background-color: transparent;
   display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
+  flex-flow: row wrap;
   align-items: stretch;
   flex-grow: 1;
   justify-content: space-between;
@@ -229,7 +227,7 @@ $white: #fff;
   border: $light-blue solid 2px;
   border-radius: 20px;
   table-layout: fixed;
-  border-spacing: 0px;
+  border-spacing: 0;
 }
 
 .row,
@@ -339,9 +337,9 @@ th:first-child {
 
 .modal-close {
   cursor: pointer;
-  padding: 15px 35px 15px 35px;
+  padding: 15px 35px;
   border-radius: 20px;
   background-color: $gray;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
   transition: all 0.3s ease-in-out;
-}
+}

src/assets/stylesheets/map.scss

@@ -11,7 +11,7 @@ $white: #fff;
     180deg,
     rgb(0 37 84 / 100%) 0%,
     rgb(0 124 190 / 100%) 50%,
-    rgb(255, 255, 255) 100%
+    rgb(255 255 255) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -49,7 +49,7 @@ $white: #fff;
   overflow: visible;
   background-color: transparent;
   animation: fadeInUp;
-  animation-duration: .5s;
+  animation-duration: 0.5s;
 }
 
 .map-title {
@@ -75,12 +75,13 @@ $white: #fff;
   overflow: visible;
 }
 
-.map-box, .map-details {
+.map-box,
+.map-details {
   height: 68vh;
   background: linear-gradient(
     -30deg,
-    rgb(187, 208, 236) 0%,
-    rgba(255, 255, 255, 1) 100%
+    rgb(187 208 236) 0%,
+    rgb(255 255 255 / 100%) 100%
   );
   display: flex;
   align-items: center;
@@ -90,7 +91,7 @@ $white: #fff;
   border: 1px solid $gray;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
   overflow: visible;
 }
 
@@ -115,15 +116,16 @@ $white: #fff;
   overflow: visible;
 }
 
-.map-box-circle, .map-box-spacer {
+.map-box-circle,
+.map-box-spacer {
   width: 60px;
   height: 60px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   background: linear-gradient(
     15deg,
-    rgb(223, 223, 223) 0%,
-    rgb(255, 255, 255) 100%
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
   );
   margin-left: 3px;
   margin-right: 3px;
@@ -134,13 +136,13 @@ $white: #fff;
 }
 
 .map-box-circle {
-  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
   cursor: pointer;
 }
 
 .map-box-spacer {
   background-color: transparent;
-  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
+  box-shadow: 0 2px 2px rgb(0 0 0 / 0%);
   border: 1px solid transparent;
   background: transparent;
 }
@@ -174,11 +176,10 @@ $white: #fff;
   width: auto;
   height: 35%;
   aspect-ratio: 1/1;
-  background-color: transparent;
   border: $gray solid 1px;
   border-radius: 20px;
   background-color: white;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
   margin-bottom: 30px;
   margin-top: 30px;
 }
@@ -202,7 +203,7 @@ $white: #fff;
   text-align: left;
   height: auto;
   font-family: "Gotham Bold";
-  margin-bottom: 3px;;
+  margin-bottom: 3px;
 }
 
 .map-cable-shortdescription {
@@ -235,7 +236,6 @@ $white: #fff;
   font-size: 15px;
   margin-bottom: 5px;
   color: $light-blue;
-  color: $light-blue;
   width: 100%;
   text-align: left;
   height: auto;
@@ -245,11 +245,11 @@ $white: #fff;
 .map-cable-moreinfo {
   width: 200px;
   height: 50px;
-  border-radius: 20px; 
+  border-radius: 20px;
   background: linear-gradient(
     15deg,
-    rgb(223, 223, 223) 0%,
-    rgb(255, 255, 255) 100%
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
   );
   margin-left: 3px;
   margin-right: 3px;
@@ -257,7 +257,7 @@ $white: #fff;
   justify-content: center;
   align-items: center;
   transition: all 0.3s ease-in-out;
-  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
   cursor: pointer;
   margin-bottom: 40px;
   text-decoration: none;
@@ -271,4 +271,4 @@ $white: #fff;
   color: $medium-blue;
   font-family: "Gotham Bold";
   background-color: transparent;
-}
+}

src/assets/stylesheets/navbar.scss

@@ -17,7 +17,7 @@ $white: #fff;
 
 .navbar-top {
   width: 90%;
-  height: 100%;
+  height: 94%;
   display: flex;
   align-items: left;
   justify-content: flex-start;
@@ -78,7 +78,8 @@ $white: #fff;
   flex-direction: column;
 }
 
-.navbar-list-item {
+.navbar-list-item,
+.navbar-return {
   width: 100%;
   height: 50px;
   margin: 0 0 3px;
@@ -92,7 +93,8 @@ $white: #fff;
   cursor: pointer;
 }
 
-.navbar-list-item span {
+.navbar-list-item span,
+.navbar-return span {
   background-color: transparent;
   width: auto;
   height: auto;
@@ -101,3 +103,101 @@ $white: #fff;
   color: $dark-blue;
   margin-left: 10px;
 }
+
+.navbar-return {
+  width: 90%;
+  align-items: center;
+  justify-content: center;
+  background-color: $medium-blue;
+}
+
+.navbar-return span {
+  color: $white;
+  margin-left: 0;
+}
+
+.modal-container {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.modal-title,
+.modal-body,
+.modal-close,
+.modal-return {
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  flex-direction: column;
+}
+
+.modal-title span {
+  width: auto;
+  height: auto;
+  font-family: "Gotham Bold";
+  font-size: 32px;
+  color: $dark-blue;
+  background-color: transparent;
+  margin-bottom: 5px;
+}
+
+.modal-body span {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  color: $medium-blue;
+  margin-top: 10px;
+  margin-bottom: 30px;
+}
+
+.modal-tray {
+  width: auto;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  margin-bottom: 30px;
+  overflow: visible;
+}
+
+.modal-close,
+.modal-return {
+  cursor: pointer;
+  padding: 15px 35px;
+  border-radius: 20px;
+  background-color: $gray;
+  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
+  transition: all 0.3s ease-in-out;
+}
+
+.modal-close span,
+.modal-return span {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  margin-top: 3px;
+  color: $dark-blue;
+}
+
+.modal-return {
+  width: 30px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  margin-right: 10px;
+}

src/assets/stylesheets/settings.scss

@@ -11,7 +11,7 @@ $white: #fff;
     180deg,
     rgb(0 37 84 / 100%) 0%,
     rgb(0 124 190 / 100%) 50%,
-    rgb(255, 255, 255) 100%
+    rgb(255 255 255) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -50,7 +50,7 @@ $white: #fff;
   background-color: transparent;
   margin-bottom: 50px;
   animation: fadeInUp;
-  animation-duration: .5s;
+  animation-duration: 0.5s;
 }
 
 .settings-title {
@@ -66,13 +66,14 @@ $white: #fff;
   text-align: left;
 }
 
-.settings-powerContainer, .settings-creditsContainer {
+.settings-powerContainer,
+.settings-creditsContainer {
   width: 80%;
   height: 100px;
   background: linear-gradient(
     -30deg,
-    rgb(187, 208, 236) 0%,
-    rgba(255, 255, 255, 1) 100%
+    rgb(187 208 236) 0%,
+    rgb(255 255 255 / 100%) 100%
   );
   display: flex;
   align-items: center;
@@ -85,7 +86,7 @@ $white: #fff;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
   background-color: transparent;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
 }
 
 .settings-creditsContainer {
@@ -98,17 +99,17 @@ $white: #fff;
 .settings-powerButton {
   width: 200px;
   height: 50px;
-  border-radius: 20px; 
+  border-radius: 20px;
   background: linear-gradient(
     15deg,
-    rgb(223, 223, 223) 0%,
-    rgb(255, 255, 255) 100%
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
   );
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.3s ease-in-out;
-  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
   cursor: pointer;
   text-decoration: none;
   margin-right: 20px;
@@ -135,7 +136,10 @@ $white: #fff;
   flex-direction: column;
 }
 
-.entry-links, .entry-name, .entry-position, .settings-credits-title {
+.entry-links,
+.entry-name,
+.entry-position,
+.settings-credits-title {
   width: auto;
   height: auto;
   text-align: left;
@@ -175,11 +179,11 @@ $white: #fff;
 .entry-position {
   width: auto;
   height: auto;
-  color: $light-blue
+  color: $light-blue;
 }
 
 .entry-links {
   width: auto;
   height: auto;
-  color: $hover-blue
-}
+  color: $hover-blue;
+}

src/assets/stylesheets/statistics.scss

@@ -11,7 +11,7 @@ $white: #fff;
     180deg,
     rgb(0 37 84 / 100%) 0%,
     rgb(0 124 190 / 100%) 50%,
-    rgb(255, 255, 255) 100%
+    rgb(255 255 255) 100%
   );
   background-color: transparent;
   overflow-y: visible;
@@ -50,7 +50,7 @@ $white: #fff;
   background-color: transparent;
   margin-bottom: 50px;
   animation: fadeInUp;
-  animation-duration: .5s;
+  animation-duration: 0.5s;
 }
 
 .statistics-title {
@@ -69,8 +69,7 @@ $white: #fff;
   width: 80%;
   height: auto;
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   justify-content: flex-start;
   align-items: flex-start;
   background-color: transparent;
@@ -84,20 +83,18 @@ $white: #fff;
   height: 300px;
   background: linear-gradient(
     -30deg,
-    rgb(187, 208, 236) 0%,
-    rgba(255, 255, 255, 1) 100%
+    rgb(187 208 236) 0%,
+    rgb(255 255 255 / 100%) 100%
   );
   margin-top: 5px;
-
   display: flex; /* Center the content */
   align-items: center; /* Center vertically */
   justify-content: center; /* Center horizontally */
-
   border-radius: 20px;
   border: 1px solid $gray;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
   cursor: pointer;
   overflow: visible;
 }
@@ -107,10 +104,9 @@ $white: #fff;
   height: 95%; /* Adjust the height of iframes */
   border-radius: 20px;
 
-
   // Debug Borders
-      // border-width: 5px;
-      // border-style: solid;
+  // border-width: 5px;
+  // border-style: solid;
 }
 
 // .summary-iframe {
@@ -134,7 +130,6 @@ $white: #fff;
 //   width: 25%;
 // }
 
-
 // .summary-dashboard {
 //   width: 100%;
 //   height: 900px;
@@ -149,4 +144,4 @@ $white: #fff;
 //   border-radius: 20px;
 //   text-align: center;
 //   padding: 10px;
-// }
+// }