Multi-User DOTS Kalkul\u00e1tor<\/title>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.5.25\/jspdf.plugin.autotable.min.js\"><\/script>\r\n\r\n<style>\r\n :root{\r\n --accent1:#910F1B;\r\n --accent2:#60020B;\r\n --bg:#131313;\r\n --card:#1f1f1f;\r\n --text:#f1f1f1;\r\n --gray:#444;\r\n font-family: \"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial;\r\n }\r\n body{\r\n margin:0;\r\n background: var(--bg);\r\n color:var(--text);\r\n padding-bottom: 50px;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n .wrap{\r\n max-width:800px;\r\n margin:40px auto;\r\n padding:20px;\r\n }\r\n\r\n h1{ margin:0 0 20px; font-size:24px; text-align:center; }\r\n\r\n .global-settings {\r\n display: flex;\r\n justify-content: flex-end;\r\n margin-bottom: 20px;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .athlete-card{\r\n background:var(--card);\r\n border-radius:14px;\r\n padding:20px;\r\n box-shadow:0 6px 18px rgba(0,0,0,0.6);\r\n margin-bottom: 20px;\r\n position: relative;\r\n border-left: 5px solid var(--accent1);\r\n animation: fadeIn 0.3s ease-out;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .card-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .remove-btn {\r\n background: transparent;\r\n border: none;\r\n color: #666;\r\n cursor: pointer;\r\n font-size: 20px;\r\n transition: color 0.2s;\r\n }\r\n .remove-btn:hover { color: #ff4444; background: transparent; }\r\n\r\n .form-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }\r\n label{ display:block; font-size:13px; margin-bottom:6px; color:#aaa; }\r\n \r\n input[type=\"number\"], input[type=\"text\"], select{\r\n padding:10px 12px; border-radius:10px; border:1px solid #333;\r\n font-size:15px; width:100%;\r\n box-sizing:border-box;\r\n background:#2b2b2b;\r\n color:var(--text);\r\n }\r\n \r\n input:focus, select:focus {\r\n outline: 1px solid var(--accent1);\r\n }\r\n\r\n .col{ flex:1 1 140px; min-width:120px; }\r\n\r\n .segmented{\r\n display:inline-flex; background:#2b2b2b; border-radius:10px; padding:4px; gap:6px; width: 100%;\r\n box-sizing: border-box;\r\n }\r\n .segmented button{\r\n flex: 1;\r\n border:0; padding:8px 12px; border-radius:8px; background:transparent; cursor:pointer; font-weight:600; color:var(--text);\r\n transition: color 0.2s;\r\n outline: none !important;\r\n }\r\n .segmented button:hover { background: transparent; color: #fff; }\r\n .segmented button.active{ \r\n background:linear-gradient(90deg,var(--accent1), var(--accent2)); \r\n color:white; \r\n }\r\n .segmented button.active:hover { background:linear-gradient(90deg,var(--accent1), var(--accent2)); }\r\n\r\n .actions {\r\n display: flex;\r\n gap: 15px;\r\n justify-content: center;\r\n margin-top: 30px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn {\r\n padding:12px 24px; border-radius:10px; border:0; cursor:pointer; font-weight:700; font-size: 16px;\r\n display: inline-flex; align-items: center; gap: 8px;\r\n transition: transform 0.1s;\r\n outline: none !important;\r\n }\r\n .btn:active { transform: scale(0.98); }\r\n\r\n .btn-add {\r\n background: #333;\r\n color: white;\r\n border: 1px solid #555;\r\n }\r\n .btn-add:hover { background: #444; }\r\n .btn-add:focus, .btn-add:active, .btn-add:focus-visible {\r\n background: #333 !important; \r\n border-color: #555 !important;\r\n outline: none !important;\r\n box-shadow: none !important;\r\n }\r\n\r\n .btn-calc {\r\n background:linear-gradient(90deg,var(--accent1), var(--accent2));\r\n color:white;\r\n position: relative;\r\n }\r\n\r\n .btn-download {\r\n background: #2e7d32;\r\n color: white;\r\n margin-top: 20px;\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n\r\n .btn-calc:disabled {\r\n background: var(--gray);\r\n color: #aaa;\r\n cursor: not-allowed;\r\n opacity: 0.7;\r\n }\r\n\r\n #results-area {\r\n margin-top: 40px;\r\n display: none; \r\n }\r\n\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n background: var(--card);\r\n border-radius: 14px;\r\n overflow: hidden;\r\n border: none;\r\n }\r\n \r\n th, td {\r\n padding: 12px 15px;\r\n text-align: left;\r\n border-bottom: 1px solid #333;\r\n }\r\n\r\n th {\r\n background: #2b2b2b;\r\n color: #aaa;\r\n font-size: 13px;\r\n text-transform: uppercase;\r\n }\r\n\r\n tbody tr td {\r\n background-color: var(--card) !important;\r\n color: var(--text);\r\n }\r\n\r\n tbody tr:hover td {\r\n background-color: var(--card) !important;\r\n }\r\n\r\n tr:last-child td { border-bottom: none; }\r\n\r\n .rank-cell { font-weight: bold; color: var(--accent1); width: 40px; text-align:center; }\r\n .dots-cell { font-weight: 800; color: var(--accent1); font-size: 1.1em; }\r\n\r\n @media (max-width: 600px) {\r\n th, td { font-size: 13px; padding: 10px; }\r\n .col { flex: 1 1 100%; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"wrap\">\r\n \r\n\r\n <div class=\"global-settings\">\r\n <label style=\"margin:0\">M\u00e9rt\u00e9kegys\u00e9g:<\/label>\r\n <select id=\"globalUnit\" style=\"width:auto;\">\r\n <option value=\"kg\">kg<\/option>\r\n <option value=\"lb\">lb<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div id=\"athletesList\"><\/div>\r\n\r\n <div class=\"actions\">\r\n <button class=\"btn btn-add\" id=\"addAthleteBtn\">+ Versenyz\u0151 hozz\u00e1ad\u00e1sa<\/button>\r\n <button class=\"btn btn-calc\" id=\"calcBtn\" disabled>Sz\u00e1mol\u00e1s<\/button>\r\n <\/div>\r\n\r\n <div id=\"results-area\">\r\n <h2>Eredm\u00e9nyek<\/h2>\r\n <table id=\"mainTable\">\r\n <thead>\r\n <tr>\r\n <th style=\"text-align:center\">#<\/th>\r\n <th>N\u00e9v<\/th>\r\n <th>Nem<\/th>\r\n <th>Tests\u00faly<\/th>\r\n <th>Total<\/th>\r\n <th>DOTS<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"resultsBody\"><\/tbody>\r\n <\/table>\r\n <button class=\"btn btn-download\" id=\"downloadPdfBtn\">\ud83d\udcc4 Eredm\u00e9nyek let\u00f6lt\u00e9se (PDF)<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst coeffs = {\r\n male: {a:-0.000001093,b:0.0007391293,c:-0.1918759221,d:24.0900756,e:-307.75076},\r\n female:{a:-0.0000010706,b:0.0005158568,c:-0.1126655495,d:13.6175032,e:-57.96288}\r\n};\r\n\r\nconst athletesList = document.getElementById('athletesList');\r\nconst addAthleteBtn = document.getElementById('addAthleteBtn');\r\nconst calcBtn = document.getElementById('calcBtn');\r\nconst globalUnitEl = document.getElementById('globalUnit');\r\nconst resultsArea = document.getElementById('results-area');\r\nconst resultsBody = document.getElementById('resultsBody');\r\nconst downloadPdfBtn = document.getElementById('downloadPdfBtn');\r\n\r\nlet athleteCount = 0; \r\n\r\nfunction toNumber(v){const n=parseFloat(v);return isFinite(n)?n:0;}\r\nfunction lbToKg(x){return x*0.45359237;}\r\nfunction kgToLb(x){return x\/0.45359237;}\r\n\r\nfunction calcCoeff(wKg,g){\r\n const p=coeffs[g],w=wKg,w2=w*w,w3=w2*w,w4=w3*w;\r\n const poly=p.a*w4+p.b*w3+p.c*w2+p.d*w+p.e;\r\n return poly===0?0:500\/poly;\r\n}\r\n\r\nfunction addAthlete() {\r\n athleteCount++;\r\n const id = athleteCount;\r\n const card = document.createElement('div');\r\n card.className = 'athlete-card';\r\n card.innerHTML = `\r\n <div class=\"card-header\">\r\n <div style=\"flex:1\">\r\n <label>N\u00e9v<\/label>\r\n <input type=\"text\" class=\"athlete-name\" value=\"Versenyz\u0151 ${id}\" \/>\r\n <\/div>\r\n ${id > 1 ? '<button class=\"remove-btn\" title=\"T\u00f6rl\u00e9s\">×<\/button>' : ''}\r\n <\/div>\r\n <div class=\"form-row\">\r\n <div style=\"flex:1\">\r\n <label>Nem<\/label>\r\n <div class=\"segmented\">\r\n <button type=\"button\" class=\"gender-btn active\" data-gender=\"male\">F\u00e9rfi<\/button>\r\n <button type=\"button\" class=\"gender-btn\" data-gender=\"female\">N\u0151<\/button>\r\n <\/div>\r\n <input type=\"hidden\" class=\"gender-val\" value=\"male\">\r\n <\/div>\r\n <div class=\"col\"><label>Tests\u00faly<\/label><input class=\"input-bw\" type=\"number\" min=\"0\" step=\"0.1\" value=\"0\" \/><\/div>\r\n <\/div>\r\n <div class=\"form-row\">\r\n <div class=\"col\"><label>Guggol\u00e1s<\/label><input class=\"input-sq\" type=\"number\" min=\"0\" step=\"0.5\" value=\"0\" \/><\/div>\r\n <div class=\"col\"><label>Fekvenyom\u00e1s<\/label><input class=\"input-be\" type=\"number\" min=\"0\" step=\"0.5\" value=\"0\" \/><\/div>\r\n <div class=\"col\"><label>Felh\u00faz\u00e1s<\/label><input class=\"input-dl\" type=\"number\" min=\"0\" step=\"0.5\" value=\"0\" \/><\/div>\r\n <\/div>\r\n `;\r\n\r\n const btns = card.querySelectorAll('.gender-btn');\r\n const genderInput = card.querySelector('.gender-val');\r\n btns.forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n btns.forEach(b => b.classList.remove('active'));\r\n e.target.classList.add('active');\r\n genderInput.value = e.target.dataset.gender;\r\n });\r\n });\r\n\r\n const removeBtn = card.querySelector('.remove-btn');\r\n if(removeBtn) removeBtn.addEventListener('click', () => { card.remove(); updateUIState(); });\r\n\r\n athletesList.appendChild(card);\r\n updateUIState();\r\n}\r\n\r\nfunction updateUIState() {\r\n const cards = document.querySelectorAll('.athlete-card');\r\n calcBtn.disabled = cards.length < 2;\r\n if(cards.length < 2) resultsArea.style.display = 'none';\r\n}\r\n\r\nlet lastResults = []; \/\/ Elt\u00e1roljuk a PDF-hez\r\n\r\nfunction calculateAll() {\r\n const unit = globalUnitEl.value;\r\n const cards = document.querySelectorAll('.athlete-card');\r\n lastResults = [];\r\n\r\n cards.forEach(card => {\r\n const name = card.querySelector('.athlete-name').value;\r\n const gender = card.querySelector('.gender-val').value;\r\n const bwKg = unit === 'lb' ? lbToKg(toNumber(card.querySelector('.input-bw').value)) : toNumber(card.querySelector('.input-bw').value);\r\n const totalKg = (unit === 'lb' ? lbToKg(toNumber(card.querySelector('.input-sq').value) + toNumber(card.querySelector('.input-be').value) + toNumber(card.querySelector('.input-dl').value)) : (toNumber(card.querySelector('.input-sq').value) + toNumber(card.querySelector('.input-be').value) + toNumber(card.querySelector('.input-dl').value)));\r\n\r\n const dots = (totalKg * calcCoeff(Math.max(1, bwKg), gender)).toFixed(2);\r\n \r\n lastResults.push({\r\n name,\r\n gender: gender === 'male' ? 'F\u00e9rfi' : 'N\u0151',\r\n bw: toNumber(card.querySelector('.input-bw').value) + ' ' + unit,\r\n total: (unit === 'lb' ? (totalKg\/0.45359237).toFixed(1) : totalKg.toFixed(1)) + ' ' + unit,\r\n dots: parseFloat(dots)\r\n });\r\n });\r\n\r\n lastResults.sort((a, b) => b.dots - a.dots);\r\n\r\n resultsBody.innerHTML = '';\r\n lastResults.forEach((r, index) => {\r\n const tr = document.createElement('tr');\r\n tr.innerHTML = `<td class=\"rank-cell\">${index + 1}.<\/td><td style=\"font-weight:600\">${r.name}<\/td><td>${r.gender}<\/td><td>${r.bw}<\/td><td>${r.total}<\/td><td class=\"dots-cell\">${r.dots.toFixed(2)}<\/td>`;\r\n resultsBody.appendChild(tr);\r\n });\r\n\r\n resultsArea.style.display = 'block';\r\n resultsArea.scrollIntoView({ behavior: 'smooth' });\r\n}\r\n\r\n\/\/ PDF Let\u00f6lt\u00e9s funkci\u00f3\r\ndownloadPdfBtn.addEventListener('click', () => {\r\n const { jsPDF } = window.jspdf;\r\n const doc = new jsPDF();\r\n \r\n doc.setFontSize(18);\r\n doc.text(\"DOTS Verseny Eredm\u00e9nyek\", 14, 20);\r\n doc.setFontSize(10);\r\n doc.text(`K\u00e9sz\u00fclt: ${new Date().toLocaleString('hu-HU')}`, 14, 28);\r\n\r\n const tableData = lastResults.map((r, i) => [\r\n i + 1,\r\n r.name,\r\n r.gender,\r\n r.bw,\r\n r.total,\r\n r.dots.toFixed(2)\r\n ]);\r\n\r\n doc.autoTable({\r\n startY: 35,\r\n head: [['#', 'N\u00e9v', 'Nem', 'Tests\u00faly', 'Total', 'DOTS']],\r\n body: tableData,\r\n theme: 'grid',\r\n headStyles: { fillColor: [145, 15, 27] }, \/\/ Accent1 sz\u00edn\r\n styles: { font: \"helvetica\", fontSize: 10 }\r\n });\r\n\r\n doc.save(\"dots_eredmenyek.pdf\");\r\n});\r\n\r\naddAthleteBtn.addEventListener('click', addAthlete);\r\ncalcBtn.addEventListener('click', calculateAll);\r\naddAthlete();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dots Rangsor Multi-User DOTS Kalkul\u00e1tor M\u00e9rt\u00e9kegys\u00e9g: kglb + Versenyz\u0151 hozz\u00e1ad\u00e1sa Sz\u00e1mol\u00e1s Eredm\u00e9nyek # N\u00e9v Nem Tests\u00faly Total DOTS \ud83d\udcc4 Eredm\u00e9nyek let\u00f6lt\u00e9se (PDF)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"iawp_total_views":35,"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/scitec-only-dots.hu\/en\/wp-json\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scitec-only-dots.hu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/scitec-only-dots.hu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/scitec-only-dots.hu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scitec-only-dots.hu\/en\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":32,"href":"https:\/\/scitec-only-dots.hu\/en\/wp-json\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":2430,"href":"https:\/\/scitec-only-dots.hu\/en\/wp-json\/wp\/v2\/pages\/25\/revisions\/2430"}],"wp:attachment":[{"href":"https:\/\/scitec-only-dots.hu\/en\/wp-json\/wp\/v2\/media?parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}