Uploading website to github
Guuq
5 years ago
commit
497034ba28
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<link rel="stylesheet" href="/resources/css/404.css">
|
||||||
|
<link rel="stylesheet" href="/resources/cssall.css">
|
||||||
|
<link rel="stylesheet" href="/resources/css/navbar.css">
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||||
|
<title>Error</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="box" style="margin-top:5rem;margin-left:2%;">
|
||||||
|
<h1 align="center">Error: 404</h1>
|
||||||
|
<h1 align="center">Something went wrong, try a different link/address</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/resources/js/navbar.json.js"></script>
|
||||||
|
<script src="/resources/js/insertNavbar.js"></script>
|
||||||
|
<script src="/resources/javall.js" charset="utf-8"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<link rel="stylesheet" href="/resources/cssall.css">
|
||||||
|
<link rel="stylesheet" href="/resources/css/navbar.css">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||||
|
<title>Canvas</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<canvas id="canvas" width="1920" height="1080"></canvas>
|
||||||
|
|
||||||
|
<script src="/resources/js/navbar.json.js"></script>
|
||||||
|
<script src="/resources/js/canvas.js"></script>
|
||||||
|
<script src="/resources/js/insertNavbar.js"></script>
|
||||||
|
<script src="/resources/javall.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<link rel="stylesheet" href="/resources/css/color.css">
|
||||||
|
<link rel="stylesheet" href="/resources/cssall.css">
|
||||||
|
<link rel="stylesheet" href="/resources/css/navbar.css">
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||||
|
<title>Color</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="/resources/js/navbar.json.js"></script>
|
||||||
|
<script src="/resources/js/insertNavbar.js"></script>
|
||||||
|
<script src="/resources/javall.js" charset="utf-8"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<link rel="stylesheet" href="/resources/css/contact.css">
|
||||||
|
<link rel="stylesheet" href="/resources/cssall.css">
|
||||||
|
<link rel="stylesheet" href="/resources/css/navbar.css">
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||||
|
<title>Contact</title>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<label class="appearance" title="Change the appearance of the webpage">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="appearanceSlider"></span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<script src="/resources/js/navbar.json.js"></script>
|
||||||
|
<script src="/resources/js/insertNavbar.js"></script>
|
||||||
|
<script src="/resources/javall.js" charset="utf-8"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<meta name="description" content="Website gemaakt door Guus van Meerveld">
|
||||||
|
<meta name="author" content="Guus van Meerveld">
|
||||||
|
<link rel="stylesheet" href="/resources/css/downloads.css">
|
||||||
|
<link rel="stylesheet" href="/resources/cssall.css">
|
||||||
|
<link rel="stylesheet" href="/resources/css/navbar.css">
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||||
|
<title>Downloads</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- Livesearch -->
|
||||||
|
<input type="text" id="livesearch" placeholder="Downloads doorzoeken"> <br>
|
||||||
|
|
||||||
|
<script src="/resources/js/navbar.json.js"></script>
|
||||||
|
<script src="/resources/js/insertNavbar.js"></script>
|
||||||
|
<script src="/resources/js/downloads.json.js"></script>
|
||||||
|
<script src="/resources/js/insertDownloads.js"></script>
|
||||||
|
<script src="/resources/javall.js" charset="utf-8"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,121 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
|
<meta name="description" content="Website gemaakt door Guus van Meerveld">
|
||||||
|
<meta name="author" content="Guus van Meerveld">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Home</title>
|
||||||
|
<link rel="stylesheet" href="/resources/css/shortcuts.css">
|
||||||
|
<link rel="stylesheet" href="/resources/css.css">
|
||||||
|
<link rel="stylesheet" href="/resources/cssall.css">
|
||||||
|
<link rel="stylesheet" href="/resources/css/navbar.css">
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Google search -->
|
||||||
|
<div align="center">
|
||||||
|
<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" autofocus spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Clock -->
|
||||||
|
<div id="timeBox" class="box">
|
||||||
|
<h1 id="hours" class="time"></h1><h1 id="mins" class="time"></h1><h1 id="secs" class="time"></h1> <br>
|
||||||
|
<h1 id="date"></h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- How much of the year is left -->
|
||||||
|
<div id="yearBox" class="box">
|
||||||
|
<p id="yearLeft"></p>
|
||||||
|
<progress max="360" id="yearProgress"></progress>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Shortcuts -->
|
||||||
|
<div id="shortcutBox" class="box">
|
||||||
|
<span id="shortcuts">
|
||||||
|
<a href="https://www.youtube.com/" target="_blank"><div class="shortcutImgBox">
|
||||||
|
<img class="shortcutImg" src="/resources/img/youtube.png" alt=""><p class="shortcutText">Youtube</p>
|
||||||
|
</div></a>
|
||||||
|
<a href="https://pantarijn.magister.net" target="_blank"><div class="shortcutImgBox">
|
||||||
|
<img class="shortcutImg" src="/resources/img/magister.png" alt=""><p class="shortcutText">Magister</p>
|
||||||
|
</div></a>
|
||||||
|
<a href="https://onedrive.live.com/about/en-us/signin/" target="_blank"><div class="shortcutImgBox">
|
||||||
|
<img src="/resources/img/onedrive.png" class="shortcutImg" alt=""><p class="shortcutText">Onedrive</p>
|
||||||
|
</div></a>
|
||||||
|
<a href="https://codepanta.nl/login/index.php" target="_blank"><div class="shortcutImgBox">
|
||||||
|
<img src="/resources/img/codepanta.png" class="shortcutImg" alt=""><p class="shortcutText">Codepanta</p>
|
||||||
|
</div></a>
|
||||||
|
<a href="https://reddit.com" target="_blank"><div class="shortcutImgBox">
|
||||||
|
<img src="/resources/img/reddit.png" class="shortcutImg" alt=""><p class="shortcutText">Reddit</p>
|
||||||
|
</div></a>
|
||||||
|
<a href="https://open.spotify.com/browse/featured" target="_blank"><div class="shortcutImgBox">
|
||||||
|
<img src="/resources/img/spotify.png" class="shortcutImg" alt=""><p class="shortcutText">Spotify</p>
|
||||||
|
</div></a>
|
||||||
|
<a href="https://w3schools.com" target="_blank"><div class="shortcutImgBox">
|
||||||
|
<img src="/resources/img/w3schools.png" class="shortcutImg" alt=""><p class="shortcutText">W3Schools</p>
|
||||||
|
</div></a>
|
||||||
|
<a href="https://maps.google.com" target="_blank"><div class="shortcutImgBox">
|
||||||
|
<img src="/resources/img/googlemaps.png" class="shortcutImg" alt=""><p class="shortcutText">Maps</p>
|
||||||
|
</div></a>
|
||||||
|
<a href="https://translate.google.com" target="_blank"><div class="shortcutImgBox">
|
||||||
|
<img src="/resources/img/googletranslate.png" class="shortcutImg" alt=""><p class="shortcutText">Translate</p>
|
||||||
|
</div></a>
|
||||||
|
</span>
|
||||||
|
<div class="shortcutImgBox" onclick="openMenu()" title="Voeg je eigen shortcut toe"><img src="/resources/img/cross.png" class="shortcutImg"><p class="shortcutText">Voeg toe</p></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div id="footer"> <!-- No footer tag used because they suck -->
|
||||||
|
|
||||||
|
<!-- Info -->
|
||||||
|
<div id="info" class="box footerBox">
|
||||||
|
<h1 align="center">Info</h1>
|
||||||
|
<p>Ik ben bezig met het maken van deze website voor een schoolproject. Het doel van deze website is om een handige overzichtelijke pagina te hebben waar je van alles kan vinden.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Feedback -->
|
||||||
|
<div id="feedbackBox" class="box footerBox">
|
||||||
|
<b>Hier kunt u feedback voor deze pagina invullen</b> <br>
|
||||||
|
<form action="/" method="get">
|
||||||
|
<textarea placeholder="Vul hier uw feedback in." rows="10" class="input" id="feedbackTextarea" name="feedback"></textarea> <br>
|
||||||
|
<button type="submit" id="feedbackSubmitButton" class="button" title="Stuur uw feedback op">Verstuur</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Links -->
|
||||||
|
<div id="links" class="box footerBox">
|
||||||
|
<b>Links:</b> <br> <br>
|
||||||
|
<a href="https://www.instagram.com/gerda.6/"><button class="btn btn-info">Instagram</button></a>
|
||||||
|
<a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ"><button class="btn btn-danger">Youtube</button></a>
|
||||||
|
<a href="https://www.sololearn.com/Profile/9075320"><button class="btn btn-success">Sololearn</button></a>
|
||||||
|
<a href="https://twitter.com/GuusvanMeerveld"><button class="btn btn-primary">Twitter</button></a>
|
||||||
|
<a href="https://www.discord.gg/GJcEYqj"><button class="btn btn-secondary">Discord</button></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add shortcut Menu -->
|
||||||
|
<div id="opacityMenu" onclick="closeMenu()" class="menu hidden lowerIndex"></div>
|
||||||
|
<div id="addShortcutMenu" class="box menu hidden lowerIndex">
|
||||||
|
<h1 id='menuTitle'>Maak je eigen shortcut</h1><h4 class='alignMenu'>Bedenk een naam voor je shortcut</h4><br>
|
||||||
|
<input type='text' class='input inputMenu' id='shortcutName'><br>
|
||||||
|
<h4 class='alignMenu'>Geef de link van je shortcut</h4><br>
|
||||||
|
<input type='text' class='input inputMenu' id='shortcutLink'>
|
||||||
|
<button class='button' onclick="createShortcut()" id='shortcutCreateButton'>Voeg toe</button>
|
||||||
|
<button class="cancelButton" onclick="closeMenu()" id="shortcutCancelButton">Cancel</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/resources/js/navbar.json.js"></script>
|
||||||
|
<script src="/resources/js/insertNavbar.js"></script>
|
||||||
|
<script src="/resources/js/home.js"></script>
|
||||||
|
<script src="/resources/js/shortcuts.js"></script>
|
||||||
|
<script src="/resources/javall.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,172 @@
|
|||||||
|
/* Mobile support */
|
||||||
|
@viewport {
|
||||||
|
width: device-width;
|
||||||
|
zoom: 1.0;
|
||||||
|
}
|
||||||
|
/* Support for smaller screens */
|
||||||
|
@media screen and (min-width:0px) and (max-width:430px) {
|
||||||
|
.footerBox {
|
||||||
|
height: 16rem!important;
|
||||||
|
}
|
||||||
|
#feedbackBox {
|
||||||
|
margin-top: 18rem!important;
|
||||||
|
}
|
||||||
|
#feedbackTextarea {
|
||||||
|
height: 16vh!important;
|
||||||
|
}
|
||||||
|
#links {
|
||||||
|
margin-top: 36rem!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Support for normal mobile devices */
|
||||||
|
@media screen and (min-width:0px) and (max-width:960px) {
|
||||||
|
#yearBox {
|
||||||
|
width: 96%!important;
|
||||||
|
margin-top: 16rem!important;
|
||||||
|
}
|
||||||
|
.footerBox {
|
||||||
|
display: block!important;
|
||||||
|
width: 96%!important;
|
||||||
|
left: 0px!important;
|
||||||
|
}
|
||||||
|
#feedbackBox {
|
||||||
|
margin-top: 15rem;
|
||||||
|
}
|
||||||
|
#links {
|
||||||
|
margin-top: 30rem;
|
||||||
|
}
|
||||||
|
#footer {
|
||||||
|
top: 71rem!important;
|
||||||
|
}
|
||||||
|
#timeBox {
|
||||||
|
display: block;
|
||||||
|
width: 96%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Main CSS */
|
||||||
|
/* Header */
|
||||||
|
header {
|
||||||
|
margin-top: 6rem;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 2px 2px #363840;
|
||||||
|
}
|
||||||
|
/* Google search */
|
||||||
|
#googleSearchBar {
|
||||||
|
background-color: #ededed;
|
||||||
|
border: #ededed 2px solid;
|
||||||
|
padding: 1rem;
|
||||||
|
width: 96%;
|
||||||
|
margin-top: 5rem;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
outline: none;
|
||||||
|
transition: border .4s;
|
||||||
|
}
|
||||||
|
#googleSearchBar:hover, #googleSearchBar:focus {
|
||||||
|
border: #4c8a80 2px solid;
|
||||||
|
}
|
||||||
|
/* Clock */
|
||||||
|
#timeBox {
|
||||||
|
margin-top: 3rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 2%;
|
||||||
|
padding: 1rem;
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 5rem;
|
||||||
|
}
|
||||||
|
#date {
|
||||||
|
font-size: 150%;
|
||||||
|
}
|
||||||
|
/* How much of the year is left */
|
||||||
|
#yearBox {
|
||||||
|
left: 2%;
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
width: 33%;
|
||||||
|
margin-top: 17rem;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
#yearProgress {
|
||||||
|
border-radius: 1rem;
|
||||||
|
width: 98%;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
#yearProgress::-webkit-progress-bar {
|
||||||
|
background-color: #363840;
|
||||||
|
border-radius: .2rem;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
|
||||||
|
}
|
||||||
|
#yearProgress::-webkit-progress-value {
|
||||||
|
border-radius: .2rem;
|
||||||
|
transition: width .5;
|
||||||
|
background-image:
|
||||||
|
-webkit-linear-gradient(-45deg,
|
||||||
|
transparent 33%, rgba(0, 0, 0, .1) 33%,
|
||||||
|
rgba(0,0, 0, .1) 66%, transparent 66%),
|
||||||
|
-webkit-linear-gradient(top,
|
||||||
|
rgba(255, 255, 255, .25),
|
||||||
|
rgba(0, 0, 0, .25)),
|
||||||
|
-webkit-linear-gradient(left, #09c, #f44);
|
||||||
|
}
|
||||||
|
#yearProgress::-webkit-progress-value::before {
|
||||||
|
content: '80%';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -125%;
|
||||||
|
}
|
||||||
|
#yearLeft {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
/* Footer */
|
||||||
|
#footer {
|
||||||
|
position: absolute;
|
||||||
|
left: 2%;
|
||||||
|
top: 64rem;
|
||||||
|
height: 20%;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.footerBox::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.footerBox {
|
||||||
|
top: 0px;
|
||||||
|
height: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
overflow: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
/* Info blocks */
|
||||||
|
#info {
|
||||||
|
padding: 1rem;
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
#feedbackBox {
|
||||||
|
padding: 1rem;
|
||||||
|
left: 35%;
|
||||||
|
font-size: 1rem;
|
||||||
|
width: 28%;
|
||||||
|
}
|
||||||
|
#feedbackTextarea {
|
||||||
|
width: 98%;
|
||||||
|
margin-top: 8px;
|
||||||
|
height: 6rem;
|
||||||
|
}
|
||||||
|
#feedbackSubmitButton {
|
||||||
|
width: 98%;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
#links {
|
||||||
|
left: 65%;
|
||||||
|
width: 30%;
|
||||||
|
padding: 1rem;
|
||||||
|
font-size: 130%;
|
||||||
|
}
|
||||||
|
#links a button {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
div {
|
||||||
|
height: 90%;
|
||||||
|
width: 96%;
|
||||||
|
padding: 2%;
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
body {
|
||||||
|
background-image: none!important;
|
||||||
|
animation-name: color;
|
||||||
|
animation-duration: 8s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
@keyframes color {
|
||||||
|
0% {background-color: red;}
|
||||||
|
20% {background-color: yellow;}
|
||||||
|
40% {background-color: green;}
|
||||||
|
60% {background-color: blue;}
|
||||||
|
80% {background-color: purple;}
|
||||||
|
100% {background-color: red;}
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
.appearance {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
height: 34px;
|
||||||
|
top: .7rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appearance input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appearanceSlider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 34px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
transition: .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appearanceSlider:before {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
left: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
background-color: white;
|
||||||
|
transition: .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .appearanceSlider {
|
||||||
|
background-color: #2E3747;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .appearanceSlider:before {
|
||||||
|
transform: translateX(25px);
|
||||||
|
}
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
@media screen and (min-width:0px) and (max-width:1020px) {
|
||||||
|
.downloadbox {
|
||||||
|
width: 93%!important;
|
||||||
|
margin: 25px 0 0 1rem!important;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
.headerBox {
|
||||||
|
width: 93%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Headers */
|
||||||
|
#livesearch {
|
||||||
|
background-color: #ededed;
|
||||||
|
border: 2px #ededed solid;
|
||||||
|
padding: 1rem;
|
||||||
|
outline: none;
|
||||||
|
height: 3.5rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
margin: 4rem 0 -1rem 1rem;
|
||||||
|
width: 98%;
|
||||||
|
display: block;
|
||||||
|
transition: border .4s;
|
||||||
|
}
|
||||||
|
#livesearch:hover, #livesearch:focus {
|
||||||
|
border: #4c8a80 2px solid;
|
||||||
|
}
|
||||||
|
/* Classes for blocks */
|
||||||
|
.headerBox {
|
||||||
|
width: 94%;
|
||||||
|
height: 5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1.5rem 0 0 1rem;
|
||||||
|
}
|
||||||
|
.downloadbox {
|
||||||
|
width: 18rem;
|
||||||
|
padding: .9rem;
|
||||||
|
max-height: 6rem;
|
||||||
|
margin: 1.5rem 0 0 1.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
@ -0,0 +1,91 @@
|
|||||||
|
.navigation {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
max-height: 55px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.8;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.navigation button {
|
||||||
|
padding: 1rem;
|
||||||
|
transition: color .5s;
|
||||||
|
border: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
color: white;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.navigation button:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.navbarList {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.navList {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.dropdownList {
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.8;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.dropdownButton {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.navList:hover .dropdownList {
|
||||||
|
display: block!important;
|
||||||
|
}
|
||||||
|
.navigation button:hover {
|
||||||
|
color: #9c9c9c!important;
|
||||||
|
}
|
||||||
|
.home {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Switch */
|
||||||
|
.appearance {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
width: 60px;
|
||||||
|
height: 34px;
|
||||||
|
top: .7rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
}
|
||||||
|
.appearance input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.appearanceSlider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 34px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
transition: .3s;
|
||||||
|
}
|
||||||
|
.appearanceSlider:before {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
left: 4px;
|
||||||
|
bottom: 4px;
|
||||||
|
background-color: white;
|
||||||
|
transition: .3s;
|
||||||
|
}
|
||||||
|
input:checked + .appearanceSlider {
|
||||||
|
background-color: #2E3747;
|
||||||
|
}
|
||||||
|
input:checked + .appearanceSlider:before {
|
||||||
|
transform: translateX(25px);
|
||||||
|
}
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
@media screen and (min-width:0px) and (max-width:960px) {
|
||||||
|
#addShortcutMenu {
|
||||||
|
width: 94%!important;
|
||||||
|
left: 1rem!important;
|
||||||
|
margin-left: 0px!important;
|
||||||
|
}
|
||||||
|
#shortcutBox {
|
||||||
|
width: 96%!important;
|
||||||
|
display: block!important;
|
||||||
|
margin-top: 29rem!important;
|
||||||
|
left: 2%;
|
||||||
|
padding: .8rem!important;
|
||||||
|
height: 32rem!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Shortcuts */
|
||||||
|
#shortcutBox {
|
||||||
|
margin-top: 3rem;
|
||||||
|
width: 60%;
|
||||||
|
right: 3%;
|
||||||
|
padding: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
height: 50rem;
|
||||||
|
overflow: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
#shortcutBox::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.shortcutImg {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
}
|
||||||
|
.shortcutImgBox {
|
||||||
|
margin: 0 0 1rem 1rem;
|
||||||
|
width: 12rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: #363840;
|
||||||
|
border: #363840 2px solid;
|
||||||
|
border-radius: .5rem;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color .5s, border .5s;
|
||||||
|
}
|
||||||
|
.shortcutImgBox:hover {
|
||||||
|
background-color: #3d3e47;
|
||||||
|
border-color: #3d3e47;
|
||||||
|
}
|
||||||
|
.shortcutImgBox:hover .removeShortcut {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.shortcutText {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-bottom: 0!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Shortcut creation menu */
|
||||||
|
.hidden {
|
||||||
|
opacity: 0!important;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
transition: opacity .5s;
|
||||||
|
}
|
||||||
|
.lowerIndex {
|
||||||
|
z-index: -1!important;
|
||||||
|
}
|
||||||
|
#opacityMenu {
|
||||||
|
width: 100vw;
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
height: 100vh;
|
||||||
|
opacity: .7;
|
||||||
|
background-color: black;
|
||||||
|
display: inline-block;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
#addShortcutMenu {
|
||||||
|
display: inline-block;
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -25rem;
|
||||||
|
height: 27rem;
|
||||||
|
width: 50rem;
|
||||||
|
top: 15%;
|
||||||
|
}
|
||||||
|
#menuTitle {
|
||||||
|
margin: 1rem 0 0 1rem;
|
||||||
|
}
|
||||||
|
.inputMenu {
|
||||||
|
width: 96%;
|
||||||
|
height: 2.5rem;
|
||||||
|
margin-left: 1rem!important;
|
||||||
|
}
|
||||||
|
.alignMenu {
|
||||||
|
margin: 2rem 0 0 1rem;
|
||||||
|
}
|
||||||
|
#shortcutCreateButton {
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
margin-top: 6rem;
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
|
#shortcutCancelButton {
|
||||||
|
position: absolute;
|
||||||
|
right: 7rem;
|
||||||
|
margin-top: 6rem;
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
/* Crosspage styling */
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
img[alt="www.000webhost.com"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: Raleway!important;
|
||||||
|
background-image: url(/resources/img/wallpaper.png);
|
||||||
|
margin: 0px;
|
||||||
|
color: white!important;
|
||||||
|
overflow-x: hidden;
|
||||||
|
min-height: 100%;
|
||||||
|
background-color: #19191C;
|
||||||
|
}
|
||||||
|
/* Scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
background-color: #1d1e1e;
|
||||||
|
color: #c3c1bd;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #2b2c2d;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: #333536;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:active {
|
||||||
|
background-color: #3e4041;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background-color: #191a1a;
|
||||||
|
}
|
||||||
|
/* Links */
|
||||||
|
a {
|
||||||
|
text-decoration: none!important;
|
||||||
|
color: white!important;
|
||||||
|
}
|
||||||
|
/* Standard block styling */
|
||||||
|
.box {
|
||||||
|
border: 2px #454752 solid;
|
||||||
|
background-color: #454752;
|
||||||
|
box-shadow: 7px 7px #363840;
|
||||||
|
border-radius: .5rem;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
border: 2px #4c8a80 solid;
|
||||||
|
background-color: #4c8a80;
|
||||||
|
color: white;
|
||||||
|
outline: 0!important;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
transition: border .3s, background-color .3s;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
background-color: #386661;
|
||||||
|
border: #386661 2px solid;
|
||||||
|
}
|
||||||
|
.cancelButton {
|
||||||
|
border: 2px #b52c22 solid;
|
||||||
|
background-color: #b52c22;
|
||||||
|
color: white;
|
||||||
|
outline: 0!important;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
transition: border .3s, background-color .3s;
|
||||||
|
}
|
||||||
|
.cancelButton:hover {
|
||||||
|
background-color: #8a1e16;
|
||||||
|
border: #8a1e16 2px solid;
|
||||||
|
}
|
||||||
|
.input {
|
||||||
|
border: 0px #363840 solid;
|
||||||
|
background-color: #363840;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
|
||||||
|
color: white;
|
||||||
|
border-radius: .2rem;
|
||||||
|
padding: 1%;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 386 B |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 337 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 664 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 123 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,31 @@
|
|||||||
|
// 000webhost watermark remover
|
||||||
|
addEventListener("load", function() {
|
||||||
|
if (document.querySelector('[alt="www.000webhost.com"]')) {
|
||||||
|
let el = document.querySelector('[alt="www.000webhost.com"]').parentNode.parentNode;
|
||||||
|
el.parentNode.removeChild(el);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Tawk
|
||||||
|
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
|
||||||
|
(function(){
|
||||||
|
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
|
||||||
|
s1.async=true;
|
||||||
|
s1.src='https://embed.tawk.to/5da48879f82523213dc72f8f/default';
|
||||||
|
s1.charset='UTF-8';
|
||||||
|
s1.setAttribute('crossorigin','*');
|
||||||
|
s0.parentNode.insertBefore(s1,s0);
|
||||||
|
})();
|
||||||
|
|
||||||
|
// Console mark
|
||||||
|
console.log('%cDoor Guus van Meerveld', "color:#9c9c9c; font-size:30px;");
|
||||||
|
|
||||||
|
// Head tag
|
||||||
|
var shortcon = $("<link>", {rel :'shortcut icon',href:'/resources/img/favicon.ico'})
|
||||||
|
|
||||||
|
$('head').append(shortcon)
|
||||||
|
|
||||||
|
// Https
|
||||||
|
if (location.protocol == "http:" && location.port !== "3000" && location.host !== "guusvanmeerveld.online") {
|
||||||
|
location.protocol = "https:"
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
var c = document.getElementById("canvas");
|
||||||
|
var ctx = c.getContext("2d");
|
||||||
|
|
||||||
|
ctx.moveTo(0, 0);
|
||||||
|
ctx.lineTo(200, 100);
|
||||||
|
ctx.stroke();
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
Downloads = [
|
||||||
|
{
|
||||||
|
catagory: "Browsers",
|
||||||
|
content: [
|
||||||
|
{
|
||||||
|
name: "Chrome",
|
||||||
|
href: "https://www.google.com/intl/nl/chrome/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Firefox",
|
||||||
|
href: "https://www.mozilla.org/nl/firefox/download/thanks/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Opera",
|
||||||
|
href: "https://www.opera.com/computer/thanks?ni=stable&os=windows"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Brave",
|
||||||
|
href: "https://laptop-updates.brave.com/download/BRK107"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
catagory: "Games",
|
||||||
|
content: [
|
||||||
|
{
|
||||||
|
name: "Steam",
|
||||||
|
href: "https://steamcdn-a.akamaihd.net/client/installer/SteamSetup.exe",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Minecraft",
|
||||||
|
href: "https://my.minecraft.net/store/minecraft/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Origin",
|
||||||
|
href: "https://www.dm.origin.com/download"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
catagory: "Communication",
|
||||||
|
content: [
|
||||||
|
{
|
||||||
|
name: "Discord",
|
||||||
|
href: "https://discordapp.com/api/download?platform=win"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Teamspeak",
|
||||||
|
href: "https://www.teamspeak.com/en/downloads/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "WhatsApp",
|
||||||
|
href: "https://www.whatsapp.com/download/"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
catagory: "File managament",
|
||||||
|
content: [
|
||||||
|
{
|
||||||
|
name: "7-Zip",
|
||||||
|
href: ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
var d = document.getElementById.bind(document);
|
||||||
|
var c = document.createElement.bind(document);
|
||||||
|
|
||||||
|
// Google Search
|
||||||
|
d("googleSearchBar").addEventListener("keyup",searchGoogleEnter)
|
||||||
|
function searchGoogleEnter(key) {
|
||||||
|
if(key.keyCode == "13") {
|
||||||
|
var search = d("googleSearchBar").value;
|
||||||
|
var containsDot = search.indexOf(".");
|
||||||
|
if (search !== "") {
|
||||||
|
if (containsDot > -1) {
|
||||||
|
open("http://" + search);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
open("https://www.google.com/search?q=" + search);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Year left
|
||||||
|
function calculateTime() {
|
||||||
|
var date = new Date()
|
||||||
|
var monthsLeft = 11 - date.getMonth()
|
||||||
|
var daysLeft = 31 - date.getDate()
|
||||||
|
if (monthsLeft == 1) {
|
||||||
|
var months = " maand en "
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var months = " maanden en "
|
||||||
|
}
|
||||||
|
if (daysLeft == 1) {
|
||||||
|
var days = " dag"
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var days = " dagen"
|
||||||
|
}
|
||||||
|
d("yearLeft").innerHTML = "Het jaar duurt nog " + monthsLeft + months + daysLeft + days
|
||||||
|
d("yearProgress").value = date.getMonth() * 30 + date.getDate()
|
||||||
|
}
|
||||||
|
|
||||||
|
calculateTime();
|
||||||
|
|
||||||
|
// Clock
|
||||||
|
function showTime() {
|
||||||
|
var date = new Date()
|
||||||
|
var days = ["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"]
|
||||||
|
var months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"]
|
||||||
|
if (date.getMinutes() < 10) {
|
||||||
|
d("mins").innerHTML = "0" + date.getMinutes()
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
d("mins").innerHTML = date.getMinutes()
|
||||||
|
}
|
||||||
|
d("hours").innerHTML = date.getHours() + ":"
|
||||||
|
d("date").innerHTML = days[date.getDay()] + " " + date.getDate() + " " + months[date.getMonth()];
|
||||||
|
setTimeout(showTime, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
showTime();
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
var c = document.createElement.bind(document);
|
||||||
|
var d = document.getElementById.bind(document);
|
||||||
|
|
||||||
|
// Create downloads
|
||||||
|
Downloads.forEach(i=>{
|
||||||
|
var h2 = c("h2")
|
||||||
|
h2.innerHTML = i.catagory
|
||||||
|
var headerDiv = c("div")
|
||||||
|
headerDiv.className = "box headerBox"
|
||||||
|
headerDiv.appendChild(h2)
|
||||||
|
$('body').append(headerDiv)
|
||||||
|
if (typeof i.content == "object") {
|
||||||
|
i.content.forEach(d=>{
|
||||||
|
var downloadDiv = c("div")
|
||||||
|
downloadDiv.className = "box downloadbox"
|
||||||
|
var a = c("a")
|
||||||
|
a.href = d.href
|
||||||
|
a.target = "_blank"
|
||||||
|
var button = c("button")
|
||||||
|
button.className = "btn btn-secondary"
|
||||||
|
button.innerHTML = "Download " + d.name
|
||||||
|
var img = c("img")
|
||||||
|
img.src = "/resources/img/downloads/" + d.name + ".png"
|
||||||
|
img.alt = ""
|
||||||
|
img.className = "img"
|
||||||
|
a.appendChild(button)
|
||||||
|
$(downloadDiv).append(a, img)
|
||||||
|
$('body').append(downloadDiv)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
var c = document.createElement.bind(document);
|
||||||
|
var d = document.getElementById.bind(document);
|
||||||
|
var g = document.querySelector.bind(document);
|
||||||
|
|
||||||
|
// Insert nav tag
|
||||||
|
var navigation = c("nav")
|
||||||
|
navigation.className = "navigation"
|
||||||
|
var navbarList = c("navbarList")
|
||||||
|
navbarList.className = "navbarList"
|
||||||
|
navigation.appendChild(navbarList)
|
||||||
|
$("body").append(navigation)
|
||||||
|
|
||||||
|
// Create Navbar
|
||||||
|
Navbar.forEach(i=>{
|
||||||
|
var navList = c("li")
|
||||||
|
navList.className = "navList"
|
||||||
|
var navButton = c("button");
|
||||||
|
navButton.className = "navbarbutton"
|
||||||
|
navButton.innerHTML = i.name
|
||||||
|
if (i.link) {
|
||||||
|
var navLink = c("a");
|
||||||
|
navLink.href = i.link
|
||||||
|
navLink.appendChild(navButton);
|
||||||
|
navButton = navLink
|
||||||
|
}
|
||||||
|
if (i.desc) {
|
||||||
|
navButton.title = i.desc
|
||||||
|
}
|
||||||
|
navList.appendChild(navButton)
|
||||||
|
var dropdownList = c("ul")
|
||||||
|
dropdownList.className = "dropdownList"
|
||||||
|
dropdownList.style = "display:none;"
|
||||||
|
if (typeof i.dropdown == "object") {
|
||||||
|
i.dropdown.forEach(d=>{
|
||||||
|
var dropdownListItem = c("li");
|
||||||
|
// Dropdown button
|
||||||
|
var dropdownButton = c("button");
|
||||||
|
dropdownButton.innerHTML = d.name
|
||||||
|
dropdownButton.className = "dropdownButton"
|
||||||
|
if (d.desc) {
|
||||||
|
dropdownButton.title = d.desc
|
||||||
|
}
|
||||||
|
if (d.link) {
|
||||||
|
var link = c("a");
|
||||||
|
link.href = d.link
|
||||||
|
link.appendChild(dropdownButton);
|
||||||
|
dropdownButton = link
|
||||||
|
}
|
||||||
|
dropdownListItem.appendChild(dropdownButton);
|
||||||
|
dropdownList.appendChild(dropdownListItem);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
$(navList).append(dropdownList)
|
||||||
|
navbarList.appendChild(navList);
|
||||||
|
})
|
||||||
|
|
||||||
|
// Appearance changer
|
||||||
|
var appearanceSwitch = c("label")
|
||||||
|
appearanceSwitch.className = "appearance"
|
||||||
|
appearanceSwitch.title = "Dark/Light mode"
|
||||||
|
var appearanceInput = c("input")
|
||||||
|
appearanceInput.type = "checkbox"
|
||||||
|
var appearanceSpan = c("span")
|
||||||
|
appearanceSpan.className = "appearanceSlider"
|
||||||
|
$(appearanceSwitch).append(appearanceInput, appearanceSpan)
|
||||||
|
navigation.appendChild(appearanceSwitch)
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
Navbar = [
|
||||||
|
{
|
||||||
|
name: "Home",
|
||||||
|
desc: "Ga naar de homepagina",
|
||||||
|
link: "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Downloads",
|
||||||
|
desc: "Handige downloads",
|
||||||
|
link: "/downloads"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Contact",
|
||||||
|
desc: "Neem contact met mij op",
|
||||||
|
link: "/contact"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Experimenteel",
|
||||||
|
desc: "Allemaal experimentele dingen",
|
||||||
|
dropdown: [
|
||||||
|
{
|
||||||
|
name: "Color",
|
||||||
|
desc: "Mooie regenboog kleurtjes",
|
||||||
|
link: "/color"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Canvas",
|
||||||
|
desc: "Mijn eerste canvas",
|
||||||
|
link: "/canvas"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
// Toggle Menu
|
||||||
|
function openMenu() {
|
||||||
|
$(".menu").removeClass("lowerIndex");
|
||||||
|
$(".menu").removeClass("hidden");
|
||||||
|
d("shortcutLink").setAttribute('placeholder', 'https://example.com')
|
||||||
|
d("shortcutName").setAttribute('placeholder', 'Example Website')
|
||||||
|
}
|
||||||
|
function closeMenu() {
|
||||||
|
setTimeout(function () {
|
||||||
|
$(".menu").addClass("lowerIndex");
|
||||||
|
}, 500)
|
||||||
|
$(".menu").addClass("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
var ls = localStorage
|
||||||
|
var shortcutsData = ls.getItem("shortcuts")
|
||||||
|
if (shortcutsData) {
|
||||||
|
var data = JSON.parse(shortcutsData)
|
||||||
|
data.forEach(d=>{
|
||||||
|
createShortcut(d)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function createShortcut(shortcutObj) {
|
||||||
|
var shortcutName = d("shortcutName").value
|
||||||
|
var shortcutLink = d("shortcutLink").value
|
||||||
|
if (shortcutObj) {
|
||||||
|
shortcutName = shortcutObj.name
|
||||||
|
shortcutLink = shortcutObj.link
|
||||||
|
}
|
||||||
|
if (shortcutName && shortcutLink) {
|
||||||
|
var data = []
|
||||||
|
var shortcutData = ls.getItem("shortcuts")
|
||||||
|
if (shortcutData) {
|
||||||
|
data = JSON.parse(shortcutsData)
|
||||||
|
}
|
||||||
|
if (!shortcutObj) {
|
||||||
|
data.push({
|
||||||
|
name: shortcutName,
|
||||||
|
link: shortcutLink
|
||||||
|
})
|
||||||
|
}
|
||||||
|
var obj = JSON.stringify(data)
|
||||||
|
ls.setItem("shortcuts", obj)
|
||||||
|
var shortcut = $("<a>",{href:shortcutLink,target:'_blank'});
|
||||||
|
var shortcutDiv = $('<div>',{class:"shortcutImgBox"});
|
||||||
|
var shortcutImage = $("<img>",{src:'/resources/img/shortcut.png',class:'shortcutImg',alt:""});
|
||||||
|
var shortcutText = c("p")
|
||||||
|
shortcutText.innerHTML = shortcutName // Can't use jquery (I think)
|
||||||
|
shortcutText.className = "shortcutText"
|
||||||
|
$("#shortcuts").append(shortcut);
|
||||||
|
$(shortcut).append(shortcutDiv);
|
||||||
|
$(shortcutDiv).append(shortcutImage, shortcutText);
|
||||||
|
$(".inputMenu").val('')
|
||||||
|
closeMenu();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$(".inputMenu").attr('placeholder', 'Je moet hier iets invullen!')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var shortcutsA = Array.from(d("shortcuts").querySelectorAll("div"))
|
||||||
|
shortcutsA.forEach(short=>{
|
||||||
|
short.addEventListener("contextmenu", removeShortcut)
|
||||||
|
})
|
||||||
|
function removeShortcut(e) {
|
||||||
|
e.preventDefault()
|
||||||
|
this.outerHTML = ""
|
||||||
|
}
|
||||||
Reference in new issue