Initial commit

angle-double-down-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" data-prefix="fas" data-icon="angle-double-down" class="svg-inline--fa fa-angle-double-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M143 256.3L7 120.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0L313 86.3c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.4 9.5-24.6 9.5-34 .1zm34 192l136-136c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.4-9.4-24.6-9.4-33.9 0L160 352.1l-96.4-96.4c-9.4-9.4-24.6-9.4-33.9 0L7 278.3c-9.4 9.4-9.4 24.6 0 33.9l136 136c9.4 9.5 24.6 9.5 34 .1z"></path></svg>

css/fullpage.css

@@ -0,0 +1,224 @@
+/*!
+ * fullPage 3.0.2
+ * https://github.com/alvarotrigo/fullPage.js
+ *
+ * @license GPLv3 for open source use only
+ * or Fullpage Commercial License for commercial use
+ * http://alvarotrigo.com/fullPage/pricing/
+ *
+ * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
+ */
+html.fp-enabled,
+.fp-enabled body {
+    margin: 0;
+    padding: 0;
+    overflow:hidden;
+
+    /*Avoid flicker on slides transitions for mobile phones #336 */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+.fp-section {
+    position: relative;
+    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
+    -moz-box-sizing: border-box; /* <=28 */
+    box-sizing: border-box;
+}
+.fp-slide {
+    float: left;
+}
+.fp-slide, .fp-slidesContainer {
+    height: 100%;
+    display: block;
+}
+.fp-slides {
+    z-index:1;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
+    transition: all 0.3s ease-out;
+}
+.fp-section.fp-table, .fp-slide.fp-table {
+    display: table;
+    table-layout:fixed;
+    width: 100%;
+}
+.fp-tableCell {
+    display: table-cell;
+    vertical-align: middle;
+    width: 100%;
+    height: 100%;
+}
+.fp-slidesContainer {
+    float: left;
+    position: relative;
+}
+.fp-controlArrow {
+    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+    -moz-user-select: none; /* mozilla browsers */
+    -khtml-user-select: none; /* webkit (konqueror) browsers */
+    -ms-user-select: none; /* IE10+ */
+    position: absolute;
+    z-index: 4;
+    top: 50%;
+    cursor: pointer;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    margin-top: -38px;
+    -webkit-transform: translate3d(0,0,0);
+    -ms-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+}
+.fp-controlArrow.fp-prev {
+    left: 15px;
+    width: 0;
+    border-width: 38.5px 34px 38.5px 0;
+    border-color: transparent #fff transparent transparent;
+}
+.fp-controlArrow.fp-next {
+    right: 15px;
+    border-width: 38.5px 0 38.5px 34px;
+    border-color: transparent transparent transparent #fff;
+}
+.fp-scrollable {
+    overflow: hidden;
+    position: relative;
+}
+.fp-scroller{
+    overflow: hidden;
+}
+.iScrollIndicator{
+    border: 0 !important;
+}
+.fp-notransition {
+    -webkit-transition: none !important;
+    transition: none !important;
+}
+#fp-nav {
+    position: fixed;
+    z-index: 100;
+    margin-top: -32px;
+    top: 50%;
+    opacity: 1;
+    -webkit-transform: translate3d(0,0,0);
+}
+#fp-nav.fp-right {
+    right: 17px;
+}
+#fp-nav.fp-left {
+    left: 17px;
+}
+.fp-slidesNav{
+    position: absolute;
+    z-index: 4;
+    opacity: 1;
+    -webkit-transform: translate3d(0,0,0);
+    -ms-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+    left: 0 !important;
+    right: 0;
+    margin: 0 auto !important;
+}
+.fp-slidesNav.fp-bottom {
+    bottom: 17px;
+}
+.fp-slidesNav.fp-top {
+    top: 17px;
+}
+#fp-nav ul,
+.fp-slidesNav ul {
+  margin: 0;
+  padding: 0;
+}
+#fp-nav ul li,
+.fp-slidesNav ul li {
+    display: block;
+    width: 14px;
+    height: 13px;
+    margin: 7px;
+    position:relative;
+}
+.fp-slidesNav ul li {
+    display: inline-block;
+}
+#fp-nav ul li a,
+.fp-slidesNav ul li a {
+    display: block;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    text-decoration: none;
+}
+#fp-nav ul li a.active span,
+.fp-slidesNav ul li a.active span,
+#fp-nav ul li:hover a.active span,
+.fp-slidesNav ul li:hover a.active span{
+    height: 12px;
+    width: 12px;
+    margin: -6px 0 0 -6px;
+    border-radius: 100%;
+ }
+#fp-nav ul li a span,
+.fp-slidesNav ul li a span {
+    border-radius: 50%;
+    position: absolute;
+    z-index: 1;
+    height: 4px;
+    width: 4px;
+    border: 0;
+    background: #333;
+    left: 50%;
+    top: 50%;
+    margin: -2px 0 0 -2px;
+    -webkit-transition: all 0.1s ease-in-out;
+    -moz-transition: all 0.1s ease-in-out;
+    -o-transition: all 0.1s ease-in-out;
+    transition: all 0.1s ease-in-out;
+}
+#fp-nav ul li:hover a span,
+.fp-slidesNav ul li:hover a span{
+    width: 10px;
+    height: 10px;
+    margin: -5px 0px 0px -5px;
+}
+#fp-nav ul li .fp-tooltip {
+    position: absolute;
+    top: -2px;
+    color: #fff;
+    font-size: 14px;
+    font-family: arial, helvetica, sans-serif;
+    white-space: nowrap;
+    max-width: 220px;
+    overflow: hidden;
+    display: block;
+    opacity: 0;
+    width: 0;
+    cursor: pointer;
+}
+#fp-nav ul li:hover .fp-tooltip,
+#fp-nav.fp-show-active a.active + .fp-tooltip {
+    -webkit-transition: opacity 0.2s ease-in;
+    transition: opacity 0.2s ease-in;
+    width: auto;
+    opacity: 1;
+}
+#fp-nav ul li .fp-tooltip.fp-right {
+    right: 20px;
+}
+#fp-nav ul li .fp-tooltip.fp-left {
+    left: 20px;
+}
+.fp-auto-height.fp-section,
+.fp-auto-height .fp-slide,
+.fp-auto-height .fp-tableCell{
+    height: auto !important;
+}
+
+.fp-responsive .fp-auto-height-responsive.fp-section,
+.fp-responsive .fp-auto-height-responsive .fp-slide,
+.fp-responsive .fp-auto-height-responsive .fp-tableCell {
+    height: auto !important;
+}

