Major changes to homepage

add-license-1
Guuq 5 years ago
parent 558f4e57c0
commit 7b9fb321d1

@ -19,7 +19,7 @@
font-family: 'Open Sans';
}
div {
background-color: #212126;
background-color: #33353d;
height: 100%;
padding: 10%;
position: absolute;

@ -19,7 +19,7 @@
font-family: 'Open Sans';
}
div {
background-color: #212126;
background-color: #33353d;
height: 100%;
padding: 10%;
position: absolute;

@ -22,12 +22,14 @@
margin: 0 auto;
margin-bottom: 1rem;
}
.form span {
color:#c42222;
}
.submit {
position: absolute;
width: 6rem;
width: 90%;
height: 40px;
right: 2rem;
bottom: 1rem;
display: block;
margin: -2rem auto 1rem auto;
}
.dataInput {
width: 90%;

@ -16,24 +16,24 @@
<body>
<div class="main">
<h1>Contact opnemen?</h1>
<h1>Need more info?</h1>
<div class="form">
<form action="/thank-you" method="post">
<h3>*Naam en Achternaam</h3>
<h3>Name and last name<span>*</span></h3>
<input type="text" class="dataInput input" required name="name" autofocus spellcheck="false">
<h3>*E-mailadres</h3>
<h3>E-mail<span>*</span></h3>
<input type="text" class="dataInput input" required name="email" spellcheck="false">
<h3>*Bericht</h3>
<h3>Message<span>*</span></h3>
<input type="text" class="dataInput input" required name="message" spellcheck="false"><br>
<input type="submit" class="submit button">
</form>
</div>
</div>
<div class="info">
<h2>Contact gegevens:</h2>
<h2>Contact information:</h2>
<ul>
<li>
<h4>TELEFOON</h4></li>
<h4>PHONE</h4></li>
<li>+06 123 456 78</li>
</ul>
<ul>
@ -43,8 +43,8 @@
</ul>
<ul>
<li>
<h4>LOCATIE</h4></li>
<li>Gelderland, Nederland</li>
<h4>LOCATION</h4></li>
<li>Gelderland, Netherlands</li>
</ul>
</div>

@ -1,22 +1,70 @@
/* Main CSS */
section {
svg {
position: relative;
z-index: -1;
padding-top: 49px;
fill: #454752;
stroke-width: 1;
stroke: #454752;
height: 100vh;
}
.mainContent {
overflow: visible;
float: left;
padding: 6rem 0 0 2rem;
display: inline-block;
width: 50%;
padding-top: 55px;
height: 100vh;
overflow: scroll;
overflow-x: hidden;
}
section::-webkit-scrollbar {
.mainContent::-webkit-scrollbar {
display: none;
}
svg {
padding-top: 49px;
fill: #454752;
stroke-width: 1;
stroke: #454752;
height: 100vh;
/* Splash */
.logo {
width: 8rem;
height: 8rem;
margin-right: 2rem;
}
.name {
font-size: 4rem;
white-space: nowrap;
}
.keepclicking {
background-color: #3b3c45;
width: 40rem;
height: 12rem;
transition: background-color .4s;
border: 0;
color: white;
padding: 1rem;
border-radius: .5rem;
margin-top: 3rem;
}
.keepclicking:hover {
background-color: #33343b;
}
.keepclicking:focus {
outline: 0;
}
.playground {
border-right: white 4px solid;
width: 20rem;
display: inline-block;
}
.code {
vertical-align: top;
margin-left: 3.7rem;
margin-top: 10px;
}
.minify {
border-left: white 4px solid;
width: 15rem;
margin-left: 3rem;
display: inline-block;
}
.cut {
vertical-align: top;
margin-top: 10px;
}
/* Clock */
#timeBox {
@ -33,6 +81,24 @@ svg {
font-size: 2rem;
margin: 0;
}
/* About */
.about {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
float: left;
height: 35vh;
background-color: #33353d;
}
.head {
padding: 1rem;
text-align: center;
display: inline-block;
width: 25rem;
border-right: 4px solid white;
}
/* Mobile support */
@viewport {
width: device-width;
@ -40,7 +106,7 @@ svg {
}
/* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) {
section {
.mainContent {
width: 100%!important;
}
svg {

@ -28,15 +28,21 @@
</div><div class="feedback">
<div class="user">
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>Guus van Meerveld</h3>
<h3>User</h3>
</div>
<h2 class="userFeedback"></h2>
</div><div class="feedback">
<div class="user">
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>User</h3>
</div>
<h2 class="userFeedback">Zou jij graag je eigen feedback hier tussen zien? Ga dan naar <a href="/contact" style="text-decoration:underline!important;">contact</a> en verstuur een bericht!</h2>
<h2 class="userFeedback"></h2>
</div><div class="feedback">
<div class="user">
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>User</h3>
</div>
<h2 class="userFeedback">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a risus eu ex sagittis interdum ac ac odio. Proin eleifend turpis a aliquam.</h2>
<h2 class="userFeedback"></h2>
</div>
</div>

@ -8,7 +8,6 @@
<meta name="author" content="Guus van Meerveld">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<link rel="stylesheet" href="/resources/css/shortcuts.css">
<link rel="stylesheet" href="/css.css">
<link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.css">
@ -19,56 +18,33 @@
<body>
<section class="box">
<!-- Clock -->
<div id="timeBox">
<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>
</div> <br>
<div class="box mainContent">
<span class="shortcuts" id="shortcuts">
<button onclick="window.open('https://www.youtube.com/')">
<img src="/resources/img/youtube.png" alt="">Youtube
</button>
<button onclick="window.open('https://pantarijn.magister.net')">
<img src="/resources/img/magister.png" alt="">Magister
</button>
<button onclick="window.open('https://onedrive.live.com/about/en-us/signin/')">
<img src="/resources/img/onedrive.png" alt="">Onedrive
</button>
<button onclick="window.open('https://codepanta.nl/login/index.php')">
<img src="/resources/img/codepanta.png" alt="">Codepanta
</button>
<button onclick="window.open('https://reddit.com')">
<img src="/resources/img/reddit.png" alt="">Reddit
</button>
<button onclick="window.open('https://open.spotify.com/browse/featured')">
<img src="/resources/img/spotify.png" alt="">Spotify
</button>
<button onclick="window.open('https://w3schools.com')">
<img src="/resources/img/w3schools.png" alt="">W3Schools
</button>
<button onclick="window.open('https://maps.google.com')">
<img src="/resources/img/googlemaps.png" alt="">Maps
</button>
<button onclick="window.open('https://translate.google.com')">
<img src="/resources/img/googletranslate.png" alt="">Translate
</button>
</span>
<h1 class="name"><img src="/resources/img/favicon.ico" class="logo" alt="logo">Guus van Meerveld</h1>
<span class="shortcuts">
<button onclick="openMenu()" title="Voeg je eigen shortcut toe">
<img src="/resources/img/cross.png" alt="">Voeg toe
</button>
</span>
<button class="keepclicking" onclick="window.open('/playground', '_self')" title="Test your HTML live at playground!">
<h1 class="playground">Want to test your HTML code?</h1>
<i class="fas fa-code fa-8x code"></i>
</button>
<button class="keepclicking" onclick="window.open('/minify', '_self')" title="Minify your HTML/CSS/JavaScript code!">
<i class="fas fa-cut fa-8x cut"></i>
<h1 class="minify">Need to minify your code?</h1>
</button>
</section>
</div>
<!-- Triangle -->
<svg>
<polygon points="0,5 0,2000 300,5"/>
</svg>
<!-- About -->
<div class="about">
<h1 class="head">This website is built for those who like to code.</h1>
<h1 class="head">And it is built by those who like to code</h1>
<h1 class="head" style="border:0;">Suggest things you would like to see at <a href="/contact" style="text-decoration:underline!important;">contact</a></h1>
</div>
<!-- Footer -->
<footer>
@ -103,22 +79,10 @@
</footer>
<!-- Add shortcut Menu -->
<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 inputMenu' id='shortcutName'><br>
<h4>Geef de link van je shortcut</h4><br>
<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="/resources/js/insertNavbar.js"></script>
<script src="/js.js"></script>
<script src="/resources/js/shortcuts.js"></script>
<script src="/resources/js/javall.js"></script>
</body>

32
js.js

@ -1,32 +0,0 @@
var d = document.getElementById.bind(document);
var c = document.createElement.bind(document);
var q = document.querySelector.bind(document);
// Clock
function showTime() {
var date = new Date()
var days = ["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"]
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) {
d("mins").innerHTML = "0" + date.getMinutes() + ":"
}
else {
d("mins").innerHTML = date.getMinutes() + ":"
}
if (date.getSeconds() < 10) {
d("secs").innerHTML = "0" + date.getSeconds()
}
else {
d("secs").innerHTML = date.getSeconds()
}
d("date").innerHTML = days[date.getDay()] + " " + date.getDate() + " " + months[date.getMonth()];
setTimeout(showTime, 1000);
}
showTime();

@ -23,9 +23,9 @@
<button onclick="showCode()" class="langButton" id="jsButton">JS</button>
<button class="options" id="autoRun" onclick="autoRun()">AUTORUN</button>
<button onclick="updateCode('run')" class="options">RUN</button>
<textarea class="input langInput" id="htmlInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
<textarea class="input langInput" id="cssInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
<textarea class="input langInput" id="jsInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
<textarea class="input langInput" id="htmlInput" onkeyup="updateCode('autoRun')" placeholder="Type your HTML here" spellcheck="false"></textarea>
<textarea class="input langInput" id="cssInput" onkeyup="updateCode('autoRun')" placeholder="Type your CSS here" spellcheck="false"></textarea>
<textarea class="input langInput" id="jsInput" onkeyup="updateCode('autoRun')" placeholder="Type your JavaScript here" spellcheck="false"></textarea>
</div>
</div>
<iframe id="htmlOutput"></iframe>

@ -32,17 +32,18 @@ function autoRun() {
function showCode(lang) {
$(".langButton").css("background-color", "#3b3c45")
$(".langButton").css("border", "none")
$(".langInput").css("display", "none")
if (lang == "html") {
d("htmlButton").style = "background-color: #27282e;"
d("htmlButton").style = "background-color: #27282e;border-bottom: white 2px solid;"
d("htmlInput").style = "display: block"
}
else if (lang == "css") {
d("cssButton").style = "background-color: #27282e;"
d("cssButton").style = "background-color: #27282e;border-bottom: white 2px solid;"
d("cssInput").style = "display: block"
}
else {
d("jsButton").style = "background-color: #27282e;"
d("jsButton").style = "background-color: #27282e;border-bottom: white 2px solid;"
d("jsInput").style = "display: block"
}
}

@ -53,7 +53,7 @@
.navList:hover .fas {
transform: rotate(-180deg);
}
.lowerIndex {
/* .lowerIndex {
z-index: -1!important;
}
.opacityMenu {
@ -66,7 +66,7 @@
background-color: black;
display: inline-block;
z-index: 1;
}
} */
.fa-bars {
display: none!important;
}

@ -1,78 +0,0 @@
/* Shortcuts */
.shortcuts button {
margin: 0 0 1rem 1rem;
width: 12rem;
max-height: 5.3rem;
padding: 1rem;
color: white;
background-color: #363840;
border: #363840 0px solid;
border-radius: .5rem;
display: inline-block;
transition: background-color .5s, border .5s;
}
.shortcuts button::-webkit-scrollbar {
display: hidden;
}
.shortcuts button:hover {
background-color: #3d3e47;
border-color: #3d3e47;
}
.shortcuts button:hover .removeShortcut {
display: inline;
}
.shortcuts button:focus {
outline: none;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25) inset;
}
.shortcuts img {
width: 3rem;
margin-right: 1rem;
height: 3rem;
}
/* Shortcut creation menu */
.hidden {
opacity: 0!important;
}
.menu {
transition: opacity .5s;
}
#addShortcutMenu {
display: inline-block;
z-index: 2;
border-radius: .75rem;
position: absolute;
left: calc(50% - 25rem);
height: 27rem;
width: 50rem;
top: 15%;
}
#addShortcutMenu h1 {
margin: 1rem 0 0 1rem;
}
#addShortcutMenu input {
width: 96%;
height: 2.5rem;
margin-left: 1rem!important;
}
#addShortcutMenu h4 {
margin: 2rem 0 0 1rem;
}
#addShortcutMenu button {
float: right;
margin: 4rem 1rem 0 0;
padding: .5rem;
}
@media screen and (min-width:0px) and (max-width:1000px) {
#addShortcutMenu {
width: 94%!important;
left: 1rem!important;
margin-left: 0px!important;
}
section span button {
width: 9rem!important;
height: 8rem!important;
color: transparent!important;
}
}

