Guusvanmeerveld
/
First-Website
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

10-11 #1

Browse Source
add-license-1
Guuq 5 years ago
parent 0a5d778360
commit 29a4873e7d
12 changed files with 147 additions and 115 deletions
Show Stats Download Patch File Download Diff File

1
canvas/index.html
Unescape View File

@ -19,6 +19,7 @@
<script src="/resources/js/canvasLib.js"></script> <script src="/resources/js/canvasLib.js"></script>
<script src="/resources/js/insertNavbar.js"></script> <script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script> <script src="/resources/js/javall.js"></script>
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
</body> </body>
</html> </html>

2
color/index.html
Unescape View File

@ -12,9 +12,11 @@
<title>Color</title> <title>Color</title>
</head> </head>
<body> <body>
<script src="/resources/js/navbar.json.js"></script> <script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script> <script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script> <script src="/resources/js/javall.js"></script>
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
</body> </body>
</html> </html>

9
contact/index.html
Unescape View File

@ -18,8 +18,17 @@
<span class="appearanceSlider"></span> <span class="appearanceSlider"></span>
</label> </label>
<ul>
<ol>
<li>Coffee</li>
<li>Tea<li>
<li>Milk</li>
</ol>
</ul>
<script src="/resources/js/navbar.json.js"></script> <script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/javall.js"></script> <script src="/resources/js/javall.js"></script>
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<script src="/resources/js/insertNavbar.js"></script> <script src="/resources/js/insertNavbar.js"></script>
</body> </body>

61
css.css
Unescape View File

@ -10,11 +10,11 @@
} }
} }
/* Main CSS */ /* Main CSS */
/* Header */ aside {
header { float: left;
margin-top: 6rem; margin: 3rem 0 0 1rem;
color: white; display: inline-block;
text-shadow: 2px 2px #363840; width: 36%;
} }
/* Google search */ /* Google search */
#googleSearchBar { #googleSearchBar {
@ -38,14 +38,14 @@ header {
opacity: 0; opacity: 0;
top: 0px!important; top: 0px!important;
} }
/* Welcome */
#welcome {
padding: 1rem;
}
/* Clock */ /* Clock */
#timeBox { #timeBox {
margin-top: 3rem; margin-top: 2rem;
display: inline-block;
margin-left: 1rem;
float: left;
padding: 1rem; padding: 1rem;
width: 36%;
} }
.time { .time {
display: inline-block; display: inline-block;
@ -55,47 +55,32 @@ header {
font-size: 150%; font-size: 150%;
} }
/* Footer */ /* Footer */
#footer { footer {
margin-left: calc(50% - 45rem); margin-top: 1rem;
margin-top: 2rem; float: left;
height: 12rem; display: flex!important;
display: inline-block; align-items: stretch;
margin-bottom: 2rem; }
} footer div::-webkit-scrollbar {
.footerBox::-webkit-scrollbar {
display: none; display: none;
} }
.footerBox { footer div {
height: 13rem; flex-grow: 1;
display: inline-block;
float: left;
padding: 1rem; padding: 1rem;
margin-left: 2rem; margin: 1rem;
overflow: scroll; overflow: scroll;
overflow-x: hidden; overflow-x: hidden;
} }
/* Info blocks */ /* Info blocks */
#info { footer div:nth-of-type(2) textarea {
width: 27rem;
}
#feedbackBox {
font-size: 1rem;
width: 27rem;
}
#feedbackTextarea {
width: 98%; width: 98%;
margin-top: 8px; margin-top: 8px;
height: 6rem; height: 6rem;
} }
#feedbackSubmitButton { footer div:nth-of-type(2) button {
width: 98%; width: 98%;
margin-top: 4px; margin-top: 4px;
} }
#links { footer div:nth-of-type(3) a button {
width: 27rem;
padding: 1rem;
font-size: 130%;
}
#links a button {
margin-bottom: 5px; margin-bottom: 5px;
} }

1
downloads/index.html
Unescape View File

