mocode-software/meldestelle
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix roter valid-error-effekt

Browse Source
This commit is contained in:
stefan
2025-06-05 22:55:39 +02:00
parent 05108d389c
commit a35798c033
9 changed files with 221 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/meldestelle.db
BIN
View File
Binary file not shown.
server/src/main/kotlin/at/mocode/views/NennungView.kt
+140 -14
View File
@@ -35,7 +35,109 @@ class NennungView {
p { +"Turnier-Nr.: ${turnier.number}" } p { +"Turnier-Nr.: ${turnier.number}" }
} }
form(action = "/nennung/${turnier.number}/submit", method = FormMethod.post, classes = "registration-form") { form(
action = "/nennung/${turnier.number}/submit",
method = FormMethod.post,
classes = "registration-form needs-validation"
) {
attributes["onsubmit"] = "return validateForm(this)"
style {
unsafe {
+"""
.validation-error {
border: 2px solid red !important;
background-color: rgba(255, 0, 0, 0.05) !important;
transition: all 0.3s ease;
}
"""
}
}
script {
unsafe {
+"""
function validateForm(form) {
// Check if rider name is provided
var riderName = form.querySelector('input[name="riderName"]').value.trim();
if (riderName === '') {
// Focus on the rider name field
var riderNameField = form.querySelector('input[name="riderName"]');
riderNameField.focus();
// Highlight the field
riderNameField.classList.add('validation-error');
setTimeout(function() {
riderNameField.classList.remove('validation-error');
}, 2000);
return false;
}
// Check if horse name is provided
var horseName = form.querySelector('input[name="horseName"]').value.trim();
if (horseName === '') {
// Focus on the horse name field
var horseNameField = form.querySelector('input[name="horseName"]');
horseNameField.focus();
// Highlight the field
horseNameField.classList.add('validation-error');
setTimeout(function() {
horseNameField.classList.remove('validation-error');
}, 2000);
return false;
}
// Check if at least one contact method is provided
var email = form.querySelector('input[name="email"]').value.trim();
var phone = form.querySelector('input[name="phone"]').value.trim();
if (email === '' && phone === '') {
// Focus on the email field
var emailField = form.querySelector('input[name="email"]');
emailField.focus();
// Highlight both email and phone fields
emailField.classList.add('validation-error');
var phoneField = form.querySelector('input[name="phone"]');
phoneField.classList.add('validation-error');
setTimeout(function() {
emailField.classList.remove('validation-error');
phoneField.classList.remove('validation-error');
}, 2000);
return false;
}
// Check if at least one competition is selected
var checkboxes = form.querySelectorAll('input[name="selectedEvents"]');
var checked = false;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checked = true;
break;
}
}
if (!checked) {
// Focus on the competitions section
var competitionsSections = form.querySelectorAll('div.form-section h3');
var competitionsSection = null;
for (var i = 0; i < competitionsSections.length; i++) {
if (competitionsSections[i].textContent === 'Bewerbe') {
competitionsSection = competitionsSections[i].parentNode;
break;
}
}
if (competitionsSection) {
competitionsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
// Highlight the section
competitionsSection.classList.add('validation-error');
setTimeout(function() {
competitionsSection.classList.remove('validation-error');
}, 2000);
}
return false;
}
return true;
}
"""
}
}
div(classes = "form-section mb-4") { div(classes = "form-section mb-4") {
h3 { +"Teilnehmer-Informationen" } h3 { +"Teilnehmer-Informationen" }
@@ -48,6 +150,10 @@ class NennungView {
input(type = InputType.text, name = "riderName", classes = "form-control") { input(type = InputType.text, name = "riderName", classes = "form-control") {
attributes["required"] = "required" attributes["required"] = "required"
attributes["placeholder"] = "Vor- und Nachname" attributes["placeholder"] = "Vor- und Nachname"
attributes["class"] = "form-control"
attributes["oninvalid"] =
"this.setCustomValidity('Fügen Sie den Namen des Reiters ein!')"
attributes["oninput"] = "this.setCustomValidity('')"
} }
} }
} }
@@ -58,7 +164,11 @@ class NennungView {
label(classes = "required") { +"Kopf-Nr./Pferd" } label(classes = "required") { +"Kopf-Nr./Pferd" }
input(type = InputType.text, name = "horseName", classes = "form-control") { input(type = InputType.text, name = "horseName", classes = "form-control") {
attributes["required"] = "required" attributes["required"] = "required"
attributes["placeholder"] = "Name des Pferdes" attributes["placeholder"] = "Kopf-Nr. / Name des Pferdes"
attributes["class"] = "form-control"
attributes["oninvalid"] =
"this.setCustomValidity('Fügen Sie die Kopf-Nr. und oder den Pferdenamen ein!')"
attributes["oninput"] = "this.setCustomValidity('')"
} }
} }
} }
@@ -67,10 +177,13 @@ class NennungView {
div(classes = "competition-item") { div(classes = "competition-item") {
div(classes = "participant-details") { div(classes = "participant-details") {
div(classes = "form-group") { div(classes = "form-group") {
label { +"E-Mail" } label(classes = "required") { +"E-Mail" }
input(type = InputType.email, name = "email") { input(type = InputType.email, name = "email") {
attributes["placeholder"] = "ihre@email.com" attributes["placeholder"] = "ihre@email.com"
attributes["class"] = "form-control" attributes["class"] = "form-control"
attributes["oninvalid"] =
"this.setCustomValidity('Fügen Sie Ihre E-Mail Adresse oder Telefon-Nr. ein!')"
attributes["oninput"] = "this.setCustomValidity('')"
} }
} }
} }
@@ -80,17 +193,20 @@ class NennungView {
div(classes = "competition-item") { div(classes = "competition-item") {
div(classes = "participant-details") { div(classes = "participant-details") {
div(classes = "form-group") { div(classes = "form-group") {
label { +"Telefon-Nr." } label(classes = "required") { +"Telefon-Nr." }
input(type = InputType.tel, name = "phone") { input(type = InputType.tel, name = "phone") {
attributes["placeholder"] = "Ihre Telefonnummer" attributes["placeholder"] = "Ihre Telefonnummer"
attributes["class"] = "form-control" attributes["class"] = "form-control"
attributes["oninvalid"] =
"this.setCustomValidity('Fügen Sie Ihre E-Mail Adresse oder Telefon-Nr. ein!')"
attributes["oninput"] = "this.setCustomValidity('')"
} }
} }
} }
} }
} }
p(classes = "form-hint") { +"Bitte geben Sie mindestens eine Kontaktmöglichkeit an (E-Mail oder Telefon)." } p(classes = "form-hint") { +"Bitte geben Sie mindestens eine Kontaktmöglichkeit an (E-Mail oder Telefon). Sie müssen nicht beide Felder ausfüllen." }
} }
// Competitions list // Competitions list
@@ -104,7 +220,11 @@ class NennungView {
turnier.bewerbe.forEach { bewerb -> turnier.bewerbe.forEach { bewerb ->
div(classes = "competition-item") { div(classes = "competition-item") {
label(classes = "form-check") { label(classes = "form-check") {
input(type = InputType.checkBox, name = "selectedEvents", classes = "form-check-input") { input(
type = InputType.checkBox,
name = "selectedEvents",
classes = "form-check-input"
) {
attributes["value"] = bewerb.nummer.toString() attributes["value"] = bewerb.nummer.toString()
} }
span(classes = "competition-details") { span(classes = "competition-details") {
@@ -157,7 +277,13 @@ class NennungView {
* @param horseName The name of the horse * @param horseName The name of the horse
* @param selectedEvents The list of selected competition IDs * @param selectedEvents The list of selected competition IDs
*/ */
suspend fun renderConfirmationPage(call: ApplicationCall, turnier: Turnier, riderName: String, horseName: String, selectedEvents: List<String>) { suspend fun renderConfirmationPage(
call: ApplicationCall,
turnier: Turnier,
riderName: String,
horseName: String,
selectedEvents: List<String>
) {
call.respondHtml(HttpStatusCode.OK) { call.respondHtml(HttpStatusCode.OK) {
layoutTemplate.apply { layoutTemplate.apply {
applyLayout( applyLayout(
@@ -175,11 +301,11 @@ class NennungView {
h2 { +"Vielen Dank für Ihre Nennung!" } h2 { +"Vielen Dank für Ihre Nennung!" }
div(classes = "confirmation-details") { div(classes = "confirmation-details") {
p { p(classes = "confirmation-message") { +"Ihre Nennung für " }
+"Ihre Nennung für "
strong { +turnier.name } p(classes = "confirmation-message") { strong { +turnier.name } }
+" wurde erfolgreich übermittelt."
} p(classes = "confirmation-message") { +" wurde erfolgreich übermittelt." }
div(classes = "detail-item") { div(classes = "detail-item") {
span(classes = "detail-label") { +"Reiter:" } span(classes = "detail-label") { +"Reiter:" }
@@ -200,8 +326,8 @@ class NennungView {
selectedEvents.forEach { eventId -> selectedEvents.forEach { eventId ->
val bewerb = turnier.bewerbe.find { it.nummer.toString() == eventId } val bewerb = turnier.bewerbe.find { it.nummer.toString() == eventId }
if (bewerb != null) { if (bewerb != null) {
li { span(classes = "detail-value") {
+"${bewerb.nummer}. ${bewerb.titel} - ${bewerb.klasse}" +"${bewerb.nummer} . ${bewerb.titel} - ${bewerb.klasse}"
if (bewerb.task != null) { if (bewerb.task != null) {
+" - ${bewerb.task}" +" - ${bewerb.task}"
} }
server/src/main/resources/static/css/base.css
+1 -1
View File
@@ -1,6 +1,6 @@
/* Base styles - Modern and accessible */ /* Base styles - Modern and accessible */
body { body {
font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Helvetica', 'Arial', sans-serif;
color: var(--text-color); color: var(--text-color);
background-color: var(--neutral-50); background-color: var(--neutral-50);
line-height: 1.7; line-height: 1.7;
server/src/main/resources/static/css/buttons.css
+7 -7
View File
@@ -25,21 +25,21 @@
/* Primary button */ /* Primary button */
.btn-primary, .button { .btn-primary, .button {
background-color: var(--primary-color); background-color: var(--primary-color);
color: white; color: var(--container-bg);
box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm);
} }
/* Secondary button */ /* Secondary button */
.btn-secondary, .button-secondary { .btn-secondary, .button-secondary {
background-color: var(--secondary-color); background-color: var(--secondary-color);
color: white; color: var(--container-bg);
box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm);
} }
/* Accent button */ /* Accent button */
.btn-accent, .button-accent { .btn-accent, .button-accent {
background-color: var(--accent-color); background-color: var(--accent-color);
color: white; color: var(--container-bg);
box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm);
} }
@@ -81,7 +81,7 @@
.btn:focus, .button:focus { .btn:focus, .button:focus {
outline: none; outline: none;
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3); box-shadow: 0 0 0 3px rgba(43, 103, 119, 0.3); /* Light version of primary color #2b6777 */
} }
/* Ripple effect for buttons */ /* Ripple effect for buttons */
@@ -93,7 +93,7 @@
top: 0; top: 0;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); background-image: radial-gradient(circle, var(--container-bg) 10%, transparent 10.01%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50%; background-position: 50%;
transform: scale(10, 10); transform: scale(10, 10);
@@ -175,9 +175,9 @@
position: absolute; position: absolute;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border: 2px solid rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.3); /* Semi-transparent border */
border-radius: 50%; border-radius: 50%;
border-top-color: white; border-top-color: var(--container-bg);
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
} }
server/src/main/resources/static/css/forms.css
+15 -15
View File
@@ -68,7 +68,7 @@
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: var(--text-color); color: var(--text-color);
background-color: #fff; background-color: var(--container-bg);
background-clip: padding-box; background-clip: padding-box;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@@ -78,7 +78,7 @@
.form-control:focus { .form-control:focus {
border-color: var(--primary-color); border-color: var(--primary-color);
outline: 0; outline: 0;
box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25); box-shadow: 0 0 0 0.25rem rgba(43, 103, 119, 0.25); /* Light version of primary color #2b6777 */
} }
.form-control::placeholder { .form-control::placeholder {
@@ -95,8 +95,8 @@
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: var(--text-color); color: var(--text-color);
background-color: #fff; background-color: var(--container-bg);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232b6777' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 1rem center; background-position: right 1rem center;
background-size: 16px 12px; background-size: 16px 12px;
@@ -109,7 +109,7 @@
.form-select:focus { .form-select:focus {
border-color: var(--primary-color); border-color: var(--primary-color);
outline: 0; outline: 0;
box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25); box-shadow: 0 0 0 0.25rem rgba(43, 103, 119, 0.25); /* Light version of primary color #2b6777 */
} }
/* Checkbox and radio styling */ /* Checkbox and radio styling */
@@ -126,7 +126,7 @@
margin-top: 0.125em; margin-top: 0.125em;
margin-left: -1.75em; margin-left: -1.75em;
vertical-align: top; vertical-align: top;
background-color: #fff; background-color: var(--container-bg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
@@ -149,17 +149,17 @@
} }
.form-check-input:checked[type="checkbox"] { .form-check-input:checked[type="checkbox"] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
} }
.form-check-input:checked[type="radio"] { .form-check-input:checked[type="radio"] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
} }
.form-check-input:focus { .form-check-input:focus {
border-color: var(--primary-color); border-color: var(--primary-color);
outline: 0; outline: 0;
box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25); box-shadow: 0 0 0 0.25rem rgba(43, 103, 119, 0.25); /* Light version of primary color #2b6777 */
} }
/* Switch styling */ /* Switch styling */
@@ -170,7 +170,7 @@
.form-switch .form-check-input { .form-switch .form-check-input {
width: 2em; width: 2em;
margin-left: -2.5em; margin-left: -2.5em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2843, 103, 119, 0.25%29'/%3e%3c/svg%3e"); /* Using primary color with transparency */
background-position: left center; background-position: left center;
border-radius: 2em; border-radius: 2em;
transition: background-position 0.15s ease-in-out; transition: background-position 0.15s ease-in-out;
@@ -178,7 +178,7 @@
.form-switch .form-check-input:checked { .form-switch .form-check-input:checked {
background-position: right center; background-position: right center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
} }
/* Required field indicator */ /* Required field indicator */
@@ -192,7 +192,7 @@
.was-validated .form-control:valid, .form-control.is-valid { .was-validated .form-control:valid, .form-control.is-valid {
border-color: var(--success-color); border-color: var(--success-color);
padding-right: calc(1.5em + 0.75rem); padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2338b000' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2352ab98' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); /* Using success color #52ab98 */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center; background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -201,7 +201,7 @@
.was-validated .form-control:invalid, .form-control.is-invalid { .was-validated .form-control:invalid, .form-control.is-invalid {
border-color: var(--error-color); border-color: var(--error-color);
padding-right: calc(1.5em + 0.75rem); padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23d90429'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23d90429' stroke='none'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%232b6777'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%232b6777' stroke='none'/%3e%3c/svg%3e"); /* Using error color #2b6777 */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center; background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -250,7 +250,7 @@
color: var(--primary-color); color: var(--primary-color);
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Helvetica', 'Arial', sans-serif;
line-height: 1.3; line-height: 1.3;
} }
@@ -306,7 +306,7 @@
} }
.form-range:focus::-webkit-slider-thumb { .form-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(67, 97, 238, 0.25); box-shadow: 0 0 0 1px var(--container-bg), 0 0 0 0.25rem rgba(43, 103, 119, 0.25); /* Light version of primary color #2b6777 */
} }
.form-range::-webkit-slider-thumb { .form-range::-webkit-slider-thumb {
server/src/main/resources/static/css/navigation.css
+11 -11
View File
@@ -14,14 +14,14 @@
padding: 0.5rem 0; padding: 0.5rem 0;
box-shadow: var(--box-shadow-lg); box-shadow: var(--box-shadow-lg);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95); /* Using rgba for transparency */
} }
/* Enhanced navbar brand */ /* Enhanced navbar brand */
.navbar-brand { .navbar-brand {
font-weight: 700; font-weight: 700;
font-size: 1.5rem; font-size: 1.5rem;
color: white; color: var(--container-bg);
display: flex; display: flex;
align-items: center; align-items: center;
letter-spacing: -0.01em; letter-spacing: -0.01em;
@@ -30,7 +30,7 @@
} }
.navbar-brand:hover { .navbar-brand:hover {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9); /* Using rgba for hover effect */
} }
.navbar-brand i { .navbar-brand i {
@@ -71,13 +71,13 @@
.nav-link { .nav-link {
font-weight: 600; font-weight: 600;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85); /* Using rgba for transparency */
position: relative; position: relative;
transition: color var(--transition-fast); transition: color var(--transition-fast);
} }
.nav-link:hover, .nav-link:focus { .nav-link:hover, .nav-link:focus {
color: white; color: var(--container-bg);
} }
/* Animated underline effect */ /* Animated underline effect */
@@ -88,7 +88,7 @@
height: 2px; height: 2px;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
background-color: white; background-color: var(--container-bg);
transition: all var(--transition); transition: all var(--transition);
transform: translateX(-50%); transform: translateX(-50%);
opacity: 0; opacity: 0;
@@ -102,7 +102,7 @@
} }
.nav-link.active { .nav-link.active {
color: white; color: var(--container-bg);
font-weight: 700; font-weight: 700;
} }
@@ -139,7 +139,7 @@
.dropdown-item.active { .dropdown-item.active {
background-color: var(--primary-color); background-color: var(--primary-color);
color: white; color: var(--container-bg);
} }
.dropdown-item i { .dropdown-item i {
@@ -148,7 +148,7 @@
} }
.dropdown-item.active i { .dropdown-item.active i {
color: white; color: var(--container-bg);
} }
@keyframes fadeIn { @keyframes fadeIn {
@@ -158,7 +158,7 @@
/* Navbar color variants */ /* Navbar color variants */
.navbar-light { .navbar-light {
background-color: white; background-color: var(--container-bg);
} }
.navbar-light .navbar-brand, .navbar-light .navbar-brand,
@@ -233,7 +233,7 @@
} }
.navbar-light .navbar-collapse { .navbar-light .navbar-collapse {
background-color: white; background-color: var(--container-bg);
} }
.navbar-nav { .navbar-nav {
server/src/main/resources/static/css/tables.css
+5 -5
View File
@@ -52,7 +52,7 @@
} }
.table-hover tbody tr:hover { .table-hover tbody tr:hover {
background-color: rgba(67, 97, 238, 0.05); background-color: rgba(43, 103, 119, 0.05); /* Light version of primary color #2b6777 */
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm);
} }
@@ -82,7 +82,7 @@
.table-modern thead th { .table-modern thead th {
background-color: var(--primary-color); background-color: var(--primary-color);
color: white; color: var(--container-bg);
border-bottom: none; border-bottom: none;
} }
@@ -128,7 +128,7 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin-bottom: 1rem; margin-bottom: 1rem;
box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm);
background-color: white; background-color: var(--container-bg);
} }
.table-responsive-card td { .table-responsive-card td {
@@ -214,7 +214,7 @@
.list-modern li { .list-modern li {
padding: 1rem; padding: 1rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background-color: white; background-color: var(--container-bg);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm);
transition: all var(--transition-fast); transition: all var(--transition-fast);
@@ -243,7 +243,7 @@
} }
.competition-list li:hover { .competition-list li:hover {
background-color: white; background-color: var(--container-bg);
box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm);
transform: translateX(3px); transform: translateX(3px);
} }
server/src/main/resources/static/css/tournament.css
+23 -15
View File
@@ -13,7 +13,7 @@
transition: all var(--transition); transition: all var(--transition);
margin-bottom: 2rem; margin-bottom: 2rem;
overflow: hidden; overflow: hidden;
background-color: white; background-color: var(--container-bg);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
position: relative; position: relative;
@@ -94,7 +94,7 @@
height: 1.5rem; height: 1.5rem;
text-align: center; text-align: center;
margin-right: 0.5rem; margin-right: 0.5rem;
background-color: rgba(67, 97, 238, 0.1); background-color: rgba(43, 103, 119, 0.1); /* Light version of primary color #2b6777 */
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -254,7 +254,7 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
transition: all var(--transition-fast); transition: all var(--transition-fast);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background-color: white; background-color: var(--container-bg);
box-shadow: var(--box-shadow-sm); box-shadow: var(--box-shadow-sm);
height: 100%; height: 100%;
display: flex; display: flex;
@@ -263,12 +263,20 @@
} }
.competition-item:hover { .competition-item:hover {
background-color: rgba(67, 97, 238, 0.03); background-color: rgba(43, 103, 119, 0.03); /* Light version of primary color #2b6777 */
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
transform: translateY(-5px); transform: translateY(-5px);
border-color: var(--primary-color); border-color: var(--primary-color);
} }
/* Disable hover effect for specific fields */
.competition-item.no-hover:hover {
transform: none;
box-shadow: var(--box-shadow-sm);
border-color: var(--border-color);
background-color: var(--container-bg);
}
/* Custom form check styling */ /* Custom form check styling */
.competition-item .form-check { .competition-item .form-check {
display: flex; display: flex;
@@ -290,7 +298,7 @@
border-radius: 0.25rem; border-radius: 0.25rem;
transition: all var(--transition-fast); transition: all var(--transition-fast);
position: relative; position: relative;
background-color: white; background-color: var(--container-bg);
} }
.competition-item .form-check-input:checked { .competition-item .form-check-input:checked {
@@ -304,7 +312,7 @@
.competition-item .form-check-input:focus { .competition-item .form-check-input:focus {
outline: 0; outline: 0;
box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25); box-shadow: 0 0 0 0.25rem rgba(43, 103, 119, 0.25); /* Light version of primary color #2b6777 */
border-color: var(--primary-hover); border-color: var(--primary-hover);
} }
@@ -314,7 +322,7 @@
.competition-details { .competition-details {
flex-grow: 1; flex-grow: 1;
font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Helvetica', 'Arial', sans-serif;
color: var(--text-color); color: var(--text-color);
line-height: 1.5; line-height: 1.5;
font-size: 1rem; font-size: 1rem;
@@ -331,7 +339,7 @@
/* Participant details section */ /* Participant details section */
.participant-details { .participant-details {
width: 100%; width: 100%;
font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Helvetica', 'Arial', sans-serif;
} }
.participant-details .form-label { .participant-details .form-label {
@@ -344,7 +352,7 @@
.participant-details input, .participant-details input,
.participant-details textarea { .participant-details textarea {
font-family: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif; font-family: 'Helvetica', 'Arial', sans-serif;
color: var(--text-color); color: var(--text-color);
font-size: 1rem; font-size: 1rem;
} }
@@ -359,7 +367,7 @@
max-width: 700px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
background-color: white; background-color: var(--container-bg);
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
padding: 3rem 2rem; padding: 3rem 2rem;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
@@ -387,7 +395,7 @@
} }
.confirmation-icon i { .confirmation-icon i {
background-color: rgba(56, 176, 0, 0.1); background-color: rgba(82, 171, 152, 0.1); /* Light version of success color #52ab98 */
border-radius: 50%; border-radius: 50%;
padding: 1.5rem; padding: 1.5rem;
display: inline-block; display: inline-block;
@@ -396,13 +404,13 @@
@keyframes pulse { @keyframes pulse {
0% { 0% {
box-shadow: 0 0 0 0 rgba(56, 176, 0, 0.4); box-shadow: 0 0 0 0 rgba(82, 171, 152, 0.4); /* Success color #52ab98 with opacity */
} }
70% { 70% {
box-shadow: 0 0 0 15px rgba(56, 176, 0, 0); box-shadow: 0 0 0 15px rgba(82, 171, 152, 0); /* Success color #52ab98 with zero opacity */
} }
100% { 100% {
box-shadow: 0 0 0 0 rgba(56, 176, 0, 0); box-shadow: 0 0 0 0 rgba(82, 171, 152, 0); /* Success color #52ab98 with zero opacity */
} }
} }
@@ -432,7 +440,7 @@
} }
.detail-item:hover { .detail-item:hover {
background-color: white; background-color: var(--container-bg);
} }
.detail-item:last-child { .detail-item:last-child {
server/src/main/resources/static/css/variables.css
+19 -19
View File
@@ -1,26 +1,26 @@
:root { :root {
/* Modern color palette */ /* Modern color palette */
--primary-color: #4361ee; --primary-color: #2b6777;
--primary-hover: #3a56d4; --primary-hover: #255a68;
--secondary-color: #7209b7; --secondary-color: #c8d8e4;
--secondary-hover: #6008a0; --secondary-hover: #b9c9d5;
--accent-color: #f72585; --accent-color: #52ab98;
--text-color: #555555; --text-color: #2b6777;
--light-text: #6c757d; --light-text: #52ab98;
--lighter-text: #adb5bd; --lighter-text: #c8d8e4;
--border-color: #e9ecef; --border-color: #c8d8e4;
--light-bg: #f8f9fa; --light-bg: #f2f2f2;
--container-bg: #fff; --container-bg: #ffffff;
--success-color: #38b000; --success-color: #52ab98;
--warning-color: #ffbe0b; --warning-color: #c8d8e4;
--error-color: #d90429; --error-color: #2b6777;
--info-color: #4cc9f0; --info-color: #c8d8e4;
/* Neutral shades for backgrounds */ /* Neutral shades for backgrounds */
--neutral-50: #fafafa; --neutral-50: #ffffff;
--neutral-100: #f5f5f5; --neutral-100: #f2f2f2;
--neutral-200: #e5e5e5; --neutral-200: #e6e6e6;
--neutral-300: #d4d4d4; --neutral-300: #c8d8e4;
/* Design tokens */ /* Design tokens */
--border-radius-sm: 0.25rem; --border-radius-sm: 0.25rem;