diff --git a/servicePoints/templates/index.html b/servicePoints/templates/index.html
index 45eae1167e75261f2717df101e1955aa37153414..50f2bab721cfe29d66b1babe0b87d3570db6eefb 100644
--- a/servicePoints/templates/index.html
+++ b/servicePoints/templates/index.html
@@ -2,37 +2,110 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css">
+
+ <style>
+ .dropbtn {
+ background-color: darkgray;
+ color: black;
+ padding: 8px;
+ font-size: 14px;
+ border: none;
+ cursor: pointer;
+ }
+
+ .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;
+ }
+ </style>
+</head>
+<body>
+ Username: {{username}}
+ <div class="dropdown">
+ <button onclick="myFunction()" class="dropbtn">Settings</button>
+ <div id="myDropdown" class="dropdown-content">
+ <a href="/accounts/profile/">Profile</a>
+ <a href="/accounts/logout/">Logout</a>
+ </div>
+ </div>
+
<h1 style="text-align:center">Welcome to ServicePoints!</h1>
- <p>{{username}}</p>
<p>{{org}}</p>
<p>Hours: {{hours}}</p>
- <a href="/accounts/logout/">logout</a>
- <a href="/accounts/delete/">delete</a>
<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/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/mask/">
<img src=/images/view.png alt="mask">
</a>
<a href="/accounts/mask/">
<img src=/images/requests.png alt="mask">
</a>
- {% endif %}
+ {% endif %}
</p>
-</head>
+
+ <script>
+ /* When the user clicks on the button,
+ toggle between hiding and showing the dropdown content */
+ function myFunction() {
+ document.getElementById("myDropdown").classList.toggle("show");
+ }
+
+ // 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>
diff --git a/servicePoints/templates/userProfile.html b/servicePoints/templates/userProfile.html
new file mode 100644
index 0000000000000000000000000000000000000000..6ffce25dab58858e3af66680ce72c286144a3c3f
--- /dev/null
+++ b/servicePoints/templates/userProfile.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="/css/style.css">
+ <title>Profile</title>
+
+ <a href="/">Home</a>
+</head>
+<body>
+ <h1 style="text-align:center">Profile</h1>
+
+ <a href="/accounts/logout/">logout</a>
+ <a href="/accounts/delete/">delete</a>
+
+
+
+</body>
+
+</html>
diff --git a/servicePoints/views/accounts.py b/servicePoints/views/accounts.py
index 7ae7cf54926f175b83e8f4f0c35fb0f74de23c2f..c23453f976afe5bf203107f554ebd489541b78e7 100644
--- a/servicePoints/views/accounts.py
+++ b/servicePoints/views/accounts.py
@@ -263,6 +263,11 @@ def food():
context = {}
return render_template('food.html', **context)
+@servicePoints.app.route('/accounts/profile/')
+def profile():
+ context = {}
+ return render_template('userProfile.html', **context)
+
@servicePoints.app.route('/images/<path:filename>', methods=['GET', 'POST'])
def images(filename):
if "username" in flask.session: