Add server dashboard card and enhance animations for improved user interaction
This commit is contained in:
parent
9cf2790012
commit
5cbdfd2070
1
icons/ubuntu.svg
Normal file
1
icons/ubuntu.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid"><path d="M32 16c0 8.836-7.164 16-16 16S0 24.836 0 16 7.164 0 16 0s16 7.164 16 16z" fill="#dd4814"/><path d="M5.12 13.864c-1.18 0-2.137.956-2.137 2.137s.956 2.136 2.137 2.136S7.257 17.18 7.257 16 6.3 13.864 5.12 13.864zm15.252 9.71c-1.022.6-1.372 1.896-.782 2.917s1.895 1.372 2.917.782 1.372-1.895.782-2.917-1.896-1.37-2.917-.782zM9.76 16a6.23 6.23 0 0 1 2.653-5.105L10.852 8.28a9.3 9.3 0 0 0-3.838 5.394C7.69 14.224 8.12 15.06 8.12 16s-.432 1.776-1.106 2.326c.577 2.237 1.968 4.146 3.838 5.395l1.562-2.616A6.23 6.23 0 0 1 9.761 16zM16 9.76a6.24 6.24 0 0 1 6.215 5.687l3.044-.045a9.25 9.25 0 0 0-2.757-6.019c-.812.307-1.75.26-2.56-.208a2.99 2.99 0 0 1-1.461-2.118C17.7 6.84 16.86 6.72 16 6.72c-1.477 0-2.873.347-4.113.96l1.484 2.66c.8-.372 1.69-.58 2.628-.58zm0 12.48c-.94 0-1.83-.21-2.628-.58l-1.484 2.66c1.24.614 2.636.96 4.113.96a9.28 9.28 0 0 0 2.479-.338c.14-.858.65-1.648 1.46-2.118s1.75-.514 2.56-.207a9.25 9.25 0 0 0 2.757-6.019l-3.045-.045A6.24 6.24 0 0 1 16 22.24zm4.372-13.813c1.022.6 2.328.24 2.917-.78s.24-2.328-.78-2.918-2.328-.24-2.918.783-.24 2.327.782 2.917z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
24
index.php
24
index.php
@ -26,6 +26,14 @@ $projects = [
|
||||
"color" => "#0082c9",
|
||||
"external" => true
|
||||
],
|
||||
[
|
||||
"title" => "Server Dashboard",
|
||||
"description" => "Server-Verwaltung mit Cockpit",
|
||||
"url" => "https://fabianschieder.com:9090",
|
||||
"logo" => "/icons/ubuntu.svg",
|
||||
"color" => "#E95420",
|
||||
"external" => true
|
||||
],
|
||||
],
|
||||
"schule" => [
|
||||
[
|
||||
@ -134,6 +142,22 @@ $projects = [
|
||||
<p>© <?= date('Y') ?> Fabian Schieder — Alle Rechte vorbehalten.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.card').forEach(card => {
|
||||
card.addEventListener('click', function (e) {
|
||||
const circle = document.createElement('span');
|
||||
const diameter = Math.max(this.clientWidth, this.clientHeight);
|
||||
const rect = this.getBoundingClientRect();
|
||||
circle.classList.add('ripple');
|
||||
circle.style.width = circle.style.height = diameter + 'px';
|
||||
circle.style.left = (e.clientX - rect.left - diameter / 2) + 'px';
|
||||
circle.style.top = (e.clientY - rect.top - diameter / 2) + 'px';
|
||||
this.querySelector('.ripple')?.remove();
|
||||
this.appendChild(circle);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
74
style.css
74
style.css
@ -34,21 +34,41 @@ body {
|
||||
}
|
||||
|
||||
/* ===== BACKGROUND GLOW ===== */
|
||||
@keyframes bgShift {
|
||||
0% { opacity: 1; transform: scale(1) translate(0, 0); }
|
||||
33% { opacity: 0.85; transform: scale(1.08) translate(2%, 3%); }
|
||||
66% { opacity: 0.9; transform: scale(0.97) translate(-3%, -2%); }
|
||||
100% { opacity: 1; transform: scale(1) translate(0, 0); }
|
||||
}
|
||||
|
||||
.background-blur {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 40% at 20% 10%, rgba(99, 102, 241, 0.15), transparent),
|
||||
radial-gradient(ellipse 50% 40% at 80% 80%, rgba(14, 165, 233, 0.10), transparent);
|
||||
radial-gradient(ellipse 60% 40% at 20% 10%, rgba(99, 102, 241, 0.18), transparent),
|
||||
radial-gradient(ellipse 50% 40% at 80% 80%, rgba(14, 165, 233, 0.13), transparent),
|
||||
radial-gradient(ellipse 40% 30% at 60% 40%, rgba(168, 85, 247, 0.08), transparent);
|
||||
pointer-events: none;
|
||||
animation: bgShift 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ===== HEADER ===== */
|
||||
@keyframes fadeDown {
|
||||
from { opacity: 0; transform: translateY(-20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 3.5rem;
|
||||
margin-top: 2rem;
|
||||
animation: fadeDown 0.7s ease both;
|
||||
}
|
||||
|
||||
@keyframes avatarPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 0 20px rgba(99, 102, 241, 0.1); }
|
||||
50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.12), 0 0 40px rgba(99, 102, 241, 0.2); }
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@ -64,6 +84,14 @@ header {
|
||||
margin: 0 auto 1.2rem;
|
||||
letter-spacing: 1px;
|
||||
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
|
||||
animation: avatarPulse 3s ease-in-out infinite;
|
||||
transition: transform 0.3s ease;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.avatar:hover {
|
||||
transform: scale(1.08) rotate(6deg);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -93,12 +121,23 @@ main {
|
||||
}
|
||||
|
||||
/* ===== CATEGORY SECTION ===== */
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(24px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
animation: fadeUp 0.6s ease both;
|
||||
}
|
||||
|
||||
section:nth-child(1) { animation-delay: 0.15s; }
|
||||
section:nth-child(2) { animation-delay: 0.30s; }
|
||||
section:nth-child(3) { animation-delay: 0.45s; }
|
||||
section:nth-child(4) { animation-delay: 0.60s; }
|
||||
|
||||
.category-title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
@ -146,13 +185,13 @@ section {
|
||||
|
||||
.card:hover {
|
||||
background: var(--surface-hover);
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
|
||||
border-color: color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
|
||||
transform: translateY(-3px) scale(1.01);
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--accent, #6366f1) 20%, transparent);
|
||||
}
|
||||
|
||||
.card:hover::before {
|
||||
opacity: 0.07;
|
||||
opacity: 0.10;
|
||||
}
|
||||
|
||||
.card:active {
|
||||
@ -172,11 +211,12 @@ section {
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent, #6366f1);
|
||||
transition: background var(--transition);
|
||||
transition: background var(--transition), transform var(--transition);
|
||||
}
|
||||
|
||||
.card:hover .card-icon {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
transform: scale(1.1) rotate(-4deg);
|
||||
}
|
||||
|
||||
.card-logo {
|
||||
@ -240,6 +280,12 @@ footer {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
animation: fadeUp 0.6s ease 0.7s both;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
footer:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@ -253,5 +299,19 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RIPPLE ===== */
|
||||
.card .ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: ripple-anim 0.55s linear;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes ripple-anim {
|
||||
to { transform: scale(4); opacity: 0; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user