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

3-11 #1

Browse Source
add-license-1
Guuq 5 years ago
parent 9ee9165d7b
commit bd5762fc17
6 changed files with 63 additions and 138 deletions
Show Stats Download Patch File Download Diff File

119
css.css
Unescape View File

@ -3,44 +3,10 @@
width: device-width; width: device-width;
zoom: 1.0; zoom: 1.0;
} }
/* Support for smaller screens */
@media screen and (min-width:0px) and (max-width:430px) {
.footerBox {
height: 16rem!important;
}
#feedbackBox {
margin-top: 18rem!important;
}
#feedbackTextarea {
height: 16vh!important;
}
#links {
margin-top: 36rem!important;
}
}
/* Support for normal mobile devices */ /* Support for normal mobile devices */
@media screen and (min-width:0px) and (max-width:960px) { @media screen and (min-width:0px) and (max-width:960px) {
#yearBox {
width: 96%!important;
margin-top: 16rem!important;
}
.footerBox {
display: block!important;
width: 96%!important;
left: 0px!important;
}
#feedbackBox {
margin-top: 15rem;
}
#links {
margin-top: 30rem;
}
#footer {
top: 71rem!important;
}
#timeBox { #timeBox {
display: block; width: 94%!important
width: 96%!important;
} }
} }
/* Main CSS */ /* Main CSS */
@ -54,24 +20,32 @@ header {
#googleSearchBar { #googleSearchBar {
background-color: #ededed; background-color: #ededed;
border: #ededed 2px solid; border: #ededed 2px solid;
position: sticky;
z-index: 2;
top: 6rem;
left: calc(50% - 48%);
padding: 1rem; padding: 1rem;
width: 96%; width: 96%;
margin-top: 5rem;
height: 3rem; height: 3rem;
border-radius: 2rem; border-radius: 2rem;
outline: none; outline: none;
transition: border .4s; transition: border .4s, opacity .3s, top .3s;
} }
#googleSearchBar:hover, #googleSearchBar:focus { #googleSearchBar:hover, #googleSearchBar:focus {
border: #4c8a80 2px solid; border: #4c8a80 2px solid;
} }
.searchMove {
opacity: 0;
top: 0px!important;
}
/* Clock */ /* Clock */
#timeBox { #timeBox {
margin-top: 3rem; margin-top: 3rem;
position: absolute; display: inline-block;
left: 2%; margin-left: 1rem;
float: left;
padding: 1rem; padding: 1rem;
width: 33%; width: 36%;
} }
.time { .time {
display: inline-block; display: inline-block;
@ -80,77 +54,33 @@ header {
#date { #date {
font-size: 150%; font-size: 150%;
} }
/* How much of the year is left */
#yearBox {
left: 2%;
position: absolute;
display: inline-block;
width: 33%;
margin-top: 17rem;
padding: 2rem;
}
#yearProgress {
border-radius: 1rem;
width: 98%;
height: 1.5rem;
}
#yearProgress::-webkit-progress-bar {
background-color: #363840;
border-radius: .2rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
#yearProgress::-webkit-progress-value {
border-radius: .2rem;
transition: width .5;
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
}
#yearProgress::-webkit-progress-value::before {
content: '80%';
position: absolute;
right: 0;
top: -125%;
}
#yearLeft {
font-size: 1.5rem;
}
/* Footer */ /* Footer */
#footer { #footer {
position: absolute; margin-left: calc(50% - 45rem);
left: 2%; margin-top: 2rem;
top: 64rem; height: 12rem;
height: 20%;
display: inline-block; display: inline-block;
width: 100%;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.footerBox::-webkit-scrollbar { .footerBox::-webkit-scrollbar {
display: none; display: none;
} }
.footerBox { .footerBox {
top: 0px; height: 13rem;
height: 100%;
display: inline-block; display: inline-block;
position: absolute; float: left;
padding: 1rem;
margin-left: 2rem;
overflow: scroll; overflow: scroll;
overflow-x: hidden; overflow-x: hidden;
} }
/* Info blocks */ /* Info blocks */
#info { #info {
padding: 1rem; width: 27rem;
width: 33%;
} }
#feedbackBox { #feedbackBox {
padding: 1rem;
left: 35%;
font-size: 1rem; font-size: 1rem;
width: 28%; width: 27rem;
} }
#feedbackTextarea { #feedbackTextarea {
width: 98%; width: 98%;
@ -162,8 +92,7 @@ header {
margin-top: 4px; margin-top: 4px;
} }
#links { #links {
left: 65%; width: 27rem;
width: 30%;
padding: 1rem; padding: 1rem;
font-size: 130%; font-size: 130%;
} }

10
index.html
Unescape View File

@ -19,9 +19,7 @@
<body> <body>
<!-- Google search --> <!-- Google search -->
<div align="center"> <input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off">
<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" autofocus spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off">
</div>
<!-- Clock --> <!-- Clock -->
<div id="timeBox" class="box"> <div id="timeBox" class="box">
@ -29,12 +27,6 @@
<h1 id="date"></h1> <h1 id="date"></h1>
</div> </div>
<!-- How much of the year is left -->
<div id="yearBox" class="box">
<p id="yearLeft"></p>
<progress max="360" id="yearProgress"></progress>
</div>
<!-- Shortcuts --> <!-- Shortcuts -->
<div id="shortcutBox" class="box"> <div id="shortcutBox" class="box">
<span id="shortcuts"> <span id="shortcuts">

