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

13-11 #2

Browse Source
add-license-1
Guuq 5 years ago
parent 8f3d1933dc 3274b3f23a
commit bfc8615531
7 changed files with 118 additions and 158 deletions
Show Stats Download Patch File Download Diff File

61
css.css
Unescape View File

@ -1,10 +1,17 @@
/* Main CSS */
aside {
float: left;
height: 95vh;
display: inline-block;
width: 36%;
width: 50%;
background-color: #454752;
}
svg {
fill: #454752;
stroke-width: 1;
stroke: #454752;
height: 95vh;
}
/* Google search */
#googleSearchBar {
background-color: #ededed;
@ -27,57 +34,53 @@ aside {
opacity: 0;
top: 0px!important;
}
/* Welcome */
#welcome {
padding: 1rem;
margin-left: 1rem;
}
/* Clock */
#timeBox {
margin: 2rem 0 0 1rem;
margin-left: 1rem;
padding: 1rem;
font-family: 'Open Sans', sans-serif;
}
.time {
display: inline-block;
font-size: 5rem;
font-size: 8rem;
}
#date {
font-size: 150%;
font-size: 2rem;
}
/* Footer */
footer {
margin-top: 1rem;
float: left;
background-color: black;
display: flex!important;
}
footer div::-webkit-scrollbar {
display: none;
height: 35vh;
font-family: 'Open Sans', sans-serif;
}
footer div {
padding: 1rem;
margin: 1rem;
overflow: scroll;
overflow-x: hidden;
margin: 5rem 0 0 8rem;
display: inline-block;
}
/* Info blocks */
footer div:nth-of-type(2) textarea {
width: 98%;
margin-top: 8px;
height: 6rem;
footer h4 {
color: gray;
}
footer div:nth-of-type(2) button {
width: 98%;
margin-top: 4px;
footer ul {
list-style-type: none;
margin-top: 20px;
padding: 0;
}
footer a {
transition: color .5s;
}
footer li {
margin-top: 1rem;
}
footer div:nth-of-type(3) a button {
margin-bottom: 5px;
footer a:hover {
color: gray!important;
}
/* Mobile support */
@viewport {
width: device-width;
zoom: 1.0;
}
/* Support for normal mobile devices */
/* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) {
aside {
width: 96%!important;

114
index.html
Unescape View File

@ -10,6 +10,7 @@
<title>Home</title>
<link rel="stylesheet" href="/resources/css/shortcuts.css">
<link rel="stylesheet" href="/css.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
@ -21,79 +22,72 @@
<!-- Google search -->
<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off">
<!-- Welcome -->
<aside>
<div id="welcome">
<h1 id="timeWelcome">,</h1>
</div>
<!-- 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>
</div>
</aside>
</div> <br>
<!-- Shortcuts -->
<div id="shortcutBox" class="box">
<span id="shortcuts">
<a href="https://www.youtube.com/" target="_blank"><div>
<img class="shortcutImg" src="/resources/img/youtube.png" alt=""><p class="shortcutText">Youtube</p>
</div></a>
<a href="https://pantarijn.magister.net" target="_blank"><div>
<img class="shortcutImg" src="/resources/img/magister.png" alt=""><p class="shortcutText">Magister</p>
</div></a>
<a href="https://onedrive.live.com/about/en-us/signin/" target="_blank"><div>
<img src="/resources/img/onedrive.png" class="shortcutImg" alt=""><p class="shortcutText">Onedrive</p>
</div></a>
<a href="https://codepanta.nl/login/index.php" target="_blank"><div>
<img src="/resources/img/codepanta.png" class="shortcutImg" alt=""><p class="shortcutText">Codepanta</p>
</div></a>
<a href="https://reddit.com" target="_blank"><div>
<img src="/resources/img/reddit.png" class="shortcutImg" alt=""><p class="shortcutText">Reddit</p>
</div></a>
<a href="https://open.spotify.com/browse/featured" target="_blank"><div>
<img src="/resources/img/spotify.png" class="shortcutImg" alt=""><p class="shortcutText">Spotify</p>
</div></a>
<a href="https://w3schools.com" target="_blank"><div>
<img src="/resources/img/w3schools.png" class="shortcutImg" alt=""><p class="shortcutText">W3Schools</p>
</div></a>
<a href="https://maps.google.com" target="_blank"><div>
<img src="/resources/img/googlemaps.png" class="shortcutImg" alt=""><p class="shortcutText">Maps</p>
</div></a>
<a href="https://translate.google.com" target="_blank"><div>
<img src="/resources/img/googletranslate.png" class="shortcutImg" alt=""><p class="shortcutText">Translate</p>
</div></a>
<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>
<span>
<button onclick="openMenu()" title="Voeg je eigen shortcut toe"><img src="/resources/img/cross.png"><p>Voeg toe</p></button>
</span>
<div class="shortcutImgBox" onclick="openMenu()" title="Voeg je eigen shortcut toe"><img src="/resources/img/cross.png" class="shortcutImg"><p class="shortcutText">Voeg toe</p></div>
</div>
</aside>
<svg>
<polygon points="0,5 0,2000 300,5"/>
</svg>
<!-- Footer -->
<footer>
<!-- Info -->
<div class="box">
<h1>Info</h1>
<p>Ik ben bezig met het maken van deze website voor een schoolproject. Het doel van deze website is om een handige overzichtelijke pagina te hebben waar je van alles kan vinden.</p>
<div>
<h4>LINKS</h4>
<ul>
<li><a href="https://samtaen.ml">Sam Taen</a></li>
<li><a href="">yeet</a></li>
</ul>
</div>
<!-- Feedback -->
<div class="box">
<b>Hier kunt u feedback voor deze pagina invullen</b> <br>
<form action="/" method="get">
<textarea placeholder="Vul hier uw feedback in." rows="10" class="input" name="feedback"></textarea> <br>
<button type="submit" class="button" title="Stuur uw feedback op">Verstuur</button>
</form>
</div>
<!-- Links -->
<div class="box">
<h1>Links:</h1>
<a href="https://www.instagram.com/gerda.6/"><button class="btn btn-info">Instagram</button></a>
<a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ"><button class="btn btn-danger">Youtube</button></a>
<a href="https://www.sololearn.com/Profile/9075320"><button class="btn btn-success">Sololearn</button></a>
<a href="https://twitter.com/GuusvanMeerveld"><button class="btn btn-primary">Twitter</button></a>
<a href="https://www.discord.gg/GJcEYqj"><button class="btn btn-secondary">Discord</button></a>
<div>
<h4>SOCIAL</h4>
<ul>
<li><a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ?view_as=subscriber">Youtube</a></li>
<li><a href="https://www.sololearn.com/Profile/9075320">Sololearn</a></li>
<li><a href="https://twitter.com/GuusvanMeerveld">Twitter</a></li>
<li><a href="https://www.reddit.com/user/Marho_">Reddit</a></li>
</ul>
</div>
</footer>

21
js.js
Unescape View File

@ -49,27 +49,6 @@ function openSearch(e) {
d("googleSearchBar").focus()
}
// Welcome
function setWelcome() {
var html = d("timeWelcome").innerHTML
var date = new Date()
if (date.getHours() < 6) {
var welcome = "Goedenacht"
}
else if (date.getHours() > 18) {
var welcome = "Goedeavond"
}
else if (date.getHours() > 12) {
var welcome = "Goedemiddag"
}
else if (date.getHours() > 6) {
var welcome = "Goedemorgen"
}
html = welcome + html
}
setWelcome();
// Clock
function showTime() {
var date = new Date()

5
resources/css/navbar.css
Unescape View File

@ -33,17 +33,16 @@
background-color: #101012;
margin: 0;
padding: 0;
transition: opacity .5s;
list-style: none;
}
.dropdownButton {
width: 100%;
}
.navList:hover .dropdownList {
opacity: 1!important;
display: block!important;
}
.navigation button:hover {
color: #9c9c9c!important;
color: #4c8a80!important;
}
/* Switch */

41
resources/css/shortcuts.css
Unescape View File

@ -4,35 +4,13 @@
left: 1rem!important;
margin-left: 0px!important;
}
#shortcutBox {
width: 94%!important;
display: block!important;
height: 20rem!important;
margin: 2rem 0 0 1rem!important;
}
}
/* Shortcuts */
#shortcutBox {
margin: 3rem 0 0 2rem;
width: 59%;
float: left;
padding: 1rem;
display: inline-block;
height: 57rem;
overflow: scroll;
overflow-x: hidden;
}
#shortcutBox::-webkit-scrollbar {
display: none;
}
.shortcutImg {
width: 3rem;
height: 3rem;
}
#shortcutBox div {
aside span button {
margin: 0 0 1rem 1rem;
width: 12rem;
padding: 1rem;
color: white;
background-color: #363840;
border: #363840 2px solid;
border-radius: .5rem;
@ -40,14 +18,21 @@
cursor: pointer;
transition: background-color .5s, border .5s;
}
#shortcutBox div:hover {
aside span button:hover {
background-color: #3d3e47;
border-color: #3d3e47;
}
#shortcutBox div:hover .removeShortcut {
aside span button:hover .removeShortcut {
display: inline;
}
.shortcutText {
aside span button:focus {
outline: none;
}
aside span img {
width: 3rem;
height: 3rem;
}
aside span p {
display: inline-block;
margin-left: 1rem;
margin-bottom: 0!important;
@ -69,7 +54,7 @@
left: 0px;
top: 0px;
height: 100vh;
opacity: .7;
opacity: .5;
background-color: black;
display: inline-block;
z-index: 1;

2
resources/js/insertNavbar.js
Unescape View File

@ -29,7 +29,7 @@ Navbar.forEach(i=>{
navList.appendChild(navButton)
var dropdownList = c("ul")
dropdownList.className = "dropdownList"
dropdownList.style = "opacity: 0;"
dropdownList.style = "display: none;"
if (typeof i.dropdown == "object") {
i.dropdown.forEach(d=>{
var dropdownListItem = c("li");

4
resources/js/shortcuts.js
Unescape View File

@ -1,7 +1,7 @@
// Toggle Menu
function openMenu() {
$(".menu").removeClass("lowerIndex");
$(".menu").removeClass("hidden");
$("#addShortcutMenu").removeClass("hidden");
d("shortcutLink").setAttribute('placeholder', 'https://example.com')
d("shortcutName").setAttribute('placeholder', 'Example Website')
}
@ -10,7 +10,7 @@ function closeMenu() {
setTimeout(function () {
$(".menu").addClass("lowerIndex");
}, 500)
$(".menu").addClass("hidden");
$("#addShortcutMenu").addClass("hidden");
}
}