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

Updated wireframe & small fixes

Browse Source
add-license-1
Guus van Meerveld 5 years ago committed by GitHub
parent 2d775d778c
commit 9c40ed2b59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 175 additions and 200 deletions
Show Stats Download Patch File Download Diff File

6
feedback/css.css
Unescape View File

@ -25,12 +25,18 @@
margin-left: calc(50% - 4rem); margin-left: calc(50% - 4rem);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.userFeedback::-webkit-scrollbar {
display: none;
}
.userFeedback { .userFeedback {
font-family: 'Open Sans'; font-family: 'Open Sans';
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin-left: 2rem; margin-left: 2rem;
padding-left: 1rem; padding-left: 1rem;
height: 11.7rem;
overflow: scroll;
overflow-x: hidden;
border-left: #ededed 2px solid; border-left: #ededed 2px solid;
width: 30rem; width: 30rem;
word-wrap: break-word; word-wrap: break-word;

8
feedback/index.html
Unescape View File

@ -24,19 +24,19 @@
<img src="/resources/img/user.png" alt="" class="userImg"> <img src="/resources/img/user.png" alt="" class="userImg">
<h3>Peer Droog</h3> <h3>Peer Droog</h3>
</div> </div>
<h2 class="userFeedback">"Een goede en overzichtelijk website met een handige klok, wel mist er de mogelijkheid om je eigen plaatjes toe te voegen aan de shortcuts."</h2> <h2 class="userFeedback">"duidelijke wireframe, de website doet erg goed wat het probeert te bereiken behalve dat er in de gallerij asymmetrie te vinden is en de foto links onderin iets te groot is"</h2>
</div><div class="feedback"> </div><div class="feedback">
<div class="user"> <div class="user">
<img src="/resources/img/user.png" alt="" class="userImg"> <img src="/resources/img/user.png" alt="" class="userImg">
<h3>Jonathan Bos</h3> <h3>Jonathan Bos</h3>
</div> </div>
<h2 class="userFeedback">De website ziet er goed uit. Ik zou misschien wat informatie geven bij de minifier. Het is namelijk nogal onduidelijk.</h2> <h2 class="userFeedback">"De website ziet er goed uit. Ik zou misschien wat informatie geven bij de minifier. Het is namelijk nogal onduidelijk."</h2>
</div><div class="feedback"> </div><div class="feedback">
<div class="user"> <div class="user">
<img src="/resources/img/user.png" alt="" class="userImg"> <img src="/resources/img/user.png" alt="" class="userImg">
<h3>User</h3> <h3>Dyme Zevenhuizen</h3>
</div> </div>
<h2 class="userFeedback"></h2> <h2 class="userFeedback">"Het is een mooie website met een aantal leuke mogelijkheden. Wel jammer dat de feedback niet echt bij je aankomt, maar ik begrijp dat je dan een andere hosting nodig hebt."</h2>
</div><div class="feedback"> </div><div class="feedback">
<div class="user"> <div class="user">
<img src="/resources/img/user.png" alt="" class="userImg"> <img src="/resources/img/user.png" alt="" class="userImg">

156
gallery/css.css
Unescape View File

@ -1,77 +1,79 @@
#headsUp { #headsUp {
visibility: hidden; visibility: hidden;
transition: height .3s; transition: height .3s;
background-color: #454752; background-color: #454752;
box-shadow: 0 1px 6px 1px hsla(0, 0%, 0%, 0.4); box-shadow: 0 1px 6px 1px hsla(0, 0%, 0%, 0.4);
z-index: 3; z-index: 3;
margin-top: 55px; margin-top: 55px;
position: relative; position: relative;
} }
.welcome { .welcome {
position: absolute; position: absolute;
bottom: 4.5rem; bottom: 4.5rem;
padding-left: 2.5%; padding-left: 2.5%;
} }
.removeOptions { .removeOptions {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 1rem; bottom: 1rem;
padding-left: 2.5%; padding-left: 2.5%;
} }
.hideHeadsUp { .hideHeadsUp {
height: 3rem; height: 3rem;
}
.removeHeadsUp { }
cursor: pointer; .removeHeadsUp {
display: inline-block; cursor: pointer;
margin-left: 1rem; display: inline-block;
border-bottom: white 3px dotted; margin-left: 1rem;
} border-bottom: white 3px dotted;
* { }
box-sizing: border-box; * {
} box-sizing: border-box;
body { }
background-color: #212126!important; body {
} background-color: #212126!important;
button { }
border: 0; .rowImg button {
padding: 0; border: 0;
margin-top: 8px!important; padding: 0;
} margin-top: 8px!important;
.gallery { }
margin-top: calc(3rem + 55px); .gallery {
text-align: center; margin-top: calc(3rem + 55px);
font-size: 2vw; text-align: center;
} font-size: 2vw;
.rowImg { }
display: flex; .rowImg {
flex-wrap: wrap; display: flex;
padding: 0 4px; justify-content: center;
margin-top: 3rem; flex-wrap: wrap;
} padding: 0 4px;
.columnImg { margin-top: 3rem;
flex: 33%; }
max-width: 33%; .columnImg {
padding: 0 4px; flex: 33%;
} max-width: 33%;
.columnImg img { padding: 0 4px;
width: 100%; }
} .columnImg img {
@media screen and (min-width:500px) and (max-width:1000px) { width: 100%;
.columnImg { }
flex: 50%; @media screen and (min-width:500px) and (max-width:1000px) {
max-width: 50%; .columnImg {
} flex: 50%;
.gallery { max-width: 50%;
font-size: 3vw; }
} .gallery {
} font-size: 3vw;
@media screen and (min-width:0px) and (max-width:500px) { }
.columnImg { }
flex: 100%; @media screen and (min-width:0px) and (max-width:500px) {
max-width: 100%; .columnImg {
} flex: 100%;
.gallery { max-width: 100%;
font-size: 5vw; }
} .gallery {
} font-size: 5vw;
}
}

