testing
This commit is contained in:
informaticker
parent
478db8ae0a
commit
316d66db04
39
.gitea/workflows/deploy.yaml
Normal file
39
.gitea/workflows/deploy.yaml
Normal file
@ -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'
|
||||
149
assets/index.css
149
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);
|
||||
}
|
||||
|
||||
@ -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); } }",
|
||||
);
|
||||
});
|
||||
|
||||
24
index.html
24
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="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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user