Skip to content

zekena / Unit-calculator

Go to a project
Commit 247ddbb8 by zekena
Options

styling

parent 036803c4
Inline Side-by-side
Showing with 2636 additions and 192 deletions
Area.jpg 0 → 100644
Area.jpg

101 KB
Volume.jpg 0 → 100644
Volume.jpg

65.6 KB
categories/area.php
<?php <?php
require('dbconnect.php'); require('dbconnect.php');
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
// Definitions // Definitions
if (file_exists('dbconnect.php')){ if (file_exists('dbconnect.php')) {
require('dbconnect.php'); require('dbconnect.php');
if(mysqli_connect_error()){ if (mysqli_connect_error()) {
die('Connect Error ('. mysqli_connect_errno().')'.mysqli_connect_error()); die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error());
} }
} }
//Add function file //Add function file
if(file_exists('../includes/functions.php')){ if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php'); require_once('../includes/functions.php');
} } else {
else{
echo "Unsupported File"; echo "Unsupported File";
} }
...@@ -21,7 +22,7 @@ $from_unit = ''; ...@@ -21,7 +22,7 @@ $from_unit = '';
$to_unit = ''; $to_unit = '';
$to_value = ''; $to_value = '';
if($_POST['submit']) { if ($_POST['submit']) {
$from_value = $_POST['from_value']; $from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit']; $from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit']; $to_unit = $_POST['to_unit'];
...@@ -32,10 +33,10 @@ if($_POST['submit']) { ...@@ -32,10 +33,10 @@ if($_POST['submit']) {
echo $sql; echo $sql;
if (!mysqli_query($link, $sql)) { if (!mysqli_query($link, $sql)) {
die('An error occurred when submitting your review.'); die('An error occurred when submitting your review.');
} else { } else {
echo "Thanks for your review."; echo "Thanks for your review.";
} }
/* /*
if($link->query($sql)){ if($link->query($sql)){
echo "Record Added"; echo "Record Added";
} }
...@@ -45,11 +46,12 @@ if($_POST['submit']) { ...@@ -45,11 +46,12 @@ if($_POST['submit']) {
*/ */
mysqli_close($link); mysqli_close($link);
} }
function area_options(){ function area_options()
{
$area_options = array( $area_options = array(
"square_inches" => 0.0254, "square_inches" => 0.0254,
"square_feet" => 0.3048, "square_feet" => 0.3048,
...@@ -60,31 +62,61 @@ function area_options(){ ...@@ -60,31 +62,61 @@ function area_options(){
"square_meters" => 1, "square_meters" => 1,
"square_kilometers" => 1000, "square_kilometers" => 1000,
"acres" => 63.614907234075, "acres" => 63.614907234075,
"hectares" => 100); "hectares" => 100
);
$choice = ''; $choice = '';
while(list($k,$v)=each($area_options)) while (list($k, $v) = each($area_options)) {
{ $choice .= '<option value = "' . $k . '">' . $k . '</option>';
$choice.='<option value = "'.$k.'">'.$k.'</option>';
} }
return $choice; return $choice;
} }
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.css"/> <link rel="stylesheet" href="../css/simp-Area.css" />
<title>Simple</title> <title>Area</title>
</head> </head>
<body>
<body>
<!--This is the simpler version, <!--This is the simpler version,
supposed to have- supposed to have-
>a top title >a top title
>a side bar menu >a side bar menu
>calculator with input,output,reset button--> >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"> <div id="title">
<h1>Area</h1> <h1>Area</h1>
</div> </div>
...@@ -93,21 +125,21 @@ function area_options(){ ...@@ -93,21 +125,21 @@ function area_options(){
<!--whole calculator outline--> <!--whole calculator outline-->
<div class="calcb"> <div class="calcb">
<!--Calculator box --> <!--Calculator box -->
<div id = "sinput" class = "input"> <div id="sinput" class="input">
<form id="io" method="POST"> <form id="io" method="POST">
<!-- calculator input and output--> <!-- calculator input and output-->
<!--Add function to recieve number, <!--Add function to recieve number,
Be able to input number from either box.--> Be able to input number from either box.-->
<input type="text" name="from_value" placeholder="Enter amount" value="<?php echo $from_value; ?>" />&nbsp; <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"> <select name="from_unit">
<?php echo area_options(); ?> <?php echo area_options(); ?>
</select> </select>
<br> <br>
<input type="text" name="to_value" placeholder="Converted result" 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"> <select name="to_unit">
<?php echo area_options(); ?> <?php echo area_options(); ?>
</select> </select>
<div id="reset" class="button"> <div id="reset" class="button">
<input type="submit" name="submit" value="Submit" /> <input type="submit" name="submit" value="Submit" />
</div> </div>
...@@ -117,5 +149,6 @@ function area_options(){ ...@@ -117,5 +149,6 @@ function area_options(){
</div> </div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
categories/length.php
...@@ -2,10 +2,9 @@ ...@@ -2,10 +2,9 @@
//Add function files //Add function files
require('options.php'); require('options.php');
if(file_exists('../includes/functions.php')){ if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php'); require_once('../includes/functions.php');
} } else {
else{
echo "Unsupported File"; echo "Unsupported File";
} }
//establish values //establish values
...@@ -17,7 +16,7 @@ $from_unit = ''; ...@@ -17,7 +16,7 @@ $from_unit = '';
$to_unit = ''; $to_unit = '';
$to_value = ''; $to_value = '';
if($_POST['submit']) { if ($_POST['submit']) {
$from_value = $_POST['from_value']; $from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit']; $from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit']; $to_unit = $_POST['to_unit'];
...@@ -50,18 +49,47 @@ function length_options(){ ...@@ -50,18 +49,47 @@ function length_options(){
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.css"/> <link rel="stylesheet" href="../css/simp-length.css" />
<title>Simple</title> <title>Length</title>
</head>
</head> <body>
<body>
<!--This is the simpler version, <!--This is the simpler version,
supposed to have- supposed to have-
>a top title >a top title
>a side bar menu >a side bar menu
>calculator with input,output,reset button--> >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"> <div id="title">
<h1>Length</h1> <h1>Length</h1>
</div> </div>
...@@ -70,24 +98,26 @@ function length_options(){ ...@@ -70,24 +98,26 @@ function length_options(){
<!--whole calculator outline--> <!--whole calculator outline-->
<div class="calcb"> <div class="calcb">
<!--Calculator box --> <!--Calculator box -->
<div id = "sinput" class = "input"> <div id="sinput" class="input">
<form id="io" action="" method="POST"> <form id="io" action="" method="POST">
<!-- calculator input and output--> <!-- calculator input and output-->
<!--Add function to recieve number, <!--Add function to recieve number,
Be able to input number from either box.--> Be able to input number from either box.-->
<input type="text" name="from_value" placeholder="Enter amount" value="<?php echo $from_value; ?>" selected />&nbsp; <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"> <select name="from_unit">
<?php echo length_options(); ?> <?php echo length_options(); ?>
</select> </select>
<br> <br>
<input type="text" name="to_value" placeholder="Converted result" 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"> <select name="to_unit">
<?php echo length_options();?> <?php echo length_options(); ?>
</select> </select>
<div id="reset" class="button"> <div id="reset" class="button">
<input type="submit" name="submit" value="Submit"/> <input type="submit" name="submit" value="Submit" />
</div> </div>
</form> </form>
</div> </div>
...@@ -95,5 +125,6 @@ function length_options(){ ...@@ -95,5 +125,6 @@ function length_options(){
</div> </div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
categories/speed.php
<?php <?php
//Add function file //Add function file
if(file_exists('../includes/functions.php')){ if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php'); require_once('../includes/functions.php');
} } else {
else{
echo "Unsupported File"; echo "Unsupported File";
} }
...@@ -12,7 +11,7 @@ $from_unit = ''; ...@@ -12,7 +11,7 @@ $from_unit = '';
$to_unit = ''; $to_unit = '';
$to_value = ''; $to_value = '';
if($_POST['submit']) { if ($_POST['submit']) {
$from_value = $_POST['from_value']; $from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit']; $from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit']; $to_unit = $_POST['to_unit'];
...@@ -29,17 +28,46 @@ $speed_options = array( ...@@ -29,17 +28,46 @@ $speed_options = array(
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.css"/> <link rel="stylesheet" href="../css/simp-speed.css" />
<title>Convert Speed</title> <title>Convert Speed</title>
</head> </head>
<body>
<body>
<!--This is the simpler version, <!--This is the simpler version,
supposed to have- supposed to have-
>a top title >a top title
>a side bar menu >a side bar menu
>calculator with input,output,reset button--> >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"> <div id="title">
<h1>Speed</h1> <h1>Speed</h1>
</div> </div>
...@@ -48,18 +76,20 @@ $speed_options = array( ...@@ -48,18 +76,20 @@ $speed_options = array(
<!--whole calculator outline--> <!--whole calculator outline-->
<div class="calcb"> <div class="calcb">
<!--Calculator box --> <!--Calculator box -->
<div id = "sinput" class = "input"> <div id="sinput" class="input">
<form action="" method="post"> <form action="" method="post">
<div class="entry"> <div class="entry">
<label>From:</label>&nbsp; <input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<input type="text" name="from_value" value="<?php echo $from_value; ?>" />&nbsp; <label for="Input" class="Input-label">Your entry</label>
<select name="from_unit"> <select name="from_unit">
<?php <?php
foreach($speed_options as $unit) { foreach ($speed_options as $unit) {
$opt = optionize($unit); $opt = optionize($unit);
echo "<option value=\"{$opt}\""; echo "<option value=\"{$opt}\"";
if($from_unit == $opt) { echo " selected"; } if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>"; echo ">{$unit}</option>";
} }
?> ?>
...@@ -67,14 +97,16 @@ $speed_options = array( ...@@ -67,14 +97,16 @@ $speed_options = array(
</div> </div>
<div class="entry"> <div class="entry">
<label>To:</label>&nbsp; <input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value="<?php echo float_to_string($to_value); ?>" />&nbsp;
<input type="text" 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"> <select name="to_unit">
<?php <?php
foreach($speed_options as $unit) { foreach ($speed_options as $unit) {
$opt = optionize($unit); $opt = optionize($unit);
echo "<option value=\"{$opt}\""; echo "<option value=\"{$opt}\"";
if($from_unit == $opt) { echo " selected"; } if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>"; echo ">{$unit}</option>";
} }
?> ?>
...@@ -90,5 +122,6 @@ $speed_options = array( ...@@ -90,5 +122,6 @@ $speed_options = array(
</div> </div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
categories/temperature.php
<?php <?php
//Add function file //Add function file
if(file_exists('../includes/functions.php')){ if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php'); require_once('../includes/functions.php');
} } else {
else{
echo "Unsupported File"; echo "Unsupported File";
} }
...@@ -12,7 +11,7 @@ $from_unit = ''; ...@@ -12,7 +11,7 @@ $from_unit = '';
$to_unit = ''; $to_unit = '';
$to_value = ''; $to_value = '';
if($_POST['submit']) { if ($_POST['submit']) {
$from_value = $_POST['from_value']; $from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit']; $from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit']; $to_unit = $_POST['to_unit'];
...@@ -28,26 +27,26 @@ $temp_options = array( ...@@ -28,26 +27,26 @@ $temp_options = array(
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.css"/> <link rel="stylesheet" href="../css/simp-temp.css" />
<title>Convert Temperature</title> <title>Temperature</title>
<script> <script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//Alert message once script- By JavaScript Kit //specify message to alert
//Credit notice must stay intact for use var alertmessage = "Click Side button to calculate measurements in batch"
//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///// ///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes) //Alert only once per browser session (0=no, 1=yes)
var once_per_session=1 var once_per_session = 1
function get_cookie(Name) { function get_cookie(Name) {
var search = Name + "=" var search = Name + "="
var returnvalue = ""; var returnvalue = "";
if (document.cookie.length > 0) { if (document.cookie.length > 0) {
...@@ -59,36 +58,63 @@ function get_cookie(Name) { ...@@ -59,36 +58,63 @@ function get_cookie(Name) {
// set index of end of cookie value // set index of end of cookie value
if (end == -1) if (end == -1)
end = document.cookie.length; end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end)) returnvalue = unescape(document.cookie.substring(offset, end))
} }
} }
return returnvalue; return returnvalue;
} }
function alertornot(){ function alertornot() {
if (get_cookie('alerted')==''){ if (get_cookie('alerted') == '') {
loadalert() loadalert()
document.cookie="alerted=yes" document.cookie = "alerted=yes"
} }
} }
function loadalert(){ function loadalert() {
alert(alertmessage) alert(alertmessage)
} }
if (once_per_session==0) if (once_per_session == 0)
loadalert() loadalert()
else else
alertornot() alertornot()
</script>
</head>
</script> <body>
</head>
<body>
<!--This is the simpler version, <!--This is the simpler version,
supposed to have- supposed to have-
>a top title >a top title
>a side bar menu >a side bar menu
>calculator with input,output,reset button--> >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"> <div id="title">
<h1>Temperature</h1> <h1>Temperature</h1>
</div> </div>
...@@ -97,18 +123,20 @@ alertornot() ...@@ -97,18 +123,20 @@ alertornot()
<!--whole calculator outline--> <!--whole calculator outline-->
<div class="calcb"> <div class="calcb">
<!--Calculator box --> <!--Calculator box -->
<div id = "sinput" class = "input"> <div id="sinput" class="input">
<form action="" method="post"> <form action="" method="post">
<div class="entry"> <div class="entry">
<label>From:</label>&nbsp; <input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<input type="text" name="from_value" value="<?php echo $from_value; ?>" />&nbsp; <label for="Input" class="Input-label">Your entry</label>
<select name="from_unit"> <select name="from_unit">
<?php <?php
foreach($temp_options as $unit) { foreach ($temp_options as $unit) {
$opt = optionize($unit); $opt = optionize($unit);
echo "<option value=\"{$opt}\""; echo "<option value=\"{$opt}\"";
if($from_unit == $opt) { echo " selected"; } if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>"; echo ">{$unit}</option>";
} }
?> ?>
...@@ -116,14 +144,16 @@ alertornot() ...@@ -116,14 +144,16 @@ alertornot()
</div> </div>
<div class="entry"> <div class="entry">
<label>To:</label>&nbsp; <input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value=" <?php echo float_to_string($to_value); ?>" />&nbsp;
<input type="text" 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"> <select name="to_unit">
<?php <?php
foreach($temp_options as $unit) { foreach ($temp_options as $unit) {
$opt = optionize($unit); $opt = optionize($unit);
echo "<option value=\"{$opt}\""; echo "<option value=\"{$opt}\"";
if($from_unit == $opt) { echo " selected"; } if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>"; echo ">{$unit}</option>";
} }
?> ?>
...@@ -140,5 +170,6 @@ alertornot() ...@@ -140,5 +170,6 @@ alertornot()
</div> </div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
categories/volume.php
<?php <?php
//Add function file //Add function file
if(file_exists('../includes/functions.php')){ if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php'); require_once('../includes/functions.php');
} } else {
else{
echo "Unsupported File"; echo "Unsupported File";
} }
...@@ -12,7 +11,7 @@ $from_unit = ''; ...@@ -12,7 +11,7 @@ $from_unit = '';
$to_unit = ''; $to_unit = '';
$to_value = ''; $to_value = '';
if($_POST['submit']) { if ($_POST['submit']) {
$from_value = $_POST['from_value']; $from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit']; $from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit']; $to_unit = $_POST['to_unit'];
...@@ -44,20 +43,49 @@ $volume_options = array( ...@@ -44,20 +43,49 @@ $volume_options = array(
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.css"/> <link rel="stylesheet" href="../css/simp-Volume.css" />
<title>Convert Volume</title> <title>Convert Volume</title>
<script> <script>
alert("If you want to calculate entries in batch click the side button"); alert("If you want to calculate entries in batch click the side button");
</script> </script>
</head> </head>
<body>
<body>
<!--This is the simpler version, <!--This is the simpler version,
supposed to have- supposed to have-
>a top title >a top title
>a side bar menu >a side bar menu
>calculator with input,output,reset button--> >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"> <div id="title">
<h1>Volume</h1> <h1>Volume</h1>
</div> </div>
...@@ -66,18 +94,20 @@ $volume_options = array( ...@@ -66,18 +94,20 @@ $volume_options = array(
<!--whole calculator outline--> <!--whole calculator outline-->
<div class="calcb"> <div class="calcb">
<!--Calculator box --> <!--Calculator box -->
<div id = "sinput" class = "input"> <div id="sinput" class="input">
<<form action="" method="post"> <form action="" method="post">
<div class="entry"> <div class="entry">
<label>From:</label>&nbsp; <input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<input type="text" name="from_value" value="<?php echo $from_value; ?>" />&nbsp; <label for="Input" class="Input-label">Your entry</label>
<select name="from_unit"> <select name="from_unit">
<?php <?php
foreach($volume_options as $unit) { foreach ($volume_options as $unit) {
$opt = optionize($unit); $opt = optionize($unit);
echo "<option value=\"{$opt}\""; echo "<option value=\"{$opt}\"";
if($from_unit == $opt) { echo " selected"; } if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>"; echo ">{$unit}</option>";
} }
?> ?>
...@@ -85,14 +115,16 @@ $volume_options = array( ...@@ -85,14 +115,16 @@ $volume_options = array(
</div> </div>
<div class="entry"> <div class="entry">
<label>To:</label>&nbsp; <input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value=" <?php echo $to_value; ?>" />&nbsp;
<input type="text" name="to_value" value="<?php echo $to_value; ?>" />&nbsp; <label for="Input" class="input-label">Converted Result</label>
<select name="to_unit"> <select name="to_unit">
<?php <?php
foreach($volume_options as $unit) { foreach ($volume_options as $unit) {
$opt = optionize($unit); $opt = optionize($unit);
echo "<option value=\"{$opt}\""; echo "<option value=\"{$opt}\"";
if($from_unit == $opt) { echo " selected"; } if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>"; echo ">{$unit}</option>";
} }
?> ?>
...@@ -108,5 +140,6 @@ $volume_options = array( ...@@ -108,5 +140,6 @@ $volume_options = array(
</div> </div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
categories/weight.php
<?php <?php
//Add function file //Add function file
if(file_exists('../includes/functions.php')){ if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php'); require_once('../includes/functions.php');
} } else {
else{
echo "Unsupported File"; echo "Unsupported File";
} }
...@@ -12,7 +11,7 @@ $from_unit = ''; ...@@ -12,7 +11,7 @@ $from_unit = '';
$to_unit = ''; $to_unit = '';
$to_value = ''; $to_value = '';
if($_POST['submit']) { if ($_POST['submit']) {
$from_value = $_POST['from_value']; $from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit']; $from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit']; $to_unit = $_POST['to_unit'];
...@@ -34,26 +33,26 @@ $mass_options = array( ...@@ -34,26 +33,26 @@ $mass_options = array(
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.css"/> <link rel="stylesheet" href="../css/simp-weight.css" />
<title>Convert Weight</title> <title>Convert Weight</title>
<script> <script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//Alert message once script- By JavaScript Kit //specify message to alert
//Credit notice must stay intact for use var alertmessage = "Click Side button to calculate measurements in batch"
//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///// ///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes) //Alert only once per browser session (0=no, 1=yes)
var once_per_session=1 var once_per_session = 1
function get_cookie(Name) { function get_cookie(Name) {
var search = Name + "=" var search = Name + "="
var returnvalue = ""; var returnvalue = "";
if (document.cookie.length > 0) { if (document.cookie.length > 0) {
...@@ -65,36 +64,63 @@ function get_cookie(Name) { ...@@ -65,36 +64,63 @@ function get_cookie(Name) {
// set index of end of cookie value // set index of end of cookie value
if (end == -1) if (end == -1)
end = document.cookie.length; end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end)) returnvalue = unescape(document.cookie.substring(offset, end))
} }
} }
return returnvalue; return returnvalue;
} }
function alertornot(){ function alertornot() {
if (get_cookie('alerted')==''){ if (get_cookie('alerted') == '') {
loadalert() loadalert()
document.cookie="alerted=yes" document.cookie = "alerted=yes"
} }
} }
function loadalert(){ function loadalert() {
alert(alertmessage) alert(alertmessage)
} }
if (once_per_session==0) if (once_per_session == 0)
loadalert() loadalert()
else else
alertornot() alertornot()
</script>
</head>
</script> <body>
</head>
<body>
<!--This is the simpler version, <!--This is the simpler version,
supposed to have- supposed to have-
>a top title >a top title
>a side bar menu >a side bar menu
>calculator with input,output,reset button--> >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"> <div id="title">
<h1>Weight</h1> <h1>Weight</h1>
</div> </div>
...@@ -103,18 +129,20 @@ alertornot() ...@@ -103,18 +129,20 @@ alertornot()
<!--whole calculator outline--> <!--whole calculator outline-->
<div class="calcb"> <div class="calcb">
<!--Calculator box --> <!--Calculator box -->
<div id = "sinput" class = "input"> <div id="sinput" class="input">
<form action="" method="post"> <form action="" method="post">
<div class="entry"> <div class="entry">
<label>From:</label>&nbsp; <input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<input type="text" name="from_value" value="<?php echo $from_value; ?>" />&nbsp; <label for="Input" class="Input-label">Your entry</label>
<select name="from_unit"> <select name="from_unit">
<?php <?php
foreach($mass_options as $unit) { foreach ($mass_options as $unit) {
$opt = optionize($unit); $opt = optionize($unit);
echo "<option value=\"{$opt}\""; echo "<option value=\"{$opt}\"";
if($from_unit == $opt) { echo " selected"; } if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>"; echo ">{$unit}</option>";
} }
?> ?>
...@@ -122,14 +150,16 @@ alertornot() ...@@ -122,14 +150,16 @@ alertornot()
</div> </div>
<div class="entry"> <div class="entry">
<label>To:</label>&nbsp; <input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value="<?php echo float_to_string($to_value); ?>" />&nbsp;
<input type="text" 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"> <select name="to_unit">
<?php <?php
foreach($mass_options as $unit) { foreach ($mass_options as $unit) {
$opt = optionize($unit); $opt = optionize($unit);
echo "<option value=\"{$opt}\""; echo "<option value=\"{$opt}\"";
if($from_unit == $opt) { echo " selected"; } if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>"; echo ">{$unit}</option>";
} }
?> ?>
...@@ -145,5 +175,6 @@ alertornot() ...@@ -145,5 +175,6 @@ alertornot()
</div> </div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
css/simp-Volume.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("../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
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("../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 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("../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
css/simp-speed.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("../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
css/simp-temp.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("../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
css/simp-weight.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("../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
css/simp.css
@charset "UTF-8"; @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{ body{
background-color: #C1DFE7;
text-align: center; text-align: center;
} }
#title{ #title{
background: #A6D3DF; background: #3FB74F;
opacity: 0.9; opacity: 0.9;
} }
#title h1{ #title h1{
...@@ -19,6 +62,7 @@ body{ ...@@ -19,6 +62,7 @@ body{
text-align: center; text-align: center;
} }
/* Calculator box */ /* Calculator box */
.calculator{ .calculator{
...@@ -26,12 +70,14 @@ body{ ...@@ -26,12 +70,14 @@ body{
-webkit-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61); -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); -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); box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
background-color: #abacb8; background-color: #3FB74F;
padding: 48px 25px; padding:25px 32px;
height:50%;
border-radius: 17px; border-radius: 17px;
width: 80%; width: 50%;
position: relative; position: relative;
top: 200px; top: 150px;
} }
#theme { #theme {
position: relative; position: relative;
...@@ -44,15 +90,143 @@ body{ ...@@ -44,15 +90,143 @@ body{
width:15%; width:15%;
height: 25px; height: 25px;
} }
#sinput {
display: inline-block;
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);
}
.button { select {
background-color: #70c7be; padding: 30px;
border-radius: 15px;
height: 2.85em;
line-height: 2.95em;
} }
\ No newline at end of file
css/style.css
...@@ -223,3 +223,136 @@ body{ ...@@ -223,3 +223,136 @@ body{
width: 50%; width: 50%;
margin: 0 auto; 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
home.html
...@@ -11,9 +11,11 @@ Simple, Fancy and Currency conversion ...@@ -11,9 +11,11 @@ Simple, Fancy and Currency conversion
<meta name="description" content="Unit Calc."> <meta name="description" content="Unit Calc.">
<meta name="author" content="Yusef,Zeyad"> <meta name="author" content="Yusef,Zeyad">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Browsing for Tablet or Phone dimensions--> <!--Browsing for Tablet or Phone dimensions-->
<link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/style.css"/>
<style> <style>
@import url('https://fonts.googleapis.com/css?family=Passion+One|Roboto+Slab');
#myBtn { #myBtn {
display: none; display: none;
position: fixed; position: fixed;
...@@ -74,8 +76,9 @@ Simple, Fancy and Currency conversion ...@@ -74,8 +76,9 @@ Simple, Fancy and Currency conversion
<a href="categories/area.php">Area</a> <a href="categories/area.php">Area</a>
<a href="categories/volume.php">Volume</a> <a href="categories/volume.php">Volume</a>
<a href="categories/weight.php">Weight</a> <a href="categories/weight.php">Weight</a>
<a href="categories/time.php">Time</a>
<a href="categories/speed.php">Speed</a> <a href="categories/speed.php">Speed</a>
<a href="login">Log in</a>
<a href="login/signup.php">Sign up</a>
</div> </div>
...@@ -124,13 +127,7 @@ Simple, Fancy and Currency conversion ...@@ -124,13 +127,7 @@ Simple, Fancy and Currency conversion
<a href="categories/volume.php" class="button style3 fit">Select</a> <a href="categories/volume.php" class="button style3 fit">Select</a>
</div> </div>
</div> </div>
<div class="box">
<a href="" class="image fit"><img src="icons/time.png" width="400" height="355" alt="Time" /></a>
<div class="inner">
<h2>Time</h2>
<a href="categories/time.php" class="button style3 fit">Select</a>
</div>
</div>
<div class="box"> <div class="box">
<a href="" class="image fit"><img src="icons/weight.png" width="400" height="355" alt="Weight" /></a> <a href="" class="image fit"><img src="icons/weight.png" width="400" height="355" alt="Weight" /></a>
<div class="inner"> <div class="inner">
...@@ -148,9 +145,9 @@ Simple, Fancy and Currency conversion ...@@ -148,9 +145,9 @@ Simple, Fancy and Currency conversion
<h3>Contact Us</h3> <h3>Contact Us</h3>
<form method="POST" action=""> <form method="POST" action="">
<div class="entry"> <div class="entry">
<input id="name" type="text" name="name" placeholder="Name"> <input id="Input" class="Input-text" name="name" placeholder="Name">
<input id = "email" type="email" name="email" placeholder="Email"> <input id="Input" class="Input-text" type="email" name="email" placeholder="Email">
<input id="message" type="" name="message" placeholder="Message"> <input id="Input" class="Input-text" name="message" placeholder="Message">
</div> </div>
<div class="registerSubmit"> <div class="registerSubmit">
<input type="submit" name="submit" value="Submit"> <input type="submit" name="submit" value="Submit">
......
speed.png 0 → 100644
speed.png

338 KB
temp.jpg 0 → 100644
temp.jpg

88.3 KB
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