<style>
body {
margin: 0;
background-color: #0e111b;
}
</style>
<div class="background">
<div style="display: flex;">
<!-- Left content -->
<div class="left-side">
<div class="scene3d">
<canvas>
</canvas>
</div>
</div>
<!-- Right content -->
<div class="right-side">
<div class="main">
<button class="accordion">
<div class="heading">
<h2 class="titre-pack">PACK AVANT</h2>
<label id="big-checkbox-avant" class="switch switch2">
<input type="checkbox" id="lebigbouton-packavant">
<span class="slider slider2 round"></span>
</label>
</div>
</button>
<div class="panel">
<div class="container">
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de croisement</h3>
<label class="switch" id="id-lebouton1-packavant">
<input type="checkbox" class="lesboutons-packavant" id="lebouton1-packavant">
<span class="slider round"></span>
</label>
<img class="symbol croisement" alt="Light symbol" id="feu-croisement" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/feux_croisement.svg?v=1616431530">
<p class="references">H7</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de route</h3>
<label class="switch" id="id-lebouton2-packavant">
<input type="checkbox" class="lesboutons-packavant" id="lebouton2-packavant">
<span class="slider round"></span>
</label>
<img class="symbol croisement" alt="Light symbol" id="feu-route" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/feux_route.svg?v=1616431529">
<p class="references">H7</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de brouillard</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packavant" id="lebouton3-packavant">
<span class="slider round"></span>
</label>
<img class="symbol brouillard" alt="Light symbol" id="brouillard-avant" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/brouillard_avant.svg?v=1616431529">
<p class="references">H11</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de position</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packavant" id="lebouton4-packavant">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="position-avant" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de jour</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packavant" id="lebouton5-packavant">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="feux-jour" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">P21W</p>
</div>
</div>
</div>
</div>
<button class="accordion">
<div class="heading">
<h2 class="titre-pack">PACK ARRIÈRE</h2>
<label id="big-checkbox-arriere" class="switch switch2">
<input type="checkbox" id="lebigbouton-packarriere">
<span class="slider slider2 round"></span>
</label>
</div>
</button>
<div class="panel">
<div class="container">
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux stop</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packarriere" id="lebouton1-packarriere">
<span class="slider round"></span>
</label>
<img class="symbol croisement" alt="Light symbol" id="feux-stop" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/feux_stop.svg?v=1616438297">
<p class="references">P21/5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de position</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packarriere" id="lebouton2-packarriere">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="position-arriere" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de brouillard</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packarriere" id="lebouton3-packarriere">
<span class="slider round"></span>
</label>
<img class="symbol brouillard" alt="Light symbol" id="brouillard-arriere" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/brouillard_arriere.svg?v=1616431530">
<p class="references">P21W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Feux de recul</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packarriere" id="lebouton4-packarriere">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="feux-recul" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W16W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Éclairage plaque</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packarriere" id="lebouton5-packarriere">
<span class="slider round"></span>
</label>
<img class="symbol plafonniers" alt="Light symbol" id="eclairage-plaque" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_plafonnier.svg?v=1616378225">
<p class="references">W5W</p>
</div>
</div>
</div>
</div>
<button class="accordion">
<div class="heading">
<h2 class="titre-pack">PACK CLIGNOTANTS</h2>
<label id="big-checkbox-clignotants" class="switch switch2">
<input type="checkbox" id="lebigbouton-packclignotants">
<span class="slider slider2 round"></span>
</label>
</div>
</button>
<div class="panel">
<div class="container">
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Clignotants avants</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packclignotants" id="lebouton1-packclignotants">
<span class="slider round"></span>
</label>
<img class="symbol plafonniers" alt="Light symbol" id="cligno-avant" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_clignotants.svg?v=1616431529">
<p class="references">PY21W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Clignotants arrières</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packclignotants" id="lebouton2-packclignotants">
<span class="slider round"></span>
</label>
<img class="symbol plafonniers" alt="Light symbol" id="cligno-arriere" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_clignotants.svg?v=1616431529">
<p class="references">PY21W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Clignotants latéraux</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packclignotants" id="lebouton3-packclignotants">
<span class="slider round"></span>
</label>
<img class="symbol plafonniers" alt="Light symbol" id="cligno-lat" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_clignotants.svg?v=1616431529">
<p class="references">W5W</p>
</div>
</div>
</div>
</div>
<button class="accordion">
<div class="heading">
<h2 class="titre-pack">PACK INTÉRIEUR</h2>
<label id="big-checkbox-interieur" class="switch switch2">
<input type="checkbox" id="lebigbouton-packinterieur">
<span class="slider slider2 round"></span>
</label>
</div>
</button>
<div class="panel">
<div class="container">
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Plafonniers</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur" id="lebouton1-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol plafonniers" alt="Light symbol" id="plafonniers" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_plafonnier.svg?v=1616378225">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Boite à gants</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur" id="lebouton2-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="boite-a-gants" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">C5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Portes avants</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur" id="lebouton3-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="portes-avants" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Portes arrières</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur" id="lebouton4-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="portes-arrieres" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Coffre</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur" id="lebouton5-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="coffre" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Pieds</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur" id="lebouton6-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="pieds" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Miroir de courtoisie</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur" id="lebouton7-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="miroir-de-courtoisie" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
<div class="class1">
<div class="class2">
<h3 class="titre-feu">Ouverture portière</h3>
<label class="switch">
<input type="checkbox" class="lesboutons-packinterieur" id="lebouton8-packinterieur">
<span class="slider round"></span>
</label>
<img class="symbol" alt="Light symbol" id="ouverture-portiere" src="https://cdn.shopify.com/s/files/1/0532/1805/0224/files/symbole_ampoule.svg?v=1616377805">
<p class="references">W5W</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/DRACOLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/postprocessing@6.21.2/build/postprocessing.min.js"></script>
<script>
var lighty = document.querySelector('#big-checkbox-avant');
var lighty1 = document.querySelector('#id-lebouton1-packavant');
var lighty2 = document.querySelector('#id-lebouton2-packavant');
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x0e111b);
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 25, -200);
scene.add(camera);
renderer = new THREE.WebGLRenderer({
canvas: document.querySelector(".scene3d canvas"),
antialias: true
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
controls.minDistance = 75;
controls.maxDistance = 150;
controls.enableDamping = true
controls.dampingFactor = .05;
controls.enablePan = false;
controls.maxPolarAngle = Math.PI / 2.025;
controls.minPolarAngle = Math.PI / 3;
controls.target.set(0, 12, 0);
controls.autoRotate = true;
controls.autoRotateSpeed = .5;
const ambientLight = new THREE.DirectionalLight(0xc0c0ff, 0.05);
scene.add(ambientLight);
const light1 = new THREE.SpotLight(0xc0c0ff, 0, 1000, Math.PI / 16);
light1.position.set(12, 12.5, -42);
light1.target.position.set(12, 0, -200);
light1.castShadow = true;
//scene.add(light1);
//scene.add(light1.target);
const light2 = new THREE.SpotLight(0xc0c0ff, 0, 1000, Math.PI / 16);
light2.position.set(-12, 12.5, -42);
light2.target.position.set(-12, 0, -200);
light2.castShadow = true;
//scene.add(light2);
//scene.add(light2.target);
const light3 = new THREE.SpotLight(0xc0c0ff, 0, 2000, Math.PI / 12);
light3.position.set(12, 12.5, -42);
light3.target.position.set(12, 0, -600);
light3.castShadow = true;
//scene.add(light3);
//scene.add(light3.target);
const light4 = new THREE.SpotLight(0xc0c0ff, 0, 2000, Math.PI / 12);
light4.position.set(-12, 12.5, -42);
light4.target.position.set(-12, 0, -600);
light4.castShadow = true;
//scene.add(light4);
//scene.add(light4.target);
const spotlight = new THREE.PointLight(0xc0c0ff, .5);
spotlight.position.set(90, 12, 300);
spotlight.castShadow = true;
//scene.add(spotlight);
const geometry = new THREE.BoxGeometry(5, 5, 5);
const material = new THREE.MeshLambertMaterial({
color: 0x0c0c0c
});
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 2, -190);
cube.castShadow = true;
//scene.add(cube);
const ground = new THREE.Mesh(new THREE.PlaneGeometry(5000, 5000), new THREE.MeshStandardMaterial({
color: 0xc7c7c7
}));
ground.geometry.rotateX(-Math.PI / 2);
ground.position.set(0, -0.01, 0);
ground.castShadow = false;
ground.receiveShadow = true;
//scene.add(ground);
window.addEventListener('resize', onWindowResize);
var gltfLoader = new THREE.GLTFLoader();
var dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath( 'https://www.gstatic.com/draco/versioned/decoders/1.4.1/' );
gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.load('https://cdn.shopify.com/s/files/1/0532/1805/0224/files/audia7-processed.gltf?v=1616803625', function (gltf) {
car = gltf.scene;
car.scale.set(.25, .25, .25);
car.children[1].castShadow = true;
car.children[2].castShadow = true;
car.children[3].castShadow = true;
car.children[4].castShadow = true;
car.children[5].castShadow = true;
car.children[6].castShadow = true;
car.children[7].castShadow = true;
car.children[8].castShadow = true;
car.children[9].castShadow = true;
car.children[10].castShadow = true;
car.children[11].castShadow = true;
car.children[12].castShadow = true;
car.children[14].castShadow = true;
car.children[15].castShadow = true;
car.children[16].castShadow = true;
car.children[17].castShadow = true;
car.children[18].castShadow = true;
car.children[19].castShadow = true;
car.children[20].castShadow = true;
car.children[21].castShadow = true;
car.children[22].castShadow = true;
car.children[23].castShadow = true;
car.children[24].castShadow = true;
car.children[25].castShadow = true;
car.children[26].castShadow = true;
car.children[27].castShadow = true;
car.children[28].castShadow = true;
car.children[29].castShadow = true;
car.children[30].castShadow = true;
scene.add(gltf.scene);
let circleGeo = new THREE.SphereGeometry(.75, 32, 32);
let circleMat = new THREE.MeshBasicMaterial({
color: 0xc0c0ff,
opacity: 0
});
let circle1 = new THREE.Mesh(circleGeo, circleMat);
circle1.position.set(-12, 12.5, -42);
scene.add(circle1);
let circle2 = new THREE.Mesh(circleGeo, circleMat);
circle2.position.set(12, 12.5, -42);
scene.add(circle2);
let circle1Light = new THREE.PointLight(0xC0c0ff, 0, 50);
circle1Light.castShadow = true;
circle1Light.position.set(-12, 12.5, -42);
scene.add(circle1Light);
let circle2Light = new THREE.PointLight(0xC0c0ff, 0, 50);
circle2Light.castShadow = true;
circle2Light.position.set(12, 12.5, -42);
scene.add(circle2Light);
let godraysEffect1 = new POSTPROCESSING.GodRaysEffect(camera, circle1, {
resolutionScale: 1,
exposure: .54,
density: .96,
decay: .92,
weight: .9,
samples: 0,
clampMax: 1.0
});
let godraysEffect2 = new POSTPROCESSING.GodRaysEffect(camera, circle2, {
resolutionScale: 1,
exposure: .54,
density: .96,
decay: .92,
weight: .9,
samples: 0,
clampMax: 1.0
});
let renderPass = new POSTPROCESSING.RenderPass(scene, camera);
let areaImage = new Image();
areaImage.src = POSTPROCESSING.SMAAEffect.areaImageDataURL;
let searchImage = new Image();
searchImage.src = POSTPROCESSING.SMAAEffect.searchImageDataURL;
let smaaEffect = new POSTPROCESSING.SMAAEffect(searchImage,areaImage,1);
let effectPass = new POSTPROCESSING.EffectPass(camera,smaaEffect,godraysEffect1, godraysEffect2);
effectPass.renderToScreen = true;
composer = new POSTPROCESSING.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(effectPass);
var onoff = false;
lighty.addEventListener('mousedown', function(){
onoff = !onoff;
if(onoff === true){
light1.intensity = 2.5;
light2.intensity = 2.5;
light3.intensity = 10;
light4.intensity = 10;
circleMat.opacity = 1;
godraysEffect1.samples = 15;
godraysEffect2.samples = 15;
}
if(onoff === false){
light1.intensity = 0;
light2.intensity = 0;
light3.intensity = 0;
light4.intensity = 0;
circleMat.opacity = 0;
godraysEffect1.samples = 0;
godraysEffect2.samples = 0;
}
})
var onoff1 = false;
lighty1.addEventListener('mousedown', function(){
onoff1 = !onoff1;
if(onoff1 === true){
light1.intensity = 2.5;
light2.intensity = 2.5;
godraysEffect1.weight = .9;
godraysEffect2.weight = .9;
}
if(onoff1 === false){
light1.intensity = 0;
light2.intensity = 0;
godraysEffect1.weight = 0;
godraysEffect2.weight = 0;
}
})
var onoff2 = false;
lighty2.addEventListener('mousedown', function(){
onoff2 = !onoff2;
if(onoff2 === true){
light3.intensity = 10;
light4.intensity = 10;
godraysEffect1.weight = .9;
godraysEffect2.weight = .9;
}
if(onoff2 === false){
light3.intensity = 0;
light4.intensity = 0;
godraysEffect1.weight = 0;
godraysEffect2.weight = 0;
}
})
animate();
});
function resizeCanvasToDisplaySize() {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
if (canvas.width !== width || canvas.height !== height) {
// you must pass false here or three.js sadly fights the browser
composer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
// set render target sizes here
}
}
function render() {
composer.render();
}
function animate() {
controls.update();
resizeCanvasToDisplaySize();
requestAnimationFrame(animate);
render();
}
animate();
}
function onWindowResize() {
renderer.setSize(width, height, false);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
init();
</script>body {
height 100vh;
margin: 0px;
}
.background {
height: 100%;
background-color: #0e111b;
display: block;
}
.left-side {
flex: 1;
margin: 0;
}
.scene3d {
width: 100%;
height: 400px;
margin: 12px;
padding: 0px;
border: solid 10px white;
border-radius: 8px;
}
canvas {
width: 100%;
height: 100%;
}
.right-side {
flex: 1;
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
border-radius: 10px;
background-color: #fff;
color: #444;
cursor: pointer;
padding: 10px;
margin: 10px;
width: 45vw;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 0px;
border-radius: 10px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.main {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
justify-content: center;
padding: Opx;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0px 0px;
width: 45vw;
border-radius: 12px;
padding: 0px;
background-color: #fff;
}
.class1 {
flex-basis: 25%;
margin: 24px;
padding: 0px 8px;
}
.class2 {
background-color: #222838;
display: inline-block;
border-radius: 12px;
height: 180px;
width: 100%;
box-shadow: 3px 3px 6px 1px rgba(35, 35, 35, 0.5);
}
.switch {
position: relative;
margin-top: 5%;
float: right;
margin-right: 5%;
display: inline;
width: 30px;
height: 17px;
z-index: 4;
}
.switch2 {
width: 60px;
height: 34px;
position: relative;
right: 0%;
margin: auto;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.2s;
transition: 0.2s;
box-shadow: 3px 3px 6px 1px rgba(35, 35, 35, 0.5);
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.slider2:before {
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
}
input:checked + .slider {
background-color: #30b77a;
}
input:focus + .slider {
box-shadow: 0 0 1px #30b77a;
box-shadow: 3px 3px 6px 1px rgba(35, 35, 35, 0.5);
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
input:checked + .slider2:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.titre-pack {
color: #222838;
text-shadow: 3px 3px 6px rgba(35, 35, 35, 0.25);
margin-left: 5%;
margin-bottom: auto;
font-family: Arial, Helvetica, sans-serif;
font-weight: 800;
font-size: 34px;
display: inline;
width: 60%;
}
.titre-feu {
color: #fff;
margin-left: 7.5%;
margin-top: 5%;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 14px;
display: inline-block;
}
.references {
color: #fff;
position: relative;
top: 8%;
float: right;
margin-right: 5%;
margin-bottom: 5%;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 14px;
display: inline-block;
}
.symbol {
display: block;
height: 35%;
position: relative;
margin: auto;
margin-top: 13%;
}
.plafonniers {
width: 45%;
}
.croisement {
width: 38%;
}
.brouillard {
width: 32%;
}
#big-checkbox {
display: inline;
}
.heading {
width: 94%;
display: inline-block;
}
* {
border: 0px solid red;
}
@media only screen and (max-width: 600px) {
.accordion,
.container {
width: 95vw;
}
.accordion {
}
.class1 {
margin: 12px;
}
.class2 {
height: 90px;
}
}
.moncul {
position: absolute;
max-width: 100%;
max-height: 100%;
}
.photo {
z-index: 1;
}
.croisement1 {
mix-blend-mode: screen;
z-index: 2;
display: none;
}
.feuderoute {
transform: translateY(-11%);
mix-blend-mode: screen;
z-index: 2;
display: none;
}
.clignotantsAV {
mix-blend-mode: screen;
z-index: 2;
display: none;
}
.clignotantsLAT {
mix-blend-mode: screen;
z-index: 2;
display: none;
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
$(document).ready(function () {
$("#lebigbouton-packavant").click(function () {
if ($(this).prop("checked") == true) {
$(
"#lebouton1-packavant, #lebouton2-packavant, #lebouton3-packavant, #lebouton4-packavant, #lebouton5-packavant"
).prop("checked", true);
} else if ($(this).prop("checked") == false) {
$(
"#lebouton1-packavant, #lebouton2-packavant, #lebouton3-packavant, #lebouton4-packavant, #lebouton5-packavant"
).prop("checked", false);
}
});
$(".lesboutons-packavant").click(function () {
if (
$(".lesboutons-packavant:checked").length ==
$(".lesboutons-packavant").length
) {
$("#lebigbouton-packavant").prop("checked", true);
} else if ($(this).prop("checked") == false) {
$("#lebigbouton-packavant").prop("checked", false);
}
});
$("#lebigbouton-packavant, #lebouton1-packavant").click(function () {
if ($(this).prop("checked") == true) {
$("#feu-croisement").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#feu-croisement").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packavant, #lebouton2-packavant").click(function () {
if ($(this).prop("checked") == true) {
$("#feu-route").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#feu-route").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packavant, #lebouton3-packavant").click(function () {
if ($(this).prop("checked") == true) {
$("#brouillard-avant").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#brouillard-avant").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packavant, #lebouton4-packavant").click(function () {
if ($(this).prop("checked") == true) {
$("#position-avant").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#position-avant").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packavant, #lebouton5-packavant").click(function () {
if ($(this).prop("checked") == true) {
$("#feux-jour").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#feux-jour").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
});
$(document).ready(function () {
$("#lebigbouton-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$(
"#lebouton1-packarriere, #lebouton2-packarriere, #lebouton3-packarriere, #lebouton4-packarriere, #lebouton5-packarriere"
).prop("checked", true);
} else if ($(this).prop("checked") == false) {
$(
"#lebouton1-packarriere, #lebouton2-packarriere, #lebouton3-packarriere, #lebouton4-packarriere, #lebouton5-packarriere"
).prop("checked", false);
}
});
$(".lesboutons-packarriere").click(function () {
if (
$(".lesboutons-packarriere:checked").length ==
$(".lesboutons-packarriere").length
) {
$("#lebigbouton-packarriere").prop("checked", true);
} else if ($(this).prop("checked") == false) {
$("#lebigbouton-packarriere").prop("checked", false);
}
});
$("#lebigbouton-packarriere, #lebouton1-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$("#feux-stop").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#feux-stop").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packarriere, #lebouton2-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$("#position-arriere").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#position-arriere").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packarriere, #lebouton3-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$("#brouillard-arriere").css(
"filter",
`drop-shadow(0px 0px 5px #e0e0ff)`
);
} else if ($(this).prop("checked") == false) {
$("#brouillard-arriere").css(
"filter",
`drop-shadow(0px 0px 0px #e0e0ff)`
);
}
});
$("#lebigbouton-packarriere, #lebouton4-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$("#feux-recul").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#feux-recul").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packarriere, #lebouton5-packarriere").click(function () {
if ($(this).prop("checked") == true) {
$("#eclairage-plaque").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#eclairage-plaque").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
});
$(document).ready(function () {
$("#lebigbouton-packclignotants").click(function () {
if ($(this).prop("checked") == true) {
$(
"#lebouton1-packclignotants, #lebouton2-packclignotants, #lebouton3-packclignotants"
).prop("checked", true);
} else if ($(this).prop("checked") == false) {
$(
"#lebouton1-packclignotants, #lebouton2-packclignotants, #lebouton3-packclignotants"
).prop("checked", false);
}
});
$(".lesboutons-packclignotants").click(function () {
if (
$(".lesboutons-packclignotants:checked").length ==
$(".lesboutons-packclignotants").length
) {
$("#lebigbouton-packclignotants").prop("checked", true);
} else if ($(this).prop("checked") == false) {
$("#lebigbouton-packclignotants").prop("checked", false);
}
});
$("#lebigbouton-packclignotants, #lebouton1-packclignotants").click(
function () {
if ($(this).prop("checked") == true) {
$("#cligno-avant").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#cligno-avant").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
}
);
$("#lebigbouton-packclignotants, #lebouton2-packclignotants").click(
function () {
if ($(this).prop("checked") == true) {
$("#cligno-arriere").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#cligno-arriere").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
}
);
$("#lebigbouton-packclignotants, #lebouton3-packclignotants").click(
function () {
if ($(this).prop("checked") == true) {
$("#cligno-lat").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#cligno-lat").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
}
);
});
$(document).ready(function () {
$("#lebigbouton-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$(
"#lebouton1-packinterieur, #lebouton2-packinterieur, #lebouton3-packinterieur, #lebouton4-packinterieur, #lebouton5-packinterieur, #lebouton6-packinterieur, #lebouton7-packinterieur, #lebouton8-packinterieur"
).prop("checked", true);
} else if ($(this).prop("checked") == false) {
$(
"#lebouton1-packinterieur, #lebouton2-packinterieur, #lebouton3-packinterieur, #lebouton4-packinterieur, #lebouton5-packinterieur, #lebouton6-packinterieur, #lebouton7-packinterieur, #lebouton8-packinterieur"
).prop("checked", false);
}
});
$(".lesboutons-packinterieur").click(function () {
if (
$(".lesboutons-packinterieur:checked").length ==
$(".lesboutons-packinterieur").length
) {
$("#lebigbouton-packinterieur").prop("checked", true);
} else if ($(this).prop("checked") == false) {
$("#lebigbouton-packinterieur").prop("checked", false);
}
});
$("#lebigbouton-packinterieur, #lebouton1-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#plafonniers").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#plafonniers").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton2-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#boite-a-gants").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#boite-a-gants").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton3-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#portes-avants").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#portes-avants").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton4-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#portes-arrieres").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#portes-arrieres").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton5-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#coffre").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#coffre").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton6-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#pieds").css("filter", `drop-shadow(0px 0px 5px #e0e0ff)`);
} else if ($(this).prop("checked") == false) {
$("#pieds").css("filter", `drop-shadow(0px 0px 0px #e0e0ff)`);
}
});
$("#lebigbouton-packinterieur, #lebouton7-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#miroir-de-courtoisie").css(
"filter",
`drop-shadow(0px 0px 5px #e0e0ff)`
);
} else if ($(this).prop("checked") == false) {
$("#miroir-de-courtoisie").css(
"filter",
`drop-shadow(0px 0px 0px #e0e0ff)`
);
}
});
$("#lebigbouton-packinterieur, #lebouton8-packinterieur").click(function () {
if ($(this).prop("checked") == true) {
$("#ouverture-portiere").css(
"filter",
`drop-shadow(0px 0px 5px #e0e0ff)`
);
} else if ($(this).prop("checked") == false) {
$("#ouverture-portiere").css(
"filter",
`drop-shadow(0px 0px 0px #e0e0ff)`
);
}
});
});
$(document).ready(function () {
$("#lebouton1-packavant, #lebigbouton-packavant").click(function () {
if ($(this).prop("checked") == true) {
$(".croisement1").css("display", "block");
} else if ($(this).prop("checked") == false) {
$(".croisement1").css("display", "none");
}
});
$("#lebouton2-packavant, #lebigbouton-packavant").click(function () {
if ($(this).prop("checked") == true) {
$(".feuderoute").css("display", "block");
} else if ($(this).prop("checked") == false) {
$(".feuderoute").css("display", "none");
}
});
$("#lebouton1-packclignotants, #lebigbouton-packclignotants").click(
function () {
if ($(this).prop("checked") == true) {
$(".clignotantsAV").css("display", "block");
} else if ($(this).prop("checked") == false) {
$(".clignotantsAV").css("display", "none");
}
}
);
$("#lebouton3-packclignotants, #lebigbouton-packclignotants").click(
function () {
if ($(this).prop("checked") == true) {
$(".clignotantsLAT").css("display", "block");
} else if ($(this).prop("checked") == false) {
$(".clignotantsLAT").css("display", "none");
}
}
);
function blink(time, interval) {
var timer = window.setInterval(function () {
$(".clignotantsAV").css("opacity", "0");
$(".clignotantsLAT").css("opacity", "0");
window.setTimeout(function () {
$(".clignotantsAV").css("opacity", "1");
$(".clignotantsLAT").css("opacity", "1");
}, 500);
}, interval);
window.setTimeout(function () {
clearInterval(timer);
}, time);
}
blink(900000, 1000);
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.