Init
This commit is contained in:
commit
9dee5d4c2e
52
css/about.css
Normal file
52
css/about.css
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Sarabun', sans-serif;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
color: lightpink;
|
||||
padding-top: 6%;
|
||||
padding-bottom: 3.5%;
|
||||
}
|
||||
|
||||
/* Centered Content */
|
||||
.headercontent {
|
||||
text-align: center;
|
||||
align-self: flex;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.headercontent h1 {
|
||||
padding-top: 10px;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.headercontent h4 {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.headercontent p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.TTClogo {
|
||||
margin-top: 20px;
|
||||
width: 250px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ShieldsDiscord {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
29
css/style.css
Normal file
29
css/style.css
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Sarabun', sans-serif;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: black;
|
||||
color: lightpink;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Centered Content */
|
||||
.centered-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#blahaj {
|
||||
opacity: 0;
|
||||
}
|
||||
167
css/styleHF.css
Normal file
167
css/styleHF.css
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
/* Header */
|
||||
|
||||
:root {
|
||||
--background-color-dark: #111111;
|
||||
--background-color-light: rgb(255, 224, 229);
|
||||
--color-dark: lightpink;
|
||||
--color-light: #111111;
|
||||
--color-button-dark: rgb(160, 61, 76);
|
||||
--color-buton-light: #333;
|
||||
--color-button-hover-light: rgb(160, 61, 76);
|
||||
--color-button-hover-dark: #333;
|
||||
|
||||
--color-bg-body-dark: black;
|
||||
--color-bg-body-light: lightpink;
|
||||
--color-body-light: lightpink;
|
||||
--color-body-dark: black;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--background-color-dark);
|
||||
color: var(--color-light);
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: #111111;
|
||||
color: lightpink;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Add the following styles for the popup */
|
||||
.image-popup {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 300px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
|
||||
.popup-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: min-content;
|
||||
background-color: #1d1d1d;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.image-popup:hover .popup-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.popup-content img {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
margin-right: 10px;
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.popup-content img:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Add the following style to remove margin on the last child */
|
||||
.popup-content > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.popup-content img:hover {
|
||||
transform: scale(1.1); /* Add a slight scale effect on hover */
|
||||
}
|
||||
|
||||
/* Navigation in Header*/
|
||||
nav.top-nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center; /* Align items vertically in the center */
|
||||
}
|
||||
|
||||
nav.top-nav a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding: 10px 15px; /* Adjust padding for better spacing */
|
||||
transition: color 0.3s; /* Add a smooth transition for color change */
|
||||
}
|
||||
|
||||
nav.top-nav li {
|
||||
margin: 0 15px;
|
||||
border-right: 2px solid rgb(0, 0, 0); /* Add a right border to create a separator */
|
||||
padding-right: 15px; /* Adjust padding for better spacing */
|
||||
}
|
||||
|
||||
/* Style the last li to remove the border */
|
||||
nav.top-nav li:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Change text color on hover */
|
||||
nav.top-nav a:hover {
|
||||
color: rgb(255, 246, 247); /* Change to the desired hover color */
|
||||
}
|
||||
|
||||
/* Navigation in Footer */
|
||||
nav.bottom-nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center; /* Center the items horizontally */
|
||||
align-items: center; /* Align items vertically in the center */
|
||||
}
|
||||
|
||||
nav.bottom-nav li {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
/* Navigation links in Footer */
|
||||
nav.bottom-nav a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding: 10px 15px; /* Adjust padding for better spacing */
|
||||
transition: color 0.3s; /* Add a smooth transition for color change */
|
||||
}
|
||||
|
||||
/* Change text color on hover */
|
||||
nav.bottom-nav a:hover {
|
||||
color: inherit; /* Change to the desired hover color */
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #333;
|
||||
color: inherit;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 10px 20px;
|
||||
border-color: #11111100;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-button img {
|
||||
transform: scale(.08);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
77
html/about.html
Normal file
77
html/about.html
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" type="image/png" sizes="48x48" href="/images/bunnie48px.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<title>Zoey's Bits - About</title>
|
||||
<link rel="stylesheet" href="/css/about.css" type="text/css" media="all">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="header-placeholder"></div>
|
||||
|
||||
<div class="headercontent">
|
||||
<h1 id="title">About me!</h1>
|
||||
<h4 id="subtitle">booba</h4>
|
||||
|
||||
<p>
|
||||
I like bunnies, but don't own any.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mostly a jack of all trades, master of none.
|
||||
<br>
|
||||
At least it makes for conversations that don't really die down.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Big proponent of Free and Open Source Software.
|
||||
<br>
|
||||
Self-hosting Gitea and Nextcloud servers.
|
||||
<br>
|
||||
Running Arch Linux (btw) since 2019.
|
||||
<br>
|
||||
My first Linux distro was Ubuntu 14.04 in, well.., 2014.
|
||||
<br>
|
||||
<p>
|
||||
Aspiring game dev, doing everything from code,
|
||||
<br>
|
||||
through hosting services,
|
||||
and creating all the 3D models, sprites and soon also sounds.
|
||||
<br>
|
||||
Yet to release a single project. ヽ(ﾟДﾟ)ﾉ
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Used to, and still do, have a relatively big K-On! oriented Discord server, <br>
|
||||
like that's anything to brag about, <br>
|
||||
but it's basically been on maintenance mode for maybe 2 years now. <br>
|
||||
If you'd still like to join, knock yourself out. <br>
|
||||
<a href="https://discord.gg/qpsYX58">
|
||||
<img class="TTClogo" src="/images/TTClatestCircleCrop.png">
|
||||
<br>
|
||||
<img class="ShieldsDiscord" alt="Discord" src="https://img.shields.io/discord/625008568369938445?logo=discord">
|
||||
</a>
|
||||
<br>
|
||||
<a href='https://mastodon.online/@sailorzoop'>
|
||||
<img alt='Mastodon' src='https://img.shields.io/badge/| sailorzoop-darkblue?&logo=mastodon'>
|
||||
</a>
|
||||
<a href=''>
|
||||
<img alt='Discord' src='https://img.shields.io/badge/| @sailorzoop-purple?&logo=discord'>
|
||||
</a>
|
||||
<a href='https://matrix.to/#/@sailorzoop:matrix.org'>
|
||||
<img alt='Matrix' src='https://img.shields.io/badge/| @sailorzoop:matrix.org-darkgreen?&logo=matrix'>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
|
||||
<script src="/js/loadnavs.js" defer></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
8
html/elements/footer.html
Normal file
8
html/elements/footer.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<footer>
|
||||
<nav class="bottom-nav">
|
||||
<ul>
|
||||
|
||||
<li>© LibreBun™ 2023</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</footer>
|
||||
36
html/elements/header.html
Normal file
36
html/elements/header.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/styleHF.css" type="text/css" media="all">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav class="top-nav">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="image-popup">
|
||||
<a href="/index.html">
|
||||
<img src="/images/bunnie48px.png"></a>
|
||||
<div class="popup-content">
|
||||
<a class="gt" href="https://librebun.ooguy.com/gt" target="_blank"><img src="/images/gt.png"></a>
|
||||
<a class="nc" href="https://librebun.ooguy.com/nc" target="_blank"><img src="/images/nc.png"></a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="/html/projects.html">Projects</a></li>
|
||||
<li><a href="/html/rants.html">Rants</a></li>
|
||||
<li><a href="/html/about.html">About</a></li>
|
||||
<li>
|
||||
<label for="toggle-checkbox" class="toggle-label">
|
||||
<button class="toggle-button" onclick="toggleHeaderColor()"><img src="/images/moon.svg"</button>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<script src="/js/loadnavs.js" defer></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
24
html/projects.html
Normal file
24
html/projects.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" type="image/png" sizes="48x48" href="/images/bunnie48px.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Zoey's Bits - Projects</title>
|
||||
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="header-placeholder"></div>
|
||||
|
||||
<div class="centered-content">
|
||||
<h1 id="title">Welcome to the projects section!</h1>
|
||||
<h3 id="subtitle">WIP</h3>
|
||||
</div>
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
|
||||
<script src="/js/loadnavs.js" defer></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
24
html/rants.html
Normal file
24
html/rants.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" type="image/png" sizes="48x48" href="/images/bunnie48px.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Zoey's Bits - Rants</title>
|
||||
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="header-placeholder"></div>
|
||||
|
||||
<div class="centered-content">
|
||||
<h1 id="title">Welcome to the rants section!</h1>
|
||||
<h3 id="subtitle">WIP</h3>
|
||||
</div>
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
|
||||
<script src="/js/loadnavs.js" defer></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
images/TTClatestCircleCrop.png
Normal file
BIN
images/TTClatestCircleCrop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
images/bunnie48px.png
Normal file
BIN
images/bunnie48px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 703 B |
BIN
images/gt.png
Normal file
BIN
images/gt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
57
images/moon.svg
Normal file
57
images/moon.svg
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="300"
|
||||
height="300"
|
||||
viewBox="0 0 79.374998 79.375"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="moon.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="2.2022289"
|
||||
inkscape:cx="128.27913"
|
||||
inkscape:cy="149.84818"
|
||||
inkscape:window-width="1916"
|
||||
inkscape:window-height="1056"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="20"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer3" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Layer 2">
|
||||
<circle
|
||||
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="path4"
|
||||
cx="39.6875"
|
||||
cy="39.6875"
|
||||
r="38.629166" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer3"
|
||||
inkscape:label="Layer 3">
|
||||
<path
|
||||
id="circle1"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
d="M 46.058114,4.3440906 A 39.6875,39.6875 0 0 0 18.710238,53.357241 39.6875,39.6875 0 0 0 36.600488,76.534986 37.765205,46.535679 29.487085 0 1 40.156987,32.694321 37.765205,46.535679 29.487085 0 1 74.832599,7.1323231 39.6875,39.6875 0 0 0 46.058114,4.3440906 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
images/nc.png
Normal file
BIN
images/nc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
57
images/sun.svg
Normal file
57
images/sun.svg
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="300"
|
||||
height="300"
|
||||
viewBox="0 0 79.374998 79.375"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="sun.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="2.2022289"
|
||||
inkscape:cx="128.27913"
|
||||
inkscape:cy="149.84818"
|
||||
inkscape:window-width="1916"
|
||||
inkscape:window-height="1056"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="20"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer3" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Layer 2">
|
||||
<circle
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
id="path4"
|
||||
cx="39.6875"
|
||||
cy="39.6875"
|
||||
r="38.629166" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer3"
|
||||
inkscape:label="Layer 3">
|
||||
<path
|
||||
id="circle1"
|
||||
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
|
||||
d="M 46.058114,4.3440906 A 39.6875,39.6875 0 0 0 18.710238,53.357241 39.6875,39.6875 0 0 0 36.600488,76.534986 37.765205,46.535679 29.487085 0 1 40.156987,32.694321 37.765205,46.535679 29.487085 0 1 74.832599,7.1323231 39.6875,39.6875 0 0 0 46.058114,4.3440906 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
images/under_construction.gif
Normal file
BIN
images/under_construction.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 494 KiB |
27
index.html
Normal file
27
index.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" type="image/png" sizes="48x48" href="/images/bunnie48px.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Zoey's Bits</title>
|
||||
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
|
||||
<script src="/js/loadnavs.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="header-placeholder"></div>
|
||||
|
||||
<div class="centered-content">
|
||||
<h1 id="title">Welcome to my Website!</h1>
|
||||
<h3 id="subtitle">WIP</h3>
|
||||
<img src="/images/under_construction.gif" alt="Under Construction">
|
||||
<h3 id="blahaj">blahaj dance</h3>
|
||||
</div>
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
82
js/loadnavs.js
Normal file
82
js/loadnavs.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
console.log('DOMContentLoaded event fired');
|
||||
// Wait for the DOM to load
|
||||
// Load header and footer
|
||||
loadContent('/html/elements/header.html', document.getElementById('header-placeholder'))
|
||||
.then(() => {
|
||||
toggleHeaderColor();
|
||||
// After loading the header content, initialize toggle button and checkbox for header color
|
||||
const toggleButton = document.querySelector('button.toggle-button');
|
||||
});
|
||||
|
||||
loadContent('/html/elements/footer.html', document.getElementById('footer-placeholder'));
|
||||
|
||||
// Load external stylesheets
|
||||
loadStylesheet('/css/style.css'); // Add more stylesheets if needed
|
||||
loadStylesheet('/css/styleHF.css');
|
||||
|
||||
// Retrieve the header element
|
||||
const header = document.querySelector('header');
|
||||
|
||||
// Check if the header element exists before initializing the toggle button
|
||||
if (header) {
|
||||
// Call the function once to set the initial header color based on checkbox state
|
||||
toggleHeaderColor();
|
||||
}
|
||||
});
|
||||
|
||||
async function loadContent(url, container) {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const html = await response.text();
|
||||
container.innerHTML = html;
|
||||
|
||||
// After loading the content, load any stylesheets within it
|
||||
const stylesheets = container.querySelectorAll('link[rel="stylesheet"]');
|
||||
stylesheets.forEach(stylesheet => {
|
||||
const href = stylesheet.getAttribute('href');
|
||||
loadStylesheet(href);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error loading content:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function loadStylesheet(href) {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = href;
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
let isLightMode = true;
|
||||
|
||||
function toggleHeaderColor() {
|
||||
const header = document.querySelector('header');
|
||||
const togglebutton = document.querySelector('.toggle-button');
|
||||
const body = document.querySelector('body');
|
||||
|
||||
isLightMode = !isLightMode;
|
||||
|
||||
if (!isLightMode) {
|
||||
header.style.backgroundColor = 'var(--background-color-dark)';
|
||||
header.style.color = 'var(--color-dark)';
|
||||
togglebutton.backgroundColor = 'var(--color-button-dark)';
|
||||
togglebutton.classList.add('dark-mode');
|
||||
togglebutton.classList.remove('light-mode');
|
||||
|
||||
body.style.backgroundColor = 'var(--color-bg-body-dark)';
|
||||
body.style.color = 'var(--color-bg-body-light)';
|
||||
|
||||
} else {
|
||||
header.style.backgroundColor = 'var(--background-color-light)';
|
||||
header.style.color = 'var(--color-light)';
|
||||
togglebutton.backgroundColor = 'var(--color-button-light)';
|
||||
togglebutton.classList.add('light-mode');
|
||||
togglebutton.classList.remove('dark-mode');
|
||||
|
||||
body.style.backgroundColor = 'var(--color-bg-body-light)';
|
||||
body.style.color = 'var(--color-bg-body-dark)';
|
||||
}
|
||||
}
|
||||
43
js/script.js
Normal file
43
js/script.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const title = document.querySelector('#title');
|
||||
const subtitle = document.querySelector('#subtitle');
|
||||
const blahaj = document.querySelector('#blahaj');
|
||||
|
||||
function handleClick() {
|
||||
// Move elements up and fade them out
|
||||
title.animate(
|
||||
[
|
||||
{ transform: 'translateY(0)', opacity: 1 },
|
||||
{ transform: 'translateY(-50px)', opacity: 0 }
|
||||
],
|
||||
{ duration: 1000, easing: 'ease-out', fill: 'forwards' }
|
||||
);
|
||||
|
||||
subtitle.animate(
|
||||
[
|
||||
{ transform: 'translateY(0)', opacity: 1 },
|
||||
{ transform: 'translateY(-50px)', opacity: 0 }
|
||||
],
|
||||
{ duration: 1000, easing: 'ease-out', fill: 'forwards', delay: 200 }
|
||||
);
|
||||
|
||||
blahaj.animate(
|
||||
[
|
||||
{ transform: 'translateY(-50px)', opacity: 0 },
|
||||
{ transform: 'translateY(-0px)', opacity: 1 }
|
||||
],
|
||||
{ duration: 500, easing: 'ease-out', fill: 'forwards', delay: 400 }
|
||||
);
|
||||
|
||||
// Remove the event listener after it has been triggered
|
||||
document.body.removeEventListener('click', handleClick);
|
||||
|
||||
title.addEventListener('animationend', function () {
|
||||
title.remove();
|
||||
});
|
||||
|
||||
subtitle.addEventListener('animationend', function () {
|
||||
subtitle.remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
3
json/status.json
Normal file
3
json/status.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"godotver": "4.2.1"
|
||||
}
|
||||
15
not_found.html
Normal file
15
not_found.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Not Found</title>
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<div class="centered-content">
|
||||
<h1>Page Not Found</h1>
|
||||
<p>There's nobunny here.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue