/* Desktop Menu */
body {
margin: 0;
}
.car-image {
display: none;
}
p#selectedText {
font-size: 1.3em;
text-shadow: 0 0 6px #ccc;
color: #fff;
font-family: system-ui;
}
.somecar {
background-color: #fff;
padding-top: 0px;
margin-top: 10%
}
.car-image-container {
padding-top: 80px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.car-image-container img {
margin-top: -184px;
}
.car-image {
width: 668px;
margin: 5px;
}
/* Styling ketika Pilihan A (img1) dipilih */
.car-image-container.show-bg-a {
background-image: linear-gradient(rgb(245, 245, 244) 0%, rgb(234, 234, 233) 100%);
background-color: rgb(234, 234, 233);
padding-top: 60px;
height: 180px;
}
/* Styling ketika Pilihan B (img2) dipilih */
.car-image-container.show-bg-b {
background-image: linear-gradient(rgb(250, 249, 244) 0%, rgb(245, 242, 233) 100%);
background-color: rgb(245, 242, 233);
padding-top: 60px;
height: 180px;
}
/* Styling ketika Pilihan C (img3) dipilih */
.car-image-container.show-bg-c {
background-image: linear-gradient(rgb(193, 193, 194) 0%, rgb(130, 131, 133) 100%);
background-color: rgb(130, 131, 133);
padding-top: 60px;
height: 180px;
}
/* Styling ketika Pilihan D (img4) dipilih */
.car-image-container.show-bg-d {
background-image: linear-gradient(rgb(128, 128, 128) 0%, rgb(0, 0, 0) 100%);
background-color: rgb(0, 0, 0);
padding-top: 60px;
height: 180px;
}
/* Styling ketika Pilihan E (img5) dipilih */
/* .car-image-container.show-bg-e {
background-image: linear-gradient(rgb(160, 162, 165) 0%, rgb(64, 68, 74) 100%);
background-color: rgb(64, 68, 74);
padding-top: 60px;
height: 180px;
} */
/* Styling ketika Pilihan F (img6) dipilih */
/* .car-image-container.show-bg-f {
background-image: linear-gradient(rgb(128, 128, 128) 0%, rgb(0, 0, 0) 100%);
background-color: rgb(0, 0, 0);
padding-top: 60px;
height: 180px;
} */
/* Styling ketika Pilihan G (img7) dipilih */
/* .car-image-container.show-bg-g {
background-image: linear-gradient(rgb(221, 228, 230) 0%, rgb(187, 200, 205) 100%);
background-color: rgb(187, 200, 205);
padding-top: 60px;
height: 180px;
} */
.button-container {
padding-bottom: 8em;
padding-top: 23px;
position: relative;
justify-content: center;
}
/* Styling untuk tombol */
button {
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
cursor: pointer;
}
button:nth-child(1) {
background-color: #eaeae9;
background-image: linear-gradient(135deg, #eaeae9 24%, #f5f5f4 48%, #eaeae9 62%, #eaeae9 62%, #eaeae9 100%);
}
button:nth-child(2) {
background-color: #F5F2E9;
background-image: linear-gradient(135deg, #F5F2E9 24%, #faf9f4 48%, #F5F2E9 62%, #F5F2E9 62%, #F5F2E9 100%);
}
button:nth-child(3) {
background-color: #828385;
background-image: linear-gradient(135deg, #828385 24%, #c1c1c2 48%, #828385 62%, #828385 62%, #828385 100%);
}
button:nth-child(4) {
background-color: #000000;
background-image: linear-gradient(135deg, #000000 24%, #808080 48%, #000000 62%, #000000 62%, #000000 100%);
}
/*
button:nth-child(5) {
background-color: #40444A;
background-image: linear-gradient(135deg, #40444A 24%, #a0a2a5 48%, #40444A 62%, #40444A 62%, #40444A 100%);
}
button:nth-child(6) {
background-color: #000000;
background-image: linear-gradient(135deg, #000000 24%, #808080 48%, #000000 62%, #000000 62%, #000000 100%);
} */
/* button:nth-child(7) {
background-color: #bbc8cd;
background-image: linear-gradient(135deg, #bbc8cd 24%, #dde4e6 48%, #bbc8cd 62%, #bbc8cd 62%, #bbc8cd 100%);
} */
/* Mengatur latar belakang .button-container */
.button-container.show-bg-a {
background-color: rgb(234, 234, 233);
}
.button-container.show-bg-b {
background-color: rgb(245, 242, 233);
}
.button-container.show-bg-c {
background-color: rgb(130, 131, 133);
}
.button-container.show-bg-d {
background-color: rgb(0, 0, 0);
}
/* .button-container.show-bg-e {
background-color: rgb(64, 68, 74);
}
.button-container.show-bg-f {
background-color: rgb(0, 0, 0);
} */
/* .button-container.show-bg-g {
background-color: rgb(187, 200, 205);
} */
.button-container {
padding-bottom: 8em;
position: relative;
justify-content: center;
}
/* Mobile Menu */
/* Media Query untuk tampilan seluler */
@media only screen and (max-width: 600px) {
.car-image {
width: 400px;
margin: 5px;
}
.car-image-container img {
margin-top: -84px;
}
.button-container {
margin-top: -1px;
padding-bottom: 3em;
position: relative;
justify-content: center;
}
button {
width: 40px;
height: 40px;
margin: 5px;
}
/* Styling ketika Pilihan A (img1) dipilih */
.car-image-container.show-bg-a {
margin-top: -1px;
background-image: linear-gradient(rgb(245, 245, 244) 0%, rgb(234, 234, 233) 100%);
background-color: rgb(234, 234, 233);
padding-top: 3px;
padding-bottom: 75px;
height: 53px;
}
/* Styling ketika Pilihan B (img2) dipilih */
.car-image-container.show-bg-b {
margin-top: -1px;
background-image: linear-gradient(rgb(250, 249, 244) 0%, rgb(245, 242, 233) 100%);
background-color: rgb(245, 242, 233);
padding-top: 3px;
padding-bottom: 75px;
height: 53px;
}
/* Styling ketika Pilihan C (img3) dipilih */
.car-image-container.show-bg-c {
margin-top: -1px;
background-image: linear-gradient(rgb(193, 193, 194) 0%, rgb(130, 131, 133) 100%);
background-color: rgb(130, 131, 133);
padding-top: 3px;
padding-bottom: 75px;
height: 53px;
}
/* Styling ketika Pilihan D (img4) dipilih */
.car-image-container.show-bg-d {
margin-top: -1px;
background-image: linear-gradient(rgb(128, 128, 128) 0%, rgb(0, 0, 0) 100%);
background-color: rgb(0, 0, 0);
padding-top: 3px;
padding-bottom: 75px;
height: 53px;
}
/* Styling ketika Pilihan E (img5) dipilih */
/* .car-image-container.show-bg-e {
margin-top: -1px;
background-image: linear-gradient(rgb(160, 162, 165) 0%, rgb(64, 68, 74) 100%);
background-color: rgb(64, 68, 74);
padding-top: 3px;
padding-bottom: 75px;
height: 53px;
} */
/* Styling ketika Pilihan F (img6) dipilih */
/* .car-image-container.show-bg-f {
margin-top: -1px;
background-image: linear-gradient(rgb(128, 128, 128) 0%, rgb(0, 0, 0) 100%);
background-color: rgb(0, 0, 0);
padding-top: 3px;
padding-bottom: 75px;
height: 53px;
} */
/* Styling ketika Pilihan G (img7) dipilih */
/* .car-image-container.show-bg-g {
margin-top: -1px;
background-image: linear-gradient(rgb(221, 228, 230) 0%, rgb(187, 200, 205) 100%);
background-color: rgb(187, 200, 205);
padding-top: 3px;
padding-bottom: 75px;
height: 53px;
} */
.somecar {
background-color: #fff;
padding-top: 0px;
}
}
function showDefaultImage() {
showImage('img1'); // Tampilkan pilihan A secara default
}
function showImage(id) {
// Sembunyikan semua gambar dengan class "car-image"
let images = document.querySelectorAll(".car-image");
images.forEach(image => image.style.display = "none");
// Tampilkan gambar dengan ID yang sesuai
let selectedImage = document.getElementById(id);
selectedImage.style.display = "block";
// Cek apakah img1, img2, img3, atau img4 ditampilkan
let carImageContainer = document.querySelector(".car-image-container");
carImageContainer.classList.remove('show-bg-a');
carImageContainer.classList.remove('show-bg-b');
carImageContainer.classList.remove('show-bg-c');
carImageContainer.classList.remove('show-bg-d');
// carImageContainer.classList.remove('show-bg-e');
// carImageContainer.classList.remove('show-bg-f');
// carImageContainer.classList.remove('show-bg-g');
let buttonContainer = document.querySelector(".button-container");
buttonContainer.classList.remove('show-bg-a');
buttonContainer.classList.remove('show-bg-b');
buttonContainer.classList.remove('show-bg-c');
buttonContainer.classList.remove('show-bg-d');
// buttonContainer.classList.remove('show-bg-e');
// buttonContainer.classList.remove('show-bg-f');
//buttonContainer.classList.remove('show-bg-g');
if (id === 'img1') {
carImageContainer.classList.add('show-bg-a');
buttonContainer.classList.add('show-bg-a');
document.getElementById('selectedText').innerText =
"Taffeta White"; // Teks untuk pilihan A
} else if (id === 'img2') {
carImageContainer.classList.add('show-bg-b');
buttonContainer.classList.add('show-bg-b');
document.getElementById('selectedText').innerText =
"Premium Opal White Pearl"; // Teks untuk pilihan B
} else if (id === 'img3') {
carImageContainer.classList.add('show-bg-c');
buttonContainer.classList.add('show-bg-c');
document.getElementById('selectedText').innerText =
"Meteoroid Gray Metallic"; // Teks untuk pilihan C
} else if (id === 'img4') {
carImageContainer.classList.add('show-bg-d');
buttonContainer.classList.add('show-bg-d');
document.getElementById('selectedText').innerText =
"Crystal Black Pearl"; // Teks untuk pilihan D
}
// else if (id === 'img5') {
// carImageContainer.classList.add('show-bg-e');
// buttonContainer.classList.add('show-bg-e');
// document.getElementById('selectedText').innerText = "Meteoroid Gray Metallic"; // Teks untuk pilihan E
// } else if (id === 'img6') {
// carImageContainer.classList.add('show-bg-f');
// buttonContainer.classList.add('show-bg-f');
// document.getElementById('selectedText').innerText =
// "Crystal Black Pearl"; // Teks untuk pilihan F
// }
// else if (id === 'img7') {
// carImageContainer.classList.add('show-bg-g');
// buttonContainer.classList.add('show-bg-g');
// document.getElementById('selectedText').innerText =
// "Stellar Diamond Pearl (RS)"; // Teks untuk pilihan G
// }
}