Updated everything

5 years ago · 03cdc67e2c
parent c79d3785c4
commit 03cdc67e2c
24 changed files with 295 additions and 108 deletions
--- a/contact/css.css
+++ b/contact/css.css
@ -1,6 +1,9 @@
 .main {
  width: 100%;
  float: left;
+  background-position: center;
+  background-image: url("/resources/img/leaves.jpg");
+  background-size: cover;
 }
 .main h1 {
  text-align: center;
--- a/contact/index.html
+++ b/contact/index.html
@ -16,21 +16,21 @@

 <body>
    <div class="main">
-        <h1>Need more info?</h1>
+        <h1>Meer info?</h1>
        <div class="form">
            <form action="/contact/thank-you/" method="get">
-              <h3>Name and last name<span>*</span></h3>
+              <h3>Naam en achternaam<span>*</span></h3>
              <input type="text" class="dataInput input" required name="name" autofocus spellcheck="false">
              <h3>E-mail<span>*</span></h3>
              <input type="text" class="dataInput input" required name="email" spellcheck="false">
-              <h3>Message<span>*</span></h3>
+              <h3>Bericht<span>*</span></h3>
              <input type="text" class="dataInput input" required name="message" spellcheck="false"><br>
              <input type="submit" class="submit button">
            </form>
        </div>
    </div>
    <div class="info">
-        <h2>Contact information:</h2>
+        <h2>Contact informatie:</h2>
        <ul>
            <li>
                <h4>PHONE</h4></li>
--- a/css.css
+++ b/css.css
@ -1,8 +1,11 @@
 /* Main CSS */
 .mainContent {
-  padding-top: 10rem;
+  padding-top: 10vh;
  width: 100%;
  height: 100vh;
+  background-position: center;
+  background-image: url("/resources/img/roadwoods.jpg");
+  background-size: cover;
 }
 .name {
  margin: 0 auto;
@ -12,43 +15,23 @@
  text-align: center;
  height: 5rem;
 }
-.quickButtons {
-  margin: 0 auto;
-  margin-top: 8rem;
+.welcome {
+  display: block;
+  margin: 2rem auto;
  width: 50%;
-  display: flex;
-  justify-content: center;
-}
-.goButton {
-  background-color: #33353d;
-  border: 0;
-  min-width: 25rem;
  text-align: center;
-  cursor: pointer;
-  border-radius: .3rem;
-  margin: 2rem;
-  color: white;
-  border-bottom: #26282f 5px solid;
-  padding: 2rem;
-  font-size: 2rem;
-}
-.goButton:hover {
-  color: white!important;
-}
-.goButton:active {
-  border: 0;
-  border-top: #26282f 5px solid;
 }
 .slideDown {
+  display: flex;
  position: absolute;
-  padding: .8rem;
-  width: 4rem;
-  height: 4rem;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
  border-radius: 50%;
  border: 2px solid white;
-  text-align: center;
-  left: calc(50% - 2rem);
-  top: 85vh;
+  left: calc(50% - 1.75rem);
+  top: 80vh;
 }
 .slideDown:hover {
  color: white!important;
@ -60,17 +43,31 @@
  justify-content: center;
  align-items: center;
  width: 100%;
+  box-shadow: 0 -1px 15px 5px hsla(0, 0%, 0%, 0.8);
  float: left;
  height: 30vh;
-  background-color: #454752;
+  background-color: #33353d;
 }
 .infoBlockMe {
  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 33%;
+  border-right: #454752 2px solid;
+}
+.infoBlockMe h1 {
  text-align: center;
-  display: inline-block;
-  height: 10rem;
-  width: 25rem;
-  border-right: 3px solid white;
+  max-width: 80%;
+}
+.secondBackground {
+  width: 100%;
+  height: 80vh;
+  background-position: center;
+  float: left;
+  background-image: url("/resources/img/roadwoodsred.jpg");
+  background-size: cover;
 }
 /* About Website */
 .aboutPages {
@ -85,33 +82,30 @@
  border-right: #454752 2px solid;
  display: flex;
  align-items: center;
+  justify-content: center;
  height: 100%;
  float: left;
 }
-.infoHeadPages {
-  width: 40%;
-  margin-left: 1rem;
-  padding-right: 1rem;
-  border-right: 3px solid white;
-}
 .infoTextPages {
-  margin-left: 2rem;
-  width: 50%;
+  width: 70%;
+  text-align: center;
 }
 /* Mobile support */
@viewport {
  width: device-width;
  zoom: 1.0;
 }
-/* Support for mobile devices */
-@media screen and (min-width:0px) and (max-width:1000px) {
-  .mainContent {
-    width: 100%!important;
+@media screen and (min-width:0px) and (max-width:1500px) {
+  .infoBlockMe h1 {
+    font-size: 1.8rem;
  }
-  svg {
-    display: none;
+  .infoBlockPages h2 {
+    font-size: 1.5rem;
  }
-  .time {
-    font-size: 4rem!important;
+}
+/* Support for mobile devices */
+@media screen and (min-width:0px) and (max-width:1000px) {
+  .name {
+    font-size: 3rem;
  }
 }
--- a/gallery/css.css
+++ b/gallery/css.css
@ -0,0 +1,25 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  background-color: #212126!important;
+}
+.gallery {
+  margin-top: calc(3rem + 55px);
+  text-align: center;
+}
+.rowImg {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 4px;
+  margin-top: 3rem;
+}
+.columnImg {
+  flex: 33%;
+  max-width: 33%;
+  padding: 0 4px;
+}
+.columnImg img {
+  margin-top: 8px;
+  width: 100%;
+}
--- a/gallery/index.html
+++ b/gallery/index.html
@ -0,0 +1,45 @@
+<!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">
+  <title>Gallerij</title>
+  <link rel="stylesheet" href="/resources/css/cssall.css">
+  <link rel="stylesheet" href="/resources/css/navbar.css">
+  <link rel="stylesheet" href="/gallery/css.css">
+  <script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
+  <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.3.1/jquery.min.js"></script>
+</head>
+<body>
+
+  <h1 class="gallery">
+  Dit is de gallerij voor alle foto's die op deze website gebruikt zijn. <br>
+  Er staan ook nog wat extra foto's bij die ik misschien nog wil gaan gebruiken.
+  </h1>
+
+<div class="rowImg">
+  <div class="columnImg">
+    <img src="/resources/img/mountain.jpg">
+    <img src="/resources/img/leaves.jpg">
+    <img src="/w3images/falls2.jpg">
+  </div>
+  <div class="columnImg">
+    <img src="/resources/img/roadwoods.jpg">
+    <img src="/resources/img/sunset.jpg">
+    <img src="/w3images/falls2.jpg">
+  </div>
+  <div class="columnImg">
+    <img src="/resources/img/roadwoodsred.jpg">
+    <img src="/resources/img/nightcity.jpg">
+    <img src="/w3images/falls2.jpg">
+  </div>
+</div>
+
+  <script src="/resources/js/navbar.json.js"></script>
+	<script src="/resources/js/insertNavbar.js"></script>
+	<script src="/resources/js/javall.js"></script>
+
+</body>
+</html>
--- a/index.html
+++ b/index.html
@ -21,36 +21,29 @@
 	<!-- Main Content -->
 	<div class="mainContent">
 		<h1 class="name">Guus van Meerveld</h1>
-		<div class="quickButtons">
-			<a class="goButton" title="Playground" href="/playground">Creër je eigen website</a>
-			<a class="goButton" title="Minify" href="/minify">Maak je code korter</a>
-		</div>
-		<a class="slideDown" href="#2" id="2"><i class="fas fa-caret-down fa-2x"></i></a>
-		<!-- <img src="/resources/img/rocket.png" alt="rocket" id="rocket"> -->
+		<h1 class="welcome">Welkom op deze website!</h1>
+		<a class="slideDown" href="#2"><i class="fas fa-caret-down fa-2x caret-down"></i></a>
 	</div>

 	<!-- About Me-->
-	<div class="about">
-		<h1 class="infoBlockMe">Mijn naam is Guus van Meerveld</h1>
-		<h1 class="infoBlockMe">Ik ben 15 jaar oud en heb deze website gebouwd</h1>
-		<h1 class="infoBlockMe" style="border:0;">Als je suggesties hebt, ga dan naar <a href="/contact" style="text-decoration:underline!important;">contact</a></h1>
+	<div class="about" id="2">
+		<div class="infoBlockMe"><h1>Mijn naam is Guus van Meerveld</h1></div>
+		<div class="infoBlockMe"><h1>Ik ben 15 jaar oud en heb deze website gebouwd</h1></div>
+		<div class="infoBlockMe" style="border:0;"><h1>Als je suggesties hebt, ga dan naar <a href="/contact" style="text-decoration:underline!important;">contact</a></h1></div>
 	</div>

+	<!--  -->
+	<div class="secondBackground"></div>
+
 	<!-- Info about the pages on the site -->
 	<div class="aboutPages">
 		<div class="infoBlockPages">
-			<div class="infoHeadPages">
-				<h2>Het doel van deze website is om handig tools aan te bieden.</h2>
-			</div>
 			<div class="infoTextPages">
-				<h2>Zoals playground, waar je je eigen website kan bouwen met HTML, CSS en JavaScript</h2>
+				<h2>Het idee van deze website is om al mijn hobbys op een plek samen te brengen.</h2>
 			</div>
 		</div><div class="infoBlockPages">
-			<div class="infoHeadPages">
-				<h2></h2>
-			</div>
 			<div class="infoTextPages">
-				<h2></h2>
+				<h2>Ik vind het vooral leuk om foto's te maken, maar ook om te programmeren.</h2>
 			</div>
 		</div>
 	</div>
--- a/minify/css.css
+++ b/minify/css.css
@ -1,7 +1,36 @@
+#headsUp {
+  visibility: hidden;
+  transition: height .3s;
+  background-color: #454752;
+  box-shadow: 0 1px 6px 1px hsla(0, 0%, 0%, 0.4);
+  z-index: 3;
+  margin-top: 55px;
+  position: relative;
+}
+.welcome {
+  position: absolute;
+  bottom: 4.5rem;
+  padding-left: 2.5%;
+}
+.removeOptions {
+  width: 100%;
+  position: absolute;
+  bottom: 1rem;
+  padding-left: 2.5%;
+}
+.hideHeadsUp {
+  height: 3rem;
+}
+.removeHeadsUp {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 1rem;
+  border-bottom: white 3px dotted;
+}
 .mainContent {
  height: 100vh;
  width: 100%;
-  padding: 7rem;
+  padding: 3rem;
  padding-bottom: 0;
  background-color: #222226;
 }
--- a/minify/index.html
+++ b/minify/index.html
@ -14,6 +14,19 @@
 </head>
 <body>

+  <div id="headsUp">
+    <div class="welcome">
+    <h5>Welkom bij Minify,</h5>
+    <h5>Hier kan je je HTML, CSS en JavaScript code kleiner laten maken.</h5>
+    <h5>Het voordeel hiervan is dat je code sneller werkt.</h5>
+    <h5>Plak hieronder je code en klik op run om het kleiner te maken.</h5>
+    </div>
+    <div class="removeOptions">
+    <button class="hideHeadsUp button" onclick="hideHeadsUp()">Begrepen</button>
+    <h5 class="removeHeadsUp" onclick="removeHeadsUp()">Laat mij dit niet meer zien</h5>
+    </div>
+  </div>
+
  <div class="mainContent">
    <button class="langButton" onclick="selectCode('html')">HTML</button>
    <button class="langButton" onclick="selectCode('css')">CSS</button>
--- a/minify/js.js
+++ b/minify/js.js
@ -3,7 +3,30 @@ var g = document.querySelector.bind(document);

 function selectCode(source) {
  switch (source) {
-    case: html
+    case html:
+    minifyHTML();
+      break;
+    case css:
+    minifyCSS();
+      break;
+    case js:
+    minifyJS();
+      break;
+  }
+}
+
+function minifyHTML() {

 }
+
+if (localStorage.getItem("showHeadsUpMinify") == undefined) {
+  d("headsUp").style.visibility = "visible"
+  d("headsUp").style.height = "13rem"
+}
+function hideHeadsUp() {
+  d("headsUp").style.height = "0"
+}
+function removeHeadsUp() {
+  hideHeadsUp();
+  localStorage.setItem("showHeadsUpMinify", "1")
 }
--- a/playground/css.css
+++ b/playground/css.css
@ -1,7 +1,36 @@
+
+#headsUp {
+  visibility: hidden;
+  transition: height .3s;
+  background-color: #454752;
+  box-shadow: 0 1px 6px 1px hsla(0, 0%, 0%, 0.4);
+  z-index: 3;
+  margin-top: 55px;
+  position: relative;
+}
+.welcome {
+  position: absolute;
+  bottom: 4.5rem;
+  padding-left: 2.5%;
+}
+.removeOptions {
+  width: 100%;
+  position: absolute;
+  bottom: 1rem;
+  padding-left: 2.5%;
+}
+.hideHeadsUp {
+  height: 3rem;
+}
+.removeHeadsUp {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 1rem;
+  border-bottom: white 3px dotted;
+}
 .content {
  width: 100%;
  height: 61.7rem;
-  margin-top: 55px;
 }
 .content div {
  float: left;
--- a/playground/index.html
+++ b/playground/index.html
@ -15,6 +15,18 @@
 </head>

 <body>
+    <div id="headsUp">
+      <div class="welcome">
+      <h5>Welkom bij Playground,</h5>
+      <h5>Hier kan je experimenteren met HTML, CSS en JavaScript om een website te bouwen.</h5>
+      <h5>De knop autorun zorgt ervoor de je code automatisch uitgevoert wordt zodra je het typt.</h5>
+      <h5>Zodra je op run klikt, wordt je code voor je opgeslagen zodat je het niet kwijtraakt.</h5>
+      </div>
+      <div class="removeOptions">
+      <button class="hideHeadsUp button" onclick="hideHeadsUp()">Begrepen</button>
+      <h5 class="removeHeadsUp" onclick="removeHeadsUp()">Laat mij dit niet meer zien</h5>
+      </div>
+    </div>
    <div class="content">
        <div class="codeContent">
            <div>
@ -23,9 +35,9 @@
                <button onclick="showCode()" class="langButton" id="jsButton">JS</button>
                <button class="options" id="autoRun" onclick="autoRun()">AUTORUN</button>
                <button onclick="updateCode('run')" class="options">RUN</button>
-                <textarea class="input langInput" id="htmlInput" onkeyup="updateCode('autoRun')" placeholder="Type your HTML here" spellcheck="false"></textarea>
-                <textarea class="input langInput" id="cssInput" onkeyup="updateCode('autoRun')" placeholder="Type your CSS here" spellcheck="false"></textarea>
-                <textarea class="input langInput" id="jsInput" onkeyup="updateCode('autoRun')" placeholder="Type your JavaScript here" spellcheck="false"></textarea>
+                <textarea class="input langInput" id="htmlInput" onkeyup="updateCode('autoRun')" placeholder="Type hier je HTML" spellcheck="false"></textarea>
+                <textarea class="input langInput" id="cssInput" onkeyup="updateCode('autoRun')" placeholder="Type hier je CSS" spellcheck="false"></textarea>
+                <textarea class="input langInput" id="jsInput" onkeyup="updateCode('autoRun')" placeholder="Type hier je JavaScript" spellcheck="false"></textarea>
            </div>
        </div>
        <iframe id="htmlOutput"></iframe>
--- a/playground/js.js
+++ b/playground/js.js
@ -62,3 +62,15 @@ function updateCode(source) {
 emmet.require('textarea').setup({
 use_tab: true       // expand abbreviations by Tab key
 });
+
+if (localStorage.getItem("showHeadsUpPlayground") == undefined) {
+  d("headsUp").style.visibility = "visible"
+  d("headsUp").style.height = "13rem"
+}
+function hideHeadsUp() {
+  d("headsUp").style.height = "0"
+}
+function removeHeadsUp() {
+  hideHeadsUp();
+  localStorage.setItem("showHeadsUpPlayground", "1")
+}
--- a/resources/css/cssall.css
+++ b/resources/css/cssall.css
@ -10,7 +10,6 @@ html {
 }
 body {
  font-family: 'Raleway', sans-serif!important;
-  background-image: url(/resources/img/wallpaper.png);
  margin: 0px;
  color: white!important;
  overflow-x: hidden;
--- a/resources/img/leaves.jpg
+++ b/resources/img/leaves.jpg
--- a/resources/img/moon.png
+++ b/resources/img/moon.png
--- a/resources/img/mountain.jpg
+++ b/resources/img/mountain.jpg
--- a/resources/img/nightcity.jpg
+++ b/resources/img/nightcity.jpg
--- a/resources/img/roadwoods.jpg
+++ b/resources/img/roadwoods.jpg
--- a/resources/img/roadwoodsred.jpg
+++ b/resources/img/roadwoodsred.jpg
--- a/resources/img/rocket.png
+++ b/resources/img/rocket.png
--- a/resources/img/sunset.jpg
+++ b/resources/img/sunset.jpg
--- a/resources/img/wallpaper.png
+++ b/resources/img/wallpaper.png
--- a/resources/js/insertNavbar.js
+++ b/resources/js/insertNavbar.js
@ -21,31 +21,31 @@ var hamburger = c("i")
 hamburger.className = "fas fa-bars fa-2x"
 navigation.prepend(hamburger)

-// Search
-var search = c("input")
-search.className = "searchBar"
-search.placeholder = "Enter a searchterm or url"
-search.type = "text"
-navigation.appendChild(search)
-
-g(".searchBar").addEventListener("keyup",searchEnter)
-function searchEnter(key) {
-  if(key.key == "Enter") {
-    var search = g(".searchBar").value;
-    var containsDot = search.indexOf(".");
-    if (search !== "") {
-      if (containsDot > -1) {
-        open("http://" + search);
-      }
-      else {
-        open("https://www.google.com/search?q=" + search);
-      }
-    }
-  }
-  if (key.key == "Escape") {
-    closeSearch()
-  }
-}
+// // Search
+// var search = c("input")
+// search.className = "searchBar"
+// search.placeholder = "Enter a searchterm or url"
+// search.type = "text"
+// navigation.appendChild(search)
+//
+// g(".searchBar").addEventListener("keyup",searchEnter)
+// function searchEnter(key) {
+//   if(key.key == "Enter") {
+//     var search = g(".searchBar").value;
+//     var containsDot = search.indexOf(".");
+//     if (search !== "") {
+//       if (containsDot > -1) {
+//         open("http://" + search);
+//       }
+//       else {
+//         open("https://www.google.com/search?q=" + search);
+//       }
+//     }
+//   }
+//   if (key.key == "Escape") {
+//     closeSearch()
+//   }
+// }

 // Create Navbar
 Navbar.forEach(i=>{
--- a/resources/js/navbar.json.js
+++ b/resources/js/navbar.json.js
@ -14,6 +14,16 @@ Navbar = [
    desc: "Feedback for this website",
    link: "/feedback"
  },
+  {
+    name: "Wireframe",
+    desc: "De wireframe voor deze website",
+    link: "/wireframe"
+  },
+  {
+    name: "Gallerij",
+    desc: "Verzameling van foto's",
+    link: "/gallery"
+  },
  {
    name: "Tools",
    desc: "Tools for programming",