@ -22,6 +22,7 @@
<script src="/resources/js/navbar.json.js"></script> <script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script> <script src="/resources/js/insertNavbar.js"></script>
<script src="/downloads/downloads.json.js"></script> <script src="/downloads/downloads.json.js"></script>
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<script src="/resources/js/javall.js"></script> <script src="/resources/js/javall.js"></script>
<script src="/downloads/insertDownloads.js"></script> <script src="/downloads/insertDownloads.js"></script>

73
index.html
Unescape View File

@ -18,43 +18,50 @@
<body> <body>
<!-- Google search --> <!-- Google search -->
<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off"> <input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off">
<!-- Clock --> <!-- Welcome -->
<div id="timeBox" class="box"> <aside>
<h1 id="hours" class="time"></h1><h1 id="mins" class="time"></h1><h1 id="secs" class="time"></h1> <br> <div id="welcome" class="box">
<h1 id="date"></h1> <h1 id="timeWelcome">,</h1>
</div> </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>
</aside>
<!-- Shortcuts --> <!-- Shortcuts -->
<div id="shortcutBox" class="box"> <div id="shortcutBox" class="box">
<span id="shortcuts"> <span id="shortcuts">
<a href="https://www.youtube.com/" target="_blank"><div class="shortcutImgBox"> <a href="https://www.youtube.com/" target="_blank"><div>
<img class="shortcutImg" src="/resources/img/youtube.png" alt=""><p class="shortcutText">Youtube</p> <img class="shortcutImg" src="/resources/img/youtube.png" alt=""><p class="shortcutText">Youtube</p>
</div></a> </div></a>
<a href="https://pantarijn.magister.net" target="_blank"><div class="shortcutImgBox"> <a href="https://pantarijn.magister.net" target="_blank"><div>
<img class="shortcutImg" src="/resources/img/magister.png" alt=""><p class="shortcutText">Magister</p> <img class="shortcutImg" src="/resources/img/magister.png" alt=""><p class="shortcutText">Magister</p>
</div></a> </div></a>
<a href="https://onedrive.live.com/about/en-us/signin/" target="_blank"><div class="shortcutImgBox"> <a href="https://onedrive.live.com/about/en-us/signin/" target="_blank"><div>
<img src="/resources/img/onedrive.png" class="shortcutImg" alt=""><p class="shortcutText">Onedrive</p> <img src="/resources/img/onedrive.png" class="shortcutImg" alt=""><p class="shortcutText">Onedrive</p>
</div></a> </div></a>
<a href="https://codepanta.nl/login/index.php" target="_blank"><div class="shortcutImgBox"> <a href="https://codepanta.nl/login/index.php" target="_blank"><div>
<img src="/resources/img/codepanta.png" class="shortcutImg" alt=""><p class="shortcutText">Codepanta</p> <img src="/resources/img/codepanta.png" class="shortcutImg" alt=""><p class="shortcutText">Codepanta</p>
</div></a> </div></a>
<a href="https://reddit.com" target="_blank"><div class="shortcutImgBox"> <a href="https://reddit.com" target="_blank"><div>
<img src="/resources/img/reddit.png" class="shortcutImg" alt=""><p class="shortcutText">Reddit</p> <img src="/resources/img/reddit.png" class="shortcutImg" alt=""><p class="shortcutText">Reddit</p>
</div></a> </div></a>
<a href="https://open.spotify.com/browse/featured" target="_blank"><div class="shortcutImgBox"> <a href="https://open.spotify.com/browse/featured" target="_blank"><div>
<img src="/resources/img/spotify.png" class="shortcutImg" alt=""><p class="shortcutText">Spotify</p> <img src="/resources/img/spotify.png" class="shortcutImg" alt=""><p class="shortcutText">Spotify</p>
</div></a> </div></a>
<a href="https://w3schools.com" target="_blank"><div class="shortcutImgBox"> <a href="https://w3schools.com" target="_blank"><div>
<img src="/resources/img/w3schools.png" class="shortcutImg" alt=""><p class="shortcutText">W3Schools</p> <img src="/resources/img/w3schools.png" class="shortcutImg" alt=""><p class="shortcutText">W3Schools</p>
</div></a> </div></a>
<a href="https://maps.google.com" target="_blank"><div class="shortcutImgBox"> <a href="https://maps.google.com" target="_blank"><div>
<img src="/resources/img/googlemaps.png" class="shortcutImg" alt=""><p class="shortcutText">Maps</p> <img src="/resources/img/googlemaps.png" class="shortcutImg" alt=""><p class="shortcutText">Maps</p>
</div></a> </div></a>
<a href="https://translate.google.com" target="_blank"><div class="shortcutImgBox"> <a href="https://translate.google.com" target="_blank"><div>
<img src="/resources/img/googletranslate.png" class="shortcutImg" alt=""><p class="shortcutText">Translate</p> <img src="/resources/img/googletranslate.png" class="shortcutImg" alt=""><p class="shortcutText">Translate</p>
</div></a> </div></a>
</span> </span>
@ -62,26 +69,26 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<div id="footer"> <!-- No footer tag used because they suck --> <footer>
<!-- Info --> <!-- Info -->
<div id="info" class="box footerBox"> <div class="box">
<h1 align="center">Info</h1> <h1>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> <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> </div>
<!-- Feedback --> <!-- Feedback -->
<div id="feedbackBox" class="box footerBox"> <div class="box">
<b>Hier kunt u feedback voor deze pagina invullen</b> <br> <b>Hier kunt u feedback voor deze pagina invullen</b> <br>
<form action="/" method="get"> <form action="/" method="get">
<textarea placeholder="Vul hier uw feedback in." rows="10" class="input" id="feedbackTextarea" name="feedback"></textarea> <br> <textarea placeholder="Vul hier uw feedback in." rows="10" class="input" name="feedback"></textarea> <br>
<button type="submit" id="feedbackSubmitButton" class="button" title="Stuur uw feedback op">Verstuur</button> <button type="submit" class="button" title="Stuur uw feedback op">Verstuur</button>
</form> </form>
</div> </div>
<!-- Links --> <!-- Links -->
<div id="links" class="box footerBox"> <div class="box">
<b>Links:</b> <br> <br> <h1>Links:</h1>
<a href="https://www.instagram.com/gerda.6/"><button class="btn btn-info">Instagram</button></a> <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.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://www.sololearn.com/Profile/9075320"><button class="btn btn-success">Sololearn</button></a>
@ -89,20 +96,22 @@
<a href="https://www.discord.gg/GJcEYqj"><button class="btn btn-secondary">Discord</button></a> <a href="https://www.discord.gg/GJcEYqj"><button class="btn btn-secondary">Discord</button></a>
</div> </div>
</div> </footer>
<!-- Add shortcut Menu --> <!-- Add shortcut Menu -->
<div id="opacityMenu" onclick="closeMenu()" class="menu hidden lowerIndex"></div> <div id="opacityMenu" onclick="closeMenu()" class="menu hidden lowerIndex"></div>
<div id="addShortcutMenu" class="box menu hidden lowerIndex"> <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> <h1 id='menuTitle'>Maak je eigen shortcut</h1>
<input type='text' class='input inputMenu' id='shortcutName'><br> <h4>Bedenk een naam voor je shortcut</h4><br>
<h4 class='alignMenu'>Geef de link van je shortcut</h4><br> <input type='text' class='input' id='shortcutName'><br>
<input type='text' class='input inputMenu' id='shortcutLink'> <h4>Geef de link van je shortcut</h4><br>
<input type='text' class='input' id='shortcutLink'>
<button class='button' onclick="createShortcut()" id='shortcutCreateButton'>Voeg toe</button> <button class='button' onclick="createShortcut()" id='shortcutCreateButton'>Voeg toe</button>
<button class="cancelButton" onclick="closeMenu()" id="shortcutCancelButton">Cancel</button> <button class="cancelButton" onclick="closeMenu()" id="shortcutCancelButton">Cancel</button>
</div> </div>
<script src="/resources/js/navbar.json.js"></script> <script src="/resources/js/navbar.json.js"></script>
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<script src="/resources/js/insertNavbar.js"></script> <script src="/resources/js/insertNavbar.js"></script>
<script src="/js.js"></script> <script src="/js.js"></script>
<script src="/resources/js/shortcuts.js"></script> <script src="/resources/js/shortcuts.js"></script>

