commit 497034ba28f4172c95e990e33e4095afa4c483af Author: Guuq <50501321+Guuq@users.noreply.github.com> Date: Mon Oct 28 15:24:09 2019 +0100 Uploading website to github diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000..6d3471c --- /dev/null +++ b/.htaccess @@ -0,0 +1 @@ +ErrorDocument 404 /404/ diff --git a/404/index.html b/404/index.html new file mode 100644 index 0000000..bfacb3a --- /dev/null +++ b/404/index.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + + Error + + + +
+

Error: 404

+

Something went wrong, try a different link/address

+
+ + + + + + + + diff --git a/canvas/index.html b/canvas/index.html new file mode 100644 index 0000000..32a9ca0 --- /dev/null +++ b/canvas/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + + Canvas + + + + + + + + + + + + diff --git a/color/index.html b/color/index.html new file mode 100644 index 0000000..a3630f9 --- /dev/null +++ b/color/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + Color + + + + + + + + diff --git a/contact/index.html b/contact/index.html new file mode 100644 index 0000000..e0a3ce2 --- /dev/null +++ b/contact/index.html @@ -0,0 +1,26 @@ + + + + + + + + + + + Contact + + + + + + + + + + + + diff --git a/downloads/index.html b/downloads/index.html new file mode 100644 index 0000000..3ad4e66 --- /dev/null +++ b/downloads/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + Downloads + + + + +
+ + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..6cfb0ed --- /dev/null +++ b/index.html @@ -0,0 +1,121 @@ + + + + + + + + + + Home + + + + + + + + + + + +
+ +
+ + +
+


+

+
+ + +
+

+ +
+ + +
+ +
+

Youtube

+
+
+

Magister

+
+
+

Onedrive

+
+
+

Codepanta

+
+
+

Reddit

+
+
+

Spotify

+
+
+

W3Schools

+
+
+

Maps

+
+
+

Translate

+
+
+

Voeg toe

