Skip to content

zekena / Unit-calculator

Go to a project
Commit 247ddbb8 by zekena
Options

styling

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

101 KB
Volume.jpg 0 → 100644
Volume.jpg

65.6 KB
categories/area.php
<?php
require('dbconnect.php');
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
// Definitions
if (file_exists('dbconnect.php')){
if (file_exists('dbconnect.php')) {
require('dbconnect.php');
if(mysqli_connect_error()){
die('Connect Error ('. mysqli_connect_errno().')'.mysqli_connect_error());
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";
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
$from_value = '';
......@@ -21,21 +22,21 @@ $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 ($_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";
}
......@@ -43,13 +44,14 @@ if($_POST['submit']) {
die(mysql_error($sql));
}
*/
mysqli_close($link);
mysqli_close($link);
}
function area_options(){
function area_options()
{
$area_options = array(
"square_inches" => 0.0254,
"square_feet" => 0.3048,
......@@ -60,31 +62,61 @@ function area_options(){
"square_meters" => 1,
"square_kilometers" => 1000,
"acres" => 63.614907234075,
"hectares" => 100);
"hectares" => 100
);
$choice = '';
while(list($k,$v)=each($area_options))
{
$choice.='<option value = "'.$k.'">'.$k.'</option>';
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.css"/>
<title>Simple</title>
</head>
<body>
<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>
......@@ -93,29 +125,30 @@ function area_options(){
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id = "sinput" class = "input">
<form id="io" method="POST">
<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 type="text" name="from_value" placeholder="Enter amount" value="<?php echo $from_value; ?>" />&nbsp;
<select name="from_unit">
<?php echo area_options(); ?>
</select>
<br>
<input type="text" name="to_value" placeholder="Converted result" value="<?php echo $to_value; ?>" />&nbsp;
<select name="to_unit">
<?php echo area_options(); ?>
</select>
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" />
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</div>
</body>
</html>
\ No newline at end of file
categories/length.php
......@@ -2,10 +2,9 @@
//Add function files
require('options.php');
if(file_exists('../includes/functions.php')){
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
}
else{
} else {
echo "Unsupported File";
}
//establish values
......@@ -17,12 +16,12 @@ $from_unit = '';
$to_unit = '';
$to_value = '';
if($_POST['submit']) {
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_length($from_value, $from_unit, $to_unit);
}
/*
......@@ -50,50 +49,82 @@ function length_options(){
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.css"/>
<title>Simple</title>
</head>
<body>
<!--This is the simpler version,
<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-->
<div id="title">
<h1>Length</h1>
<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 -->
<div id="sinput" class="input">
<form id="io" action="" 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="Input" class="Input-text" placeholder="Wait for it" name="to_value" value=" <?php echo $to_value; ?>" />&nbsp;
<label for="input" class="input-label">Converted result</label>
<select name="to_unit">
<?php echo length_options(); ?>
</select>
<div id="reset" class="button">
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id = "sinput" class = "input">
<form id="io" action="" method="POST">
<!-- calculator input and output-->
<!--Add function to recieve number,
Be able to input number from either box.-->
<input type="text" name="from_value" placeholder="Enter amount" value="<?php echo $from_value; ?>" selected />&nbsp;
<select name="from_unit">
<?php echo length_options(); ?>
</select>
<br>
<input type="text" name="to_value" placeholder="Converted result" value="<?php echo $to_value; ?>" />&nbsp;
<select name="to_unit">
<?php echo length_options();?>
</select>
<div id="reset" class="button">
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</div>
</div>
</body>
</html>
\ No newline at end of file
categories/speed.php
<?php
//Add function file
if(file_exists('../includes/functions.php')){
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
}
else{
} else {
echo "Unsupported File";
}
......@@ -12,11 +11,11 @@ $from_unit = '';
$to_unit = '';
$to_value = '';
if($_POST['submit']) {
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);
}
......@@ -29,66 +28,100 @@ $speed_options = array(
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.css"/>
<title>Convert Speed</title>
</head>
<body>
<!--This is the simpler version,
<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-->
<div id="title">
<h1>Speed</h1>
<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>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id = "sinput" class = "input">
<form action="" method="post">
<div class="entry">
<label>From:</label>&nbsp;
<input type="text" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<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">
<label>To:</label>&nbsp;
<input type="text" name="to_value" value="<?php echo float_to_string($to_value); ?>" />&nbsp;
<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>
</div>
</div>
</body>
</html>
\ No newline at end of file
categories/temperature.php
<?php
//Add function file
if(file_exists('../includes/functions.php')){
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
}
else{
} else {
echo "Unsupported File";
}
......@@ -12,11 +11,11 @@ $from_unit = '';
$to_unit = '';
$to_value = '';
if($_POST['submit']) {
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);
}
......@@ -28,117 +27,149 @@ $temp_options = array(
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.css"/>
<title>Convert 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))
<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;
}
return returnvalue;
}
function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert(){
alert(alertmessage)
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session==0)
loadalert()
else
alertornot()
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
</script>
</head>
<body>
<!--This is the simpler version,
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<div id="title">
<h1>Temperature</h1>
<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>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id = "sinput" class = "input">
<form action="" method="post">
<div class="entry">
<label>From:</label>&nbsp;
<input type="text" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<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">
<label>To:</label>&nbsp;
<input type="text" name="to_value" value="<?php echo float_to_string($to_value); ?>" />&nbsp;
<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>
</div>
</div>
</body>
</html>
\ No newline at end of file
categories/volume.php
<?php
//Add function file
if(file_exists('../includes/functions.php')){
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
}
else{
} else {
echo "Unsupported File";
}
......@@ -12,11 +11,11 @@ $from_unit = '';
$to_unit = '';
$to_value = '';
if($_POST['submit']) {
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(
......@@ -44,69 +43,103 @@ $volume_options = array(
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.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,
<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-->
<div id="title">
<h1>Volume</h1>
<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>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id = "sinput" class = "input">
<<form action="" method="post">
<div class="entry">
<label>From:</label>&nbsp;
<input type="text" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<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">
<label>To:</label>&nbsp;
<input type="text" name="to_value" value="<?php echo $to_value; ?>" />&nbsp;
<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>
</div>
</div>
</body>
</html>
\ No newline at end of file
categories/weight.php
<?php
//Add function file
if(file_exists('../includes/functions.php')){
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
}
else{
} else {
echo "Unsupported File";
}
......@@ -12,11 +11,11 @@ $from_unit = '';
$to_unit = '';
$to_value = '';
if($_POST['submit']) {
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);
}
......@@ -34,116 +33,148 @@ $mass_options = array(
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp.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))
<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;
}
return returnvalue;
}
function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert(){
alert(alertmessage)
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session==0)
loadalert()
else
alertornot()
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
</script>
</head>
<body>
<!--This is the simpler version,
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<div id="title">
<h1>Weight</h1>
<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>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id = "sinput" class = "input">
<form action="" method="post">
<div class="entry">
<label>From:</label>&nbsp;
<input type="text" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<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">
<label>To:</label>&nbsp;
<input type="text" name="to_value" value="<?php echo float_to_string($to_value); ?>" />&nbsp;
<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>
</div>
</div>
</body>
</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";
@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-color: #C1DFE7;
text-align: center;
}
#title{
background: #A6D3DF;
background: #3FB74F;
opacity: 0.9;
}
#title h1{
......@@ -19,6 +62,7 @@ body{
text-align: center;
}
/* Calculator box */
.calculator{
......@@ -26,12 +70,14 @@ body{
-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: #abacb8;
padding: 48px 25px;
background-color: #3FB74F;
padding:25px 32px;
height:50%;
border-radius: 17px;
width: 80%;
width: 50%;
position: relative;
top: 200px;
top: 150px;
}
#theme {
position: relative;
......@@ -44,15 +90,143 @@ body{
width:15%;
height: 25px;
}
#sinput {
display: inline-block;
}
.button {
background-color: #70c7be;
border-radius: 15px;
height: 2.85em;
line-height: 2.95em;
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
css/style.css
......@@ -222,4 +222,137 @@ body{
#footer .inner {
width: 50%;
margin: 0 auto;
}
\ No newline at end of file
}
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
<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;
......@@ -74,8 +76,9 @@ Simple, Fancy and Currency conversion
<a href="categories/area.php">Area</a>
<a href="categories/volume.php">Volume</a>
<a href="categories/weight.php">Weight</a>
<a href="categories/time.php">Time</a>
<a href="categories/speed.php">Speed</a>
<a href="login">Log in</a>
<a href="login/signup.php">Sign up</a>
</div>
......@@ -124,13 +127,7 @@ Simple, Fancy and Currency conversion
<a href="categories/volume.php" class="button style3 fit">Select</a>
</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">
<a href="" class="image fit"><img src="icons/weight.png" width="400" height="355" alt="Weight" /></a>
<div class="inner">
......@@ -148,9 +145,9 @@ Simple, Fancy and Currency conversion
<h3>Contact Us</h3>
<form method="POST" action="">
<div class="entry">
<input id="name" type="text" name="name" placeholder="Name">
<input id = "email" type="email" name="email" placeholder="Email">
<input id="message" type="" name="message" placeholder="Message">
<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">
......
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