Upate Layout

Geoshua · May 9, 2023 · 2e94cc7 · 2e94cc7
1 parent 4d1b5de
commit 2e94cc7
Show file tree

Hide file tree

Showing 10 changed files with 406 additions and 169 deletions.
diff --git a/.firebase/hosting.cHVibGlj.cache b/.firebase/hosting.cHVibGlj.cache
@@ -1,26 +1,28 @@
-appointments.html,1678843708751,eebc14f985f15d923cd55249be74f93793eb2679ec89ae92712625223f973f02
-contact.html,1678843732066,f6bb72baa7e44e638cd2d92bb89cb5bed447e59ea7edc65dde83c02ad6d2385b
+appointments.html,1683589504901,592e2419e7eebf041692787964bdd977564b820d88ca769d28393e0d1b309544
+contact.html,1683589576199,11b98f69295fa433595780f4a44db95f1c1e30a946304210eb3dd3eab8a9cc39
 emptyTR.html,1681771395834,866e89a7114ccd4312036e6548dfd1632adf9f4bd006ebaf9869424ad8809e8d
-feed.html,1681799884522,5158723e0e3f7534907de8405aac3c5379f5ab12d990ba25cf33bbc74572cf21
+feed.html,1683599405273,eeef2b1006346fc67381f268f6e89b965211ffc6f9e3bc1090b7123b48c84352
+food.html,1683618713829,c5c50206a3935cae17e480269184939eeb96e7a9c36aff1b5ce93bf4600b92b1
 newRoutine.html,1678843703364,eebc14f985f15d923cd55249be74f93793eb2679ec89ae92712625223f973f02
-stats.html,1681794018306,e66efba6070a51d3a2d6ef49c6a18984f91d4a9b0f9f14e0520dc32857cc0a4a
-css/feed.css,1681799619811,77613341cc6a02d356deee3aebadd00d7ccff0d4c2b3a8d4bd9ae4fc373a942b
+stats.html,1683589401220,f7830a73f6123b5c7529e8df9758e47e0f9fef77dc1adaae4feeceb493040d27
+css/feed.css,1683597845979,3e33fcc02a32b201baeb7081426c0dcb095e880c1a9b0d238afe58c58064e0e3
+css/login.css,1683471015613,8dcf416593b0677e64119ccfdb73bc96ad4d52d0f2d7bbc83a44ef1977573aea
 css/stats.css,1681781665677,778430721b551afe98b381b59ea6b72d0320d356925cc5b318a0a25a5d163a6a
+css/styles.css,1683618283328,e08b5a062b4c1c27ebd29e265909991d8c134ae5b677867b39a15229a76b8df5
 css/tracker.css,1681864608624,e8b085205433aa2dbd238379d6c35552ed6b0bc8f4e4d78f221e0ba8611a772e
-img/QR example.png,1681769319833,9bdd5f9212d0e9bad9a75102a0a26fcd4c3c8d54239e1be1034d18a4b5d016c0
-js/stats.js,1681780930031,5233311a6748fdc82dee1e36337b6e61ac697bc5e3c37ca5ff7693f5395ab51b
-js/tracker.js,1681778354293,87d1cfc0470cc45fb10c0e6ac66a75168d26f7f476b57e4c85aed25fa18d76ab
-main.html,1683443443333,dcba3d7d5ddc911ff8fa3f6a2a69ce529631bbd319a0b994fbf574daddad75de
-css/login.css,1683471015613,8dcf416593b0677e64119ccfdb73bc96ad4d52d0f2d7bbc83a44ef1977573aea
-index.html,1683504405388,a7a7ff13078e597961ace28b9aa9ae7d3c3779ac7abbfe262f88940706bc48c3
-css/styles.css,1683494883568,3f75d76037086296990770f85940821488928b7e4c5c10da5713cf98ec1fb776
+img/background.png,1683443967750,82b8e4612fa31fb240809e2ac2164319e0e3ae6a47115bd2330ad97e0de20a5a
 img/icon.png,1683504082098,4609c3ec73ac7c8c4d4ca62b39e06c9d19a8b6df339dca444eee932b066b0988
+img/insert_img.jpg,1683474097528,2461f8c1af3a41b0e06c62915f253585d6f182577596246c380a5c81bebe6114
+img/insert_img2.jpg,1683475889124,fbedc271c0d5fe3306f9776940c3d40f23d6bf2866c69731c03c103177bf2c89
+img/insert_img3.jpg,1683475927066,c5105f27420d0645bed828de9cd0210ceac964befe9992e7f989ecd9217948df
 img/logo.png,1683503744882,3711d6778207afa40ba8268bf36c77f374ad7f8469e3cd95b68ec06fa6ef5bf7
-js/app.js,1683461115354,a4aa1dd2cfd581b77a3120937b42910f7b60657e0c09839cdb64476f5c7a27d8
-js/page-control.js,1683494824493,f98eaed5361df340814effd16df78350da6a574bf1a99e4dd1406840920764dd
 img/logo_legacy.png,1678832273106,5fa398fac9f58184d3141e33c5e4864dc58339f538607e6a698f8cd7a1ab13d5
 img/placeholder.jpg,1683489355488,2bbbf548d79ed7dd2498580309ae4a2a638627164d361ae722b4c1a2b7a77a14
