Skip to content
Permalink
Browse files

stylized signup page...

  • Loading branch information...
nanli-emory committed Jul 29, 2019
1 parent ae72f1c commit 1ec615fd1b53dbb5f5f16a5e7b79ba7834edeb34
Showing with 533 additions and 19 deletions.
  1. BIN apps/signup/bg_img.jpg
  2. +130 −0 apps/signup/signup.css
  3. +54 −19 apps/signup/signup.html
  4. +349 −0 css/normalize.css
BIN +1.87 MB apps/signup/bg_img.jpg
Binary file not shown.
@@ -0,0 +1,130 @@
/* signup.css */

body {
color: #fff;
background: url(bg_img.jpg);
background-size: cover;
font-family: sans-serif;
}
* {
box-sizing: border-box;
text-decoration: none;

}

.login-panel {
width: 320px;
/*height: 420px;*/
background: rgba(0, 0, 0, 0.5);
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
border-radius: 15px;
padding:0 35px;
}
.login-panel h1 {
text-align: center;
margin: 35px auto;
background: linear-gradient(120deg,#8e44ad, #3498db);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.txtb {
border-bottom: 2px solid #fff;
position: relative;
margin: 30px 0 0 0;
}



.txtb input[type=text] {
font-size: 15px;
color: #fff;
border: none;
width: 100%;
outline: none;
background: none;
padding: 0 5px;
height: 40px;
}

.txtb span::before {
content: attr(data-placeholder);
position: absolute;
top: 50%;
left: 5px;
color: #fff;
transform: translateY(-50%);
z-index: -1;
transition: .5s;
}

.txtb span::after {
content: '';
position: absolute;
width: 0%;
height: 2px;
background: linear-gradient(120deg, #3498db, #8e44ad);
transition: .5s;
}

.txtb input.focus + span::before {
top: -5px;
color: #3498db;
}

.txtb input.focus + span::after {
width: 100%;
}

.radb {
position: relative;
margin-bottom: 30px;
}

.radb input[type=radio] {
margin: 15px 10px 0 50px;
transition: .5s;
}
.radb input[type=radio]:checked+label {
color: #8e44ad;
font-weight: bold;
}



.sub-btn {
border-radius: 25px;
display: block;
width: 100%;
height: 35px;
border: none;
background: linear-gradient(120deg,rgba(52, 152, 219,.8), #8e44ad,rgba(52, 152, 219,.8));
background-size: 200%;
color: #fff;
outline: none;
cursor: pointer;
transition: .5s;
}



.sub-btn:hover {
background-position: right;
}

.login-tips {
padding: 10px;
color: #8e44ad;
font-weight: bold;
margin: 35px 0;
border-radius: 15px;
background: rgba(200, 214, 229,0.7);
/* width: 100px;
height: 100px;
position: absolute;
top:-50px;
left: calc(50% - 50px);*/
}
@@ -1,10 +1,16 @@
<!DOCTYPE html>
<html>
<h1> User Signup </h1>
If you reach this page, it's likely that you tried to log into this instance but lack access.
Email SOMEONE if you want to be added.

If you are an admin, you should be able to use this form:
<head>
<meta name="keywords" content="camicroscope, quip" />
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<title>CaMicroscope - User Signup</title>

<link rel='stylesheet' type='text/css' media='all' href='../../css/normalize.css'/>
<link rel='stylesheet' type='text/css' media='all' href='signup.css'/>
</head>
<script>
var userSignupUrl = "../../data/Auth/post"
function addUser(){
@@ -42,20 +48,49 @@ <h1> User Signup </h1>
}
</script>

<div id="signupForm">
Email: <input id="name" type="text">
<input type="radio" id="attrchoice1"
name="attr" value="viewer">
<label for="attrchoice1">Viewer</label>

<input type="radio" id="attrchoice2"
name="attr" value="editor">
<label for="attrchoice2">Editor</label>

<input type="radio" id="attrchoice3"
name="attr" value="admin">
<label for="attrchoice3">Admin (and Editor)</label>
Submit: <input id="sub" onclick="addUser()" type="submit">
</div>
<body>

<div id="signupForm" class="login-panel">
<H1>User Signup</H1>

<div class="txtb">
<input id="name" type="text" >
<span data-placeholder="Email">
</div>

<div class="radb">
<!-- User Type selection -->
<input type="radio" id="attrchoice1"
name="attr" value="viewer" checked>
<label for="attrchoice1">Viewer</label><br>

<input type="radio" id="attrchoice2"
name="attr" value="editor">
<label for="attrchoice2">Editor</label><br>

<input type="radio" id="attrchoice3"
name="attr" value="admin">
<label for="attrchoice3">Admin (and Editor)</label>
</div>
<!-- submit btn -->
<input id="sub" class="sub-btn" onclick="addUser()" type="submit">

<!-- <div class="bottom-text">
Don't have account?
</div> -->

<div class="login-tips">If you reach this page, it's likely that you tried to log into this instance but lack access.
Email SOMEONE if you want to be added. If you are an admin, you should be able to use this form.</div>
</div>
<script type="text/javascript">
const input_name = document.querySelector('#name');
input_name.addEventListener('focus',()=>{
input_name.classList.add('focus');
});
input_name.addEventListener('blur',()=>{
if(input_name.value=="") input_name.classList.remove('focus');
});
</script>
</body>

</html>

0 comments on commit 1ec615f

Please sign in to comment.
You can’t perform that action at this time.