You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.9 KiB
67 lines
2.9 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<link rel="stylesheet" type="text/css" href="assets/css/style.css" /> |
|
<link rel="stylesheet" type="text/css" href="assets/css/goals.css" /> |
|
<title>Goals</title> |
|
</head> |
|
<body> |
|
|
|
{{template "pageheader" . }} |
|
|
|
<div class="goals-container"> |
|
<header class="goals-page-header"> |
|
<h1 class="goals-page-header-title">Manage Your Goals</h1> |
|
<p class="goals-page-header-content">Add new goals or track progress on your current items.</p> |
|
</header> |
|
|
|
<section class="add-goal"> |
|
<h2 class="add-goal-title">Add a New Goal</h2> |
|
<form id="add-item-form" action="/goals" method="post"> |
|
<div class="form-group"> |
|
<label for="item-name" class="goals-form-label">Goal Name</label> |
|
<input type="text" id="item-name" name="item-name" placeholder="e.g., Full-Stack Certification" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="funding-amount" class="goals-form-label">Amount of funding needed</label> |
|
<input type="text" inputmode="numeric" id="funding-amount" name="funding-amount" placeholder="100.00" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="item-description" class="goals-form-label">Description</label> |
|
<textarea class="goals-textfield" id="item-description" name="item-description" placeholder="Why is this goal important?" required></textarea> |
|
</div> |
|
<div class="form-group"> |
|
<label for="item-url" class="goals-form-label">Link to learn more:</label> |
|
<input type="text" id="item-url" name="item-url" placeholder="Where can we learn more?" required></input> |
|
</div> |
|
<button type="submit" class="btn primary-btn">Add Goal</button> |
|
</form> |
|
</section> |
|
|
|
<section> |
|
<h2 class="add-goals-title">Your Current Goals</h2> |
|
<div class="goal-items"> |
|
<div class="goal-item"> |
|
<div class="item-info"> |
|
<h3 class="item-info-title">Full-Stack Development Certification</h3> |
|
<p class="item-info-content">Progress: <span class="goal-progress">75%</span> funded</p> |
|
</div> |
|
<button class="btn danger-btn">Remove</button> |
|
</div> |
|
<div class="goal-item"> |
|
<div class="item-info"> |
|
<h3 class="item-info-title">Data Science Course</h3> |
|
<p class="item-info-content">Progress: <span class="goal-progress">40%</span> funded</p> |
|
</div> |
|
<button class="btn danger-btn">Remove</button> |
|
</div> |
|
</div> |
|
</section> |
|
</div> |
|
|
|
{{template "footer"}} |
|
|
|
</body> |
|
</html> |