Merge pull request #80 from Andrenord282/main

issue fix: multiple frontend fixes #79

backend/static/styles.css

@@ -1165,12 +1165,22 @@ template {
   text-decoration: none;
 }
 .animal-card__preview {
+  position: relative;
+  height: 370px;
   margin-bottom: 15px;
   border-radius: 8px;
   overflow: hidden;
 }
 .animal-card__preview-img {
   display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
   margin: 0 auto;
   max-width: 100%;
   transition: transform 0.2s linear;
@@ -1193,6 +1203,9 @@ template {
   .animal-card__description-name {
     font-size: 20px;
   }
+  .animal-card__preview {
+    height: 340px;
+  }
 }
 
 /* =========================

backend/templates/general/footer.html

@@ -3,16 +3,16 @@
 {% from "ui/buttons.html" import button %}
 {% from  "ui/section_header.html" import section_header with context %}
 
-{% set footer_databag = { 'international_number': '+7 987 654 32 10', 'international_number_href': '+79876543210', 'european_number': '+3 123 456 789', 'european_number_href': '+3123456789', 'location': 'Georgia, Poti', 'email': 'info@site.com' } %}
-<footer class="page-footer">
+{% set footer_databag = { 'international_number': '+7 995 557 36 66 74', 'international_number_href': '+7995557366674', 'location': 'Georgia, Poti', 'email': '[email protected]', 'donate_email': 'pereborschikovpetr@gmail.com' } %}
+<footer class="page-footer" id="contact-us">
   <div class="container">
     <div class="page-footer__in">
         {{ section_header(className="page-footer__title", title="Contact Us", align_prop_title='right') }}
         <div class="page-footer__wrapper">
           <img
             class="page-footer__pic"
             src="/static/img/upload/shelter.jpg"
-            alt="shelter The Territory of Goodness"
+            alt="shelter The territory of good"
           />
             <div class="page-footer__content">
               <p class="page-footer__text">
@@ -26,9 +26,6 @@
                     <a class="contact-row__link" href=" {{ 'tel:' ~ footer_databag.international_number_href }}">
                       {{ footer_databag.international_number }}
                     </a>
-                    <a class="contact-row__link" href="{{ 'tel:' ~ footer_databag.european_number_href }}">
-                      {{ footer_databag.european_number }}
-                    </a>
                   </div>
                 </li>
 
@@ -45,8 +42,15 @@
                     </a>
                   </div>
                 </li>
+                <li class="contact-row">
+                  {{ icon(type='email', color='secondary-inverse', size='m', className='contact-row__icon')}}
+                  <div class="contact-row__content">To donate via paypal, please send money to Petr’s account:
+                    <a class="contact-row__link" href="{{ 'mailto:' ~ footer_databag.donate_email }}">
+                      {{ footer_databag.donate_email }}
+                    </a>
+                  </div>
+                </li>
               </ul>
-              <button class="button" type="button">Donate</button>
           </div>
         </div>
     </div>

backend/templates/general/header.html

@@ -1,24 +1,20 @@
-
 {% from "ui/icon.html" import icon with context %}
 
 {% from "ui/buttons.html" import button %}
 
-{% set header_databag = { 'shelter_name': "Territory Of Goodness", 'menu_items':
-[{ 'title': "Main", 'link': "#" }, { 'title': "Contacts", 'link': "#contacts" },
-{ 'title': "Donations", 'link': "#donations" }, { 'title': "Adopted", 'link':
-"#adopted" }] } %}
+{% set header_databag = { 'shelter_name': "The territory of good", } %}
 <header class="page-header">
   <div class="page-header__in">
     <p class="page-header__logo">{{ header_databag.shelter_name }}</p>
 
     <ul class="page-menu">
-      {% for item in header_databag.menu_items %}
+      <!-- {% for item in header_databag.menu_items %}
       <li class="page-menu__item">
         <a class="page-menu__link" href="{{ item.link }}">{{ item.title }}</a>
       </li>
-      {% endfor %}
+      {% endfor %} -->
 
-      {{ button("Donate", { "size": "s", "icon": 'donate' }) }}
+      {{ button("Donate", { "tag": a, "options"={"href"="contact-us"}, "size": "s", "icon": 'donate' }) }}
 
     </ul>
 
@@ -30,24 +26,49 @@
   </div>
 </header>
 <script>
-const toggle_mobile_menu = (burger, force) => {
+ const toggle_mobile_menu = (burger, force) => {
     const menu = document.querySelector('.page-menu');
 
-    burger.classList.toggle('burger--opened', force);
-    menu.classList.toggle('page-menu--opened', force);
-    document.body.classList.toggle('body-menu-opened', force);
-};
+    burger
+      .classList
+      .toggle('burger--opened', force);
+    menu
+      .classList
+      .toggle('page-menu--opened', force);
+    document
+      .body
+      .classList
+      .toggle('body-menu-opened', force);
+  };
 
-const init = () => {
+  const init = () => {
     const burger = document.querySelector('.burger');
+    const navLinkOnPage = document.querySelectorAll('a[href^="#"]');
 
     burger.addEventListener('click', () => toggle_mobile_menu(burger));
 
     const menu_items = document.querySelectorAll('.page-menu a');
     menu_items.forEach(item => {
-        item.addEventListener('click', () => toggle_mobile_menu(burger, false));
+      item.addEventListener('click', () => toggle_mobile_menu(burger, false));
+    });
+
+    navLinkOnPage.forEach((link) => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault()
+        const self = e.currentTarget;
+        const href = self.getAttribute('href');
+        if(href ==='#') return;
+
+        const targetElement = document.querySelector(href);
+        if (targetElement) {
+          const offsetTop = targetElement
+            .getBoundingClientRect()
+            .top + window.scrollY;
+          window.scrollTo({top: offsetTop, behavior: 'smooth'});
+        }
+      });
     });
-};
+  };
 
-document.addEventListener('DOMContentLoaded', init);
-</script>
+  document.addEventListener('DOMContentLoaded', init);
+</script>

backend/templates/pages/index/index.html

@@ -1,7 +1,7 @@
 {% extends "general/base.html" %}
 
 {% block title %}
-The territory of goodness shelter
+The territory of good shelter
 {% endblock %}
 
 {% block body %}

backend/templates/pages/index/sections/about_section.html

@@ -5,8 +5,8 @@
   <div class="container">
     {{ section_header(className="about-section__header", sup_title="Who Are We", title="About the shelter") }}
     <p class="about-section__text">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus convallis iaculis. Maecenas augue justo, mattis at felis quis, molestie fermentum magna. Ut mi ipsum, tempor in molestie ac, sollicitudin at ex. Sed mollis orci sed nulla vehicula, et malesuada diam condimentum. Nullam eu maximus magna. Quisque urna diam, sodales non dolor a, pharetra tempus arcu. Sed mauris lacus, maximus at velit vel, commodo luctus tortor.
+      We are raising funds to support animal welfare in and around Poti, Georgia. Sadly, this region is severely lacking in animal shelters and rescuers, leaving countless stray animals to fend for themselves in the streets. My husband and I started building the Territory of Good shelter from the ground up after bringing 15 strays from Ukraine. Our ever-growing shelter is supported only by our single income and the generosity of other animal lovers. Donated funds are used to build additional enclosures for our animals, pay for much-needed veterinary care, find forever homes for our animals, and cover the costs of essentials such as food, enrichment toys, and bedding. Every donation helps us improve the quality of life for animals in our community. We strive to save as many strays as we can — especially old, injured, or otherwise high-risk animals. Your donations help us care for animals recovering from abuse, neglect, and illness and give them a second chance at life.
     </p>
-    {{ video(src="https://www.youtube.com/embed/O7TBDSpzgD4", className="about-section__video") }}
+    {{ video(src="https://www.youtube.com/embed/BruIX11Qo1w?list=PLt75o-m3IfmyMXeqT7BpwB6x7GRrti9l5", title="Meet Irina, owner of Territory of Good animal shelter", className="about-section__video") }}
   </div>
 </section>

backend/templates/pages/index/sections/promo_section.html

@@ -2,18 +2,21 @@
   <div class="container promo-section__container">
     <div class="promo-section__content">
       <h1 class="promo-section__title">
-          Let's help pets
+        Stray animals shelter
       </h1>
       <p class="promo-section__subtitle">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        We're helping 53 stray dogs and 2 cats.
       </p>
       <div class="promo-section__btn-list">
-        <button class="button promo-section__btn-list-item" type="button">Adopt</button>
-        <button class="button button--secondary promo-section__btn-list-item" type="button">Help the shelter</button>
+        <button class="button promo-section__btn-list-item"
+          type="button">Adopt</button>
+        <button class="button button--secondary promo-section__btn-list-item"
+          type="button">Help the shelter</button>
       </div>
     </div>
     <div class="promo-section__accessory">
-        <img class="promo-section__accessory-img" src="/img/promo-section/promo-item-01.png" alt="">
+      <img class="promo-section__accessory-img"
+        src="/static/img/promo-section/promo-item-01.png" alt>
     </div>
   </div>
 </section>

backend/templates/ui/video_container.html

@@ -1,6 +1,6 @@
-{% macro video(src="", className="") %}
+{% macro video(src="", className="", title="") %}
 <div class="video-container {{className}}">
-    <iframe width="100%" height="100%" src="{{src}}" frameborder="0" allowfullscreen>
+    <iframe title="{{title}}" width="100%" height="100%" src="{{src}}" frameborder="0" allowfullscreen>
     </iframe>
 </div>
 {% endmacro %}

frontend/src/templates/general/footer.njk

@@ -12,7 +12,7 @@
           <img
             class="page-footer__pic"
             src="/upload/shelter.jpg"
-            alt="shelter The Territory of Goodness"
+            alt="shelter The territory of good"
           />
             <div class="page-footer__content">
               <p class="page-footer__text">

frontend/src/templates/general/header.njk

@@ -2,7 +2,7 @@
 
 {% from "ui/buttons.njk" import button %}
 
-{% set header_databag = { shelter_name: "Territory Of Goodness", menu_items: [{ title: "About", link: "#about" }, { title: "Contacts", link: "#contacts" }, { title: "Donations", link: "#" // пока поставил заглушку }, { title: "Adopted", link: "#adopted" }] } %}
+{% set header_databag = { shelter_name: "The territory of good", menu_items: [{ title: "About", link: "#about" }, { title: "Contacts", link: "#contacts" }, { title: "Donations", link: "#" // пока поставил заглушку }, { title: "Adopted", link: "#adopted" }] } %}
 <header class="page-header">
   <div class="page-header__in">
     <p class="page-header__logo">{{ header_databag.shelter_name }}</p>

frontend/src/templates/pages/index/index.njk

@@ -1,7 +1,7 @@
 {% extends "general/base.njk" %}
 
 {% block title %}
-The territory of goodness shelter
+The territory of good shelter
 {% endblock %}
 
 {% block body %}

frontend/src/templates/pages/index/sections/about_section.njk

@@ -5,8 +5,8 @@
   <div class="container">
     {{ section_header(className="about-section__header", sup_title="Who Are We", title="About the shelter") }}
     <p class="about-section__text">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus convallis iaculis. Maecenas augue justo, mattis at felis quis, molestie fermentum magna. Ut mi ipsum, tempor in molestie ac, sollicitudin at ex. Sed mollis orci sed nulla vehicula, et malesuada diam condimentum. Nullam eu maximus magna. Quisque urna diam, sodales non dolor a, pharetra tempus arcu. Sed mauris lacus, maximus at velit vel, commodo luctus tortor.
+      We are raising funds to support animal welfare in and around Poti, Georgia. Sadly, this region is severely lacking in animal shelters and rescuers, leaving countless stray animals to fend for themselves in the streets. My husband and I started building the Territory of Good shelter from the ground up after bringing 15 strays from Ukraine. Our ever-growing shelter is supported only by our single income and the generosity of other animal lovers. Donated funds are used to build additional enclosures for our animals, pay for much-needed veterinary care, find forever homes for our animals, and cover the costs of essentials such as food, enrichment toys, and bedding. Every donation helps us improve the quality of life for animals in our community. We strive to save as many strays as we can — especially old, injured, or otherwise high-risk animals. Your donations help us care for animals recovering from abuse, neglect, and illness and give them a second chance at life.
     </p>
-    {{ video(src="https://www.youtube.com/embed/O7TBDSpzgD4", className="about-section__video") }}
+    {{ video(src="https://www.youtube.com/embed/O7TBDSpzgD4", title="Meet Irina, owner of Territory of Good animal shelter", className="about-section__video") }}
   </div>
 </section>

frontend/src/templates/pages/index/sections/promo_section.njk

@@ -2,10 +2,10 @@
   <div class="container promo-section__container">
     <div class="promo-section__content">
       <h1 class="promo-section__title">
-          Let's help pets
+         Stray animals shelter
       </h1>
       <p class="promo-section__subtitle">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        We're helping 53 stray dogs and 2 cats.
       </p>
       <div class="promo-section__btn-list">
         <button class="button promo-section__btn-list-item" type="button">Adopt</button>

frontend/src/templates/ui/video_container.njk

@@ -1,6 +1,6 @@
-{% macro video(src="", className="") %}
+{% macro video(src="", title="", className="") %}
 <div class="video-container {{className}}">
-    <iframe width="100%" height="100%" src="{{src}}" frameborder="0" allowfullscreen>
+    <iframe title="" width="100%" height="100%" src="{{src}}" frameborder="0" allowfullscreen>
     </iframe>
 </div>
 {% endmacro %}

index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<title>The territory of goodness shelter</title>
+		<title>The territory of good shelter</title>
 		<link rel="stylesheet" href="./assets/normalize.css" />
 		<link rel="stylesheet" href="./assets/styles.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />