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

142
index.html
Unescape View File

@ -10,6 +10,7 @@
<title>Home</title> <title>Home</title>
<link rel="stylesheet" href="/resources/css/shortcuts.css"> <link rel="stylesheet" href="/resources/css/shortcuts.css">
<link rel="stylesheet" href="/css.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/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.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"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
@ -21,82 +22,75 @@
<!-- 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">
<!-- Welcome -->
<aside> <aside>
<div id="welcome"> <!-- Clock -->
<h1 id="timeWelcome">,</h1> <div id="timeBox">
</div> <h1 id="hours" class="time"></h1><h1 id="mins" class="time"></h1><h1 id="secs" class="time"></h1><br>
<h1 id="date"></h1>
</div> <br>
<!-- Clock --> <span>
<div id="timeBox"> <a href="https://www.youtube.com/" target="_blank"><button>
<h1 id="hours" class="time"></h1><h1 id="mins" class="time"></h1><h1 id="secs" class="time"></h1><br> <img src="/resources/img/youtube.png" alt=""><p>Youtube</p>
<h1 id="date"></h1> </button></a>
</div> <a href="https://pantarijn.magister.net" target="_blank"><button>
</aside> <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>
<!-- Shortcuts --> <span>
<div id="shortcutBox" class="box"> <button onclick="openMenu()" title="Voeg je eigen shortcut toe"><img src="/resources/img/cross.png"><p>Voeg toe</p></button>
<span id="shortcuts"> </span>
<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>
<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>
<!-- Footer --> </aside>
<footer>
<!-- Info --> <svg>
<div class="box"> <polygon points="0,5 0,2000 300,5"/>
<h1>Info</h1> </svg>
<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>
<!-- Feedback --> <!-- Footer -->
<div class="box"> <footer>
<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 --> <!-- Info -->
<div class="box"> <div>
<h1>Links:</h1> <h4>LINKS</h4>
<a href="https://www.instagram.com/gerda.6/"><button class="btn btn-info">Instagram</button></a> <ul>
<a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ"><button class="btn btn-danger">Youtube</button></a> <li><a href="https://samtaen.ml">Sam Taen</a></li>
<a href="https://www.sololearn.com/Profile/9075320"><button class="btn btn-success">Sololearn</button></a> <li><a href="">yeet</a></li>
<a href="https://twitter.com/GuusvanMeerveld"><button class="btn btn-primary">Twitter</button></a> </ul>
<a href="https://www.discord.gg/GJcEYqj"><button class="btn btn-secondary">Discord</button></a> </div>
</div> <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> </footer>
<!-- Add shortcut Menu --> <!-- Add shortcut Menu -->
<div id="opacityMenu" onclick="closeMenu()" class="menu lowerIndex"></div> <div id="opacityMenu" onclick="closeMenu()" class="menu lowerIndex"></div>
@ -110,12 +104,12 @@
<button class="cancelButton" onclick="closeMenu()" id="shortcutCancelButton">Cancel</button> <button class="cancelButton" onclick="closeMenu()" id="shortcutCancelButton">Cancel</button>
</div> </div>
<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>
<script src="/js.js"></script> <script src="/js.js"></script>
<script src="/resources/js/shortcuts.js"></script> <script src="/resources/js/shortcuts.js"></script>
<script src="/resources/js/javall.js"></script> <script src="/resources/js/javall.js"></script>
</body> </body>

21
js.js
Unescape View File

@ -49,27 +49,6 @@ function openSearch(e) {
d("googleSearchBar").focus() 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 // Clock
function showTime() { function showTime() {
var date = new Date() var date = new Date()

5
resources/css/navbar.css
Unescape View File

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

41
resources/css/shortcuts.css
Unescape View File

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

2
resources/js/insertNavbar.js
Unescape View File

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

4
resources/js/shortcuts.js
Unescape View File

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