status box css improvement, changed neko button to title
This commit is contained in:
Quinten0508
parent
9a8690ea68
commit
e873281e98
@ -9,36 +9,34 @@ document.addEventListener('DOMContentLoaded', async function() {
|
||||
const response = await fetch('https://quinten0508.com/api/uptime');
|
||||
const data = await response.json();
|
||||
|
||||
// Clear previous content
|
||||
uptimeElement.innerHTML = '';
|
||||
|
||||
data.forEach(element => {
|
||||
// Create parent div for each pair
|
||||
const pairDiv = document.createElement('div');
|
||||
pairDiv.className = 'uptime-pair';
|
||||
|
||||
// Create div for name
|
||||
const nameDiv = document.createElement('div');
|
||||
nameDiv.className = 'uptime-name-element';
|
||||
|
||||
// Check if there is a specific URL for this monitor name
|
||||
|
||||
if (names.hasOwnProperty(element.monitor_name)) {
|
||||
const url = names[element.monitor_name];
|
||||
nameDiv.innerHTML = `<a href="${url}" class="link" target="_blank">${element.monitor_name}</a>`;
|
||||
} else {
|
||||
nameDiv.textContent = element.monitor_name;
|
||||
}
|
||||
|
||||
// Create div for status
|
||||
|
||||
const statusDiv = document.createElement('div');
|
||||
statusDiv.className = 'uptime-status-element';
|
||||
|
||||
if (element.status === "up") {
|
||||
statusDiv.style.color = "#00b400";
|
||||
} else if (element.status === "down") {
|
||||
statusDiv.style.color = "#b30000";
|
||||
}
|
||||
statusDiv.textContent = element.status;
|
||||
|
||||
// Append name and status divs to pair div
|
||||
|
||||
pairDiv.appendChild(nameDiv);
|
||||
pairDiv.appendChild(statusDiv);
|
||||
|
||||
// Append pair div to uptime container
|
||||
uptimeElement.appendChild(pairDiv);
|
||||
});
|
||||
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
|
||||
<div id="maintitlebox">
|
||||
<h1 id="maintitle" class="box">Quinten's Outpost</h1>
|
||||
<button id="oneko-button" class="button">:3</button>
|
||||
</div>
|
||||
|
||||
<div id="subtitlebox">
|
||||
@ -67,14 +68,11 @@
|
||||
|
||||
<div class="box">
|
||||
<h3 style="padding-bottom: 1rem;">Status</h3>
|
||||
<h5 style="color: red;">TEMPORARY DOWNTIME</h5>
|
||||
<p>Accidentally nuked all 700 server configuration files, expect wonky behaviour across services while i figure this out...</p>
|
||||
<div id="uptime"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box">
|
||||
<button id="oneko-button" class="button">Click me :3</button>
|
||||
<h3>titleee</h3>
|
||||
<h5>caption</h5>
|
||||
<p> this text will automatically fill up the box and has decent spacing?? </p>
|
||||
|
||||
158
style.css
158
style.css
@ -35,24 +35,24 @@
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
html {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 1200px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 790px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 450px) {
|
||||
@media (max-width: 700px) {
|
||||
html {
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
#subtitlebox{
|
||||
height: 6rem !important;
|
||||
@ -80,7 +80,7 @@
|
||||
ideas
|
||||
* navbar as vertical element on left side
|
||||
* status bar under title for lastfm, mood?, misc
|
||||
* services uptime - uptime kuma integration ---- sad, no api or anything for kuma...
|
||||
* services uptime - uptime kuma integration ---- sad, no api or anything for kuma... NVM WE DID IT LMFAO
|
||||
* socials/links/platforms in first right-aligned box
|
||||
** wont work well on mobile, instead just attach it under title within same box?
|
||||
* left side of that box as bio
|
||||
@ -134,61 +134,6 @@ body {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#maintitlebox {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#maintitle {
|
||||
font-size: 3.5rem;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
#subtitlebox {
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
height: 4rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#links {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.linkbox {
|
||||
margin-right: 1rem;
|
||||
background: #000;
|
||||
padding: 0.5rem;
|
||||
|
||||
}
|
||||
#heartbeatbox {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1
|
||||
|
||||
}
|
||||
#heartbeat-time {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #E9E9E9;
|
||||
text-decoration: none;
|
||||
@ -252,6 +197,73 @@ body {
|
||||
}
|
||||
|
||||
|
||||
|
||||
#maintitlebox {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
position: relative; /* for oneko-button "inside" */
|
||||
}
|
||||
|
||||
#maintitle {
|
||||
font-size: 3.5rem;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#oneko-button {
|
||||
position: absolute;
|
||||
top: -1.5rem; /* adjust for margin */
|
||||
right: 0;
|
||||
padding: 0.65rem;
|
||||
}
|
||||
|
||||
|
||||
#subtitlebox {
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
height: 4rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#links {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.linkbox {
|
||||
margin-right: 1rem;
|
||||
background: #000;
|
||||
padding: 0.5rem;
|
||||
|
||||
}
|
||||
#heartbeatbox {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1
|
||||
|
||||
}
|
||||
#heartbeat-time {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -365,24 +377,24 @@ body {
|
||||
}
|
||||
|
||||
|
||||
#uptime {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: left;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uptime-pair {
|
||||
display: flex;
|
||||
border: 1px solid #E9E9E9;
|
||||
padding: 1rem;
|
||||
flex-direction: row;
|
||||
width:16rem;
|
||||
}
|
||||
.uptime-name-element, .uptime-status-element {
|
||||
border: 1px solid red;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.uptime-name-element {
|
||||
flex: 5;
|
||||
}
|
||||
.uptime-status-element {
|
||||
flex: 1;
|
||||
border-left: 1px solid #E9E9E9;
|
||||
}
|
||||
|
||||
/* #uptime-name, #uptime-status {
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user