102
gallery/index.html
Unescape View File

@ -1,51 +1,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gallerij</title> <title>Gallerij</title>
<link rel="stylesheet" href="/resources/css/cssall.css"> <link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.css"> <link rel="stylesheet" href="/resources/css/navbar.css">
<link rel="stylesheet" href="/gallery/css.css"> <link rel="stylesheet" href="/gallery/css.css">
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script> <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"> <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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> </head>
<body> <body>
<div id="headsUp"> <div id="headsUp">
<div class="welcome"> <div class="welcome">
<h5>Welkom bij de Gallerij,</h5> <h5>Welkom bij de Gallerij,</h5>
<h5>Hier staan alle foto's die op deze website gebruikt zijn.</h5> <h5>Hier staan alle foto's die op deze website gebruikt zijn.</h5>
<h5>Er staan ook foto's tussen die ik nog wil gebruiken.</h5> <h5>Er staan ook foto's tussen die ik nog wil gebruiken.</h5>
<h5>Je kan op de foto's klikken om de bron te zien.</h5> <h5>Je kan op de foto's klikken om de bron te zien.</h5>
</div> </div>
<div class="removeOptions"> <div class="removeOptions">
<button class="hideHeadsUp button" onclick="hideHeadsUp()">Begrepen</button> <button class="hideHeadsUp button" onclick="hideHeadsUp()">Begrepen</button>
<h5 class="removeHeadsUp" onclick="removeHeadsUp()">Laat mij dit niet meer zien</h5> <h5 class="removeHeadsUp" onclick="removeHeadsUp()">Laat mij dit niet meer zien</h5>
</div> </div>
</div> </div>
<div class="rowImg"> <div class="rowImg">
<div class="columnImg"> <div class="columnImg">
<button onclick="window.open('https://www.pexels.com/photo/scenic-view-of-rocky-mountain-during-evening-1624438/', '_self')"><img src="/resources/img/mountain.jpg" alt="img"></button> <button onclick="window.open('https://www.pexels.com/photo/scenic-view-of-rocky-mountain-during-evening-1624438/', '_self')"><img src="/resources/img/mountain.jpg" alt="img"></button>
<button onclick="window.open('https://www.pexels.com/photo/close-up-photography-of-leaves-with-droplets-807598/', '_self')"><img src="/resources/img/leaves.jpg" alt="img"></button> <button onclick="window.open('https://www.pexels.com/photo/close-up-photography-of-leaves-with-droplets-807598/', '_self')" class="wide"><img src="/resources/img/leaves.jpg" alt="img"></button>
</div> </div>
<div class="columnImg"> <div class="columnImg">
<button onclick="window.open('https://www.pexels.com/photo/landscape-photo-of-riverand-pine-trees-2217365/', '_self')"><img src="/resources/img/riverwoods.jpg" alt="img"></button> <button onclick="window.open('https://www.pexels.com/photo/landscape-photo-of-riverand-pine-trees-2217365/', '_self')"><img src="/resources/img/riverwoods.jpg" alt="img"></button>
<button onclick="window.open('https://www.pexels.com/photo/asphalt-dark-dawn-endless-531321/', '_self')"><img src="/resources/img/roadwoods.jpg" alt="img"></button> <button onclick="window.open('https://www.pexels.com/photo/asphalt-dark-dawn-endless-531321/', '_self')" class="wide"><img src="/resources/img/roadwoods.jpg" alt="img"></button>
</div> </div>
<div class="columnImg"> <div class="columnImg">
<button onclick="window.open('https://www.pexels.com/photo/concrete-road-between-trees-1563356/', '_self')"><img src="/resources/img/roadwoodsred.jpg" alt="img"></button> <button onclick="window.open('https://www.pexels.com/photo/concrete-road-between-trees-1563356/', '_self')" class="wide"><img src="/resources/img/roadwoodsred.jpg" alt="img"></button>
<button onclick="window.open('https://www.pexels.com/photo/silhouette-of-trees-during-sunset-1723637/', '_self')"><img src="/resources/img/sunset.jpg" alt="img"></button> <button onclick="window.open('https://www.pexels.com/photo/silhouette-of-trees-during-sunset-1723637/', '_self')"><img src="/resources/img/sunset.jpg" alt="img"></button>
</div> </div>
</div> </div>
<script src="/gallery/js.js"></script> <script src="/gallery/js.js"></script>
<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>
</body> </body>
</html> </html>

