Skip to content

zekena / Unit-calculator

Go to a project
Commit b082937c by zekena
Options

Merge branch 'master' of gitlab.pld.ttu.ee:zekena/Unit-calculator

parents 95a1f2f1 c10cc370
Expand all
Inline Side-by-side
Showing with 4350 additions and 0 deletions
calc/LENGTH_TO_METER.csv 0 → 100755
"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 0 → 100755
<?php
require('dbconnect.php');
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
// Definitions
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');
} else {
echo "Unsupported File";
}
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_area($from_value, $from_unit, $to_unit);
//$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";
}
else{
die(mysql_error($sql));
}
*/
mysqli_close($link);
}
function area_options()
{
$area_options = array(
"square_inches" => 0.0254,
"square_feet" => 0.3048,
"square_yards" => 0.9144,
"square_miles" => 1609.344,
"square_millimeters" => 0.001,
"square_centimeters" => 0.01,
"square_meters" => 1,
"square_kilometers" => 1000,
"acres" => 63.614907234075,
"hectares" => 100
);
$choice = '';
while (list($k, $v) = each($area_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-Area.css" />
<title>Area</title>
</head>
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<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>
</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=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<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>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Area</h1>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id="sinput" class="input">
<form id="io" method="POST">
<!-- calculator input and output-->
<!--Add function to recieve number,
Be able to input number from either box.-->
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp; <label for="Input" class="Input-label">Your entry</label>
<select name="from_unit">
<?php echo area_options(); ?>
</select>
<br>
<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 area_options(); ?>
</select>
<div id="reset" class="button">
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
calc/categories/dbconnect.php 0 → 100755
<?php
//connection variables
define('DB_NAME','project');
define('DB_USER', 'root');
define('DB_PASSWORD','root');
define('DB_HOST','localhost');
$link = new mysqli(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME) or die("Error " . mysqli_error($link));
/*
if(mysqli_connect_error()){
die('Connect Error ('. mysqli_connect_errno().')'.mysqli_connect_error());
}
*/
?>
\ No newline at end of file
calc/categories/length.php 0 → 100755
<?php
// AJAX
//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 = '';
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);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-length.css" />
<title>Length</title>
</head>
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<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>
</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=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<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>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Length</h1>
</div>
<!-- top---->
<div class="calculator">
<!--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">
<!-- calculator input and output-->
<!--Add function to recieve number,
Be able to input number from either box.-->
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp; <label for="Input" class="Input-label">Your entry</label>
<label for="input" class="Input-label">Your Entry</label>
<select name="from_unit">
<?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;
<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"/>
</div>
</form>
</div>
</div>
</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
calc/categories/options.php 0 → 100755
<?php
function length_options(){
$selected = 'selected';
$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;
}
?>
\ No newline at end of file
calc/categories/simp_styles.css 0 → 100755
/* general */
html {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body {
height: 100%; width: 100%;
margin: 0; padding: 0;
background: #EEE;
font: 18px Georgia,Times,"Times New Roman",serif;
}
#main-content {
width: 500px;
margin: 0 auto; padding: 20px 0;
}
h1 {
font: 30px Arial,"Helvetica Neue",Helvetica,sans-serif;
}
/* menu page */
ul#measurement-types {
list-style-type: none;
margin: 1em 0; padding: 0;
}
ul#measurement-types li {
height: auto;
margin: 0 0 10px 0; padding: 0;
}
ul#measurement-types li a {
text-decoration: none;
color: black;
display: block;
background: white;
padding: 16px 24px;
width: 180px;
border: 1px solid black;
}
ul#measurement-types li a:hover {
color: white;
background: #FDB912;
}
/* conversion forms */
form label {
display: inline-block;
width: 45px;
}
form input[type="text"] {
width: 80px;
font-size: 16px;
line-height: 16px;
}
form select {
margin: 1em 0;
font-size: 14px;
}
form input[type="submit"] {
font-size: 1em;
text-decoration: none;
color: black;
display: block;
background: white;
margin: 2em 0 2em 25px;
padding: 6px 12px;
border: 1px solid black;
}
form input[type="submit"]:hover {
color: white;
background: #FDB912;
}
\ No newline at end of file
calc/categories/speed.php 0 → 100755
<?php
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_speed($from_value, $from_unit, $to_unit);
}
$speed_options = array(
"feet per second",
"miles per hour",
"meters per second",
"kilometers per hour",
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-speed.css" />
<title>Convert Speed</title>
</head>
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<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>
</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=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<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>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Speed</h1>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id="sinput" class="input">
<form action="" method="post">
<div class="entry">
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<label for="Input" class="Input-label">Your entry</label>
<select name="from_unit">
<?php
foreach ($speed_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<div class="entry">
<input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value="<?php echo float_to_string($to_value); ?>" />&nbsp;
<label for="Input" class="input-label">Converted Result</label>
<select name="to_unit">
<?php
foreach ($speed_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
calc/categories/temperature.php 0 → 100755
<?php
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_temp($from_value, $from_unit, $to_unit);
}
$temp_options = array(
"Celsius",
"Fahrenheit",
"Kelvin"
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-temp.css" />
<title>Temperature</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>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<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>
</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=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<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>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Temperature</h1>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id="sinput" class="input">
<form action="" method="post">
<div class="entry">
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<label for="Input" class="Input-label">Your entry</label>
<select name="from_unit">
<?php
foreach ($temp_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<div class="entry">
<input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value=" <?php echo float_to_string($to_value); ?>" />&nbsp;
<label for="Input" class="input-label">Converted Result</label>
<select name="to_unit">
<?php
foreach ($temp_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
calc/categories/test.php 0 → 100755
<?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
calc/categories/volume.php 0 → 100755
<?php
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_volume($from_value, $from_unit, $to_unit);
}
$volume_options = array(
'cubic inches',
'cubic feet',
'Imperial gallons',
'Imperial quarts',
'Imperial pints',
'Imperial cups',
'Imperial ounces',
'Imperial tablespoons',
'Imperial teaspoons',
'US gallons',
'US quarts',
'US pints',
'US cups',
'US ounces',
'US tablespoons',
'US teaspoons',
'cubic centimeters',
'cubic meters',
'liters',
'milliliters'
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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");
</script>
</head>
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<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>
</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=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<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>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Volume</h1>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id="sinput" class="input">
<form action="" method="post">
<div class="entry">
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<label for="Input" class="Input-label">Your entry</label>
<select name="from_unit">
<?php
foreach ($volume_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<div class="entry">
<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
foreach ($volume_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
calc/categories/weight.php 0 → 100755
<?php
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_mass($from_value, $from_unit, $to_unit);
}
$mass_options = array(
"ounces",
"pounds",
"stones",
"long tons",
"short tons",
"milligrams",
"grams",
"kilograms",
"metric tonnes"
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-weight.css" />
<title>Convert Weight</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>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<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>
</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=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<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>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Weight</h1>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id="sinput" class="input">
<form action="" method="post">
<div class="entry">
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<label for="Input" class="Input-label">Your entry</label>
<select name="from_unit">
<?php
foreach ($mass_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<div class="entry">
<input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value="<?php echo float_to_string($to_value); ?>" />&nbsp;
<label for="Input" class="input-label">Converted Result</label>
<select name="to_unit">
<?php
foreach ($mass_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
calc/css/login_style.css 0 → 100755
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #2c3338;
color: #606468;
font: 87.5%/1.5em 'Open Sans', sans-serif;
margin: 0;
}
a {
color: rgb(150, 56, 56);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
input {
border: none;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
padding: 0;
-webkit-appearance: none;
}
p {
line-height: 1.5em;
}
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
.container {
left: 50%;
position: fixed;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* ---------- LOGIN ---------- */
#login {
width: 280px;
}
#login form span {
background-color: #363b41;
border-radius: 3px 0px 0px 3px;
color: #606468;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
#login form input {
height: 50px;
}
#login form a {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #eee;
font-weight: bold;
margin-bottom: 2em;
margin-left: 6.5em;
width: 280px;
height: 50px;
}
#login form input[type=text], input[type=password]{
background-color: #25405f;
border-radius: 60px 60px 60px 60px;
color: #30363b;
margin-bottom: 1em;
padding: 25px;
width: 225px;
margin-left: 25px;
}
input[type=button] {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #6e92e485;
color: rgb(234, 182, 182);
font-weight: bold;
margin-bottom: 2em;
width: 280px;
}
#login form input[type="submit"]:hover {
background-color: #be3636;
opacity: 0.7;
color: #100f0f;
}
#login > p {
text-align: center;
}
#login > p span {
padding-left: 5px;
}
\ No newline at end of file
calc/css/simp-Volume.css 0 → 100755
@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("../Volume.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
text-align: center;
}
.navbar{
overflow:hidden;
}
.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(218, 231, 21);
/* color:#000; */
}
.side-nav{
height:120%;
width:0;
position:absolute;
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;
}
@media(max-width:568px){
.navbar-nav{display:none}
}
#title{
background: #f2f60e;
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: #f2f60e;
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: #ae2121;
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: #ae2121;
color: white;
padding: 12px;
width: 250px;
border: none;
font-size: 20px;
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
calc/css/simp-area.css 0 → 100755
@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("../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
calc/css/simp-length.css 0 → 100755
@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("../Length.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
text-align: center;
}
.navbar{
overflow:hidden;
}
.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(78, 188, 92);
/* color:#000; */
}
.side-nav{
height:120%;
width:0;
position:absolute;
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;
}
@media(max-width:568px){
.navbar-nav{display:none}
}
#title{
background: #3FB74F;
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: #3FB74F;
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: #9a4ef1;
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: #5652B7;
color: white;
padding: 12px;
width: 250px;
border: none;
font-size: 20px;
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
calc/css/simp-speed.css 0 → 100755
@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("../speed.png");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
text-align: center;
}
.navbar{
overflow:hidden;
}
.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(247, 57, 103);
/* color:#000; */
}
.side-nav{
height:120%;
width:0;
position:absolute;
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;
}
@media(max-width:568px){
.navbar-nav{display:none}
}
#title{
background: #f9296a;
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: #f73967;
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: #f0cf4f;
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: #f0cf4f;
color: white;
padding: 12px;
width: 250px;
border: none;
font-size: 20px;
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
calc/css/simp-temp.css 0 → 100755
@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("../temp.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
text-align: center;
}
.navbar{
overflow:hidden;
}
.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(219, 220, 198);
/* color:#000; */
}
.side-nav{
height:120%;
width:0;
position:absolute;
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:#ffffff;
}
.side-nav .btn-close{
position:absolute;
top:0;
right:22px;
font-size:36px;
margin-left:50px;
}
@media(max-width:568px){
.navbar-nav{display:none}
}
#title{
background: #e3e3ca;
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: #e3e3ca;
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: #4b6698;
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: #4b6698;
color: white;
padding: 12px;
width: 250px;
border: none;
font-size: 20px;
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
calc/css/simp-weight.css 0 → 100755
@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("../weight.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
text-align: center;
}
.navbar{
overflow:hidden;
}
.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(170, 146, 90);
/* color:#000; */
}
.side-nav{
height:120%;
width:0;
position:absolute;
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;
}
@media(max-width:568px){
.navbar-nav{display:none}
}
#title{
background: #a89459;
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: #a89558;
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: #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 {
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: #6ca593;
color: white;
padding: 12px;
width: 250px;
border: none;
font-size: 20px;
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
calc/css/simp.css 0 → 100755
@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{
text-align: center;
}
#title{
background: #3FB74F;
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: #3FB74F;
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: #9a4ef1;
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[type=text] {
display: block;
margin: 0;
padding: var(--inputPaddingV) var(--inputPaddingH);
color: inherit;
width: 50%;
font-family:'passio none', cursive;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
border: none;
border-radius: 0.4rem;
transition: box-shadow var(--transitionDuration);
}
Input[type=text]::placeholder {
color: #B0BEC5;
}
Input[type=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: inherit;
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[type=text]:placeholder-shown + .Input-label {
visibility: hidden;
z-index: -1;
}
Input[type=text]:not(:placeholder-shown) + .Input-label,
Input[type=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: #5652B7;
color: white;
padding: 12px;
width: 250px;
border: none;
font-size: 20px;
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
calc/css/style.css 0 → 100755
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:#3b5998;
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-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
calc/home.php 0 → 100755
<?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>
</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
calc/includes/functions.php 0 → 100755
<?php
// defines array of length and area
// acres and hectares are squared due to function parameters
define('LENGTH_TO_METER',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
));
define('VOLUME_TO_LITER' ,array(
"cubic_inches" => 0.0163871,
"cubic_feet" => 28.3168,
"cubic_centimeters" => 0.001,
"cubic_meters" => 1000,
"imperial_gallons" => 4.54609,
"imperial_quarts" => 1.13652,
"imperial_pints" => 0.568261,
"imperial_cups" => 0.284131,
"imperial_ounces" => 0.0284131,
"imperial_tablespoons" => 0.0177582,
"imperial_teaspoons" => 0.00591939,
"us_gallons" => 3.78541,
"us_quarts" => 0.946353,
"us_pints" => 0.473176,
"us_cups" => 0.24,
"us_ounces" => 0.0295735,
"us_tablespoons" => 0.0147868,
"us_teaspoons" => 0.00492892,
"liters" => 1,
"milliliters" => 0.001,
));
// Using const with arrays requires PHP 5.6 or higher
const MASS_TO_KILOGRAM = array(
"ounces" => 0.0283495,
"pounds" => 0.453592,
"stones" => 6.35029,
"long_tons" => 1016.05,
"short_tons" => 907.185,
"milligrams" => 0.000001,
"grams" => 0.001,
"kilograms" => 1,
"metric_tonnes" => 1000
);
// The function float_to_string formats a float into a string
// while also avoiding default use of scientific notation.
// Rounds to $precision and trims extra trailing zeros.
function float_to_string($float, $precision=10) {
// Typecast to insure value is a float
$float = (float) $float;
$string = number_format($float, $precision, '.', '');
$string = rtrim($string, '0');
$string = rtrim($string, '.');
return $string;
}
// Length
function convert_to_meters($value, $from_unit) {
if(array_key_exists($from_unit, LENGTH_TO_METER)) {
return $value * LENGTH_TO_METER[$from_unit];
}
else {
return "Unsupported unit.";
}
}
function convert_from_meters($value, $to_unit) {
if(array_key_exists($to_unit, LENGTH_TO_METER)) {
return $value / LENGTH_TO_METER[$to_unit];
}
else {
return "Unsupported unit.";
}
}
function convert_length($value, $from_unit, $to_unit) {
$meter_value = convert_to_meters($value, $from_unit);
$new_value = convert_from_meters($meter_value, $to_unit);
return $new_value;
}
/*
class Length {
var $value;
var $from_unit;
var $to_unit;
function convert_to_meters($value, $from_unit) {
if(array_key_exists($from_unit, LENGTH_TO_METER)) {
return $value * LENGTH_TO_METER[$from_unit];
}
else {
return "Unsupported unit.";
}
}
function convert_from_meters($value, $to_unit) {
if(array_key_exists($to_unit, LENGTH_TO_METER)) {
return $value / LENGTH_TO_METER[$to_unit];
}
else {
return "Unsupported unit.";
}
}
function convert_length($value, $from_unit, $to_unit) {
$meter_value = convert_to_meters($value, $from_unit);
$new_value = convert_from_meters($meter_value, $to_unit);
return $new_value;
}
}
*/
//Area
function convert_to_square_meters($value, $from_unit) {
$from_unit = str_replace('square_', '', $from_unit);
if(array_key_exists($from_unit, LENGTH_TO_METER)) {
return $value * pow(LENGTH_TO_METER[$from_unit], 2);
} else {
return "Unsupported unit.";
}
}
function convert_from_square_meters($value, $to_unit) {
$to_unit = str_replace('square_', '', $to_unit);
if(array_key_exists($to_unit, LENGTH_TO_METER)) {
return $value / pow(LENGTH_TO_METER[$to_unit], 2);
} else {
return "Unsupported unit.";
}
}
function convert_area($value, $from_unit, $to_unit) {
$meter_value = convert_to_square_meters($value, $from_unit);
$new_value = convert_from_square_meters($meter_value, $to_unit);
return $new_value;
}
//Volume
function convert_to_liters($value, $from_unit) {
if(array_key_exists($from_unit, VOLUME_TO_LITER)) {
return $value * VOLUME_TO_LITER[$from_unit];
} else {
return "Unsupported unit.";
}
}
function convert_from_liters($value, $to_unit) {
if(array_key_exists($to_unit, VOLUME_TO_LITER)) {
return $value / VOLUME_TO_LITER[$to_unit];
} else {
return "Unsupported unit.";
}
}
function convert_volume($value, $from_unit, $to_unit) {
$liter_value = convert_to_liters($value, $from_unit);
$new_value = convert_from_liters($liter_value, $to_unit);
return $new_value;
}
// Mass
function convert_to_kilograms($value, $from_unit) {
if(array_key_exists($from_unit, MASS_TO_KILOGRAM)) {
return $value * MASS_TO_KILOGRAM[$from_unit];
} else {
return "Unsupported unit.";
}
}
function convert_from_kilograms($value, $to_unit) {
if(array_key_exists($to_unit, MASS_TO_KILOGRAM)) {
return $value / MASS_TO_KILOGRAM[$to_unit];
} else {
return "Unsupported unit.";
}
}
function convert_mass($value, $from_unit, $to_unit) {
$liter_value = convert_to_kilograms($value, $from_unit);
$new_value = convert_from_kilograms($liter_value, $to_unit);
return $new_value;
}
//speed
function convert_speed($value,$from_unit,$to_unit){
list($from_dist,$from_time)=explode ('_per_',$from_unit);
list($to_dist,$to_time)=explode ('_per_',$to_unit);
if ($from_time == 'hour'){ $value /= 3600;}
$value = convert_length($value,$from_dist,$to_dist);
if ($to_time == 'hour'){ $value /= 3600;}
return $value;
}
//Temperature
function convert_from_celsius($value,$from_unit){
switch($from_unit){
case 'celsius':
return $value;
break;
case 'fahrenheit':
return ($value-32)/1.8;
break;
case 'kelvin':
return $value -273.15;
break;
default:
return "Unsupported unit.";
}
}
function convert_to_celsius($value,$to_unit){
switch($to_unit){
case 'celsius':
return $value;
break;
case 'fahrenheit':
return ($value * 1.8 ) +32;
break;
case 'kelvin':
return $value + 273.15;
break;
default:
return "Unsupported unit.";
}
}
function convert_temp($value,$from_unit,$to_unit){
$celsius_value = convert_from_celsius($value, $from_unit);
$new_value = convert_to_celsius($celsius_value, $to_unit);
return $new_value;
}
function optionize($string){
return str_replace(' ','_',strtolower($string));
}
?>
calc/js/frontSide.js 0 → 100755
function openSlideMenu(){
document.getElementById('side-menu').style.width = '250px';
document.getElementById('main').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('side-menu').style.width = '0';
document.getElementById('main').style.marginLeft = '0';
}
\ No newline at end of file
calc/login/db.php 0 → 100644
<?php
//connection variables
define('DB_NAME','loginsystem');
define('DB_USER', 'root');
define('DB_PASSWORD','root');
define('DB_HOST','localhost');
$link = new mysqli(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME) or die("Error " . mysqli_error($link));
/*
if(mysqli_connect_error()){
die('Connect Error ('. mysqli_connect_errno().')'.mysqli_connect_error());
}
*/
?>
\ No newline at end of file
calc/login/log.php 0 → 100755
<?php
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Signup</title>
<link rel="stylesheet" href="../css/login_style.css" media="screen" type="text/css" />
</head>
<body>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
<div class="container">
<div id="login">
<form action="" method="get">
<fieldset class="clearfix">
<p><input type="text" name="sign_username" placeholder="Username"></p>
<p><input type="password" name="sign_password" placeholder="Password"></p>
<p><input type="submit" name="submit" placeholder="Submit"></p>
</fieldset>
</form>
</div>
</div>
</body>
</html>
</body>
</html>
\ No newline at end of file
calc/login/login.php 0 → 100755
<?php
require('db.php');
function protect($string){
$string = mysql_real_escape_string(trim(strip_tags(addslashes($string))));
return $string;
}
session_start();
if (isset($_SESSION['loggedIN'])){
header('Location: ../home.php');
exit();
}
if (isset($_POST['login'])){
$username = $link->real_escape_string($_POST['usernamePHP']);
$email = $link->real_escape_string($_POST['emailPHP']);
$password = $link->real_escape_string($_POST['passwordPHP']);
$data = $link->query("SELECT id FROM users WHERE username='$username' AND email='$email' AND password='$password'");
if ($data->num_rows > 0){
$_SESSION['loggedIN'] = '1';
$_SESSION['username'] = $username;
$_SESSION['email']= $email;
$_SESSION['password']= $password;
exit('Success..');
} else{
exit('failed');
}
}
?>
<!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="login.php" method="POST" >
<p><input type="text" id="username" name="username" placeholder="Username"></p>
<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>
</form>
<p id="response"></p>
</div>
</div>
<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>
</html>
calc/login/logout.php 0 → 100644
<?php
session_start();
unset($_SESSION['loggedIN']);
session_destroy();
header('Location: login.php');
exit();
?>
\ No newline at end of file
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