Updated Wireframe and made small changes

add-license-1
Guuq 5 years ago
parent 9906d5d7c3
commit 7c67907ee4

@ -61,7 +61,7 @@
} }
.secondBackground { .secondBackground {
width: 100%; width: 100%;
height: 80vh; height: 100vh;
background-position: center; background-position: center;
float: left; float: left;
background-image: url("/resources/img/roadwoodsred.jpg"); background-image: url("/resources/img/roadwoodsred.jpg");

@ -1,3 +1,32 @@
#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; box-sizing: border-box;
} }

@ -14,10 +14,18 @@
</head> </head>
<body> <body>
<h1 class="gallery"> <div id="headsUp">
Dit is de gallerij voor alle foto's die op deze website gebruikt zijn. (Ik heb ze niet zelf gemaakt) <br> <div class="welcome">
Er staan ook nog wat extra foto's bij die ik misschien nog wil gaan gebruiken. <h5>Welkom bij de Gallerij,</h5>
</h1> <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="rowImg">
<div class="columnImg"> <div class="columnImg">
@ -34,6 +42,7 @@
</div> </div>
</div> </div>
<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>

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

@ -42,10 +42,14 @@
background-color: rgb(59, 60, 69); background-color: rgb(59, 60, 69);
border: 0; border: 0;
color: white; color: white;
transition: .3s background-color;
float: left; float: left;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
} }
#run { .langButton:hover {
background-color: #27282e;
}
.run {
float: right; float: right;
} }
@media screen and (min-width:0px) and (max-width:1000px) { @media screen and (min-width:0px) and (max-width:1000px) {

@ -31,7 +31,7 @@
<button class="langButton" onclick="selectCode('html')">HTML</button> <button class="langButton" onclick="selectCode('html')">HTML</button>
<button class="langButton" onclick="selectCode('css')">CSS</button> <button class="langButton" onclick="selectCode('css')">CSS</button>
<button class="langButton" onclick="selectCode('js')">JS</button> <button class="langButton" onclick="selectCode('js')">JS</button>
<button id="run" class="langButton">RUN</button> <button onclick="runMinify()" class="langButton run">RUN</button>
<textarea name="" spellcheck="false" class="input" placeholder="Type the code that you want to minify here" id="inputCode" cols="30" rows="10"></textarea> <textarea name="" spellcheck="false" class="input" placeholder="Type the code that you want to minify here" id="inputCode" cols="30" rows="10"></textarea>
</div> </div>

@ -2,16 +2,18 @@ var d = document.getElementById.bind(document);
var g = document.querySelector.bind(document); var g = document.querySelector.bind(document);
function selectCode(source) { function selectCode(source) {
switch (source) { localStorage.setItem("selectCode", source)
case html: }
function runMinify() {
var source = localStorage.getItem("selectCode")
if (source == "html") {
minifyHTML(); minifyHTML();
break; }
case css: if (source == "css") {
minifyCSS(); minifyCSS();
break; }
case js: if (source == "js") {
minifyJS(); minifyJS();
break;
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

@ -11,8 +11,8 @@
<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 style="padding-top:55px;">
<iframe frameborder="0" style="width:100%;height:1613px;margin-top:55px" src="https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1#G1vT68Q4d2UKJXYb5r3QZnwIrg5F2F8f1v"></iframe> <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>