Compare commits

..

No commits in common. "e937e76ad06532d815d083e8a7ffb226ce22ea48" and "159dcf534956e25d7d66269eff73d730c22db6d2" have entirely different histories.

5 changed files with 8 additions and 20 deletions

View file

@ -52,7 +52,7 @@ function round() {
let zone = zones[Math.floor(Math.random() * zones.length)]; let zone = zones[Math.floor(Math.random() * zones.length)];
zone.classList.remove("inactive"); zone.classList.remove("inactive");
setTimeout(function() { setTimeout(function() {
zone.style.transition = `opacity ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms`; zone.style.transition = `background-color ${timeBetween-(MIN_TIME_BETWEEN / 2)}ms`;
}, 100); }, 100);
setTimeout(function () { setTimeout(function () {
zone.classList.add("fade-out"); zone.classList.add("fade-out");

View file

@ -86,14 +86,10 @@ a {
.img-holder .zone { .img-holder .zone {
position: absolute; position: absolute;
display: block; display: block;
background-image: url("../images/gouttes.png"); background-color: #c6ff50;
background-size: contain;
background-repeat: repeat;
background-position: center;
filter: invert(71%) sepia(80%) saturate(342%) hue-rotate(72deg) brightness(102%) contrast(100%);
} }
.img-holder .zone.inactive, .img-holder .zone.inactive,
.img-holder .zone.fade-out { .img-holder .zone.fade-out {
opacity: 0; background-color: transparent;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 330 KiB

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View file

@ -27,19 +27,11 @@
<button onclick="start()">Commencer</button> <button onclick="start()">Commencer</button>
</p> </p>
<div class="img-holder"> <div class="img-holder">
<img src="images/fond.png" width="731" height="322" alt="Plan Cecolyon"> <img src="images/fond.png" width="727" height="330" alt="Plan Cecolyon">
<!-- left --> <div id="bureau-1" class="zone inactive" style="width:50px; height: 50px; top: 0; left: 0;"></div>
<div id="bureau-01" class="zone inactive" style="width: 68px; height: 85px; top: 18px; left: 53px;"></div> <div id="bureau-2" class="zone inactive" style="width:50px; height: 50px; top: 55px; left: 0;"></div>
<div id="bureau-02" class="zone inactive" style="width: 65px; height: 85px; top: 18px; left: 243px;"></div> <div id="bureau-3" class="zone inactive" style="width:50px; height: 50px; top: 0; left: 55px;"></div>
<div id="bureau-03" class="zone inactive" style="width: 85px; height: 60px; top: 105px; left: 53px;"></div> <div id="bureau-4" class="zone inactive" style="width:50px; height: 50px; top: 55px; left: 55px;"></div>
<div id="bureau-04" class="zone inactive" style="width: 60px; height: 90px; top: 185px; left: 245px;"></div>
<div id="bureau-05" class="zone inactive" style="width: 63px; height: 90px; top: 185px; left: 180px;"></div>
<!-- right -->
<div id="bureau-11" class="zone inactive" style="width: 68px; height: 85px; top: 18px; left: 458px;"></div>
<div id="bureau-12" class="zone inactive" style="width: 65px; height: 85px; top: 18px; left: 648px;"></div>
<div id="bureau-13" class="zone inactive" style="width: 85px; height: 60px; top: 105px; left: 630px;"></div>
<div id="bureau-14" class="zone inactive" style="width: 40px; height: 90px; top: 185px; left: 589px;"></div>
<div id="bureau-15" class="zone inactive" style="width: 63px; height: 90px; top: 185px; left: 524px;"></div>
<span class="success stamp hidden">FÉLICITATIONS 🎉</span> <span class="success stamp hidden">FÉLICITATIONS 🎉</span>
<span class="failure stamp hidden">PERDU 😞</span> <span class="failure stamp hidden">PERDU 😞</span>
</div> </div>