Skip to content
Snippets Groups Projects
Commit 564ac92c authored by mrschnei's avatar mrschnei
Browse files

Updated the UI for the home page and point submissions

parent d0ba4706
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
servicePoints/templates/index.html
+ 128
− 132
View file @ 564ac92c
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.dropbtn {
background-color: #333;
color: #f2f2f2;
padding: 12px;
margin-right: 20px;
font-size: 16px;
border: none;
cursor: pointer;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
.dropdown {
position: relative;
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 0;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.topnav {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topnav button:hover {
background: rgba(0,0,0,0.2);
}
main {
margin-top: 75px;
}
.topitem {
color: #f2f2f2;
float: left;
display: block;
font-size: 16px;
padding: 14px 16px;
}
</style>
</head>
<body>
<div class="topnav">
<div class="topitem">
Username: {{username}}
</div>
<div class="topitem">
Organization: {{org}}
</div>
<div class="topitem">
Hours: {{hours}}
<div class="jumbotron text-center" style="margin-bottom:0; ">
<h1>ServicePoints!</h1>
<p>Connect with your Org</p>
</div>
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color:#7952b3;">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/accounts/blood/">Blood Drives</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/food/">Food Drives</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/mask/">Mask Making</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/tutorsu/">Tutoring</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Settings
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/accounts/profile/">View Profile</a>
{% if leader == 1 %}
<a class="dropdown-item" href="/accounts/manageOrg/">Manage Org</a>
{% endif %}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/accounts/logout/">Logout</a>
</div>
</li>
</ul>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Settings</button>
</nav>
<div id="myDropdown" class="dropdown-content">
<a href="/accounts/profile/">Profile</a>
<hr />
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-8">
<div>
<h2>Pending Service Points:</h2>
<div>
<h5>Masks</h5>
<p>Points: 10</p>
<p>Include some notes or the submitted picture or the date submitted</p>
</div>
<div>
<h5>Food Drive</h5>
<p>Points: 10</p>
<p>Include some notes or the submitted picture or the date submitted</p>
</div>
</div>
<h2>Your Past Service</h2>
<div>
<h5>Masks</h5>
<p>Points: 10</p>
<p>Include some notes or the submitted picture or the date submitted</p>
</div>
</div>
<div class="col-sm-4">
<p>
<a href="" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#pointsModal" style="background-color:#03DAC6;">Submit Points</a>
</p>
<p>
<a class="btn btn-default btn-lg btn-block" href="#" role:"button" style="background-color:#03DAC6;">Submit a Service Opportunity</a>
</p>
{% if leader == 1 %}
<a href="/accounts/manageOrg/">Manage Org</a>
<hr />
<p>
<a class="btn btn-default btn-lg btn-block" href="/accounts/viewRequests/" role:"button" style="background-color:#03DAC6;">Review Submissions</a>
</p>
<p>
<a class="btn btn-default btn-lg btn-block" href="/accounts/viewMemberPoints/" role:"button" style="background-color:#03DAC6;">View Points</a>
</p>
{% endif %}
<a href="/accounts/logout/">Logout</a>
<h2>Your Info: </h2>
<p>Username: {{username}}</p>
<p>Organization: {{org}}</p>
<p>Hours: {{hours}}</p>
<hr class="d-sm-none">
</div>
</div>
</div>
<main>
<h1 style="text-align:center">Welcome to ServicePoints!</h1>
<p>
<a href="/accounts/mask/">
<img src=/images/mask.png alt="mask">
</a>
<a href="/accounts/blood/">
<img src=/images/blood.png alt="blood">
</a>
<a href="/accounts/food/">
<img src=/images/food.png alt="food">
</a>
<a href="/accounts/tutorsu/">
<img src=/images/tutor.png alt="tutorsu">
</a>
<a href="/accounts/submitPoints/">
<img src=/images/submit.png alt="mask">
</a>
{% if leader == 1 %}
<a href="/accounts/viewMemberPoints/">
<img src=/images/view.png alt="view">
</a>
<a href="/accounts/viewRequests/">
<img src=/images/approval.png alt="requests">
</a>
{% endif %}
</p>
</main>
<div class="modal fade" id="pointsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Submit Points</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="/accounts/submitPoints/" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="service">Select the type of service:</label>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
<select name="service" id="service" class="form-control">
<option value="mask">Mask-Making</option>
<option value="blood">Donating Blood</option>
<option value="tutor">Tutoring</option>
<option value="food">Donating Food</option>
</select>
</div>
<div class="form-group">
<label for="file">Photo for proof of service</label>
<input type="file" name="file">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" name="update" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0; ">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment