site/index.html

107 lines
3.2 KiB
HTML
Raw Normal View History

2018-03-14 07:16:07 +00:00
<html>
<head>
<title>Quad's site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="assets/favicon.png" type="image/png"/>
2018-03-14 07:16:07 +00:00
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.0.11/css/fork-awesome.min.css" integrity="sha256-MGU/JUq/40CFrfxjXb5pZjpoZmxiP2KuICN5ElLFNd8=" crossorigin="anonymous">
2018-03-14 07:16:07 +00:00
<link href="style.css" rel="stylesheet" />
</head>
<body>
2018-03-14 07:16:07 +00:00
<div id="site">
<div id="content">
<div id="splits">
<div id="split1">
2019-09-12 17:39:48 +00:00
<img src="assets/avi.png" />
</div>
<div id="split2">
2019-09-12 17:39:48 +00:00
<h1 class="title">Quad</h1>
</div>
</div>
2018-03-14 07:16:07 +00:00
<div id="main-container">
<div id="navbar">
<div id="button1" class="nav-button">About</div>
2019-09-12 17:39:48 +00:00
<div id="button2" class="nav-button">Contact</div>
2018-03-14 07:16:07 +00:00
<div id="button3" class="nav-button">Projects</div>
</div>
<div id="page">
<p class="initial-text">
<i class="fa fa-arrow-up" aria-hidden="true"></i><br>
Click a button!
</p>
2018-03-14 07:16:07 +00:00
</div>
</div>
<p class="notice">
P.S Anime is for bakas
</p>
</div>
</div>
2019-09-12 17:39:48 +00:00
<script>
// Brace yourself for horrible JavaScript.
// This code doesn't really exist for any reason other than the lolz
// Find all our buttons
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
const button3 = document.getElementById('button3');
// Create variables that will get populated by loadContent() later
var page1 = "pages/about.html";
var page2 = "pages/contact.html";
var page3 = "pages/projects.html";
const contentArea = document.getElementById("page");
// Very bad function to get rid of the "active" class wherever it is atm
function resetButtons() {
button1.className = "nav-button";
button2.className = "nav-button";
button3.className = "nav-button";
}
function httpGet(myUrl, callback) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(contentArea, xmlHttp.responseText);
}
xmlHttp.open("GET", myUrl, true);
xmlHttp.send(null);
}
function activatePage(navbutt, source) {
resetButtons();
navbutt.className += " active";
console.log("there's absolutely no reason for this site to use ajax lmao");
httpGet(source, setContent);
}
function setContent(target, payload) {
target.innerHTML = payload;
}
function initialContent() {
// Slap on all the event listeners
button1.addEventListener('click', function() {
activatePage(button1, page1);
}, false);
button2.addEventListener('click', function() {
activatePage(button2, page2);
}, false);
button3.addEventListener('click', function() {
activatePage(button3, page3);
}, false);
setContent(contentArea, '<p class="initial-text"><i class="fa fa-arrow-up" aria-hidden="true"></i><br>Click a button!</p>');
}
initialContent();
</script>
2018-03-14 07:16:07 +00:00
</body>
2019-09-12 17:39:48 +00:00
</html>