dotmob/script.js at main · dotsic/dotmob · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
//                                                    | |       | |       (_)
//                                                  __| |  ___  | |_  ___  _   ___
//                                                 / _` | / _ \ | __|/ __|| | / __|
//                                              _ | (_| || (_) || |_ \__ \| || (__
//                                             (_) \__,_| \___/  \__||___/|_| \___|
document.addEventListener('DOMContentLoaded', () => {
  const navLinks = document.querySelectorAll('.nav-link');
  const tabPanes = document.querySelectorAll('.tab-pane');
  const menuToggleBtn = document.getElementById('menu-toggle');
  const overlayMenu = document.getElementById('overlay-menu');
  const overlayAbout = document.getElementById('overlay-about');
  const topLeftBtn = document.getElementById('top-left-btn');


  menuToggleBtn.addEventListener('click', () => {
    menuToggleBtn.classList.toggle('open');
    overlayMenu.classList.toggle('active');
  });

  function navigateTo(targetStr) {

    navLinks.forEach(nav => {
      if (nav.getAttribute('data-target') === targetStr) {
        nav.classList.add('active');
      } else {
        nav.classList.remove('active');
      }
    });


    tabPanes.forEach(pane => {
      pane.classList.remove('active');
      pane.classList.remove('fade-in');
    });


    const paneToShow = document.getElementById(targetStr);
    if (paneToShow) {
      paneToShow.classList.add('active');
      setTimeout(() => {
        paneToShow.classList.add('fade-in');
      }, 20);
    }


    if (targetStr === 'home') {
      topLeftBtn.innerText = 'ABOUT';
    } else {
      topLeftBtn.innerText = 'BACK';
    }


    if (targetStr === 'drops') {
      menuToggleBtn.style.display = 'none';
    } else {
      menuToggleBtn.style.display = 'flex';
    }


    menuToggleBtn.classList.remove('open');
    overlayMenu.classList.remove('active');
    overlayAbout.classList.remove('active');
  }

  navLinks.forEach(link => {
    link.addEventListener('click', () => {
      const targetTab = link.getAttribute('data-target');
      navigateTo(targetTab);
    });
  });


  topLeftBtn.addEventListener('click', () => {
     if (topLeftBtn.innerText === 'BACK') {
         navigateTo('home');
     } else if (topLeftBtn.innerText === 'ABOUT') {
         overlayAbout.classList.toggle('active');
         if (overlayAbout.classList.contains('active')) {
           menuToggleBtn.style.display = 'none';
         } else {
           menuToggleBtn.style.display = 'flex';
         }
     }
  });

  if (overlayAbout) {
    overlayAbout.addEventListener('click', () => {
      overlayAbout.classList.remove('active');
      menuToggleBtn.style.display = 'flex';
    });
  }

  const productImg = document.getElementById('product-main-img');
  const nextImgBtn = document.getElementById('next-img-btn');
  const prevImgBtn = document.getElementById('prev-img-btn');

  const productImages = [
    'assets/images/products/00.png',
    'assets/images/products/01.png'
  ];
  let currentImgIndex = 0;

  function switchImage(index) {
    productImg.classList.add('fading-out');
    setTimeout(() => {
      productImg.src = productImages[index];
      productImg.classList.remove('fading-out');
    }, 300);
  }

  if (nextImgBtn && prevImgBtn && productImg) {
    nextImgBtn.addEventListener('click', () => {
      if (productImages.length > 1) {
        currentImgIndex = (currentImgIndex + 1) % productImages.length;
        switchImage(currentImgIndex);
      }
    });

    prevImgBtn.addEventListener('click', () => {
      if (productImages.length > 1) {
        currentImgIndex = (currentImgIndex - 1 + productImages.length) % productImages.length;
        switchImage(currentImgIndex);
      }
    });
  }
});