Skip to content

storage feature #130

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 27, 2020
Merged

storage feature #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ If you want to add Color Gradients to your code [click here](https://backgroundg
- [ ] [surface tension]
- [ ] [resolution]
- [ ] [charge]
- [x] [storage](conversionTools/storage/storage.html)

### [Mathematical Tools](mathematicalTools)
- [x] [number base](mathematicalTools/numberBase)
Expand Down
Binary file added conversionTools/storage/Screenshot_storage.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
188 changes: 188 additions & 0 deletions conversionTools/storage/storage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@


/*
*----------------------------------------------------------------
* 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: auto;
display: flex;
margin: .5rem auto auto;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
}
/*
*----------------------------------------------------------------
* wrapper
*----------------------------------------------------------------
*/
.storage__wrapper
{
width: 90%;
margin: .5rem auto auto;
align-items: center;
display: flex;
border-radius: 1rem;
height: auto;
flex-direction: column;
justify-content: center;
background-color: var(--indigo);
padding: 2rem 0;
box-shadow: 1px 2px 20px #2828288c;


}
/*
*----------------------------------------------------------------
* container
*----------------------------------------------------------------
*/
.storage__container
{
display: flex;
flex-direction: column;
margin: 0 auto;
}
.storage__container p
{
margin-bottom: 0.5rem;
}
/*
*----------------------------------------------------------------
* 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: mediumturquoise;
border-color: #020405;
outline: none;

}
/*
*----------------------------------------------------------------
* convert button
*----------------------------------------------------------------
*/
#convert_button
{
color: #fff;
background-color: #4CAF50;
border-color: #07090a;
outline: none;
font-weight: 500;
}


input,select
{
padding: 0.5rem;
border-radius: 0.4rem;
border: 1px solid #abaaaa;
min-width: 12.5rem;
}

/*
*----------------------------------------------------------------
* 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;
}
182 changes: 182 additions & 0 deletions conversionTools/storage/storage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
<!--
Contributor Details:
Name: Peter Janic
GitHub profile link : https://github.com/PeterJanic
-->
<!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="storage.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="/conversionTools/Angle_Conversion/angleconversions.html" class="dropdown-item">Angle Conversion Tool</a>
<a href="/conversionTools/density/density.html" class="dropdown-item">Density Conversion Tool</a>
<a href="/conversionTools/Energy/energy.html" class="dropdown-item">Energy Conversion Tool</a>
<a href="/conversionTools/fuelEfficiency/fuel.html" class="dropdown-item">Fuel Efficiency Calculator</a>
<a href="/conversionTools/image/image.html" class="dropdown-item">Image Conversion Tool</a>
<a href="/conversionTools/imagePdf/imagePdf.html" class="dropdown-item">Image to PDF Conversion Tool</a>
<a href="/conversionTools/length/length.html" class="dropdown-item">Length Conversion Tool</a>
<a href="/conversionTools/power/power.html" class="dropdown-item">Power Conversion Tool</a>
<a href="/conversionTools/pressure/pressure.html" class="dropdown-item">Pressure Conversion Tool</a>
<a href="/conversionTools/temperture/temperture.html" class="dropdown-item">Temperture Conversion Tool</a>
<a href="/conversionTools/Torque/torque.html" class="dropdown-item">Torque Conversion Tool</a>
<a href="/conversionTools/storage/storage.html" class="dropdown-item">Storage Conversion Tool</a>
<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">Daily Use Tools</button>
<div class="dropdown-menu">

<a href="/dailyUseTools/bmicalculator/bmi-calculator.html" class="dropdown-item">BMI Calculator</a>
<a href="/dailyUseTools/notes/notes.html" class="dropdown-item">Take Notes</a>
<a href="/dailyUseTools/passwordGenerator/passwordGenerator.html" class="dropdown-item">Password Generator</a>
<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="financeTools/compound-interest-calculator/compoundinterestcalculator.html" class="dropdown-item">Compound Interest Calculator</a>
<a href="/financeTools/discountcalculator/discount.html" class="dropdown-item">Discount Calculator</a>
<a href="/financeTools/emiCalculator/emi-calculator.html" class="dropdown-item">EMI Calculator</a>
<a href="/financeTools/mortgageCalculator/mortgageCalc.html" class="dropdown-item">Mortgage Calculator</a>
<a href="/financeTools/retirementcalaculator/index.html" class="dropdown-item">Retirement Calculator</a>
<a href="/financeTools/service-tax-calculator/tools.html" class="dropdown-item">Service Tax Calculator</a>
<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">Mathematical Tools</button>
<div class="dropdown-menu">

<a href="/mathmeticalTools/percentageCalculator/percentageCalculator.html" class="dropdown-item">Percentage Calculator</a>
<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.imgur.com/oU55IyI.png" />
</div>
</div>
<div class="col align-self-center">
<h1 class="text-white mb-5">Storage Converter</h1>
<p class="lead mb-4">You can use this tool to convert storage from one unit to another. </p>
</div>
</div>
</div>
</section>
<!-- Hero Section End -->

<!-- Storage conversion tool -->
<div class="container_wrapper">
<div class="storage__wrapper">
<div class="storage__container">
<div class="value__container">
<label for="storage_value">Enter the value</label>
<br>
<input type="text" name="storage_value" id="storage_value">
<select class="storage_dropdown" name="conversion_value" id="conversion_value">
<option value="b">bits [b]</option>
<option value="B">Bytes [B]</option>
</select>
</div>

<div class="result__container">
<label for="storage_result">Result</label>
<br>
<input type="text" name="storage_result" id="storage_result" readonly>
<select class="storage_dropdown" name="conversion_result" id="conversion_result">
<option value="b">bits [b]</option>
<option value="B">Bytes [B]</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 Peter Janic</p>
<p class="m-0">
Page Created by
<a href="https://github.com/PeterJanic" target="_blank"
>Peter Janic</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="storage.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