teascade/Teascade.net
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First prototype version!

Browse Source
This commit is contained in:
Allexit 2016-11-02 17:25:57 +02:00
parent 8e4c1d8397
commit 04be4acbb8
4 changed files with 74 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
blog/index.html Normal file
View File

@ -0,0 +1,34 @@
<html>
<head>
<link rel="stylesheet" href="../css/main.css">
<script src="../js/main.js"></script>
</head>
<body onload="main('blog')">
<div class="cont">
<div class="teacup">
<img src="../img/teascade_cropped.svg"></img>
</div>
<div class="stuffarea">
<ul class="navbar">
<a href="#" id="about-link"><li><div class="button">About</div></li></a>
<a href="games" id="games-link"><li><div class="button">Games</div></li></a>
<a href="blog" id="blog-link"><li><div class="button">Blog</div></li></a>
</ul>
<div id="about" class="hiddenarea">
<h1>Teascade</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
</div>
<div id="games" class="hiddenarea">
<h1>Games</h1>
<p>Games shall be listed here!</p>
</div>
<div id="blog">
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
<p>Some other contact info and useless garbage about me.</p>
</div>
</div>
</div>
</body>
</html>

34
games/index.html Normal file
View File

@ -0,0 +1,34 @@
<html>
<head>
<link rel="stylesheet" href="../css/main.css">
<script src="../js/main.js"></script>
</head>
<body onload="main('games')">
<div class="cont">
<div class="teacup">
<img src="../img/teascade_cropped.svg"></img>
</div>
<div class="stuffarea">
<ul class="navbar">
<a href="#" id="about-link"><li><div class="button">About</div></li></a>
<a href="games" id="games-link"><li><div class="button">Games</div></li></a>
<a href="blog" id="blog-link"><li><div class="button">Blog</div></li></a>
</ul>
<div id="about" class="hiddenarea">
<h1>Teascade</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
</div>
<div id="games">
<h1>Games</h1>
<p>Games shall be listed here!</p>
</div>
<div id="blog" class="hiddenarea">
<h1>Blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis. </p>
<p>Some other contact info and useless garbage about me.</p>
</div>
</div>
</div>
</body>
</html>

4
js/main.js
View File

@ -18,11 +18,13 @@ function openPage(page) {
document.getElementById(page).style.opacity = "0"; document.getElementById(page).style.opacity = "0";
document.getElementById(page).className = ""; document.getElementById(page).className = "";
var target = page; var target = page;
var targetPg = "/" + target;
if (target == "about") { if (target == "about") {
target = ""; target = "";
targetPg = "";
} }
; ;
window.history.pushState(target, target, "/" + target + "/"); window.history.pushState(target, target, targetPg + "/");
slideOpacity(function () { slideOpacity(function () {
}, 1.5); }, 1.5);
}, -1.5); }, -1.5);

5
ts/main.ts
View File

@ -27,9 +27,10 @@ function openPage(page: string) {
document.getElementById(page).style.opacity = "0"; document.getElementById(page).style.opacity = "0";
document.getElementById(page).className = ""; document.getElementById(page).className = "";
let target = page; let target = page;
if (target == "about") { target = "" }; let targetPg = "/" + target;
if (target == "about") { target = ""; targetPg = ""; };
window.history.pushState(target, target, `/${target}/`); window.history.pushState(target, target, `${targetPg}/`);
slideOpacity(() => { slideOpacity(() => {
}, 1.5); }, 1.5);