admin/36628-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.1.1

Browse Source
This commit is contained in:
Flatlogic Bot 2025-12-03 16:43:37 +00:00
parent 59bfb3e308
commit 268b664286
3 changed files with 293 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
index.html Normal file
View File

@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gamified Fitness Tracker</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav">
<a href="#" class="nav-link active" data-tab="dashboard">Dashboard</a>
<a href="#" class="nav-link" data-tab="log">Log Workout</a>
<a href="#" class="nav-link" data-tab="quests">Quests</a>
<a href="#" class="nav-link" data-tab="achievements">Achievements</a>
<a href="#" class="nav-link" data-tab="history">History</a>
</nav>
<main id="app">
<!-- Dashboard Page -->
<div id="dashboard" class="page active">
<div class="header">
<h1 id="profile-name">Welcome, User!</h1>
<button id="edit-name-btn">Edit</button>
</div>
<div class="grid-container">
<div class="card">
<h2>XP & Level</h2>
<p>Level: <span id="level">1</span></p>
<div class="xp-bar-container">
<div class="xp-bar" id="xp-bar" style="width: 50%;"></div>
</div>
<p><span id="xp">50</span> / 100 XP</p>
</div>
<div class="card">
<h2>Rank</h2>
<p id="rank">Beginner</p>
<p><span id="rank-points">0</span> Points</p>
</div>
<div class="card">
<h2>Streak</h2>
<p><span id="streak">0</span> Days</p>
</div>
<div class="card full-width">
<h2>Monthly Streak</h2>
<div id="streak-calendar" class="calendar-grid"></div>
</div>
<div class="card">
<h2>Total Distance</h2>
<p><span id="total-distance">0</span> km</p>
</div>
<div class="card">
<h2>Total Push-ups</h2>
<p><span id="total-pushups">0</span></p>
</div>
<div class="card">
<h2>Total Sit-ups</h2>
<p><span id="total-situps">0</span></p>
</div>
<div class="card">
<h2>Total Squats</h2>
<p><span id="total-squats">0</span></p>
</div>
<div class="card">
<h2>Total Pull-ups</h2>
<p><span id="total-pullups">0</span></p>
</div>
<div class="card">
<h2>Other Workouts</h2>
<p><span id="total-other">0</span></p>
</div>
</div>
</div>
<!-- Log Workout Page -->
<div id="log" class="page">
<h1>Log a Workout</h1>
<form id="log-form">
<select id="workout-type" required>
<option value="running">Running</option>
<option value="pushups">Push-ups</option>
<option value="situps">Sit-ups</option>
<option value="squats">Squats</option>
<option value="pullups">Pull-ups</option>
<option value="other">Other</option>
</select>
<input type="number" id="workout-amount" placeholder="Kilometers or Reps" required>
<input type="date" id="workout-date" required>
<button type="submit">Log Workout</button>
</form>
</div>
<!-- Quests Page -->
<div id="quests" class="page">
<h1>Quests</h1>
<div id="quests-container" class="grid-container"></div>
</div>
<!-- Achievements Page -->
<div id="achievements" class="page">
<h1>Achievements</h1>
<div id="achievements-container" class="grid-container"></div>
</div>
<!-- History Page -->
<div id="history" class="page">
<h1>Workout History</h1>
<button id="toggle-history">Show Workout History</button>
<div id="history-container" style="display: none;"></div>
<div class="settings-container">
<h2>Settings</h2>
<button id="export-data">Export Data</button>
<button id="import-data">Import Data</button>
<input type="file" id="import-file" style="display: none;" accept=".json">
<button id="reset-data">Reset All Data</button>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>

28
script.js Normal file
View File

@ -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);
}
});

143
style.css Normal file
View File

@ -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);
}