Skip to content
This repository has been archived by the owner on Nov 16, 2023. It is now read-only.

Commit

Permalink
Midweek update because I forgot about it
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaccomode
zaccomode committed May 26, 2020
1 parent dd5330a commit 999dd8f
Show file tree
Hide file tree
Showing 6 changed files with 244 additions and 78 deletions.
35 changes: 34 additions & 1 deletion css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@
color: var(--alphaLight);
}

/* Text Areas */
/* Input Types */
textarea {
resize: vertical;
width: 100%;
Expand Down Expand Up @@ -378,6 +378,39 @@
color: var(--white);
}

/* Loader */
.loader {
border: 5px solid transparent;
border-radius: 50%;
border-top: 5px solid var(--white);
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
width: 25px;
height: 25px;
-webkit-animation: spin 0.4s linear infinite;
animation: spin 0.4s linear infinite;
}

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
}
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}


/* Misc */
.divider {
Expand Down
76 changes: 70 additions & 6 deletions css/page-specific/login.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* Standard Elements */
.nav {
box-shadow: none;
}
Expand All @@ -9,6 +10,32 @@
padding: 75px;
}

h1, h2, h6 {
text-align: center;
color: var(--white);
}

h3 {
color: var(--white);
}

h4 {
color: var(--primary);
}

/* Containers */
.login-container {
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.postconfirmation {
padding-bottom: 2rem;
}

.footer-container {
width: 100%;
height: 150px;
Expand All @@ -19,14 +46,50 @@
justify-content: center;
}

/* Elements */
h1, h2, h6 {
text-align: center;
color: var(--white);
/* Profile Editor */
.profile-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--fill);
border: 1px solid var(--outline);
border-radius: 8px;
box-shadow: 0px 5px 20px rgba(40, 40, 40, .3);
color: var(--text);

padding: 4px;
padding-bottom: 1rem;
}