40
js.js
Unescape View File

@ -1,10 +1,12 @@
var d = document.getElementById.bind(document); var d = document.getElementById.bind(document);
var c = document.createElement.bind(document); var c = document.createElement.bind(document);
var q = document.querySelector.bind(document);
// Google Search // Google Search
addEventListener("keyup",showSearch)
d("googleSearchBar").addEventListener("keyup",searchGoogleEnter) d("googleSearchBar").addEventListener("keyup",searchGoogleEnter)
function searchGoogleEnter(key) { function searchGoogleEnter(key) {
if(key.keyCode == "13") { if(key.key == "Enter") {
var search = d("googleSearchBar").value; var search = d("googleSearchBar").value;
var containsDot = search.indexOf("."); var containsDot = search.indexOf(".");
if (search !== "") { if (search !== "") {
@ -16,31 +18,33 @@ function searchGoogleEnter(key) {
} }
} }
} }
if (key.key == "Escape") {
closeSearch()
}
} }
// Year left function closeSearch() {
function calculateTime() { $("#opacityMenu").addClass("hidden lowerIndex")
var date = new Date() d("googleSearchBar").blur()
var monthsLeft = 11 - date.getMonth() d("googleSearchBar").classList.add("searchMove")
var daysLeft = 31 - date.getDate() }
if (monthsLeft == 1) {
var months = " maand en " function showSearch(e) {
} if (e.target !== document.body || !d("addShortcutMenu").classList.contains("hidden")) {
else { return
var months = " maanden en "
} }
if (daysLeft == 1) { var open = !d("googleSearchBar").classList.contains("searchMove")
var days = " dag" if (open && !d("googleSearchBar").value || e.key == "Escape" ) {
closeSearch()
} }
else { else {
var days = " dagen" $("#opacityMenu").removeClass("hidden lowerIndex")
d("googleSearchBar").classList.remove("searchMove")
d("googleSearchBar").focus()
d("googleSearchBar").value = e.key
} }
d("yearLeft").innerHTML = "Het jaar duurt nog " + monthsLeft + months + daysLeft + days
d("yearProgress").value = date.getMonth() * 30 + date.getDate()
} }
calculateTime();
// Clock // Clock
function showTime() { function showTime() {
var date = new Date() var date = new Date()

18
resources/css/shortcuts.css
Unescape View File

@ -5,22 +5,20 @@
margin-left: 0px!important; margin-left: 0px!important;
} }
#shortcutBox { #shortcutBox {
width: 96%!important; width: 90%!important;
display: block!important; display: block!important;
margin-top: 29rem!important; height: 20rem!important;
left: 2%;
padding: .8rem!important;
height: 32rem!important;
} }
} }
/* Shortcuts */ /* Shortcuts */
#shortcutBox { #shortcutBox {
margin-top: 3rem; margin-top: 3rem;
width: 60%; width: 60%;
right: 3%; margin-left: 2rem;
float: left;
padding: 1rem; padding: 1rem;
position: absolute; display: inline-block;
height: 50rem; height: 57rem;
overflow: scroll; overflow: scroll;
overflow-x: hidden; overflow-x: hidden;
} }
@ -68,6 +66,7 @@
#opacityMenu { #opacityMenu {
width: 100vw; width: 100vw;
position: fixed; position: fixed;
left: 0px;
top: 0px; top: 0px;
height: 100vh; height: 100vh;
opacity: .7; opacity: .7;
@ -79,8 +78,7 @@
display: inline-block; display: inline-block;
z-index: 2; z-index: 2;
position: absolute; position: absolute;
left: 50%; left: calc(50% - 25rem);
margin-left: -25rem;
height: 27rem; height: 27rem;
width: 50rem; width: 50rem;
top: 15%; top: 15%;

4
resources/js/insertNavbar.js
Unescape View File

@ -5,10 +5,10 @@ var g = document.querySelector.bind(document);
// Insert nav tag // Insert nav tag
var navigation = c("nav") var navigation = c("nav")
navigation.className = "navigation" navigation.className = "navigation"
var navbarList = c("navbarList") var navbarList = c("ul")
navbarList.className = "navbarList" navbarList.className = "navbarList"
navigation.appendChild(navbarList) navigation.appendChild(navbarList)
$("body").append(navigation) document.body.appendChild(navigation)
// Create Navbar // Create Navbar
Navbar.forEach(i=>{ Navbar.forEach(i=>{

2
resources/js/shortcuts.js
Unescape View File

@ -6,10 +6,12 @@ function openMenu() {
d("shortcutName").setAttribute('placeholder', 'Example Website') d("shortcutName").setAttribute('placeholder', 'Example Website')
} }
function closeMenu() { function closeMenu() {
if (!d("addShortcutMenu").classList.contains("hidden")) {
setTimeout(function () { setTimeout(function () {
$(".menu").addClass("lowerIndex"); $(".menu").addClass("lowerIndex");
}, 500) }, 500)
$(".menu").addClass("hidden"); $(".menu").addClass("hidden");
}
} }
var ls = localStorage var ls = localStorage