Fluffy/WebsiteArchive
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/Fluffys-website.git synced 2025-05-28 22:33:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

flasky flasky

Browse source
This commit is contained in:
Michał Gdula 2022-12-28 00:46:08 +00:00
parent e6e2714a95
commit 40baf07fe1
36 changed files with 1035 additions and 1365 deletions
Download patch file Download diff file Expand all files Collapse all files

106
templates/layout.html Normal file
View file

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leggy land</title>
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}" defer>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script src="https://unpkg.com/phosphor-icons" defer></script>
</head>
<body>
<div class="nav">
<button class="nav-toggle"><i class="ph-list"></i></button>
<p>Leggy land</p>
</div>
<div class="aside">
<div class="aside-container">
<a href="/#" class="aside-item">
Home
<i class="ph-arrow-right"></i>
</a>
<a href="/#contact" class="aside-item">
Social Media
<i class="ph-arrow-right"></i>
</a>
<a href="/#about" class="aside-item">
About
<i class="ph-arrow-right"></i>
</a>
<hr>
<a href="/" class="aside-item">
Gallery
<i class="ph-image"></i>
</a>
<a href="/status" class="aside-item">
Server Status
<i class="ph-cpu"></i>
</a>
<a href="/" class="aside-item">
Gwa Gwa
<i class="ph-package"></i>
</a>
<hr>
<a href="/funny" class="aside-item">
lol
<i class="ph-arrow-right"></i>
</a>
</div>
</div>
<div class="wrapper">
{% block content %} {% endblock %}
</div>
<div class="footer">
<p>Last updated 27th Dec</p>
</div>
<script>
let btnColours = [ 'red', 'yellow', 'green', 'blue', 'purple']
let btnElements = document.querySelectorAll('.btn');
let asideElements = document.querySelectorAll('.aside-item');
for (let i = 0; i < btnElements.length; i++) {
btnElements[i].addEventListener("mouseover", function() {
let randomColour = Math.floor(Math.random() * btnColours.length);
this.style.color = `var(--${btnColours[randomColour]})`;
});
btnElements[i].addEventListener("mouseout", function() {
this.style.color = '';
});
}
for (let i = 0; i < asideElements.length; i++) {
asideElements[i].addEventListener("mouseover", function() {
let randomColour = Math.floor(Math.random() * btnColours.length);
this.classList.add(`aside-${btnColours[randomColour]}`);
});
asideElements[i].addEventListener("mouseout", function() {
this.classList = 'aside-item';
});
}
let navToggle = document.querySelector('.nav-toggle');
let aside = document.querySelector('.aside');
navToggle.addEventListener('click', function() {
aside.classList.toggle('aside-active');
});
function fadeOnLoad(obj) {
$(obj).fadeIn(621);
}
</script>
</body>
</html>