testing

2024-11-03 22:39:38 +01:00 · 2024-11-03 22:39:38 +01:00 · 316d66db04
commit 316d66db04
parent 478db8ae0a
4 changed files with 247 additions and 16 deletions
--- a/.gitea/workflows/deploy.yaml
+++ 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'
--- 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);
+}
--- 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() {
                </div>
                </div>
            `;
+      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); } }",
+  );
+});
--- a/index.html
+++ b/index.html
@ -7,16 +7,32 @@
    </head>
    <body>
        <nav class="sidebar">
-            <a href="#about" class="nav-icon">⎮</a>
-            <a href="#projects" class="nav-icon">⎔</a>
-            <a href="#status" class="nav-icon">◈</a>
-            <a href="#contact" class="nav-icon">⊡</a>
+            <a href="#about" class="nav-icon">
+                <span class="icon">⎮</span>
+                <span class="nav-label">ABOUT</span>
+            </a>
+            <a href="#projects" class="nav-icon">
+                <span class="icon">⎔</span>
+                <span class="nav-label">PROJECTS</span>
+            </a>
+            <a href="#status" class="nav-icon">
+                <span class="icon">◈</span>
+                <span class="nav-label">STATUS</span>
+            </a>
+            <a href="#contact" class="nav-icon">
+                <span class="icon">⊡</span>
+                <span class="nav-label">CONTACT</span>
+            </a>
        </nav>

        <div class="terminal">
            <section id="about" class="section">
                <div class="header">
-                    <div class="timestamp" id="current-time"></div>
+                    <div class="header-metrics">
+                        <div class="timestamp" id="current-time"></div>
+                        <div class="separator">|</div>
+                        <div class="status-average" id="average-uptime">Initializing...</div>
+                    </div>
                    <div class="location">ZÜRICH, SWITZERLAND</div>
                </div>
                <div class="section-title">ELIA.NETWORK</div>