From f1ec6125b332cfff3a9bcbc8ee469e025180dab5 Mon Sep 17 00:00:00 2001 From: Lim Jia Xian Date: Wed, 10 Jan 2024 20:24:10 +0800 Subject: [PATCH] Added menu nav buttons for easier navigation --- index.html | 69 ++++++++++++++++++++++++++++++++------- styles.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 151 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index a5135fc..ddec1c8 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,24 @@

- Jia Xian's PFD Blog -

-
-
-
+

+

+ +


+


+

- Week 1 -

The first week of PFD lesson involves the objectives of undertaking real-life IT projects by making use of @@ -29,13 +44,16 @@

- Week 1 -

SGTRACETOGETHER. As a result, my team is looking forward to discuss with our lecturer to refine and solidify it.

+
+ Back to top +




-
+

- Week 2 -

After meeting with our lecturer, our team decided to discard our prior concept because it did not @@ -112,13 +130,16 @@

- Week 2 -




+
+ Back to top +




-
+

- Week 3 -


@@ -152,13 +173,16 @@

- Week 3 -




+
+ Back to top +




-
+

- Week 4 -

Moving onto week 4, although we were unable to obtain a GPS tracker, my team and I continued to work on @@ -196,13 +220,16 @@

- Week 4 -


- Map output from python script -




+
+ Back to top +




-
+

- Week 5 (Hackathon) -


@@ -264,13 +291,16 @@

- Week 5 (Hackathon) -


Firstly, the ESP32 NodeMCU with its built-in WiFi capabilities can effectively communicate with web servers and send data. In this scenario, the ESP32 will be used to collect the GPS coordinates, which will then be transmitted to a MySQL database via an HTTP POST request to the PHP Webpage. PHP, a scripting language, will handle the server-side processing of receiving the data from the ESP32, and storing it in the MySQL database. Next, a python script with multiple libraries such as matplotlib and cartopy will be used to plot out the entire route and pathway of the security guard to visualise for areas of improvements.




+
+ Back to top +




-
+

- Break weeks -

After the valuable experience and knowledge learnt about requiring the Raspberry Pi to provide date and time for the Neo M6 GPS Hat. I decided to try and fix the problems that was unresolved back in the hackathon week.

@@ -286,13 +316,16 @@

- Break weeks -

Considering the potential inaccuracy of altitude readings, I intend to enhance the precision by incorporating a barometric pressure sensor for indoor altitude measurements.

+
+ Back to top +




-
+

- Week 12 -

@@ -328,45 +361,57 @@

- Week 12 -

- phpMyAdmin Mysql Database records -




+
+ Back to top +




-
+

- Week 13 -

...

+
+ Back to top +




-
+

- Week 14 -

...

+
+ Back to top +




-
+

- Week 15 -

...

+
+ Back to top +

diff --git a/styles.css b/styles.css index fd9b281..8fe3c91 100644 --- a/styles.css +++ b/styles.css @@ -65,6 +65,100 @@ h2{ img{ border-radius: 5px; } +.Top_Nav{ + text-align: center; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 10%; + height: 80px; + box-sizing: border-box; + position: sticky; + top: 0; + z-index: 1; +} +.button-nav { + align-items: center; + appearance: none; + background-color:white; + border-radius: 4px; + border-width: 0; + box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset; + box-sizing: border-box; + color: black; + cursor: pointer; + display: inline-flex; + font-family: "JetBrains Mono",monospace; + height: 48px; + justify-content: center; + line-height: 1; + list-style: none; + overflow: hidden; + padding-left: 16px; + padding-right: 16px; + position: relative; + text-align: left; + text-decoration: none; + transition: box-shadow .15s,transform .15s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + white-space: nowrap; + will-change: box-shadow,transform; + font-size: 18px; +} +.button-nav:focus { + box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; +} +.button-nav:hover { +box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; +transform: translateY(-2px); +} +.button-nav:active { +box-shadow: #D6D6E7 0 3px 7px inset; +transform: translateY(2px); +} +.button-nav-back { + align-items: center; + appearance: none; + background-color:black; + border-radius: 4px; + border-width: 0; + box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset; + box-sizing: border-box; + color:white; + cursor: pointer; + display: inline-flex; + font-family: "JetBrains Mono",monospace; + height: 48px; + justify-content: center; + line-height: 1; + list-style: none; + overflow: hidden; + padding-left: 16px; + padding-right: 16px; + position: relative; + text-align: left; + text-decoration: none; + transition: box-shadow .15s,transform .15s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + white-space: nowrap; + will-change: box-shadow,transform; + font-size: 18px; +} +.button-nav-back:focus { + box-shadow: white 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; +} +.button-nav-back:hover { +box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; +transform: translateY(-2px); +} +.button-nav-back:active { +box-shadow: white 0 3px 7px inset; +transform: translateY(2px); +} @media only screen and (max-width: 900px) { .blog-post{ width: 80%;