/* 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(230, 179, 153) 0%, rgb(204, 102, 51) 100%);
background-color: rgb(204, 102, 51);
padding-top: 60px;
height: 180px;
}
/* Styling ketika Pilihan B (img2) dipilih */
.car-image-container.show-bg-b {
background-image: linear-gradient(rgb(225, 128, 128) 0%, rgb(194, 0, 0) 100%);
background-color: rgb(194, 0, 0) ;
padding-top: 60px;
height: 180px;
}
/* Styling ketika Pilihan C (img3) dipilih */
.car-image-container.show-bg-c {
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 D (img4) dipilih */
.car-image-container.show-bg-d {
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 E (img5) dipilih */
.car-image-container.show-bg-e {
background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
background-color: rgb(255, 255, 255);
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: #CC6633;
background-image: linear-gradient(135deg, #CC6633 24%, #e6b399 48%, #CC6633 62%, #CC6633 62%, #CC6633 100%);
}
button:nth-child(2) {
background-color: #C20000;
background-image: linear-gradient(135deg, #C20000 24%, #e18080 48%, #C20000 62%, #C20000 62%, #C20000 100%);
}
button:nth-child(3) {
background-color: #000000;
background-image: linear-gradient(135deg, #000000 24%, #808080 48%, #000000 62%, #000000 62%, #000000 100%);
}
button:nth-child(4) {
background-color: #828385;
background-image: linear-gradient(135deg, #828385 24%, #c1c1c2 48%, #828385 62%, #828385 62%, #828385 100%);
}
button:nth-child(5) {
background-color: #FFFFFF;
background-image: linear-gradient(135deg, #FFFFFF 24%, #ffffff 48%, #FFFFFF 62%, #FFFFFF 62%, #FFFFFF 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(204, 102, 51);
}
.button-container.show-bg-b {
background-color: rgb(194, 0, 0);
}
.button-container.show-bg-c {
background-color: rgb(0, 0, 0);
}
.button-container.show-bg-d {
background-color: rgb(130, 131, 133);
}
.button-container.show-bg-e {
background-color: rgb(255, 255, 255);
}
/*
.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(230, 179, 153) 0%, rgb(204, 102, 51) 100%);
background-color: rgb(204, 102, 51);
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(225, 128, 128) 0%, rgb(194, 0, 0) 100%);
background-color: rgb(194, 0, 0);
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(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 D (img4) dipilih */
.car-image-container.show-bg-d {
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 E (img5) dipilih */
.car-image-container.show-bg-e {
margin-top: -1px;
background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
background-color: rgb(255, 255, 255);
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 =
"Ignite Red Metallic"; // Teks untuk pilihan A
} else if (id === 'img2') {
carImageContainer.classList.add('show-bg-b');
buttonContainer.classList.add('show-bg-b');
document.getElementById('selectedText').innerText =
"Meteoroid Gray Metallic"; // Teks untuk pilihan B
} else if (id === 'img3') {
carImageContainer.classList.add('show-bg-c');
buttonContainer.classList.add('show-bg-c');
document.getElementById('selectedText').innerText =
"Crystal Black Pearl"; // Teks untuk pilihan C
} else if (id === 'img4') {
carImageContainer.classList.add('show-bg-d');
buttonContainer.classList.add('show-bg-d');
document.getElementById('selectedText').innerText =
"Platinum White 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
// }
}