a7-css-shenanigans/index.html

212 lines
9.2 KiB
HTML

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Adastra7</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/waves.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/scaler.css">
<link rel="stylesheet" href="css/flexboxes.css">
<link rel="stylesheet" href="css/button.css">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
<style>
.content-div {
opacity: 0;
transition: opacity 0.3s ease-in-out;
display: none; /* Apply only to content divs */
}
#page-title {
/* Initial state should be visible */
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.active {
display: block;
opacity: 1;
}
.footer {
text-align: center;
}
</style>
</head>
<body class="silly-font">
<div class="header">
<div class="nav-bar" style="font-family: 'Quicksand'">
<div id="links">
<a href="javascript:void(0);" class="nav" onclick="changeContent('Adastra7')">Home</a>
<a href="javascript:void(0);" class="nav" onclick="changeContent('Services')">Services</a>
<a href="javascript:void(0);" class="nav" onclick="changeContent('About')">About</a>
<a href="javascript:void(0);" class="nav" onclick="changeContent('Contact')">Contact</a>
</div>
</div>
<div class="inner-header flex">
<h1 id="page-title" style="font-family: 'Quicksand'">Adastra7</h1>
</div>
<!--Waves Container thingy i stole-->
<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
<!--Waves end-->
</div>
<!--Header ends-->
<!--Content starts-->
<div id="Adastra7" class="content content-div active">
<!-- nothing here lmeo just clean landing page -->
<p></p>
</div>
<div id="Services" class="content content-div">
<div class="wrapper">
<ul class="flex-box cards nocent">
<li>
<h2>Most used</h2>
<div class="button-container flex-buttons center-this-shit"> <!-- Add a container for your buttons -->
<a href="https://mail.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Mail</a>
<a href="https:/adastra7.net/git/" class="action-button btnanimate dabtn grow-btn">Git</a>
<a href="https://media.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Mediaserver</a>
<a href="https://pass.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Password Manager</a>
<a href="https://cloud.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Cloud</a>
<a href="https://wiki.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Wiki</a>
<!-- ich brauche mental dringend hilfe-->
</div>
</li>
</ul>
<ul class="flex-box cards nocent">
<li>
<h2>Public Services</h2>
<p>Services that either require no login or that you can sign up for yourself</p>
<br>
<div class="button-container flex-buttons center-this-shit"> <!-- Add a container for your buttons -->
<a href="https://inkle.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Inklewriter</a>
<a href="https://qwu.ch/" class="action-button btnanimate dabtn grow-btn">Matrix (qwu.ch) - soon TM</a>
<a href="https://qwu.ch/" class="action-button btnanimate dabtn grow-btn">Fediverse (qwu.ch) - soon TM</a>
<a href="https://jabber.adastra7.net/" class="action-button btnanimate dabtn grow-btn">XMPP Server</a>
<a href="https://img.adastra7.net/" class="action-button btnanimate dabtn grow-btn">CRT Image Host</a>
<a href="https://wiki.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Wiki</a>
<a href="https://pass.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Password Manager</a>
<a href="https:/adastra7.net/git/" class="action-button btnanimate dabtn grow-btn">Git</a>
<!-- ich brauche mental dringend hilfe-->
</div>
</li>
<li>
<h2>Private Services</h2>
<p>Services that require a login only obtainable through our discord</p>
<br>
<div class="button-container flex-buttons center-this-shit"> <!-- Add a container for your buttons -->
<a href="https://cloud.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Cloud</a>
<a href="https://media.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Mediaserver</a>
<a href="https://gpt.adastra7.net/" class="action-button btnanimate dabtn grow-btn">AdasterGPT</a>
<a href="https://mail.adastra7.net/" class="action-button btnanimate dabtn grow-btn">Email</a>
<!-- ich brauche mental dringend hilfe-->
</div>
</li>
</ul>
</div>
</div>
<br>
</div>
<div id="About" class="content content-div">
<div class="wrapper">
<h2>Who runs this?</h2>
<ul class="flex-box cards nocent">
<li>
<h2>crt</h2>
<p>🚀 The powerhouse behind our physical servers! crt not only keeps the gears turning by maintaining most of our essential services but does so with unmatched dedication and skill.</p>
<p>🤖 Although not frequently seen on Discord, crt has embraced the future by moving to matrix, pioneering our journey into new realms of communication!</p>
</li>
<li>
<h2>Yessiest</h2>
<p>👨‍💻 Code wizard alert! Yessiest is the genius programming the bots and managing Jabber Registration for Adastra7, transforming our digital landscape one line of code at a time.</p>
<p>🎉 A cornerstone of our Discord community, Yessiest's vibrant presence and contributions keep our spirits high and our server lively!</p>
</li>
<li>
<h2>bkj</h2>
<p>🌟 An unstoppable force on our Discord Server, bkj's energy is infectious! Always there to engage, support, and keep our community buzzing with excitement and activity.</p>
</li>
<li>
<h2>Cosmicle</h2>
<p>✨ A true star in our digital cosmos, Cosmicle's active presence on the Discord Server is nothing short of inspiring, keeping our community vibrant and tightly-knit.</p>
</li>
<!-- ich brauche mental dringend hilfe-->
</ul>
<h2>Updates and News:</h2>
<ul class="flex-box cards nocent">
<li>
<h2>Planned fiber upgrade:</h2>
<p>In the first week of May 2024 Adastra7 will be getting the long awaited fiber upgrade. Please expect some downtime while fiber is being installed and core components are replace or reconfigured for 10Gbps networking</p>
<h3>- crt</h3>
</li>
<li>
<h2>Rework of Adastra7 website:</h2>
<p>An ongoing project is the rework of this website. I have decided that continuing to drag along our Bootstrap 3 based DOS themed website isnt viable therefore I am working on an overhaul of the entire thing.</p>
<h3>- crt</h3>
</li>
</ul>
</div>
</div>
<div id="Contact" class="content content-div">
<p style="font-family: 'Quicksand'">Contact content here</p>
</div>
<!-- Content ends -->
<!--<div class="footer"><p style="font-family: 'Quicksand'">Adastra7 | 2017-2014</p></div>-->
<script>
function changeContent(pageName) {
// Fade out all elements first
var contentDivs = document.getElementsByClassName("content-div");
for (var i = 0; i < contentDivs.length; i++) {
contentDivs[i].style.opacity = '0'; // Start fade out
}
document.getElementById("page-title").style.opacity = '0'; // Fade out title
// Wait for the fade out to finish
setTimeout(function() {
// Hide all content divs after fade out
for (var i = 0; i < contentDivs.length; i++) {
contentDivs[i].style.display = 'none';
}
// Change the title and prepare to fade in
var title = document.getElementById("page-title");
title.innerHTML = pageName;
title.style.display = "block"; // Make sure title is ready for fading in
// Update the browser tab title only if not viewing 'Adastra7'
if (pageName !== 'Adastra7') {
document.title = 'Adastra7 | ' + pageName;
} else {
document.title = 'Adastra7'; // Keep it as just 'Adastra7' if that's the current page
}
// Show and fade in the new active content
var activeDiv = document.getElementById(pageName);
activeDiv.style.display = 'block';
setTimeout(function() { // Start fade in
activeDiv.style.opacity = '1';
title.style.opacity = '1';
}, 10); // Short delay for display changes
}, 300); // Match fade effect duration
}
</script>
<script>
// Initialize the page with default content
window.onload = initPage;
</script>
</body>
</html>