Skip to content

zekena / Unit-calculator

Go to a project
Commit ec0c4c73 by zekena
Options

FInal

parent f7e55be8
Expand all
Inline Side-by-side
Showing with 99 additions and 4764 deletions
calc/css/simp-area.css deleted 100755 → 0
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Dosis|Passion+One|Roboto+Slab');
:root {
/* generic */
--gutterSm: 0.4rem;
--gutterMd: 0.8rem;
--gutterLg: 1.6rem;
--gutterXl: 2.4rem;
--gutterXx: 7.2rem;
--colorPrimary400: #7e57c2;
--colorPrimary600: #5e35b1;
--colorPrimary800: #4527a0;
--fontFamily: "Dosis", sans-serif;
--fontSizeSm: 1.2rem;
--fontSizeMd: 1.6rem;
--fontSizeLg: 2.1rem;
--fontSizeXl: 2.8rem;
--fontSizeXx: 3.6rem;
--lineHeightSm: 1.1;
--lineHeightMd: 1.8;
--transitionDuration: 300ms;
--transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
/* floated labels */
--inputPaddingV: var(--gutterMd);
--inputPaddingH: var(--gutterLg);
--inputFontSize: var(--fontSizeLg);
--inputLineHeight: var(--lineHeightMd);
--labelScaleFactor: 0.8;
--labelDefaultPosY: 50%;
--labelTransformedPosY: calc(
(var(--labelDefaultPosY)) -
(var(--inputPaddingV) * var(--labelScaleFactor)) -
(var(--inputFontSize) * var(--inputLineHeight))
);
--inputTransitionDuration: var(--transitionDuration);
--inputTransitionTF: var(--transitionTF);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{ background-image: url("../Area.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
text-align: center;
}
#title{
background: #913fb7;
opacity: 0.9;
}
#title h1{
color: #000;
font-size: 5em;
font-weight: 400;
font-family: 'Passion One', cursive;
margin: 0;
text-align: center;
}
/* Calculator box */
.calculator{
display:inline-block;
-webkit-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
-moz-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
background-color: #913fb7;
padding:25px 32px;
height:50%;
border-radius: 17px;
width: 50%;
position: relative;
top: 150px;
}
#theme {
position: relative;
left: -250px;
width: 95%;
top: -45px;
font-size: 1em;
}
#theme select{
width:15%;
height: 25px;
}
Input[type=submit]{
display:inline-block;
background-color: #f1924e;
padding:15px 50px;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(255,255,255,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family: 'Roboto Slab', serif;
font-size:20px;
color:#ffff;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
}
Input[type=submit]:hover{
border-color: rgba(255,255,255,1);
}
@media all and (max-width:30em){
input[type=submit]{
display:block;
margin:0.2em auto;
}
}
.Input {
position: relative;
}
.Input-text {
display: block;
margin-top: 40px;
padding: var(--inputPaddingV) var(--inputPaddingH);
color: inherit;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
border: none;
border-radius: 0.4rem;
transition: box-shadow var(--transitionDuration);
}
.Input-text::placeholder {
color: #B0BEC5;
}
.Input-text:focus {
outline: none;
box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
}
.Input-label {
display: block;
position: absolute;
bottom: 50%;
left: 1rem;
color: #fff;
font-family: 'Roboto slab',serif;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
.Input-text:placeholder-shown + .Input-label {
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
.input-label {
display: block;
position: absolute;
bottom: 10%;
left: 1rem;
color: #fff;
font-family: 'Roboto slab',serif;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
.Input-text:placeholder-shown + .input-label {
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .input-label,
.Input-text:focus:not(:placeholder-shown) + .input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
select {
position: relative;
top: 80%;
bottom:45px ;
left: 50%;
transform: translate(-50%, -50%);
}
select {
background-color: #f1924e;
color: white;
padding: 12px;
width: 250px;
border: none;
font-size: 20px;
font-family:'Roboto Slab',serif ;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
-webkit-appearance: button;
appearance: button;
outline: none;
}
select::before {
content: "\f13a";
font-family: FontAwesome;
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 100%;
text-align: center;
font-size: 28px;
line-height: 45px;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
select:hover::before {
color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.2);
}
select {
padding: 30px;
}
\ No newline at end of file
calc/css/style.css deleted 100755 → 0
body{
font-family:"Arial", Serif;
background-color:#f4f4f4;
overflow-x:hidden;
background-image: url("../background.png");
}
#banner {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
padding: 8em 4em 6em 4em;
min-height: 70vh;
background-image: url("background.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-top: 0;
position: relative;
text-align: center;
overflow: hidden;
}
#banner .inner {
text-align: center;
position: relative;
z-index: 2;
}
#banner h1 {
color: #fff;
font-size: 5em;
font-weight: 400;
font-family: 'Passion One', cursive;
margin: 0;
}
@media screen and (max-width: 980px) {
#banner h1 {
font-size: 5em;
}
}
@media screen and (max-width: 736px) {
#banner h1 {
font-size: 3em;
}
}
#banner p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.5em;
font-weight: 300;
}
@media screen and (max-width: 980px) {
#banner p {
font-size: 1.5em;
}
}
@media screen and (max-width: 480px) {
#banner p {
font-size: 1.25em;
}
}
#banner a {
color: rgba(58, 28, 28, 0.75);
text-decoration: none;
border-bottom: 1px dotted;
}
#banner a:hover {
color: #FFF;
border: none;
}
.navbar{
background-color:#3b5998;
overflow:hidden;
height:63px;
}
.navbar a{
float:left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
font-size:17px;
}
.navbar a:hover{
background-color:rgb(155, 222, 233);
/* color:#000; */
}
.side-nav{
height:100%;
width:0;
position:fixed;
z-index:1;
top:0;
left:0;
background-color:rgb(108, 94, 133);
opacity:0.9;
overflow-x:hidden;
padding-top:60px;
transition:0.5s;
}
.side-nav a{
padding:10px 10px 10px 30px;
text-decoration:none;
font-size:22px;
color:#ccc;
display:block;
transition:0.3s;
}
.side-nav a:hover{
color:#fff;
}
.side-nav .btn-close{
position:absolute;
top:0;
right:22px;
font-size:36px;
margin-left:50px;
}
#main{
transition:margin-left 0.5s;
padding:20px;
overflow:hidden;
width:100%;
}
@media(max-width:568px){
.navbar-nav{display:none}
}
@media(min-width:568px){
/*.open-slide{display:none}*/
}
#main {
padding: 4em 0 2em 0;
}
@media screen and (max-width: 736px) {
#main {
padding: 3em 0 1em 0;
}
}
#main .inner {
width: 90%;
max-width: 80em;
margin: 0 auto;
}
@media screen and (max-width: 480px) {
#main .inner {
width: 95%;
}
}
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
background-color: #70c7be;
border-radius: 15px;
border: 0;
color: #ffffff !important;
cursor: pointer;
display: inline-block;
font-weight: 400;
height: 2.85em;
line-height: 2.95em;
padding: 0 7em;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
#footer {
padding: 4em 0 2em 0;
background-color: #1b1b1f;
text-align: center;
}
#footer .inner {
width: 50%;
margin: 0 auto;
}
Input[type=submit]{
display:inline-block;
background-color: #6ca593;
padding:15px 50px;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(255,255,255,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family: 'Roboto Slab', serif;
font-size:20px;
color:#ffff;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
}
Input[type=submit]:hover{
border-color: rgba(255,255,255,1);
}
@media all and (max-width:30em){
input[type=submit]{
display:block;
margin:0.2em auto;
}
}
.Input {
position: relative;
}
.Input-text {
margin-top: 30px;
padding: var(--inputPaddingV) var(--inputPaddingH);
color: inherit;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
border: none;
border-radius: 0.4rem;
transition: box-shadow var(--transitionDuration);
height: 40px;
top: 1%;
}
.Input-text::placeholder {
color: #B0BEC5;
}
.Input-text:focus {
outline: none;
box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
}
.Input-label {
display: block;
position: absolute;
bottom: 50%;
left: 1rem;
color: #fff;
font-family: 'Roboto slab',serif;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
.Input-text:placeholder-shown + .Input-label {
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
.input-label {
display: block;
position: absolute;
bottom: 10%;
left: 1rem;
color: #fff;
font-family: 'Roboto slab',serif;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
.Input-text:placeholder-shown + .input-label {
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .input-label,
.Input-text:focus:not(:placeholder-shown) + .input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
\ No newline at end of file
calc/home.php deleted 100755 → 0
<?php
session_start();
if(!isset($_SESSION['loggedIN'])){
header('Location: login/login.php');
exit();
}
?>
<!DOCTYPE html>
<!--
This is the front page of the unit calculator,
the user can choose between three themes:
Simple, Fancy and Currency conversion
-->
<html lang="en">
<head>
<title>Unit Calc.</title>
<meta charset="utf-8">
<meta name="description" content="Unit Calc.">
<meta name="author" content="Yusef,Zeyad">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Browsing for Tablet or Phone dimensions-->
<link rel="stylesheet" href="css/style.css"/>
<style>
@import url('https://fonts.googleapis.com/css?family=Passion+One|Roboto+Slab');
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: rgb(108, 53, 176);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<nav class="navbar">
<span class ="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
<a href ="#">About Us</a>
<a href="categories/length.php">Length</a>
<a href="categories/temperature.php">Temperature</a>
<a href="categories/area.php">Area</a>
<a href="categories/volume.php">Volume</a>
<a href="categories/weight.php">Weight</a>
<a href="categories/speed.php">Speed</a>
<a href="login">Log in</a>
<a href="login/signup.php">Sign up</a>
</div>
<script src="js/frontSide.js"></script>
<section id="banner">
<div class="inner">
<header>
<h1>Unit Calc.</h1>
<p> An interactive Unit Calculator for all your needs. </p>
<a href="#main" class="more">Choose Conversion</a>
</header>
</div>
</section>
<div id="main">
<div class="inner">
<div class ="categories">
<div class="box">
<a href="" class="image fit"><img src="icons/length.png" width="400" height="355" alt="Length" /></a>
<div class="inner">
<h2>Length</h2>
<a href="categories/length.php" class="button fit" style="cursor: pointer;outline: 0px;background-color: #271010;color: black;">Select</a>
</div>
</div>
<div class="box">
<a href="" class="image fit"><img src="icons/area.png" width="400" height="355" alt="Area" /></a>
<div class="inner">
<h2>Area</h2>
<a href="categories/area.php" class="button style2 fit">Select</a>
</div>
</div>
<div class="box">
<a href="" class="image fit"><img src="icons/temperature.png" width="400" height="355" alt="Temperature" /></a>
<div class="inner">
<h2>Temperature</h2>
<a href="categories/temperature.php" class="button style3 fit">Select</a>
</div>
</div>
<div class="box">
<a href="" class="image fit"><img src="icons/volume.png" width="400" height="355" alt="Volume" /></a>
<div class="inner">
<h2>Volume</h2>
<a href="categories/volume.php" class="button style3 fit">Select</a>
</div>
</div>
<div class="box">
<a href="" class="image fit"><img src="icons/weight.png" width="400" height="355" alt="Weight" /></a>
<div class="inner">
<h2>Weight</h2>
<a href="categories/weight.php" class="button style3 fit">Select</a>
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="inner">
<section>
<h3>Contact Us</h3>
<form method="POST" action="">
<div class="entry">
<input id="Input" class="Input-text" name="name" placeholder="Name">
<input id="Input" class="Input-text" type="email" name="email" placeholder="Email">
<input id="Input" class="Input-text" name="message" placeholder="Message">
</div>
<div class="registerSubmit">
<input type="submit" name="submit" value="Submit">
</div>
</form>
</section>
</footer>
</body>
</html>
\ No newline at end of file
calc/includes/functions.php deleted 100755 → 0
<?php
function list_option($arr){
$choice = '';
while(list($k,$v)=each($arr))
{
$choice.='<option value = "'.$k.'">'.$k.'</option>';
}
}
// defines array of length and area
// acres and hectares are squared due to function parameters
define('LENGTH_TO_METER',array(
"inches" => 0.0254,
"feet" => 0.3048,
"yards" => 0.9144,
"miles" => 1609.344,
"millimeters" => 0.001,
"centimeters" => 0.01,
"meters" => 1,
"kilometers" => 1000,
"acres" => 63.614907234075,
"hectares" => 100
));
define('VOLUME_TO_LITER' ,array(
"cubic_inches" => 0.0163871,
"cubic_feet" => 28.3168,
"cubic_centimeters" => 0.001,
"cubic_meters" => 1000,
"imperial_gallons" => 4.54609,
"imperial_quarts" => 1.13652,
"imperial_pints" => 0.568261,
"imperial_cups" => 0.284131,
"imperial_ounces" => 0.0284131,
"imperial_tablespoons" => 0.0177582,
"imperial_teaspoons" => 0.00591939,
"us_gallons" => 3.78541,
"us_quarts" => 0.946353,
"us_pints" => 0.473176,
"us_cups" => 0.24,
"us_ounces" => 0.0295735,
"us_tablespoons" => 0.0147868,
"us_teaspoons" => 0.00492892,
"liters" => 1,
"milliliters" => 0.001,
));
const MASS_TO_KILOGRAM = array(
"ounces" => 0.0283495,
"pounds" => 0.453592,
"stones" => 6.35029,
"long_tons" => 1016.05,
"short_tons" => 907.185,
"milligrams" => 0.000001,
"grams" => 0.001,
"kilograms" => 1,
"metric_tonnes" => 1000
);
// The function float_to_string formats a float into a string
// while also avoiding default use of scientific notation.
// Rounds to $precision and trims extra trailing zeros.
function float_to_string($float, $precision=10) {
// Typecast to insure value is a float
$float = (float) $float;
$string = number_format($float, $precision, '.', '');
$string = rtrim($string, '0');
$string = rtrim($string, '.');
return $string;
}
// Length
// Convert every value to meters
function convert_to_meters($value, $from_unit) {
if(array_key_exists($from_unit, LENGTH_TO_METER)) {
return $value * LENGTH_TO_METER[$from_unit];
}
else {
return "Unsupported unit.";
}
}
function convert_from_meters($value, $to_unit) {
if(array_key_exists($to_unit, LENGTH_TO_METER)) {
return $value / LENGTH_TO_METER[$to_unit];
}
else {
return "Unsupported unit.";
}
}
function convert_length($value, $from_unit, $to_unit) {
$meter_value = convert_to_meters($value, $from_unit);
$new_value = convert_from_meters($meter_value, $to_unit);
return $new_value;
}
/*
class Length {
var $value;
var $from_unit;
var $to_unit;
function convert_to_meters($value, $from_unit) {
if(array_key_exists($from_unit, LENGTH_TO_METER)) {
return $value * LENGTH_TO_METER[$from_unit];
}
else {
return "Unsupported unit.";
}
}
function convert_from_meters($value, $to_unit) {
if(array_key_exists($to_unit, LENGTH_TO_METER)) {
return $value / LENGTH_TO_METER[$to_unit];
}
else {
return "Unsupported unit.";
}
}
function convert_length($value, $from_unit, $to_unit) {
$meter_value = convert_to_meters($value, $from_unit);
$new_value = convert_from_meters($meter_value, $to_unit);
return $new_value;
}
}
*/
//Area
function convert_to_square_meters($value, $from_unit) {
$from_unit = str_replace('square_', '', $from_unit);
if(array_key_exists($from_unit, LENGTH_TO_METER)) {
return $value * pow(LENGTH_TO_METER[$from_unit], 2);
} else {
return "Unsupported unit.";
}
}
function convert_from_square_meters($value, $to_unit) {
$to_unit = str_replace('square_', '', $to_unit);
if(array_key_exists($to_unit, LENGTH_TO_METER)) {
return $value / pow(LENGTH_TO_METER[$to_unit], 2);
} else {
return "Unsupported unit.";
}
}
function convert_area($value, $from_unit, $to_unit) {
$meter_value = convert_to_square_meters($value, $from_unit);
$new_value = convert_from_square_meters($meter_value, $to_unit);
return $new_value;
}
//Volume
function convert_to_liters($value, $from_unit) {
if(array_key_exists($from_unit, VOLUME_TO_LITER)) {
return $value * VOLUME_TO_LITER[$from_unit];
} else {
return "Unsupported unit.";
}
}
function convert_from_liters($value, $to_unit) {
if(array_key_exists($to_unit, VOLUME_TO_LITER)) {
return $value / VOLUME_TO_LITER[$to_unit];
} else {
return "Unsupported unit.";
}
}
function convert_volume($value, $from_unit, $to_unit) {
$liter_value = convert_to_liters($value, $from_unit);
$new_value = convert_from_liters($liter_value, $to_unit);
return $new_value;
}
// Mass
function convert_to_kilograms($value, $from_unit) {
if(array_key_exists($from_unit, MASS_TO_KILOGRAM)) {
return $value * MASS_TO_KILOGRAM[$from_unit];
} else {
return "Unsupported unit.";
}
}
function convert_from_kilograms($value, $to_unit) {
if(array_key_exists($to_unit, MASS_TO_KILOGRAM)) {
return $value / MASS_TO_KILOGRAM[$to_unit];
} else {
return "Unsupported unit.";
}
}
function convert_mass($value, $from_unit, $to_unit) {
$liter_value = convert_to_kilograms($value, $from_unit);
$new_value = convert_from_kilograms($liter_value, $to_unit);
return $new_value;
}
//speed
function convert_speed($value,$from_unit,$to_unit){
list($from_dist,$from_time)=explode ('_per_',$from_unit);
list($to_dist,$to_time)=explode ('_per_',$to_unit);
if ($from_time == 'hour'){ $value /= 3600;}
$value = convert_length($value,$from_dist,$to_dist);
if ($to_time == 'hour'){ $value /= 3600;}
return $value;
}
//Temperature
function convert_from_celsius($value,$from_unit){
switch($from_unit){
case 'celsius':
return $value;
break;
case 'fahrenheit':
return ($value-32)/1.8;
break;
case 'kelvin':
return $value -273.15;
break;
default:
return "Unsupported unit.";
}
}
function convert_to_celsius($value,$to_unit){
switch($to_unit){
case 'celsius':
return $value;
break;
case 'fahrenheit':
return ($value * 1.8 ) +32;
break;
case 'kelvin':
return $value + 273.15;
break;
default:
return "Unsupported unit.";
}
}
function convert_temp($value,$from_unit,$to_unit){
$celsius_value = convert_from_celsius($value, $from_unit);
$new_value = convert_to_celsius($celsius_value, $to_unit);
return $new_value;
}
function optionize($string){
return str_replace(' ','_',strtolower($string));
}
calc/js/slide.js deleted 100755 → 0
function openSlideMenu(){
document.getElementById('side-menu').style.width = '250px';
document.getElementById('main').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('side-menu').style.width = '0';
document.getElementById('main').style.marginLeft = '0';
}
function checkForm(){
var from_unit = document.getElementById("from_unit").value;
var to_unit = document.getElementById("to_unit'").value;
var from_value = document.getElementById("from_value").value;
var to_value = document.getElementById("to_value").value;
//
if (isNaN(from_value)){
document.w
}
document.getElementById("myForm").submit();
}
calc/categories/length.php → categories/length.php 100755 → 100644
<?php <?php
/*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 files //Add function files
require('options.php'); require('options.php');
...@@ -30,10 +29,10 @@ if ($_POST['submit']) { ...@@ -30,10 +29,10 @@ if ($_POST['submit']) {
$to_value = convert_length($from_value, $from_unit, $to_unit); $to_value = convert_length($from_value, $from_unit, $to_unit);
$sql = "INSERT INTO length_entry(from_unit,to_unit,from_value,to_value) VALUES ('$from_unit','$to_unit','$from_value','$to_value');"; /* $sql = "INSERT INTO length_entry(from_unit,to_unit,from_value,to_value) VALUES ('$from_unit','$to_unit','$from_value','$to_value');";
if (!mysqli_query($link, $sql)) { if (!mysqli_query($link, $sql)) {
die('An error occurred when submitting your review.'); die('An error occurred when submitting your review.');
} }*/
} }
/* /*
function length_options(){ function length_options(){
...@@ -163,28 +162,60 @@ function length_options(){ ...@@ -163,28 +162,60 @@ function length_options(){
Be able to input number from either box.--> Be able to input number from either box.-->
<input id="from_value" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp; <label for="Input" class="Input-label">Your entry</label> <input id="from_value" 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> <label for="input" class="Input-label">Your Entry</label>
<select id="from_unit"name="from_unit"> <select id="from_unit" name="from_unit">
<option value="inches"<?php if($from_unit == 'inches') { echo " selected"; } ?>>inches</option> <option value="inches" <?php if ($from_unit == 'inches') {
<option value="feet"<?php if($from_unit == 'feet') { echo " selected"; } ?>>feet</option> echo " selected";
<option value="yards"<?php if($from_unit == 'yards') { echo " selected"; } ?>>yards</option> } ?>>inches</option>
<option value="miles"<?php if($from_unit == 'miles') { echo " selected"; } ?>>miles</option> <option value="feet" <?php if ($from_unit == 'feet') {
<option value="millimeters"<?php if($from_unit == 'millimeters') { echo " selected"; } ?>>millimeters</option> echo " selected";
<option value="centimeters"<?php if($from_unit == 'centimeters') { echo " selected"; } ?>>centimeters</option> } ?>>feet</option>
<option value="meters"<?php if($from_unit == 'meters') { echo " selected"; } ?>>meters</option> <option value="yards" <?php if ($from_unit == 'yards') {
<option value="kilometers"<?php if($from_unit == 'kilometers') { echo " selected"; } ?>>kilometers</option> echo " selected";
} ?>>yards</option>
<option value="miles" <?php if ($from_unit == 'miles') {
echo " selected";
} ?>>miles</option>
<option value="millimeters" <?php if ($from_unit == 'millimeters') {
echo " selected";
} ?>>millimeters</option>
<option value="centimeters" <?php if ($from_unit == 'centimeters') {
echo " selected";
} ?>>centimeters</option>
<option value="meters" <?php if ($from_unit == 'meters') {
echo " selected";
} ?>>meters</option>
<option value="kilometers" <?php if ($from_unit == 'kilometers') {
echo " selected";
} ?>>kilometers</option>
</select> </select>
<br> <br>
<input readonly id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value=" <?php echo $to_value; ?>" />&nbsp; <input readonly 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> <label for="input" class="input-label">Converted result</label>
<select id = "to_unit" name="to_unit"> <select id="to_unit" name="to_unit">
<option value="inches"<?php if($to_unit == 'inches') { echo " selected"; } ?>>inches</option> <option value="inches" <?php if ($to_unit == 'inches') {
<option value="feet"<?php if($to_unit == 'feet') { echo " selected"; } ?>>feet</option> echo " selected";
<option value="yards"<?php if($to_unit == 'yards') { echo " selected"; } ?>>yards</option> } ?>>inches</option>
<option value="miles"<?php if($to_unit == 'miles') { echo " selected"; } ?>>miles</option> <option value="feet" <?php if ($to_unit == 'feet') {
<option value="millimeters"<?php if($to_unit == 'millimeters') { echo " selected"; } ?>>millimeters</option> echo " selected";
<option value="centimeters"<?php if($to_unit == 'centimeters') { echo " selected"; } ?>>centimeters</option> } ?>>feet</option>
<option value="meters"<?php if($to_unit == 'meters') { echo " selected"; } ?>>meters</option> <option value="yards" <?php if ($to_unit == 'yards') {
<option value="kilometers"<?php if($to_unit == 'kilometers') { echo " selected"; } ?>>kilometers</option> echo " selected";
} ?>>yards</option>
<option value="miles" <?php if ($to_unit == 'miles') {
echo " selected";
} ?>>miles</option>
<option value="millimeters" <?php if ($to_unit == 'millimeters') {
echo " selected";
} ?>>millimeters</option>
<option value="centimeters" <?php if ($to_unit == 'centimeters') {
echo " selected";
} ?>>centimeters</option>
<option value="meters" <?php if ($to_unit == 'meters') {
echo " selected";
} ?>>meters</option>
<option value="kilometers" <?php if ($to_unit == 'kilometers') {
echo " selected";
} ?>>kilometers</option>
</select> </select>
...@@ -201,45 +232,45 @@ function length_options(){ ...@@ -201,45 +232,45 @@ function length_options(){
</html> </html>
<?php <?php
include('config.php'); include('config.php');
$sql = mysql_query("SELECT id,name FROM LENGTH_TO_METER"); $sql = mysql_query("SELECT id,name FROM LENGTH_TO_METER");
if (mysql_num_rows($sql)>0){ if (mysql_num_rows($sql) > 0) {
echo "hello"; echo "hello";
// $data = array(); // $data = array();
// while($row=mysql_fetch_array($sql)){ // while($row=mysql_fetch_array($sql)){
// $data[]= array( // $data[]= array(
// 'id' => $row['id'], // 'id' => $row['id'],
// 'name' => $row['name'] // 'name' => $row['name']
// ); // );
// header('Content-type: application/json'); // header('Content-type: application/json');
// echo json_encode($data); // echo json_encode($data);
// } // }
} }
//AJAX //AJAX
//Add function files //Add function files
require('options.php'); require('options.php');
//include('config.php'); //include('config.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
/* /*
Uses funct Uses funct
*/ */
$from_value = ''; $from_value = '';
$from_unit = ''; $from_unit = '';
$to_unit = ''; $to_unit = '';
$to_value = ''; $to_value = '';
if (isset($_POST['calculate'])) { if (isset($_POST['calculate'])) {
$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'];
$to_value = convert_length($from_value, $from_unit, $to_unit); $to_value = convert_length($from_value, $from_unit, $to_unit);
} }
?> ?>
\ No newline at end of file
contact_data.csv
zeyad 0,,,
23facas 1,,,
zida@gma.com 2,,,
3,zeyad,zida@gma.com,23facas 3,,,
4,zeyad,zida@gma.com,23facas 4,,,
5,zeyad,zida@gma.com,23facas 5,,,
6,zeyad,zida@gma.com,23facas 6,,,
7,,,"Thanks we will contact u soon" 7,,,
8,,,"Thanks we will contact u soon" 8,,,
9,,,
10,zeyad,zida@gma.com,"Thanks we will contact u soon"
11,zeyad,zida@gma.com,"Thanks we will contact u soon"
12,,,
home.php
...@@ -114,8 +114,7 @@ $message = ''; ...@@ -114,8 +114,7 @@ $message = '';
<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/speed.php">Speed</a> <a href="categories/speed.php">Speed</a>
<a href="login">Log in</a> <a href="login/login.php">Log in</a>
<a href="login/signup.php">Sign up</a>
</div> </div>
<script src="js/frontSide.js"></script> <script src="js/frontSide.js"></script>
<section id="banner"> <section id="banner">
...@@ -125,7 +124,7 @@ $message = ''; ...@@ -125,7 +124,7 @@ $message = '';
<p> An interactive Unit Calculator for all your needs. </p> <p> An interactive Unit Calculator for all your needs. </p>
<a href="#main" class="more">Choose Conversion</a> <a href="#main" class="more">Choose Conversion</a>
</header> </header>
<a class="log" href="/login/index.html">login <a class="log" href="/calc/login/login.php">login
<p>Restore your calculations</p></a> <p>Restore your calculations</p></a>
</div> </div>
</section> </section>
......
other_calc/LENGTH_TO_METER.csv deleted 100644 → 0
"Name";Unit
"inches";0.0254
"feet";0.3048
"yards"; 0.9144
"miles";1609.344
"millimeters";0.001
"centimeters";0.01
"meters";1
"kilometers";1000
"acres";63.614907234075
"hectares";100
\ No newline at end of file
other_calc/categories/area.php deleted 100644 → 0
<?php
require('dbconnect.php');
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
// Definitions
if (file_exists('dbconnect.php')) {
require('dbconnect.php');
if (mysqli_connect_error()) {
die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error());
}
}
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_area($from_value, $from_unit, $to_unit);
//$mysqli = new mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME);
// mysql_query("INSERT INTO area_entry (from_unit,to_unit,from_value,to_value) VALUES ()");
$sql = "INSERT INTO area_entry(from_unit,to_unit,from_value,to_value) VALUES ('$from_unit','$to_unit','$from_value','$to_value');";
echo $sql;
if (!mysqli_query($link, $sql)) {
die('An error occurred when submitting your review.');
} else {
echo "Thanks for your review.";
}
/*
if($link->query($sql)){
echo "Record Added";
}
else{
die(mysql_error($sql));
}
*/
mysqli_close($link);
}
function area_options()
{
$area_options = array(
"square_inches" => 0.0254,
"square_feet" => 0.3048,
"square_yards" => 0.9144,
"square_miles" => 1609.344,
"square_millimeters" => 0.001,
"square_centimeters" => 0.01,
"square_meters" => 1,
"square_kilometers" => 1000,
"acres" => 63.614907234075,
"hectares" => 100
);
$choice = '';
while (list($k, $v) = each($area_options)) {
$choice .= '<option value = "' . $k . '">' . $k . '</option>';
}
return $choice;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-Area.css" />
<title>Area</title>
<script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var alertmessage = "Click Side button to calculate measurements in batch"
///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes)
var once_per_session = 1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
<a href="#">About Us</a>
<a href=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Area</h1>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id="sinput" class="input">
<form id="io" method="POST">
<!-- calculator input and output-->
<!--Add function to recieve number,
Be able to input number from either box.-->
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp; <label for="Input" class="Input-label">Your entry</label>
<select name="from_unit">
<?php echo area_options(); ?>
</select>
<br>
<input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value=" <?php echo $to_value; ?>" />&nbsp;
<label for="Input" class="input-label">Converted Result</label>
<select name="to_unit">
<?php echo area_options(); ?>
</select>
<div id="reset" class="button">
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
other_calc/categories/contact.php deleted 100644 → 0
<?php
if (isset($_POST["submit"])) {
if (empty($_POST["name"])) {
$error .= '<p><label class="text-danger">Please Enter your Name</label></p>';
} else {
$name = clean_text($_POST["name"]);
if (!preg_match("/^[a-zA-Z ]*$/", $name)) {
$error .= '<p><label class="text-danger">Only letters and white space allowed</label></p>';
}
}
if (empty($_POST["email"])) {
$error .= '<p><label class="text-danger">Please Enter your Email</label></p>';
} else {
$email = clean_text($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$error .= '<p><label class="text-danger">Invalid email format</label></p>';
}
}
if (empty($_POST["message"])) {
$error .= '<p><label class="text-danger">Message is required</label></p>';
} else {
$message = clean_text($_POST["message"]);
}
if ($error == '') {
$file_open = fopen("contact_data.csv", "a");
$no_rows = count(file("contact_data.csv"));
if ($no_rows > 1) {
$no_rows = ($no_rows - 1) + 1;
}
$form_data = array(
'sr_no' => $no_rows,
'name' => $name,
'email' => $email,
'message' => $message
);
fputcsv($file_open, $form_data);
$error = '<label class="text-success">Thank you for contacting us</label>';
$name = '';
$email = '';
$message = '';
}
}
other_calc/categories/dbconnect.php deleted 100644 → 0
<?php
//connection variables
define('DB_NAME','project');
define('DB_USER', 'root');
define('DB_PASSWORD','root');
define('DB_HOST','localhost');
$link = new mysqli(DB_HOST,DB_USER,DB_PASSWORD,DB_NAME) or die("Error " . mysqli_error($link));
/*
if(mysqli_connect_error()){
die('Connect Error ('. mysqli_connect_errno().')'.mysqli_connect_error());
}
*/
?>
\ No newline at end of file
other_calc/categories/length.php deleted 100644 → 0
<?php
//Add function files
require('options.php');
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
//establish values
/*
Uses funct
*/
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_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);
}
/*
function length_options(){
$length_options = array(
"inches" => 0.0254,
"feet" => 0.3048,
"yards" => 0.9144,
"miles" => 1609.344,
"millimeters" => 0.001,
"centimeters" => 0.01,
"meters" => 1,
"kilometers" => 1000,
"acres" => 63.614907234075,
"hectares" => 100);
$choice = '';
while(list($k,$v)=each($length_options))
{
$choice.='<option value = "'.$k.'">'.$k.'</option>';
}
return $choice;
}
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-length.css" />
<title>Length</title>
<script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var alertmessage = "Click Side button to calculate measurements in batch"
///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes)
var once_per_session = 1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
<body>
<!--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/index.html">Log in</a>
<a href="../login/index.html">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>
</div>
</div>
</body>
</html>
\ No newline at end of file
other_calc/categories/options.php deleted 100644 → 0
<?php
function length_options(){
$selected = 'selected';
$length_options = array(
"inches" => 0.0254,
"feet" => 0.3048,
"yards" => 0.9144,
"miles" => 1609.344,
"millimeters" => 0.001,
"centimeters" => 0.01,
"meters" => 1,
"kilometers" => 1000,
"acres" => 63.614907234075,
"hectares" => 100);
$choice = '';
while(list($k,$v)=each($length_options))
{
$choice.='<option value = "'.$k.'">'.$k.'</option>';
}
return $choice;
}
?>
\ No newline at end of file
other_calc/categories/simp_styles.css deleted 100644 → 0
/* general */
html {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body {
height: 100%; width: 100%;
margin: 0; padding: 0;
background: #EEE;
font: 18px Georgia,Times,"Times New Roman",serif;
}
#main-content {
width: 500px;
margin: 0 auto; padding: 20px 0;
}
h1 {
font: 30px Arial,"Helvetica Neue",Helvetica,sans-serif;
}
/* menu page */
ul#measurement-types {
list-style-type: none;
margin: 1em 0; padding: 0;
}
ul#measurement-types li {
height: auto;
margin: 0 0 10px 0; padding: 0;
}
ul#measurement-types li a {
text-decoration: none;
color: black;
display: block;
background: white;
padding: 16px 24px;
width: 180px;
border: 1px solid black;
}
ul#measurement-types li a:hover {
color: white;
background: #FDB912;
}
/* conversion forms */
form label {
display: inline-block;
width: 45px;
}
form input[type="text"] {
width: 80px;
font-size: 16px;
line-height: 16px;
}
form select {
margin: 1em 0;
font-size: 14px;
}
form input[type="submit"] {
font-size: 1em;
text-decoration: none;
color: black;
display: block;
background: white;
margin: 2em 0 2em 25px;
padding: 6px 12px;
border: 1px solid black;
}
form input[type="submit"]:hover {
color: white;
background: #FDB912;
}
\ No newline at end of file
other_calc/categories/speed.php deleted 100644 → 0
<?php
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_speed($from_value, $from_unit, $to_unit);
}
$speed_options = array(
"feet per second",
"miles per hour",
"meters per second",
"kilometers per hour",
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-speed.css" />
<title>Convert Speed</title>
<script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var alertmessage = "Click Side button to calculate measurements in batch"
///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes)
var once_per_session = 1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
<a href="#">About Us</a>
<a href=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Speed</h1>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id="sinput" class="input">
<form action="" method="post">
<div class="entry">
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<label for="Input" class="Input-label">Your entry</label>
<select name="from_unit">
<?php
foreach ($speed_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<div class="entry">
<input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value="<?php echo float_to_string($to_value); ?>" />&nbsp;
<label for="Input" class="input-label">Converted Result</label>
<select name="to_unit">
<?php
foreach ($speed_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
other_calc/categories/temperature.php deleted 100644 → 0
<?php
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_temp($from_value, $from_unit, $to_unit);
}
$temp_options = array(
"Celsius",
"Fahrenheit",
"Kelvin"
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-temp.css" />
<title>Temperature</title>
<script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var alertmessage = "Click Side button to calculate measurements in batch"
///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes)
var once_per_session = 1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
<a href="#">About Us</a>
<a href=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Temperature</h1>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id="sinput" class="input">
<form action="" method="post">
<div class="entry">
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<label for="Input" class="Input-label">Your entry</label>
<select name="from_unit">
<?php
foreach ($temp_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<div class="entry">
<input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value=" <?php echo float_to_string($to_value); ?>" />&nbsp;
<label for="Input" class="input-label">Converted Result</label>
<select name="to_unit">
<?php
foreach ($temp_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
other_calc/categories/test.php deleted 100644 → 0
<?php
(isset($_POST["company"])) ? $company = $_POST["company"] : $company=1;
?>
<form>
<select id="company" name="company">
<option <?php if ($company == 1 ) echo 'selected' ; ?> value="1">Apple</option>
<option <?php if ($company == 2 ) echo 'selected' ; ?> value="2">Samsung</option>
<option <?php if ($company == 3 ) echo 'selected' ; ?> value="3">HTC</option>
</select>
</form>
\ No newline at end of file
other_calc/categories/volume.php deleted 100644 → 0
<?php
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_volume($from_value, $from_unit, $to_unit);
}
$volume_options = array(
'cubic inches',
'cubic feet',
'Imperial gallons',
'Imperial quarts',
'Imperial pints',
'Imperial cups',
'Imperial ounces',
'Imperial tablespoons',
'Imperial teaspoons',
'US gallons',
'US quarts',
'US pints',
'US cups',
'US ounces',
'US tablespoons',
'US teaspoons',
'cubic centimeters',
'cubic meters',
'liters',
'milliliters'
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-Volume.css" />
<title>Convert Volume</title>
<script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var alertmessage = "Click Side button to calculate measurements in batch"
///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes)
var once_per_session = 1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
<a href="#">About Us</a>
<a href=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Volume</h1>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id="sinput" class="input">
<form action="" method="post">
<div class="entry">
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<label for="Input" class="Input-label">Your entry</label>
<select name="from_unit">
<?php
foreach ($volume_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<div class="entry">
<input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value=" <?php echo $to_value; ?>" />&nbsp;
<label for="Input" class="input-label">Converted Result</label>
<select name="to_unit">
<?php
foreach ($volume_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
other_calc/categories/weight.php deleted 100644 → 0
<?php
//Add function file
if (file_exists('../includes/functions.php')) {
require_once('../includes/functions.php');
} else {
echo "Unsupported File";
}
$from_value = '';
$from_unit = '';
$to_unit = '';
$to_value = '';
if ($_POST['submit']) {
$from_value = $_POST['from_value'];
$from_unit = $_POST['from_unit'];
$to_unit = $_POST['to_unit'];
$to_value = convert_mass($from_value, $from_unit, $to_unit);
}
$mass_options = array(
"ounces",
"pounds",
"stones",
"long tons",
"short tons",
"milligrams",
"grams",
"kilograms",
"metric tonnes"
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/simp-weight.css" />
<title>Convert Weight</title>
<script>
//Alert message once script- By JavaScript Kit
//Credit notice must stay intact for use
//Visit http://javascriptkit.com for this script
//specify message to alert
var alertmessage = "Click Side button to calculate measurements in batch"
///No editing required beyond here/////
//Alert only once per browser session (0=no, 1=yes)
var once_per_session = 1
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function alertornot() {
if (get_cookie('alerted') == '') {
loadalert()
document.cookie = "alerted=yes"
}
}
function loadalert() {
alert(alertmessage)
}
if (once_per_session == 0)
loadalert()
else
alertornot()
</script>
</head>
<body>
<!--This is the simpler version,
supposed to have-
>a top title
>a side bar menu
>calculator with input,output,reset button-->
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
<a href="#">About Us</a>
<a href=" length.php">Length</a>
<a href=" temperature.php">Temperature</a>
<a href=" area.php">Area</a>
<a href=" volume.php">Volume</a>
<a href=" weight.php">Weight</a>
<a href=" speed.php">Speed</a>
<a href="../login/index.html">Log in</a>
<a href="../login/index.html">Sign up</a>
</div>
<script src="../js/frontSide.js"></script>
<div id="title">
<h1>Weight</h1>
</div>
<!-- top---->
<div class="calculator">
<!--whole calculator outline-->
<div class="calcb">
<!--Calculator box -->
<div id="sinput" class="input">
<form action="" method="post">
<div class="entry">
<input id="Input" class="Input-text" placeholder="Enter amount" name="from_value" value="<?php echo $from_value; ?>" />&nbsp;
<label for="Input" class="Input-label">Your entry</label>
<select name="from_unit">
<?php
foreach ($mass_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<div class="entry">
<input id="Input" class="Input-text" placeholder="Wait for it" name="to_value" value="<?php echo float_to_string($to_value); ?>" />&nbsp;
<label for="Input" class="input-label">Converted Result</label>
<select name="to_unit">
<?php
foreach ($mass_options as $unit) {
$opt = optionize($unit);
echo "<option value=\"{$opt}\"";
if ($from_unit == $opt) {
echo " selected";
}
echo ">{$unit}</option>";
}
?>
</select>
</div>
<input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
other_calc/css/login_style.css deleted 100644 → 0
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #2c3338;
color: #606468;
font: 87.5%/1.5em 'Open Sans', sans-serif;
margin: 0;
}
a {
color: rgb(150, 56, 56);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
input {
border: none;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
padding: 0;
-webkit-appearance: none;
}
p {
line-height: 1.5em;
}
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
.container {
left: 50%;
position: fixed;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* ---------- LOGIN ---------- */
#login {
width: 280px;
}
#login form span {
background-color: #363b41;
border-radius: 3px 0px 0px 3px;
color: #606468;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
#login form input {
height: 50px;
}
#login form a {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #eee;
font-weight: bold;
margin-bottom: 2em;
margin-left: 6.5em;
width: 280px;
height: 50px;
}
#login form input[type=text], input[type=password]{
background-color: #25405f;
border-radius: 60px 60px 60px 60px;
color: #30363b;
margin-bottom: 1em;
padding: 25px;
width: 225px;
margin-left: 25px;
}
#login form input[type="submit"] {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #6e92e485;
color: rgb(234, 182, 182);
font-weight: bold;
margin-bottom: 2em;
width: 280px;
}
#login form input[type="submit"]:hover {
background-color: #be3636;
opacity: 0.7;
color: #100f0f;
}
#login > p {
text-align: center;
}
#login > p span {
padding-left: 5px;
}
\ No newline at end of file
other_calc/css/simp-Volume.css deleted 100644 → 0
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Dosis|Passion+One|Roboto+Slab');
:root {
/* generic */
--gutterSm: 0.4rem;
--gutterMd: 0.8rem;
--gutterLg: 1.6rem;
--gutterXl: 2.4rem;
--gutterXx: 7.2rem;
--colorPrimary400: #7e57c2;
--colorPrimary600: #5e35b1;
--colorPrimary800: #4527a0;
--fontFamily: "Dosis", sans-serif;
--fontSizeSm: 1.2rem;
--fontSizeMd: 1.6rem;
--fontSizeLg: 2.1rem;
--fontSizeXl: 2.8rem;
--fontSizeXx: 3.6rem;
--lineHeightSm: 1.1;
--lineHeightMd: 1.8;
--transitionDuration: 300ms;
--transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
/* floated labels */
--inputPaddingV: var(--gutterMd);
--inputPaddingH: var(--gutterLg);
--inputFontSize: var(--fontSizeLg);
--inputLineHeight: var(--lineHeightMd);
--labelScaleFactor: 0.8;
--labelDefaultPosY: 50%;
--labelTransformedPosY: calc(
(var(--labelDefaultPosY)) -
(var(--inputPaddingV) * var(--labelScaleFactor)) -
(var(--inputFontSize) * var(--inputLineHeight))
);
--inputTransitionDuration: var(--transitionDuration);
--inputTransitionTF: var(--transitionTF);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{background-image: url("../page_img/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: 10px;
}
#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
other_calc/css/simp-area.css deleted 100644 → 0
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Dosis|Passion+One|Roboto+Slab');
:root {
/* generic */
--gutterSm: 0.4rem;
--gutterMd: 0.8rem;
--gutterLg: 1.6rem;
--gutterXl: 2.4rem;
--gutterXx: 7.2rem;
--colorPrimary400: #7e57c2;
--colorPrimary600: #5e35b1;
--colorPrimary800: #4527a0;
--fontFamily: "Dosis", sans-serif;
--fontSizeSm: 1.2rem;
--fontSizeMd: 1.6rem;
--fontSizeLg: 2.1rem;
--fontSizeXl: 2.8rem;
--fontSizeXx: 3.6rem;
--lineHeightSm: 1.1;
--lineHeightMd: 1.8;
--transitionDuration: 300ms;
--transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
/* floated labels */
--inputPaddingV: var(--gutterMd);
--inputPaddingH: var(--gutterLg);
--inputFontSize: var(--fontSizeLg);
--inputLineHeight: var(--lineHeightMd);
--labelScaleFactor: 0.8;
--labelDefaultPosY: 50%;
--labelTransformedPosY: calc(
(var(--labelDefaultPosY)) -
(var(--inputPaddingV) * var(--labelScaleFactor)) -
(var(--inputFontSize) * var(--inputLineHeight))
);
--inputTransitionDuration: var(--transitionDuration);
--inputTransitionTF: var(--transitionTF);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{ background-image: url("../page_img/area.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
text-align: center;
}
#title{
background: #913fb7;
opacity: 0.9;
}
#title h1{
color: #000;
font-size: 5em;
font-weight: 400;
font-family: 'Passion One', cursive;
margin: 0;
text-align: center;
}
/* Calculator box */
.calculator{
display:inline-block;
-webkit-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
-moz-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
background-color: #913fb7;
padding:25px 32px;
height:50%;
border-radius: 17px;
width: 50%;
position: relative;
top: 150px;
}
#theme {
position: relative;
left: -250px;
width: 95%;
top: -45px;
font-size: 1em;
}
#theme select{
width:15%;
height: 25px;
}
Input[type=submit]{
display:inline-block;
background-color: #f1924e;
padding:15px 50px;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(255,255,255,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family: 'Roboto Slab', serif;
font-size:20px;
color:#ffff;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
}
Input[type=submit]:hover{
border-color: rgba(255,255,255,1);
}
@media all and (max-width:30em){
input[type=submit]{
display:block;
margin:0.2em auto;
}
}
.Input {
position: relative;
}
.Input-text {
display: block;
margin-top: 40px;
padding: var(--inputPaddingV) var(--inputPaddingH);
color: inherit;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
border: none;
border-radius: 0.4rem;
transition: box-shadow var(--transitionDuration);
}
.Input-text::placeholder {
color: #B0BEC5;
}
.Input-text:focus {
outline: none;
box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
}
.Input-label {
display: block;
position: absolute;
bottom: 50%;
left: 1rem;
color: #fff;
font-family: 'Roboto slab',serif;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
.Input-text:placeholder-shown + .Input-label {
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
.input-label {
display: block;
position: absolute;
bottom: 10%;
left: 1rem;
color: #fff;
font-family: 'Roboto slab',serif;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
.Input-text:placeholder-shown + .input-label {
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .input-label,
.Input-text:focus:not(:placeholder-shown) + .input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
select {
position: relative;
top: 80%;
bottom:45px ;
left: 50%;
transform: translate(-50%, -50%);
}
select {
background-color: #f1924e;
color: white;
padding: 12px;
width: 250px;
border: none;
font-size: 20px;
font-family:'Roboto Slab',serif ;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
-webkit-appearance: button;
appearance: button;
outline: none;
}
select::before {
content: "\f13a";
font-family: FontAwesome;
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 100%;
text-align: center;
font-size: 28px;
line-height: 45px;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
select:hover::before {
color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.2);
}
select {
padding: 30px;
}
\ No newline at end of file
other_calc/css/simp-length.css deleted 100644 → 0
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Dosis|Passion+One|Roboto+Slab');
:root {
/* generic */
--gutterSm: 0.4rem;
--gutterMd: 0.8rem;
--gutterLg: 1.6rem;
--gutterXl: 2.4rem;
--gutterXx: 7.2rem;
--colorPrimary400: #7e57c2;
--colorPrimary600: #5e35b1;
--colorPrimary800: #4527a0;
--fontFamily: "Dosis", sans-serif;
--fontSizeSm: 1.2rem;
--fontSizeMd: 1.6rem;
--fontSizeLg: 2.1rem;
--fontSizeXl: 2.8rem;
--fontSizeXx: 3.6rem;
--lineHeightSm: 1.1;
--lineHeightMd: 1.8;
--transitionDuration: 300ms;
--transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
/* floated labels */
--inputPaddingV: var(--gutterMd);
--inputPaddingH: var(--gutterLg);
--inputFontSize: var(--fontSizeLg);
--inputLineHeight: var(--lineHeightMd);
--labelScaleFactor: 0.8;
--labelDefaultPosY: 50%;
--labelTransformedPosY: calc(
(var(--labelDefaultPosY)) -
(var(--inputPaddingV) * var(--labelScaleFactor)) -
(var(--inputFontSize) * var(--inputLineHeight))
);
--inputTransitionDuration: var(--transitionDuration);
--inputTransitionTF: var(--transitionTF);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
background-image: url("../page_img/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:5px 32px;
height:50%;
border-radius: 17px;
width: 80%;
position: relative;
top: 10px;
}
#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
other_calc/css/simp-speed.css deleted 100644 → 0
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Dosis|Passion+One|Roboto+Slab');
:root {
/* generic */
--gutterSm: 0.4rem;
--gutterMd: 0.8rem;
--gutterLg: 1.6rem;
--gutterXl: 2.4rem;
--gutterXx: 7.2rem;
--colorPrimary400: #7e57c2;
--colorPrimary600: #5e35b1;
--colorPrimary800: #4527a0;
--fontFamily: "Dosis", sans-serif;
--fontSizeSm: 1.2rem;
--fontSizeMd: 1.6rem;
--fontSizeLg: 2.1rem;
--fontSizeXl: 2.8rem;
--fontSizeXx: 3.6rem;
--lineHeightSm: 1.1;
--lineHeightMd: 1.8;
--transitionDuration: 300ms;
--transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
/* floated labels */
--inputPaddingV: var(--gutterMd);
--inputPaddingH: var(--gutterLg);
--inputFontSize: var(--fontSizeLg);
--inputLineHeight: var(--lineHeightMd);
--labelScaleFactor: 0.8;
--labelDefaultPosY: 50%;
--labelTransformedPosY: calc(
(var(--labelDefaultPosY)) -
(var(--inputPaddingV) * var(--labelScaleFactor)) -
(var(--inputFontSize) * var(--inputLineHeight))
);
--inputTransitionDuration: var(--transitionDuration);
--inputTransitionTF: var(--transitionTF);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
background-image: url("../page_img/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: 10px;
}
#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
other_calc/css/simp-temp.css deleted 100644 → 0
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Dosis|Passion+One|Roboto+Slab');
:root {
/* generic */
--gutterSm: 0.4rem;
--gutterMd: 0.8rem;
--gutterLg: 1.6rem;
--gutterXl: 2.4rem;
--gutterXx: 7.2rem;
--colorPrimary400: #7e57c2;
--colorPrimary600: #5e35b1;
--colorPrimary800: #4527a0;
--fontFamily: "Dosis", sans-serif;
--fontSizeSm: 1.2rem;
--fontSizeMd: 1.6rem;
--fontSizeLg: 2.1rem;
--fontSizeXl: 2.8rem;
--fontSizeXx: 3.6rem;
--lineHeightSm: 1.1;
--lineHeightMd: 1.8;
--transitionDuration: 300ms;
--transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
/* floated labels */
--inputPaddingV: var(--gutterMd);
--inputPaddingH: var(--gutterLg);
--inputFontSize: var(--fontSizeLg);
--inputLineHeight: var(--lineHeightMd);
--labelScaleFactor: 0.8;
--labelDefaultPosY: 50%;
--labelTransformedPosY: calc(
(var(--labelDefaultPosY)) -
(var(--inputPaddingV) * var(--labelScaleFactor)) -
(var(--inputFontSize) * var(--inputLineHeight))
);
--inputTransitionDuration: var(--transitionDuration);
--inputTransitionTF: var(--transitionTF);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{background-image: url("../page_img/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: 80%;
position: relative;
top: 10px;
}
#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
other_calc/css/simp-weight.css deleted 100644 → 0
@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: 10px;
}
#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
other_calc/css/simp.css deleted 100644 → 0
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Dosis|Passion+One|Roboto+Slab');
:root {
/* generic */
--gutterSm: 0.4rem;
--gutterMd: 0.8rem;
--gutterLg: 1.6rem;
--gutterXl: 2.4rem;
--gutterXx: 7.2rem;
--colorPrimary400: #7e57c2;
--colorPrimary600: #5e35b1;
--colorPrimary800: #4527a0;
--fontFamily: "Dosis", sans-serif;
--fontSizeSm: 1.2rem;
--fontSizeMd: 1.6rem;
--fontSizeLg: 2.1rem;
--fontSizeXl: 2.8rem;
--fontSizeXx: 3.6rem;
--lineHeightSm: 1.1;
--lineHeightMd: 1.8;
--transitionDuration: 300ms;
--transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
/* floated labels */
--inputPaddingV: var(--gutterMd);
--inputPaddingH: var(--gutterLg);
--inputFontSize: var(--fontSizeLg);
--inputLineHeight: var(--lineHeightMd);
--labelScaleFactor: 0.8;
--labelDefaultPosY: 50%;
--labelTransformedPosY: calc(
(var(--labelDefaultPosY)) -
(var(--inputPaddingV) * var(--labelScaleFactor)) -
(var(--inputFontSize) * var(--inputLineHeight))
);
--inputTransitionDuration: var(--transitionDuration);
--inputTransitionTF: var(--transitionTF);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
text-align: center;
}
#title{
background: #3FB74F;
opacity: 0.9;
}
#title h1{
color: #000;
font-size: 5em;
font-weight: 400;
font-family: 'Passion One', cursive;
margin: 0;
text-align: center;
}
/* Calculator box */
.calculator{
display:inline-block;
-webkit-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
-moz-box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
box-shadow: 16px 1px 15px -1px rgba(0,0,0,0.61);
background-color: #3FB74F;
padding:25px 32px;
height:50%;
border-radius: 17px;
width: 50%;
position: relative;
top: 150px;
}
#theme {
position: relative;
left: -250px;
width: 95%;
top: -45px;
font-size: 1em;
}
#theme select{
width:15%;
height: 25px;
}
Input[type=submit]{
display:inline-block;
background-color: #9a4ef1;
padding:15px 50px;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(255,255,255,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family: 'Roboto Slab', serif;
font-size:20px;
color:#ffff;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
}
Input[type=submit]:hover{
border-color: rgba(255,255,255,1);
}
@media all and (max-width:30em){
input[type=submit]{
display:block;
margin:0.2em auto;
}
}
.Input {
position: relative;
}
Input[type=text] {
display: block;
margin: 0;
padding: var(--inputPaddingV) var(--inputPaddingH);
color: inherit;
width: 50%;
font-family:'passio none', cursive;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
border: none;
border-radius: 0.4rem;
transition: box-shadow var(--transitionDuration);
}
Input[type=text]::placeholder {
color: #B0BEC5;
}
Input[type=text]:focus {
outline: none;
box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
}
.Input-label {
display: block;
position: absolute;
bottom: 50%;
left: 1rem;
color: #fff;
font-family: inherit;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform:
translate3d(0, var(--labelDefaultPosY), 0)
scale(1);
transform-origin: 0 0;
transition:
opacity var(--inputTransitionDuration) var(--inputTransitionTF),
transform var(--inputTransitionDuration) var(--inputTransitionTF),
visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}
Input[type=text]:placeholder-shown + .Input-label {
visibility: hidden;
z-index: -1;
}
Input[type=text]:not(:placeholder-shown) + .Input-label,
Input[type=text]:focus:not(:placeholder-shown) + .Input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
translate3d(0, var(--labelTransformedPosY), 0)
scale(var(--labelScaleFactor));
transition:
transform var(--inputTransitionDuration),
visibility 0ms,
z-index 0ms;
}
select {
position: relative;
top: 80%;
bottom:45px ;
left: 50%;
transform: translate(-50%, -50%);
}
select {
background-color: #5652B7;
color: white;
padding: 12px;
width: 250px;
border: none;
font-size: 20px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
-webkit-appearance: button;
appearance: button;
outline: none;
}
select::before {
content: "\f13a";
font-family: FontAwesome;
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 100%;
text-align: center;
font-size: 28px;
line-height: 45px;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
select:hover::before {
color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.2);
}
select {
padding: 30px;
}
\ No newline at end of file
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