@ -24,7 +24,7 @@ navigation.prepend(hamburger)
// Search
var search = c("input")
search.className = "searchBar"
search.placeholder = "Vul een zoek opdracht of url in"
search.placeholder = "Enter a searchterm or url"
search.type = "text"
navigation.appendChild(search)

@ -1,31 +1,32 @@
Navbar = [
{
icon: "/resources/img/favicon.ico",
desc: "Ga naar de homepagina",
desc: "Go to the homepage",
link: "/"
},
{
name: "Playground",
desc: "Test je html live!",
link: "/playground"
},
{
name: "Contact",
desc: "Neem contact met mij op",
desc: "Contact me",
link: "/contact"
},
{
name: "Feedback",
desc: "Feedback voor deze website",
desc: "Feedback for this website",
link: "/feedback"
},
{
name: "Games",
desc: "Hier kan je spelletjes spelen",
name: "Tools",
desc: "Tools for programming",
dropdown: [
{
name: "Vuurjongen en Watermeisje 4",
link: "/vuurjongen-en-watermeisje-4"
name: "Playground",
desc: "Test your HTML live!",
link: "/playground"
},
{
name: "Minifier",
desc: "Minify your HTML/CSS/JavaScript",
link: "/minify"
}
]
}

@ -1,69 +0,0 @@
// Toggle Menu
function openMenu() {
$(".menu").removeClass("lowerIndex");
$("#addShortcutMenu").removeClass("hidden");
d("shortcutLink").setAttribute('placeholder', 'https://example.com')
d("shortcutName").setAttribute('placeholder', 'Example Website')
}
function closeMenu() {
if (!d("addShortcutMenu").classList.contains("hidden")) {
setTimeout(function () {
$(".menu").addClass("lowerIndex");
}, 500)
$("#addShortcutMenu").addClass("hidden");
}
}
var ls = localStorage
var shortcutsData = ls.getItem("shortcuts")
if (shortcutsData) {
var data = JSON.parse(shortcutsData)
data.forEach(d=>{
createShortcut(d)
})
}
function createShortcut(shortcutObj) {
var shortcutName = d("shortcutName").value
var shortcutLink = d("shortcutLink").value
if (shortcutObj) {
shortcutName = shortcutObj.name
shortcutLink = shortcutObj.link
}
if (shortcutName && shortcutLink) {
var data = []
var shortcutData = ls.getItem("shortcuts")
if (shortcutData) {
data = JSON.parse(shortcutsData)
}
if (!shortcutObj) {
data.push({
name: shortcutName,
link: shortcutLink
})
}
var obj = JSON.stringify(data)
ls.setItem("shortcuts", obj)
var shortcutButton = c("button")
shortcutButton.onclick = function() { window.open(shortcutLink); }
shortcutButton.innerHTML = shortcutName
var shortcutImage = c("img")
shortcutImage.src = "/resources/img/shortcut.png"
$("#shortcuts").append(shortcutButton);
$(shortcutButton).prepend(shortcutImage);
$(".inputMenu").val('')
closeMenu();
}
else {
$(".inputMenu").attr('placeholder', 'Je moet hier iets invullen!')
}
}
var shortcutsA = Array.from(d("shortcuts").querySelectorAll("div"))
shortcutsA.forEach(short=>{
short.addEventListener("contextmenu", removeShortcut)
})
function removeShortcut(e) {
e.preventDefault()
this.outerHTML = ""
}