<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script src="test.js"></script>
</head>
<body>
<div class="bg"></div>
<nav>
<a href="" class="active"><ion-icon name="home"></ion-icon></a>
<a href=""><i class="fa-solid fa-person-running"></i></ion-icon></a>
<a href=""><i class="fa-solid fa-medal"></i></a>
<a href="" style="font-size: 1.4rem"><i class="fa-solid fa-heart"></i></a>
<a href=""><ion-icon name="people"></ion-icon></a>
<div class="navspacer"></div>
<a href=""><ion-icon name="settings"></ion-icon></a>
<a href=""><ion-icon style="
font-size: 1.75rem;" name="person-circle-outline"></ion-icon></a>
</nav>
<div class="dashboard">
<div class="card profile" style="grid-area: 1/1/2/3">
<h2>Good Morning Champ!</h2>
<p>Time to seize the day</p>
</div>
<div class="card schedule-table" style="grid-area: span 2 / span 2">
<h2>Weekly Schedule</h2>
<table>
<tr>
<th>Day</th>
<th>Exercise</th>
<th>Time</th>
</tr>
<tr>
<td>Monday</td>
<td>Running</td>
<td>6:00</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Swimming</td>
<td>7:00</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Cycling</td>
<td>6:30</td>
</tr>
<tr>
<td>Thursday</td>
<td>Yoga</td>
<td>6:00</td>
</tr>
<tr>
<td>Friday</td>
<td>Weight Training</td>
<td>8:00</td>
</tr>
</table>
</div>
<div class="card calories" style="grid-area: 2/1/3/3">
<h2>Active Calories</h2>
<div class="bigstats">
<div class="stat">
<div class="statnum">500</div>
<div class="stattext">Today</div>
</div>
<div class="stat">
<div class="statnum">3500</div>
<div class="stattext">This Week</div>
</div>
<div class="stat">
<div class="statnum">14K</div>
<div class="stattext">This Month</div>
</div>
</div>
</div>
<div class="card exercise-table" style="grid-area: span 2 / span 2">
<h2>Last 5 Exercises</h2>
<div class="bigstats">
<div class="stat">
<div class="statnum">30m</div>
<div class="stattext">Running</div>
</div>
<div class="stat">
<div class="statnum">45m</div>
<div class="stattext">Swimming</div>
</div>
<div class="stat">
<div class="statnum">60m</div>
<div class="stattext">Cycling</div>
</div>
<div class="stat">
<div class="statnum">40m</div>
<div class="stattext">Yoga</div>
</div>
<div class="stat">
<div class="statnum">50m</div>
<div class="stattext">Weight Training</div>
</div>
</div>
</div>
<div class="card personal-bests" style="grid-area: span 2 / span 2">
<h2>Personal Bests</h2>
<ul>
<li>
Fastest 5K Run
<div class="statnum">20m</div>
</li>
<li>
Heaviest Deadlift
<div class="statnum">250lbs</div>
</li>
<li>
Longest Plank:
<div class="statnum">2m</div>
</li>
</ul>
</div>
<div class="card challenges" style="grid-area: span 2 / span 2">
<h2>Challenges</h2>
<ul>
<li>
<span>30-day running streak</span>
<div class="progresscircle" style="--progress: 33">
<div>10/30</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke-linecap="round" />
</svg>
</div>
</li>
<li>
<span>1000 pushups in a month</span>
<div class="progresscircle" style="--progress: 67">
<div>670</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke-linecap="round" />
</svg>
</div>
</li>
<li>
<span>Swim 20km in a month</span>
<div class="progresscircle" style="--progress: 45">
<div>9/20</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke-linecap="round" />
</svg>
</div>
</li>
</d>
</div>
<div class="card activity-feed" style="grid-area: span 2 / span 2">
<h2>Friends Activity</h2>
<ul>
<li>Jane just set a new record in cycling: 30 miles!</li>
<li>Mike completed the 30-Day Running Streak Challenge!</li>
<li>Anna shared a new workout: 'Hill Sprints Interval'.</li>
</ul>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://kit.fontawesome.com/e267099c50.js" crossorigin="anonymous"></script>
</body>
</html>