h3 {
color: var(--white);
.profile-information {
width: calc(100% - 60px);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}

.profile-banner {
max-width: 35rem;
border-radius: 4px;
border: 1px solid var(--outline)
}

.profile-avatar {
max-width: 4rem;
height: auto;

border-radius: 50%;
border: 2px solid var(--fill);

transform: translate(0px, -40px)
}

.profile-stack {
flex-direction: column;

margin-left: 2rem;
margin-top: 0.5rem;
}

/* Inputs */
Expand Down Expand Up @@ -64,6 +127,7 @@ h3 {
margin: 5px;
}

/* Misc */
.error {
text-align: center;
padding: 10px;
Expand Down
Binary file added design_files/placeholderbanner.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added design_files/uploadbanner.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 33 additions & 32 deletions login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,45 +37,46 @@ <h5 style="float: left; vertical-align: middle; line-height: 0px; margin-right:
</nav>

<main class="main">
<br>
<br>

<h1>Log In</h1>

<!-- Input Items -->
<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Username</h3>
<div class="login-container">
<h1>Log In</h1>

<!-- Input Items -->
<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Username</h3>
</div>
<div class="input-right">
<input class="input alt" type="text" placeholder="Username">
</div>
</div>
<div class="input-right">
<input class="input alt" type="text" placeholder="Username">

<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Password</h3>
</div>
<div class="input-right">
<input class="input alt" type="password" placeholder="Password">
</div>
</div>
</div>

<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Password</h3>

<br>

<div class="input-item">
<button class="button long">Log In</button>
</div>
<div class="input-right">
<input class="input alt" type="password" placeholder="Password">

<!-- Login With STiBaRC -->
<h3 style="text-align: center;"> OR </h3>
<div class="lws">
<button class="button primaryAlt long">Log In with STiBaRC</button>
</div>

<!-- Errors -->
<div class="error error-invalid" style="display: none;">Invalid username or password!</div>
<div class="error error-blank" style="display: none;">No username or password given!</div>
</div>

<br>

<div class="input-item">
<button class="button long">Log In</button>
</div>

<!-- Login With STiBaRC -->
<h3 style="text-align: center;"> OR </h3>
<div class="lws">
<button class="button primaryAlt long">Log In with STiBaRC</button>
</div>

<!-- Errors -->
<div class="error error-invalid" style="display: none;">Invalid username or password!</div>
<div class="error error-blank" style="display: none;">No username or password given!</div>
</main>

<footer>
Expand Down
146 changes: 107 additions & 39 deletions signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,57 +37,125 @@ <h5 style="float: left; vertical-align: middle; line-height: 0px; margin-right:
</nav>

<main class="main">
<br>
<br>

<h1>Sign Up</h1>

<!-- Input Items -->
<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Username</h3>
<div class="login-container preconfirmation" style="display: none;">

<h1>Sign Up</h1>

<!-- Input Items -->
<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Username</h3>
</div>
<div class="input-right">
<input class="input alt" type="text" placeholder="Username">
</div>
</div>
<div class="input-right">
<input class="input alt" type="text" placeholder="Username">
<h6 style="margin: 0px;">1-30 characters, no spaces</h6>

<br>

<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Email Address</h3>
</div>
<div class="input-right">
<input class="input alt" type="email" placeholder="[email protected]">
</div>
</div>
</div>
<h6 style="margin: 0px;">1-30 characters, no spaces</h6>

<br>

<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Email Address</h3>
<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Your Birthday</h3>
</div>
<div class="input-right">
<input class="input alt" type="date">
</div>
</div>
<div class="input-right">
<input class="input alt" type="email" placeholder="[email protected]">

<br>

<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Password</h3>
</div>
<div class="input-right">
<input class="input alt" type="password" placeholder="Password">
</div>
</div>
</div>

<br>

<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem;">Password</h3>

<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem; font-size: 0.75rem">Repeat Password</h3>
</div>
<div class="input-right">
<input class="input alt" type="password" placeholder="Password">
</div>
</div>
<div class="input-right">
<input class="input alt" type="password" placeholder="Password">

<br>

<div class="input-item">
<button class="button long">Sign Up</button>
</div>

<!-- Errors -->
<div class="error error-match" style="display: none;">Passwords must match!</div>
<div class="error error-blank" style="display: none;">Fields cannot be blank!</div>
<div class="error error-blank" style="display: none;">Error Registering!</div>

</div>

<div class="input-item">
<div class="input-left">
<h3 style="margin-right: 2rem; font-size: 0.75rem">Repeat Password</h3>
</div>
<div class="input-right">
<input class="input alt" type="password" placeholder="Password">
<div class="login-container confirmation" style="display: none;">

<h1>Sign Up</h1>

<br>

<!-- Loader -->
<div id="load" style="display: block;">
<center><div class="loader"></div></center>
</div>

<br>

<p style="text-align: center;">Verifying your email address...</p>

</div>

<br>

<div class="input-item">
<button class="button long">Sign Up</button>
<div class="login-container postconfirmation" style="display: ;">

<h1>Configure Your Profile</h1>

<!-- Profile Editor -->
<div class="profile-container">
<img src="design_files/uploadbanner.png" alt="Upload a Banner" class="profile-banner">

<div class="profile-information">
<img src="design_files/newjimbo.png" alt="Upload a Profile Picture" class="profile-avatar">

<div class="profile-stack">
<h4 style="margin: 4px; font-size: 1.4rem">Username Here</h4>
<h5 style="font-size: 0.7rem; margin: 4px;">Real Name Here</h5>
<p style="font-size: 0.7rem; margin: 4px;"><i>[email protected]</i></p>
</div>


</div>
</div>

<br>

<h1>Options</h1>

<!-- Profile Options -->

<br>

<div class="input-item">
<button class="button long">Done</button>
</div>

</div>
</main>

Expand Down

0 comments on commit 999dd8f

Please sign in to comment.