+
+ + + + + + + + + + + + + + + + + diff --git a/resources/css.css b/resources/css.css new file mode 100644 index 0000000..1a3da69 --- /dev/null +++ b/resources/css.css @@ -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; +} diff --git a/resources/css/404.css b/resources/css/404.css new file mode 100644 index 0000000..2b86c94 --- /dev/null +++ b/resources/css/404.css @@ -0,0 +1,5 @@ + div { + height: 90%; + width: 96%; + padding: 2%; + } diff --git a/resources/css/color.css b/resources/css/color.css new file mode 100644 index 0000000..62db7fc --- /dev/null +++ b/resources/css/color.css @@ -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;} +} diff --git a/resources/css/contact.css b/resources/css/contact.css new file mode 100644 index 0000000..ec9e627 --- /dev/null +++ b/resources/css/contact.css @@ -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); +} diff --git a/resources/css/downloads.css b/resources/css/downloads.css new file mode 100644 index 0000000..c508d8a --- /dev/null +++ b/resources/css/downloads.css @@ -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; +} diff --git a/resources/css/navbar.css b/resources/css/navbar.css new file mode 100644 index 0000000..fe3f43e --- /dev/null +++ b/resources/css/navbar.css @@ -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); +} diff --git a/resources/css/shortcuts.css b/resources/css/shortcuts.css new file mode 100644 index 0000000..8be14ea --- /dev/null +++ b/resources/css/shortcuts.css @@ -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; +} diff --git a/resources/cssall.css b/resources/cssall.css new file mode 100644 index 0000000..78a24c5 --- /dev/null +++ b/resources/cssall.css @@ -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; +} diff --git a/resources/img/codepanta.png b/resources/img/codepanta.png new file mode 100644 index 0000000..627c357 Binary files /dev/null and b/resources/img/codepanta.png differ diff --git a/resources/img/cross.png b/resources/img/cross.png new file mode 100644 index 0000000..6848f85 Binary files /dev/null and b/resources/img/cross.png differ diff --git a/resources/img/downloads/Firefox.png b/resources/img/downloads/Firefox.png new file mode 100644 index 0000000..8e0b84a Binary files /dev/null and b/resources/img/downloads/Firefox.png differ diff --git a/resources/img/downloads/brave.png b/resources/img/downloads/brave.png new file mode 100644 index 0000000..94755b5 Binary files /dev/null and b/resources/img/downloads/brave.png differ diff --git a/resources/img/downloads/chrome.png b/resources/img/downloads/chrome.png new file mode 100644 index 0000000..c9cfbe3 Binary files /dev/null and b/resources/img/downloads/chrome.png differ diff --git a/resources/img/downloads/discord.png b/resources/img/downloads/discord.png new file mode 100644 index 0000000..70bdf17 Binary files /dev/null and b/resources/img/downloads/discord.png differ diff --git a/resources/img/downloads/minecraft.png b/resources/img/downloads/minecraft.png new file mode 100644 index 0000000..8ab1445 Binary files /dev/null and b/resources/img/downloads/minecraft.png differ diff --git a/resources/img/downloads/opera.png b/resources/img/downloads/opera.png new file mode 100644 index 0000000..be45f75 Binary files /dev/null and b/resources/img/downloads/opera.png differ diff --git a/resources/img/downloads/origin.png b/resources/img/downloads/origin.png new file mode 100644 index 0000000..489d965 Binary files /dev/null and b/resources/img/downloads/origin.png differ diff --git a/resources/img/downloads/steam.png b/resources/img/downloads/steam.png new file mode 100644 index 0000000..ed9a66f Binary files /dev/null and b/resources/img/downloads/steam.png differ diff --git a/resources/img/downloads/teamspeak.png b/resources/img/downloads/teamspeak.png new file mode 100644 index 0000000..7baa74e Binary files /dev/null and b/resources/img/downloads/teamspeak.png differ diff --git a/resources/img/downloads/whatsapp.png b/resources/img/downloads/whatsapp.png new file mode 100644 index 0000000..d2f5fbe Binary files /dev/null and b/resources/img/downloads/whatsapp.png differ diff --git a/resources/img/favicon.ico b/resources/img/favicon.ico new file mode 100644 index 0000000..5fae432 Binary files /dev/null and b/resources/img/favicon.ico differ diff --git a/resources/img/googlemaps.png b/resources/img/googlemaps.png new file mode 100644 index 0000000..3bf50b8 Binary files /dev/null and b/resources/img/googlemaps.png differ diff --git a/resources/img/googletranslate.png b/resources/img/googletranslate.png new file mode 100644 index 0000000..4480267 Binary files /dev/null and b/resources/img/googletranslate.png differ diff --git a/resources/img/logo.png b/resources/img/logo.png new file mode 100644 index 0000000..5fae432 Binary files /dev/null and b/resources/img/logo.png differ diff --git a/resources/img/magister.png b/resources/img/magister.png new file mode 100644 index 0000000..0edffda Binary files /dev/null and b/resources/img/magister.png differ diff --git a/resources/img/onedrive.png b/resources/img/onedrive.png new file mode 100644 index 0000000..ff24a9a Binary files /dev/null and b/resources/img/onedrive.png differ diff --git a/resources/img/reddit.png b/resources/img/reddit.png new file mode 100644 index 0000000..f4a9300 Binary files /dev/null and b/resources/img/reddit.png differ diff --git a/resources/img/shortcut.png b/resources/img/shortcut.png new file mode 100644 index 0000000..872f4c4 Binary files /dev/null and b/resources/img/shortcut.png differ diff --git a/resources/img/spotify.png b/resources/img/spotify.png new file mode 100644 index 0000000..b460431 Binary files /dev/null and b/resources/img/spotify.png differ diff --git a/resources/img/w3schools.png b/resources/img/w3schools.png new file mode 100644 index 0000000..bed2ec8 Binary files /dev/null and b/resources/img/w3schools.png differ diff --git a/resources/img/wallpaper.png b/resources/img/wallpaper.png new file mode 100644 index 0000000..aee0d40 Binary files /dev/null and b/resources/img/wallpaper.png differ diff --git a/resources/img/youtube.png b/resources/img/youtube.png new file mode 100644 index 0000000..bffccc5 Binary files /dev/null and b/resources/img/youtube.png differ diff --git a/resources/javall.js b/resources/javall.js new file mode 100644 index 0000000..9320d30 --- /dev/null +++ b/resources/javall.js @@ -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 = $("", {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:" +} diff --git a/resources/js/canvas.js b/resources/js/canvas.js new file mode 100644 index 0000000..095abb3 --- /dev/null +++ b/resources/js/canvas.js @@ -0,0 +1,6 @@ +var c = document.getElementById("canvas"); +var ctx = c.getContext("2d"); + +ctx.moveTo(0, 0); +ctx.lineTo(200, 100); +ctx.stroke(); diff --git a/resources/js/downloads.json.js b/resources/js/downloads.json.js new file mode 100644 index 0000000..123b680 --- /dev/null +++ b/resources/js/downloads.json.js @@ -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: "" + } + ] + } +] diff --git a/resources/js/home.js b/resources/js/home.js new file mode 100644 index 0000000..05d7b1a --- /dev/null +++ b/resources/js/home.js @@ -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(); diff --git a/resources/js/insertDownloads.js b/resources/js/insertDownloads.js new file mode 100644 index 0000000..1008cec --- /dev/null +++ b/resources/js/insertDownloads.js @@ -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) + }) + } + }) diff --git a/resources/js/insertNavbar.js b/resources/js/insertNavbar.js new file mode 100644 index 0000000..3df8839 --- /dev/null +++ b/resources/js/insertNavbar.js @@ -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) diff --git a/resources/js/navbar.json.js b/resources/js/navbar.json.js new file mode 100644 index 0000000..b480e3d --- /dev/null +++ b/resources/js/navbar.json.js @@ -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" + } + ] + } +] diff --git a/resources/js/shortcuts.js b/resources/js/shortcuts.js new file mode 100644 index 0000000..eae052a --- /dev/null +++ b/resources/js/shortcuts.js @@ -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 = $("",{href:shortcutLink,target:'_blank'}); + var shortcutDiv = $('
',{class:"shortcutImgBox"}); + var shortcutImage = $("",{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 = "" +}