#72 add templates from frontend

qase-tms · Mar 10, 2024 · 976cfc9 · 976cfc9
1 parent 920ac23
commit 976cfc9
Show file tree

Hide file tree

Showing 27 changed files with 2,526 additions and 159 deletions.
diff --git a/backend/static/img/general/dog-paw-left.svg b/backend/static/img/general/dog-paw-left.svg
diff --git a/backend/static/img/general/dog-paw-right.svg b/backend/static/img/general/dog-paw-right.svg
diff --git a/backend/static/img/promo-section/promo-bg-desktop.png b/backend/static/img/promo-section/promo-bg-desktop.png
diff --git a/backend/static/img/promo-section/promo-item-01.png b/backend/static/img/promo-section/promo-item-01.png
diff --git a/backend/static/img/upload/animal-cards/card-01.jpg b/backend/static/img/upload/animal-cards/card-01.jpg
diff --git a/backend/static/img/upload/animal-cards/card-02.jpg b/backend/static/img/upload/animal-cards/card-02.jpg
diff --git a/backend/static/img/upload/animal-cards/card-03.jpg b/backend/static/img/upload/animal-cards/card-03.jpg
diff --git a/backend/static/img/upload/animal-cards/card-04.jpg b/backend/static/img/upload/animal-cards/card-04.jpg
diff --git a/backend/static/img/upload/animal-cards/card-05.jpg b/backend/static/img/upload/animal-cards/card-05.jpg
diff --git a/backend/static/img/upload/animal-cards/card-06.jpg b/backend/static/img/upload/animal-cards/card-06.jpg
diff --git a/backend/static/img/upload/shelter.jpg b/backend/static/img/upload/shelter.jpg
diff --git a/backend/static/img/upload/test.webp b/backend/static/img/upload/test.webp
diff --git a/backend/static/styles.css b/backend/static/styles.css
diff --git a/backend/templates/general/base.html b/backend/templates/general/base.html
@@ -1,14 +1,23 @@
 <!DOCTYPE html>
 <html>
 	<head>
-        <title>{% block title %}{% endblock %}</title>
-<!--	<title>The territory of goodness shelter</title>-->
+    <title>{% block title %}{% endblock %}</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link href="{{ url_for('static', path='/normalize.css') }}" rel="stylesheet">
-        <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
-        {% include "general/init_hotjar.html" %}
+    <link href="{{ url_for('static', path='/normalize.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
+    {% include "general/init_hotjar.html" %}
 	</head>
-    <body>
+  <body>
+    <div class="page">
+      <div class="page__header">
+        {% include "general/header.html" %}
+      </div>
+      <div class="page__content">
         {% block body %}{% endblock %}
-    </body>
-</html>
+      </div>
+      <div class="page__footer">
+        {% include "general/footer.html" with context %}
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/backend/templates/general/footer.html b/backend/templates/general/footer.html
@@ -0,0 +1,55 @@
+{% from "ui/icon.html" import icon with context %}
+
+{% 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': '[email protected]' } %}
+<footer class="page-footer">
+  <div class="container">
+    <p class="page-footer__text">{{footer_databag}}</p>
+    <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="/upload/shelter.jpg"
+            alt="shelter The Territory of Goodness"
+          />
+            <div class="page-footer__content">
+              <p class="page-footer__text">
+                  For any questions regarding the shelter, please write to us. We'd love to hear your feedback at
+              </p>
+
+              <ul class="page-footer__contact-list">
+                <li class="contact-row">
+                  {{ icon(type='phone', color='secondary-inverse', size='m', className="contact-row__icon")}}
+                  <div class="contact-row__content">
+                    <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>
+
+                <li class="contact-row">
+                  {{ icon(type='pin', color='secondary-inverse', size='m', className="contact-row__icon")}}
+                  <div class="contact-row__content">{{ footer_databag.location }}</div>
+                </li>
+
+                <li class="contact-row">
+                  {{ icon(type='email', color='secondary-inverse', size='m', className='contact-row__icon')}}
+                  <div class="contact-row__content">
+                    <a class="contact-row__link" href="{{ 'mailto:' ~ footer_databag.email }}">
+                      {{ footer_databag.email }}
+                    </a>
+                  </div>
+                </li>
+              </ul>
+              <button class="button" type="button">Donate</button>
+          </div>
+        </div>
+    </div>
+  </div>
+</footer>
diff --git a/backend/templates/general/header.html b/backend/templates/general/header.html
@@ -0,0 +1,52 @@
+
+{% 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" }] } %}
+<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 %}
+        <li class="page-menu__item">
+            <a class="page-menu__link" href="{{ item.link }}">{{ item.title }}</a>
+        </li>
+      {% endfor %}
+
+
+{{ button("Donate", { "size": "s", "icon": 'donate' }) }}
+
+
+    </ul>
+
+    <button class="burger">
+        <span class="burger__dash"></span>
+        <span class="burger__dash"></span>
+        <span class="burger__dash"></span>
+    </button>
+  </div>
+</header>
+<script>
+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);
+};
+
+const init = () => {
+    const burger = document.querySelector('.burger');
+
+    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));
+    });
+};
+
+document.addEventListener('DOMContentLoaded', init);
+</script>
diff --git a/backend/templates/pages/index/index.html b/backend/templates/pages/index/index.html
@@ -5,10 +5,8 @@
 {% endblock %}
 
 {% block body %}
