abigail/camera-7-name.html at main · https-abi/abigail · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Nikon Coolpix S6900</title>
  <link rel="stylesheet" href="camera-1.css" />
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const mainImage = document.querySelector(".image-section img");
      const carouselImages = [
        "images/camera7.png",
        "images/camera7-0.png",
        "images/filler13.jpg",
        "images/filler14.webp",
        ];
      const carouselWrapper = document.querySelector(".carousel-wrapper");
      const imageWidth = 250;

      const wrapperWidth = carouselImages.length * imageWidth;
      carouselWrapper.style.width = `${wrapperWidth}px`;

      // Shutter sound setup
      const shutterSound = new Audio("sounds/shutter.mp3");
      let isMuted = false;

      function updateMainImage(index) {
        shutterSound.currentTime = 0; // Rewind to start
        if (!isMuted) shutterSound.play(); // Play shutter sound only if not muted

        mainImage.style.opacity = "0"; // Fade out
        setTimeout(() => {
          mainImage.src = carouselImages[index];
          mainImage.style.opacity = "1"; // Fade in
        }, 400);
      }

      // Mute Button Logic
      const muteBtn = document.getElementById("mute-btn");
      muteBtn.addEventListener("click", () => {
        isMuted = !isMuted; // Toggle mute state
        muteBtn.textContent = isMuted ? "🔇 Sound Off" : "🔊 Sound On"; // Update button text
      });

      // Populate carousel with images
      carouselImages.forEach((image, index) => {
        const div = document.createElement("div");
        div.style.backgroundImage = `url(${image})`;
        div.style.backgroundSize = "cover";
        div.style.backgroundPosition = "center";
        div.addEventListener("click", () => updateMainImage(index));
        carouselWrapper.appendChild(div);
      });

      updateMainImage(0); // Initialize with the first image

      // Left Arrow functionality
      const leftArrow = document.querySelector(".left-arrow");
      let currentIndex = 0; // To keep track of the current index of the main image

      leftArrow.addEventListener("click", () => {
        currentIndex =
          (currentIndex - 1 + carouselImages.length) % carouselImages.length;
        updateMainImage(currentIndex);
      });

      // Right Arrow functionality
      const rightArrow = document.querySelector(".right-arrow");

      rightArrow.addEventListener("click", () => {
        currentIndex = (currentIndex + 1) % carouselImages.length;
        updateMainImage(currentIndex);
      });

      // Increment/Decrement Quantity
      const incrementButton = document.querySelector(".increment");
      const decrementButton = document.querySelector(".decrement");
      const quantityValue = document.querySelector(".quantity .value");

      incrementButton.addEventListener("click", () => {
        let currentValue = parseInt(quantityValue.textContent);
        quantityValue.textContent = currentValue + 1;
      });

      decrementButton.addEventListener("click", () => {
        let currentValue = parseInt(quantityValue.textContent);
        if (currentValue > 1) {
          quantityValue.textContent = currentValue - 1;
        }
      });
    });
  </script>

</head>

<body>
  <header>NIKON COOLPIX S6900</header>
  <div class="container">
    <!-- Text Section -->
    <div class="text-section">
      <h1>MINIMALISTIC</h1>
      <h2>SEAMLESS DESIGN</h2>
      <p>
        The infamous Nikon Coolpix S6900 Digital Compact Camera, as seen on TikTok offers advanced features such as a 16
        megapixel CMOS sensor and a 12x optical zoom lens that allow for stunning image quality and versatile shooting
        options. With built-in Wi-Fi and NFC technology, sharing your photos has never been easier. Perfect for
        capturing life's special moments with professional precision.
        This is a classic Digital Compact Camera able to capture both photos and videos.
        Featuring a built in flash, a flip LCD screen and various shooting modes.
      </p>
    </div>

    <!-- Image Section -->
    <div class="image-section">
      <img src="https://via.placeholder.com/500" alt="Product Image" />
    </div>

    <!-- Details Section -->

    <div class="details">
      <p class="features">
      <h2>Features:</h2>
      <ul>
        <li>16.0 Megapixels</li>
        <li>12 x Optical Zoom Lens</li>
        <li>Photo and Video Capturing</li>
        <li>Built in wifi sharing</li>
        <li>Various Shooting modes including Macro</li>
        <li>Built in Flash</li>
        <li>Vari-angle flip screen monitor</li>
      </ul>
      </p>
      <div class="price">
        PRICE: <br />
        $199.99
      </div>
      <div class="color-options">
        <div style="background-color: #f8dbfd"></div>
        <div style="background-color: #dcdbfd"></div>
        <div style="background-color: #fafddb"></div>
      </div>
      <div class="quantity">
        <button class="decrement buttons">-</button>
        <p id="divider">|</p>
        <button class="increment buttons">+</button>
        <span class="value">1</span>
      </div>

      <button class="add-to-cart">Add to Cart</button>
    </div>
  </div>

  <!-- Enlarged Carousel at Bottom -->
  <div class="carousel">
    <p class="carousel-arrow left-arrow">&#10148;</p>
    <div class="carousel-wrapper"></div>
    <p class="carousel-arrow right-arrow">&#10148;</p>
  </div>

  <!-- Mute/Sound Toggle Button -->
  <button id="mute-btn">🔊 Sound On</button>


</body>

</html>