Merge pull request #37 from SDashS/InDev

Working on menu and settings page
Nighty3098 · Sep 7, 2024 · f763187 · f763187
2 parents 9ba1a78 + 4d80cfe
commit f763187
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 120 deletions.
diff --git a/app/__pycache__/get_info.cpython-312.pyc b/app/__pycache__/get_info.cpython-312.pyc
diff --git a/app/__pycache__/routes.cpython-312.pyc b/app/__pycache__/routes.cpython-312.pyc
diff --git a/app/routes.py b/app/routes.py
@@ -23,15 +23,6 @@ def open_ports():
     ports = get_open_ports_and_services()
     return jsonify(ports)
 
-
-@app.route("/api/server_clock", methods=["GET"])
-def get_time():
-    current_time = datetime.now().strftime("%H:%M")
-    current_date = datetime.now().strftime("%d %b %Y")
-
-    return jsonify(current_time=current_time, current_date=current_date)
-
-
 @app.route("/api/usage")
 def usage():
     global prev_net_io, prev_time

diff --git a/app/static/bg.jpg b/app/static/bg.jpg
diff --git a/app/static/bg.png b/app/static/bg.png
diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -1,8 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Pacifico&display=swap");
 
 :root {
-  --bg: #142943;
-  --bg2: rgba(24, 25, 38, 30);
+  --bg: #2F3541;
+  --bg2: rgba(47, 53, 65, 30);
   --fg: #cad3f5;
   --accent: #9ABFE5;
   --accent-hover: #9ABFE5;
@@ -15,7 +15,7 @@
 html {
   width: 100%;
   height: auto;
-  background-image: url("../bg.jpg");
+  background-image: url("../bg.png");
   display: flex;
   scrollbar-color: var(--accent-hover) var(--bg);
   scrollbar-arrow-color: var(--bg) var(--bg);
@@ -39,22 +39,11 @@ body {
   justify-content: center;
 }
 
-.clock {
+.summary_data h1 {
   margin: 0%;
-}
-
-.clock h1 {
-  font-size: 700%;
-  height: 100%;
   color: var(--bg);
 }
 
-.clock h3 {
-  font-size: 200%;
-  height: 100%;
-  color: var(--accent-hover);
-}
-
 .center {
   display: flex;
   justify-content: center;
@@ -74,21 +63,28 @@ body {
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(47, 53, 65, 0.4);
   animation: fadeOut 1s ease;
 }
 
 .modal-content {
-  background-color: rgba(24, 25, 38, 0.4);
+  background-color: rgba(47, 53, 65, 0.4);
   backdrop-filter: blur(8.3px);
-  margin: 15% auto;
+  margin: 3% auto;
   border: 2px solid var(--bg2);
   width: 50%;
   padding: 20px;
   border-radius: 20px;
   animation: slideInDown 1s ease;
 }
 
+@media (max-width: 1000px) {
+  .modal-content {
+    margin: 50% auto;
+    width: 70%;
+  }
+}
+
 .close-button {
   color: #aaa;
   float: right;
@@ -108,24 +104,32 @@ body {
 .tab-buttons {
   margin-top: 40px;
   display: flex;
+  flex-direction: row;
   justify-content: center;
 }
 
 .tab-button {
-  background-color: var(--accent-pressed);
-  color: var(--bg);
+  background-color: rgba(47, 53, 65, 0.4);
+  border-radius: 16px;
+  box-shadow: 0 4px 40px rgba(47, 53, 65, 0.1);
+  backdrop-filter: blur(8.3px);
+  -webkit-backdrop-filter: blur(8.3px);
   border: 2px solid var(--bg2);
+  color: var(--fg);
   outline: none;
   cursor: pointer;
   padding: 10px 20px;
   margin: 1%;
   border-radius: 10px;
+  width: 20%;
   transition:
     background-color 0.6s ease,
+    color 0.6s ease,
     transform 0.6s ease;
 }
 
 .tab-button.active {
+  color: var(--bg);
   background-color: var(--accent-hover);
 }
 
@@ -139,6 +143,16 @@ body {
   margin: 0;
 }
 
+@media (max-width: 1000px) {
+  .tab-buttons {
+    flex-direction: column;
+  }
+
+  .tab-button {
+    width: 100%;
+  }
+}
+
 .context-menu li {
   padding: 8px 12px;
   cursor: pointer;
@@ -210,7 +224,7 @@ body {
     transform 0.3s,
     background-color 0.3s,
     fill 0.5s;
-  background-color: rgba(24, 25, 38, 0.4);
+  background-color: rgba(47, 53, 65, 0.4);
   backdrop-filter: blur(10px);
   animation: fadeIn 0.5s ease,
   slideInDown 1s ease;
@@ -248,43 +262,15 @@ p {
   animation: fadeIn 0.5s ease;
 }
 
-select.button {
-  background-color: rgba(24, 25, 38, 0.4);
-  border-radius: 16px;
-  box-shadow: 10 40px 40px rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(8.3px);
-  -webkit-backdrop-filter: blur(8.3px);
-  border: 2px solid var(--bg2);
-  font-family: "M PLUS Rounded 1c", system-ui;
-  color: var(--accent-hover);
-  cursor: pointer;
-  transition:
-    background-color 0.7s ease,
-    transform 0.6s ease;
-  z-index: 10000;
-  margin-bottom: 2%;
-  animation: slideInDown 1s ease;
-}
-
-select.button:hover {
-  background-color: var(--accent-hover);
-  color: var(--bg);
-  transform: scale(1.05);
-}
-
-select.button:active {
-  background-color: rgba(24, 25, 38, 0.4);
-  color: var(--bg);
-}
-
 .button {
-  background-color: var(--accent-pressed);
-  color: var(--bg);
+  background-color: rgba(47, 53, 65, 0.4);
   border-radius: 16px;
-  box-shadow: 10 40px 40px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 40px rgba(47, 53, 65, 0.1);
   backdrop-filter: blur(8.3px);
   -webkit-backdrop-filter: blur(8.3px);
   border: 2px solid var(--bg2);
+  color: var(--fg);
+
   font-family: "M PLUS Rounded 1c", system-ui;
   font-weight: 400;
   font-style: normal;
@@ -298,16 +284,19 @@ select.button:active {
   cursor: pointer;
   transition:
     background-color 0.7s ease,
+    color 0.7s ease,
     transform 0.6s ease;
   animation: slideInDown 1s ease;
 }
 
 .button:hover {
   background-color: var(--accent-hover);
   transform: scale(1.05);
+  color: var(--bg);
 }
 
 .button:active {
+  color: var(--bg);
   background-color: var(--accent-pressed);
 }
 
@@ -362,7 +351,7 @@ select.button:active {
 .dock {
   align-items: center;
   display: flex;
-  margin-top: 1%;
+  margin-top: 3%;
   width: 100%;
   height: auto;
   justify-content: center;
@@ -409,9 +398,9 @@ select.button:active {
 }
 
 .summary_data {
-  background-color: rgba(24, 25, 38, 0.4);
+  background-color: rgba(47, 53, 65, 0.4);
   border-radius: 16px;
-  box-shadow: 10 40px 40px rgba(0, 0, 0, 0.4);
+  box-shadow: 10 40px 40px rgba(47, 53, 65, 0.4);
   backdrop-filter: blur(8.3px);
   -webkit-backdrop-filter: blur(8.3px);
   border: 1px solid var(--bg2);
@@ -422,12 +411,12 @@ select.button:active {
     box-shadow 0.5s;
   display: flex;
   width: 30%;
-  aspect-ratio: 2 / 1.3;
+  aspect-ratio: 2 / 1.2;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 4%;
-  margin: 1%;
+  margin: 2%;
   opacity: 0;
   animation: fadeIn 2s ease forwards;
 }
@@ -438,13 +427,13 @@ select.button:active {
 }
 
 .system_info {
-  background-color: rgba(24, 25, 38, 0.4);
+  background-color: rgba(47, 53, 65, 0.4);
   border-radius: 16px;
-  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 40px rgba(47, 53, 65, 0.1);
   backdrop-filter: blur(8.3px);
   -webkit-backdrop-filter: blur(8.3px);
   border: 2px solid var(--bg2);
-  width: 60%;
+  width: 80%;
   padding: 5%;
   transition: backdrop 0.5s;
   animation:slideInDown 1s ease,
@@ -487,9 +476,9 @@ h3 {
 }
 
 .port-table {
-  background-color: rgba(24, 25, 38, 0.4);
+  background-color: rgba(47, 53, 65, 0.4);
   border-radius: 16px;
-  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 40px rgba(47, 53, 65, 0.1);
   backdrop-filter: blur(8.3px);
   -webkit-backdrop-filter: blur(8.3px);
   border: 2px solid var(--bg2);
@@ -524,6 +513,37 @@ h3 {
   text-align: center;
 }
 
+.settings {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.settings h1 {
+  font-size: 70px;
+  margin: 0px;
+}
+
+.settings h3 {
+  font-size: 20px;
+  margin: 0px;
+}
+
+.settings svg {
+  aspect-ratio: 1/1;
+  width: 30px;
+  fill: var(--accent);
+  margin: 0px;
+  margin-left: 30px;
+  transition: fill 0.6s ease;
+}
+
+.settings svg:hover {
+  fill: var(--fg);
+}
+
 .port-container {
   display: flex;
   flex-direction: row;
@@ -537,9 +557,9 @@ h3 {
 }
 
 .port-block {
-  background-color: rgba(24, 25, 38, 0.4);
+  background-color: rgba(47, 53, 65, 0.4);
   border-radius: 16px;
-  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 40px rgba(47, 53, 65, 0.1);
   backdrop-filter: blur(8.3px);
   -webkit-backdrop-filter: blur(8.3px);
   border: 2px solid var(--bg2);
@@ -573,6 +593,11 @@ h3 {
 }
 
 @media screen and (max-width: 800px) {
+  .main-cards {
+    margin-top: 30%;
+    margin-bottom: 10%;
+  }
+
   .port-block {
     width: 70%;
     margin: 1%;
@@ -592,7 +617,7 @@ h3 {
   }
 
   .summary_data {
-    width: 85%;
+    width: 100%;
   }
 
   .system_info {
@@ -664,7 +689,7 @@ h3 {
   }
 
   .system_info {
-    width: 35%;
+    width: 50%;
   }
 
   .port-container {