28
gallery/js.js
Unescape View File

@ -1,14 +1,14 @@
var d = document.getElementById.bind(document); var d = document.getElementById.bind(document);
var g = document.querySelector.bind(document); var g = document.querySelector.bind(document);
if (localStorage.getItem("showHeadsUpGallery") == undefined) { if (localStorage.getItem("showHeadsUpGallery") == undefined) {
d("headsUp").style.visibility = "visible" d("headsUp").style.visibility = "visible"
d("headsUp").style.height = "13rem" d("headsUp").style.height = "13rem"
} }
function hideHeadsUp() { function hideHeadsUp() {
d("headsUp").style.height = "0" d("headsUp").style.height = "0"
} }
function removeHeadsUp() { function removeHeadsUp() {
hideHeadsUp(); hideHeadsUp();
localStorage.setItem("showHeadsUpGallery", "1") localStorage.setItem("showHeadsUpGallery", "1")
} }

BIN
resources/img/wireframe.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 198 KiB

32
resources/js/insertNavbar.js
Unescape View File

@ -10,43 +10,11 @@ var navbarList = c("ul")
navigation.appendChild(navbarList) navigation.appendChild(navbarList)
document.body.appendChild(navigation) document.body.appendChild(navigation)
// // Opacity
// var opacity = c("div")
// opacity.className = "opacityMenu lowerIndex menu"
// document.body.appendChild(opacity)
// Hamburger Menu // Hamburger Menu
var hamburger = c("i") var hamburger = c("i")
hamburger.className = "fas fa-bars fa-2x" hamburger.className = "fas fa-bars fa-2x"
navigation.prepend(hamburger) 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()
// }
// }
// Create Navbar // Create Navbar
Navbar.forEach(i=>{ Navbar.forEach(i=>{
var navList = c("li") var navList = c("li")

1
resources/js/javall.js
Unescape View File

@ -3,5 +3,4 @@ console.log('%cDoor Guus van Meerveld', "color:#9c9c9c; font-size:30px;");
// Head tag // Head tag
var shortcon = $("<link>", {rel :'shortcut icon',href:'/resources/img/favicon.ico'}) var shortcon = $("<link>", {rel :'shortcut icon',href:'/resources/img/favicon.ico'})
$('head').append(shortcon) $('head').append(shortcon)

42
wireframe/index.html
Unescape View File

@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wireframe</title> <title>Wireframe</title>
<link rel="stylesheet" href="/resources/css/cssall.css"> <link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.css"> <link rel="stylesheet" href="/resources/css/navbar.css">
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script> <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"> <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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> </head>
<body style="padding-top:55px;"> <body style="padding-top:55px;">
<img src="/resources/img/wireframe.png" alt="wireframe"> <img src="/resources/img/wireframe.png" alt="wireframe">
<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>
</body> </body>
</html> </html>