goitacademy · exigibil · Oct 30, 2023 · Oct 30, 2023 · Oct 31, 2023 · Oct 31, 2023
diff --git a/.parcelrc b/.parcelrc
@@ -7,3 +7,4 @@
     "parcel-reporter-clean-dist"
   ]
 }
+
diff --git a/assets/test b/assets/test
@@ -0,0 +1,8 @@
+Victor Prisacariu Test
+Topa Adrian Test
+Molnar Aczel Zsuzsanna
+Stefoi Iosif
+Matis Daria
+Cristina Macicasan
+Manea Maria
+Gheorghe Anca 
diff --git a/assets/victor b/assets/victor
@@ -0,0 +1 @@
+Victor a testat ceva.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,10 +2,10 @@
   "name": "parcel-project-template",
   "version": "2.0.0",
   "description": "",
-  "homepage": "https://goitacademy.github.io/parcel-project-template",
+  "homepage": "https://exigibil.github.io/parcel-project-team8/",
   "scripts": {
     "start": "parcel src/*.html",
-    "build": "parcel build src/*.html --public-url /parcel-project-template/"
+    "build": "parcel build src/*.html --public-url /parcel-project-team8/"
   },
   "repository": {
     "type": "git",
@@ -18,6 +18,7 @@
     "url": "https://github.com/goitacademy/parcel-project-template/issues"
   },
   "dependencies": {
+    "body-scroll-lock": "^4.0.0-beta.0",
     "modern-normalize": "^1.1.0"
   },
   "devDependencies": {

diff --git a/src/carousel.js b/src/carousel.js
@@ -0,0 +1,64 @@
+$(function () {
+  new Slider({
+    images: '.slider-1 img',
+    btnPrev: '.slider-1 .buttons .prev',
+    btnNext: '.slider-1 .buttons .next',
+    auto: false,
+  });
+
+  new Slider({
+    images: '.slider-2 img',
+    btnPrev: '.slider-2 .buttons .prev',
+    btnNext: '.slider-2 .buttons .next',
+    auto: true,
+    rate: 2000,
+  });
+});
+
+function Slider(obj) {
+  this.images = $(obj.images);
+  this.auto = obj.auto;
+  this.btnPrev = obj.btnPrev;
+  this.btnNext = obj.btnNext;
+  this.rate = obj.rate || 1000;
+
+  var i = 0;
+  var slider = this;
+
+  // The "Previous" button: to remove the class .shown, to show the previous image and to add the .shown class
+  this.prev = function () {
+    slider.images.eq(i).removeClass('shown');
+    i--;
+
+    if (i < 0) {
+      i = slider.images.length - 1;
+    }
+
+    slider.images.eq(i).addClass('shown');
+  };
+
+  // The "Next" button: to remove the class .shown, to show the next image and to add the .shown class
+  this.next = function () {
+    slider.images.eq(i).removeClass('shown');
+    i++;
+
+    if (i >= slider.images.length) {
+      i = 0;
+    }
+
+    slider.images.eq(i).addClass('shown');
+  };
+
+  // To add next and prev functions when clicking on the corresponding buttons
+  $(slider.btnPrev).on('click', function () {
+    slider.prev();
+  });
+  $(slider.btnNext).on('click', function () {
+    slider.next();
+  });
+
+  // For the automatic slider: this method calls the next function at the set rate
+  if (slider.auto) {
+    setInterval(slider.next, slider.rate);
+  }
+}
diff --git a/src/icons.svg b/src/icons.svg
diff --git a/src/images/Rectangle 8.png b/src/images/Rectangle 8.png
diff --git a/src/images/Rectangle 9.png b/src/images/Rectangle 9.png
diff --git a/src/images/arm-watches_d.png b/src/images/arm-watches_d.png
diff --git a/src/images/arm-watches_m.png b/src/images/arm-watches_m.png
diff --git a/src/images/arm-watches_t.png b/src/images/arm-watches_t.png
diff --git a/src/images/armani-exchange-watch.jpg b/src/images/armani-exchange-watch.jpg
diff --git a/src/images/avondale-watch.jpg b/src/images/avondale-watch.jpg
diff --git a/src/images/big-plan.png b/src/images/big-plan.png
diff --git a/src/images/catalog-2.png b/src/images/catalog-2.png
diff --git a/src/images/catalog-3.png b/src/images/catalog-3.png
diff --git a/src/images/catalog-4.png b/src/images/catalog-4.png
diff --git a/src/images/catalog-5.png b/src/images/catalog-5.png
diff --git a/src/images/catalog-6.png b/src/images/catalog-6.png
diff --git a/src/images/catalog-7.png b/src/images/catalog-7.png
diff --git a/src/images/catalog-8.png b/src/images/catalog-8.png
diff --git a/src/images/catalog-9.png b/src/images/catalog-9.png
diff --git a/src/images/citizen-watch.jpg b/src/images/citizen-watch.jpg
diff --git a/src/images/diver-300m-co-axial.jpg b/src/images/diver-300m-co-axial.jpg
diff --git a/src/images/diver-300m-master.jpg b/src/images/diver-300m-master.jpg
diff --git a/src/images/diver-300m.jpg b/src/images/diver-300m.jpg
diff --git a/src/images/diver-master-watch.jpg b/src/images/diver-master-watch.jpg
diff --git a/src/images/editorconfig.png b/src/images/editorconfig.png
diff --git a/src/images/green-watch.png b/src/images/green-watch.png
diff --git a/src/images/greenlane-watch.jpg b/src/images/greenlane-watch.jpg
diff --git a/src/images/hand-green-desktop-2x.jpg b/src/images/hand-green-desktop-2x.jpg
diff --git a/src/images/hand-green-desktop.jpg b/src/images/hand-green-desktop.jpg
diff --git a/src/images/hand-green-mobile-2x.jpg b/src/images/hand-green-mobile-2x.jpg
diff --git a/src/images/hand-green-mobile.jpg b/src/images/hand-green-mobile.jpg
diff --git a/src/images/hand-green-table-2x.jpg b/src/images/hand-green-table-2x.jpg
diff --git a/src/images/hand-green-tableta.jpg b/src/images/hand-green-tableta.jpg
diff --git a/src/images/image 64.jpg b/src/images/image 64.jpg
diff --git a/src/images/image 65.jpg b/src/images/image 65.jpg
diff --git a/src/images/image 65.svg b/src/images/image 65.svg
diff --git a/src/images/image 66.jpg b/src/images/image 66.jpg
diff --git a/src/images/image 66.svg b/src/images/image 66.svg
diff --git a/src/images/image 67-big.jpg b/src/images/image 67-big.jpg
diff --git a/src/images/image 67.jpg b/src/images/image 67.jpg
diff --git a/src/images/image 67.svg b/src/images/image 67.svg
diff --git a/src/images/malawi-watch.jpg b/src/images/malawi-watch.jpg
diff --git a/src/images/man-s-hand.png b/src/images/man-s-hand.png
diff --git a/src/images/minus.png b/src/images/minus.png
diff --git a/src/images/modalwatch.png b/src/images/modalwatch.png
diff --git a/src/images/nou-catalog.png b/src/images/nou-catalog.png
diff --git a/src/images/omaega-watch.png b/src/images/omaega-watch.png
diff --git a/src/images/omega-black-watch.png b/src/images/omega-black-watch.png
diff --git a/src/images/omega-blau-watch.png b/src/images/omega-blau-watch.png
diff --git a/src/images/representation-1.png b/src/images/representation-1.png
diff --git a/src/images/representation-1.svg b/src/images/representation-1.svg
diff --git a/src/images/representation-2.png b/src/images/representation-2.png
diff --git a/src/images/representation-3.png b/src/images/representation-3.png
diff --git a/src/images/representation-4.png b/src/images/representation-4.png
diff --git a/src/images/squardrc-watch.jpg b/src/images/squardrc-watch.jpg
diff --git a/src/images/taman-watch.jpg b/src/images/taman-watch.jpg
diff --git a/src/images/team8svg.svg b/src/images/team8svg.svg
diff --git a/src/images/timex-watch.png b/src/images/timex-watch.png
diff --git a/src/images/tube-watch.jpg b/src/images/tube-watch.jpg
diff --git a/src/images/watch--green-mobile-2x.jpg b/src/images/watch--green-mobile-2x.jpg
diff --git a/src/images/watch-green-desktop-2x.jpg b/src/images/watch-green-desktop-2x.jpg
diff --git a/src/images/watch-green-desktop.jpg b/src/images/watch-green-desktop.jpg
diff --git a/src/images/watch-green-mobile.jpg b/src/images/watch-green-mobile.jpg
diff --git a/src/images/watch-green-tablet-2x.jpg b/src/images/watch-green-tablet-2x.jpg
diff --git a/src/images/watch-green-tableta.jpg b/src/images/watch-green-tableta.jpg
diff --git a/src/images/watch.gif b/src/images/watch.gif
diff --git a/src/images/withe-img.png b/src/images/withe-img.png
diff --git a/src/index.html b/src/index.html
@@ -1,14 +1,54 @@
 <!DOCTYPE html>
-<html lang="ru">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Page title</title>
+    <title>The Watch Spot</title>
+    <meta name="description" content="Discover a wide range of high-quality watches at The Watch Spot. Explore our collection, learn about us, and enjoy exclusive sales.">
+
+    <meta property="og:title" content="The Watch Spot - Finest Watches Online">
+    <meta property="og:description" content="Discover a wide range of high-quality watches at The Watch Spot. Explore our collection, learn about us, and enjoy exclusive sales.">
+    <meta property="og:url" content="https://exigibil.github.io/parcel-project-team8/">
+    <meta name="twitter:title" content="The Watch Spot - Finest Watches Online">
+    <meta name="twitter:description" content="Discover a wide range of high-quality watches at The Watch Spot. Explore our collection, learn about us, and enjoy exclusive sales.">
+    <meta name="twitter:card" content="summary_large_image">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Epilogue:wght@300;600&family=Open+Sans:wght@400;600&family=Raleway:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css"
+    />
+
     <link rel="stylesheet" href="./sass/index.scss" />
+    <link rel="stylesheet" href="./sass/_about-us.scss" />
+    <link rel="stylesheet" href="./sass/_navbar.scss" />
     <script type="module" src="./index.js"></script>
   </head>
+
   <body>
-    <!-- ❗️❗️❗️ Add partials like so for every page -->
-    <include src="./partials/example.html"></include>
+    <include src="./partials/navbar.html"></include>
+    <include src="./partials/welcom.html"></include>
+    <include src="./partials/about-us.html"></include>
+    <include src="partials/catalog-section-2.html"></include>
+    <include src="./partials/green-sale.html"></include>
+    <include src="./partials/footer.html"></include>
+
+
+    <script
+      defer
+      src="https://cdnjs.cloudflare.com/ajax/libs/body-scroll-lock/3.1.5/bodyScrollLock.min.js"
+      integrity="sha512-HowizSDbQl7UPEAsPnvJHlQsnBmU2YMrv7KkTBulTLEGz9chfBoWYyZJL+MUO6p/yBuuMO/8jI7O29YRZ2uBlA=="
+      crossorigin="anonymous"
+    ></script>
+    <script src="/src/mobile-menu.js"></script>
+    <script src="/src/modal.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+    <script defer src="./carousel.js"></script>
+    <script defer src="./newcarrousel.js"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,21 @@
+
+let currentSlide = 0;
+const slides = document.querySelectorAll(".image");
+const imageCountElement = document.getElementById("imageCount");
+
+function showSlide(index) {
+    slides[currentSlide].style.transform = "translateX(-100%)";
+    currentSlide = (index + slides.length) % slides.length;
+    slides[currentSlide].style.transform = "translateX(0)";
+    updateIndicator();
+}
+
+function updateIndicator() {
+    imageCountElement.textContent = `Imagine ${currentSlide + 1} din ${slides.length}`;
+}
+
+function plusSlides(n) {
+    showSlide(currentSlide + n);
+}
+
+updateIndicator();