You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
304 lines
13 KiB
304 lines
13 KiB
<!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">
|
|
|
|
<script>
|
|
function toggleMenu() {
|
|
var links = document.querySelectorAll(".nav-bar .links"); // Adjusted to select links inside .nav-bar
|
|
links.forEach(function(link) {
|
|
if (link.style.display === "flex") {
|
|
link.style.display = "none";
|
|
} else {
|
|
link.style.display = "flex";
|
|
}
|
|
});
|
|
|
|
// Toggle the 'active' class for the hamburger icon
|
|
var hamburger = document.getElementById("hamburger");
|
|
// Check if 'animate' class is currently applied
|
|
if (hamburger.classList.contains("animate")) {
|
|
hamburger.classList.remove("animate"); // Remove 'animate' class
|
|
hamburger.classList.add("unanimate"); // Add 'unanimate' class
|
|
} else {
|
|
hamburger.classList.remove("unanimate"); // Remove 'unanimate' class
|
|
hamburger.classList.add("animate"); // Add 'animate' class
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function closeMenu() {
|
|
var linksArray = document.querySelectorAll(".links"); // Select all elements with the class 'links'
|
|
if (window.innerWidth <= 340) { // Close the menus only on small screens
|
|
linksArray.forEach(function(links) {
|
|
links.style.display = "none";
|
|
});
|
|
}
|
|
}
|
|
|
|
// Function to check the screen width and adjust menu visibility
|
|
function checkScreenWidth() {
|
|
var linksArray = document.querySelectorAll(".links");
|
|
linksArray.forEach(function(links) {
|
|
if (window.innerWidth > 340) {
|
|
links.style.display = ""; // Remove any inline display style if screen is wider than 440px
|
|
} else {
|
|
links.style.display = "none"; // Hide the navigation links if screen is narrower than 440px
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add event listener for window resize
|
|
window.addEventListener('resize', checkScreenWidth);
|
|
|
|
// Call checkScreenWidth on initial load
|
|
window.onload = function() {
|
|
checkScreenWidth();
|
|
// Attach closeMenu function to each nav item for small screens
|
|
var navItems = document.querySelectorAll('.nav');
|
|
navItems.forEach(function(item) {
|
|
item.addEventListener('click', closeMenu);
|
|
});
|
|
};
|
|
</script>
|
|
|
|
|
|
<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 class="menu"> <!-- Hide this initially and show on hamburger click -->
|
|
<div id="hamburger" class="hamburger" onclick="toggleMenu()">☰</div> <!-- Hamburger Icon -->
|
|
<a href="javascript:void(0);" class="nav links" onclick="changeContent('Adastra7')">Home</a>
|
|
<a href="javascript:void(0);" class="nav links" onclick="changeContent('Community')">Community</a>
|
|
<a href="javascript:void(0);" class="nav links" onclick="changeContent('Services')">Services</a>
|
|
<a href="javascript:void(0);" class="nav links" onclick="changeContent('About')">About</a>
|
|
<a href="javascript:void(0);" class="nav links" 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="Community" class="content content-div">
|
|
<div class="wrapper">
|
|
<ul class="flex-box cards nocent">
|
|
<li>
|
|
<p>Put like Community tab here</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</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 backbone of our physical servers! crt ensures our services run smoothly and efficiently, maintaining the lifeblood of our operations.</p>
|
|
<p>📡 Though less active on Discord, crt has shifted towards Matrix, expanding our horizons in communication!</p>
|
|
</li>
|
|
<li>
|
|
<h2>Yessiest</h2>
|
|
<p>👨💻 Code wizard alert! Yessiest is the genius programming various things like bots and the 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>Exciting Fiber Upgrade on the Horizon!</h2>
|
|
<p>🚀 Big news! In the first week of May 2024, Adastra7 is set to receive a much-anticipated fiber upgrade. We're leveling up to lightning-fast 10Gbps networking! Please bear with us during this time as there may be some downtime while crt installs the fibers and updates core components to bring you blazing-fast speeds.</p>
|
|
<h3>- crt</h3>
|
|
</li>
|
|
<li>
|
|
<h2>Website Overhaul in Progress!</h2>
|
|
<p>🎨 We're revamping! The Adastra7 website is getting a complete makeover. Moving away from our nostalgic Bootstrap 3 DOS theme, we're crafting a new experience. Stay tuned !</p>
|
|
<h3>- crt</h3>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="Contact" class="content content-div">
|
|
<div class="wrapper">
|
|
<ul class="flex-box cards nocent">
|
|
<li>
|
|
<p>Join our <a href="https://discord.adastra7.net">Discord server</a> to get started ranting about your local ISP's and Cogent</p>
|
|
<p>For quick responses and emergencies text crt on Matrix: <a href="https://matrix.to/#/@m1ka:qwu.ch">@m1ka:qwu.ch</a></p>
|
|
<p>Abuse E-Mail: <a href="mailto:abuse@adastra7.net">abuse@adastra7.net</a></p>
|
|
</li>
|
|
<!-- ich brauche mental dringend hilfe-->
|
|
</ul>
|
|
</div>
|
|
</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>
|