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-bottom: 2rem;
}
.userFeedback::-webkit-scrollbar {
display: none;
}
.userFeedback {
font-family: 'Open Sans';
display: inline-block;
vertical-align: top;
margin-left: 2rem;
padding-left: 1rem;
height: 11.7rem;
overflow: scroll;
overflow-x: hidden;
border-left: #ededed 2px solid;
width: 30rem;
word-wrap: break-word;

8
feedback/index.html
Unescape View File

@ -24,19 +24,19 @@
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>Peer Droog</h3>
</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 class="user">
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>Jonathan Bos</h3>
</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 class="user">
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>User</h3>
<h3>Dyme Zevenhuizen</h3>
</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 class="user">
<img src="/resources/img/user.png" alt="" class="userImg">

156
gallery/css.css
Unescape View File

@ -1,77 +1,79 @@
#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;
}
* {
box-sizing: border-box;
}
body {
background-color: #212126!important;
}
button {
border: 0;
padding: 0;
margin-top: 8px!important;
}
.gallery {
margin-top: calc(3rem + 55px);
text-align: center;
font-size: 2vw;
}
.rowImg {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
margin-top: 3rem;
}
.columnImg {
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
.columnImg img {
width: 100%;
}
@media screen and (min-width:500px) and (max-width:1000px) {
.columnImg {
flex: 50%;
max-width: 50%;
}
.gallery {
font-size: 3vw;
}
}
@media screen and (min-width:0px) and (max-width:500px) {
.columnImg {
flex: 100%;
max-width: 100%;
}
.gallery {
font-size: 5vw;
}
}
#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;
}
* {
box-sizing: border-box;
}
body {
background-color: #212126!important;
}
.rowImg button {
border: 0;
padding: 0;
margin-top: 8px!important;
}
.gallery {
margin-top: calc(3rem + 55px);
text-align: center;
font-size: 2vw;
}
.rowImg {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0 4px;
margin-top: 3rem;
}
.columnImg {
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
.columnImg img {
width: 100%;
}
@media screen and (min-width:500px) and (max-width:1000px) {
.columnImg {
flex: 50%;
max-width: 50%;
}
.gallery {
font-size: 3vw;
}
}
@media screen and (min-width:0px) and (max-width:500px) {
.columnImg {
flex: 100%;
max-width: 100%;
}
.gallery {
font-size: 5vw;
}
}

102
gallery/index.html
Unescape View File

@ -1,51 +1,51 @@
<!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>
<div id="headsUp">
<div class="welcome">
<h5>Welkom bij de Gallerij,</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>Je kan op de foto's klikken om de bron te zien.</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="rowImg">
<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/close-up-photography-of-leaves-with-droplets-807598/', '_self')"><img src="/resources/img/leaves.jpg" alt="img"></button>
</div>
<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/asphalt-dark-dawn-endless-531321/', '_self')"><img src="/resources/img/roadwoods.jpg" alt="img"></button>
</div>
<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/silhouette-of-trees-during-sunset-1723637/', '_self')"><img src="/resources/img/sunset.jpg" alt="img"></button>
</div>
</div>
<script src="/gallery/js.js"></script>
<script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script>
</body>
</html>
<!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>
<div id="headsUp">
<div class="welcome">
<h5>Welkom bij de Gallerij,</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>Je kan op de foto's klikken om de bron te zien.</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="rowImg">
<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/close-up-photography-of-leaves-with-droplets-807598/', '_self')" class="wide"><img src="/resources/img/leaves.jpg" alt="img"></button>
</div>
<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/asphalt-dark-dawn-endless-531321/', '_self')" class="wide"><img src="/resources/img/roadwoods.jpg" alt="img"></button>
</div>
<div class="columnImg">
<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>
</div>
</div>
<script src="/gallery/js.js"></script>
<script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script>
</body>
</html>

28
gallery/js.js
Unescape View File

@ -1,14 +1,14 @@
var d = document.getElementById.bind(document);
var g = document.querySelector.bind(document);
if (localStorage.getItem("showHeadsUpGallery") == undefined) {
d("headsUp").style.visibility = "visible"
d("headsUp").style.height = "13rem"
}
function hideHeadsUp() {
d("headsUp").style.height = "0"
}
function removeHeadsUp() {
hideHeadsUp();
localStorage.setItem("showHeadsUpGallery", "1")
}
var d = document.getElementById.bind(document);
var g = document.querySelector.bind(document);
if (localStorage.getItem("showHeadsUpGallery") == undefined) {
d("headsUp").style.visibility = "visible"
d("headsUp").style.height = "13rem"
}
function hideHeadsUp() {
d("headsUp").style.height = "0"
}
function removeHeadsUp() {
hideHeadsUp();
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)
document.body.appendChild(navigation)
// // Opacity
// var opacity = c("div")
// opacity.className = "opacityMenu lowerIndex menu"
// document.body.appendChild(opacity)
// Hamburger Menu
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()
// }
// }
// Create Navbar
Navbar.forEach(i=>{
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
var shortcon = $("<link>", {rel :'shortcut icon',href:'/resources/img/favicon.ico'})
$('head').append(shortcon)

42
wireframe/index.html
Unescape View File

@ -1,21 +1,21 @@
<!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>Wireframe</title>
<link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.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 style="padding-top:55px;">
<img src="/resources/img/wireframe.png" alt="wireframe">
<script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script>
</body>
</html>
<!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>Wireframe</title>
<link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.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 style="padding-top:55px;">
<img src="/resources/img/wireframe.png" alt="wireframe">
<script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script>
</body>
</html>