From 7b9fb321d18e4154c13e4c6e6de3ac5fe3a8e18d Mon Sep 17 00:00:00 2001 From: Guuq <50501321+Guuq@users.noreply.github.com> Date: Sun, 8 Dec 2019 14:09:46 +0100 Subject: [PATCH] Major changes to homepage --- 404.html | 2 +- 408.html | 2 +- contact/css.css | 10 ++-- contact/index.html | 16 +++---- css.css | 90 +++++++++++++++++++++++++++++++----- feedback/index.html | 12 +++-- index.html | 72 ++++++++--------------------- js.js | 32 ------------- playground/index.html | 6 +-- playground/js.js | 7 +-- resources/css/navbar.css | 4 +- resources/css/shortcuts.css | 78 ------------------------------- resources/js/insertNavbar.js | 2 +- resources/js/navbar.json.js | 25 +++++----- resources/js/shortcuts.js | 69 --------------------------- 15 files changed, 144 insertions(+), 283 deletions(-) delete mode 100644 resources/css/shortcuts.css delete mode 100644 resources/js/shortcuts.js diff --git a/404.html b/404.html index ce2599c..bded580 100644 --- a/404.html +++ b/404.html @@ -19,7 +19,7 @@ font-family: 'Open Sans'; } div { - background-color: #212126; + background-color: #33353d; height: 100%; padding: 10%; position: absolute; diff --git a/408.html b/408.html index f150564..d0f1b1e 100644 --- a/408.html +++ b/408.html @@ -19,7 +19,7 @@ font-family: 'Open Sans'; } div { - background-color: #212126; + background-color: #33353d; height: 100%; padding: 10%; position: absolute; diff --git a/contact/css.css b/contact/css.css index 35acef3..54ca7ce 100644 --- a/contact/css.css +++ b/contact/css.css @@ -22,12 +22,14 @@ margin: 0 auto; margin-bottom: 1rem; } +.form span { + color:#c42222; +} .submit { - position: absolute; - width: 6rem; + width: 90%; height: 40px; - right: 2rem; - bottom: 1rem; + display: block; + margin: -2rem auto 1rem auto; } .dataInput { width: 90%; diff --git a/contact/index.html b/contact/index.html index e20c53d..2d56757 100644 --- a/contact/index.html +++ b/contact/index.html @@ -16,24 +16,24 @@
-

Contact opnemen?

+

Need more info?

-

*Naam en Achternaam

+

Name and last name*

-

*E-mailadres

+

E-mail*

-

*Bericht

+

Message*


-

Contact gegevens:

+

Contact information:

diff --git a/css.css b/css.css index 54e10f7..5982023 100644 --- a/css.css +++ b/css.css @@ -1,22 +1,70 @@ /* Main CSS */ -section { +svg { + position: relative; + z-index: -1; + padding-top: 49px; + fill: #454752; + stroke-width: 1; + stroke: #454752; + height: 100vh; +} +.mainContent { + overflow: visible; float: left; + padding: 6rem 0 0 2rem; display: inline-block; width: 50%; - padding-top: 55px; height: 100vh; - overflow: scroll; - overflow-x: hidden; } -section::-webkit-scrollbar { +.mainContent::-webkit-scrollbar { display: none; } -svg { - padding-top: 49px; - fill: #454752; - stroke-width: 1; - stroke: #454752; - height: 100vh; +/* Splash */ +.logo { + width: 8rem; + height: 8rem; + margin-right: 2rem; +} +.name { + font-size: 4rem; + white-space: nowrap; +} +.keepclicking { + background-color: #3b3c45; + width: 40rem; + height: 12rem; + transition: background-color .4s; + border: 0; + color: white; + padding: 1rem; + border-radius: .5rem; + margin-top: 3rem; +} +.keepclicking:hover { + background-color: #33343b; +} +.keepclicking:focus { + outline: 0; +} +.playground { + border-right: white 4px solid; + width: 20rem; + display: inline-block; +} +.code { + vertical-align: top; + margin-left: 3.7rem; + margin-top: 10px; +} +.minify { + border-left: white 4px solid; + width: 15rem; + margin-left: 3rem; + display: inline-block; +} +.cut { + vertical-align: top; + margin-top: 10px; } /* Clock */ #timeBox { @@ -33,6 +81,24 @@ svg { font-size: 2rem; margin: 0; } +/* About */ +.about { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + float: left; + height: 35vh; + background-color: #33353d; +} +.head { + padding: 1rem; + text-align: center; + display: inline-block; + width: 25rem; + border-right: 4px solid white; +} /* Mobile support */ @viewport { width: device-width; @@ -40,7 +106,7 @@ svg { } /* Support for mobile devices */ @media screen and (min-width:0px) and (max-width:1000px) { - section { + .mainContent { width: 100%!important; } svg { diff --git a/feedback/index.html b/feedback/index.html index 06e943d..c70ca03 100644 --- a/feedback/index.html +++ b/feedback/index.html @@ -28,15 +28,21 @@
-

Guus van Meerveld

+

User

+
+

+
+
+ +

User

-

Zou jij graag je eigen feedback hier tussen zien? Ga dan naar contact en verstuur een bericht!

+

User

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a risus eu ex sagittis interdum ac ac odio. Proin eleifend turpis a aliquam.

+

diff --git a/index.html b/index.html index b87d715..ed217b7 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,6 @@ Home - @@ -19,56 +18,33 @@ -
- -
-

uren

:minuten

:seconden


-

datum

-

+
- - - - - - - - - - - +

Guus van Meerveld

- - - + + -
+ + +
+

This website is built for those who like to code.

+

And it is built by those who like to code

+

Suggest things you would like to see at contact

+
+ - - - - diff --git a/js.js b/js.js index c673f1a..e69de29 100644 --- a/js.js +++ b/js.js @@ -1,32 +0,0 @@ -var d = document.getElementById.bind(document); -var c = document.createElement.bind(document); -var q = document.querySelector.bind(document); - -// 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.getHours() < 10) { - d("hours").innerHTML = "0" + date.getHours() + ":" - } - else { - d("hours").innerHTML = date.getHours() + ":" - } - if (date.getMinutes() < 10) { - d("mins").innerHTML = "0" + date.getMinutes() + ":" - } - else { - d("mins").innerHTML = date.getMinutes() + ":" - } - if (date.getSeconds() < 10) { - d("secs").innerHTML = "0" + date.getSeconds() - } - else { - d("secs").innerHTML = date.getSeconds() - } - d("date").innerHTML = days[date.getDay()] + " " + date.getDate() + " " + months[date.getMonth()]; - setTimeout(showTime, 1000); -} - -showTime(); diff --git a/playground/index.html b/playground/index.html index 99f951e..bf94514 100644 --- a/playground/index.html +++ b/playground/index.html @@ -23,9 +23,9 @@ - - - + + + diff --git a/playground/js.js b/playground/js.js index 74fa61b..d86725d 100644 --- a/playground/js.js +++ b/playground/js.js @@ -32,17 +32,18 @@ function autoRun() { function showCode(lang) { $(".langButton").css("background-color", "#3b3c45") + $(".langButton").css("border", "none") $(".langInput").css("display", "none") if (lang == "html") { - d("htmlButton").style = "background-color: #27282e;" + d("htmlButton").style = "background-color: #27282e;border-bottom: white 2px solid;" d("htmlInput").style = "display: block" } else if (lang == "css") { - d("cssButton").style = "background-color: #27282e;" + d("cssButton").style = "background-color: #27282e;border-bottom: white 2px solid;" d("cssInput").style = "display: block" } else { - d("jsButton").style = "background-color: #27282e;" + d("jsButton").style = "background-color: #27282e;border-bottom: white 2px solid;" d("jsInput").style = "display: block" } } diff --git a/resources/css/navbar.css b/resources/css/navbar.css index 7909dc6..f470d09 100644 --- a/resources/css/navbar.css +++ b/resources/css/navbar.css @@ -53,7 +53,7 @@ .navList:hover .fas { transform: rotate(-180deg); } -.lowerIndex { +/* .lowerIndex { z-index: -1!important; } .opacityMenu { @@ -66,7 +66,7 @@ background-color: black; display: inline-block; z-index: 1; -} +} */ .fa-bars { display: none!important; } diff --git a/resources/css/shortcuts.css b/resources/css/shortcuts.css deleted file mode 100644 index 270cf03..0000000 --- a/resources/css/shortcuts.css +++ /dev/null @@ -1,78 +0,0 @@ -/* Shortcuts */ -.shortcuts button { - margin: 0 0 1rem 1rem; - width: 12rem; - max-height: 5.3rem; - padding: 1rem; - color: white; - background-color: #363840; - border: #363840 0px solid; - border-radius: .5rem; - display: inline-block; - transition: background-color .5s, border .5s; -} -.shortcuts button::-webkit-scrollbar { - display: hidden; -} -.shortcuts button:hover { - background-color: #3d3e47; - border-color: #3d3e47; -} -.shortcuts button:hover .removeShortcut { - display: inline; -} -.shortcuts button:focus { - outline: none; - box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25) inset; -} -.shortcuts img { - width: 3rem; - margin-right: 1rem; - height: 3rem; -} - -/* Shortcut creation menu */ -.hidden { - opacity: 0!important; -} -.menu { - transition: opacity .5s; -} -#addShortcutMenu { - display: inline-block; - z-index: 2; - border-radius: .75rem; - position: absolute; - left: calc(50% - 25rem); - height: 27rem; - width: 50rem; - top: 15%; -} -#addShortcutMenu h1 { - margin: 1rem 0 0 1rem; -} -#addShortcutMenu input { - width: 96%; - height: 2.5rem; - margin-left: 1rem!important; -} -#addShortcutMenu h4 { - margin: 2rem 0 0 1rem; -} -#addShortcutMenu button { - float: right; - margin: 4rem 1rem 0 0; - padding: .5rem; -} -@media screen and (min-width:0px) and (max-width:1000px) { - #addShortcutMenu { - width: 94%!important; - left: 1rem!important; - margin-left: 0px!important; - } - section span button { - width: 9rem!important; - height: 8rem!important; - color: transparent!important; - } -} diff --git a/resources/js/insertNavbar.js b/resources/js/insertNavbar.js index b5f63f8..bc79297 100644 --- a/resources/js/insertNavbar.js +++ b/resources/js/insertNavbar.js @@ -24,7 +24,7 @@ navigation.prepend(hamburger) // Search var search = c("input") search.className = "searchBar" -search.placeholder = "Vul een zoek opdracht of url in" +search.placeholder = "Enter a searchterm or url" search.type = "text" navigation.appendChild(search) diff --git a/resources/js/navbar.json.js b/resources/js/navbar.json.js index 40a45c3..0b730e1 100644 --- a/resources/js/navbar.json.js +++ b/resources/js/navbar.json.js @@ -1,31 +1,32 @@ Navbar = [ { icon: "/resources/img/favicon.ico", - desc: "Ga naar de homepagina", + desc: "Go to the homepage", link: "/" }, - { - name: "Playground", - desc: "Test je html live!", - link: "/playground" - }, { name: "Contact", - desc: "Neem contact met mij op", + desc: "Contact me", link: "/contact" }, { name: "Feedback", - desc: "Feedback voor deze website", + desc: "Feedback for this website", link: "/feedback" }, { - name: "Games", - desc: "Hier kan je spelletjes spelen", + name: "Tools", + desc: "Tools for programming", dropdown: [ { - name: "Vuurjongen en Watermeisje 4", - link: "/vuurjongen-en-watermeisje-4" + name: "Playground", + desc: "Test your HTML live!", + link: "/playground" + }, + { + name: "Minifier", + desc: "Minify your HTML/CSS/JavaScript", + link: "/minify" } ] } diff --git a/resources/js/shortcuts.js b/resources/js/shortcuts.js deleted file mode 100644 index a7fac1f..0000000 --- a/resources/js/shortcuts.js +++ /dev/null @@ -1,69 +0,0 @@ -// Toggle Menu -function openMenu() { - $(".menu").removeClass("lowerIndex"); - $("#addShortcutMenu").removeClass("hidden"); - d("shortcutLink").setAttribute('placeholder', 'https://example.com') - d("shortcutName").setAttribute('placeholder', 'Example Website') -} -function closeMenu() { - if (!d("addShortcutMenu").classList.contains("hidden")) { - setTimeout(function () { - $(".menu").addClass("lowerIndex"); - }, 500) - $("#addShortcutMenu").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 shortcutButton = c("button") - shortcutButton.onclick = function() { window.open(shortcutLink); } - shortcutButton.innerHTML = shortcutName - var shortcutImage = c("img") - shortcutImage.src = "/resources/img/shortcut.png" - $("#shortcuts").append(shortcutButton); - $(shortcutButton).prepend(shortcutImage); - $(".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 = "" -}