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

23-11 #1

Browse Source
add-license-1 v0.1-alpha
Guuq 5 years ago
parent 2afe5da2dc
commit 320082354c
10 changed files with 130 additions and 42 deletions
Show Stats Download Patch File Download Diff File

79
css.css
Unescape View File

@ -3,7 +3,7 @@ section {
float: left; float: left;
display: inline-block; display: inline-block;
width: 50%; width: 50%;
margin-top: 3.2rem; margin-top: 55px;
height: 95vh; height: 95vh;
overflow: scroll; overflow: scroll;
overflow-x: hidden; overflow-x: hidden;
@ -12,11 +12,11 @@ section::-webkit-scrollbar {
display: none; display: none;
} }
svg { svg {
margin-top: 3.2rem; margin-top: 49px;
fill: #454752; fill: #454752;
stroke-width: 1; stroke-width: 1;
stroke: #454752; stroke: #454752;
height: 95vh; height: 95.6vh;
} }
/* Clock */ /* Clock */
#timeBox { #timeBox {
@ -24,20 +24,55 @@ svg {
padding: 1rem; padding: 1rem;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
section div p { .time {
display: inline-block; display: inline-block;
font-size: 8rem; font-size: 7rem;
margin: 0; margin: 0;
} }
#date { #date {
font-size: 2rem; font-size: 2rem;
margin: 0; margin: 0;
} }
/* Feedback */
#feedbackContent {
background-color: #33353d;
width: 100%;
}
.feedback {
display: inline-block;
padding: 14vh 0 14vh 5%;
width: 50%;
height: 100%;
}
#feedbackOne {
border-right: #454752 4px solid;
}
.user {
display: inline-block;
height: 100%;
width: 10rem;
}
.userImg {
width: 8rem;
height: 8rem;
margin-bottom: 2rem;
}
.userFeedback {
font-family: 'Open Sans';
display: inline-block;
vertical-align: top;
margin-left: 2rem;
padding-left: 1rem;
border-left: #ededed 2px solid;
width: 30rem;
word-wrap: break-word;
}
/* Footer */ /* Footer */
footer { footer {
background-color: black; background-color: black;
width: 100%;
position: relative;
display: flex!important; display: flex!important;
height: 20rem;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
footer div { footer div {
@ -55,39 +90,55 @@ footer ul {
footer li { footer li {
margin-top: 1rem; margin-top: 1rem;
} }
footer p { #copyright {
font-size: 13px; font-size: 15px;
position: absolute; position: absolute;
margin: 0; display: inline-block;
bottom: -20rem; margin: auto;
bottom: 1rem;
right: 1rem; right: 1rem;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline;
} }
/* Mobile support */ /* Mobile support */
@viewport { @viewport {
width: device-width; width: device-width;
zoom: 1.0; zoom: 1.0;
} }
@media screen and (min-width:0px) and (max-width:1525px) {
.feedback {
display: block!important;
width: 100%!important;
padding: 5vh 0 5vh;
border-right: 0!important;
}
.user {
margin-left: calc(50% - 20rem);
}
#feedbackOne {
border-bottom: #454752 4px solid;
}
}
/* 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) {
section { section {
width: 100%!important; width: 100%!important;
height: 80vh!important ;
} }
svg { svg {
display: none; display: none;
} }
.time { .time {
font-size: 6rem!important; font-size: 4rem!important;
} }
footer { footer {
float: left; float: left;
width: 100%; width: 100%;
display: block!important;
} }
footer div { footer div {
margin: 3rem 0 1rem 4rem!important; margin: 3rem 0 1rem 4rem!important;
} }
footer p { #feedbackContent {
bottom: -12rem!important; float: left;
} }
} }

26
index.html
Unescape View File

@ -22,11 +22,11 @@
<section class="box"> <section class="box">
<!-- Clock --> <!-- Clock -->
<div id="timeBox"> <div id="timeBox">
<p id="hours">uren</p><p id="mins">:minuten</p><p id="secs">:seconden</p><br> <p id="hours" class="time">uren</p><p id="mins" class="time">:minuten</p><p id="secs" class="time">:seconden</p><br>
<p id="date">datum</p> <p id="date">datum</p>
</div> <br> </div> <br>
<span id="shortcuts"> <span class="shortcuts" id="shortcuts">
<button onclick="window.open('https://www.youtube.com/')"> <button onclick="window.open('https://www.youtube.com/')">
<img src="/resources/img/youtube.png" alt="">Youtube <img src="/resources/img/youtube.png" alt="">Youtube
</button> </button>
@ -56,7 +56,7 @@
</button> </button>
</span> </span>
<span> <span class="shortcuts">
<button onclick="openMenu()" title="Voeg je eigen shortcut toe"> <button onclick="openMenu()" title="Voeg je eigen shortcut toe">
<img src="/resources/img/cross.png" alt="">Voeg toe <img src="/resources/img/cross.png" alt="">Voeg toe
</button> </button>
@ -69,6 +69,23 @@
<polygon points="0,5 0,2000 300,5"/> <polygon points="0,5 0,2000 300,5"/>
</svg> </svg>
<!-- Feedback -->
<div id="feedbackContent">
<div id="feedbackOne" class="feedback">
<div class="user">
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>Peer Droog</h3>
</div>
<h2 class="userFeedback">"Een goede en overzichtelijk website met een handige klok, wel mist er de mogelijkheid om je eigen plaatjes toe te voegen aan de shortcuts."</h2>
</div><div class="feedback">
<div class="user">
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>Sam Taen</h3>
</div>
<h2 class="userFeedback">adkjfkldjafkldfjdklfjdklafjdklaadkjfkldjafkldfjdklfjdklafjdklaadkjfkldjafkldfjdklfjdklafjdklaadkjfkldjafkldfjdklfjdklafjdklaadkjfkldjafkldfjdklfjdklafjdkla</h2>
</div>
</div>
<!-- Footer --> <!-- Footer -->
<footer> <footer>
@ -97,7 +114,8 @@
<li><a href="https://cloudflare.com">Cloudflare</a></li> <li><a href="https://cloudflare.com">Cloudflare</a></li>
</ul> </ul>
</div> </div>
<p>&#169; 2019 Guus van Meerveld</p>
<p id="copyright">&#169; 2019 Guus van Meerveld</p>
</footer> </footer>

7
js.js
Unescape View File

@ -7,6 +7,12 @@ function showTime() {
var date = new Date() var date = new Date()
var days = ["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"] var days = ["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"]
var months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"] var months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"]
if (date.getHours() < 10) {
d("hours").innerHTML = "0" + date.getHours() + ":"
}
else {
d("hours").innerHTML = date.getHours() + ":"
}
if (date.getMinutes() < 10) { if (date.getMinutes() < 10) {
d("mins").innerHTML = "0" + date.getMinutes() + ":" d("mins").innerHTML = "0" + date.getMinutes() + ":"
} }
@ -19,7 +25,6 @@ function showTime() {
else { else {
d("secs").innerHTML = date.getSeconds() d("secs").innerHTML = date.getSeconds()
} }
d("hours").innerHTML = date.getHours() + ":"
d("date").innerHTML = days[date.getDay()] + " " + date.getDate() + " " + months[date.getMonth()]; d("date").innerHTML = days[date.getDay()] + " " + date.getDate() + " " + months[date.getMonth()];
setTimeout(showTime, 1000); setTimeout(showTime, 1000);
} }

7
playground/css.css
Unescape View File

@ -18,8 +18,7 @@
width: 100%; width: 100%;
} }
#codeContent div { #codeContent div {
margin-left: 5%; margin-left: calc(50% - 45%);
margin-right: 5%;
width: 90%; width: 90%;
height: 85%; height: 85%;
} }
@ -52,6 +51,10 @@
display: block!important; display: block!important;
width: 100%; width: 100%;
} }
#codeContent button {
width: 4rem!important;
font-size: 11px;
}
iframe { iframe {
width: 100%!important; width: 100%!important;
} }

28
resources/css/cssall.css
Unescape View File

@ -2,7 +2,7 @@
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
html { html {
height: 100%; min-height: 100%;
} }
::selection { ::selection {
background: #6ec1b3; background: #6ec1b3;
@ -15,7 +15,7 @@ body {
color: white!important; color: white!important;
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;
height: 100%; min-height: 100vh;
background-color: #19191C; background-color: #19191C;
} }
/* Search */ /* Search */
@ -72,28 +72,36 @@ a:hover {
background-color: #454752; background-color: #454752;
} }
.button { .button {
border: 2px #4c8a80 solid;
background-color: #4c8a80; background-color: #4c8a80;
border: 0;
border-bottom: #37655e 5px solid;
color: white; color: white;
outline: 0!important; outline: 0!important;
border-radius: 0.2rem; border-radius: 0.2rem;
transition: border .3s, background-color .3s; transition: border .3s ease, background-color .3s;
} }
.button:hover { .button:hover {
background-color: #386661; background-color: #427a71;
border: #386661 2px solid; }
.button:active {
border: 0;
border-top: #37655e 5px solid;
} }
.cancelButton { .cancelButton {
border: 2px #b52c22 solid; border: 0;
border-bottom: #96231b 5px solid;
background-color: #b52c22; background-color: #b52c22;
color: white; color: white;
outline: 0!important; outline: 0!important;
border-radius: 0.2rem; border-radius: 0.2rem;
transition: border .3s, background-color .3s; transition: border .3s ease, background-color .3s, border .3s;
} }
.cancelButton:hover { .cancelButton:hover {
background-color: #8a1e16; background-color: #a3281f;
border: #8a1e16 2px solid; }
.cancelButton:active {
border-top: #96231b 5px solid;
border-bottom: 0;
} }
.input { .input {
border: 0px #363840 solid; border: 0px #363840 solid;

15
resources/css/shortcuts.css
Unescape View File

@ -1,30 +1,31 @@
/* Shortcuts */ /* Shortcuts */
section span button { .shortcuts button {
margin: 0 0 1rem 1rem; margin: 0 0 1rem 1rem;
width: 12rem; width: 12rem;
max-height: 5.3rem; max-height: 5.3rem;
padding: 1rem; padding: 1rem;
color: white; color: white;
background-color: #363840; background-color: #363840;
border: #363840 2px solid; border: #363840 0px solid;
border-radius: .5rem; border-radius: .5rem;
display: inline-block; display: inline-block;
transition: background-color .5s, border .5s; transition: background-color .5s, border .5s;
} }
section span button::-webkit-scrollbar { .shortcuts button::-webkit-scrollbar {
display: hidden; display: hidden;
} }
section span button:hover { .shortcuts button:hover {
background-color: #3d3e47; background-color: #3d3e47;
border-color: #3d3e47; border-color: #3d3e47;
} }
section span button:hover .removeShortcut { .shortcuts button:hover .removeShortcut {
display: inline; display: inline;
} }
section span button:focus { .shortcuts button:focus {
outline: none; outline: none;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25) inset;
} }
section span img { .shortcuts img {
width: 3rem; width: 3rem;
margin-right: 1rem; margin-right: 1rem;
height: 3rem; height: 3rem;

BIN
resources/img/error.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
resources/img/rocket.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
resources/img/user.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

10
vuurjongen-en-watermeisje-4/index.html
Unescape View File

@ -10,16 +10,18 @@
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Vuurjongen en Watermeisje</title> <title>Vuurjongen en Watermeisje</title>
</head>
<body>
<style> <style>
iframe { iframe {
width: 100%; width: 100%;
height: 100%; height: 94.7vh;
border: 0;
margin-top: 55px;
} }
</style> </style>
</head>
<body>
<iframe id="game" frameborder="0" src="https://html5.gamedistribution.com/3790681b69584409b7f681a8e400102d/" allowfullscreen></iframe> <iframe id="game" src="https://html5.gamedistribution.com/3790681b69584409b7f681a8e400102d/" allowfullscreen></iframe>
<script src="/resources/js/navbar.json.js"></script> <script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script> <script src="/resources/js/insertNavbar.js"></script>