Skip to content

zekena / Unit-calculator

Go to a project
Commit 67f45f24 by yuward
Options

m

parent 3ab4db56
Inline Side-by-side
Showing with 1259 additions and 133 deletions
calc/LENGTH_TO_METER.csv deleted 100755 → 0
"Name";Unit
"inches";0.0254
"feet";0.3048
"yards"; 0.9144
"miles";1609.344
"millimeters";0.001
"centimeters";0.01
"meters";1
"kilometers";1000
"acres";63.614907234075
"hectares";100
\ No newline at end of file
calc/categories/area.php
<?php
require('dbconnect.php');
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
// Definitions
if (file_exists('dbconnect.php')) {
require('dbconnect.php');
......@@ -30,12 +28,9 @@ if ($_POST['submit']) {
//$mysqli = new mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME);
// mysql_query("INSERT INTO area_entry (from_unit,to_unit,from_value,to_value) VALUES ()");
$sql = "INSERT INTO area_entry(from_unit,to_unit,from_value,to_value) VALUES ('$from_unit','$to_unit','$from_value','$to_value');";
echo $sql;
if (!mysqli_query($link, $sql)) {
die('An error occurred when submitting your review.');
} else {
echo "Thanks for your review.";
}
}
/*
if($link->query($sql)){
echo "Record Added";
......
calc/categories/config.php 0 → 100644
<?php
define('DB_NAME','conversions');
define('DB_USER', 'root');
define('DB_PASSWORD','root');
define('DB_HOST','localhost');
$link = mysql_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME) or die("Error");
$sql = mysql_query("SELECT id,name FROM LENGTH_TO_METER");
if (mysql_num_rows($sql)){
$data = array();
while($row=mysql_fetch_array($sql)){
$data[]= array(
'id' => $row['id'],
'name' => $row['name']
);
header('Content-type: application/json');
echo json_encode($data);
}
}
else{
echo "hello";
}
?>
\ No newline at end of file
calc/categories/d.php 0 → 100644
<?php
//connection variables
define('DB_NAME','conversions');
define('DB_USER', 'root');
define('DB_PASSWORD','root');
define('DB_HOST','localhost');
$link = mysql_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME) or die("Error ");
/*
if(mysqli_connect_error()){
die('Connect Error ('. mysqli_connect_errno().')'.mysqli_connect_error());
}
*/
?>
\ No newline at end of file
calc/categories/length.php
<?php
// AJAX
//Add function files
require('options.php');
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
if (file_exists('dbconnect.php')) {
require('dbconnect.php');
if (mysqli_connect_error()) {
die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error());
}
}
//Add function files
require('options.php');
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
//establish values
/*
Uses funct
*/
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if (isset($_POST['calculate'])) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_length($from_value, $from_unit, $to_unit);
$to_value = convert_length($from_value, $from_unit, $to_unit);
$sql = "INSERT INTO length_entry(from_unit,to_unit,from_value,to_value) VALUES ('$from_unit','$to_unit','$from_value','$to_value');";
if (!mysqli_query($link, $sql)) {
die('An error occurred when submitting your review.');
}
}
/*
function length_options(){
$length_options = array(
"inches" => 0.0254,
"feet" => 0.3048,
"yards" => 0.9144,
"miles" => 1609.344,
"millimeters" => 0.001,
"centimeters" => 0.01,
"meters" => 1,
"kilometers" => 1000,
"acres" => 63.614907234075,
"hectares" => 100);
$choice = '';
while(list($k,$v)=each($length_options))
{
$choice.='<option value = "'.$k.'">'.$k.'</option>';
}
return $choice;
}
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<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>
......@@ -61,9 +138,10 @@ Uses funct
<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>
......@@ -76,11 +154,8 @@ Uses funct
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<ul id="form-messages">
<li>Generic Error#1</li>
</ul>
<div id="sinput" class="input">
<form id="io" action="length.php" method="POST">
<form id="io" action="" method="POST">
<!-- calculator input and output-->
<!--Add function to recieve number,
Be able to input number from either box.-->
......@@ -90,13 +165,15 @@ Uses funct
<?php echo length_options(); ?>
</select>
<br>
<input id="from_value" class="Input-text" placeholder="Wait for it" name="to_value" value=" <?php echo $to_value; ?>" />&nbsp;
<input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value=" <?php echo $to_value; ?>" />&nbsp;
<label for="input" class="input-label">Converted result</label>
<select name="to_unit">
<?php echo length_options(); ?>
</select>
<div id="reset" class="button">
<input type="submit" name="calculate" value="Submit" id="btn-submit"/>
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
......@@ -104,58 +181,49 @@ Uses funct
</div>
</div>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn-submit").on('click',function(){
var from_value = $("#from_value").val();
var to_value = $("#to_value").val();
if (from_value == "" || to_value == "")
alert('Please check input');
else{
$.ajax(
{
url: 'length.php',
method: 'POST',
data: {
fromvaluePHP : from_value,
tovaluePHP : to_value
},
dataType: 'text'
});
}
});
});
// const form = {
// from_value : document.getElementById('from_value'),
// to_value : document.getElementById('to_value'),
// submit: document.getElementById('btn-submit')
// };
// form.submit.addEventListener('click',() => {
// const request = new XMLHttpRequest();
// request.onload = () => {
// let responseObject = null;
// try{
// responseObject = JSON.parse(request.responseText);
// }
// console.log(request.responseText);
// }
// const requestData = 'from_value=${form.from_value.value}&to_value=${form.to_value.value}';
// request.open('post','length.php')
// request.setRequestHeader('Content-type','applications/x-www-form-urlencoded');
// request.send(requestData);
// });
// $(document).ready(function(){
// $(".calculate").submit(function(){
// alert("hello");
// });
// });
// $(document).ready(function(){
// $(".button").on('click',function(){
// var from_value = $("#from_value").val();
// var to_value = $("#to_value").val();
</script>
</body>
</html>
\ No newline at end of file
</html>
<?php
include('config.php');
$sql = mysql_query("SELECT id,name FROM LENGTH_TO_METER");
if (mysql_num_rows($sql)>0){
echo "hello";
// $data = array();
// while($row=mysql_fetch_array($sql)){
// $data[]= array(
// 'id' => $row['id'],
// 'name' => $row['name']
// );
// header('Content-type: application/json');
// echo json_encode($data);
// }
}
//AJAX
//Add function files
require('options.php');
//include('config.php');
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
//establish values
/*
Uses funct
*/
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if (isset($_POST['calculate'])) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_length($from_value, $from_unit, $to_unit);
}
?>
calc/categories/speed.php
<?php
if (file_exists('dbconnect.php')) {
require('dbconnect.php');
if (mysqli_connect_error()) {
die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error());
}
}
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
......@@ -17,6 +23,10 @@ if ($_POST['submit']) {
$to_unit = $_POST['to_unit'];
$to_value = convert_speed($from_value, $from_unit, $to_unit);
$sql = "INSERT INTO speed_entry(from_unit,to_unit,from_value,to_value) VALUES ('$from_unit','$to_unit','$from_value','$to_value');";
if (!mysqli_query($link, $sql)) {
die('An error occurred when submitting your review.');
}
}
$speed_options = array(
......
calc/categories/temperature.php
<?php
if (file_exists('dbconnect.php')) {
require('dbconnect.php');
if (mysqli_connect_error()) {
die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error());
}
}
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
......@@ -17,6 +23,10 @@ if ($_POST['submit']) {
$to_unit = $_POST['to_unit'];
$to_value = convert_temp($from_value, $from_unit, $to_unit);
$sql = "INSERT INTO temperature_entry(from_unit,to_unit,from_value,to_value) VALUES ('$from_unit','$to_unit','$from_value','$to_value');";
if (!mysqli_query($link, $sql)) {
die('An error occurred when submitting your review.');
}
}
$temp_options = array(
......
calc/categories/volume.php
<?php
if (file_exists('dbconnect.php')) {
require('dbconnect.php');
if (mysqli_connect_error()) {
die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error());
}
}
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
......@@ -17,6 +23,10 @@ if ($_POST['submit']) {
$to_unit = $_POST['to_unit'];
$to_value = convert_volume($from_value, $from_unit, $to_unit);
$sql = "INSERT INTO volume_entry(from_unit,to_unit,from_value,to_value) VALUES ('$from_unit','$to_unit','$from_value','$to_value');";
if (!mysqli_query($link, $sql)) {
die('An error occurred when submitting your review.');
}
}
$volume_options = array(
'cubic inches',
......
calc/categories/weight.php
<?php
if (file_exists('dbconnect.php')) {
require('dbconnect.php');
if (mysqli_connect_error()) {
die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error());
}
}
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
......@@ -17,6 +23,10 @@ if ($_POST['submit']) {
$to_unit = $_POST['to_unit'];
$to_value = convert_mass($from_value, $from_unit, $to_unit);
$sql = "INSERT INTO weight_entry(from_unit,to_unit,from_value,to_value) VALUES ('$from_unit','$to_unit','$from_value','$to_value');";
if (!mysqli_query($link, $sql)) {
die('An error occurred when submitting your review.');
}
}
$mass_options = array(
......
calc/includes/functions.php
<?php
function list_option($arr){
$choice = '';
while(list($k,$v)=each($arr))
{
$choice.='<option value = "'.$k.'">'.$k.'</option>';
}
}
// defines array of length and area
// acres and hectares are squared due to function parameters
define('LENGTH_TO_METER',array(
......
calc/login/login.php
......@@ -49,7 +49,8 @@ function protect($string){
<p><input type="text" id="email" name="email" placeholder="Email"></p>
<p><input type="password" id="password" name="password" placeholder="Password"></p>
<p><input type="button" name="submit" value="Sign in" id="login"></p>
<p><a href="signup.php">SIGN UP NOW</a></p>
<p><a href="signup.php">SIGN UP NOW</a></p>
<p><button id="continue">Continue without Logging in</button></p>
</form>
<p id="response"></p>
</div>
......@@ -57,13 +58,21 @@ function protect($string){
</div>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
// document.getElementById("continue").onclick = function () {
// };
$(document).ready(function(){
$("#continue").on('click',function(){
window.location="../home.php";
});
$("#login").on('click',function(){
var username = $("#username").val();
var email = $("#email").val();
var password= $("#password").val();
if (email == "" || password == "" || username == "")
var continue = $("#continue").val();
if (email == "" && password == "" && username == "")
alert('Please check input');
//continue;
else{
$.ajax(
{
......@@ -77,7 +86,7 @@ function protect($string){
},
success: function (response) {
$("#response").html(response);
if(response.indexOf('success')>-1){
if(response.indexOf('success')> -1){
window.location = '../home.php';
}
},
......
categories/test.php deleted 100644 → 0
<?php
(isset($_POST["company"])) ? $company = $_POST["company"] : $company=1;
?>
<form>
<select id="company" name="company">
<option <?php if ($company == 1 ) echo 'selected' ; ?> value="1">Apple</option>
<option <?php if ($company == 2 ) echo 'selected' ; ?> value="2">Samsung</option>
<option <?php if ($company == 3 ) echo 'selected' ; ?> value="3">HTC</option>
</select>
</form>
\ No newline at end of file
css/simp-Volume.css → other_calc/css/simp-Volume.css
......@@ -44,7 +44,7 @@
box-sizing: border-box;
}
body{background-image: url("../Volume.jpg");
body{background-image: url("../page_img/Volume.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
......
other_calc/css/simp-area.css 0 → 100644
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Dosis|Passion+One|Roboto+Slab');
:root {
/* generic */
--gutterSm: 0.4rem;
--gutterMd: 0.8rem;
--gutterLg: 1.6rem;
--gutterXl: 2.4rem;
--gutterXx: 7.2rem;
--colorPrimary400: #7e57c2;
--colorPrimary600: #5e35b1;
--colorPrimary800: #4527a0;
--fontFamily: "Dosis", sans-serif;
--fontSizeSm: 1.2rem;
--fontSizeMd: 1.6rem;
--fontSizeLg: 2.1rem;
--fontSizeXl: 2.8rem;
--fontSizeXx: 3.6rem;
--lineHeightSm: 1.1;
--lineHeightMd: 1.8;
--transitionDuration: 300ms;
--transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
/* floated labels */
--inputPaddingV: var(--gutterMd);
--inputPaddingH: var(--gutterLg);
--inputFontSize: var(--fontSizeLg);
--inputLineHeight: var(--lineHeightMd);
--labelScaleFactor: 0.8;
--labelDefaultPosY: 50%;
--labelTransformedPosY: calc(
(var(--labelDefaultPosY)) -
(var(--inputPaddingV) * var(--labelScaleFactor)) -
(var(--inputFontSize) * var(--inputLineHeight))
);
--inputTransitionDuration: var(--transitionDuration);
--inputTransitionTF: var(--transitionTF);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{ background-image: url("../page_img/area.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
text-align: center;
}
#title{
background: #913fb7;
opacity: 0.9;
}
#title h1{
color: #000;
font-size: 5em;
font-weight: 400;
font-family: 'Passion One', cursive;
margin: 0;
text-align: center;
}
/* Calculator box */
.calculator{
display:inline-block;
-webkit-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
-moz-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
background-color: #913fb7;
padding:25px 32px;
height:50%;
border-radius: 17px;
width: 50%;
position: relative;
top: 150px;
}
#theme {
position: relative;
left: -250px;
width: 95%;
top: -45px;
font-size: 1em;
}
#theme select{
width:15%;
height: 25px;
}
Input[type=submit]{
display:inline-block;
background-color: #f1924e;
padding:15px 50px;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(255,255,255,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family: 'Roboto Slab', serif;
font-size:20px;
color:#ffff;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
}
Input[type=submit]:hover{
border-color: rgba(255,255,255,1);
}
@media all and (max-width:30em){
input[type=submit]{
display:block;
margin:0.2em auto;
}
}
.Input {
position: relative;
}
.Input-text {
display: block;
margin-top: 40px;
padding: var(--inputPaddingV) var(--inputPaddingH);
color: inherit;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
border: none;
border-radius: 0.4rem;
transition: box-shadow var(--transitionDuration);
}
.Input-text::placeholder {
color: #B0BEC5;
}
.Input-text:focus {
outline: none;
box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
}
.Input-label {
display: block;
position: absolute;
bottom: 50%;
left: 1rem;
color: #fff;
font-family: 'Roboto slab',serif;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
.Input-text:placeholder-shown + .Input-label {
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
.input-label {
display: block;
position: absolute;
bottom: 10%;
left: 1rem;
color: #fff;
font-family: 'Roboto slab',serif;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
.Input-text:placeholder-shown + .input-label {
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .input-label,
.Input-text:focus:not(:placeholder-shown) + .input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
select {
position: relative;
top: 80%;
bottom:45px ;
left: 50%;
transform: translate(-50%, -50%);
}
select {
background-color: #f1924e;
color: white;
padding: 12px;
width: 250px;
border: none;
font-size: 20px;
font-family:'Roboto Slab',serif ;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
-webkit-appearance: button;
appearance: button;
outline: none;
}
select::before {
content: "\f13a";
font-family: FontAwesome;
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 100%;
text-align: center;
font-size: 28px;
line-height: 45px;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
select:hover::before {
color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.2);
}
select {
padding: 30px;
}
\ No newline at end of file
css/simp-length.css → other_calc/css/simp-length.css
......@@ -45,7 +45,7 @@
}
body{
background-image: url("../Length.jpg");
background-image: url("../page_img/length.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
......
css/simp-speed.css → other_calc/css/simp-speed.css
......@@ -45,7 +45,7 @@
}
body{
background-image: url("../speed.png");
background-image: url("../page_img/speed.png");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
......
css/simp-temp.css → other_calc/css/simp-temp.css
......@@ -44,7 +44,7 @@
box-sizing: border-box;
}
body{background-image: url("../temp.jpg");
body{background-image: url("../page_img/temp.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
......
other_calc/css/style.css 0 → 100644
body{
font-family:"Arial", Serif;
background-color:#f4f4f4;
overflow-x:hidden;
background-image: url("../background.png");
}
#banner {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
padding: 8em 4em 6em 4em;
min-height: 70vh;
background-image: url("background.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-top: 0;
position: relative;
text-align: center;
overflow: hidden;
}
#banner .inner {
text-align: center;
position: relative;
z-index: 2;
}
#banner h1 {
color: #fff;
font-size: 5em;
font-weight: 400;
font-family: 'Passion One', cursive;
margin: 0;
}
@media screen and (max-width: 980px) {
#banner h1 {
font-size: 5em;
}
}
@media screen and (max-width: 736px) {
#banner h1 {
font-size: 3em;
}
}
#banner p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.5em;
font-weight: 300;
}
@media screen and (max-width: 980px) {
#banner p {
font-size: 1.5em;
}
}
@media screen and (max-width: 480px) {
#banner p {
font-size: 1.25em;
}
}
#banner a {
color: rgba(58, 28, 28, 0.75);
text-decoration: none;
border-bottom: 1px dotted;
}
#banner a:hover {
color: #FFF;
border: none;
}
.navbar{
background-color:#1085c4;
overflow:hidden;
height:63px;
}
.navbar a{
float:left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
font-size:17px;
}
.navbar a:hover{
background-color:rgb(155, 222, 233);
/* color:#000; */
}
.side-nav{
height:100%;
width:0;
position:fixed;
z-index:1;
top:0;
left:0;
background-color:rgb(108, 94, 133);
opacity:0.9;
overflow-x:hidden;
padding-top:60px;
transition:0.5s;
}
.side-nav a{
padding:10px 10px 10px 30px;
text-decoration:none;
font-family:'Roboto slab',serif;
font-size:22px;
color:#ccc;
display:block;
transition:0.3s;
}
.side-nav a:hover{
color:#fff;
}
.side-nav .btn-close{
position:absolute;
top:0;
right:22px;
font-size:36px;
margin-left:50px;
}
#main{
transition:margin-left 0.5s;
padding:20px;
overflow:hidden;
width:100%;
}
@media(max-width:568px){
.navbar-nav{display:none}
}
@media(min-width:568px){
/*.open-slide{display:none}*/
}
#main {
padding: 4em 0 2em 0;
}
@media screen and (max-width: 736px) {
#main {
padding: 3em 0 1em 0;
}
}
#main .inner {
width: 90%;
max-width: 80em;
margin: 0 auto;
}
@media screen and (max-width: 480px) {
#main .inner {
width: 95%;
}
}
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
background-color: #70c7be;
border-radius: 15px;
border: 0;
color: #ffffff !important;
cursor: pointer;
display: inline-block;
font-weight: 400;
height: 2.85em;
line-height: 2.95em;
padding: 0 7em;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
#footer {
padding: 4em 0 2em 0;
background-color: #1b1b1f;
text-align: center;
}
#footer .inner {
width: 50%;
margin: 0 auto;
}
Input[type=submit]{
display:inline-block;
background-color: #6ca593;
padding:15px 50px;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(255,255,255,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family: 'Roboto Slab', serif;
font-size:20px;
color:#ffff;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
}
Input[type=submit]:hover{
border-color: rgba(255,255,255,1);
}
@media all and (max-width:30em){
input[type=submit]{
display:block;
margin:0.2em auto;
}
}
.Input {
position: relative;
}
.Input-text {
margin-top: 30px;
padding: var(--inputPaddingV) var(--inputPaddingH);
color: inherit;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
border: none;
border-radius: 0.4rem;
transition: box-shadow var(--transitionDuration);
height: 40px;
top: 1%;
}
.Input-text::placeholder {
color: #B0BEC5;
}
.Input-text:focus {
outline: none;
box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
}
.Input-label {
display: block;
position: absolute;
bottom: 50%;
left: 1rem;
color: #fff;
font-family: 'Roboto slab',serif;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
.Input-text:placeholder-shown + .Input-label {
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
.input-label {
display: block;
position: absolute;
bottom: 10%;
left: 1rem;
color: #fff;
font-family: 'Roboto slab',serif;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
.Input-text:placeholder-shown + .input-label {
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .input-label,
.Input-text:focus:not(:placeholder-shown) + .input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
\ No newline at end of file
other_calc/home.html 0 → 100644
<!DOCTYPE html>
<!--
This is the front page of the unit calculator,
the user can choose between three themes:
Simple, Fancy and Currency conversion
-->
<html lang="en">
<head>
<title>Unit Calc.</title>
<meta charset="utf-8">
<meta name="description" content="Unit Calc.">
<meta name="author" content="Yusef,Zeyad">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Browsing for Tablet or Phone dimensions-->
<link rel="stylesheet" href="css/style.css"/>
<style>
@import url('https://fonts.googleapis.com/css?family=Passion+One|Roboto+Slab');
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: rgb(108, 53, 176);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<a class="navbar">
<span class ="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
<a href ="#">About Us</a>
<a href="categories/length.php">Length</a>
<a href="categories/temperature.php">Temperature</a>
<a href="categories/area.php">Area</a>
<a href="categories/volume.php">Volume</a>
<a href="categories/weight.php">Weight</a>
<a href="categories/speed.php">Speed</a>
<a href="login">Log in</a>
<a href="login/signup.php">Sign up</a>
</div>
<script src="js/frontSide.js"></script>
<section id="banner">
<div class="inner">
<header>
<h1>Unit Calc.</h1>
<p> An interactive Unit Calculator for all your needs. </p>
<a href="#main" class="more">Choose Conversion</a>
</header>
<a class="log" href="/login/index.html">login
<p>Restore your calculations</p></a>
</div>
</section>
<div id="main">
<div class="inner">
<div class ="categories">
<div class="box">
<a href="" class="image fit"><img src="icons/length.png" width="400" height="355" alt="Length" /></a>
<div class="inner">
<h2>Length</h2>
<a href="categories/length.php" class="button fit" style="cursor: pointer;outline: 0px;background-color: #271010;color: black;">Select</a>
</div>
</div>
<div class="box2">
<a href="" class="image fit"><img src="icons/area.png" width="400" height="355" alt="Area" /></a>
<div class="inner">
<h2>Area</h2>
<a href="categories/area.php" class="button style2 fit">Select</a>
</div>
</div>
<div class="box3">
<a href="" class="image fit"><img src="icons/temperature.png" width="400" height="355" alt="Temperature" /></a>
<div class="inner">
<h2>Temperature</h2>
<a href="categories/temperature.php" class="button style3 fit">Select</a>
</div>
</div>
<div class="box4">
<a href="" class="image fit"><img src="icons/volume.png" width="400" height="355" alt="Volume" /></a>
<div class="inner">
<h2>Volume</h2>
<a href="categories/volume.php" class="button style3 fit">Select</a>
</div>
</div>
<div class="box5">
<a href="" class="image fit"><img src="icons/weight.png" width="400" height="355" alt="Weight" /></a>
<div class="inner">
<h2>Weight</h2>
<a href="categories/weight.php" class="button style3 fit">Select</a>
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="inner">
<section>
<h3>Contact Us</h3>
<form method="POST" action="">
<div class="entry">
<input id="Input" class="Input-text" name="name" placeholder="Name">
<input id="Input" class="Input-text" type="email" name="email" placeholder="Email">
<input id="Input" class="Input-text" name="message" placeholder="Message">
</div>
<div class="registerSubmit">
<input type="submit" name="submit" value="Submit">
</div>
</form>
</section>
</footer>
</body>
</html>
\ No newline at end of file
other_calc/home.php 0 → 100644
<?php
session_start();
if(!isset($_SESSION['loggedIN'])){
//header('Location: login/login.php');
exit();
}
?>
<!DOCTYPE html>
<!--
This is the front page of the unit calculator,
the user can choose between three themes:
Simple, Fancy and Currency conversion
-->
<html lang="en">
<head>
<title>Unit Calc.</title>
<meta charset="utf-8">
<meta name="description" content="Unit Calc.">
<meta name="author" content="Yusef,Zeyad">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Browsing for Tablet or Phone dimensions-->
<link rel="stylesheet" href="css/style.css"/>
<style>
@import url('https://fonts.googleapis.com/css?family=Passion+One|Roboto+Slab');
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: rgb(108, 53, 176);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<nav class="navbar">
<span class ="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
<a href="">Logout?</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
<a href ="#">About Us</a>
<a href="categories/length.php">Length</a>
<a href="categories/temperature.php">Temperature</a>
<a href="categories/area.php">Area</a>
<a href="categories/volume.php">Volume</a>
<a href="categories/weight.php">Weight</a>
<a href="categories/speed.php">Speed</a>
<a href="login">Log in</a>
<a href="login/signup.php">Sign up</a>
</div>
<script src="js/frontSide.js"></script>
<section id="banner">
<div class="inner">
<header>
<h1>Unit Calc.</h1>
<p> An interactive Unit Calculator for all your needs. </p>
<a href="#main" class="more">Choose Conversion</a>
</header>
</div>
</section>
<div id="main">
<div class="inner">
<div class ="categories">
<div class="box">
<a href="" class="image fit"><img src="icons/length.png" width="400" height="355" alt="Length" /></a>
<div class="inner">
<h2>Length</h2>
<a href="categories/length.php" class="button fit" style="cursor: pointer;outline: 0px;background-color: #271010;color: black;">Select</a>
</div>
</div>
<div class="box">
<a href="" class="image fit"><img src="icons/area.png" width="400" height="355" alt="Area" /></a>
<div class="inner">
<h2>Area</h2>
<a href="categories/area.php" class="button style2 fit">Select</a>
</div>
</div>
<div class="box">
<a href="" class="image fit"><img src="icons/temperature.png" width="400" height="355" alt="Temperature" /></a>
<div class="inner">
<h2>Temperature</h2>
<a href="categories/temperature.php" class="button style3 fit">Select</a>
</div>
</div>
<div class="box">
<a href="" class="image fit"><img src="icons/volume.png" width="400" height="355" alt="Volume" /></a>
<div class="inner">
<h2>Volume</h2>
<a href="categories/volume.php" class="button style3 fit">Select</a>
</div>
</div>
<div class="box">
<a href="" class="image fit"><img src="icons/weight.png" width="400" height="355" alt="Weight" /></a>
<div class="inner">
<h2>Weight</h2>
<a href="categories/weight.php" class="button style3 fit">Select</a>
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="inner">
<section>
<h3>Contact Us</h3>
<form method="POST" action="">
<div class="entry">
<input id="Input" class="Input-text" name="name" placeholder="Name">
<input id="Input" class="Input-text" type="email" name="email" placeholder="Email">
<input id="Input" class="Input-text" name="message" placeholder="Message">
</div>
<div class="registerSubmit">
<input type="submit" name="submit" value="Submit">
</div>
</form>
</section>
</footer>
</body>
</html>
\ No newline at end of file
login/index.html → other_calc/login/index.html
......@@ -31,31 +31,22 @@
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
Username<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
<input type="text" id="username" 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"/>
<input type="email" id= "email" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
<input type="password" id="password" required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
......@@ -100,7 +91,39 @@
<script src="js/index.js"></script>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#login").on('click',function(){
var username = $("#username").val();
var email = $("#email").val();
var password= $("#password").val();
if (email == "" || password == "" || username == "")
alert('Please check input');
else{
$.ajax(
{
url: 'login.php',
method: 'POST',
data: {
login: 1,
emailPHP : email,
usernamePHP : username,
passwordPHP : password
},
success: function (response) {
$("#response").html(response);
if(response.indexOf('success')>-1){
window.location = '../home.php';
}
},
dataType: 'text'
}
);
}
});
});
</script>
</body>
......
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