Select Suspsect

by Evanlynn

HTML

<script>
$('head').append('<link href="https://fonts.googleapis.com/css?family=Satisfy&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">');
</script>

<div class="main container" style="position: relative">
<div class="layout">
    <!-- NO -->
    <div class="nieuwsoverzicht">
        <div class="parallax"></div>
        <img src="https://i.imgur.com/lLIXdnq.png" style="margin-top: -300px;">
        <div class="NO NO_textbox">
            <b><span style="font-size: 14px;">✧ Nieuws</span></b><br>
            Hee<br><br>

            We zijn alweer beland in de tweede maand van het jaar, hopelijk is er nog wat van je goede voornemens gekomen. Zoals bijvoorbeeld het meedoen aan Be Our Guest! Op dit moment kun je je artikel insturen voor de tweede en laatste ronde. Dit kan ook als je niet hebt meegedaan aan de eerste ronde. Meer informatie kun je [<a href="http://virtualpopstar.com/home/dailynews?x=read&id=5758" target="_blank">hier</a>] vinden.<br><br>

            De afgelopen weken kon je je ook inschrijven voor The Voice Of VP, georganiseerd door Delutix en HakunaMatata. De deadline sloot op 31 januari en ronde een is gister van start gegaan. Meer informatie kun je [<a href="http://virtualpopstar.com/social/forum?category=11&topic=907996" target="_blank">hier</a>] vinden.
        </div>
        <div class="NO NO_textbox">
            <b><span style="font-size: 14px;">✧ Content en sets</span></b><br>
            <b>| ARTIKELEN</b><br>
            <a href="http://virtualpopstar.com/home/dailynews?x=read&id=5758" target="_blank">Be Our Guest 2020 – Ronde 2</a><br>
            <a href="http://virtualpopstar.com/home/dailynews?x=read&id=5759" target="_blank">#3 BOG 2020 Ronde 1 | Edelstenen</a> <i>door Valiant</i><br>
            <a href="http://virtualpopstar.com/home/dailynews?x=read&id=5789" target="_blank">#2 BOG 2020 Ronde 1 | Peter Hollens</a> <i>door Literacity</i><br>
            <a...

CSS

.main.container {
    width: 688px;
    height: 693px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #fff;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.main.container::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    background-color: transparent;
}

.main.container::-webkit-scrollbar {
    width: 0px;
    background-color: transparent;
}

.main.container::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.layout {
    background-color: #c4c1d6;
    position: relative;
    height: 200.5%;
}

.nieuwsoverzicht {
  color: #5c596c;
  text-align: center;
}

a {
  color: #5c596c;
  text-decoration: none;
}

a:hover {
  color: #272437;
}

.parallax {
  background-image: url('https://i.imgur.com/zFDhI5L.jpg');
  height: 300px;
  background-attachment: fixed;
  background-position: 8px 8px;
}

.NO_textbox {
  display: inline-block;
  overflow: auto;
  text-align: justify;
  margin: 5px;
  margin-bottom: 7px;
  width: 40%;
  height: 182px;
  padding-right: 5px;
  box-sizing: border-box;
}

.game_explanation {
  display: inline-block;
  overflow: auto;
  text-align: justify;
  margin: 5px;
  margin-bottom: 28px;
  width: 82%;
  height: 150px;
}

.NO::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.NO::-webkit-scrollbar-track {
    background: #fff;
}

.NO::-webkit-scrollbar-thumb {
    background: #837f95;
}

.NO::-webkit-scrollbar-thumb:hover {
    background: #5c596c;
}
  
.suspects.container {
    text-align: center;
}
  
.suspects {
    width: 100%;
}
  
.suspect {
    width: 30%;
    background-color: #5c596c;
    border-radius: 10px;
    margin: 5px;
    padding-bottom: 10px;
    display: inline-block;
}
  
.suspect > img {
    width: 90%;
    margin-top: -17px;
    border: 1px solid #fff0;
    box-sizing: border-box;
    transition: all 0.7s ease;
}
  
.suspect > img:hover {
    border: 1px solid #fff;
    box-sizing: border-box;
    box-shadow: 0px 0px 5px #282538;
   ...

JavaScript

$(document).ready(function () {
    var checkPoint = localStorage.getItem('checkPoint');
    if (checkPoint == null) {
    	chooseCulprit();
        localStorage.setItem('checkPoint', 1);
    }
});
function chooseCulprit() {
    localStorage.clear();
    var culprit_number = Math.floor((Math.random() * 6) + 1);
    localStorage.culprit = culprit_number;
    magnify("myimage", 1.5);
    $('.suspect > img').css('filter', 'grayscale(0)');
}

$(document).on('click', '.suspect > img', function() {
  	var greyscale = $(this).css('filter');
	if (greyscale == 'grayscale(1)') {
    	$(this).css('filter', 'grayscale(0)');
    } else {
    	$(this).css('filter', 'grayscale(1)');
    }
});
magnify("myimage", 1.5);
function magnify(imgID, zoom) {
    var img, glass, w, h, bw;
    img = document.getElementById(imgID);
    $('.img_magnifier_glass').remove();
    glass = document.createElement("DIV");
    glass.setAttribute("class", "img_magnifier_glass");
    img.parentElement.insertBefore(glass, img);
	var x = localStorage.getItem('culprit');
    if ('suspect_' + x === 'suspect_1') {
  	    glass.style.backgroundImage = "url('https://i.imgur.com/xIB4oV4.jpg')";
     } else if ('suspect_' + x === 'suspect_2') {
     	glass.style.backgroundImage = "url('https://i.imgur.com/szymU7a.jpg')";
     } else if ('suspect_' + x === 'suspect_3') {
     	glass.style.backgroundImage = "url('https://i.imgur.com/doUnMbq.jpg')";
     } else if ('suspect_' + x === 'suspect_4') {
     	glass.style.backgroundImage = "url('https://i.imgur.com/UBZDNQO.jpg')";
     } else if ('suspect_' + x === 'suspect_5') {
     	glass.style.backgroundImage = "url('https://i.imgur.com/GrsKEVj.jpg')";
     } else if ('suspect_' + x === 'suspect_6') {
     	glass.style.backgroundImage = "url('https://i.imgur.com/apZR2K4.jpg')";
     }
     glass.style.backgroundRepeat = "no-repeat";
     glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
    bw = 3;
    w = glass.offsetWidth / 2;
 ...