a7-css-shenanigans/index.html

212 lines
8.7 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>- Running the physical servers and maintains most of the services on here</p>
<p>- Barely active on discord due to switching to matrix</p>
</li>
<li>
<h2>Yessiest</h2>
<p>- Programing things like Bots and Jabber Registration for Adastra7</p>
<p>- Great member of the Discord server keeping the community alive</p>
</li>
<li>
<h2>bkj</h2>
<p>- Really active on the Discord Server and keeping the community alive/p>
</li>
<li>
<h2>Cosmicle</h2>
<p>- Really active on the Discord Server and keeping the community alive/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>