Kalkulator tempa biegu<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: #ffffff;\n min-height: 100vh;\n padding: 20px 10px;\n }\n \n .calculator-container {\n max-width: 1200px;\n margin: 0 auto;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 20px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n backdrop-filter: blur(10px);\n }\n \n .header {\n background: linear-gradient(45deg, #F0605C, #E5544F);\n color: white;\n text-align: center;\n padding: 20px;\n }\n \n .header h1 {\n font-size: 2rem;\n margin: 0;\n font-weight: 300;\n }\n \n .content {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 0;\n min-height: 600px;\n }\n \n .controls {\n padding: 40px 30px;\n background: #f8f9fa;\n border-right: 1px solid #e9ecef;\n }\n \n .control-group {\n margin-bottom: 35px;\n }\n \n .control-group label {\n display: block;\n font-weight: 600;\n color: #F0605C;\n margin-bottom: 15px;\n font-size: 1.1rem;\n }\n \n .time-inputs {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 15px;\n margin-bottom: 20px;\n }\n \n .input-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n \n .input-group label {\n font-size: 0.9rem;\n color: #6c757d;\n margin-bottom: 8px;\n font-weight: 500;\n }\n \n .time-input {\n width: 100%;\n padding: 12px;\n border: 2px solid #e9ecef;\n border-radius: 10px;\n font-size: 1.2rem;\n text-align: center;\n font-weight: 600;\n transition: all 0.3s ease;\n }\n \n .time-input:focus {\n outline: none;\n border-color: #F0605C;\n box-shadow: 0 0 0 3px rgba(240, 96, 92, 0.1);\n }\n \n .unit-toggle {\n display: flex;\n background: #e9ecef;\n border-radius: 12px;\n padding: 4px;\n position: relative;\n }\n \n .unit-option {\n flex: 1;\n padding: 12px 20px;\n text-align: center;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n border-radius: 8px;\n position: relative;\n z-index: 2;\n }\n \n .unit-option.active {\n background: white;\n color: #F0605C;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n }\n \n .calculate-btn {\n width: 100%;\n padding: 15px;\n background: linear-gradient(45deg, #F0605C, #E5544F);\n color: white;\n border: none;\n border-radius: 12px;\n font-size: 1.1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n margin-top: 20px;\n }\n \n .calculate-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 20px rgba(240, 96, 92, 0.4);\n }\n \n .results {\n padding: 40px 30px;\n overflow-y: auto;\n max-height: 700px;\n }\n \n .results h3 {\n color: #F0605C;\n margin-bottom: 25px;\n font-size: 1.3rem;\n text-align: center;\n }\n \n .results-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.9rem;\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n }\n \n .results-table th {\n background: linear-gradient(45deg, #F0605C, #E5544F);\n color: white;\n padding: 15px 12px;\n font-weight: 600;\n text-align: center;\n font-size: 0.85rem;\n }\n \n .results-table td {\n padding: 12px;\n text-align: center;\n border-bottom: 1px solid #f0f0f0;\n font-weight: 500;\n }\n \n .results-table tr:nth-child(even) {\n background-color: #f8f9fa;\n }\n \n .results-table tr:hover {\n background-color: rgba(240, 96, 92, 0.1);\n }\n \n .distance-label {\n font-weight: 600;\n color: #F0605C;\n }\n \n .highlight-row {\n background-color: rgba(240, 96, 92, 0.1) !important;\n }\n \n .highlight-row:hover {\n background-color: rgba(240, 96, 92, 0.2) !important;\n }\n \n @media (max-width: 768px) {\n .content {\n grid-template-columns: 1fr;\n }\n \n .controls {\n border-right: none;\n border-bottom: 1px solid #e9ecef;\n }\n \n .header h1 {\n font-size: 1.5rem;\n }\n \n .results-table {\n font-size: 0.8rem;\n }\n \n .results-table th,\n .results-table td {\n padding: 8px 6px;\n }\n \n .time-inputs {\n grid-template-columns: 1fr;\n gap: 10px;\n }\n \n .controls, .results {\n padding: 25px 20px;\n }\n }\n \n @media (max-width: 480px) {\n .results-table th,\n .results-table td {\n padding: 6px 4px;\n font-size: 0.75rem;\n }\n \n body {\n padding: 10px 5px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"calculator-container\">\n <div class=\"content\">\n <div class=\"controls\">\n <div class=\"control-group\">\n <label>Oczekiwane tempo<\/label>\n <div class=\"time-inputs\">\n <div class=\"input-group\">\n <label>Protok\u00f3\u0142<\/label>\n <input type=\"number\" id=\"minutes\" class=\"time-input\" value=\"5\" min=\"0\" max=\"30\">\n <\/div>\n <div class=\"input-group\">\n <label>Sekundy<\/label>\n <input type=\"number\" id=\"seconds\" class=\"time-input\" value=\"0\" min=\"0\" max=\"59\">\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"control-group\">\n <label>Jednostka<\/label>\n <div class=\"unit-toggle\">\n <div class=\"unit-option active\" data-unit=\"km\">min\/km<\/div>\n <div class=\"unit-option\" data-unit=\"mi\">min\/mi<\/div>\n <\/div>\n <\/div>\n \n <button class=\"calculate-btn\" onclick=\"calculatePaces()\">\n Obliczanie czasu uko\u0144czenia\n <\/button>\n <\/div>\n \n <div class=\"results\">\n <h3>Szacowany czas zako\u0144czenia<\/h3>\n <table class=\"results-table\" id=\"resultsTable\">\n <thead>\n <tr>\n <th>Odleg\u0142o\u015b\u0107<\/th>\n <th>4:30\/miejsce<\/th>\n <th>5:00\/ tempo<\/th>\n <th>5:30\/miejsce<\/th>\n <th>6:00\/ tempo<\/th>\n <th>6:30\/miejsce<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"resultsBody\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const distances = [\n { label: '1 km', km: 1, mi: 0.62 },\n { label: '1 mi', km: 1.61, mi: 1 },\n { label: '2 km', km: 2, mi: 1.24 },\n { label: '2 mi', km: 3.22, mi: 2 },\n { label: '3 km', km: 3, mi: 1.86 },\n { label: '3 mi', km: 4.83, mi: 3 },\n { label: '5K', km: 5, mi: 3.11 },\n { label: '4 mi', km: 6.44, mi: 4 },\n { label: '5 mi', km: 8.05, mi: 5 },\n { label: '6 mi', km: 9.66, mi: 6 },\n { label: '10K', km: 10, mi: 6.21 },\n { label: '7 mi', km: 11.27, mi: 7 },\n { label: '8 mi', km: 12.87, mi: 8 },\n { label: '9 mi', km: 14.48, mi: 9 },\n { label: '10 mi', km: 16.09, mi: 10 },\n { label: '15K', km: 15, mi: 9.32 },\n { label: 'Half Marathon', km: 21.1, mi: 13.1 },\n { label: '20K', km: 20, mi: 12.43 },\n { label: '15 mi', km: 24.14, mi: 15 },\n { label: '25K', km: 25, mi: 15.53 },\n { label: '20 mi', km: 32.19, mi: 20 },\n { label: '30K', km: 30, mi: 18.64 },\n { label: 'Marathon', km: 42.2, mi: 26.2 },\n { label: '50K', km: 50, mi: 31.07 }\n ];\n\n const paceOptions = [\n { min: 4, sec: 30 },\n { min: 5, sec: 0 },\n { min: 5, sec: 30 },\n { min: 6, sec: 0 },\n { min: 6, sec: 30 }\n ];\n\n let currentUnit = 'km';\n\n \/\/ Unit toggle functionality\n document.querySelectorAll('.unit-option').forEach(option => {\n option.addEventListener('click', function() {\n document.querySelectorAll('.unit-option').forEach(opt => opt.classList.remove('active'));\n this.classList.add('active');\n currentUnit = this.dataset.unit;\n calculatePaces();\n });\n });\n\n \/\/ Auto-calculate on input change with proper event handling\n document.getElementById('minutes').addEventListener('input', function() {\n setTimeout(calculatePaces, 100);\n });\n document.getElementById('seconds').addEventListener('input', function() {\n setTimeout(calculatePaces, 100);\n });\n document.getElementById('minutes').addEventListener('change', calculatePaces);\n document.getElementById('seconds').addEventListener('change', calculatePaces);\n\n function formatTime(totalSeconds) {\n const hours = Math.floor(totalSeconds \/ 3600);\n const minutes = Math.floor((totalSeconds % 3600) \/ 60);\n const seconds = Math.round(totalSeconds % 60);\n \n if (hours > 0) {\n return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n } else {\n return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n }\n }\n\n function calculateFinishTime(distance, paceMinutes, paceSeconds, unit) {\n const paceInSeconds = paceMinutes * 60 + paceSeconds;\n const distanceValue = unit === 'km' ? distance.km : distance.mi;\n return paceInSeconds * distanceValue;\n }\n\n function calculatePaces() {\n const minutes = parseInt(document.getElementById('minutes').value) || 0;\n const seconds = parseInt(document.getElementById('seconds').value) || 0;\n \n \/\/ Update table headers\n const headerRow = document.querySelector('#resultsTable thead tr');\n headerRow.innerHTML = `\n <th>Distance<\/th>\n ${paceOptions.map(pace => \n `<th>${pace.min}:${pace.sec.toString().padStart(2, '0')}\/${currentUnit}<\/th>`\n ).join('')}\n <th style=\"background: linear-gradient(45deg, #F0605C, #E5544F); font-weight: 700;\">\n ${minutes}:${seconds.toString().padStart(2, '0')}\/${currentUnit}\n <\/th>\n `;\n\n const tbody = document.getElementById('resultsBody');\n tbody.innerHTML = '';\n\n distances.forEach(distance => {\n const row = document.createElement('tr');\n \n let cells = `<td class=\"distance-label\">${distance.label}<\/td>`;\n \n \/\/ Calculate times for preset paces\n paceOptions.forEach(pace => {\n const finishTime = calculateFinishTime(distance, pace.min, pace.sec, currentUnit);\n cells += `<td>${formatTime(finishTime)}<\/td>`;\n });\n \n \/\/ Calculate time for user's pace (highlighted column)\n const userFinishTime = calculateFinishTime(distance, minutes, seconds, currentUnit);\n cells += `<td style=\"background: linear-gradient(45deg, #F0605C, #E5544F); color: white; font-weight: 700;\">${formatTime(userFinishTime)}<\/td>`;\n \n row.innerHTML = cells;\n \n \/\/ Highlight popular distances\n if (['5K', '10K', 'Half Marathon', 'Marathon'].includes(distance.label)) {\n row.classList.add('highlight-row');\n }\n \n tbody.appendChild(row);\n });\n }\n\n \/\/ Initialize with default calculation\n calculatePaces();\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t<\/div>\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n\t\t<div id=\"fws_69e0725e2970d\" data-column-margin=\"default\" data-midnight=\"dark\" class=\"wpb_row vc_row-fluid vc_row\" style=\"padding-top: 0px; padding-bottom: 0px; \"><div class=\"row-bg-wrap\" data-bg-animation=\"none\" data-bg-animation-delay=\"\" data-bg-overlay=\"false\"><div class=\"inner-wrap row-bg-layer\" ><div class=\"row-bg viewport-desktop\" style=\"\"><\/div><\/div><\/div><div class=\"row_col_wrap_12 col span_12 dark left\">\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"nectar-split-heading\" data-align=\"default\" data-m-align=\"inherit\" data-text-effect=\"default\" data-animation-type=\"line-reveal-by-space\" data-animation-delay=\"0\" data-animation-offset=\"\" data-m-rm-animation=\"\" data-stagger=\"\" data-custom-font-size=\"false\" ><h1 >Jak Duolingo, ale dla fitnessu<\/h1><\/div>\n<div class=\"wpb_text_column wpb_content_element\" >\n\t<div class=\"wpb_wrapper\">\n\t\t<p>Fito to grywalizowana aplikacja do \u015bledzenia biegania, taka jak <a href=\"https:\/\/www.duolingo.com\/\" rel=\"noopener\">Duolingo<\/a> ale do fitnessu. I ma uroczego ma\u0142ego misia, kt\u00f3ry towarzyszy Ci podczas trening\u00f3w. <a href=\"https:\/\/getfitoapp.com\/pl\/tools\/fitness-streak-widgets-and-watch-faces\/\">wid\u017cety ekranu g\u0142\u00f3wnego<\/a>, daj\u0105c d\u0142ugoterminow\u0105 motywacj\u0119 do biegania.<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div class=\"nectar-cta text_hover_color_FFFFFF alignment_tablet_default alignment_phone_default display_tablet_inherit display_phone_inherit\" data-color=\"accent-color\" data-using-bg=\"true\" data-style=\"basic\" data-display=\"block\" data-alignment=\"left\" data-text-color=\"custom\" ><h3 style=\"color: #FFFFFF;\"><span class=\"link_wrap\" style=\"padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px;\"><a class=\"link_text\" role=\"button\" href=\"https:\/\/getfitoapp.com\/pl\/\"><span class=\"text\">Wypr\u00f3buj teraz<\/span><\/a><\/span><\/h3><\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"img-with-aniamtion-wrap\" data-max-width=\"100%\" data-max-width-mobile=\"default\" data-shadow=\"none\" data-animation=\"none\" >\n <div class=\"inner\">\n <div class=\"hover-wrap\"> \n <div class=\"hover-wrap-inner\">\n <img loading=\"lazy\" decoding=\"async\" class=\"img-with-animation skip-lazy\" data-delay=\"0\" height=\"1525\" width=\"2560\" data-animation=\"none\" src=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-scaled.jpg\" alt=\"Przegl\u0105d serii treningowych z osi\u0105 czasu serii, miesi\u0119cznymi dystansami i przypomnieniami o maskotkach.\" srcset=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-scaled.jpg 2560w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-300x179.jpg 300w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-1024x610.jpg 1024w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-768x458.jpg 768w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-1536x915.jpg 1536w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-2048x1220.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>","protected":false},"excerpt":{"rendered":"Kalkulator i wykresy tempa biegu 5K, 10K, 10 mil, p\u00f3\u0142maraton, maraton i 50K Kalkulator tempa biegu Przewidywane tempo Minuty Sekundy Jednostka min\/km min\/mi Obliczanie czasu uko\u0144czenia Szacowany czas uko\u0144czenia...","protected":false},"author":1,"featured_media":0,"parent":6528,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[39],"class_list":{"0":"post-6558","1":"page","2":"type-page","3":"status-publish","5":"tag-tools"},"_links":{"self":[{"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/pages\/6558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/comments?post=6558"}],"version-history":[{"count":0,"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/pages\/6558\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/pages\/6528"}],"wp:attachment":[{"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/media?parent=6558"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/tags?post=6558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}