This repository contains the source code for a fitness app UI design I worked on, showcased in the provided screenshot. The design was created on my country's Independence Day, and I wanted to save this project for future reference, as it marks both a personal coding achievement and a memorable day.
The app's UI is designed to track fitness activities such as running and swimming. It displays key stats like distance, type of activity, and the most recent workout session in a clean, minimal interface. The background features a map, and the main focus is on readability and user interaction.
- Map Background: The background consists of a city map, creating an adventurous and exploratory feel.
- Activity Stats: Displays distance covered and type of training in prominent, rounded cards.
- Interactive Buttons: Includes circular buttons for starting new activities, switching between modes, and controlling music.
- Responsive Design: Designed with flexibility in mind, ensuring a good experience across different screen sizes.
- HTML5: Basic structure of the layout.
- CSS3: For styling, including flexbox, positioning, and z-index management.
- SVG: Used for shapes and icons.
- Tailwind CSS: Utilized for utility-first styling.
- User-Friendly: Focused on creating a minimal and easy-to-use interface that highlights the essential information for users.
- Layering with z-index: Managed the z-index and positioning for the elements to ensure the stat cards appear clearly on top of the background SVG.
- Modern Look: Aimed for a clean, modern design with rounded cards and a central play button to make the interface feel intuitive and interactive.
This project was created on October 1, 2024, my country's Independence Day, making it a memorable piece of work. It’s both a reflection of my current coding journey and an experiment in UI/UX design. I’m saving it here as a reminder of progress and for potential future enhancements.
- Further refinement of the design and interactivity.
- Potentially adding animations or hover effects for buttons.
- Optimizing for mobile responsiveness.
- GitHub: Osgilb