-img/insert_img.jpg,1683474097528,2461f8c1af3a41b0e06c62915f253585d6f182577596246c380a5c81bebe6114
-img/insert_img3.jpg,1683475927066,c5105f27420d0645bed828de9cd0210ceac964befe9992e7f989ecd9217948df
-img/background.png,1683443967750,82b8e4612fa31fb240809e2ac2164319e0e3ae6a47115bd2330ad97e0de20a5a
-img/insert_img2.jpg,1683475889124,fbedc271c0d5fe3306f9776940c3d40f23d6bf2866c69731c03c103177bf2c89
+img/QR example.png,1681769319833,9bdd5f9212d0e9bad9a75102a0a26fcd4c3c8d54239e1be1034d18a4b5d016c0
+js/app.js,1683557864483,fe23c3606f14a269e11aea7c82ec14a2923785cc13c58aeb4c2ba034170c46da
+js/foodtrack.js,1683617234444,60c997fa7f4cc093ccd5f25f1d5b60aec9a114b27bc8746040be2cac2538f76e
+js/page-control.js,1683590376419,a25db32b7834a673af76f792e00be16a015090e00ea99a23ba8ddf039b773894
+js/stats.js,1681780930031,5233311a6748fdc82dee1e36337b6e61ac697bc5e3c37ca5ff7693f5395ab51b
+main.html,1683620042266,89f3ce42d191e0c1056bcc11ac5ed900506150fbaf8f708ea278ce143758e4dc
+js/tracker.js,1683619788522,d1a1f3d97ac03710be552efddd21a6cf7d3ec57590d19df13611d099bab4f1b9
+index.html,1683620417491,b6bdcc0a49b7dca42719133b2f30c921a6c93cfb60f96bc07d9dcadd38106cb8
diff --git a/public/appointments.html b/public/appointments.html
@@ -5,20 +5,28 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Gains</title>
-  <link rel="icon" href="./img/logo.png" sizes="2000x2000" type="image/png">
+  <link rel="icon" href="./img/icon.png" sizes="2000x2000" type="image/png">
   <link rel="stylesheet" href="./css/styles.css">
+  <script src="js/app.js"type="module"></script>
+  <script src="js/page-control.js"></script>
 </head>
 <body>
-  <nav id="topNav">
+  <nav class="topNav" id="topNav">
+    <img src="./img/logo.png" alt="GAINS" width="360px" style="padding-right:30px;object-fit:cover" >
+
     <div class="container">
-      <ul>
-        <li><img src="./img/logo.png" alt="GAINS" width="200"></li>
-        <li><a href="index.html">Home</a></li>
-        <li><a href="stats.html">Stats</a></li>
-        <li><a href="feed.html">Feed</a></li>
-        <li><a href="appointments.html">Appointments</a></li>
-        <li><a href="contact.html">Contact</a></li>
-      </ul>
+      <a href="main.html">Home</a>
+      <a href="food.html">Foods</a>
+      <a href="stats.html">Stats</a>
+      <a href="feed.html">Social</a>
+      <a class="active" href="appointments.html">Appointments</a>
+      <a href="contact.html">Contact</a>
+      <div class="topNav-right">
+        <a id="sign-out-button">Sign Out</a>
+        <a href="javascript:void(0);" class="icon" onclick="navMedia()">
+          <i class="fa fa-bars"></i>
+        </a>
+      </div>
     </div>
   </nav>
   <footer id="footermain">

diff --git a/public/contact.html b/public/contact.html
@@ -5,20 +5,28 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Gains</title>
-  <link rel="icon" href="./img/logo.png" sizes="2000x2000" type="image/png">
+  <link rel="icon" href="./img/icon.png" sizes="2000x2000" type="image/png">
   <link rel="stylesheet" href="./css/styles.css">
+  <script src="js/app.js"type="module"></script>
+  <script src="js/page-control.js"></script>
 </head>
 <body>
-  <nav id="topNav">
+  <nav class="topNav" id="topNav">
+    <img src="./img/logo.png" alt="GAINS" width="360px" style="padding-right:30px;object-fit:cover" >
+
     <div class="container">
-      <ul>
-        <li><img src="./img/logo.png" alt="GAINS" width="200"></li>
-        <li><a href="index.html">Home</a></li>
-        <li><a href="stats.html">Stats</a></li>
-        <li><a href="feed.html">Feed</a></li>
-        <li><a href="appointments.html">Appointments</a></li>
-        <li><a href="contact.html">Contact</a></li>
-      </ul>
+      <a href="main.html">Home</a>
+      <a href="food.html">Foods</a>
+      <a href="stats.html">Stats</a>
+      <a href="feed.html">Social</a>
+      <a href="appointments.html">Appointments</a>
+      <a class="active" href="contact.html">Contact</a>
+      <div class="topNav-right">
+        <a id="sign-out-button">Sign Out</a>
+        <a href="javascript:void(0);" class="icon" onclick="navMedia()">
+          <i class="fa fa-bars"></i>
+        </a>
+      </div>
     </div>
   </nav>
   <section id="foo">