47
js.js
Unescape View File

@ -3,7 +3,6 @@ var c = document.createElement.bind(document);
var q = document.querySelector.bind(document); var q = document.querySelector.bind(document);
// Google Search // Google Search
addEventListener("keyup",showSearch)
d("googleSearchBar").addEventListener("keyup",searchGoogleEnter) d("googleSearchBar").addEventListener("keyup",searchGoogleEnter)
function searchGoogleEnter(key) { function searchGoogleEnter(key) {
if(key.key == "Enter") { if(key.key == "Enter") {
@ -23,28 +22,54 @@ function searchGoogleEnter(key) {
} }
} }
function closeSearch() { addEventListener("keyup",showSearch)
$("#opacityMenu").addClass("hidden lowerIndex")
d("googleSearchBar").blur()
d("googleSearchBar").classList.add("searchMove")
}
function showSearch(e) { function showSearch(e) {
if (e.target !== document.body || !d("addShortcutMenu").classList.contains("hidden")) { if (e.target !== document.body || !d("addShortcutMenu").classList.contains("hidden")) {
return return
} }
var open = !d("googleSearchBar").classList.contains("searchMove") var open = !d("googleSearchBar").classList.contains("searchMove")
if (open && !d("googleSearchBar").value || e.key == "Escape" ) { if (open && !d("googleSearchBar").value || e.key == "Escape" ) {
closeSearch() closeSearch();
} }
else { else {
$("#opacityMenu").removeClass("hidden lowerIndex") openSearch();
d("googleSearchBar").classList.remove("searchMove")
d("googleSearchBar").focus()
d("googleSearchBar").value = e.key + d("googleSearchBar").value d("googleSearchBar").value = e.key + d("googleSearchBar").value
} }
} }
function closeSearch() {
$("#opacityMenu").addClass("hidden lowerIndex")
d("googleSearchBar").blur()
d("googleSearchBar").classList.add("searchMove")
}
function openSearch(e) {
$("#opacityMenu").removeClass("hidden lowerIndex")
d("googleSearchBar").classList.remove("searchMove")
d("googleSearchBar").focus()
}
// Welcome
function setWelcome() {
var html = d("timeWelcome").innerHTML
var date = new Date()
if (date.getHours() < 6) {
var welcome = "Goedenacht"
}
else if (date.getHours() > 18) {
var welcome = "Goedeavond"
}
else if (date.getHours() > 12) {
var welcome = "Goedemiddag"
}
else if (date.getHours() > 6) {
var welcome = "Goedemorgen"
}
html = welcome + html
}
setWelcome();
// Clock // Clock
function showTime() { function showTime() {
var date = new Date() var date = new Date()

4
resources/css/cssall.css
Unescape View File

@ -3,6 +3,10 @@
html { html {
height: 100%; height: 100%;
} }
::selection {
background: #6ec1b3;
color: white;
}
body { body {
font-family: Raleway, sans-serif!important; font-family: Raleway, sans-serif!important;
background-image: url(/resources/img/wallpaper.png); background-image: url(/resources/img/wallpaper.png);

18
resources/css/navbar.css
Unescape View File

@ -1,14 +1,14 @@
.navigation { .navigation {
position: fixed; position: fixed;
top: 0px; top: 0px;
max-height: 55px; height: 55px;
width: 100%; width: 100%;
background-color: black; background-color: #101012;
opacity: 0.8;
z-index: 3; z-index: 3;
} }
.navigation button { .navigation button {
padding: 1rem; padding: .5rem;
height: 100%;
transition: color .5s; transition: color .5s;
border: 0; border: 0;
background-color: transparent; background-color: transparent;
@ -26,9 +26,11 @@
.navList { .navList {
float: left; float: left;
} }
.navigation i {
margin: 10px 15px 10px 10px;
}
.dropdownList { .dropdownList {
background-color: black; background-color: #101012;
opacity: 0.8;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
@ -42,10 +44,6 @@
.navigation button:hover { .navigation button:hover {
color: #9c9c9c!important; color: #9c9c9c!important;
} }
.home {
height: 40px;
width: 40px;
}
/* Switch */ /* Switch */
.appearance { .appearance {

26
resources/css/shortcuts.css
Unescape View File

@ -12,9 +12,8 @@
} }
/* Shortcuts */ /* Shortcuts */
#shortcutBox { #shortcutBox {
margin-top: 3rem; margin: 3rem 0 0 2%;
width: 60%; width: 59%;
margin-left: 2rem;
float: left; float: left;
padding: 1rem; padding: 1rem;
display: inline-block; display: inline-block;
@ -29,7 +28,7 @@
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
} }
.shortcutImgBox { #shortcutBox div {
margin: 0 0 1rem 1rem; margin: 0 0 1rem 1rem;
width: 12rem; width: 12rem;
padding: 1rem; padding: 1rem;
@ -83,26 +82,19 @@
width: 50rem; width: 50rem;
top: 15%; top: 15%;
} }
#menuTitle { #addShortcutMenu h1 {
margin: 1rem 0 0 1rem; margin: 1rem 0 0 1rem;
} }
.inputMenu { #addShortcutMenu input {
width: 96%; width: 96%;
height: 2.5rem; height: 2.5rem;
margin-left: 1rem!important; margin-left: 1rem!important;
} }
.alignMenu { #addShortcutMenu h4 {
margin: 2rem 0 0 1rem; margin: 2rem 0 0 1rem;
} }
#shortcutCreateButton { #addShortcutMenu button {
position: absolute; float: right;
right: 1rem; margin: 4rem 1rem 0 0;
margin-top: 6rem;
padding: .5rem;
}
#shortcutCancelButton {
position: absolute;
right: 7rem;
margin-top: 6rem;
padding: .5rem; padding: .5rem;
} }

