improve ping testing

This commit is contained in:
Aidan 2024-12-19 22:32:08 -05:00
parent 223e0f7f09
commit 353c0d35fb
No known key found for this signature in database
GPG Key ID: 1773A01F0EFE4FC1
2 changed files with 22 additions and 9 deletions

View File

@ -47,6 +47,9 @@ async function testPing() {
oldText = status1.textContent; oldText = status1.textContent;
status1.textContent = oldText + ' [FASTEST]'; status1.textContent = oldText + ' [FASTEST]';
} }
document.getElementById('loading').classList.add('hidden');
document.getElementById('content').classList.remove('hidden');
} }
window.onload = () => { window.onload = () => {

View File

@ -13,20 +13,30 @@
<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux"> <body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
<%- include('shards/header.ejs', { req: req }) %> <%- include('shards/header.ejs', { req: req }) %>
<div id="loading" class="flex flex-col items-center justify-center h-[40vh] p-6">
<i class="fas fa-spinner fa-spin text-5xl mb-4"></i>
<h1 class="text-2xl font-bold">Testing pings...</h1>
</div>
<header class="flex flex-col items-center justify-center h-[40vh] p-6"> <header class="flex flex-col items-center justify-center h-[40vh] p-6">
<h1 class="text-5xl font-bold mb-2 text-center">Status</h1> <h1 class="text-5xl font-bold mb-2 text-center">Status</h1>
<p class="text-lg text-gray-300 max-w-xl text-center mt-3">Interested in my server uptime? Take a peek!</p> <p class="text-lg text-gray-300 max-w-xl text-center mt-3">Interested in my server uptime? Take a peek!</p>
</header> </header>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4"> <div id="content" class="hidden bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<h3 class="text-2xl font-bold mb-4 text-white">What is this page?</h3> <div>
<p class="text-slate-300 mb-4">This page displays information about the status of my personal servers. This excludes private servers, which are used for projects such as my "home" lab (it's hosted in the cloud).</p> <h3 class="text-2xl font-bold mb-4 text-white">What is this page?</h3>
<p class="text-slate-300 mb-4">Most of these servers are what your computer connects to in order to fetch information, such as the status of the server, or what I'm listening to (see the home page). <p class="text-slate-300 mb-4">This page displays information about the status of my personal servers. This excludes private servers, which are used for projects such as my "home" lab (it's hosted in the cloud).</p>
<h3 class="text-2xl font-bold mb-4 text-white">Status | Website</h3> <p class="text-slate-300 mb-4">Most of these servers are what your computer connects to in order to fetch information, such as the status of the server, or what I'm listening to (see the home page).</p>
<p class="text-slate-300 mb-4"><span class="text-green-500 font-bold" id="website">[ONLINE - LOADING ms]</span> aidxn.fun/website.aidxn.fun (Oracle Cloud - Germany)</p> <h3 class="text-2xl font-bold mb-4 text-white">Status | Website</h3>
<h3 class="text-2xl font-bold mb-4 text-white">Status | Backend</h3> <p class="text-slate-300 mb-4"><span class="text-green-500 font-bold" id="website">[ONLINE - LOADING ms]</span> aidxn.fun/website.aidxn.fun (Oracle Cloud - Germany)</p>
<p class="text-slate-300 mb-4"><span class="text-gray-500 font-bold" id="status1">[UNKNOWN - LOADING ms]</span> kantor.aidxn.fun (Oracle Cloud - Germany - backend server)</p> <h3 class="text-2xl font-bold mb-4 text-white">Status | Backend</h3>
<p class="text-slate-300 mb-4"><span class="text-gray-500 font-bold" id="status1">[UNKNOWN - LOADING ms]</span> kantor.aidxn.fun (Oracle Cloud - Germany - backend server)</p>
</div>
</div> </div>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/status.js"></script> <script src="js/status.js"></script>
<%- include('shards/footer.ejs') %> <%- include('shards/footer.ejs') %>
</body>
</html>