McPringle/fitpub
1
0
Fork 0
Code Issues 24 Pull requests 6 Projects Releases Packages Wiki Activity Actions

Stuff

Browse source
This commit is contained in:
Tim Zöller 2025-12-04 20:23:39 +01:00
parent 7b575ff7e4
commit 74137a3395
1 changed files with 101 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

398
src/main/resources/static/css/fitpub.css
View file

@ -1,166 +1,59 @@
/* FitPub - ULTRA 80s Aerobic Neon Style */ /* FitPub - 80s Aerobic Style (Static Edition) */
:root { :root {
--primary-color: #ff00ff; /* Hot Magenta */ --neon-pink: #ff1493;
--secondary-color: #00ffff; /* Cyan */ --neon-purple: #9d00ff;
--danger-color: #ff1493; /* Deep Pink */ --neon-cyan: #00ffff;
--warning-color: #ffff00; /* Electric Yellow */ --neon-yellow: #ffff00;
--dark-color: #0a0015; /* Ultra Deep Purple */ --neon-orange: #ff6600;
--light-color: #f0f0ff; /* Light Lavender */ --neon-green: #39ff14;
--accent-orange: #ff6600; /* Neon Orange */ --neon-blue: #00d4ff;
--accent-lime: #ccff00; /* Lime Green */ --primary-color: var(--neon-pink);
--neon-pink: #ff10f0; /* Hot Neon Pink */ --secondary-color: var(--neon-cyan);
--neon-blue: #10d0ff; /* Electric Blue */ --danger-color: #dc3545;
--neon-green: #39ff14; /* Radioactive Green */ --warning-color: #ffc107;
--neon-purple: #bc13fe; /* Purple Haze */ --dark-color: #1a0033;
--light-color: #f8f9fa;
--accent-orange: var(--neon-orange);
--accent-lime: var(--neon-green);
--border-radius: 0.5rem; --border-radius: 0.5rem;
} }
/* Animated neon background */ /* Base styles */
@keyframes neon-pulse {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 5px var(--primary-color),
0 0 10px var(--primary-color),
0 0 15px var(--primary-color);
}
50% {
box-shadow: 0 0 10px var(--secondary-color),
0 0 20px var(--secondary-color),
0 0 30px var(--secondary-color);
}
}
@keyframes rainbow-border {
0% { border-color: var(--primary-color); }
25% { border-color: var(--secondary-color); }
50% { border-color: var(--accent-orange); }
75% { border-color: var(--accent-lime); }
100% { border-color: var(--primary-color); }
}
/* Base styles with animated gradient */
body { body {
font-family: 'Arial Black', 'Impact', -apple-system, BlinkMacSystemFont, sans-serif; font-family: 'Arial Black', 'Arial Bold', sans-serif;
color: var(--dark-color); color: var(--dark-color);
background: linear-gradient( background: #ffffff;
135deg,
#ff00ff 0%, /* Magenta */
#00ffff 10%, /* Cyan */
#ffff00 20%, /* Yellow */
#ff00ff 30%, /* Magenta */
#00ff00 40%, /* Green */
#0000ff 50%, /* Blue */
#ff00ff 60%, /* Magenta */
#ff6600 70%, /* Orange */
#00ffff 80%, /* Cyan */
#ff00ff 90%, /* Magenta */
#ccff00 100% /* Lime */
);
background-size: 400% 400%;
animation: neon-pulse 15s ease infinite;
background-attachment: fixed;
} }
/* Neon overlay pattern */ /* Navigation */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(255, 255, 255, 0.03) 10px,
rgba(255, 255, 255, 0.03) 20px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 10px,
rgba(0, 255, 255, 0.02) 10px,
rgba(0, 255, 255, 0.02) 20px
);
pointer-events: none;
z-index: 1;
}
/* Add sparkle effect */
@keyframes sparkle {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
body::after {
content: '✨';
position: fixed;
font-size: 2rem;
animation: sparkle 2s infinite;
pointer-events: none;
z-index: 9999;
}
/* Navigation with MEGA NEON */
.navbar { .navbar {
background: rgba(10, 0, 21, 0.95) !important; background: linear-gradient(135deg, var(--dark-color) 0%, #2d0052 100%) !important;
border-bottom: 3px solid var(--primary-color); border-bottom: 3px solid var(--neon-pink);
box-shadow: 0 5px 20px rgba(255, 0, 255, 0.5), box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
0 5px 40px rgba(0, 255, 255, 0.3);
animation: rainbow-border 3s linear infinite;
} }
.navbar-brand { .navbar-brand {
font-weight: 900; font-weight: 900;
font-size: 2rem; font-size: 1.75rem;
background: linear-gradient( text-transform: uppercase;
90deg, letter-spacing: 0.1em;
var(--primary-color) 0%, background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-cyan) 100%);
var(--secondary-color) 25%,
var(--accent-orange) 50%,
var(--accent-lime) 75%,
var(--primary-color) 100%
);
background-size: 200% auto;
animation: neon-pulse 3s linear infinite;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
filter: drop-shadow(0 0 10px var(--primary-color))
drop-shadow(0 0 20px var(--secondary-color));
text-transform: uppercase;
letter-spacing: 0.1em;
}
.navbar-brand:hover {
animation: glow 0.5s ease-in-out infinite,
neon-pulse 3s linear infinite;
} }
.nav-link { .nav-link {
color: var(--secondary-color) !important; color: rgba(255, 255, 255, 0.95) !important;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
text-shadow: 0 0 10px var(--secondary-color); letter-spacing: 0.05em;
transition: all 0.3s ease; transition: color 0.2s ease;
} }
.nav-link:hover { .nav-link:hover {
color: var(--primary-color) !important; color: var(--neon-cyan) !important;
text-shadow: 0 0 20px var(--primary-color),
0 0 30px var(--primary-color);
transform: scale(1.1);
} }
/* Map container */ /* Map container */
@ -175,125 +68,91 @@ body::after {
height: 600px; height: 600px;
} }
/* Cards with ULTRA NEON GLOW */ /* Cards */
.card { .card {
background: rgba(255, 255, 255, 0.98); background: white;
border: 3px solid var(--primary-color); border: 3px solid var(--neon-pink);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: 0 0 20px rgba(255, 0, 255, 0.4), box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
0 0 40px rgba(0, 255, 255, 0.2), transition: box-shadow 0.2s ease;
inset 0 0 20px rgba(255, 0, 255, 0.05);
transition: all 0.3s ease;
animation: rainbow-border 5s linear infinite;
} }
.card:hover { .card:hover {
transform: translateY(-5px) scale(1.01); box-shadow: 0 8px 20px rgba(255, 20, 147, 0.4);
box-shadow: 0 0 30px rgba(255, 0, 255, 0.6),
0 0 60px rgba(0, 255, 255, 0.4),
0 10px 40px rgba(255, 0, 255, 0.3),
inset 0 0 30px rgba(255, 0, 255, 0.1);
border-width: 4px;
} }
.card-header { .card-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important; background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
color: white !important; color: white !important;
font-weight: 900; font-weight: 900;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), border-bottom: 3px solid var(--neon-orange);
0 0 20px rgba(255, 255, 255, 0.3);
border-bottom: 3px solid var(--accent-orange);
} }
/* Activity cards */ /* Activity cards */
.activity-card { .activity-card {
transition: all 0.3s ease; transition: box-shadow 0.2s ease;
border: 3px solid transparent; border: 3px solid var(--neon-cyan);
background: linear-gradient(white, white) padding-box, box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
linear-gradient(135deg,
var(--primary-color) 0%,
var(--secondary-color) 25%,
var(--accent-orange) 50%,
var(--accent-lime) 75%,
var(--primary-color) 100%
) border-box;
animation: rainbow-border 4s linear infinite;
} }
.activity-card:hover { .activity-card:hover {
box-shadow: 0 0 30px rgba(255, 0, 255, 0.6), box-shadow: 0 8px 20px rgba(0, 255, 255, 0.4);
0 0 60px rgba(0, 255, 255, 0.4);
transform: translateY(-8px) rotate(-1deg) scale(1.02);
} }
.activity-type-badge { .activity-type-badge {
display: inline-block; display: inline-block;
padding: 0.25rem 0.75rem; padding: 0.35rem 0.85rem;
border-radius: 1rem; border-radius: 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 2px solid currentColor;
} }
.activity-type-run { .activity-type-run {
background: linear-gradient(135deg, #ff00ff 0%, #ff1493 100%); background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
color: #ffffff; color: #ffffff;
font-weight: 700;
} }
.activity-type-ride { .activity-type-ride {
background: linear-gradient(135deg, #ffff00 0%, #ff6600 100%); background: linear-gradient(135deg, var(--neon-yellow) 0%, var(--neon-orange) 100%);
color: #1a0033; color: var(--dark-color);
font-weight: 700;
} }
.activity-type-hike { .activity-type-hike {
background: linear-gradient(135deg, #00ffff 0%, #ccff00 100%); background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-green) 100%);
color: #1a0033; color: var(--dark-color);
font-weight: 700;
} }
/* Metrics display - HYPER NEON */ /* Metrics display */
.metric-card { .metric-card {
background: linear-gradient(135deg, background: linear-gradient(135deg, #ffffff 0%, #fff0ff 100%);
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 0, 255, 0.05) 50%,
rgba(0, 255, 255, 0.05) 100%
);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
text-align: left; text-align: left;
border: 2px solid var(--primary-color); border: 2px solid var(--neon-pink);
border-left: 5px solid var(--primary-color); border-left: 6px solid var(--neon-orange);
box-shadow: 0 0 15px rgba(255, 0, 255, 0.3), box-shadow: 0 4px 8px rgba(255, 20, 147, 0.2);
inset 0 0 10px rgba(255, 0, 255, 0.1); transition: box-shadow 0.2s ease;
transition: all 0.3s ease;
animation: rainbow-border 6s linear infinite;
} }
.metric-card:hover { .metric-card:hover {
border-left-width: 8px; box-shadow: 0 6px 16px rgba(255, 20, 147, 0.3);
box-shadow: 0 0 25px rgba(255, 0, 255, 0.6),
0 0 50px rgba(0, 255, 255, 0.4),
inset 0 0 20px rgba(255, 0, 255, 0.2);
transform: translateY(-5px) scale(1.05) rotate(1deg);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(255, 0, 255, 0.1) 50%,
rgba(0, 255, 255, 0.1) 100%
);
} }
.metric-card .fw-bold { .metric-card .fw-bold {
text-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
font-weight: 900 !important; font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 0.05em;
} }
.metric-value { .metric-value {
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 900;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@ -303,31 +162,31 @@ body::after {
font-size: 0.875rem; font-size: 0.875rem;
color: var(--dark-color); color: var(--dark-color);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.08em;
font-weight: 600; font-weight: 700;
} }
/* File upload area */ /* File upload area */
.file-upload-area { .file-upload-area {
border: 3px dashed var(--primary-color); border: 4px dashed var(--neon-cyan);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 3rem 2rem; padding: 3rem 2rem;
text-align: center; text-align: center;
transition: border-color 0.2s, background-color 0.2s; transition: border-color 0.2s, background-color 0.2s;
cursor: pointer; cursor: pointer;
background: linear-gradient(135deg, #ffffff 0%, var(--light-color) 100%); background: linear-gradient(135deg, #ffffff 0%, #f0ffff 100%);
} }
.file-upload-area:hover, .file-upload-area:hover,
.file-upload-area.drag-over { .file-upload-area.drag-over {
border-color: var(--secondary-color); border-color: var(--neon-pink);
background: linear-gradient(135deg, var(--light-color) 0%, #fff0ff 100%); background: linear-gradient(135deg, #fff0ff 0%, #f0ffff 100%);
box-shadow: 0 0 20px rgba(255, 0, 255, 0.3); box-shadow: 0 4px 12px rgba(255, 20, 147, 0.2);
} }
.file-upload-icon { .file-upload-icon {
font-size: 3rem; font-size: 3rem;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-orange) 100%); background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-cyan) 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@ -362,13 +221,14 @@ body::after {
/* Timeline Cards */ /* Timeline Cards */
.timeline-card { .timeline-card {
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
border: 2px solid transparent; border: 3px solid transparent;
background: linear-gradient(white, white) padding-box, background: linear-gradient(white, white) padding-box,
linear-gradient(135deg, var(--accent-orange), var(--accent-lime)) border-box; linear-gradient(135deg, var(--neon-orange) 0%, var(--neon-green) 100%) border-box;
box-shadow: 0 4px 8px rgba(255, 102, 0, 0.2);
} }
.timeline-card:hover { .timeline-card:hover {
box-shadow: 0 8px 24px rgba(255, 102, 0, 0.4), 0 0 40px rgba(204, 255, 0, 0.2); box-shadow: 0 8px 16px rgba(255, 102, 0, 0.3);
} }
.timeline-card .user-avatar { .timeline-card .user-avatar {
@ -527,16 +387,6 @@ body::after {
color: #d1d5db; color: #d1d5db;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
display: inline-block; display: inline-block;
animation: float-gentle 3s ease-in-out infinite;
}
@keyframes float-gentle {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
} }
.empty-state-title { .empty-state-title {
@ -604,123 +454,77 @@ body::after {
} }
} }
/* 🌈 ULTRA MEGA NEON BUTTONS 🌈 */ /* Buttons */
.btn { .btn {
font-weight: 900; font-weight: 900;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.08em;
border-width: 3px; border-width: 3px;
transition: all 0.3s ease; transition: all 0.2s ease;
position: relative;
overflow: hidden;
} }
.btn::before { .btn:hover {
content: ''; transform: translateY(-2px);
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
width: 300px;
height: 300px;
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--neon-purple) 100%) !important; background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
border-color: var(--primary-color) !important; border-color: var(--neon-pink) !important;
color: white !important; color: white !important;
box-shadow: 0 0 20px rgba(255, 0, 255, 0.5), box-shadow: 0 4px 12px rgba(255, 20, 147, 0.4);
0 0 40px rgba(255, 0, 255, 0.3);
} }
.btn-primary:hover { .btn-primary:hover {
background: linear-gradient(135deg, var(--neon-purple) 0%, var(--primary-color) 100%) !important; box-shadow: 0 6px 20px rgba(255, 20, 147, 0.5);
box-shadow: 0 0 30px rgba(255, 0, 255, 0.8),
0 0 60px rgba(255, 0, 255, 0.5),
0 0 90px rgba(255, 0, 255, 0.3);
transform: scale(1.1) translateY(-3px);
} }
.btn-success { .btn-success {
background: linear-gradient(135deg, var(--neon-green) 0%, #00ff00 100%) !important; background: linear-gradient(135deg, var(--neon-green) 0%, var(--neon-cyan) 100%) !important;
border-color: var(--neon-green) !important; border-color: var(--neon-green) !important;
color: var(--dark-color) !important; color: var(--dark-color) !important;
box-shadow: 0 0 20px rgba(57, 255, 20, 0.5); box-shadow: 0 4px 12px rgba(57, 255, 20, 0.4);
font-weight: 900;
} }
.btn-success:hover { .btn-success:hover {
box-shadow: 0 0 40px rgba(57, 255, 20, 0.8), box-shadow: 0 6px 20px rgba(57, 255, 20, 0.5);
0 0 80px rgba(57, 255, 20, 0.4);
transform: scale(1.15) rotate(2deg);
} }
.btn-danger { .btn-danger {
background: linear-gradient(135deg, var(--danger-color) 0%, #ff0000 100%) !important; background: linear-gradient(135deg, #dc3545 0%, #c92333 100%) !important;
border-color: var(--danger-color) !important; border-color: #dc3545 !important;
box-shadow: 0 0 20px rgba(255, 20, 147, 0.5); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
} }
.btn-danger:hover { .btn-danger:hover {
box-shadow: 0 0 40px rgba(255, 20, 147, 0.8), box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
0 0 80px rgba(255, 20, 147, 0.4);
transform: scale(1.15) rotate(-2deg);
} }
.btn-outline-primary { .btn-outline-primary {
border-color: var(--primary-color) !important; border-color: var(--neon-pink) !important;
color: var(--primary-color) !important; color: var(--neon-pink) !important;
border-width: 3px !important; border-width: 3px !important;
background: transparent !important; background: transparent !important;
text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
} }
.btn-outline-primary:hover { .btn-outline-primary:hover {
background: var(--primary-color) !important; background: var(--neon-pink) !important;
color: white !important; color: white !important;
box-shadow: 0 0 30px rgba(255, 0, 255, 0.8),
0 0 60px rgba(255, 0, 255, 0.5);
transform: scale(1.1);
} }
/* Activity Type Badges - NEON EDITION */ /* Headings */
.activity-type-badge {
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.35rem 1rem;
border: 2px solid;
box-shadow: 0 0 15px currentColor;
animation: glow 2s ease-in-out infinite;
}
/* PULSING HEADINGS */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: 900; font-weight: 900;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: var(--dark-color);
} }
h1 { h1 {
background: linear-gradient(90deg, background: linear-gradient(135deg,
var(--primary-color) 0%, var(--neon-pink) 0%,
var(--secondary-color) 25%, var(--neon-cyan) 50%,
var(--accent-orange) 50%, var(--neon-orange) 100%);
var(--accent-lime) 75%,
var(--primary-color) 100%
);
background-size: 200% auto;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
animation: neon-pulse 3s linear infinite;
filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.5));
} }