-<div class="page">
-    {% include "pages/index/sections/header_section.html" %}
-    {% include "pages/index/sections/main_section.html" %}
-    {% include "pages/index/sections/donate_section.html" %}
-    {% include "pages/index/sections/gallery_section.html" %}
-</div>
+{% include "pages/index/sections/promo_section.html" %}
+{% include "pages/index/sections/about_section.html" %}
+{% include "pages/index/sections/statistic_section.html" %}
+{% include "pages/index/sections/animals_section.html" %}
 {% endblock %}
diff --git a/backend/templates/pages/index/sections/about_section.html b/backend/templates/pages/index/sections/about_section.html
@@ -0,0 +1,12 @@
+{% from  "ui/video_container.html" import video with context %}
+{% from  "ui/section_header.html" import section_header with context %}
+
+<section class="about-section">
+  <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.
+    </p>
+    {{ video(src="https://www.youtube.com/embed/O7TBDSpzgD4", className="about-section__video") }}
+  </div>
+</section>
diff --git a/backend/templates/pages/index/sections/animals_section.html b/backend/templates/pages/index/sections/animals_section.html
@@ -0,0 +1,195 @@
+{% from  "ui/section_header.html" import section_header with context %}
+{% from "ui/animal_card.html" import animal_card %}
+{% set cards = [
+  { 
+    'link': '#',
+    'type': 'dogs',
+    'img_src': '/upload/animal-cards/card-01.jpg',
+    'name': 'Spot',
+    'sex': 'Male',
+    'age': '18 months',
+    'size': 'Large'
+  },
+  { 
+    'link': '#',
+    'type': 'dogs',
+    'img_src': '/upload/animal-cards/card-02.jpg',
+    'name': 'Shaggy',
+    'sex': 'Male',
+    'age': '8 years',
+    'size': 'Large'
+  },
+  {
+    'link': '#',
+    'type': 'dogs',
+    'img_src': '/upload/animal-cards/card-03.jpg',
+    'name': 'Ulybashka',
+    'sex': 'Female',
+    'age': '1 year',
+    'size': 'Medium'
+  }, 
+  {
+    'link': '#',
+    'type': 'dogs',
+    'img_src': '/upload/animal-cards/card-04.jpg',
+    'name': 'Boy',
+    'sex': 'Male',
+    'age': '2 years',
+    'size': 'Medium'
+  },
+  { 
+    'link': '#',
+    'type': 'dogs',
+    'img_src': '/upload/animal-cards/card-05.jpg',
+    'name': 'Betty',
+    'sex': 'Feale',
+    'age': '2 years',
+    'size': 'Large'
+  },
+  { 
+    'link': '#',
+    'type': 'dogs',
+    'img_src': '/upload/animal-cards/card-01.jpg',
+    'name': 'Spot',
+    'sex': 'Male',
+    'age': '18 months',
+    'size': 'Large'
+  },
+  { 
+    'link': '#',
+    'type': 'dogs',
+    'img_src': '/upload/animal-cards/card-03.jpg',
+    'name': 'Ulybashka',
+    'sex': 'Female',
+    'age': '1 year',
+    'size': 'Medium'
+  },
+  { 
+    'link': '#',
+    'type': 'dogs',
+    'img_src': '/upload/animal-cards/card-02.jpg',
+    'name': 'Shaggypot',
+    'sex': 'Male',
+    'age': '8 years',
+    'size': 'Large'
+  },
+  { 
+    'link': '#',
+    'type': 'dogs',
+    'img_src': '/upload/animal-cards/card-04.jpg',
+    'name': 'Boy',
+    'sex': 'Male',
+    'age': '2 years',
+    'size': 'Medium'
+  },
+  {
+    'link': '#',
+    'type': 'cats',
+    'img_src': '/upload/animal-cards/card-06.jpg',
+    'name': 'Basil',
+    'sex': 'Male',
+    'age': '1 years',
+    'size': 'Medium'
+  }
+] %}
+<section class="animals-section" id="adopted">
+  <div class="container animals-section__container">
+    <div class="animals-section__content">
+      {{ section_header(className="animals-section__title", title="Adopt a Pet", align_prop_title='right') }}
+      <ul class="animals-section__filter-list filter">
+        <li class="filter__item">
+          <a class="filter__link" href="#">
+            All
+          </a>
+        </li>
+        <li class="filter__item">
+          <a class="filter__link" href="#">
+            Dogs
+          </a>
+        </li>
+        <li class="filter__item">
+          <a class="filter__link" href="#">
+            Cats
+          </a>
+        </li>
+      </ul>
+      <ul class="animals-section__card-list animal-card-list">
+        {% for card in cards %}
+          {{ animal_card({    
+                          'type': card.type,
+                          'name': card.name,
+                          'sex': card.sex,
+                          'age': card.age,
+                          'size': card.size,
+                          'img_src': card.img_src,
+                          'img_alt': card.name},'animal-card-list__item') }}
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+  <script>
+    /*
+      animateStyleElement универсальная функция для изменения стилей элемента
+      element - элемент документа;
+      styles - объект, где key это название свойства в CamelCase нотации,а
+      value это нужное значение;
+      delay - задержка для setTimeout, если delay === undefined,
+      то изменения стилей запускается без setTimeout. */
+    const animateStyleElement = (element, styles, delay) => {
+      if (!delay) {
+        for (const [key, value] of Object.entries(styles)) {
+          element.style[key] = value;
+        }
+        return;
+      }
+      setTimeout(() => {
+        for (const [key, value] of Object.entries(styles)) {
+          element.style[key] = value;
+        }
+      }, delay);
+    };
+    const handlerAnimalFilter = () => {
+      let currentFilter = 'all';
+      const filter = document.querySelector('.animals-section .filter');
+      const animalCardList = document.querySelectorAll('.animals-section .animal-card-list__item')
+      filter.addEventListener('click', (e) => {
+        e.preventDefault();
+        const self = e.target;
+        const filterName = self.closest('.filter__link')
+          ? self
+            .textContent
+            .toLowerCase()
+            .trim()
+          : null;
+        if (filterName && filterName !== currentFilter) {
+          currentFilter = filterName;
+          animalCardList.forEach((card) => {
+            const cardType = card.dataset.animalType;
+            if (currentFilter === 'all') {
+              animateStyleElement(card, {display: 'block'});
+              animateStyleElement(card, {
+                opacity: 1
+              }, 100);
+              return
+            }
+            if (currentFilter === cardType) {
+              animateStyleElement(card, {display: 'block'});
+              animateStyleElement(card, {
+                opacity: 1
+              }, 100);
+              return
+            }
+            if (currentFilter !== cardType) {
+              animateStyleElement(card, {opacity: 0});
+              animateStyleElement(card, {
+                display: 'none'
+              }, 100);
+              return
+            }
+          })
+        }
+      })
+    };
+    handlerAnimalFilter()
+  </script>
+</section>
diff --git a/backend/templates/pages/index/sections/contacts_section.html b/backend/templates/pages/index/sections/contacts_section.html
@@ -0,0 +1,5 @@
+<section class="contacts-section">
+  <div class="container">
+    contacts section
+  </div>
+</section>
diff --git a/backend/templates/pages/index/sections/promo_section.html b/backend/templates/pages/index/sections/promo_section.html
@@ -0,0 +1,19 @@
+<section class="promo-section">
+  <div class="container promo-section__container">
+    <div class="promo-section__content">
+      <h1 class="promo-section__title">
+          Let's help pets
+      </h1>
+      <p class="promo-section__subtitle">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </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>
+      </div>
+    </div>
+    <div class="promo-section__accessory">
+        <img class="promo-section__accessory-img" src="/img/promo-section/promo-item-01.png" alt="">
+    </div>
+  </div>
+</section>