diff --git a/.gitea/workflows/deploy.yaml b/.gitea/workflows/deploy.yaml
new file mode 100644
index 0000000..ee6fc70
--- /dev/null
+++ b/.gitea/workflows/deploy.yaml
@@ -0,0 +1,39 @@
+name: Deploy
+on:
+ push:
+ branches:
+ - main
+jobs:
+ deploy:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v3
+
+ - name: Setup SSH
+ env:
+ SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+ HOST1: ${{ secrets.HOST1 }}
+ USER: ${{ secrets.USER }}
+ run: |
+ mkdir -p ~/.ssh
+ echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
+ chmod 600 ~/.ssh/id_rsa
+ ssh-keyscan -H $HOST1 >> ~/.ssh/known_hosts
+
+ - name: Deploy to first host
+ env:
+ HOST1: ${{ secrets.HOST1 }}
+ USER: ${{ secrets.USER }}
+ run: |
+ ssh $USER@$HOST1 'rm -rf /var/www/elia.network/html/*'
+ rsync -avz --delete \
+ --exclude '.git*' \
+ ./ $USER@$HOST1:/var/www/elia.network/html/
+
+ - name: Reload Nginx
+ env:
+ HOST1: ${{ secrets.HOST1 }}
+ USER: ${{ secrets.USER }}
+ run: |
+ ssh $USER@$HOST1 'sudo systemctl reload nginx'
diff --git a/assets/index.css b/assets/index.css
index 29eda25..5e4720b 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -2,19 +2,33 @@
--bg-color: #0a0a0a;
--border-color: #2a5a5a;
--text-muted: #88aaaa;
- --text-bright: #c5e5e5;
+ --text-bright: #cef0f0;
--glow-color: rgba(42, 90, 90, 0.4);
}
@keyframes pulse {
0% {
box-shadow: 0 0 5px var(--glow-color);
+ opacity: 0.7;
}
50% {
- box-shadow: 0 0 20px var(--glow-color);
+ box-shadow: 0 0 10px var(--glow-color);
+ opacity: 1;
}
100% {
box-shadow: 0 0 5px var(--glow-color);
+ opacity: 0.7;
+ }
+}
+
+@keyframes slideInBorder {
+ 0% {
+ width: 0;
+ opacity: 0.2;
+ }
+ 100% {
+ width: 100%;
+ opacity: 1;
}
}
@@ -97,9 +111,56 @@ body::before {
color: var(--text-muted);
cursor: pointer;
margin: 20px 0;
+ text-decoration: none;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.nav-icon .icon {
font-size: 24px;
transition: color 0.3s ease;
- text-decoration: none;
+}
+
+.nav-icon .nav-label {
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 10px;
+ opacity: 0;
+ transition:
+ opacity 0.3s ease,
+ transform 0.3s ease;
+ white-space: nowrap;
+ margin-top: 5px;
+ pointer-events: none;
+ color: var(--text-muted);
+}
+
+.nav-icon.active .nav-label {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ color: var(--text-muted);
+}
+
+.nav-icon:hover .nav-label {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+}
+
+.nav-icon:hover .icon {
+ color: var(--text-bright);
+}
+
+.nav-icon.active .icon {
+ color: var(--text-bright);
+}
+
+.nav-icon.active {
+ color: var(--text-bright);
+ position: relative;
}
.nav-icon:hover {
@@ -134,13 +195,14 @@ body::before {
content: "◈";
position: absolute;
left: 0;
+ bottom: 1px;
color: var(--text-bright);
text-shadow: 0 0 10px var(--glow-color);
background: none;
}
.header {
- border-bottom: 1px solid var(--border-color);
+ border-bottom: none;
padding-bottom: 10px;
margin-bottom: 20px;
position: relative;
@@ -159,18 +221,22 @@ body::before {
var(--text-bright),
transparent
);
- animation: pulse 2s infinite;
+ animation:
+ pulse 2s infinite,
+ slideInBorder 1s ease-out;
}
.timestamp {
font-size: 0.9em;
color: var(--text-muted);
font-family: "Courier New", monospace;
+ line-height: 1;
}
.location {
margin-top: 4px;
color: var(--text-muted);
+ padding-bottom: 5px;
}
.entry-list {
@@ -226,11 +292,19 @@ body::before {
bottom: -2px;
left: 0;
width: 100%;
- height: 1px;
- background: var(--text-bright);
+ height: 2px;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ var(--text-bright),
+ var(--text-bright),
+ transparent
+ );
transform: scaleX(0);
transform-origin: right;
- transition: transform 0.3s ease;
+ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+ box-shadow: 0 0 8px var(--glow-color);
+ opacity: 0.8;
}
.entry-link:hover::after {
@@ -246,9 +320,15 @@ body::before {
cursor: pointer;
transition:
border-color 0.3s ease,
- background-color 0.3s ease;
+ background-color 0.3s ease,
+ box-shadow 0.3s ease,
+ transform 0.3s ease;
position: relative;
- background: rgba(42, 90, 90, 0.05);
+ background: linear-gradient(
+ 135deg,
+ rgba(42, 90, 90, 0.1),
+ rgba(42, 90, 90, 0.2)
+ );
clip-path: polygon(
0 0,
98% 0,
@@ -257,12 +337,29 @@ body::before {
2% 100%,
0 calc(100% - 15px)
);
+ transform: translateZ(20px);
+ box-shadow:
+ 0 5px 15px rgba(0, 0, 0, 0.4),
+ 0 10px 20px rgba(42, 90, 90, 0.3),
+ inset 0 1px rgba(255, 255, 255, 0.2),
+ inset -2px -2px 4px rgba(0, 0, 0, 0.5);
+ transform-style: preserve-3d;
+ perspective: 1000px;
+ backdrop-filter: blur(5px);
+ border-left: 3px solid rgba(42, 90, 90, 0.6);
+ border-top: 2px solid rgba(255, 255, 255, 0.15);
}
.project-item:hover,
.status-item:hover {
border-color: var(--text-bright);
background: rgba(42, 90, 90, 0.1);
+ box-shadow:
+ 0 5px 15px rgba(0, 0, 0, 0.3),
+ 0 10px 20px rgba(42, 90, 90, 0.2),
+ inset 0 1px rgba(255, 255, 255, 0.2);
+ transform: translateY(-2px) translateZ(10px);
+ animation: pulse 2s infinite;
}
.project-header {
@@ -272,8 +369,16 @@ body::before {
}
.project-header .entry::before {
- content: "⎔";
+ content: "◈";
color: var(--text-muted);
+ text-shadow: 0 0 5px var(--glow-color);
+ transition: all 0.3s ease;
+}
+
+.project-item:hover .project-header .entry::before {
+ color: var(--text-bright);
+ text-shadow: 0 0 10px var(--glow-color);
+ transform: rotate(45deg);
}
.expand-icon {
@@ -447,3 +552,25 @@ body::before {
font-size: 1em;
}
}
+
+.status-average {
+ font-size: 0.9em;
+ color: var(--text-muted);
+ font-family: "Courier New", monospace;
+ margin-top: 4px;
+ color: var(--text-muted);
+}
+
+.header-metrics {
+ display: flex;
+ align-items: baseline;
+ gap: 10px;
+ color: var(--text-muted);
+ font-size: 0.9em;
+ font-family: "Courier New", monospace;
+ line-height: 1;
+}
+
+.separator {
+ color: var(--border-color);
+}
diff --git a/assets/index.js b/assets/index.js
index 459e5cc..170e25f 100644
--- a/assets/index.js
+++ b/assets/index.js
@@ -1,3 +1,27 @@
+// this is slop. i know. i'm sorry.
+// atleast i'm not a reactfag.
+
+// we add some fancy text typing animation blah blah blah
+function writeoutnavlabel() {
+ const firstNavIcon = document.querySelector('.nav-icon[href="#about"]');
+ const label = firstNavIcon.querySelector(".nav-label");
+ const text = label.textContent;
+ label.textContent = "";
+ label.style.opacity = "1";
+
+ let i = 0;
+ function type() {
+ if (i < text.length) {
+ label.textContent += text.charAt(i);
+ i++;
+ setTimeout(type, 100);
+ }
+ }
+ // why am i using a function inside a function?
+ // i don't know. i'm sorry.
+ type();
+}
+
function updateTime() {
const now = new Date();
const timeString = now
@@ -16,8 +40,19 @@ function updateTime() {
}
updateTime();
+// this is a terrible way to update the time
setInterval(updateTime, 1);
+function calculateAverageUptime(services) {
+ if (!services || services.length === 0) return 0;
+ // did i ever mention that i hate math?
+ const totalUptime = services.reduce(
+ (sum, service) => sum + service.online_24_hours,
+ 0,
+ );
+ return (totalUptime / services.length).toFixed(2);
+}
+
// projects
const projectItems = document.querySelectorAll(".project-item");
projectItems.forEach((item) => {
@@ -103,11 +138,15 @@ function createStatusHTML(services) {
function updateStatus() {
const statusContainer = document.getElementById("status-container");
+ const averageUptimeElement = document.getElementById("average-uptime");
fetch("https://status.elia.network/api/services")
.then((response) => response.json())
.then((data) => {
statusContainer.innerHTML = createStatusHTML(data);
+ const averageUptime = calculateAverageUptime(data);
+ averageUptimeElement.textContent = `UPTIME ${averageUptime}%`;
+
document.querySelectorAll(".status-item").forEach((item) => {
item.addEventListener("click", function () {
const details = this.querySelector(".status-details");
@@ -124,6 +163,7 @@ function updateStatus() {
`;
+ averageUptimeElement.textContent = "UPTIME ERROR";
});
}
@@ -167,3 +207,12 @@ window.addEventListener("scroll", () => {
}
});
});
+
+// dom content event listener
+document.addEventListener("DOMContentLoaded", () => {
+ writeoutnavlabel();
+ console.log(
+ "%cELIA.NETWORK",
+ "color: #2a5a5a; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 4px rgba(42, 90, 90, 0.4), 4px 4px 8px rgba(42, 90, 90, 0.2), 6px 6px 12px rgba(42, 90, 90, 0.1), 0 0 20px rgba(42, 90, 90, 0.3); transform: perspective(1000px) rotateX(20deg) rotateY(-10deg) translateZ(50px); animation: console3d 8s infinite cubic-bezier(0.4, 0, 0.2, 1), glow 2s infinite alternate; @keyframes console3d { 0% { transform: perspective(1000px) rotateX(20deg) rotateY(-10deg) translateZ(50px); } 25% { transform: perspective(1000px) rotateX(-15deg) rotateY(15deg) translateZ(75px); } 50% { transform: perspective(1000px) rotateX(10deg) rotateY(20deg) translateZ(100px); } 75% { transform: perspective(1000px) rotateX(-20deg) rotateY(-15deg) translateZ(75px); } 100% { transform: perspective(1000px) rotateX(20deg) rotateY(-10deg) translateZ(50px); } } @keyframes glow { from { text-shadow: 0 0 20px rgba(42, 90, 90, 0.3), 0 0 40px rgba(42, 90, 90, 0.2); } to { text-shadow: 0 0 40px rgba(42, 90, 90, 0.5), 0 0 80px rgba(42, 90, 90, 0.3); } }",
+ );
+});
diff --git a/index.html b/index.html
index 300a89d..e863fc4 100644
--- a/index.html
+++ b/index.html
@@ -7,16 +7,32 @@