templates/front/blocks/block-kcal-calculator.twig line 1

Open in your IDE?
  1. <section class="parent-container bar text-center py-90" style="background-color: #5da73c">
  2.     <div class="container">
  3.         <h1 class="f-48 b-900 text-uppercase mb-0 text-white">Kalkulator zapotrzebowania kalorycznego</h1></div>
  4. </section>
  5. <section class="parent-container pt-70 calculator">
  6.     <div class="container">
  7.         <h3 class="f-36 b-900">Podstawowe informacje</h3>
  8.         <form class="row pt-4 pb-3 inputs" name="calculator">
  9.             <div class="col-xl-3 col-sm-6 my-3 col-12">
  10.                 <label>Płeć</label>
  11.                 <select class="form-select" aria-label="Default select example" id="gender">
  12.                     <option value="1">Kobieta</option>
  13.                     <option value="2">Mężczyzna</option>
  14.                 </select>
  15.             </div>
  16.             <div class="col-xl-3 col-sm-6 my-3 col-12">
  17.                 <label>Wiek</label>
  18.                 <input type="text" placeholder="lat" id="age" name="age" class="age calculator-input">
  19.                 <p id="age-wrong"></p>
  20.             </div>
  21.             <div class="col-xl-3 col-sm-6 my-3 col-12">
  22.                 <label>Wzrost</label>
  23.                 <input type="text" placeholder="cm" id="height" class="calculator-input">
  24.                 <p id="height-wrong"></p>
  25.             </div>
  26.             <div class="col-xl-3 col-sm-6 my-3 col-12 position-relative">
  27.                 <label>Waga</label>
  28.                 <input type="text" class="calculator-input" placeholder="kg" id="weight">
  29.                 <p id="weight-wrong"></p>
  30.             </div>
  31.         </form>
  32.         <h3 class="f-36 b-900 mt-2">Poziom aktywności</h3>
  33.         <div class="row pt-4">
  34.             <div class="col-xl-4 col-md-6 col-12  mb-md-5 mb-4 pe-5">
  35.                 <div class="form-check radio">
  36.                     <input class="form-check-input activity" type="radio" name="flexRadioDefault" id="flexRadioDefault1" value="1" checked>
  37.                     <label class="form-check-label" for="flexRadioDefault1" >
  38.                         <p class="fw-bold f-25 mb-2 ps-2">Siedzący</p>
  39.                         <p class="fst-italic ps-2 f-18">Spędzam większość dnia siedząc z małą ilością ćwiczeń, bądź żadną</p>
  40.                     </label>
  41.                 </div>
  42.             </div>
  43.             <div class="col-xl-4 col-md-6 col-12  mb-md-5 mb-4 pe-5">
  44.                 <div class="form-check radio">
  45.                     <input class="form-check-input activity" type="radio" name="flexRadioDefault" id="flexRadioDefault2" value="2">
  46.                     <label class="form-check-label" for="flexRadioDefault2">
  47.                         <p class="fw-bold f-25 mb-2 ps-2">Mały</p>
  48.                         <p class="fst-italic ps-2 f-18">Ćwiczenia 1-3 razy tygodniowo</p>
  49.                     </label>
  50.                 </div>
  51.             </div>
  52.             <div class="col-xl-4 col-md-6 col-12 mb-md-5 mb-4 pe-5">
  53.                 <div class="form-check radio">
  54.                     <input class="form-check-input activity" type="radio" name="flexRadioDefault" id="flexRadioDefault3" value="3">
  55.                     <label class="form-check-label" for="flexRadioDefault3">
  56.                         <p class="fw-bold f-25 mb-2 ps-2">Umiarkowany</p>
  57.                         <p class="fst-italic ps-2 f-18">Ćwiczenia 4-5 razy tygodniowo</p>
  58.                     </label>
  59.                 </div>
  60.             </div>
  61.             <div class="col-xl-4 col-md-6 col-12 mb-md-5 mb-4 pe-5">
  62.                 <div class="form-check radio">
  63.                     <input class="form-check-input activity" type="radio" name="flexRadioDefault" id="flexRadioDefault4" value="4">
  64.                     <label class="form-check-label" for="flexRadioDefault4">
  65.                         <p class="fw-bold f-25 mb-2 ps-2">Aktywny</p>
  66.                         <p class="fst-italic ps-2 f-18">Codzienne ćwiczenia lub intensywne ćwiczenia 3-4 razy tygodniowo</p>
  67.                     </label>
  68.                 </div>
  69.             </div>
  70.             <div class="col-xl-4 col-md-6 col-12 mb-md-5 mb-4 pe-5">
  71.                 <div class="form-check radio">
  72.                     <input class="form-check-input activity" type="radio" name="flexRadioDefault" id="flexRadioDefault5" value="5">
  73.                     <label class="form-check-label" for="flexRadioDefault5">
  74.                         <p class="fw-bold f-25 mb-2 ps-2">Bardzo aktywny</p>
  75.                         <p class="fst-italic ps-2 f-18">Intensywne ćwiczenia 6-7 razy tygodniowo</p>
  76.                     </label>
  77.                 </div>
  78.             </div>
  79.         </div>
  80.         <h3 class="f-36 b-900">Wybierz swój cel</h3>
  81.         <div class="row py-3">
  82.             <div class="col-xl-4 col-md-6 col-10 your-goal mb-5">
  83.                 <select class="form-select" aria-label="Default select example" id="destination">
  84.                     <option value="1">Utrzymanie wagi</option>
  85.                     <option value="2">Utrata wagi</option>
  86.                     <option value="3">Ekstremalna utrata wagi</option>
  87.                     <option value="4">Przybranie na wadze</option>
  88.                     <option value="5">Szybki przyrost masy ciała</option>
  89.                 </select>
  90.             </div>
  91.         </div>
  92.         <div class="text-center">
  93.             <button onclick="validateForm()" href="#calculate" type="button" class="btn btn-primary my-4" id="activity-level">Oblicz</button>
  94.         </div>
  95.     </div>
  96. </section>
  98. {% set sectionIcon = entity.layoutSettings.icon is defined and check_is_int(entity.layoutSettings.icon.1) ? custom_get_image(entity.layoutSettings.icon.1) : null %}
  99. {% set sec = get_section_data(entity, app.request.locale('pl')) %}
  101. <section class="parent-container main-calculate half-wrapper calculate pt-{{ sec.secPT|default('0') }} pb-{{ sec.secPB|default('0') }} mt-{{ sec.secMT|default('0') }} mb-{{ sec.secMB|default('0') }}">
  102.     {% if sec.bgImage is not null %}
  103.         <div class="half-wrapper-bg">
  104.             <img src="{{ sec.bgImage|default('')|imagine_filter('full') }}" alt="" class="wow fadeInLeft">
  105.         </div>
  106.     {% endif %}
  107.     <div class="half-content half-container my-auto">
  108.         <div class="mx-auto ms-xl-auto text-center  my-xl-auto py-xl-0 px-4 ">
  109.             <h2 class="fw-light f-36">{{ sec.title|default }}</h2>
  110.             <div class="my-5 mx-auto w-md-75 d-flex align-items-center justify-content-center items calculator-relative">
  111.                 <img src="{{ sectionIcon is not null ? (CONST_IMAGE_URL ~ sectionIcon.fileName) }}" alt="" class="calculator-img fadeInUp wow" data-wow-delay="400ms">
  112.                 <div class="position-relative mt-sm-5">
  113.                     <div class="result f-36 border-bottom" id="kcal_result"></div>
  114.                     <p class=" text-grey fw-light f-24 pt-3 mt-2 calories">kalorii / dzień</p>
  115.                 </div>
  116.             </div>
  117.             {{ sec.contentFirst|default('')|raw }}
  118.         </div>
  119.     </div>
  120. </section>