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

13-11 #3

Browse Source
add-license-1
Guuq 5 years ago
parent bfc8615531
commit 5a44351c4d
6 changed files with 81 additions and 63 deletions
Show Stats Download Patch File Download Diff File

19
css.css
Unescape View File

@ -1,5 +1,5 @@
/* Main CSS */
aside {
section {
float: left;
height: 95vh;
display: inline-block;
@ -43,9 +43,11 @@ svg {
.time {
display: inline-block;
font-size: 8rem;
margin: 0;
}
#date {
font-size: 2rem;
margin: 0;
}
/* Footer */
footer {
@ -83,14 +85,19 @@ footer a:hover {
/* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) {
aside {
width: 96%!important;
width: 100%!important;
}
svg {
display: none;
}
.time {
font-size: 5rem!important;
}
footer {
width: 98%!important;
display: block!important;
margin: 0!important;
float: left;
width: 100%;
}
footer div {
margin-top: 2rem!important;
margin: 5rem 0 0 3rem!important;
}
}

85
index.html
Unescape View File

@ -22,49 +22,52 @@
<!-- Google search -->
<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off">
<aside>
<section>
<!-- Clock -->
<div id="timeBox">
<h1 id="hours" class="time"></h1><h1 id="mins" class="time"></h1><h1 id="secs" class="time"></h1><br>
<h1 id="date"></h1>
<p id="hours" class="time">uren</p><p id="mins" class="time">:minuten</p><br>
<p id="date">datum</p>
</div> <br>
<span>
<a href="https://www.youtube.com/" target="_blank"><button>
<img src="/resources/img/youtube.png" alt=""><p>Youtube</p>
</button></a>
<a href="https://pantarijn.magister.net" target="_blank"><button>
<img src="/resources/img/magister.png" alt=""><p>Magister</p>
</button></a>
<a href="https://onedrive.live.com/about/en-us/signin/" target="_blank"><button>
<img src="/resources/img/onedrive.png" alt=""><p>Onedrive</p>
</button></a>
<a href="https://codepanta.nl/login/index.php" target="_blank"><button>
<img src="/resources/img/codepanta.png" alt=""><p>Codepanta</p>
</button></a>
<a href="https://reddit.com" target="_blank"><button>
<img src="/resources/img/reddit.png" alt=""><p>Reddit</p>
</button></a>
<a href="https://open.spotify.com/browse/featured" target="_blank"><button>
<img src="/resources/img/spotify.png" alt=""><p>Spotify</p>
</button></a>
<a href="https://w3schools.com" target="_blank"><button>
<img src="/resources/img/w3schools.png" alt=""><p>W3Schools</p>
</button></a>
<a href="https://maps.google.com" target="_blank"><button>
<img src="/resources/img/googlemaps.png" alt=""><p>Maps</p>
</button></a>
<a href="https://translate.google.com" target="_blank"><button>
<img src="/resources/img/googletranslate.png" alt=""><p>Translate</p>
</button></a>
<span id="shortcuts">
<button><a href="https://www.youtube.com/" target="_blank">
<img src="/resources/img/youtube.png" alt="">Youtube
</a></button>
<button><a href="https://pantarijn.magister.net" target="_blank">
<img src="/resources/img/magister.png" alt="">Magister
</a></button>
<button><a href="https://onedrive.live.com/about/en-us/signin/" target="_blank">
<img src="/resources/img/onedrive.png" alt="">Onedrive
</a></button>
<button><a href="https://codepanta.nl/login/index.php" target="_blank">
<img src="/resources/img/codepanta.png" alt="">Codepanta
</a></button>
<button><a href="https://reddit.com" target="_blank">
<img src="/resources/img/reddit.png" alt="">Reddit
</a></button>
<button><a href="https://open.spotify.com/browse/featured" target="_blank">
<img src="/resources/img/spotify.png" alt="">Spotify
</a></button>
<button><a href="https://w3schools.com" target="_blank">
<img src="/resources/img/w3schools.png" alt="">W3Schools
</a></button>
<button><a href="https://maps.google.com" target="_blank">
<img src="/resources/img/googlemaps.png" alt="">Maps
</a></button>
<button><a href="https://translate.google.com" target="_blank">
<img src="/resources/img/googletranslate.png" alt="">Translate
</a></button>
</span>
<span>
<button onclick="openMenu()" title="Voeg je eigen shortcut toe"><img src="/resources/img/cross.png"><p>Voeg toe</p></button>
<button onclick="openMenu()" title="Voeg je eigen shortcut toe">
<img src="/resources/img/cross.png">Voeg toe
</button>
</span>
</aside>
</section>
<!-- Triangle -->
<svg>
<polygon points="0,5 0,2000 300,5"/>
</svg>
@ -77,7 +80,8 @@
<h4>LINKS</h4>
<ul>
<li><a href="https://samtaen.ml">Sam Taen</a></li>
<li><a href="">yeet</a></li>
<li><a href="http://jonathanbos.nl">Jonathan Bos</a></li>
<li><a href=""></a></li>
</ul>
</div>
<div>
@ -89,6 +93,14 @@
<li><a href="https://www.reddit.com/user/Marho_">Reddit</a></li>
</ul>
</div>
<div>
<h4>TOOLS</h4>
<ul>
<li><a href="https://w3schools.com">W3schools</a></li>
<li><a href="https://quizlet.com">Quizlet</a></li>
<li><a href="https://tweakers.net">Tweakers</a></li>
</ul>
</div>
</footer>
@ -97,13 +109,14 @@
<div id="addShortcutMenu" class="box menu hidden lowerIndex">
<h1 id='menuTitle'>Maak je eigen shortcut</h1>
<h4>Bedenk een naam voor je shortcut</h4><br>
<input type='text' class='input' id='shortcutName'><br>
<input type='text' class='input inputMenu' id='shortcutName'><br>
<h4>Geef de link van je shortcut</h4><br>
<input type='text' class='input' id='shortcutLink'>
<input type='text' class='input inputMenu' id='shortcutLink'>
<button class='button' onclick="createShortcut()" id='shortcutCreateButton'>Voeg toe</button>
<button class="cancelButton" onclick="closeMenu()" id="shortcutCancelButton">Cancel</button>
</div>
<!-- Javascript -->
<script src="/resources/js/navbar.json.js"></script>
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<script src="/resources/js/insertNavbar.js"></script>

2
js.js
Unescape View File

@ -33,7 +33,7 @@ function showSearch(e) {
}
else {
openSearch();
d("googleSearchBar").value = e.key + d("googleSearchBar").value
d("googleSearchBar").value = d("googleSearchBar").value + e.key
}
}

2
resources/css/navbar.css
Unescape View File

@ -42,7 +42,7 @@
display: block!important;
}
.navigation button:hover {
color: #4c8a80!important;
color: gray!important;
}
/* Switch */

16
resources/css/shortcuts.css
Unescape View File

@ -6,7 +6,7 @@
}
}
/* Shortcuts */
aside span button {
section span button {
margin: 0 0 1rem 1rem;
width: 12rem;
padding: 1rem;
@ -18,25 +18,21 @@ aside span button {
cursor: pointer;
transition: background-color .5s, border .5s;
}
aside span button:hover {
section span button:hover {
background-color: #3d3e47;
border-color: #3d3e47;
}
aside span button:hover .removeShortcut {
section span button:hover .removeShortcut {
display: inline;
}
aside span button:focus {
section span button:focus {
outline: none;
}
aside span img {
section span img {
width: 3rem;
margin-right: 1rem;
height: 3rem;
}
aside span p {
display: inline-block;
margin-left: 1rem;
margin-bottom: 0!important;
}
/* Shortcut creation menu */
.hidden {

20
resources/js/shortcuts.js
Unescape View File

@ -44,15 +44,17 @@ function createShortcut(shortcutObj) {
}
var obj = JSON.stringify(data)
ls.setItem("shortcuts", obj)
var shortcut = $("<a>",{href:shortcutLink,target:'_blank'});
var shortcutDiv = $('<div>',{class:"shortcutImgBox"});
var shortcutImage = $("<img>",{src:'/resources/img/shortcut.png',class:'shortcutImg',alt:""});
var shortcutText = c("p")
shortcutText.innerHTML = shortcutName // Can't use jquery (I think)
shortcutText.className = "shortcutText"
$("#shortcuts").append(shortcut);
$(shortcut).append(shortcutDiv);
$(shortcutDiv).append(shortcutImage, shortcutText);
var shortcut = c("a")
shortcut.href = shortcutLink
shortcut.alt = " "
shortcut.target = "_blank"
shortcut.innerHTML = shortcutName
var shortcutButton = c("button")
var shortcutImage = c("img")
shortcutImage.src = "/resources/img/shortcut.png"
$("#shortcuts").append(shortcutButton);
$(shortcutButton).append(shortcut);
$(shortcut).prepend(shortcutImage);
$(".inputMenu").val('')
closeMenu();
}