haikalakif / geotracker-website

A website about an Augmented Reality mobile application in HTML, CSS & JS for our Web Technologies subject

Table of Contents

1. Introduction
2. Project Description
3. Project Site Map
4. Group Contributions
5. Use of Third Party Resources
6. References

Introduction

Group Cynics 'GeoTracker' is a website that provide an underrated hiking trails and picnic spots in Malaysia. Prepared By:

Name	Matric Number
Haikal Akif Bin Shaari	2118451
Muhammad Khairul Ikhwan Bin Mohd Iqbal	2110753
Muhammad Arif Faisal bin Zahari	2117277

Project Description

For our group project, we decided to choose “Tourism” as our preferred theme. The title of our project is GeoTracker. GeoTracker is a web-based application that focuses on promoting recreational activities such as hiking and exploring nature. We believe that as human beings, we need to get closer and spend our time more with nature. Our company was inspired by one of the Sustainable Development Goals stated by the United Nations which is “Life on Land”. We feel that it is our responsibility to promote the idea of protecting and restoring the ecosystem while at the same time promoting natural tourist attractions that are within your area.

GeoTracker’s website will consist of three web pages which are “Home & Explore Page”, “Help & Feedback Page” and “About Us & Contact Page”. All three web pages can be easily navigated using the navigation bar located at the top of each website. We want to keep the simplicity of the web pages by not mixing too many fonts in each webpage. We use a color palette consisting of green, black, and white colors that complement each other and also best represent nature itself.

The main “Home and Explore Page” will show some suggestions of places to visit near your location. The user also has the option to search for specific places or trails using the search bar provided. The page provides some description of the place such as directions to the destination, length of trails, and photos of the place. Users can leave their ratings and comments on the place to help other users to get a better picture of the difficulty of the trail and other useful information. We also provide a donation button so that the user can show their support in protecting and sustaining the ecosystem.

The “Help & Feedback Page” is to help users who have some queries about the operations of GeoTracker. Our company will create a FAQ section where the users can see the answer to their questions. If the user had any sort of problems or wants to give feedback, we will provide a feedback form that will be directly sent to our company’s email address. We are welcoming any feedback to ensure that we give the best service to our customers.

Lastly, the “About Us and Contact Page” will be used to explain the background of the company and also introduce the masterminds behind the project. It will include the name of the members and their position in the company. Hopefully, our group project can bring excitement to the users to explore and at the same time can preserve the beauty of the nature.

Project Site Map

Group Contribution

Each of the team members create a webpage for this project as shown in the table below

Name	Contributions
Haikal Akif (2118451)	-Develop the home page structure
	-Use css to improve the web designs for all pages
	-Develop navigation in the header and styling the footer
	-Using GSap library to insert animation for the elements in every pages
Arif Faisal (2117277)	-Develop the about page structure
	-Develop a customize popup for the sign up and log in button
	-Import new font: DM Sans (sans serif font)
	-Import font awesome icons
Khairul Ikhwan (2110753)	-Develop the help page structure
	-Create normal popup for the community navigation
	-Design the customize logo
	-Make research and supply the assets and url of the images

Use of Third Party Resource

Web elements	Name	Use of third party resources and modifications
Gsap	Haikal Akif	Gsap is a JavaScript library and been used in every pages to animate every elements animation once the user scroll the page
Google Font	Arif Faisal	A google font from sans serif family named DM Sans was used in our website
Font Awesome Icon	Arif Faisal	Several font awesome icons was imported to be use in our website

References

GreenSock, LLC. GSAP - GreenSock Animation Platform. Retrieved 2022 from https://greensock.com/gsap/

Google. Google Fonts - DM Sans. Retrieved 2022 from https://fonts.google.com/

Font Awesome. Font Awesome Icons. Retrieved from https://fontawesome.com/icons