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
Branches
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>
<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>
servicePoints/templates/index.html
+ 84
− 51
View file @ c950d77d
......@@ -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,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment