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.
161 lines
4.8 KiB
161 lines
4.8 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" /> |
|
<title>Dashboard</title> |
|
<style> |
|
|
|
.dashboard-container { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 20px; |
|
} |
|
|
|
.welcome { |
|
text-align: center; |
|
margin-bottom: 30px; |
|
} |
|
|
|
.welcome h1 { |
|
color: #457b9d; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.welcome p { |
|
font-size: 1.2em; |
|
color: #495057; |
|
} |
|
|
|
.section { |
|
margin-bottom: 40px; |
|
padding: 20px; |
|
border-radius: 8px; |
|
} |
|
|
|
.section h2 { |
|
color: #457b9d; |
|
margin-bottom: 20px; |
|
text-align: center; |
|
} |
|
|
|
.cards { |
|
display: grid; |
|
grid-template-columns: repeat(2, 1fr); /* Two columns layout */ |
|
gap: 20px; /* Space between cards */ |
|
} |
|
|
|
.card { |
|
background-color: #ffffff; |
|
border-radius: 8px; |
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); |
|
padding: 15px; |
|
text-align: center; |
|
} |
|
|
|
.card h3 { |
|
margin: 0 0 10px 0; |
|
color: #495057; |
|
} |
|
|
|
.card p { |
|
font-size: 0.9em; |
|
color: #666; |
|
margin-bottom: 15px; |
|
} |
|
|
|
.card button { |
|
padding: 10px 20px; |
|
border: none; |
|
border-radius: 5px; |
|
background-color: #a3c1ad; |
|
color: white; |
|
font-size: 1em; |
|
cursor: pointer; |
|
} |
|
|
|
.card button:hover { |
|
background-color: #91a4b1; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<div class="header"> |
|
<img src="assets/images/logo.jpg" class="logo"/> |
|
<h1 class="title"> |
|
{{ .title }} |
|
</h1> |
|
|
|
{{if eq .isLoggedIn false}} |
|
<a href="/login" class="login-banner-link">Login</a> |
|
{{ else }} |
|
<a href="auth/logout/twitch" class="login-banner-link">Logout</a> |
|
{{ end }} |
|
|
|
</div> |
|
<div class="dashboard-container"> |
|
<div class="dashboard-container"> |
|
<div class="welcome"> |
|
<h1>Welcome, Codegirl007!</h1> |
|
<p>Find your path, fund futures, or inspire a community today.</p> |
|
</div> |
|
|
|
<div class="section learners"> |
|
<h2>Build Your Tech Future</h2> |
|
<div class="cards"> |
|
<div class="card"> |
|
<h3>Your Wishlist</h3> |
|
<p>Track your certifications and courses. Update or add goals to keep your community engaged.</p> |
|
<button>Add a Goal</button> |
|
</div> |
|
<div class="card"> |
|
<h3>Community Opportunities</h3> |
|
<p>Join upcoming hackathons or community events to grow your skills and network.</p> |
|
<button>View Events</button> |
|
</div> |
|
<div class="card"> |
|
<h3>Learning Resources</h3> |
|
<p>Access curated tutorials, guides, and practice challenges to enhance your skills.</p> |
|
<button>Explore Resources</button> |
|
</div> |
|
<div class="card"> |
|
<h3>Connect with Mentors</h3> |
|
<p>Get advice and guidance from experienced professionals to boost your learning journey.</p> |
|
<button>Find a Mentor</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="section supporters"> |
|
<h2>Help Make Dreams Happen</h2> |
|
<div class="cards"> |
|
<div class="card"> |
|
<h3>Fund a Goal</h3> |
|
<p>Choose a learner’s wishlist item and contribute to their education journey.</p> |
|
<button>Browse Wishlists</button> |
|
</div> |
|
<div class="card"> |
|
<h3>Host or Sponsor a Hackathon</h3> |
|
<p>Support innovation by organizing or sponsoring a hackathon for the community.</p> |
|
<button>Get Involved</button> |
|
</div> |
|
<div class="card"> |
|
<h3>Support a Streamer</h3> |
|
<p>Boost streamers who are funding education for members of their community.</p> |
|
<button>View Streamers</button> |
|
</div> |
|
<div class="card"> |
|
<h3>Track Your Impact</h3> |
|
<p>See the difference your contributions are making through real-time progress updates.</p> |
|
<button>View Impact</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
{{template "footer"}} |
|
|
|
</body> |
|
</html> |