🌌 Space Connect 🌌

Space Connect is an Animated E-Commerce website where space enthusiasts can find resources to build their own satellite at home and other Space-Themed products.

🎯 Table Of Contents 🎯

1. 🛠 Tools/Technologies Used 🛠
2. 💡 Features & Functionalities 💡
   1. Landing Page
   2. Product Pages
   3. About Us and Contact Us Pages
3. 📄 Documentation 📄
   1. Basic Structure
   2. Common features and functionalities of All Webpages
   3. Landing Page / Home Page
   4. Product Pages
   5. About Us and Contact Us Pages
4. 🕸 Simulating The Website Locally 🕸
5. 🏔 Illustrations 🏔
6. 🌐 Accessing the Website 🌐
7. 📝 Important Note 📝

🛠 Tools/Technologies Used 🛠

• This Website has been developed using HTML, Vanilla CSS, Javascript.

• Parallax.js javascript library has been used to add Space animation and scrolling effects.

• The coding for this website has been done in Microsoft Visual Studio Code.

💡 Features & Functionalities 💡

1. Landing Page

• The main striking feature of the landing page is it's beautiful User Interface.

• The page welcomes you with a lovely interactive Space animation which reacts to your mouse movement.

• The entire website has a beautiful Space-themed background animation.

• The page has a Navigation Bar sporting the navigation links to different webpages of the website, and to the right-end is the Shopping Cart and the user profile.

• The page also comes with an Image Slider with 2-way Slide controls. This slider is used to display the various offers and products available on the website.

• Below the Image slider is the product carousel with a 'Buy Now' button on each product card which leads to the product page. This product carousel also comes with 2-way slide controls.

• The base of the website has a simple minimalistic footer.

2. Product Pages

• All the product pages have similar layout and functionality.

• Each product page features a user-friendly product carousel on the left-side of the page.

• Each product page also sports a modal product carousel, which allows the user to take a better look at the product.

• Each product page has the product category, product name and product description on the right-side of the page.

• Each product page comes with the add to cart functionality where users can select the quantity of the product, add it to the cart, and place the order or delete it from the cart.

3. About Us and Contact Us Pages

• The main attraction of both these webpages is the magnificient Earth - Moon animation.

• Hovering over the animation reveals an information card containing the about and contact information respectively.

📄 Documentation 📄

The following is a detailed documentation of the structure and working of the website.

1. Basic Structure

The website is made up of the following 9 webpages :

i. Landing Page : index.html

ii. Satellite Kit Page : satellite-kit.html

iii. Telescope Page : telescope.html

iv. Book Set Page : books.html

v. Hoodie Page : hoodie.html

vi. Satellite Phone Page : phone.html

vii. Space Food Page : food.html

viii. About Us Page : aboutUs.html

ix. Contact Us Page : contactUs.html

2. Common features and functionalities of All Webpages

i. Page Loading Animation

• Each webpage has a Saturn-themed page loading animation that stays for 3 extra seconds after the webpage has been completely rendered by the browser.

ii. Navigation Bar

• Each webpage has a navigation bar containing links redirecting them to the different webpages of the website.

• Hovering over the navigation bar renders a futuristic blue-white cursor.

• The navigation bar starts with the Space Connect logo which takes the user to the home page when clicked upon.

• The end of the navigation bar has a Shopping cart which opens a small white box when clicked upon.

• Beside the shopping cart is the user icon, which notifies the user that he/she is browsing as a guest. The Login/Sign In function hasn't been developed yet because of the time constraints (but soon will be).

iii. Footer

• Each webpage features a simple minimalistic footer.

3. Landing Page / Home Page

i. The landing page welcomes you with a lovely interactive Space animation which reacts to your mouse movement. This is the animation which takes the User Experience to the next level.

• This animation has been developed using the Parallax.js javascript library.

• The different layers of this animation have been stacked on top of one another by giving each layer a different depth.

ii. The landing page then features an image slider which displays the Offers and Product categories of the website.

• The image slider comes with two-way sliding control buttons at both ends of the image.

• Users can also use the radio button-like buttons below the slider to directly navigate to any slide in the image slider.

• Each Image is clickable and is linked to another related webpage.

iii. The landing page ends with a product carousal which displays the different products available on the website.

• Each product card sports an attractive 'Buy Now' button with click and hover effects.

• The users can click on the 'Buy Now' button on each product card to visit the corresponding product page.

• The carousel showcases six products in total and comes with two-way slide control buttons.

Next in line are the product pages.

4. Product Pages

i. All product pages have similar layout and functionalities.

ii. On the left side is the product carousel with one large image of the product.

• There are four clickable thumbnails below the large image. The large image changes to the corresponding image when clicked on any of the thumbnails.

• The large product image can be hovered over to reveal a magnifying glass which indicates that the image is clickable, and will allow the user to take a better look at the product.

iii. Clicking on the large image displays a Modal Carousel.

• This modal carousel is an enlarged view of the product and comes with two-way slide controls.

• The user can again directly go to any image by clicking the corresponding thumbnail below the large image.

• This modal can be closed by clicking the 'X' button at the top-right corner of the modal.

iv. The right-side of the product pages have the following information and features.

• The Product category is written on top.

• Then, the Product name / title is written.

• The product description is written below the product title.

• The product offer price is mentioned along with the discount percentage.

• Then, the MRP of the product is mentioned with a strike-through.

• The quantity of the product can be set before buying the product by clicking the +/- buttons.

• Once the quantity is set, user can click on the 'Add to Cart' button to add the product to his shopping cart.

v. Once a product is added to the cart :

• The shopping cart icon on the navigation bar displays the quantity of the product as a badge.

• User can click on the cart icon to see the order details like the quantity, and the total price payable.

• User can clear the shopping cart by clicking on the delete icon beside the order details.

• To place the order, user can simply click on the 'Place Order' button.

• On clicking the 'Place Order' button, a modal is displayed with a dialog box which confirms that the order has been placed.

• The modal can be closed by clicking on the 'X' button at the top-right corner of the modal.

• The shopping cart is automatically cleared on closing the order confirmation modal.

Next, we have the 'About Us' and 'Contact Us' pages.

5. About Us and Contact Us Pages

Both 'About Us' and 'Contact Us' pages sport the same layout and functionalities.

i. Both the pages feature a magnificient Earth - Moon animation which is a treat for the eyes.

• The magnificient Earth - Moon animation shows the Moon revolving around the Gigantic earth and has a hover effect.

• The animation reveals an information card containing relevent information when hovered upon and the Earth-Moon pair moves to the corner of the information card while the revolution animation continues on a small scale.

🕸 Simulating The Website Locally 🕸

To simulate the website in the local environment :

• Simply download the 'Space Connect' folder from this GitHub Repository as a .zip file or from this drive link.

• Extract it anywhere on your device.

• Now, open the 'index.html' file in this folder using an internet browser.

🏔 Illustrations 🏔

• Landing Page

• Satellite Kit Page

• Telescope Page

• Space Books Page

• Hoodie Page

• Space Food Page

• Modal Carousel

• Order Placed

• Earth Moon Animation

🌐 Accessing the Website 🌐

• The website has been deployed using Netlify and can be viewed by visiting the following URL :

  Space Connect - https://spaceconnect.netlify.app/

📝 Important Note 📝

1. The website is not fully responsive yet. So, the website is best viewed at 1280 X 610 viewport dimensions in the latest Google Chrome Browser.
2. The Shopping Cart on the Navigation Bar can be opened and closed only by clicking on the Shopping Cart Icon and cannot be closed by clicking elsewhere on the webpage.