Skip to content

zekena / Unit-calculator

Go to a project
Commit d736b1d0 by zekena
Options

login

parent 247ddbb8
Inline Side-by-side
Showing with 754 additions and 47 deletions
categories/area.php
......@@ -81,6 +81,54 @@ function area_options()
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-Area.css" />
<title>Area</title>
<script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var alertmessage = "Click Side button to calculate measurements in batch"
///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes)
var once_per_session = 1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
<body>
......@@ -109,10 +157,10 @@ function area_options()
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login">Log in</a>
<a href="../login/signup.php">Sign up</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
......
categories/length.php
......@@ -54,7 +54,54 @@ function length_options(){
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-length.css" />
<title>Length</title>
<script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var alertmessage = "Click Side button to calculate measurements in batch"
///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes)
var once_per_session = 1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
<body>
......@@ -82,10 +129,10 @@ function length_options(){
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login">Log in</a>
<a href="../login/signup.php">Sign up</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
......
categories/speed.php
......@@ -33,6 +33,54 @@ $speed_options = array(
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-speed.css" />
<title>Convert Speed</title>
<script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var alertmessage = "Click Side button to calculate measurements in batch"
///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes)
var once_per_session = 1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
<body>
......@@ -60,10 +108,10 @@ $speed_options = array(
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login">Log in</a>
<a href="../login/signup.php">Sign up</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
......
categories/temperature.php
......@@ -107,10 +107,10 @@ $temp_options = array(
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login">Log in</a>
<a href="../login/signup.php">Sign up</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
......
categories/volume.php
......@@ -49,7 +49,52 @@ $volume_options = array(
<link rel="stylesheet" href="../css/simp-Volume.css" />
<title>Convert Volume</title>
<script>
alert("If you want to calculate entries in batch click the side button");
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var alertmessage = "Click Side button to calculate measurements in batch"
///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes)
var once_per_session = 1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
......@@ -78,10 +123,10 @@ $volume_options = array(
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login">Log in</a>
<a href="../login/signup.php">Sign up</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
......
categories/weight.php
......@@ -113,10 +113,10 @@ $mass_options = array(
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login">Log in</a>
<a href="../login/signup.php">Sign up</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
......
login/css/style.css 0 → 100644
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #c1bdba;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #1ab188;
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 600px;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: rgba(160, 179, 176, 0.25);
color: #a0b3b0;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #179b77;
color: #ffffff;
}
.tab-group .active a {
background: #1ab188;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #ffffff;
font-weight: 300;
margin: 0 0 40px;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, 0.5);
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 22px;
}
label .req {
margin: 2px;
color: #1ab188;
}
label.active {
-webkit-transform: translateY(50px);
transform: translateY(50px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #ffffff;
}
input, textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #ffffff;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #1ab188;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 40px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
background: #1ab188;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #179b77;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
login/index.html
<!DOCTYPE html>
<html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<title>Login</title>
<link rel="stylesheet" href="../css/login_style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div id="login">
<form action="" method="get">
<fieldset class="clearfix">
<p><input type="text" name="username" placeholder=" Username"></p>
<p><input type="email" name="username" placeholder=" Email"></p>
<p><input type="password" name="password" placeholder=" Password"></p>
<p><input type="submit" type="submit" name="submit" value="Sign in"></p>
<p><a href="signup.html">SIGN UP NOW</a></p>
</fieldset>
</form>
</div>
</div>
</body>
<div class="form">
<ul class="tab-group">
<li class="tab active"><a href="#signup">Sign Up</a></li>
<li class="tab"><a href="#login">Log In</a></li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<p class="forgot"><a href="#">Forgot Password?</a></p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
login/js/index.js 0 → 100644
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
\ No newline at end of file
login/scss/style.scss 0 → 100644
@import "compass/css3";
$body-bg: #c1bdba;
$form-bg: #13232f;
$white: #ffffff;
$main: #1ab188;
$main-light: lighten($main,5%);
$main-dark: darken($main,5%);
$gray-light: #a0b3b0;
$gray: #ddd;
$thin: 300;
$normal: 400;
$bold: 600;
$br: 4px;
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background:$body-bg;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration:none;
color:$main;
transition:.5s ease;
&:hover {
color:$main-dark;
}
}
.form {
background:rgba($form-bg,.9);
padding: 40px;
max-width:600px;
margin:40px auto;
border-radius:$br;
box-shadow:0 4px 10px 4px rgba($form-bg,.3);
}
.tab-group {
list-style:none;
padding:0;
margin:0 0 40px 0;
&:after {
content: "";
display: table;
clear: both;
}
li a {
display:block;
text-decoration:none;
padding:15px;
background:rgba($gray-light,.25);
color:$gray-light;
font-size:20px;
float:left;
width:50%;
text-align:center;
cursor:pointer;
transition:.5s ease;
&:hover {
background:$main-dark;
color:$white;
}
}
.active a {
background:$main;
color:$white;
}
}
.tab-content > div:last-child {
display:none;
}
h1 {
text-align:center;
color:$white;
font-weight:$thin;
margin:0 0 40px;
}
label {
position:absolute;
transform:translateY(6px);
left:13px;
color:rgba($white,.5);
transition:all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size:22px;
.req {
margin:2px;
color:$main;
}
}
label.active {
transform:translateY(50px);
left:2px;
font-size:14px;
.req {
opacity:0;
}
}
label.highlight {
color:$white;
}
input, textarea {
font-size:22px;
display:block;
width:100%;
height:100%;
padding:5px 10px;
background:none;
background-image:none;
border:1px solid $gray-light;
color:$white;
border-radius:0;
transition:border-color .25s ease, box-shadow .25s ease;
&:focus {
outline:0;
border-color:$main;
}
}
textarea {
border:2px solid $gray-light;
resize: vertical;
}
.field-wrap {
position:relative;
margin-bottom:40px;
}
.top-row {
&:after {
content: "";
display: table;
clear: both;
}
> div {
float:left;
width:48%;
margin-right:4%;
&:last-child {
margin:0;
}
}
}
.button {
border:0;
outline:none;
border-radius:0;
padding:15px 0;
font-size:2rem;
font-weight:$bold;
text-transform:uppercase;
letter-spacing:.1em;
background:$main;
color:$white;
transition:all.5s ease;
-webkit-appearance: none;
&:hover, &:focus {
background:$main-dark;
}
}
.button-block {
display:block;
width:100%;
}
.forgot {
margin-top:-20px;
text-align:right;
}
\ No newline at end of file
login1/index.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="../css/login_style.css" media="screen" type="text/css" />
</head>
<body>
<div class="container">
<div id="login">
<form action="" method="get">
<fieldset class="clearfix">
<p><input type="text" name="username" placeholder=" Username"></p>
<p><input type="email" name="username" placeholder=" Email"></p>
<p><input type="password" name="password" placeholder=" Password"></p>
<p><input type="submit" type="submit" name="submit" value="Sign in"></p>
<p><a href="signup.html">SIGN UP NOW</a></p>
</fieldset>
</form>
</div>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment