Updated everything

add-license-1
Guuq 5 years ago
parent c79d3785c4
commit 03cdc67e2c

@ -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;

@ -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>

@ -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;
}
}

@ -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%;
}

@ -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>

@ -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>

@ -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;
}

@ -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>

@ -2,8 +2,31 @@ var d = document.getElementById.bind(document);
var g = document.querySelector.bind(document);
function selectCode(source) {
switch (source){
case: html
switch (source) {
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")
}

@ -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;

@ -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>

@ -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")
}

@ -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;

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

@ -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=>{

@ -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",