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 */ /* Main CSS */
aside { section {
float: left; float: left;
height: 95vh; height: 95vh;
display: inline-block; display: inline-block;
@ -43,9 +43,11 @@ svg {
.time { .time {
display: inline-block; display: inline-block;
font-size: 8rem; font-size: 8rem;
margin: 0;
} }
#date { #date {
font-size: 2rem; font-size: 2rem;
margin: 0;
} }
/* Footer */ /* Footer */
footer { footer {
@ -83,14 +85,19 @@ footer a:hover {
/* 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 { aside {
width: 96%!important; width: 100%!important;
}
svg {
display: none;
}
.time {
font-size: 5rem!important;
} }
footer { footer {
width: 98%!important; float: left;
display: block!important; width: 100%;
margin: 0!important;
} }
footer div { footer div {
margin-top: 2rem!important; margin: 5rem 0 0 3rem!important;
} }
} }

85
index.html
Unescape View File

@ -22,49 +22,52 @@
<!-- Google search --> <!-- Google search -->
<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" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off">
<aside> <section>
<!-- Clock --> <!-- Clock -->
<div id="timeBox"> <div id="timeBox">
<h1 id="hours" class="time"></h1><h1 id="mins" class="time"></h1><h1 id="secs" class="time"></h1><br> <p id="hours" class="time">uren</p><p id="mins" class="time">:minuten</p><br>
<h1 id="date"></h1> <p id="date">datum</p>
</div> <br> </div> <br>
<span> <span id="shortcuts">
<a href="https://www.youtube.com/" target="_blank"><button> <button><a href="https://www.youtube.com/" target="_blank">
<img src="/resources/img/youtube.png" alt=""><p>Youtube</p> <img src="/resources/img/youtube.png" alt="">Youtube
</button></a> </a></button>
<a href="https://pantarijn.magister.net" target="_blank"><button> <button><a href="https://pantarijn.magister.net" target="_blank">
<img src="/resources/img/magister.png" alt=""><p>Magister</p> <img src="/resources/img/magister.png" alt="">Magister
</button></a> </a></button>
<a href="https://onedrive.live.com/about/en-us/signin/" target="_blank"><button> <button><a href="https://onedrive.live.com/about/en-us/signin/" target="_blank">
<img src="/resources/img/onedrive.png" alt=""><p>Onedrive</p> <img src="/resources/img/onedrive.png" alt="">Onedrive
</button></a> </a></button>
<a href="https://codepanta.nl/login/index.php" target="_blank"><button> <button><a href="https://codepanta.nl/login/index.php" target="_blank">
<img src="/resources/img/codepanta.png" alt=""><p>Codepanta</p> <img src="/resources/img/codepanta.png" alt="">Codepanta
</button></a> </a></button>
<a href="https://reddit.com" target="_blank"><button> <button><a href="https://reddit.com" target="_blank">
<img src="/resources/img/reddit.png" alt=""><p>Reddit</p> <img src="/resources/img/reddit.png" alt="">Reddit
</button></a> </a></button>
<a href="https://open.spotify.com/browse/featured" target="_blank"><button> <button><a href="https://open.spotify.com/browse/featured" target="_blank">
<img src="/resources/img/spotify.png" alt=""><p>Spotify</p> <img src="/resources/img/spotify.png" alt="">Spotify
</button></a> </a></button>
<a href="https://w3schools.com" target="_blank"><button> <button><a href="https://w3schools.com" target="_blank">
<img src="/resources/img/w3schools.png" alt=""><p>W3Schools</p> <img src="/resources/img/w3schools.png" alt="">W3Schools
</button></a> </a></button>
<a href="https://maps.google.com" target="_blank"><button> <button><a href="https://maps.google.com" target="_blank">
<img src="/resources/img/googlemaps.png" alt=""><p>Maps</p> <img src="/resources/img/googlemaps.png" alt="">Maps
</button></a> </a></button>
<a href="https://translate.google.com" target="_blank"><button> <button><a href="https://translate.google.com" target="_blank">
<img src="/resources/img/googletranslate.png" alt=""><p>Translate</p> <img src="/resources/img/googletranslate.png" alt="">Translate
</button></a> </a></button>
</span> </span>
<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> </span>
</aside> </section>
<!-- Triangle -->
<svg> <svg>
<polygon points="0,5 0,2000 300,5"/> <polygon points="0,5 0,2000 300,5"/>
</svg> </svg>
@ -77,7 +80,8 @@
<h4>LINKS</h4> <h4>LINKS</h4>
<ul> <ul>
<li><a href="https://samtaen.ml">Sam Taen</a></li> <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> </ul>
</div> </div>
<div> <div>
@ -89,6 +93,14 @@
<li><a href="https://www.reddit.com/user/Marho_">Reddit</a></li> <li><a href="https://www.reddit.com/user/Marho_">Reddit</a></li>
</ul> </ul>
</div> </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> </footer>
@ -97,13 +109,14 @@
<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>
<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> <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='button' onclick="createShortcut()" id='shortcutCreateButton'>Voeg toe</button>
<button class="cancelButton" onclick="closeMenu()" id="shortcutCancelButton">Cancel</button> <button class="cancelButton" onclick="closeMenu()" id="shortcutCancelButton">Cancel</button>
</div> </div>
<!-- Javascript -->
<script src="/resources/js/navbar.json.js"></script> <script src="/resources/js/navbar.json.js"></script>
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<script src="/resources/js/insertNavbar.js"></script> <script src="/resources/js/insertNavbar.js"></script>

2
js.js
Unescape View File

@ -33,7 +33,7 @@ function showSearch(e) {
} }
else { else {
openSearch(); 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; display: block!important;
} }
.navigation button:hover { .navigation button:hover {
color: #4c8a80!important; color: gray!important;
} }
/* Switch */ /* Switch */

16
resources/css/shortcuts.css
Unescape View File

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

20
resources/js/shortcuts.js
Unescape View File

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