4
resources/js/insertNavbar.js
Unescape View File

@ -16,7 +16,7 @@ Navbar.forEach(i=>{
navList.className = "navList" navList.className = "navList"
var navButton = c("button"); var navButton = c("button");
navButton.className = "navbarbutton" navButton.className = "navbarbutton"
navButton.innerHTML = i.name navButton.innerHTML = "<i class='" + i.icon + " fa-lg'></i>" + i.name
if (i.link) { if (i.link) {
var navLink = c("a"); var navLink = c("a");
navLink.href = i.link navLink.href = i.link
@ -35,7 +35,7 @@ Navbar.forEach(i=>{
var dropdownListItem = c("li"); var dropdownListItem = c("li");
// Dropdown button // Dropdown button
var dropdownButton = c("button"); var dropdownButton = c("button");
dropdownButton.innerHTML = d.name dropdownButton.innerHTML = "<i class='" + d.icon + " fa-lg'></i>" + d.name
dropdownButton.className = "dropdownButton" dropdownButton.className = "dropdownButton"
if (d.desc) { if (d.desc) {
dropdownButton.title = d.desc dropdownButton.title = d.desc

16
resources/js/navbar.json.js
Unescape View File

@ -2,31 +2,37 @@ Navbar = [
{ {
name: "Home", name: "Home",
desc: "Ga naar de homepagina", desc: "Ga naar de homepagina",
link: "/" link: "/",
icon: "fas fa-home"
}, },
{ {
name: "Downloads", name: "Downloads",
desc: "Handige downloads", desc: "Handige downloads",
link: "/downloads" link: "/downloads",
icon: "fas fa-download"
}, },
{ {
name: "Contact", name: "Contact",
desc: "Neem contact met mij op", desc: "Neem contact met mij op",
link: "/contact" link: "/contact",
icon: "fas fa-phone"
}, },
{ {
name: "Experimenteel", name: "Experimenteel",
desc: "Allemaal experimentele dingen", desc: "Allemaal experimentele dingen",
icon: "fas fa-vial",
dropdown: [ dropdown: [
{ {
name: "Color", name: "Color",
desc: "Mooie regenboog kleurtjes", desc: "Mooie regenboog kleurtjes",
link: "/color" link: "/color",
icon: "fas fa-tint"
}, },
{ {
name: "Canvas", name: "Canvas",
desc: "Mijn eerste canvas", desc: "Mijn eerste canvas",
link: "/canvas" link: "/canvas",
icon: "fas fa-pencil-alt"
} }
] ]
} }