abigail/camera-11-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
168
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Canon Sure Shot</title>
  <link rel="stylesheet" href="camera-1.css" />
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const mainImage = document.querySelector(".image-section img");
      const carouselImages = [
        "images/camera11.png",
        "images/camera11-0.png",
        "images/filler21.jpg",
        "images/filler22.jpg",
        ];
      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>CANON SURE SHOT</header>
  <div class="container">
    <!-- Text Section -->
    <div class="text-section">
      <h1>MINIMALISTIC</h1>
      <h2>SEAMLESS DESIGN</h2>
      <p>
        The Z135 is a fantastic compact film camera. It's an easy to use and simple re-useable point and shoot camera
        perfect for beginners.
        This camera is fully automatic and equipped with a quality 35-135mm zoom lens able to take great quality photos.
        It features a built in automatic flash and a self timer, this camera can be used in all settings and is reliable
        and easy to use.
        The addition of a built in motor allows the camera to automatically advance and rewind the film for you meaning
        all you need to do is point and shoot.
      </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>38-135mm f/3.6-8.9 Zoom Lens</li>
        <li>Automatic Film Advance / Motor Winder</li>
        <li>Automatic Flash with Various Settings and Manual Override</li>
        <li>Automatic Focusing / Exposing</li>
        <li>Self Timer</li>
        <li>Red eye reduction</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>

  <footer-component></footer-component>
  <script src="footer.js"></script>
</body>

</html>