Nieuwsoverzicht | 15 November 2020

15 November 2020

by EvanlynnNT

HTML

<div style="position: relative; background-image: url(https://i.imgur.com/KG9mFxq.jpg); width: 688px; height: 500px; font-family: Arial; font-size: 12px;">

  <img class="hide" src="https://i.imgur.com/L8QaBmp.png" style="position: absolute; pointer-events: none; z-index: 2;">
  <img src="https://i.imgur.com/y6k4LeH.png" style="position: absolute; pointer-events: none; z-index: 2;">

  <!-- NIEUWSOVERZICHT -->
  <div class="nieuwsoverzicht" style="position: absolute; z-index: 1;">
    <div style="position: absolute; left: 10px; top: 95px; width: 668px; height: 310px; background-color: #f5ecf9; border-radius: 6px;"></div>
    <div style="overflow: auto; position: absolute; left: 20px; top: 115px; width: 193px; height: 270px; text-align: justify; padding-right: 5px; box-sizing: border-box; background-color: #323232; border-radius: 6px;"></div>
    <div style="overflow: auto; position: absolute; left: 223px; top: 115px; width: 435px; height: 270px; text-align: justify; padding-right: 5px; box-sizing: border-box; color: #323232;">
		Hee!<br><br>

		Weer een weekje is voorbij gevlogen, hopelijk heb je een leuke week gehad. Op maandag kwam de uitslag van de [<a href="https://virtualpopstar.com/home/profile?user=Bloggers&show=blog&id=41665" target="_blank">Blogspeurtocht</a>], gefeliciteerd aan Timebomb, Belle, Ikigai, Sas, Lucius, Valiant, PurpleViolet, Shao, Cindy en Rafke! De dag daarna kondigden de Bloggers ook [<a href="https://virtualpopstar.com/social/forum?category=3&topic=943038" target="_blank">open sollicitaties</a>] aan, je kunt solliciteren als je al minimaal twee maanden blogt volgens de regels van de Bloggers.<br><br>

		De deadline van de ForumTeam verkiezingen verstreek vorige week op zes november, de uitslag is er nog niet, dus we zitten nog even in spanning. Waar wel een [<a href="https://virtualpopstar.com/social/forum?category=11&topic=943188" target="_blank">uitslag</a>] van kwam was de [<a...

CSS

* {
	outline: none;
}

a {
	color: #78aae4;
	text-decoration: none;
}

a:hover {
	color: #5e94d3;
}

.suspect_info {
  position: absolute;
  width: 216px;
  height: 150px;
  border-radius: 6px;
  background-color: rgba(176, 216, 248, 0.9);
  font-size: 15px;
  padding: 10px;
  box-sizing: border-box;
  opacity: 0;
  transition: all 1s ease;
}

.suspect_info:hover {
  opacity: 1;
  cursor: pointer;
}

.accuse {
  position: absolute;
  left: 10px;
  bottom: 14px;
  width: 196px;
  height: 20px;
  border: none;
  border-radius: 10px;
  background-color: #323232;
  font-family: 'Patrick Hand SC', cursive;
  font-size: 13px;
  letter-spacing: 4px;
  color: #f5ecf9;
  transition: all 0.7s ease;
}

.accuse:hover {
  background-color: #222222;
  cursor: pointer;
}

.hint.toggle_suspects,
.hint.toggle_nieuwsoverzicht {
  width: 130px;
}

.hint {
  position: absolute;
  width: 100px;
  height: 25px;
  border: none;
  border-radius: 6px;
  background-color: #323232;
  color: #bdddec;
  transition: all 1s ease;
}

.hint:hover {
  background-color: #1b1b1b;
  cursor: pointer;
}

.hint.reset_click {
  position: absolute;
  width: 25px;
  background-color: #fa5050;
  font-size: 16px;
  color: #fff;
  transition: all 1s ease;
}

.reset_click:hover {
  background-color: #e63a3a;
  cursor: pointer;
}

.dark_background,
.dark_background_lock {
  width: 688px;
  height: 500px;
  background-color: #323232;
  opacity: 0.8;
}

.confirmation {
  background-color: #d9e5e7;
  color: #323232;
  padding: 10px;
  box-sizing: border-box;
  width: 50%;
  left: 25%;
  top: 33%;
  border-radius: 10px;
}

.confirmation.correct_accusation {
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
}

.confirm {
  width: 120px;
  height: 30px;
  background-color: #d9ef5e;
  border-radius: 10px;
  border: 0px;
  transition: all 0.7s ease;
}

.confirm:hover {
  background-color: #bfd351;
  cursor: pointer;
}

.deny,
.close {
  width: 120px;
  height: 30px;
  background-color: #ef5e5e;
  border-radius:...

JavaScript

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


$(document).on('click', '.toggle_suspects', function() {
  var toggle = $(this).html();
  if (toggle == 'Suspects') {
    $(this).html('Explanation');
    $('.suspect_container').show();
    $('.explanation').hide();
    $('.nieuwsoverzicht').hide();
    $('.hide').hide();
  } else {
    $(this).html('Suspects');
    $('.suspect_container').hide();
    $('.explanation').show();
    $('.nieuwsoverzicht').hide();
    $('.hide').show();
  }
});

$(document).on('click', '.toggle_nieuwsoverzicht', function() {
    $('.toggle_suspects').html('Explanation');
	$('.suspect_container').hide();
	$('.explanation').hide();
	$('.nieuwsoverzicht').show();
    $('.hide').show();
});

$(document).ready(function() {
  var checkPoint = localStorage.getItem('checkPoint');
  var cooldown = localStorage.getItem('inCooldown');
  if (checkPoint == null || cooldown == 1) {
    chooseCulprit();
    localStorage.setItem('checkPoint', 1);
  }
});

function chooseCulprit() {
  var cooldown = localStorage.getItem('inCooldown');
  if (cooldown == 1) {
    CooldownMechanics();
  } else {
    localStorage.clear();
    var culprit_number = Math.floor((Math.random() * 6) + 1);
    localStorage.culprit = culprit_number;
    magnify('myimage', 1.5);
    $('.suspect_info').parent().css('filter', 'grayscale(0)');
  }
}

$(document).on('click', '.suspect_info', function() {
  var greyscale = $(this).parent().css('filter');
  if (greyscale == 'grayscale(1)') {
    $(this).parent().css('filter', 'grayscale(0)');
  } else {
    $(this).parent().css('filter', 'grayscale(1)');
  }
});

$(document).ready(function() {
	setTimeout(function() {
    	magnify('myimage', 1.5);
    }, 2000);
});

function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  $('.img_magnifier_glass').remove();
  glass = document.createElement("DIV");
 ...