4 changed files with 7 additions and 210 deletions
@ -1,203 +0,0 @@ |
|||||||
<!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" /> |
|
||||||
<title>Wishlist</title> |
|
||||||
<style> |
|
||||||
.wishlist-container { |
|
||||||
max-width: 800px; |
|
||||||
margin: 30px auto; |
|
||||||
padding: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.wishlist-page-header { |
|
||||||
text-align: center; |
|
||||||
margin-bottom: 40px; |
|
||||||
} |
|
||||||
|
|
||||||
.wishlist-page-header h1 { |
|
||||||
font-size: 2em; |
|
||||||
color: #457B9D; /* Muted blue for main headings */ |
|
||||||
} |
|
||||||
|
|
||||||
.wishlist-page-header p { |
|
||||||
font-size: 1.1em; |
|
||||||
color: #495057; /* Slightly darker gray for descriptions */ |
|
||||||
} |
|
||||||
|
|
||||||
section { |
|
||||||
margin-bottom: 40px; |
|
||||||
padding: 20px; |
|
||||||
background-color: #FFFFFF; /* White for section backgrounds */ |
|
||||||
border-radius: 8px; |
|
||||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); |
|
||||||
} |
|
||||||
|
|
||||||
.add-wishlist h2, .wishlist-items h2 { |
|
||||||
margin-bottom: 20px; |
|
||||||
font-size: 1.5em; |
|
||||||
} |
|
||||||
|
|
||||||
.add-wishlist h2 { |
|
||||||
color: #A3C1AD; /* Muted green for emphasis */ |
|
||||||
} |
|
||||||
|
|
||||||
.wishlist-items h2 { |
|
||||||
color: #457B9D; /* Muted blue */ |
|
||||||
} |
|
||||||
|
|
||||||
.form-group { |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
label { |
|
||||||
display: block; |
|
||||||
font-weight: bold; |
|
||||||
margin-bottom: 8px; |
|
||||||
color: #495057; /* Dark gray for labels */ |
|
||||||
} |
|
||||||
|
|
||||||
input, textarea { |
|
||||||
width: 100%; |
|
||||||
padding: 10px; |
|
||||||
font-size: 1em; |
|
||||||
border: 1px solid #DDD; |
|
||||||
border-radius: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
textarea { |
|
||||||
resize: none; |
|
||||||
height: 100px; |
|
||||||
} |
|
||||||
|
|
||||||
.btn { |
|
||||||
display: inline-block; |
|
||||||
padding: 10px 20px; |
|
||||||
border: none; |
|
||||||
border-radius: 5px; |
|
||||||
font-size: 1em; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.primary-btn { |
|
||||||
background-color: #457B9D; /* Muted blue */ |
|
||||||
color: #FFFFFF; |
|
||||||
} |
|
||||||
|
|
||||||
.primary-btn:hover { |
|
||||||
background-color: #356081; |
|
||||||
} |
|
||||||
|
|
||||||
.danger-btn { |
|
||||||
background-color: #E57373; /* Light muted red */ |
|
||||||
color: #FFFFFF; |
|
||||||
} |
|
||||||
|
|
||||||
.danger-btn:hover { |
|
||||||
background-color: #D32F2F; |
|
||||||
} |
|
||||||
|
|
||||||
.items { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
gap: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.item { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
padding: 15px; |
|
||||||
border: 1px solid #DDD; |
|
||||||
border-radius: 5px; |
|
||||||
background-color: #F9F9F9; /* Subtle light gray for contrast */ |
|
||||||
} |
|
||||||
|
|
||||||
.item-info h3 { |
|
||||||
margin: 0 0 5px 0; |
|
||||||
font-size: 1.2em; |
|
||||||
color: #333; |
|
||||||
} |
|
||||||
|
|
||||||
.item-info p { |
|
||||||
margin: 0; |
|
||||||
font-size: 1em; |
|
||||||
color: #666; |
|
||||||
} |
|
||||||
|
|
||||||
.progress { |
|
||||||
font-weight: bold; |
|
||||||
color: #457B9D; /* Muted blue for progress text */ |
|
||||||
} |
|
||||||
|
|
||||||
.footer a:hover { |
|
||||||
color: #FFFFFF; |
|
||||||
} |
|
||||||
|
|
||||||
@media (max-width: 768px) { |
|
||||||
.items { |
|
||||||
gap: 15px; |
|
||||||
} |
|
||||||
|
|
||||||
.item { |
|
||||||
flex-direction: column; |
|
||||||
align-items: flex-start; |
|
||||||
} |
|
||||||
|
|
||||||
.item button { |
|
||||||
margin-top: 10px; |
|
||||||
align-self: flex-end; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
{{template "pageheader"}} |
|
||||||
<div class="wishlist-container"> |
|
||||||
<header class="wishlist-page-header"> |
|
||||||
<h1>Manage Your Wishlist</h1> |
|
||||||
<p>Add new goals or track progress on your current items.</p> |
|
||||||
</header> |
|
||||||
|
|
||||||
<section class="add-wishlist"> |
|
||||||
<h2>Add a New Goal</h2> |
|
||||||
<form id="add-item-form"> |
|
||||||
<div class="form-group"> |
|
||||||
<label for="item-name">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="item-description">Description</label> |
|
||||||
<textarea id="item-description" name="item-description" placeholder="Why is this goal important?" required></textarea> |
|
||||||
</div> |
|
||||||
<button type="submit" class="btn primary-btn">Add to Wishlist</button> |
|
||||||
</form> |
|
||||||
</section> |
|
||||||
|
|
||||||
<section class="wishlist-items"> |
|
||||||
<h2>Your Current Wishlist</h2> |
|
||||||
<div class="items"> |
|
||||||
<div class="item"> |
|
||||||
<div class="item-info"> |
|
||||||
<h3>Full-Stack Development Certification</h3> |
|
||||||
<p>Progress: <span class="progress">75%</span> funded</p> |
|
||||||
</div> |
|
||||||
<button class="btn danger-btn">Remove</button> |
|
||||||
</div> |
|
||||||
<div class="item"> |
|
||||||
<div class="item-info"> |
|
||||||
<h3>Data Science Course</h3> |
|
||||||
<p>Progress: <span class="progress">40%</span> funded</p> |
|
||||||
</div> |
|
||||||
<button class="btn danger-btn">Remove</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
|
|
||||||
|
|
||||||
</div> |
|
||||||
{{template "footer"}} |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Loading…
Reference in new issue