From 5a1223e2ec9659b37288bc1b3e2545d1f8c9c919 Mon Sep 17 00:00:00 2001 From: informaticker Date: Mon, 4 Nov 2024 23:16:45 +0100 Subject: [PATCH] Many new styles. --- assets/index.css | 320 +++++++++++++++++++++++++++++++++++++++-------- index.html | 205 ++++++++++++++++++++---------- 2 files changed, 406 insertions(+), 119 deletions(-) diff --git a/assets/index.css b/assets/index.css index cf70003..fc6b6a5 100644 --- a/assets/index.css +++ b/assets/index.css @@ -529,108 +529,119 @@ body::before { .separator { color: var(--border-color); } + .contact-grid { display: grid; gap: 20px; margin-top: 20px; + max-width: 800px; } + .contact-card { background: linear-gradient( - 135deg, + 145deg, rgba(42, 90, 90, 0.05) 0%, - rgba(42, 90, 90, 0.1) 100% + rgba(42, 90, 90, 0.15) 100% ); border: 1px solid var(--border-color); clip-path: polygon( 0 0, - 95% 0, - 100% 20px, + 98% 0, + 100% 15px, 100% 100%, - 5% 100%, - 0 calc(100% - 20px) + 2% 100%, + 0 calc(100% - 15px) ); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 5px 15px rgba(0, 0, 0, 0.2), + 0 0 30px rgba(42, 90, 90, 0.1), + inset 0 1px rgba(255, 255, 255, 0.1); + position: relative; + backdrop-filter: blur(5px); } + +.contact-card:hover { + transform: translateY(-2px); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.3), + 0 0 40px rgba(42, 90, 90, 0.2), + inset 0 1px rgba(255, 255, 255, 0.2); + border-color: var(--text-bright); +} + .contact-header { - padding: 15px; + padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; + background: rgba(42, 90, 90, 0.1); } + .contact-type { color: var(--text-bright); - font-size: 0.9em; -} -.connection-status { - display: flex; - align-items: center; - font-size: 0.8em; - color: var(--text-muted); -} -.status-dot { - width: 6px; - height: 6px; - background: var(--text-bright); - border-radius: 50%; - margin-right: 8px; - box-shadow: 0 0 8px var(--glow-color); - animation: pulse 2s infinite; + font-size: 1em; + font-weight: bold; + letter-spacing: 1px; + text-transform: uppercase; } + .contact-content { - padding: 15px; + padding: 20px; } + .contact-method { display: flex; align-items: center; - padding: 12px; - margin: 8px 0; + padding: 15px; + margin: 10px 0; text-decoration: none; color: var(--text-muted); - border: 1px solid transparent; - background: rgba(42, 90, 90, 0.1); + background: rgba(42, 90, 90, 0.05); + border-left: 2px solid var(--border-color); transition: all 0.3s ease; - position: relative; - overflow: hidden; } + .contact-method:hover { color: var(--text-bright); - border-color: var(--border-color); - background: rgba(42, 90, 90, 0.2); - transform: translateX(5px); -} -.contact-method::before { - content: ""; - position: absolute; - left: 0; - top: 0; - width: 2px; - height: 100%; - background: var(--text-bright); - box-shadow: 0 0 10px var(--glow-color); - opacity: 0; - transition: opacity 0.3s ease; -} -.contact-method:hover::before { - opacity: 1; + background: rgba(42, 90, 90, 0.15); + border-left: 2px solid var(--text-bright); + padding-left: 20px; } + .method-icon { font-size: 1.2em; margin-right: 15px; color: var(--text-bright); + opacity: 0.8; + transition: opacity 0.3s ease; } + +.contact-method:hover .method-icon { + opacity: 1; +} + .method-details { flex: 1; - display: flex; - flex-direction: column; } + .method-name { font-size: 0.9em; margin-bottom: 4px; + color: var(--text-bright); } + .method-address { font-size: 0.8em; color: var(--text-muted); + transition: color 0.3s ease; } + +.contact-method:hover .method-address { + color: var(--text-bright); +} + .connection-indicator { margin-left: 10px; transition: transform 0.3s ease; @@ -638,6 +649,7 @@ body::before { .contact-method:hover .connection-indicator { transform: translateX(5px); } + @media (max-width: 768px) { .contact-grid { gap: 15px; @@ -656,3 +668,211 @@ body::before { font-size: 0.9em; } } + +.project-grid { + display: grid; + gap: 20px; + margin-top: 20px; + max-width: 800px; +} + +.project-card { + background: linear-gradient( + 145deg, + rgba(42, 90, 90, 0.05) 0%, + rgba(42, 90, 90, 0.15) 100% + ); + border: 1px solid var(--border-color); + clip-path: polygon( + 0 0, + 98% 0, + 100% 15px, + 100% 100%, + 2% 100%, + 0 calc(100% - 15px) + ); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 5px 15px rgba(0, 0, 0, 0.2), + 0 0 30px rgba(42, 90, 90, 0.1), + inset 0 1px rgba(255, 255, 255, 0.1); + position: relative; + backdrop-filter: blur(5px); +} + +.project-card:hover { + transform: translateY(-2px); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.3), + 0 0 40px rgba(42, 90, 90, 0.2), + inset 0 1px rgba(255, 255, 255, 0.2); + border-color: var(--text-bright); +} + +.project-header { + padding: 20px; + border-bottom: 1px solid var(--border-color); + display: flex; + justify-content: space-between; + align-items: center; + background: rgba(42, 90, 90, 0.1); +} + +.project-title { + color: var(--text-bright); + font-size: 1em; + font-weight: bold; + letter-spacing: 1px; +} + +.project-content { + padding: 20px; + max-height: none; + opacity: 1; + transform: none; +} + +.project-description { + color: var(--text-muted); + font-size: 0.9em; + margin-bottom: 15px; + line-height: 1.5; +} + +.project-tech-stack { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 15px; +} + +.tech-tag { + background: rgba(42, 90, 90, 0.2); + padding: 4px 8px; + border-radius: 3px; + font-size: 0.8em; + color: var(--text-muted); +} + +/* Status Grid Styling */ +.status-grid { + display: grid; + gap: 20px; + margin-top: 20px; + max-width: 800px; +} + +.status-card { + background: linear-gradient( + 145deg, + rgba(42, 90, 90, 0.05) 0%, + rgba(42, 90, 90, 0.15) 100% + ); + border: 1px solid var(--border-color); + clip-path: polygon( + 0 0, + 98% 0, + 100% 15px, + 100% 100%, + 2% 100%, + 0 calc(100% - 15px) + ); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 5px 15px rgba(0, 0, 0, 0.2), + 0 0 30px rgba(42, 90, 90, 0.1), + inset 0 1px rgba(255, 255, 255, 0.1); + position: relative; + backdrop-filter: blur(5px); +} + +.status-card:hover { + transform: translateY(-2px); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.3), + 0 0 40px rgba(42, 90, 90, 0.2), + inset 0 1px rgba(255, 255, 255, 0.2); + border-color: var(--text-bright); +} + +.status-header { + padding: 20px; + border-bottom: 1px solid var(--border-color); + display: flex; + justify-content: space-between; + align-items: center; + background: rgba(42, 90, 90, 0.1); +} + +.status-name { + color: var(--text-bright); + font-size: 1em; + font-weight: bold; + letter-spacing: 1px; + display: flex; + align-items: center; + gap: 10px; +} + +.status-content { + padding: 20px; +} + +.status-metrics { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 15px; + margin-top: 10px; +} + +.metric { + background: rgba(42, 90, 90, 0.05); + padding: 10px; + border-left: 2px solid var(--border-color); +} + +.metric-label { + font-size: 0.8em; + color: var(--text-muted); + margin-bottom: 5px; +} + +.metric-value { + font-size: 1.1em; + color: var(--text-bright); +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .project-grid, + .status-grid { + gap: 15px; + } + + .project-header, + .status-header { + padding: 15px; + } + + .project-content, + .status-content { + padding: 15px; + } + + .status-metrics { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .project-header, + .status-header { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .tech-tag { + font-size: 0.75em; + } +} diff --git a/index.html b/index.html index ea9ec14..2ffaf03 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - elia dot network + elia dot network @@ -31,9 +31,11 @@
|
-
Initializing...
+
+ Initializing... +
-
ZÜRICH, SWITZERLAND
+
X-SERVED-AT
ELIA.NETWORK
@@ -103,92 +105,142 @@
+
PROJECTS
- -
-
-
CAS
- + -
-
-

- Open-Source Language Model interface for use in web - browsers. -

-
+
+
+
+
CAS
+
+
+
+ Open-Source Language Model interface for use in + web browsers. +
+
+ JavaScript + LLama +
⎔ GIT → + ⎔ + + Repository + git.elia.network/elia/cas + + → +
-
-
-
-
cchat
- + -
-
-

- Language model interface designed for autonomous - agents that utilize the internet. -

-
+
+
+
cchat
+
+
+
+ Language model interface designed for autonomous + agents that utilize the internet. +
+
+ Python + LLama +
⎔ GIT → + ⎔ + + Repository + git.elia.network/informaticker/cchat + + → +
-
-
-
-
discord-jellyfin-bot
- + -
-
-

- Discord music bot utilizing Jellyfin to play your - own music at crisp 96kbps Opus quality. -

-
+
+
+
+ discord-jellyfin-bot +
+
+
+
+ Discord music bot utilizing Jellyfin to play + your own music at crisp 96kbps Opus quality. +
+
+ Python + Discord + TypeScript +
⎔ GIT → + ⎔ + + Repository + git.elia.network/.../discord-jellyfin-bot + + → +
-
-
-
-
netwatch
- + -
-
-

- Monitor internet connectivity in regions of war and - conflict. -

-
+
+
+
netwatch
+
+
+
+ Monitor internet connectivity in regions of war + and conflict. +
+
+ Python + Networking +
⎔ GIT → -
-
+ ⎔ + + Repository + git.elia.network/elia/netwatch + + → + ⎔ NETWATCH → + ◈ + + Live Instance + netwatch.elia.network + + → + +
@@ -212,19 +264,29 @@
- + ⌘ ALERTS - alerts@elia.network + alerts@elia.network → - + ⌘ NOC - noc@elia.network + noc@elia.network → @@ -240,11 +302,16 @@
- + ⌥ TELEGRAM - @beslikmeister + @beslikmeister →