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

Updated UI for the create account page and home page

parent e713f725
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
servicePoints/templates/create.html
+ 119
− 41
View file @ c950d77d
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body>
<head>
<title>ServicePoints</title> <title>ServicePoints</title>
<p>
Want to register an organization with your new account account? <style>
<a href="/accounts/createOrg/">Register as organization leader</a>
</p> a {
<p> text-decoration: none;
Once you select an organization to join, a request will be sent for approval. }
Until approved, your organization will appear as 'None.'
</p> a:hover {
<form action="/accounts/create/" method="post" enctype="multipart/form-data"> text-decoration: underline;
<p> }
<label for="orgName">Select an Organization:</label>
<select name="orgName" id="orgName"> body {
<option value="NONE">Choose Later</option> padding: 70px 0;
{% for org in orgs %} font-family: Arial, Helvetica, sans-serif;
{% if org.orgName != 'NONE' %} display: grid;
<option value="{{org.orgName}}">{{org.orgName}}</option> justify-items: center;
{%endif%} align-items: center;
{% endfor %} }
</select>
</p> input[type=submit]:hover {
<p> opacity: 0.8;
Your Name }
<input type="text" name="fullname" />
</p> .main-container {
<p> width: 40%;
Username height: 100%;
<input type="text" name="username" /> display: grid;
</p> justify-items: center;
<p> align-items: center;
Email background-color: white;
<input type="text" name="email" /> border-radius: 7px;
</p> 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> <p>
Password Have an account?
<input type="password" name="password" /> <a href="/accounts/login/">Log in</a>
</p> </p>
<input type="submit" name="signup" value="sign up" /> Want to register an organization with your new account account?<br />
</form> <a href="/accounts/createOrg/">Register as organization leader</a>
<p> </main>
Have an account?
<a href="/accounts/login/">Log in</a>
</p>
</body> </body>
</html> </html>
servicePoints/templates/index.html
+ 84
− 51
View file @ c950d77d
...@@ -5,10 +5,11 @@ ...@@ -5,10 +5,11 @@
<style> <style>
.dropbtn { .dropbtn {
background-color: darkgray; background-color: #333;
color: black; color: #f2f2f2;
padding: 8px; padding: 12px;
font-size: 14px; margin-right: 20px;
font-size: 16px;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
...@@ -16,7 +17,7 @@ ...@@ -16,7 +17,7 @@
.dropdown { .dropdown {
position: relative; position: relative;
display: inline-block; display: inline-block;
float:right; float: right;
} }
.dropdown-content { .dropdown-content {
...@@ -30,12 +31,12 @@ ...@@ -30,12 +31,12 @@
z-index: 1; z-index: 1;
} }
.dropdown-content a { .dropdown-content a {
color: black; color: black;
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
.dropdown a:hover { .dropdown a:hover {
background-color: #ddd; background-color: #ddd;
...@@ -44,54 +45,86 @@ ...@@ -44,54 +45,86 @@
.show { .show {
display: block; 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> </style>
</head> </head>
<body> <body>
Username: {{username}} <div class="topnav">
<div class="dropdown"> <div class="topitem">
<button onclick="myFunction()" class="dropbtn">Settings</button> 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"> <div id="myDropdown" class="dropdown-content">
<a href="/accounts/profile/">Profile</a> <a href="/accounts/profile/">Profile</a>
<hr /> <hr />
{% if leader == 1 %} {% if leader == 1 %}
<a href="/accounts/manageOrg/">Manage Org</a> <a href="/accounts/manageOrg/">Manage Org</a>
<hr /> <hr />
{% endif %} {% endif %}
<a href="/accounts/logout/">Logout</a> <a href="/accounts/logout/">Logout</a>
</div>
</div> </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> {% if leader == 1 %}
<p>{{org}}</p> <a href="/accounts/viewMemberPoints/">
<p>Hours: {{hours}}</p> <img src=/images/view.png alt="view">
<p> </a>
<a href="/accounts/mask/"> <a href="/accounts/viewRequests/">
<img src=/images/mask.png alt="mask"> <img src=/images/requests.png alt="requests">
</a> </a>
<a href="/accounts/blood/"> {% endif %}
<img src=/images/blood.png alt="blood"> </p>
</a> </main>
<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>
<script> <script>
/* When the user clicks on the button, /* When the user clicks on the button,
......
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