{% extends 'theme.html.twig' %}
{% block title %}Volumetric Weight - {{ parent() }} {% endblock %}
{% block body %}
{% apply inline_css %}
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #FF0000;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
input {font-weight:bold;}
</style>
{% endapply %}
<div class="dilevars-page-title d-flex align-items-center header-layout-2 title-align-center title-color-white">
<div class="dilevars-page-title-layer container">
<div class="row">
<div class="col-md-12">
<h1 class="page-title">
Volumetric Weight </h1>
<div class="page-breadcrumbs">
<div class="breadcrumb"><a href="{{path('app_home')}}">Home</a> > <span class="current">Volumetric Weight</span></div> </div>
</div>
</div>
</div>
</div>
<div id="content" class="site-content"><div class="container">
<div class="row">
<div class="col-sm-12">
<div id="primary" class="content-area">
<main id="main" >
<article id="post-273" class="row post-273 project type-project status-publish has-post-thumbnail hentry project-category-advices">
<div class="col-md-12">
<div class="row">
<div class="col-lg-12">
<div class="dilevars-project-content">
<div data-elementor-type="wp-post" data-elementor-id="273" class="elementor elementor-273">
<div class="elementor-inner">
<div class="elementor-section-wrap">
<section class="elementor-section elementor-top-section elementor-element elementor-element-6bad1cee elementor-section-boxed elementor-section-height-default elementor-section-height-default cd-bg-color-transparent" data-id="6bad1cee" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-37b3068e cd-bg-color-transparent" data-id="37b3068e" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-1e7f45c8 elementor-widget elementor-widget-heading" data-id="1e7f45c8" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<h3 class="elementor-heading-title elementor-size-default">Volumetric Weight</h3> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="elementor-section elementor-top-section elementor-element elementor-element-10c5160d elementor-section-boxed elementor-section-height-default elementor-section-height-default cd-bg-color-transparent" data-id="10c5160d" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<table style="width: 100%; border: 0px solid; color: #000!important;">
<tr>
<td style="width: 20%; font-weight:bold;">
Height
</td>
<td style="width: 5%; font-weight:bold;">
:
</td>
<td style="width: 50%; ">
<input type="text" id="height" class="form-control" placeholder="Height" required style="width:100%; height: 50px; margin-bottom: 0px;">
</td>
<td style="width: 25%; font-weight:bold;">
cm
</td>
</tr>
<tr>
<td style="font-weight:bold;">
Width
</td>
<td style="font-weight:bold;">
:
</td>
<td>
<input type="text" id="weight" class="form-control" placeholder="Width" required style="width:100%; height: 50px; margin-bottom: 0px;">
</td>
<td style="font-weight:bold;">
cm
</td>
</tr>
<tr>
<td style="font-weight:bold;">
Length
</td>
<td style="font-weight:bold;">
:
</td>
<td>
<input type="text" id="length" class="form-control" placeholder=" Length" required style="width:100%; height: 50px; margin-bottom: 0px;">
</td>
<td style="font-weight:bold;">
cm
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style ="text-align:right;">
<input type="submit" id="calculate" class="btn btn-primary text-white px-4" onclick="myFunction()" value="CALCULATE">
</td>
<td>
</td>
</tr>
<tr>
<td style="font-weight:bold;">
Volumetric Weight
</td>
<td style="font-weight:bold;">
:
</td>
<td>
<input type="text" id="result" class="form-control" readonly style="width:100%; height: 50px; margin-bottom: 0px;">
</td>
<td style="font-weight:bold;">
kg
</td>
</tr>
<tr>
<td colspan="4">
The volumetric weight is calculated using the formula:<br>
Length x Width x Height in centimeters / 5000 = Volumetric weight in kilograms<br><br>
<img src="{{asset('/public/theme/dilevars/demo2/wp-content/uploads/sites/6/2020/08/vw.jpg')}}" />
</td>
</tr>
</table>
</div>
</div>
</section>
<div id="snackbar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article><!-- #post-273 -->
</main><!-- #main -->
</div><!-- #primary -->
</div>
</div>
</div>
</div><!-- #content -->
<script>
function myFunction() {
if(document.getElementById("height").value === '' || isNaN(document.getElementById("height").value))
{
document.getElementById("snackbar").innerHTML = "Please Enter Numeric Height Values";
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
document.getElementById("height").focus();
}
else if(document.getElementById("weight").value === '' || isNaN(document.getElementById("weight").value))
{
document.getElementById("snackbar").innerHTML = "Please Enter Numeric Width Values";
var y = document.getElementById("snackbar");
y.className = "show";
setTimeout(function(){ y.className = y.className.replace("show", ""); }, 3000);
document.getElementById("weight").focus();
}
else if(document.getElementById("length").value === '' || isNaN(document.getElementById("length").value))
{
document.getElementById("snackbar").innerHTML= "Please Enter Numeric Length Values";
var z = document.getElementById("snackbar");
z.className = "show";
setTimeout(function(){ z.className = z.className.replace("show", ""); }, 3000);
document.getElementById("length").focus();
}
else
{
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
var length = document.getElementById("length").value;
document.getElementById("result").value = (height * weight * length)/5000;
}
}
</script>
{% endblock %}