Skip to content

Commit

Permalink
Added Torque Converter (#67)
Browse files Browse the repository at this point in the history 
* Added Torque in conversionTools

* Update README.md

Added link to torque
  • Loading branch information
@saurabhhere
saurabhhere authored Oct 10, 2020
1 parent b0ae50b commit 07ade88
Show file tree
Hide file tree
Showing 5 changed files with 492 additions and 1 deletion.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Utility is meant to be a simple easy to use unit conversion website plus bunch o
- [angle]
- [magnet]
- [viscosity]
- [torque]
- [torque](conversionTools/Torque/torque.html)
- [density]
- [conductance]
- [inductance]
Expand Down
Binary file added conversionTools/Torque/preview.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
170 changes: 170 additions & 0 deletions conversionTools/Torque/torque.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@


/*
*----------------------------------------------------------------
* SITE HEADER
*----------------------------------------------------------------
*/
.site-header {
background-color: rgba(0, 0, 0, 0.85);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
/*
*----------------------------------------------------------------
* heading
*----------------------------------------------------------------
*/
.heading
{
/* margin-top: 50px; */
text-align: center;
}
/*
*----------------------------------------------------------------
* container
*----------------------------------------------------------------
*/
.container_wrapper
{
width: 90%;
height: 50vh;
display: flex;
margin: .5rem auto auto;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
}
/*
*----------------------------------------------------------------
* temprature wrapper
*----------------------------------------------------------------
*/
.torque__wrapper
{
width: 50%;
margin: 0 auto;
display: flex;
border-radius: 10px;
height: 300px;
flex-direction: column;
justify-content: center;
background-color: #5452ad;
/* background-color: var(--indigo); */
}
/*
*----------------------------------------------------------------
* temprature container
*----------------------------------------------------------------
*/
.torque__container
{
display: flex;
flex-direction: column;
margin: 0 auto;
}
/*
*----------------------------------------------------------------
* value ,result, button container
*----------------------------------------------------------------
*/
.value__container,
.result__container,
.button__container
{
margin: 10px auto;
}
/*
*----------------------------------------------------------------
* value ,result dropdown box
*----------------------------------------------------------------
*/
#conversion_value,
#conversion_result
{
color: Black;
/* #fff */
background-color: rgb(250, 212, 0);
border-color: #020405;
outline: none;

}
/*
*----------------------------------------------------------------
* convert button
*----------------------------------------------------------------
*/
#convert_button
{
color: #fff;
background-color: #ff0000b7;
border-color: #07090a;
outline: none;
}

/*
*----------------------------------------------------------------
* HERO SECTION
*----------------------------------------------------------------
*/
.hero-section {
background-color: var(--indigo);
}

.hero-section__graphic,
.hero-section__graphic:before,
.hero-section__graphic:after {
background-color: rgba(255, 255, 255, 0.1);
width: 300px;
height: 200px;
border-radius: 40% 30% 30% 40% / 60% 40% 60% 40%;
}

.hero-section__graphic:before,
.hero-section__graphic:after {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 0;
animation: float 10s infinite linear;
}
.hero-section__graphic:after {
animation-direction: reverse;
animation-delay: 500ms;
}

.hero-section__icon {
fill: var(--light);
width: 100%;
height: auto;
}

@keyframes float {
0% {
transform: translate(0%, 0%) rotate(0);
}

33% {
transform: translate(2%, 2%) rotate(120deg);
}

66% {
transform: translate(2%, -2%) rotate(240deg);
}

to {
transform: translate(0%, 0%) rotate(360deg);
}
}


/* Testing */
img {
width: 135px;
height: 135px;
position: relative;
left: 83px;
top: 30px;
}
179 changes: 179 additions & 0 deletions conversionTools/Torque/torque.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#6610f2" />
<link rel="icon" type="image/ico" href="../../favicon.ico" />
<title>Utility Website</title>
<!-- Styles -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="torque.css" />
</head>
<body>
<!-- Navbar -->
<nav class="site-header sticky-top py-1 text-light">
<div
class="container d-flex flex-column flex-md-row justify-content-between align-items-center"
>
<a class="py-2 text-light" href="index.html">
<i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
</a>

<div class="btn-group d-none d-md-block py-2">
<button
type="button"
class="btn btn-link text-light dropdown-toggle text-decoration-none"
data-toggle="dropdown"
>
Conversion Tools
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Demo</a>
<a href="#" class="dropdown-item">temperture</a>
</div>
</div>

<div class="btn-group d-none d-md-block py-2">
<button
type="button"
class="btn btn-link text-light dropdown-toggle text-decoration-none"
data-toggle="dropdown"
>
Daily Use Tools
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Demo</a>
</div>
</div>

<div class="btn-group d-none d-md-block py-2">
<button
type="button"
class="btn btn-link text-light dropdown-toggle text-decoration-none"
data-toggle="dropdown"
>
Finance Tools
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Demo</a>
</div>
</div>

<div class="btn-group d-none d-md-block py-2">
<button
type="button"
class="btn btn-link text-light dropdown-toggle text-decoration-none"
data-toggle="dropdown"
>
Mathmetical Tools
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Demo</a>
</div>
</div>
</div>
</nav>
<!-- Navbar End -->
<div class="heading">
</div>

<!-- Hero Section Starts -->
<section
class="hero-section overflow-hidden py-5 mb-5 text-center text-md-left text-light"
>
<div class="container-xl">
<div class="row">
<div class="d-none d-md-block col-5 align-self-center">
<div class="hero-section__graphic position-relative m-auto">
<img src="https://i.stack.imgur.com/TpNxY.gif" />
</div>
</div>
<div class="col align-self-center">
<h1 class="text-white mb-5">Torque Converter</h1>
<p class="lead mb-4">You can use this tool to convert torque from one unit to another. </p>
</div>
</div>
</div>
</section>
<!-- Hero Section End -->

<!-- Torque conversion tool -->
<div class="container_wrapper">
<div class="torque__wrapper">
<div class="torque__container">
<div class="value__container">
<label for="torque_value">Enter the torque</label>
<br>
<input type="text" name="torque_value" id="torque_value">
<select name="conversion_value" id="conversion_value">
<option value="N-m">Newton-meter (N-m)</option>
<option value="dy-cm">Dyne-centimeter (dy-cm)</option>
<option value="kgf-m">Kgrf-meter (kgf-m)</option>
<option value="lbf-in">lbf-inch (lbf-in)</option>
<option value="lbf-ft">lbf-foot (lbf-ft)</option>
</select>
</div>

<div class="result__container">
<label for="torque_result">Result</label>
<br>
<input type="text" name="torque_result" id="torque_result">
<select name="conversion_result" id="conversion_result">
<option value="N-m">Newton-meter (N-m)</option>
<option value="dy-cm">Dyne-centimeter (dy-cm)</option>
<option value="kgf-m">Kgrf-meter (kgf-m)</option>
<option value="lbf-in">lbf-inch (lbf-in)</option>
<option value="lbf-ft">lbf-foot (lbf-ft)</option>
</select>
</div>

<div class="button__container">
<input type="button" name="Convert" value="Convert" id="convert_button">
</div>
</div>
</div>
</div>


<!-- Footer -->
<footer class="border-top py-3 px-4">
<div class="row align-items-center">
<div class="col-md-6">
<p class="m-0">Copyright &copy; 2020 Saurabh Gupta</p>
<p class="m-0">
Page Created by
<a href="https://github.com/saurabhhere" target="_blank"
>Saurabh Gupta</a
>
</p>
</div>
<div class="col-md-6 text-md-right">
<a href="contributors.html" target="_blank" class="text-dark"
>Contributors</a
>
<span class="text-muted mx-2">|</span>

<a href="#" class="text-dark">Terms of Use</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div>
</div>
</footer>
<script src="torque.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Loading

0 comments on commit 07ade88

Please sign in to comment.