Skip to content

Commit d084227

Browse files
https-abihttps-abi
authored
Add files via upload
1 parent 3535713 commit d084227

File tree

8 files changed

+1147
-2
lines changed

8 files changed

+1147
-2
lines changed

‎camera-10-name.html‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Nikon Coolpix S3500</title>
8+
<link rel="stylesheet" href="camera-1.css" />
9+
<script>
10+
document.addEventListener("DOMContentLoaded", () => {
11+
const mainImage = document.querySelector(".image-section img");
12+
const carouselImages = [
13+
"images/camera10.png",
14+
"images/camera10-0.png",
15+
"images/filler19.jpg",
16+
"images/filler20.jpg",
17+
];
18+
const carouselWrapper = document.querySelector(".carousel-wrapper");
19+
const imageWidth = 250;
20+
21+
const wrapperWidth = carouselImages.length * imageWidth;
22+
carouselWrapper.style.width = `${wrapperWidth}px`;
23+
24+
// Shutter sound setup
25+
const shutterSound = new Audio("sounds/shutter.mp3");
26+
let isMuted = false;
27+
28+
function updateMainImage(index) {
29+
shutterSound.currentTime = 0; // Rewind to start
30+
if (!isMuted) shutterSound.play(); // Play shutter sound only if not muted
31+
32+
mainImage.style.opacity = "0"; // Fade out
33+
setTimeout(() => {
34+
mainImage.src = carouselImages[index];
35+
mainImage.style.opacity = "1"; // Fade in
36+
}, 400);
37+
}
38+
39+
// Mute Button Logic
40+
const muteBtn = document.getElementById("mute-btn");
41+
muteBtn.addEventListener("click", () => {
42+
isMuted = !isMuted; // Toggle mute state
43+
muteBtn.textContent = isMuted ? "🔇 Sound Off" : "🔊 Sound On"; // Update button text
44+
});
45+
46+
// Populate carousel with images
47+
carouselImages.forEach((image, index) => {
48+
const div = document.createElement("div");
49+
div.style.backgroundImage = `url(${image})`;
50+
div.style.backgroundSize = "cover";
51+
div.style.backgroundPosition = "center";
52+
div.addEventListener("click", () => updateMainImage(index));
53+
carouselWrapper.appendChild(div);
54+
});
55+
56+
updateMainImage(0); // Initialize with the first image
57+
58+
// Left Arrow functionality
59+
const leftArrow = document.querySelector(".left-arrow");
60+
let currentIndex = 0; // To keep track of the current index of the main image
61+
62+
leftArrow.addEventListener("click", () => {
63+
currentIndex =
64+
(currentIndex - 1 + carouselImages.length) % carouselImages.length;
65+
updateMainImage(currentIndex);
66+
});
67+
68+
// Right Arrow functionality
69+
const rightArrow = document.querySelector(".right-arrow");
70+
71+
rightArrow.addEventListener("click", () => {
72+
currentIndex = (currentIndex + 1) % carouselImages.length;
73+
updateMainImage(currentIndex);
74+
});
75+
76+
// Increment/Decrement Quantity
77+
const incrementButton = document.querySelector(".increment");
78+
const decrementButton = document.querySelector(".decrement");
79+
const quantityValue = document.querySelector(".quantity .value");
80+
81+
incrementButton.addEventListener("click", () => {
82+
let currentValue = parseInt(quantityValue.textContent);
83+
quantityValue.textContent = currentValue + 1;
84+
});
85+
86+
decrementButton.addEventListener("click", () => {
87+
let currentValue = parseInt(quantityValue.textContent);
88+
if (currentValue > 1) {
89+
quantityValue.textContent = currentValue - 1;
90+
}
91+
});
92+
});
93+
</script>
94+
95+
</head>
96+
97+
<body>
98+
<header>NIKON COOLPIX S3500</header>
99+
<div class="container">
100+
<!-- Text Section -->
101+
<div class="text-section">
102+
<h1>MINIMALISTIC</h1>
103+
<h2>SEAMLESS DESIGN</h2>
104+
<p>
105+
A classic Year 2000's Digital Compact Camera able to capture both photos and videos.
106+
Featuring a built in flash, an LCD screen and various shooting modes.
107+
</p>
108+
</div>
109+
110+
<!-- Image Section -->
111+
<div class="image-section">
112+
<img src="https://via.placeholder.com/500" alt="Product Image" />
113+
</div>
114+
115+
<!-- Details Section -->
116+
117+
<div class="details">
118+
<p class="features">
119+
<h2>Features:</h2>
120+
<ul>
121+
<li>20.0 Megapixels</li>
122+
<li>8x Optical Zoom Lens</li>
123+
<li>Photo and Video Capturing</li>
124+
<li>Various Shooting modes including Macro</li>
125+
<li>Built in Flash</li>
126+
</ul>
127+
</p>
128+
<div class="price">
129+
PRICE: <br />
130+
$199.99
131+
</div>
132+
<div class="color-options">
133+
<div style="background-color: #f8dbfd"></div>
134+
<div style="background-color: #dcdbfd"></div>
135+
<div style="background-color: #fafddb"></div>
136+
</div>
137+
<div class="quantity">
138+
<button class="decrement buttons">-</button>
139+
<p id="divider">|</p>
140+
<button class="increment buttons">+</button>
141+
<span class="value">1</span>
142+
</div>
143+
144+
<button class="add-to-cart">Add to Cart</button>
145+
</div>
146+
</div>
147+
148+
<!-- Enlarged Carousel at Bottom -->
149+
<div class="carousel">
150+
<p class="carousel-arrow left-arrow">&#10148;</p>
151+
<div class="carousel-wrapper"></div>
152+
<p class="carousel-arrow right-arrow">&#10148;</p>
153+
</div>
154+
155+
<!-- Mute/Sound Toggle Button -->
156+
<button id="mute-btn">🔊 Sound On</button>
157+
158+
159+
</body>
160+
161+
</html>