diff --git a/public/feed.html b/public/feed.html
@@ -1,26 +1,39 @@
+<style>
+  html{
+    scroll-behavior: smooth;
+  }
+</style>
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Gains</title>
-  <link rel="icon" href="./img/logo.png" sizes="2000x2000" type="image/png">
+  <link rel="icon" href="./img/icon.png" sizes="2000x2000" type="image/png">
   <link rel="stylesheet" href="./css/styles.css">
   <link rel="stylesheet" href="./css/feed.css">
+  <script src="js/app.js"type="module"></script>
+  <script src="js/page-control.js"></script>
+  <script src="https://kit.fontawesome.com/f1fe956918.js" crossorigin="anonymous"></script>
 </head>
 <body>    
   <div id="top-nav-container">
-    <nav id="topNav">
+    <nav class="topNav" id="topNav">
+      <img src="./img/logo.png" alt="GAINS" width="360px" style="padding-right:30px;object-fit:cover" >
       <div class="container">
-        <ul>
-          <li><img src="./img/logo.png" alt="GAINS" width="200"></li>
-          <li><a href="index.html">Home</a></li>
-          <li><a href="stats.html">Stats</a></li>
-          <li><a href="feed.html">Feed</a></li>
-          <li><a href="appointments.html">Appointments</a></li>
-          <li><a href="contact.html">Contact</a></li>
-        </ul>
+        <a href="main.html">Home</a>
+        <a href="food.html">Foods</a>
+        <a href="stats.html">Stats</a>
+        <a class="active" href="feed.html">Social</a>
+        <a href="appointments.html">Appointments</a>
+        <a href="contact.html">Contact</a>
+        <div class="topNav-right">
+          <a id="sign-out-button">Sign Out</a>
+          <a href="javascript:void(0);" class="icon" onclick="navMedia()">
+            <i class="fa fa-bars"></i>
+          </a>
+        </div>
       </div>
     </nav>
   </div>
@@ -29,11 +42,12 @@
       <nav id="sideNav">
         <div class="container">
           <ul>
-            <li><a href="#">Search</a></li>
-            <li><a href="#">Notification</a></li>
-            <li><a href="#">Messages</a></li>
-            <li><a href="#">Explore</a></li>
-            <li><a href="#">Profile</a></li>
+            <li><a href="#"style="top:160px;background-color:#ff4057;">Search<i class="fa fa-magnifying-glass"style="text-indent:-1px;"></i></a></li>
+            <li><a href="#"style="top:230px;background-color:#fd8d9a;">Notification<i class="fa fa-fw fa-bell"style="text-indent:-1px;"></i></a></li>
+            <li><a href="#"style="top:300px;background-color:#ff4057;">Messages<i class="fa fa-fw fa-envelope"style="text-indent:-1px;"></i></a></li>
+            <li><a href="#"style="top:370px;background-color:#fd8d9a;">Explore<i class="fa fa-fw fa-compass"style="text-indent:-1px;"></i></a></li>
+            <li><a href="#"style="top:440px;background-color:#ff4057;">Profile<i class="fa fa-fw fa-user"style="text-indent:-1px;"></i></a></li>
+            <li><a href="#top"style="top:510px;background-color:#fd8d9a;">Top<i class="fa-solid fa-angles-up"style="text-indent:-1px;"></i></a></li>
           </ul>
         </div>
       </nav>

diff --git a/public/index.html b/public/index.html
@@ -87,16 +87,17 @@
   .hl {
     color:#ff4057;
   }
-  .topNav .icon {
-    display: none;
+
+  @media screen and (max-width:1366px) {
+    .section-container {
+      width:100%;
+    } 
   }
   @media only screen and (max-device-width:1366px) {
     .homepage-background {
       background-attachment: scroll;
     }
-    .section-container {
-      width:100%;
-    }
+
   }
 </style>
 <!DOCTYPE html>
@@ -127,10 +128,10 @@
     </div>
   </nav>
   <!-- Homepage-->
-  <div class="homepage-container page-container" id="homepage-container">
+  <div class="homepage-container page-container" id="homepage-container" style="padding:0;">
     <div class="homepage-background">
       <div class="homepage-content">
-        <div class="section-container" style="height:auto;padding-top:7%;">
+        <div class="section-container" style="height:80%;padding-top:7%;">
           <div class="left-container">
             <h1><span class="hl">G</span>ym <span class="hl">A</span>ssistance and <span class="hl">I</span>ntegrated <span class="hl">N</span>utrition <span class="hl">S</span>ystem</h1><br>
             <p>The ultimate fitness tracker for all your fitness lifestyle needs, whether it's a jog in the park, lifting weights, or a game of badminton. Our app comes with a calorie tracker and a stats page to track your health goals. Connect with your friends and see each others progress. Find local gyms and schedule appointments with them. Get fit today!</p><br>