Afegir resultat
Prem Enter a qualsevol camp per afegir la filera a la taula.
| Nivell / Categoria |
Patinadora / Patinador |
Torneig |
Classificació |
|
.prs-wrapper {
max-width: 900px;
margin: 0 auto;
font-family: inherit;
}
.prs-title {
margin: 0 0 16px 0;
font-size: 18px;
font-weight: 600;
color: #1a1a2e;
}
.prs-form {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
background: #f6f7fb;
border: 1px solid #e2e4ee;
border-radius: 10px;
padding: 16px;
margin-bottom: 8px;
}
.prs-field {
display: flex;
flex-direction: column;
flex: 1 1 200px;
min-width: 160px;
}
.prs-field label {
font-size: 12px;
font-weight: 600;
color: #555b70;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.prs-field input {
padding: 9px 10px;
border: 1px solid #ccd0e0;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border-color 0.15s ease;
}
.prs-field input:focus {
border-color: #4a5cf5;
}
.prs-add-btn {
background: #1a1a2e;
color: #fff;
border: none;
border-radius: 6px;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
white-space: nowrap;
}
.prs-add-btn:hover {
background: #33335a;
}
.prs-hint {
font-size: 12px;
color: #8a8fa3;
margin: 0 0 18px 4px;
}
.prs-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
border-radius: 8px;
overflow: hidden;
}
.prs-table thead th {
background: #1a1a2e;
color: #fff;
text-align: left;
padding: 12px 14px;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.prs-th-actions {
width: 40px;
}
.prs-table tbody tr {
border-bottom: 1px solid #eaebf2;
}
.prs-table tbody tr:nth-child(even) {
background: #f9fafc;
}
.prs-table tbody tr:hover {
background: #eef0fb;
}
.prs-table td {
padding: 11px 14px;
color: #2b2d3f;
}
.prs-delete-btn {
background: none;
border: none;
color: #c53030;
font-size: 16px;
cursor: pointer;
line-height: 1;
padding: 4px;
}
.prs-delete-btn:hover {
color: #8f1f1f;
}
.prs-empty-row td {
text-align: center;
color: #a4a8bb;
font-style: italic;
padding: 18px;
}
@media (max-width: 640px) {
.prs-table, .prs-table thead, .prs-table tbody, .prs-table th, .prs-table td, .prs-table tr {
display: block;
}
.prs-table thead {
display: none;
}
.prs-table tbody tr {
margin-bottom: 10px;
border: 1px solid #eaebf2;
border-radius: 8px;
padding: 6px 0;
}
.prs-table td {
display: flex;
justify-content: space-between;
padding: 8px 14px;
}
.prs-table td::before {
content: attr(data-label);
font-weight: 600;
color: #8a8fa3;
margin-right: 10px;
}
}
(function () {
function prsEnterListener(e) {
if (e.key === 'Enter') {
e.preventDefault();
prsAddRow();
}
}
var inputs = document.querySelectorAll('.prs-form input');
inputs.forEach(function (input) {
input.addEventListener('keydown', prsEnterListener);
});
prsRenderEmptyState();
})();
function prsAddRow() {
var nivellInput = document.getElementById('prs-nivell');
var nomInput = document.getElementById('prs-nom');
var torneigInput = document.getElementById('prs-torneig');
var classInput = document.getElementById('prs-classificacio');
var nivell = nivellInput.value.trim();
var nom = nomInput.value.trim();
var torneig = torneigInput.value.trim();
var classificacio = classInput.value.trim();
if (!nivell && !nom && !torneig && !classificacio) {
nivellInput.focus();
return;
}
var tbody = document.getElementById('prs-table-body');
var emptyRow = tbody.querySelector('.prs-empty-row');
if (emptyRow) emptyRow.remove();
var tr = document.createElement('tr');
var tdNivell = document.createElement('td');
tdNivell.setAttribute('data-label', 'Nivell / Categoria');
tdNivell.textContent = nivell || '—';
var tdNom = document.createElement('td');
tdNom.setAttribute('data-label', 'Patinadora / Patinador');
tdNom.textContent = nom || '—';
var tdTorneig = document.createElement('td');
tdTorneig.setAttribute('data-label', 'Torneig');
tdTorneig.textContent = torneig || '—';
var tdClass = document.createElement('td');
tdClass.setAttribute('data-label', 'Classificació');
tdClass.textContent = classificacio || '—';
var tdActions = document.createElement('td');
tdActions.setAttribute('data-label', '');
var delBtn = document.createElement('button');
delBtn.type = 'button';
delBtn.className = 'prs-delete-btn';
delBtn.innerHTML = '×';
delBtn.title = 'Eliminar filera';
delBtn.onclick = function () {
tr.remove();
prsRenderEmptyState();
};
tdActions.appendChild(delBtn);
tr.appendChild(tdNivell);
tr.appendChild(tdNom);
tr.appendChild(tdTorneig);
tr.appendChild(tdClass);
tr.appendChild(tdActions);
tbody.appendChild(tr);
nivellInput.value = '';
nomInput.value = '';
torneigInput.value = '';
classInput.value = '';
nivellInput.focus();
}
function prsRenderEmptyState() {
var tbody = document.getElementById('prs-table-body');
if (tbody.children.length === 0) {
var tr = document.createElement('tr');
tr.className = 'prs-empty-row';
var td = document.createElement('td');
td.colSpan = 5;
td.textContent = 'Encara no hi ha resultats afegits.';
tr.appendChild(td);
tbody.appendChild(tr);
}
}
