diff --git a/index.html b/index.html new file mode 100644 index 0000000..307c607 --- /dev/null +++ b/index.html @@ -0,0 +1,122 @@ + + + + + + Gamified Fitness Tracker + + + + + + +
+ +
+
+

Welcome, User!

+ +
+ +
+
+

XP & Level

+

Level: 1

+
+
+
+

50 / 100 XP

+
+
+

Rank

+

Beginner

+

0 Points

+
+
+

Streak

+

0 Days

+
+
+

Monthly Streak

+
+
+
+

Total Distance

+

0 km

+
+
+

Total Push-ups

+

0

+
+
+

Total Sit-ups

+

0

+
+
+

Total Squats

+

0

+
+
+

Total Pull-ups

+

0

+
+
+

Other Workouts

+

0

+
+
+
+ + +
+

Log a Workout

+
+ + + + +
+
+ + +
+

Quests

+
+
+ + +
+

Achievements

+
+
+ + +
+

Workout History

+ + +
+

Settings

+ + + + +
+
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..d716243 --- /dev/null +++ b/script.js @@ -0,0 +1,28 @@ +document.addEventListener('DOMContentLoaded', () => { + const navLinks = document.querySelectorAll('.nav-link'); + const pages = document.querySelectorAll('.page'); + + navLinks.forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const tab = link.getAttribute('data-tab'); + + navLinks.forEach(l => l.classList.remove('active')); + link.classList.add('active'); + + pages.forEach(p => p.classList.remove('active')); + document.getElementById(tab).classList.add('active'); + }); + }); + + // Dummy data for calendar + const calendar = document.getElementById('streak-calendar'); + for (let i = 0; i < 35; i++) { + const day = document.createElement('div'); + day.classList.add('calendar-day'); + if (Math.random() > 0.7) { + day.classList.add('active'); + } + calendar.appendChild(day); + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..9eb1334 --- /dev/null +++ b/style.css @@ -0,0 +1,143 @@ +:root { + --primary-color: #1ABC9C; + --secondary-color: #F39C12; + --background-color: #F4F6F9; + --surface-color: #FFFFFF; + --text-color: #333333; + --light-gray-color: #EAEAEA; + --font-family: 'Poppins', sans-serif; +} + +body { + font-family: var(--font-family); + background-color: var(--background-color); + color: var(--text-color); + margin: 0; + padding: 70px 0 20px; +} + +.nav { + position: fixed; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + background-color: var(--surface-color); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + padding: 10px 0; + z-index: 1000; +} + +.nav-link { + color: var(--text-color); + text-decoration: none; + padding: 10px 20px; + margin: 0 10px; + border-radius: 8px; + transition: background-color 0.3s, color 0.3s; +} + +.nav-link.active, .nav-link:hover { + background-color: var(--primary-color); + color: var(--surface-color); +} + +#app { + padding: 20px; +} + +.page { + display: none; +} + +.page.active { + display: block; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; +} + +.card { + background-color: var(--surface-color); + border-radius: 12px; + padding: 20px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +.card.full-width { + grid-column: 1 / -1; +} + +.xp-bar-container { + background-color: var(--light-gray-color); + border-radius: 10px; + height: 20px; + overflow: hidden; + margin: 10px 0; +} + +.xp-bar { + background-color: var(--primary-color); + height: 100%; + border-radius: 10px; + transition: width 0.5s ease-in-out; +} + +.calendar-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 5px; +} + +.calendar-day { + background-color: var(--light-gray-color); + height: 40px; + border-radius: 5px; +} + +.calendar-day.active { + background-color: var(--primary-color); +} + +form { + display: flex; + flex-direction: column; + gap: 15px; + max-width: 400px; +} + +select, input, button { + padding: 12px; + border-radius: 8px; + border: 1px solid var(--light-gray-color); + font-size: 16px; +} + +button { + background-color: var(--primary-color); + color: var(--surface-color); + border: none; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + opacity: 0.9; +} + +.settings-container { + margin-top: 40px; + padding-top: 20px; + border-top: 1px solid var(--light-gray-color); +}