MyTown Trickster Game Website

Overview

This repository contains the files and resources for the MyTown Trickster Game Website project. The website is responsive and includes interactive elements, custom form validation, and a polished UI/UX design created in Figma.

This project was originally developed as part of a university assignment, where I was tasked with creating a multi-page game website for a fictional game company. However, I've decided to share it on GitHub to showcase my skills in UI/UX design and Front End Development. This project also serves as part of my portfolio for joining the Apple Developer Academy Indonesia.

Figma Design

https://www.figma.com/design/8nargME0MmbMyEpFPqaMLR/Game-Web-Page-UI%2FUX-Design?node-id=0-1&t=Wox47v4eaY6G4xYr-1

Project Structure

The repository is organized as follows:

/root
│── README.md                       # This file
│── Referensi.txt                   # Reference document (if applicable)
│── Proyek HCI.fig                  # Figma design file for UI/UX
│── assets/                         # Contains images and other assets used across the website
│── css/
│   ├── gamepage.css                # CSS for Game Page
│   ├── mainpage.css                # CSS for Home Page
│   ├── signuppage.css              # CSS for Sign Up Page
│   ├── supportpage.css             # CSS for Support Page
│   ├── townpage.css                # CSS for Town Page
│── html/
│   ├── gamepage.html               # Game Page HTML file
│   ├── mainpage.html               # Home Page HTML file
│   ├── signuppage.html             # Sign Up Page HTML file
│   ├── supportpage.html            # Support Page HTML file
│   ├── townpage.html               # Town Page HTML file
│── javascript/
    ├── gamepage.js                 # JavaScript for Game Page
    ├── mainpage.js                 # JavaScript for Home Page
    ├── signuppage.js               # JavaScript for Sign Up Page
    ├── supportpage.js              # JavaScript for Support Page
    └── townpage.js                 # JavaScript for Town Page

Pages Overview

1. Home Page (mainpage.html)

• Banner: Features a promotional video of the game.
• Story Content: A section that tells the story behind the game.
• Map and Town Descriptions: Provides descriptions of the game's map and towns.
• Call to Action: A visually appealing image with a large button prompting users to sign up for the game.

2. Game Page (gamepage.html)

• Gallery Display: Showcases various game-related images, including gameplay screenshots and concept art.

3. Town Page (townpage.html)

• Town Descriptions: Displays information about three towns in the game, including their names and descriptions.

4. Sign Up Page (signuppage.html)

• Pre-Register Form: A form allowing users to pre-register for the game.
• Form Fields: Includes fields for email, password, confirm password, age, gender, and acceptance of terms and conditions.
• Form Validation: Custom validation using JavaScript to ensure the correctness of user inputs without relying on regular expressions.

5. Support Page (supportpage.html)

• System Requirements: Provides information on the minimum and recommended system specifications required to play the game.
• Specs: Includes supported operating systems, CPU, and GPU requirements.

Technologies Used

• HTML5: Structure and content for all pages.
• CSS3: Styling and layout, ensuring responsiveness across different devices.
• JavaScript: Interactive features, including form validation and dynamic content.
• Figma: UI/UX design, creating a cohesive and visually appealing design prototype.

Usage

1. Clone this repository:

   git clone https://github.com/Veternum/MyTown-Trickster-Game-Website.git

2. Navigate to the project directory:

   cd MyTown-Trickster-Game-Website

3. Open any HTML file within the html/ directory in your web browser to view the corresponding page:

   open html/mainpage.html

4. To view or edit the design, open the Figma file located in the root directory using Figma.

Screenshots

Thank you for visiting my project! If you find it useful or interesting, please consider starring the repository.