full on update with new npm and instructions and maintenance update
This commit is contained in:
dvorakmortonxd
parent
dc13b98261
commit
b0bd9cc7b3
10 changed files with 2392 additions and 1281 deletions
|
|
@ -19,20 +19,24 @@ export default function ServiceButton({ url, checkUrl, className, icon, name, de
|
|||
checkStatus();
|
||||
}, [url, checkUrl]);
|
||||
|
||||
const statusColor = status === 'up' ? '#4ade80' : status === 'down' ? '#ef4444' : '#9ca3af';
|
||||
const statusGlow = status === 'up' ? 'rgba(74, 222, 128, 0.9)' : status === 'down' ? 'rgba(239, 68, 68, 0.9)' : 'transparent';
|
||||
const statusLabel = status === 'up' ? 'Active' : status === 'down' ? 'Dead' : 'Checking...';
|
||||
const isFriend = className === 'friend';
|
||||
|
||||
return (
|
||||
<a href={url} target="_blank" rel="noopener noreferrer" className={`service-button ${className}`} style={{ position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '8px',
|
||||
right: '8px',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: status === 'up' ? '#4ade80' : status === 'down' ? '#ef4444' : '#9ca3af',
|
||||
boxShadow: status === 'up' ? '0 0 5px #4ade80' : status === 'down' ? '0 0 5px #ef4444' : 'none',
|
||||
transition: 'all 0.3s ease'
|
||||
}} title={status === 'up' ? 'Active' : status === 'down' ? 'Dead' : 'Checking...'} />
|
||||
<span className="service-icon">{icon}</span>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`service-button ${className}`}
|
||||
style={{ position: 'relative', '--status-color': statusColor, '--status-glow': statusGlow } as React.CSSProperties}
|
||||
title={statusLabel}
|
||||
>
|
||||
<span className="service-icon-wrap">
|
||||
{isFriend && <span className="service-status-dot" />}
|
||||
<span className="service-icon">{icon}</span>
|
||||
</span>
|
||||
<span className="service-text">
|
||||
<span className="service-name">
|
||||
{name}
|
||||
|
|
|
|||
|
|
@ -342,6 +342,10 @@ body {
|
|||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.services-buttons.services-main {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
|
||||
.service-button {
|
||||
display: flex;
|
||||
|
|
@ -387,12 +391,51 @@ body {
|
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.service-icon-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.service-status-dot {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 1.25rem;
|
||||
transition: transform 0.15s ease;
|
||||
transition: transform 0.15s ease, filter 0.3s ease;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
filter: none;
|
||||
height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
filter: drop-shadow(0 0 4px var(--status-glow)) drop-shadow(0 0 10px var(--status-glow));
|
||||
}
|
||||
|
||||
.service-button.friend .service-status-dot {
|
||||
z-index: 2;
|
||||
top: auto;
|
||||
left: auto;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: none;
|
||||
background: var(--status-color);
|
||||
box-shadow: 0 0 5px var(--status-color);
|
||||
}
|
||||
|
||||
.service-button:hover .service-icon {
|
||||
|
|
@ -407,6 +450,7 @@ body {
|
|||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.friend-icon {
|
||||
|
|
@ -436,7 +480,6 @@ body {
|
|||
.service-button.jellyfin:hover .service-name { color: var(--purple); }
|
||||
.service-button.pterodactyl:hover .service-name { color: var(--red); }
|
||||
.service-button.funkwhale:hover .service-name { color: var(--darkpink); }
|
||||
.service-button.mailcow:hover .service-name { color: var(--accent); }
|
||||
.service-button.searxng:hover .service-name { color: var(--aqua); }
|
||||
.service-button.convertx:hover .service-name { color: var(--gray); }
|
||||
.service-button.gitdxd:hover .service-name { color: var(--purple); }
|
||||
|
|
@ -446,7 +489,6 @@ body {
|
|||
.service-button.jellyfin { border-color: rgba(168, 153, 132, 0.1); }
|
||||
.service-button.pterodactyl { border-color: rgba(168, 153, 132, 0.1); }
|
||||
.service-button.funkwhale { border-color: rgba(255, 0, 67, 0.1); }
|
||||
.service-button.mailcow { border-color: rgba(168, 153, 132, 0.1); }
|
||||
.service-button.searxng { border-color: rgba(168, 153, 132, 0.1); }
|
||||
.service-button.convertx { border-color: rgba(168, 153, 132, 0.1); }
|
||||
.service-button.gitdxd { border-color: rgba(255, 0, 67, 0.1); }
|
||||
|
|
@ -792,6 +834,10 @@ body {
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.services-buttons.services-main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.friends-buttons {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -352,7 +352,7 @@ export default function Home() {
|
|||
</p>
|
||||
<div style={{ color: '#a3a3a3' }}>
|
||||
<p>
|
||||
I'm currently hosting an SMP (dm me on discord). Also I'm pretty much cooking daily, because im bulking through out the non-summer seasons. And me and my pal <span className="text-purple-500"><a href="https://skopec.dev">Pepa</a></span> are working on an education app so we can study more efficiently, It's called <span className="text-purple-500"><a href="https://git.dvorakmortonxd.dev/edu/maturita.c">maturita.c</a></span>!
|
||||
I'm currently hosting an SMP (dm me on discord). Also I'm pretty much cooking daily, because im bulking through out the non-summer seasons. And me and my pal <span className="text-purple-500"><a href="https://skopec.dev">Pepa</a></span> are working on an education app so we can study more efficiently, It's called <span className="text-purple-500"><a href="https://git.dvorakmortonxd.dev/edu/maturita.c">maturita.c</a></span>!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -380,7 +380,7 @@ export default function Home() {
|
|||
<div className="services-section">
|
||||
<div className="tui-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>SERVICES.HTML</span>
|
||||
<div className="services-buttons">
|
||||
<div className="services-buttons services-main">
|
||||
<ServiceButton
|
||||
url="https://proxmox.dvorakmortonxd.dev/"
|
||||
className="proxmox"
|
||||
|
|
@ -421,14 +421,6 @@ export default function Home() {
|
|||
desc="Music Streaming"
|
||||
access="private"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://mailcow.dvorakmortonxd.dev/"
|
||||
className="mailcow"
|
||||
icon="💌"
|
||||
name="Mailcow"
|
||||
desc="Email Server"
|
||||
access="private"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://search.dvorakmortonxd.dev/"
|
||||
className="searxng"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue