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

15-11 #1

Browse Source
add-license-1
Guuq 5 years ago
parent e7059796ad
commit b8ad4f2388
7 changed files with 78 additions and 114 deletions
Show Stats Download Patch File Download Diff File

38
css.css
Unescape View File

@ -1,10 +1,15 @@
/* Main CSS */ /* Main CSS */
section { section {
float: left; float: left;
height: 95vh;
display: inline-block; display: inline-block;
width: 50%; width: 50%;
background-color: #454752; background-color: #454752;
height: 95vh;
overflow: scroll;
overflow-x: hidden;
}
section::-webkit-scrollbar {
display: none;
} }
svg { svg {
fill: #454752; fill: #454752;
@ -12,28 +17,6 @@ svg {
stroke: #454752; stroke: #454752;
height: 95vh; height: 95vh;
} }
/* Google search */
#googleSearchBar {
background-color: #ededed;
border: #ededed 2px solid;
position: sticky;
z-index: 2;
top: 6rem;
left: calc(50% - 48%);
padding: 1rem;
width: 96%;
height: 3rem;
border-radius: 2rem;
outline: none;
transition: border .4s, opacity .3s, top .3s;
}
#googleSearchBar:hover, #googleSearchBar:focus {
border: #4c8a80 2px solid;
}
.searchMove {
opacity: 0;
top: 0px!important;
}
/* Clock */ /* Clock */
#timeBox { #timeBox {
margin-left: 1rem; margin-left: 1rem;
@ -53,11 +36,10 @@ svg {
footer { footer {
background-color: black; background-color: black;
display: flex!important; display: flex!important;
height: 35vh;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
footer div { footer div {
margin: 5rem 0 0 8rem; margin: 5rem 0 3rem 8rem;
display: inline-block; display: inline-block;
} }
footer h4 { footer h4 {
@ -78,8 +60,9 @@ footer li {
} }
/* Support for mobile devices */ /* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) { @media screen and (min-width:0px) and (max-width:1000px) {
aside { section {
width: 100%!important; width: 100%!important;
height: 80vh!important ;
} }
svg { svg {
display: none; display: none;
@ -89,9 +72,10 @@ footer li {
} }
footer { footer {
float: left; float: left;
display: block!important;
width: 100%; width: 100%;
} }
footer div { footer div {
margin: 5rem 0 0 3rem!important; margin: 3rem 0 1rem 5rem!important;
} }
} }

4
index.html
Unescape View File

@ -20,9 +20,6 @@
<body> <body>
<!-- Google search -->
<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off">
<section> <section>
<!-- Clock --> <!-- Clock -->
<div id="timeBox"> <div id="timeBox">
@ -106,7 +103,6 @@
</footer> </footer>
<!-- Add shortcut Menu --> <!-- Add shortcut Menu -->
<div id="opacityMenu" onclick="closeMenu()" class="menu lowerIndex"></div>
<div id="addShortcutMenu" class="box menu hidden lowerIndex"> <div id="addShortcutMenu" class="box menu hidden lowerIndex">
<h1 id='menuTitle'>Maak je eigen shortcut</h1> <h1 id='menuTitle'>Maak je eigen shortcut</h1>
<h4>Bedenk een naam voor je shortcut</h4><br> <h4>Bedenk een naam voor je shortcut</h4><br>

22
resources/css/cssall.css
Unescape View File

@ -16,6 +16,28 @@ body {
min-height: 100%; min-height: 100%;
background-color: #19191C; background-color: #19191C;
} }
/* Search */
.searchBar {
background-color: #ededed;
border: #ededed 2px solid;
position: sticky;
z-index: 2;
top: 6rem;
left: calc(50% - 48%);
padding: 1rem;
width: 96%;
height: 3rem;
border-radius: 2rem;
outline: none;
transition: border .4s, opacity .3s, top .3s;
}
.searchBar:hover, .searchBar:focus {
border: #4c8a80 2px solid;
}
.searchMove {
opacity: 0;
top: 0px!important;
}
/* Scrollbar */ /* Scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
background-color: #1d1e1e; background-color: #1d1e1e;

53
resources/css/navbar.css
Unescape View File

@ -44,46 +44,17 @@
.navigation button:hover { .navigation button:hover {
color: gray!important; color: gray!important;
} }
.lowerIndex {
/* Switch */ z-index: -1!important;
.appearance {
position: absolute;
display: inline-block;
width: 60px;
height: 34px;
top: .7rem;
right: 1.5rem;
}
.appearance input {
opacity: 0;
width: 0;
height: 0;
}
.appearanceSlider {
position: absolute;
cursor: pointer;
border-radius: 34px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .3s;
}
.appearanceSlider:before {
position: absolute;
border-radius: 50%;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .3s;
} }
input:checked + .appearanceSlider { .opacityMenu {
background-color: #2E3747; width: 100vw;
} position: fixed;
input:checked + .appearanceSlider:before { left: 0px;
transform: translateX(25px); top: 0px;
height: 100vh;
opacity: .5;
background-color: black;
display: inline-block;
z-index: 1;
} }

19
resources/css/shortcuts.css
Unescape View File

@ -4,6 +4,11 @@
left: 1rem!important; left: 1rem!important;
margin-left: 0px!important; margin-left: 0px!important;
} }
section span button {
width: 5rem!important;
height: 8rem!important;
color: transparent!important;
}
} }
/* Shortcuts */ /* Shortcuts */
section span button { section span button {
@ -44,20 +49,6 @@ section span img {
.menu { .menu {
transition: opacity .5s; transition: opacity .5s;
} }
.lowerIndex {
z-index: -1!important;
}
#opacityMenu {
width: 100vw;
position: fixed;
left: 0px;
top: 0px;
height: 100vh;
opacity: .5;
background-color: black;
display: inline-block;
z-index: 1;
}
#addShortcutMenu { #addShortcutMenu {
display: inline-block; display: inline-block;
z-index: 2; z-index: 2;

44
resources/js/insertNavbar.js
Unescape View File

@ -10,11 +10,22 @@ navbarList.className = "navbarList"
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)
// Search // Search
d("googleSearchBar").addEventListener("keyup",searchGoogleEnter) var search = c("input")
function searchGoogleEnter(key) { search.className = "searchMove searchBar"
search.placeholder = "Vul een zoek opdracht of url in"
search.type = "text"
document.body.prepend(search)
g(".searchBar").addEventListener("keyup",searchEnter)
function searchEnter(key) {
if(key.key == "Enter") { if(key.key == "Enter") {
var search = d("googleSearchBar").value; var search = g(".searchBar").value;
var containsDot = search.indexOf("."); var containsDot = search.indexOf(".");
if (search !== "") { if (search !== "") {
if (containsDot > -1) { if (containsDot > -1) {
@ -31,7 +42,7 @@ function searchGoogleEnter(key) {
} }
function showSearch() { function showSearch() {
var open = !d("googleSearchBar").classList.contains("searchMove") var open = !g(".searchBar").classList.contains("searchMove")
if (open) { if (open) {
closeSearch(); closeSearch();
} }
@ -41,15 +52,15 @@ function showSearch() {
} }
function closeSearch() { function closeSearch() {
$("#opacityMenu").addClass("lowerIndex") $(".opacityMenu").addClass("lowerIndex")
d("googleSearchBar").blur() g(".searchBar").blur()
d("googleSearchBar").classList.add("searchMove") g(".searchBar").classList.add("searchMove")
} }
function openSearch(e) { function openSearch(e) {
$("#opacityMenu").removeClass("lowerIndex") $(".opacityMenu").removeClass("lowerIndex")
d("googleSearchBar").classList.remove("searchMove") g(".searchBar").classList.remove("searchMove")
d("googleSearchBar").focus() g(".searchBar").focus()
} }
// Create Navbar // Create Navbar
@ -95,17 +106,6 @@ Navbar.forEach(i=>{
dropdownList.appendChild(dropdownListItem); dropdownList.appendChild(dropdownListItem);
}) })
} }
$(navList).append(dropdownList) navList.appendChild(dropdownList)
navbarList.appendChild(navList); navbarList.appendChild(navList);
}) })
// Appearance changer
var appearanceSwitch = c("label")
appearanceSwitch.className = "appearance"
appearanceSwitch.title = "Dark/Light mode"
var appearanceInput = c("input")
appearanceInput.type = "checkbox"
var appearanceSpan = c("span")
appearanceSpan.className = "appearanceSlider"
$(appearanceSwitch).append(appearanceInput, appearanceSpan)
navigation.appendChild(appearanceSwitch)

12
resources/js/navbar.json.js
Unescape View File

@ -1,16 +1,16 @@
Navbar = [ Navbar = [
{
name: "Search",
desc: "Zoek iets op",
icon: "fas fa-search",
func: "showSearch()"
},
{ {
name: "Home", name: "Home",
desc: "Ga naar de homepagina", desc: "Ga naar de homepagina",
link: "/", link: "/",
icon: "fas fa-home" icon: "fas fa-home"
}, },
{
name: "Search",
desc: "Zoek iets op",
icon: "fas fa-search",
func: "showSearch()"
},
{ {
name: "Contact", name: "Contact",
desc: "Neem contact met mij op", desc: "Neem contact met mij op",