‎camera-3-name.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,7 @@ <h2>Features:</h2>
161161
<!-- Mute/Sound Toggle Button -->
162162
<button id="mute-btn">🔊 Sound On</button>
163163

164-
<footer-component></footer-component>
165-
<script src="footer.js"></script>
164+
166165
</body>
167166

168167
</html>

‎camera-4-name.html‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Canon Super Shot</title>
8+
<link rel="stylesheet" href="camera-1.css" />
9+
<script>
10+
document.addEventListener("DOMContentLoaded", () => {
11+
const mainImage = document.querySelector(".image-section img");
12+
const carouselImages = [
13+
"images/camera4.png",
14+
"images/camera4-0.png",
15+
"images/filler7.jpg",
16+
"images/filler8.jpg",
17+
];
18+
const carouselWrapper = document.querySelector(".carousel-wrapper");
19+
const imageWidth = 250;
20+
21+
const wrapperWidth = carouselImages.length * imageWidth;
22+
carouselWrapper.style.width = `${wrapperWidth}px`;
23+
24+
// Shutter sound setup
25+
const shutterSound = new Audio("sounds/shutter.mp3");
26+
let isMuted = false;
27+
28+
function updateMainImage(index) {
29+
shutterSound.currentTime = 0; // Rewind to start
30+
if (!isMuted) shutterSound.play(); // Play shutter sound only if not muted
31+
32+
mainImage.style.opacity = "0"; // Fade out
33+
setTimeout(() => {
34+
mainImage.src = carouselImages[index];
35+
mainImage.style.opacity = "1"; // Fade in
36+
}, 400);
37+
}
38+
39+
// Mute Button Logic
40+
const muteBtn = document.getElementById("mute-btn");
41+
muteBtn.addEventListener("click", () => {
42+
isMuted = !isMuted; // Toggle mute state
43+
muteBtn.textContent = isMuted ? "🔇 Sound Off" : "🔊 Sound On"; // Update button text
44+
});
45+
46+
// Populate carousel with images
47+
carouselImages.forEach((image, index) => {
48+
const div = document.createElement("div");
49+
div.style.backgroundImage = `url(${image})`;
50+
div.style.backgroundSize = "cover";
51+
div.style.backgroundPosition = "center";
52+
div.addEventListener("click", () => updateMainImage(index));
53+
carouselWrapper.appendChild(div);
54+
});
55+
56+
updateMainImage(0); // Initialize with the first image
57+
58+
// Left Arrow functionality
59+
const leftArrow = document.querySelector(".left-arrow");
60+
let currentIndex = 0; // To keep track of the current index of the main image
61+
62+
leftArrow.addEventListener("click", () => {
63+
currentIndex =
64+
(currentIndex - 1 + carouselImages.length) % carouselImages.length;
65+
updateMainImage(currentIndex);
66+
});
67+
68+
// Right Arrow functionality
69+
const rightArrow = document.querySelector(".right-arrow");
70+
71+
rightArrow.addEventListener("click", () => {
72+
currentIndex = (currentIndex + 1) % carouselImages.length;
73+
updateMainImage(currentIndex);
74+
});
75+
76+
// Increment/Decrement Quantity
77+
const incrementButton = document.querySelector(".increment");
78+
const decrementButton = document.querySelector(".decrement");
79+
const quantityValue = document.querySelector(".quantity .value");
80+
81+
incrementButton.addEventListener("click", () => {
82+
let currentValue = parseInt(quantityValue.textContent);
83+
quantityValue.textContent = currentValue + 1;
84+
});
85+
86+
decrementButton.addEventListener("click", () => {
87+
let currentValue = parseInt(quantityValue.textContent);
88+
if (currentValue > 1) {
89+
quantityValue.textContent = currentValue - 1;
90+
}
91+
});
92+
});
93+
</script>
94+
95+
</head>
96+
97+
<body>
98+
<header>CANON SURE SHOT</header>
99+
<div class="container">
100+
<!-- Text Section -->
101+
<div class="text-section">
102+
<h1>MINIMALISTIC</h1>
103+
<h2>SEAMLESS DESIGN</h2>
104+
<p>
105+
The Canon Sure Shot 105 Zoom is a fantastic compact film camera. It's an easy to use and simple re-useable point
106+
and shoot camera perfect for beginners.
107+
This camera is fully automatic and equipped with a quality 38-105mm zoom lens able to take great quality photos.
108+
It features a built in automatic flash and a self timer, this camera can be used in all settings and is reliable
109+
and easy to use.
110+
The addition of a built in motor allows the camera to automatically advance and rewind the film for you meaning
111+
all you need to do is point and shoot.
112+
</p>
113+
</div>
114+
115+
<!-- Image Section -->
116+
<div class="image-section">
117+
<img src="https://via.placeholder.com/500" alt="Product Image" />
118+
</div>
119+
120+
<!-- Details Section -->
121+
122+
<div class="details">
123+
<p class="features">
124+
<h2>Features:</h2>
125+
<ul>
126+
<li>38-105mm Zoom Lens</li>
127+
<li>Automatic Film Advance / Motor Winder</li>
128+
<li>Automatic Flash with manual override</li>
129+
<li>Automatic Focusing / Exposing</li>
130+
<li>Self Timer</li>
131+
<li>Red eye reduction</li>
132+
</ul>
133+
</p>
134+
<div class="price">
135+
PRICE: <br />
136+
$199.99
137+
</div>
138+
<div class="color-options">
139+
<div style="background-color: #f8dbfd"></div>
140+
<div style="background-color: #dcdbfd"></div>
141+
<div style="background-color: #fafddb"></div>
142+
</div>
143+
<div class="quantity">
144+
<button class="decrement buttons">-</button>
145+
<p id="divider">|</p>
146+
<button class="increment buttons">+</button>
147+
<span class="value">1</span>
148+
</div>
149+
150+
<button class="add-to-cart">Add to Cart</button>
151+
</div>
152+
</div>
153+
154+
<!-- Enlarged Carousel at Bottom -->
155+
<div class="carousel">
156+
<p class="carousel-arrow left-arrow">&#10148;</p>
157+
<div class="carousel-wrapper"></div>
158+
<p class="carousel-arrow right-arrow">&#10148;</p>
159+
</div>
160+
161+
<!-- Mute/Sound Toggle Button -->
162+
<button id="mute-btn">🔊 Sound On</button>
163+
164+
165+
</body>
166+
167+
</html>

0 commit comments

Comments
 (0)