index.html

@@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="author" content="Harambee Nerds Commissie [nerds@harambee.nl]">
+
+    <meta name="keywords" content="volleybal, volleyball, enschede, universiteit, twente, university, of, twente, student, studenten, vereniging, association">
+    <meta name="description" content="Information about COVID-19 measures and playing at Harambee">
+    <meta name="theme-color" content="#66008C">
+
+    <meta property="og:title" content="🏐 v.v Harambee — Student volleyball in Enschede">
+    <meta property="og:description" content="Information regarding COVID-19 measures and playing at Harambee">
+    <meta property="og:image" content="https://harambee.utwente.nl/layout/images/logo-harambee.png">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://covid-19.harambee.utwente.nl">
+
+    <title>Harambee - COVID-19 maatregelen</title>
+
+    <link rel="shortcut icon" href="harambee.ico" type="image/x-icon" />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.css" integrity="sha384-5ifpfhR/+nZGyBOnFGX9Blzx7418/Cj6eK1kMEJFUCgv39+AfAt9reg9LtRPdCQs" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" integrity="sha384-xyZLiqnBEFn1hDkS8VeG/YHoqOjS/ucimT8TI6GDr9+ZP1UNbZr6d/q0ldMi/xvL" crossorigin="anonymous">    
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Exo+2" >
+
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/vendors/scrolloverflow.min.js" integrity="sha384-JidlVB7YmUUH+vUfjaYKep1qGThQCAoL90VJQDRqiS2xAjWJuAIc7Nn5dxb8fOnJ" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.js" integrity="sha384-6yU9abmAgbGzbp5/zFigT6Ltjr3M5b0gSE6XFSO+ZMMuS1AXZlyh2tqWSVgIHRu+" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <script src="js/jquery.localize.min.js"></script>
+
+
+    <script type="text/javascript">
+    
+    function toProductionSite() {
+        var name="seen-covid-info";
+        var value="0";
+        var days=30;
+        var expires = "";
+        if (days) {
+            var date = new Date();
+            date.setTime(date.getTime() + (days*24*60*60*1000));
+            expires = "; expires=" + date.toUTCString();
+        }
+        document.cookie = name + "=" + (value || "")  + expires + "; domain=.harambee.utwente.nl; path=/";
+
+        window.location.href = "https://harambee.utwente.nl";
+    };
+
+    </script>
+
+
+    <style>
+        p {
+            font-size: 110%;
+        }
+
+        .centre{
+            text-align: center;
+        }
+
+        #subtitle{
+            padding-top: 20px;
+        }
+
+        .section{
+            text-align: left;
+            overflow: hidden;
+        }
+
+        #harambeeVideo{
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+            background-size: 100% 100%;
+            background-color: orange;
+            background-position: center center;
+            background-size: contain;
+            object-fit: cover;
+            z-index: 3;
+        }
+
+        .container{
+            position: relative;
+            z-index: 4;
+            width: 100%;
+            left: 0%;
+            top: 0.5%;
+            font-family: 'Exo 2', sans-serif;
+        }
+
+        #section0 .jumbotron{
+            color: purple;
+        }
+
+        .jumbotron-transparent{
+            background: rgba(221, 210, 210, 0.9);
+        }
+        
+        .alert-tryouts{
+            background: rgba(255, 89, 0, 0.8);
+            color: white;
+        }
+
+        .alert-member{
+            background: rgba(102, 0, 140, 0.65);
+            color: white;
+        }
+
+        .alert-moreinfo{
+            background: rgba(230, 230, 230, 0.6);
+            color: black;
+        }
+
+        .btn-tryout{
+            background: rgba(255, 89, 0, 1);
+            color: white;
+        }
+
+        .btn-member{
+            background: lightblue;
+            color: black;
+        }
+
+        .btn-disabled{
+            background: rgba(230, 230, 230, 0.2);
+            color: rgba(230, 230, 230, 0.5);
+            font-style: italic;
+            font-weight: lighter;
+        }
+
+        #section0{
+            background-image: url(./media/bg.svg);
+            background-size: inherit;
+            background-color: orangered;
+            background-repeat: no-repeat;
+            background-position: top;
+            padding: 2% 0 0 0;
+        }
+
+        .haramPaars{
+            color: purple;
+            font-weight: bold;
+        }
+
+        .haramOranje{
+            color: rgb(255, 89, 0);
+        }
+
+        .link{
+            color: purple;
+        }
+
+        .jumbotron img{
+            padding-bottom: 15px;
+        }
+
+        ul.no-bullet{
+            list-style: none;
+        }
+
+        ul.no-bullet li{
+            padding-top: 0.35em;
+            padding-left: 1.0em;
+            text-indent: -1.0em;
+        }
+
+        #fp-nav ul li a span, .fp-slidesNav ul li a span{
+            background-color: rgba(230, 230, 230, 1);
+        }
+
+        @font-face {
+            font-family: 'Tropical Asian';
+            src: url(./tropicalasian.ttf);
+        }
+
+        @font-face{
+            font-family: 'BLACK';
+            src: url(./black.ttf);
+        }
+
+        .kick-in_header{
+            font-family: 'Tropical Asian', sans-serif;
+        }
+
+        .kick-in_content{
+            font-family: 'BLACK', sans-serif;
+            margin-bottom: -5px;
+        }
+
+        .regular-site{
+            position: absolute;
+            display: block;
+            top: 0.4em;
+            right: 0.4em;
+            z-index: 6;
+            font-family: 'Exo 2', sans-serif;
+            color: white;
+            background-color: rgba(255, 89, 0, 0.6)
+        }
+
+        .fa-rocket {
+            font-size: 130%;
+        }
+
+    </style>
+</head>
+<body>
+
+    <div id="fullscreen">
+        <div class="section" id="section0">
+
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="jumbotron jumbotron-transparent">
+                            <img class="animated" src="media/harambee-logo.png">
+                            <h2>Informatie over COVID-19 maatregelen bij Harambee</h2>
+                            <p id="subtitle">De universiteit heeft verschillende regels opgesteld zodat we veilig kunnen sporten. Je vind ze hier op een rijtje.</p>
+                            <p>Mochten aan de hand van deze pagina ontduidelijkheden zijn, mail dan het bestuur: <a href="mailto:bestuur@harambee.nl">bestuur@harambee.nl</a>.</p>                        
+                            <a href="hhttps://harambee.utwente.nl/media/cms/5f607055a950d/SU%20and%20Sports%20Centre%20Rules%20and%20Guidelines.pdf" role="button" class="btn btn-tryout" aria-pressed="true">
+                                <i class="fas fa-file-pdf"></i> COVID-19 reglement 
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="animated fadeInUp faster alert alert-member shadow">
+                            <h2>Voor sporters</h2>
+                            <ul class="list-unstyled">
+                                <li><i class="fas fa-hands-wash"></i> Was je handen voor en na trainingen en wedstrijden.</li>
+                                <li><i class="fas fa-people-arrows"></i> Hou buiten rally's altijd 1,5 meter afstand tot elkaar. Ook op de spelersbank.</li>
+                                <li><i class="fas fa-user-clock"></i> Voorafgaand aan een wedstrijd mag een team niet de zaal in zolang er nog andere ploegen in de hal bezig zijn.</li>
+                                <li><i class="fas fa-handshake-alt-slash"></i> Voorafgaand aan wedstrijden geven we geen handen.</li>
+                                <li><i class="fas fa-head-side-cough-slash"></i> Bij voorkeur niet yellen binnen 1,5 meter van elkaar.</li>
+                                <li><i class="fas fa-volleyball-ball"></i> Na trainingen en wedstrijden moeten de gebruikte ballen worden gedesinfecteerd.</li>
+                            </ul>
+                        </div>
+                        <div class="animated fadeInDown fast alert alert-tryouts shadow">
+                            <h2>Faciliteiten</h2>
+                            <ul class="list-unstyled">
+                                <li><i class="fas fa-person-booth"></i> Kleedkamers zijn beperkt beschikbaar, max. 6 personen per kleedkamer.</li>
+                                <li><i class="fas fa-shower"></i> Max. 2 personen tegelijk in de douches.</li>
+                            </ul>
+                        </div>
+                        <div class="animated fadeInDown fast alert alert-tryouts shadow">
+                            <h2>Voor toeschouwers</h2>
+                            <ul class="list-unstyled">
+                                <li><i class="fas fa-users-slash"></i> Publiek in de sporthallen is nog <em>niet</em> toegestaan!</li>
+                                <li><i class="fas fa-coffee"></i> De kantine is gewoon geopend. Indien je verzekerd wil zijn van een zitplaats dien je te reserveren.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="row justify-content-center">
+                    <div class="col-md-4">
+                        <div class="alert alert-member shadow text-center">
+                            <!-- <p>Ik heb de informatie gelezen.</p> -->
+                            <a href="#" onclick="toProductionSite()" role="button" class="btn btn-tryout" aria-pressed="true">
+                                Door naar de normale site <i class="align-middle fas fa-rocket"></i> 
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+    new fullpage('#fullscreen', {
+        // options
+        licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
+        anchors: ['home','volleyball','association'],
+        navigation: true,
+        navigationPosition: 'right',
+        scrollOverflow: true
+    });
+    </script>
+    
+</body>
+</html>

