Closes #1020, Additions to the Calculator

app/assets/stylesheets/pages/calculator.scss

@@ -61,6 +61,34 @@
   margin-right: 0px;
 }
 
+.info-div {
+  display: flex;
+  column-gap: 10px;
+  align-items: center;
+}
+
+.info-image {
+  width: 1rem;
+  height: 1rem;
+}
+
+.info-label {
+  display: none;
+  position: absolute;
+  margin-left: 250px;
+  background-color: #ececec;
+  padding: 4px;
+  border-radius: 8px;
+}
+
+.info-image:hover + .info-label {
+  display: block;
+}
+
+.info-label:hover {
+  display: block;
+}
+
 .flex-item {
   display: flex;
   flex-wrap: wrap;
@@ -209,6 +237,52 @@ select.custom-select {
   text-decoration: none;
 }
 
+.reusable-item-name{
+  top: 30%;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+  color: white;
+  font-size: 1.125rem; // 18px
+  font-weight: 600;
+  position: absolute;
+  padding: 0.5rem; // 8px
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+
+.reusable-item-button{
+  background-color: white;
+  padding: 0.5rem;
+  width: auto;
+  border-radius: 0.375rem;
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap
+}
+
+.reusable-item-button:hover{
+  background-color: lightgrey;
+}
+
+.image-wrapper {
+  display: flex;
+  align-items: stretch;
+
+  .image-container {
+    flex-grow: 1;
+    height: 100%;
+    position: relative;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+
 @media screen and (max-width: $sm) {
   .logo-zerowaste img {
     width: 100%;
@@ -351,6 +425,9 @@ select.custom-select {
   .jumbotron {
     margin: 0;
   }
+  .info-label {
+  margin-left: 220px;
+  }
   .result-container {
     div {
       margin: 20px 0;

app/views/calculators/_mhc_reusable_products.html.erb

@@ -0,0 +1,34 @@
+<section class="description-section rounded jumbotron jumbotron-fluid position-relative grid grid-cols-4 gap-4 relative image-wrapper">
+  <div class="p-4 text-center rounded-lg">
+    <div class="relative image-container">
+      <%= image_tag "menstrual-cup.jpg", class: "w-full h-full" %>
+      <h3 class="reusable-item-name"><%= t(".menstrual_cup") %></h3>
+      <%= link_to_external(text: t(".learn_more"), url: t(".menstrual_cup_link"), class: 'reusable-item-button') %>
+    </div>
+  </div>
+
+  <div class=" p-4 text-center rounded-lg">
+    <div class="relative image-container">
+      <%= image_tag "reusable-pads.jpg" %>
+      <h3 class="reusable-item-name"><%= t(".reusable_pads") %></h3>
+      <%= link_to_external(text: t(".learn_more"), url: t(".reusable_pads_link"), class: 'reusable-item-button') %>
+    </div>
+  </div>
+
+  <div class="p-4 text-center rounded-lg">
+    <div class="relative image-container">
+      <%= image_tag "menstrual-panties.jpg" %>
+      <h3 class="reusable-item-name"><%= t(".menstrual_panties") %></h3>
+      <%= link_to_external(text: t(".learn_more"), url: t(".menstrual_panties_link"), class: 'reusable-item-button') %>
+    </div>
+  </div>
+
+  <div class="p-4 text-center rounded-lg">
+    <div class="relative image-container">
+      <%= image_tag "menstrual-disk.jpeg" %>
+      <h3 class="reusable-item-name"><%= t(".menstrual_disk") %></h3>
+      <%= link_to_external(text: t(".learn_more"), url: t(".menstrual_disk_link"), class: 'reusable-item-button') %>
+      </div>
+    </div>
+</section>
+

app/views/calculators/mhc_calculator.erb

@@ -25,14 +25,17 @@
                              class: "form_fild price_select rounded w-100 form-control mb-0	",
                              data: { mhc_calculator_target: "menstruationAge" } %>
 
-        <div class="pb-2 input_lable mt-6">
+        <div class="pb-2 input_lable info-div mt-6">
           <%= label_tag "child_product_category", t(".form.menopause_age") %>
+          <%= image_tag "icons/info-circle.svg", class: "info-image" %>
+          <%= label_tag "child_product_category", t(".form.menopause_age_info"), class: "info-label" %>
         </div>
 
         <%= form.input_field :menopause_age,
-                             type: "number",
-                             class: "form_fild price_select rounded w-100 form-control mb-0",
-                             data: { mhc_calculator_target: "menopauseAge" } %>
+                              type: "number",
+                              class: "form_fild price_select rounded w-100 form-control mb-0",
+                              placeholder: "48",
+                              data: { mhc_calculator_target: "menopauseAge" } %>
 
         <div class="pb-2 input_lable mt-6">
           <%= label_tag "child_product_category", t(".form.average_menstruation_cycle_duration") %>
@@ -90,4 +93,5 @@
   <% end %>
 </div>
 
+<%= render "calculators/mhc_reusable_products" %>
 <%= render "calculators/mhc_description_block" %>

config/locales/en/en.yml

@@ -79,11 +79,11 @@ en:
       use_less_link: https://zerowastelviv.org.ua/en/zero-waste-nappies-en/
     mhc_description_block:
       mhc_description_block_html:
-        "These data are approximate, and exact values may vary depending on your individual needs and habits. 
+        "These data are approximate, and exact values may vary depending on your individual needs and habits.
         Using reusable menstrual products can significantly reduce waste and serve as a cost-effective alternative to disposable options.
-        You can optimize the use of these products at any stage, which will help lower expenses and increase comfort. 
-        We recommend exploring methods for the effective use of reusable menstrual products and learning about their benefits. 
-        More %{information_link} about the calculations regarding the quantity and cost of these products can be found in our materials 
+        You can optimize the use of these products at any stage, which will help lower expenses and increase comfort.
+        We recommend exploring methods for the effective use of reusable menstrual products and learning about their benefits.
+        More %{information_link} about the calculations regarding the quantity and cost of these products can be found in our materials
         or by %{contact_link} with your questions."
       information_link_text: "detailed information"
       contact_link_text: "contacting us"
@@ -99,7 +99,8 @@ en:
         user_age: "Your age"
         menstruation_age: "Age at First Menstruation"
         menopause_age: "Age at Menopause"
-        average_menstruation_cycle_duration: "Average Menstrual Cycle Duration (days)"
+        menopause_age_info: "NEED TO BE CHANGED!!! Waiting for information"
+        average_menstruation_cycle_duration: "Average Menstrual Cycle Duration (mainly 21-35 days)"
         pads_per_cycle: "Average Products Used Per Cycle"
         pad_category: "Product Category"
         budgetary: "Budgetary"
@@ -111,6 +112,16 @@ en:
       money_will_be_spent: "yet to be spent on menstrual hygiene products"
       pieces: "pcs."
       unit: "uah"
+    mhc_reusable_products:
+      menstrual_cup: "Menstrual cup"
+      menstrual_cup_link: "https://zerowastelviv.org.ua/en/menstrual-cup/"
+      reusable_pads: "Reusable pads"
+      reusable_pads_link: "https://zerowastelviv.org.ua/en/reusable-pads/"
+      menstrual_panties: "Menstrual panties"
+      menstrual_panties_link: "https://zerowastelviv.org.ua/en/menstrual-panties/"
+      menstrual_disk: "Menstrual disk"
+      menstrual_disk_link: "https://zerowastelviv.org.ua/en/menstrual-disk/"
+      learn_more: "Learn more"
     new_calculator:
       diaper_сalculator: "Diaper calculator"
       form:
@@ -167,7 +178,7 @@ en:
       about_us: "About us"
       admin: "Admin"
       calculate: "Diaper calculator"
-      mhc_calculator: "Pad calculator"
+      mhc_calculator: "Menstrual calculator"
       log_out: "Log Out"
       sign_up: "Sign Up"
       log_in: "Log In"

config/locales/uk/uk.yml

@@ -48,11 +48,11 @@ uk:
       use_less_link: "https://zerowastelviv.org.ua/zero-waste-nappies/"
     mhc_description_block:
       mhc_description_block_html:
-        "Ці дані є орієнтовними, і точні значення можуть варіюватися залежно від ваших індивідуальних потреб та звичок. 
-        Використання багаторазових менструальних засобів може значно зменшити кількість відходів і стати економічно 
-        вигідною альтернативою одноразовим продуктам. Ви можете оптимізувати використання цих засобів на будь-якому етапі, 
-        що дозволить знизити витрати та підвищити комфорт. Ми рекомендуємо ознайомитися з методами ефективного використання 
-        багаторазових менструальних продуктів та їх перевагами. Більш %{information_link} про розрахунки кількості та вартості 
+        "Ці дані є орієнтовними, і точні значення можуть варіюватися залежно від ваших індивідуальних потреб та звичок.
+        Використання багаторазових менструальних засобів може значно зменшити кількість відходів і стати економічно
+        вигідною альтернативою одноразовим продуктам. Ви можете оптимізувати використання цих засобів на будь-якому етапі,
+        що дозволить знизити витрати та підвищити комфорт. Ми рекомендуємо ознайомитися з методами ефективного використання
+        багаторазових менструальних продуктів та їх перевагами. Більш %{information_link} про розрахунки кількості та вартості
         цих продуктів можна знайти в наших матеріалах або звернувшись %{contact_link} з вашими питаннями."
       information_link_text: "детальну інформацію"
       contact_link_text: "до нас"
@@ -68,7 +68,8 @@ uk:
         user_age: "Ваш вік"
         menstruation_age: "Вік початку менструації"
         menopause_age: "Вік настання менопаузи"
-        average_menstruation_cycle_duration: "Середня тривалість менструального циклу (дні)"
+        menopause_age_info: "НЕОБІХІДНО ЗМІНИТИ!!! Інформація від замовника очікується"
+        average_menstruation_cycle_duration: "Середня тривалість менструального циклу (переважно 21-35 днів)"
         pads_per_cycle: "Середня кількість засобів гігієни за цикл"
         pad_category: "Категорія засобів гігієни"
         budgetary: "Бюджетна"
@@ -80,6 +81,16 @@ uk:
       money_will_be_spent: "ви ще витратите"
       pieces: "шт."
       unit: "грн"
+    mhc_reusable_products:
+      menstrual_cup: "Менструальна чаша"
+      menstrual_cup_link: "https://zerowastelviv.org.ua/menstrualna-chasha/"
+      reusable_pads: "Багаторазові прокладки"
+      reusable_pads_link: "https://zerowastelviv.org.ua/bahatorazovi-prokladky/"
+      menstrual_panties: "Менструальні трусики"
+      menstrual_panties_link: "https://zerowastelviv.org.ua/menstrualni-trusyky/"
+      menstrual_disk: "Менструальний диск"
+      menstrual_disk_link: "https://zerowastelviv.org.ua/menstrualnyj-dysk/"
+      learn_more: "Дізнатися більше"
     new_calculator:
       diaper_сalculator: "Калькулятор підгузків"
       form:
@@ -150,7 +161,7 @@ uk:
       admin: "Адміністратор"
       calculate: "Калькулятор підгузків"
       log_out: "Вийти"
-      mhc_calculator: "Калькулятор прокладок"
+      mhc_calculator: "Mенструальний калькулятор"
       sign_up: "Зареєструватися"
       log_in: "Увійти"
       contact_us: "Зв'яжіться з нами"