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/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script>
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
</body>
</html>

2
color/index.html
Unescape View File

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

9
contact/index.html
Unescape View File

@ -18,8 +18,17 @@
<span class="appearanceSlider"></span>
</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/javall.js"></script>
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<script src="/resources/js/insertNavbar.js"></script>
</body>

61
css.css
Unescape View File

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

73
index.html
Unescape View File

@ -18,43 +18,50 @@
<body>
<!-- Google search -->
<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off">
<!-- Google search -->
<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off">
<!-- 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>
<!-- Welcome -->
<aside>
<div id="welcome" class="box">
<h1 id="timeWelcome">,</h1>
</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">
<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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</div></a>
</span>
@ -62,26 +69,26 @@
</div>
<!-- Footer -->
<div id="footer"> <!-- No footer tag used because they suck -->
<footer>
<!-- Info -->
<div id="info" class="box footerBox">
<h1 align="center">Info</h1>
<!-- Info -->
<div class="box">
<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>
</div>
<!-- Feedback -->
<div id="feedbackBox" class="box footerBox">
<div class="box">
<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>
<textarea placeholder="Vul hier uw feedback in." rows="10" class="input" name="feedback"></textarea> <br>
<button type="submit" class="button" title="Stuur uw feedback op">Verstuur</button>
</form>
</div>
<!-- Links -->
<div id="links" class="box footerBox">
<b>Links:</b> <br> <br>
<!-- Links -->
<div class="box">
<h1>Links:</h1>
<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>
@ -89,20 +96,22 @@
<a href="https://www.discord.gg/GJcEYqj"><button class="btn btn-secondary">Discord</button></a>
</div>
</div>
</footer>
<!-- 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'>
<h1 id='menuTitle'>Maak je eigen shortcut</h1>
<h4>Bedenk een naam voor je shortcut</h4><br>
<input type='text' class='input' id='shortcutName'><br>
<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="cancelButton" onclick="closeMenu()" id="shortcutCancelButton">Cancel</button>
</div>
<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="/js.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);
// Google Search
addEventListener("keyup",showSearch)
d("googleSearchBar").addEventListener("keyup",searchGoogleEnter)
function searchGoogleEnter(key) {
if(key.key == "Enter") {
@ -23,28 +22,54 @@ function searchGoogleEnter(key) {
}
}
function closeSearch() {
$("#opacityMenu").addClass("hidden lowerIndex")
d("googleSearchBar").blur()
d("googleSearchBar").classList.add("searchMove")
}
addEventListener("keyup",showSearch)
function showSearch(e) {
if (e.target !== document.body || !d("addShortcutMenu").classList.contains("hidden")) {
return
}
var open = !d("googleSearchBar").classList.contains("searchMove")
if (open && !d("googleSearchBar").value || e.key == "Escape" ) {
closeSearch()
closeSearch();
}
else {
$("#opacityMenu").removeClass("hidden lowerIndex")
d("googleSearchBar").classList.remove("searchMove")
d("googleSearchBar").focus()
openSearch();
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
function showTime() {
var date = new Date()

4
resources/css/cssall.css
Unescape View File

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

18
resources/css/navbar.css
Unescape View File

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

26
resources/css/shortcuts.css
Unescape View File

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

4
resources/js/insertNavbar.js
Unescape View File

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

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

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