js/jquery.localize.min.js

@@ -0,0 +1,4 @@
+/*! Localize - v0.2.0 - 2016-10-13
+ * https://github.com/coderifous/jquery-localize
+ * Copyright (c) 2016 coderifous; Licensed MIT */
+!function(a){var b;return b=function(a){return a=a.replace(/_/,"-").toLowerCase(),a.length>3&&(a=a.substring(0,3)+a.substring(3).toUpperCase()),a},a.defaultLanguage=b(navigator.languages&&navigator.languages.length>0?navigator.languages[0]:navigator.language||navigator.userLanguage),a.localize=function(c,d){var e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v;return null==d&&(d={}),v=this,h={},g=d.fileExtension||"json",f=a.Deferred(),k=function(a,b,c){var e;switch(null==c&&(c=1),c){case 1:return h={},d.loadBase?(e=a+("."+g),i(e,a,b,c)):k(a,b,2);case 2:return e=""+a+"-"+b.split("-")[0]+"."+g,i(e,a,b,c);case 3:return e=""+a+"-"+b.split("-").slice(0,2).join("-")+"."+g,i(e,a,b,c);default:return f.resolve()}},i=function(b,c,e,f){var g,i,j;return null!=d.pathPrefix&&(b=""+d.pathPrefix+"/"+b),j=function(b){return a.extend(h,b),q(h),k(c,e,f+1)},i=function(){return 2===f&&e.indexOf("-")>-1?k(c,e,f+1):d.fallback&&d.fallback!==e?k(c,d.fallback):void 0},g={url:b,dataType:"json",async:!0,timeout:null!=d.timeout?d.timeout:500,success:j,error:i},"file:"===window.location.protocol&&(g.error=function(b){return j(a.parseJSON(b.responseText))}),a.ajax(g)},q=function(a){return null!=d.callback?d.callback(a,e):e(a)},e=function(b){return a.localize.data[c]=b,v.each(function(){var c,d,e;return c=a(this),d=c.data("localize"),d||(d=c.attr("rel").match(/localize\[(.*?)\]/)[1]),e=u(d,b),null!=e?l(c,d,e):void 0})},l=function(b,c,d){return b.is("input")?o(b,c,d):b.is("textarea")?o(b,c,d):b.is("img")?n(b,c,d):b.is("optgroup")?p(b,c,d):a.isPlainObject(d)||b.html(d),a.isPlainObject(d)?m(b,d):void 0},o=function(b,c,d){var e;return e=a.isPlainObject(d)?d.value:d,b.is("[placeholder]")?b.attr("placeholder",e):b.val(e)},m=function(a,b){return s(a,"title",b),s(a,"href",b),t(a,"text",b)},p=function(a,b,c){return a.attr("label",c)},n=function(a,b,c){return s(a,"alt",c),s(a,"src",c)},u=function(a,b){var c,d,e,f;for(c=a.split(/\./),d=b,e=0,f=c.length;f>e;e++)a=c[e],d=null!=d?d[a]:null;return d},s=function(a,b,c){return c=u(b,c),null!=c?a.attr(b,c):void 0},t=function(a,b,c){return c=u(b,c),null!=c?a.text(c):void 0},r=function(a){var b;return"string"==typeof a?"^"+a+"$":null!=a.length?function(){var c,d,e;for(e=[],c=0,d=a.length;d>c;c++)b=a[c],e.push(r(b));return e}().join("|"):a},j=b(d.language?d.language:a.defaultLanguage),d.skipLanguage&&j.match(r(d.skipLanguage))?f.resolve():k(c,j,1),v.localizePromise=f,v},a.fn.localize=a.localize,a.localize.data={}}(jQuery);