Merge pull request #73 from Valik3201/feature/swiper-with-charity-fou…

…ndations

Feature/swiper with charity foundations

src/index.html

@@ -27,7 +27,7 @@
     <main>
       <div class="home">
         <include src="./partials/home/home-categories.html"></include>
-        <include src="./partials/home/home-foundation-slider.html"></include>
+        <include src="./partials/slider/foundation-slider.html"></include>
         <include src="./partials/home/home-top-books.html"></include>
         <include src="./partials/home/home-books-by-categories.html"></include>
       </div>

src/js/charityData.js

@@ -1,49 +1,92 @@
-const charityData = [
+export const charityData = [
   {
     title: 'Save the Children',
     url: 'https://www.savethechildren.net/what-we-do/emergencies/ukraine-crisis',
-    img: null,
+    imgUrl: {
+      img: new URL('/src/images/save-children.png', import.meta.url).href,
+      img1x: new URL('/src/images/save-children2x.png', import.meta.url).href,
+      img2x: new URL('/src/images/save-children3x.png', import.meta.url).href,
+      img3x: new URL('/src/images/save-children4x.png', import.meta.url).href,
+    },
   },
   {
     title: 'Project HOPE',
     url: 'https://www.projecthope.org/country/ukraine/',
-    img: null,
+    imgUrl: {
+      img: new URL('/src/images/project-hope.png', import.meta.url).href,
+      img1x: new URL('/src/images/project-hope2x.png', import.meta.url).href,
+      img2x: new URL('/src/images/project-hope3x.png', import.meta.url).href,
+      img3x: new URL('/src/images/project-hope4x.png', import.meta.url).href,
+    },
   },
   {
     title: 'UNITED24',
     url: 'https://u24.gov.ua/uk',
-    img: null,
+    imgUrl: {
+      img: new URL('/src/images/united24.png', import.meta.url).href,
+      img1x: new URL('/src/images/united242x.png', import.meta.url).href,
+      img2x: new URL('/src/images/united243x.png', import.meta.url).href,
+      img3x: new URL('/src/images/united244x.png', import.meta.url).href,
+    },
   },
   {
     title: 'International Medical Corps',
     url: 'https://internationalmedicalcorps.org/country/ukraine/',
-    img: null,
+    imgUrl: {
+      img: new URL('/src/images/medical-corps.png', import.meta.url).href,
+      img1x: new URL('/src/images/medical-corps2x.png', import.meta.url).href,
+      img2x: new URL('/src/images/medical-corps3x.png', import.meta.url).href,
+      img3x: new URL('/src/images/medical-corps4x.png', import.meta.url).href,
+    },
   },
   {
     title: 'Medicins Sans Frontieres',
     url: 'https://www.msf.org/ukraine',
-    img: null,
+    imgUrl: {
+      img: new URL('/src/images/msf.png', import.meta.url).href,
+      img1x: new URL('/src/images/msf2x.png', import.meta.url).href,
+      img2x: new URL('/src/images/msf3x.png', import.meta.url).href,
+      img3x: new URL('/src/images/msf4x.png', import.meta.url).href,
+    },
   },
   {
     title: 'RAZOM',
     url: 'https://www.razomforukraine.org/',
-    img: null,
+    imgUrl: {
+      img: new URL('/src/images/razom.png', import.meta.url).href,
+      img1x: new URL('/src/images/razom2x.png', import.meta.url).href,
+      img2x: new URL('/src/images/razom3x.png', import.meta.url).href,
+      img3x: new URL('/src/images/razom4x.png', import.meta.url).href,
+    },
   },
   {
     title: 'Action against hunger',
     url: 'https://www.actionagainsthunger.org/location/europe/ukraine/',
-    img: null,
+    imgUrl: {
+      img: new URL('/src/images/against-hunger.png', import.meta.url).href,
+      img1x: new URL('/src/images/against-hunger2x.png', import.meta.url).href,
+      img2x: new URL('/src/images/against-hunger3x.png', import.meta.url).href,
+      img3x: new URL('/src/images/against-hunger4x.png', import.meta.url).href,
+    },
   },
   {
     title: 'World vision',
     url: 'https://www.wvi.org/emergencies/ukraine',
-    img: null,
+    imgUrl: {
+      img: new URL('/src/images/world-vision.png', import.meta.url).href,
+      img1x: new URL('/src/images/world-vision2x.png', import.meta.url).href,
+      img2x: new URL('/src/images/world-vision3x.png', import.meta.url).href,
+      img3x: new URL('/src/images/world-vision4x.png', import.meta.url).href,
+    },
   },
   {
     title: 'Serhiy Prytula Charity Foundation',
     url: 'https://prytulafoundation.org/en',
-    img: null,
+    imgUrl: {
+      img: new URL('/src/images/sergiy-prytula.png', import.meta.url).href,
+      img1x: new URL('/src/images/sergiy-prytula2x.png', import.meta.url).href,
+      img2x: new URL('/src/images/sergiy-prytula3x.png', import.meta.url).href,
+      img3x: new URL('/src/images/sergiy-prytula4x.png', import.meta.url).href,
+    },
   },
 ];
-
-export default charityData;

src/js/charitySwiper.js

@@ -0,0 +1,58 @@
+// import Swiper JS
+import Swiper from 'swiper';
+import { Navigation } from 'swiper/modules';
+// import Swiper styles
+import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
+
+import { charityData } from './charityData.js';
+
+Swiper.use([Navigation]);
+
+const isMobile = window.innerWidth < 768;
+const slidesPerView = isMobile ? 4 : 6;
+
+const swiper = new Swiper('.swiper-container', {
+  direction: 'vertical',
+  loop: false,
+  slidesPerView: slidesPerView,
+  spaceBetween: 20,
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+});
+
+// Заполните слайды вашими данными
+const foundationList = document.querySelector('.swiper-wrapper');
+
+charityData.forEach(function (item, index) {
+  var slideNumber = (index + 1).toString().padStart(2, '0');
+  var imgSrc = item.imgUrl.img;
+  var imgSrcset = `
+    ${item.imgUrl.img} 1x,
+    ${item.imgUrl.img1x} 2x,
+    ${item.imgUrl.img2x} 3x
+  `;
+
+  var slideHTML = `
+    <div class="swiper-slide">
+      <div class="swiper-slide-number">${slideNumber}</div>
+      <a href="${item.url}" target="_blank">
+        <img src="${imgSrc}" srcset="${imgSrcset}" alt="${item.title}">
+      </a>
+    </div>
+  `;
+
+  foundationList.insertAdjacentHTML('beforeend', slideHTML);
+});
+
+swiper.on('reachEnd', function () {
+  document.querySelector('.swiper-button-next').style.display = 'none';
+  document.querySelector('.swiper-button-prev').style.display = 'block';
+});
+
+swiper.on('reachBeginning', function () {
+  document.querySelector('.swiper-button-prev').style.display = 'none';
+  document.querySelector('.swiper-button-next').style.display = 'block';
+});

src/js/common.js

@@ -1,9 +1,9 @@
 import './charityData.js';
+import './charitySwiper.js';
 import './mobileMenu.js';
 import './darkMode.js';
 import './auth.js';
 import './scrollUp.js';
 
 import 'lazysizes';
 import 'lazysizes/plugins/attrchange/ls.attrchange';
-

src/partials/slider/foundation-slider.html

@@ -0,0 +1,15 @@
+<div class="foundation-list">
+  <div class="swiper-header">
+    <h2>Support Ukraine</h2>
+    <svg class="ukraine-icon" width="20" height="32" fill="currentColor">
+      <use href="/src/images/icons.svg#icon-support"></use>
+    </svg>
+  </div>
+
+  <div class="swiper-container">
+    <div class="swiper-wrapper"></div>
+
+    <div class="swiper-button-next"></div>
+    <div class="swiper-button-prev"></div>
+  </div>
+</div>

src/shopping-list.html

@@ -23,7 +23,10 @@
     <include src="./partials/shopping-list/shopping-list-header.html"></include>
 
     <main>
-      <include src="./partials/shopping-list/shopping-list-main.html"></include>
+      <div class="shopping-list">
+        <include src="./partials/slider/foundation-slider.html"></include>
+        <div><include src="./partials/shopping-list/shopping-list-main.html"></include></div>
+      </div>
     </main>
 
     <button id="scrollUp">

src/style/css/style.css

@@ -2,9 +2,7 @@
 
 @media (max-width: 767px) {
   .heading {
-    margin-top: 40px;
     margin-bottom: 40px;
-    margin-left: 20px;
     font-size: 48px;
     color: #111;
     letter-spacing: -1.92px;
@@ -25,38 +23,36 @@
 .icon-trash {
   fill: #4f2ee8;
   stroke: #fff;
-  width: 25px;
-  height: 25px;
-  padding: 5px;
-  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  padding: 6px;
+  border-radius: 50px;
   background-color: #4f2ee8;
 }
 
 .books-card-img {
   width: 100px;
   height: 142px;
-  padding: 5px 10px;
-  margin-top: 10px;
-  border-radius: 16px;
+  margin: 5px 10px;
+  border-radius: 8px;
 }
 .button-delete {
   float: right;
-  margin: 15px;
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  border-color: #4f2ee8;
-  background-color: #4f2ee8;
+  width: 34px;
+  height: 34px;
+  border-radius: 50px;
+  border-color: transparent;
+  background-color: transparent;
 }
 .book-card {
   display: flex;
-  bottom: 200px;
-  margin: 14px;
+  margin-bottom: 14px;
   gap: 10px;
   border-radius: 16px;
   border: 2px solid rgba(79, 46, 232, 0.4);
   background: #fff;
   max-width: 100%;
+  padding: 14px;
 }
 
 .book-description {
@@ -71,6 +67,10 @@
   color: #b4afaf;
   font-family: DM Sans;
   font-size: 12px;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .book-title {
@@ -82,6 +82,10 @@
   letter-spacing: -0.64px;
   text-transform: uppercase;
   font-weight: 700;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .book-plot {
@@ -149,8 +153,6 @@
 
 @media (min-width: 768px) and (max-width: 1023px) {
   .heading {
-    margin-top: 40px;
-    margin-left: 32px;
     color: #111;
     font-size: 48px;
     margin-bottom: 40px;
@@ -200,11 +202,10 @@
   .icon-trash {
     fill: #4f2ee8;
     stroke: #fff;
-    width: 25px;
-    height: 25px;
-    padding: 5px;
-    border-radius: 50%;
-    background-color: #4f2ee8;
+    width: 34px;
+    height: 34px;
+    padding: 8px;
+    border-radius: 50px;
   }
 
   .book-card-icons {
@@ -281,12 +282,10 @@
   }
 
   .heading {
-    margin-top: 40px;
     margin-bottom: 40px;
-    margin-left: 40px;
     font-size: 48px;
     color: #111;
-    letter-spacing: -1.92px;
+    letter-spacing: -0.92px;
   }
 
   .heading-span {