Compare commits
No commits in common. "e937e76ad06532d815d083e8a7ffb226ce22ea48" and "159dcf534956e25d7d66269eff73d730c22db6d2" have entirely different histories.
e937e76ad0
...
159dcf5349
5 changed files with 8 additions and 20 deletions
|
@ -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");
|
||||||
|
|
|
@ -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 |
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue