From c950d77d2fe49710007d77693cd2e383586c9218 Mon Sep 17 00:00:00 2001
From: mrschnei <mrschnei@umich.edu>
Date: Wed, 22 Jul 2020 15:57:39 -0400
Subject: [PATCH] Updated UI for the create account page and home page
---
servicePoints/templates/create.html | 160 +++++++++++++++++++++-------
servicePoints/templates/index.html | 135 ++++++++++++++---------
2 files changed, 203 insertions(+), 92 deletions(-)
diff --git a/servicePoints/templates/create.html b/servicePoints/templates/create.html
index efc879f..1e7fe83 100644
--- a/servicePoints/templates/create.html
+++ b/servicePoints/templates/create.html
@@ -1,48 +1,126 @@
<!DOCTYPE html>
<html>
-<body>
+
+<head>
<title>ServicePoints</title>
- <p>
- Want to register an organization with your new account account?
- <a href="/accounts/createOrg/">Register as organization leader</a>
- </p>
-<p>
- Once you select an organization to join, a request will be sent for approval.
- Until approved, your organization will appear as 'None.'
-</p>
- <form action="/accounts/create/" method="post" enctype="multipart/form-data">
- <p>
- <label for="orgName">Select an Organization:</label>
- <select name="orgName" id="orgName">
- <option value="NONE">Choose Later</option>
- {% for org in orgs %}
- {% if org.orgName != 'NONE' %}
- <option value="{{org.orgName}}">{{org.orgName}}</option>
- {%endif%}
- {% endfor %}
- </select>
- </p>
- <p>
- Your Name
- <input type="text" name="fullname" />
- </p>
- <p>
- Username
- <input type="text" name="username" />
- </p>
- <p>
- Email
- <input type="text" name="email" />
- </p>
+
+ <style>
+
+ a {
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ body {
+ padding: 70px 0;
+ font-family: Arial, Helvetica, sans-serif;
+ display: grid;
+ justify-items: center;
+ align-items: center;
+ }
+
+ input[type=submit]:hover {
+ opacity: 0.8;
+ }
+
+ .main-container {
+ width: 40%;
+ height: 100%;
+ display: grid;
+ justify-items: center;
+ align-items: center;
+ background-color: white;
+ border-radius: 7px;
+ border: 3px solid black;
+ padding: 10px 10px 10px 10px;
+ }
+
+ input[type=text], input[type=password] {
+ border: none;
+ border-bottom: 1px solid #3a3a3a;
+ margin-bottom: 15px;
+ margin-left: 5px;
+ border-radius: 3px;
+ outline: none;
+ padding: 0px 0px 5px 5px;
+ flex: 1;
+ }
+
+ #login-form-submit {
+ width: 100%;
+ padding: 10px;
+ border: none;
+ border-radius: 5px;
+ color: white;
+ font-weight: bold;
+ background-color: #3a3a3a;
+ }
+
+ #login-form {
+ width: 50%;
+ }
+
+ .register {
+ padding: 5px 0px 10px 0px;
+ }
+
+ .flex-container {
+ display: flex;
+ }
+ </style>
+
+</head>
+
+<body>
+
+ <main class="main-container">
+
+ <h1>Create a ServicePoints Account:</h1>
+
+ <form id="login-form" action="/accounts/create/" method="post" enctype="multipart/form-data">
+ <div class="flex-container">
+ <b>Your Name: </b>
+ <input type="text" placeholder="Enter Name" name="fullname" class="login-form-field" required />
+ </div>
+ <div class="flex-container">
+ <b>Username: </b>
+ <input type="text" placeholder="Enter Username" name="username" class="login-form-field" />
+ </div>
+ <div class="flex-container">
+ <b>Email: </b>
+ <input type="text" placeholder="Enter Email" name="email" class="login-form-field" />
+ </div>
+ <div class="flex-container">
+ <b>Password: </b>
+ <input type="password" placeholder="Enter Password" name="password" class="login-form-field" />
+ </div>
+ <div>
+ <b>Select an Organization:</b><br />
+ Once you select an organization to join, a request will be sent for approval.
+ Until approved, your organization will appear as 'None'.<br />
+ <div style="text-align: center; margin: auto; padding-bottom: 15px;">
+ <select name="orgName" id="orgName">
+ <option value="NONE">Choose Later</option>
+ {% for org in orgs %}
+ {% if org.orgName != 'NONE' %}
+ <option value="{{org.orgName}}">{{org.orgName}}</option>
+ {%endif%}
+ {% endfor %}
+ </select>
+ </div>
+ </div>
+ <input type="submit" name="signup" value="sign up" id="login-form-submit" />
+ </form>
<p>
- Password
- <input type="password" name="password" />
+ Have an account?
+ <a href="/accounts/login/">Log in</a>
</p>
- <input type="submit" name="signup" value="sign up" />
- </form>
- <p>
- Have an account?
- <a href="/accounts/login/">Log in</a>
- </p>
+ Want to register an organization with your new account account?<br />
+ <a href="/accounts/createOrg/">Register as organization leader</a>
+ </main>
+
</body>
</html>
diff --git a/servicePoints/templates/index.html b/servicePoints/templates/index.html
index a5b118a..7ea1b4c 100644
--- a/servicePoints/templates/index.html
+++ b/servicePoints/templates/index.html
@@ -5,10 +5,11 @@
<style>
.dropbtn {
- background-color: darkgray;
- color: black;
- padding: 8px;
- font-size: 14px;
+ background-color: #333;
+ color: #f2f2f2;
+ padding: 12px;
+ margin-right: 20px;
+ font-size: 16px;
border: none;
cursor: pointer;
}
@@ -16,7 +17,7 @@
.dropdown {
position: relative;
display: inline-block;
- float:right;
+ float: right;
}
.dropdown-content {
@@ -30,12 +31,12 @@
z-index: 1;
}
- .dropdown-content a {
- color: black;
- padding: 12px 16px;
- text-decoration: none;
- display: block;
- }
+ .dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ }
.dropdown a:hover {
background-color: #ddd;
@@ -44,54 +45,86 @@
.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>
- Username: {{username}}
- <div class="dropdown">
- <button onclick="myFunction()" class="dropbtn">Settings</button>
+ <div class="topnav">
+ <div class="topitem">
+ Username: {{username}}
+ </div>
+ <div class="topitem">
+ Organization: {{org}}
+ </div>
+ <div class="topitem">
+ Hours: {{hours}}
+ </div>
+ <div class="dropdown">
+ <button onclick="myFunction()" class="dropbtn">Settings</button>
- <div id="myDropdown" class="dropdown-content">
- <a href="/accounts/profile/">Profile</a>
- <hr />
- {% if leader == 1 %}
- <a href="/accounts/manageOrg/">Manage Org</a>
- <hr />
- {% endif %}
- <a href="/accounts/logout/">Logout</a>
+ <div id="myDropdown" class="dropdown-content">
+ <a href="/accounts/profile/">Profile</a>
+ <hr />
+ {% if leader == 1 %}
+ <a href="/accounts/manageOrg/">Manage Org</a>
+ <hr />
+ {% endif %}
+ <a href="/accounts/logout/">Logout</a>
+ </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>
- <h1 style="text-align:center">Welcome to ServicePoints!</h1>
- <p>{{org}}</p>
- <p>Hours: {{hours}}</p>
- <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/requests.png alt="requests">
- </a>
- {% endif %}
- </p>
+ {% if leader == 1 %}
+ <a href="/accounts/viewMemberPoints/">
+ <img src=/images/view.png alt="view">
+ </a>
+ <a href="/accounts/viewRequests/">
+ <img src=/images/requests.png alt="requests">
+ </a>
+ {% endif %}
+ </p>
+ </main>
<script>
/* When the user clicks on the button,
--
GitLab