169 lines
6.8 KiB
HTML
169 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>i hate javascript</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>
|
|
<!-- 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">
|
|
<p style="font-family: 'Quicksand'">About content here</p>
|
|
</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 (they will ignore if already hidden)
|
|
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
|
|
|
|
// 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> |