Updated Wireframe and made small changes

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

@ -61,7 +61,7 @@
}
.secondBackground {
width: 100%;
height: 80vh;
height: 100vh;
background-position: center;
float: left;
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;
}

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

@ -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);
border: 0;
color: white;
transition: .3s background-color;
float: left;
padding: 1rem 1.5rem;
}
#run {
.langButton:hover {
background-color: #27282e;
}
.run {
float: right;
}
@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('css')">CSS</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>
</div>

@ -2,16 +2,18 @@ var d = document.getElementById.bind(document);
var g = document.querySelector.bind(document);
function selectCode(source) {
switch (source) {
case html:
localStorage.setItem("selectCode", source)
}
function runMinify() {
var source = localStorage.getItem("selectCode")
if (source == "html") {
minifyHTML();
break;
case css:
}
if (source == "css") {
minifyCSS();
break;
case js:
}
if (source == "js") {
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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<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>
<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>