templates/home/volumetricweight.html.twig line 1

  1. {% extends 'theme.html.twig' %}
  3. {% block title %}Volumetric Weight - {{ parent() }} {% endblock %}
  5. {% block body %}
  7. {% apply inline_css %}
  8. <style>
  10. table {
  11.   border-collapse: collapse;
  12.   width: 100%;
  13. }
  15. th, td {
  16.   padding: 8px;
  17.   text-align: left;
  18.   border-bottom: 1px solid #ddd;
  19. }
  25. #snackbar {
  26.   visibility: hidden;
  27.   min-width: 250px;
  28.   margin-left: -125px;
  29.   background-color: #FF0000;
  30.   color: #fff;
  31.   text-align: center;
  32.   border-radius: 2px;
  33.   padding: 16px;
  34.   position: fixed;
  35.   z-index: 1;
  36.   left: 50%;
  37.   bottom: 30px;
  38.   font-size: 17px;
  39. }
  41. #snackbar.show {
  42.   visibility: visible;
  43.   -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  44.   animation: fadein 0.5s, fadeout 0.5s 2.5s;
  45. }
  47. @-webkit-keyframes fadein {
  48.   from {bottom: 0; opacity: 0;} 
  49.   to {bottom: 30px; opacity: 1;}
  50. }
  52. @keyframes fadein {
  53.   from {bottom: 0; opacity: 0;}
  54.   to {bottom: 30px; opacity: 1;}
  55. }
  57. @-webkit-keyframes fadeout {
  58.   from {bottom: 30px; opacity: 1;} 
  59.   to {bottom: 0; opacity: 0;}
  60. }
  62. @keyframes fadeout {
  63.   from {bottom: 30px; opacity: 1;}
  64.   to {bottom: 0; opacity: 0;}
  65. }
  67. input {font-weight:bold;}
  69. </style>
  70. {% endapply %}
  72. <div class="dilevars-page-title d-flex align-items-center  header-layout-2 title-align-center title-color-white">
  73.     <div class="dilevars-page-title-layer container">
  74.         <div class="row">
  75.             <div class="col-md-12">            
  76.                 <h1 class="page-title">
  77.                     Volumetric Weight                </h1>
  78.                                     <div class="page-breadcrumbs">
  79.                     <div class="breadcrumb"><a href="{{path('app_home')}}">Home</a> >  <span class="current">Volumetric Weight</span></div>                    </div>
  80.                                 </div>                
  81.         </div>
  82.     </div>
  83. </div>
  84.     <div id="content" class="site-content"><div class="container">
  85.     <div class="row">
  86.         <div class="col-sm-12">
  87.             <div id="primary" class="content-area">
  88.                 <main id="main" >
  89.                 <article id="post-273" class="row post-273 project type-project status-publish has-post-thumbnail hentry project-category-advices">
  91.     
  92.     <div class="col-md-12">
  93.         <div class="row">
  94.             <div class="col-lg-12">
  95.                 <div class="dilevars-project-content">
  96.                             <div data-elementor-type="wp-post" data-elementor-id="273" class="elementor elementor-273">
  97.                         <div class="elementor-inner">
  98.                 <div class="elementor-section-wrap">
  99.                                     <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">
  100.                         <div class="elementor-container elementor-column-gap-default">
  101.                             <div class="elementor-row">
  102.                     <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">
  103.             <div class="elementor-column-wrap elementor-element-populated">
  104.                             <div class="elementor-widget-wrap">
  105.                         <div class="elementor-element elementor-element-1e7f45c8 elementor-widget elementor-widget-heading" data-id="1e7f45c8" data-element_type="widget" data-widget_type="heading.default">
  106.                 <div class="elementor-widget-container">
  107.             <h3 class="elementor-heading-title elementor-size-default">Volumetric Weight</h3>        </div>
  108.                 </div>
  109.                         </div>
  110.                     </div>
  111.         </div>
  112.                                 </div>
  113.                     </div>
  114.         </section>
  115.         <hr>
  116.                 <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">
  117.                         <div class="elementor-container elementor-column-gap-default">
  118.                             <div class="elementor-row">
  119.                                 
  120.                                 <table style="width: 100%; border: 0px solid; color: #000!important;">
  121.                                     <tr>
  122.                                       <td style="width: 20%; font-weight:bold;">
  123.                                         Height
  124.                                      </td>
  125.                                     <td style="width: 5%; font-weight:bold;">
  126.                                      :
  127.                                    </td>
  128.                                    <td style="width: 50%; ">
  129.                                      <input type="text"  id="height"  class="form-control" placeholder="Height" required style="width:100%; height: 50px; margin-bottom: 0px;">
  130.                                    </td>
  131.                                    <td style="width: 25%; font-weight:bold;">
  132.                                    cm
  133.                                    </td>
  134.                                    </tr>
  135.                                    <tr>
  136.                                   <td style="font-weight:bold;">
  137.                                   Width
  138.                                  </td>
  139.                                  <td style="font-weight:bold;">
  140.                                    :
  141.                                  </td>
  142.                                 <td>
  143.                                  <input type="text"  id="weight"  class="form-control" placeholder="Width" required style="width:100%; height: 50px; margin-bottom: 0px;">
  144.                                 </td>
  145.                                 <td style="font-weight:bold;">
  146.                                 cm
  147.                                 </td>
  148.                                 </tr>
  149.                                  <tr>
  150.                                   <td style="font-weight:bold;">
  151.                                  Length
  152.                                  </td>
  153.                                  <td style="font-weight:bold;">
  154.                                    :
  155.                                  </td>
  156.                                 <td>
  157.                                  <input type="text"  id="length"  class="form-control" placeholder=" Length" required style="width:100%; height: 50px; margin-bottom: 0px;">
  158.                                 </td>
  159.                                 <td style="font-weight:bold;">
  160.                                 cm
  161.                                 </td>
  162.                                 </tr>
  163.                                  <tr>
  164.                                   <td>
  165.                                
  166.                                  </td>
  167.                                  <td>
  168.                                  
  169.                                  </td>
  170.                                 <td style ="text-align:right;">
  171.                                <input type="submit" id="calculate" class="btn btn-primary text-white px-4" onclick="myFunction()" value="CALCULATE">
  172.                                 </td>
  173.                                 <td>
  174.                                 
  175.                                 </td>
  176.                                 </tr>
  177.                                  <tr>
  178.                                   <td style="font-weight:bold;">
  179.                                 Volumetric Weight
  180.                                  </td>
  181.                                  <td style="font-weight:bold;">
  182.                                    :
  183.                                  </td>
  184.                                 <td>
  185.                                  <input type="text"  id="result"  class="form-control" readonly style="width:100%; height: 50px; margin-bottom: 0px;">
  186.                                 </td>
  187.                                 <td style="font-weight:bold;">
  188.                                        kg
  189.                                 </td>
  190.                                 </tr>
  191.                                  <tr>
  192.                                   <td colspan="4">
  193.                                     The volumetric weight is calculated using the formula:<br>
  194.                                     Length x Width x Height in centimeters / 5000 = Volumetric weight in kilograms<br><br>
  195.                                     <img  src="{{asset('/public/theme/dilevars/demo2/wp-content/uploads/sites/6/2020/08/vw.jpg')}}" />
  196.                 
  197.                                  </td>
  198.                                 
  199.                                 </tr>
  200.                                 </table>
  203.                                 </div>
  204.                     </div>
  205.         </section>
  206.                 
  207.                 
  208.         <div id="snackbar"></div>
  210.                                     </div>
  211.             </div>
  212.                     </div>
  213.                         </div>
  214.             </div>
  215.         </div>
  216.     </div>
  217. </article><!-- #post-273 -->
  219.         
  221. </main><!-- #main -->
  222.             </div><!-- #primary -->
  223.         </div>
  224.     </div>
  225. </div>
  226.     </div><!-- #content -->
  229. <script>
  230. function myFunction() {
  232.   if(document.getElementById("height").value  === '' || isNaN(document.getElementById("height").value))
  233.     {
  234.     document.getElementById("snackbar").innerHTML = "Please Enter Numeric Height Values";
  235.         var x = document.getElementById("snackbar");
  236.         x.className = "show";
  237.         setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
  238.         document.getElementById("height").focus();
  239.         
  240.     }
  241.   else if(document.getElementById("weight").value  === '' || isNaN(document.getElementById("weight").value))
  242.     {
  243.     document.getElementById("snackbar").innerHTML = "Please Enter Numeric Width Values";
  244.         var y = document.getElementById("snackbar");
  245.         y.className = "show";
  246.         setTimeout(function(){ y.className = y.className.replace("show", ""); }, 3000);
  247.         document.getElementById("weight").focus();
  248.         
  249.     }
  250.   else if(document.getElementById("length").value  === '' || isNaN(document.getElementById("length").value))
  251.     {
  252.     document.getElementById("snackbar").innerHTML= "Please Enter Numeric Length Values";
  253.         var z = document.getElementById("snackbar");
  254.         z.className = "show";
  255.         setTimeout(function(){ z.className = z.className.replace("show", ""); }, 3000);
  256.         document.getElementById("length").focus();
  257.         
  258.     }
  259.   else
  260.   {
  261.       var height = document.getElementById("height").value;
  262.       var weight = document.getElementById("weight").value;
  263.       var length = document.getElementById("length").value;
  264.       document.getElementById("result").value = (height * weight * length)/5000;
  265.   }
  267. }
  268. </script>
  270. {% endblock %}