Commit 1dc1ad6f authored by Hanna's avatar Hanna
Browse files

initial commit

parents
Images:
Mushroom in the logo: https://pixabay.com/illustrations/mario-mushroom-video-game-turn-on-1081471/
Credits:
Jquery
Bootstrap
Font-awesome
slick.js
noUiSlider
jquery.zoom.js
Images : Unsplash , pixabay
Goolgle fonts : Montserrat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>IRMA demo</title>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<!-- Slick -->
<link type="text/css" rel="stylesheet" href="css/slick.css" />
<link type="text/css" rel="stylesheet" href="css/slick-theme.css" />
<!-- nouislider -->
<link type="text/css" rel="stylesheet" href="css/nouislider.min.css" />
<!-- Font Awesome Icon -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Custom stlylesheet -->
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body onload="show()">
<!-- <div id="snackbar">Leeftijd succesvol bewezen. Spel is in winkelwagen geplaatst.
<button onclick="hide()" id="x">
X
</button>
</div> -->
<!-- HEADER -->
<header>
<div id="top-header" style="padding-top: 0px; background-color: #7ecadf46 ;">
<!-- container -->
<div class="container" id="alert"
style="width: auto; display: -webkit-flex; display: flex; align-items: center;">
<div style=" font-size: 30px; position: relative; width: 100px; height: 100px; ">
<a target="blank" href="http://www.irma.app"><img id="logo" src="./img/irma-logo.png"
style="position: absolute; top: 0; bottom: 0;margin: auto; max-height: 60px; max-width: 50vw;"
alt=""></a>
</div>
<div style=" width: 70%; padding-top: 20px; padding-left: 20px;" class="message">
<h4>
<span style="font-weight: 400;">Deze site is een <a
style="font-weight: 500;text-decoration: underline;" target=" blank"
href="http://www.irma.app">IRMA</a> demo en geen echte
webwinkel.
Gebruik de IRMA
app (<a style="font-weight: 500;text-decoration: underline;" target="blank"
href="https://privacybydesign.foundation/download/">download</a> en
<a style="font-weight: 500;text-decoration: underline;" target="blank"
href="https://services.nijmegen.nl/irma/gemeente/start">vullen</a>) om
op een privacy-vriendelijke manier aan te tonen dat je
oud genoeg bent om een van deze games te kopen.</span>
</h4>
</div>
<div id="irma" style="text-align: right; width: 30%; padding-top: 20px; padding-right: 25px;">
<h4><a target="blank" style="font-weight: 700;text-decoration: underline;"
href="http://www.irma.app">IRMA?</a>
</h4>
</div>
</div>
</div>
<div style="padding-top: 20px; padding-bottom: 20px; background-color: #15161d ; ">
<!-- container -->
<div class="container" style="width: auto;">
<div
style="float: left; color: white; font-size: 30px; position: relative; width: 200px; height: 80px; ">
<a href="index.html"><img src="./img/angrygames-logo.png"
style="position: absolute; top: 0; bottom: 0;margin: auto; max-height: 60px; max-width: 50vw;"
alt=""></a>
</div>
<div class="col-md-3 clearfix" style="float: right; width: 20%;">
<div class="header-ctn" style="float: right; padding-top: 25px;">
<!-- Cart -->
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<i class="fa fa-shopping-cart"></i>
<span>Winkelwagen</span>
<div class="qty">1</div>
</a>
<!-- /Cart -->
</div>
</div>
</div>
</div>
</div>
<!-- /TOP HEADER -->
</header>
<!-- /HEADER -->
<!-- BREADCRUMB -->
<div id="breadcrumb" class="section" style="background: #F6FFF5;">
<!-- container -->
<div class="container">
<!-- row -->
<div class="row">
<div class="col-md-12">
<h3 class="breadcrumb-header" style="text-transform: none; ">Leeftijdscontrole succesvol.</h3>
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
<!-- /BREADCRUMB -->
<!-- SECTION -->
<div class="section">
<!-- container -->
<div class="container">
<!-- row -->
<div class="row">
<!-- Order Details -->
<!-- Product main img -->
<div class="col-md-4">
<div id="product-main-img">
<div class="">
<img id="game-image" alt="" style="width: 100%">
</div>
</div>
</div>
<!-- /Product main img -->
<div class="col-md-7 order-details" style="margin-top: 15px; padding: 0px 30px 20px;">
<div class="section-title text-center">
<h3 class="title">Demo winkelwagen</h3>
</div>
<div class="order-summary">
<div class="order-col">
<div><strong>Product</strong></div>
<div><strong>TOTAL</strong></div>
</div>
<div class="order-products">
<div class="order-col">
<div id="gamename"></div>
<div>Gratis</div>
</div>
</div>
<!-- <div class="order-col">
<div>Verzendkosten</div>
<div><strong>Gratis</strong></div>
</div> -->
<div class="order-col">
<div><strong>TOTAL</strong></div>
<div><strong class="order-total" style="color: black;">0.00€</strong></div>
</div>
</div>
<!-- <div class="payment-method">
<div class="input-radio">
<input type="radio" name="payment" id="payment-1">
<label for="payment-1">
<span></span>
iDeal
</label>
</div>
<div class="input-radio">
<input type="radio" name="payment" id="payment-2">
<label for="payment-2">
<span></span>
Invoice
</label>
</div>
<div class="input-radio">
<input type="radio" name="payment" id="payment-3">
<label for="payment-3">
<span></span>
Paypal
</label>
</div>
</div> -->
<div>
<p>
Dit is alleen een demo om de leeftijdscontrole inzichtelijk te maken.
</p>
</div>
<a href="#"
onclick="alert('Dit is alleen een demo pagina. Het is helaas niet mogelijk het spel echt te bestellen.');"
class="primary-btn order-submit"
style="background-color: white; color: black; border: 2px solid; min-width: 250px; max-width: 100%; float: left; margin-right: 20px; ">Bestellen</a>
<a href="index.html" class="primary-btn order-submit"
style="background-color: black; color: white; padding: 14px 32px; min-width: 250px; max-width: 100%; float: left; ">Demo
opnieuw proberen.</a>
</div>
<!-- /Order Details -->
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
<!-- /SECTION -->
<!-- FOOTER -->
<footer id="footer">
<!-- bottom footer -->
<div id="bottom-footer" style="padding-bottom: 20px; padding-top: 5px;">
<div class="container">
<!-- row -->
<div class="row">
<div class="col-md-12 text-center">
<span class="copyright" style="font-size: 14px;">
<!-- Link back to Colorlib has been removed. Lincense has been purchased. -->
Deze site is een fictieve game-winkel, die aspecten van IRMA demonstreert.<br> Door middel
van een leeftijdsgrens-attribuut toont u aan dat u oud genoeg bent om de games te kopen.<br>
De spelletjes zijn niet echt en dienen alleen ter illustratie. <br>
Meer over IRMA: <a style="color: white;" href="http://www.irma.app">www.irma.app</a>
</span>
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
<!-- /bottom footer -->
</footer>
<!-- /FOOTER -->
<!-- jQuery Plugins -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/nouislider.min.js"></script>
<script src="js/jquery.zoom.min.js"></script>
<script src="js/main.js"></script>
<script>
var game_id = location.search.split("game=")[1];
$('#game-image').attr('src', 'img/' + game_id + '.png');
let products = {
'product01': 'Fog Fighter',
'product02': 'Crazy Courier',
'product03': 'Moonlight Mission',
'product04': 'Droned'
}
$('#gamename').html(products[game_id]);
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
/*! nouislider - 10.0.0 - 2017-05-28 14:52:48 */.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative;direction:ltr}.noUi-base{width:100%;height:100%;position:relative;z-index:1}.noUi-connect{position:absolute;right:0;top:0;left:0;bottom:0}.noUi-origin{position:absolute;height:0;width:0}.noUi-handle{position:relative;z-index:1}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:top .3s,right .3s,bottom .3s,left .3s;transition:top .3s,right .3s,bottom .3s,left .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-base,.noUi-handle{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;left:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;left:-6px;top:-17px}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connect{background:#3FB8AF;border-radius:4px;box-shadow:inset 0 0 3px rgba(51,51,51,.45);-webkit-transition:background 450ms;transition:background 450ms}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-large,.noUi-marker-sub{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);padding-left:25px}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}
\ No newline at end of file
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
This diff is collapsed.
This diff is collapsed.
File added
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">