{"id":27,"date":"2025-10-08T22:13:04","date_gmt":"2025-10-08T22:13:04","guid":{"rendered":"https:\/\/jakubduda.ovh\/?page_id=27"},"modified":"2026-01-15T12:58:32","modified_gmt":"2026-01-15T12:58:32","slug":"strona-glowna","status":"publish","type":"page","link":"https:\/\/jakubduda.ovh\/","title":{"rendered":""},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"pl\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Twoje Narz\u0119dzia Webowe \u2013 Minimalistyczny Landing Page<\/title>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600&#038;display=swap\" rel=\"stylesheet\">\n    <style>\n        :root {\n            --primary-bg: #ffffff;\n            --secondary-bg: #f8f8f8;\n            --text-primary: #222222;\n            --text-secondary: #666666;\n            --accent-color: #007bff; \/* Mo\u017cesz zmieni\u0107 na np. #5e72e4 (fiolet), #1abc9c (turkus) *\/\n            --border-color: #e0e0e0;\n            --shadow-light: rgba(0, 0, 0, 0.05);\n            --shadow-hover: rgba(0, 0, 0, 0.1);\n        }\n\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        body {\n            font-family: 'Poppins', sans-serif;\n            background-color: var(--primary-bg);\n            color: var(--text-primary);\n            line-height: 1.6;\n            display: flex;\n            flex-direction: column;\n            min-height: 100vh;\n            overflow-x: hidden; \/* Zapobiega poziomemu scrollowaniu *\/\n        }\n\n        header {\n            text-align: center;\n            padding: 80px 20px 60px;\n            background-color: var(--primary-bg);\n        }\n\n        header h1 {\n            font-size: 3.5em;\n            font-weight: 600;\n            margin-bottom: 15px;\n            color: var(--text-primary);\n            animation: fadeIn 1s ease-out;\n        }\n\n        header p {\n            font-size: 1.2em;\n            font-weight: 300;\n            color: var(--text-secondary);\n            max-width: 700px;\n            margin: 0 auto 40px;\n            animation: fadeIn 1.2s ease-out;\n        }\n\n        .cta-button {\n            display: inline-block;\n            padding: 15px 35px;\n            background-color: var(--accent-color);\n            color: #ffffff;\n            text-decoration: none;\n            border-radius: 8px;\n            font-size: 1.1em;\n            font-weight: 500;\n            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;\n            box-shadow: 0 4px 15px var(--shadow-light);\n            animation: fadeIn 1.4s ease-out;\n        }\n\n        .cta-button:hover {\n            background-color: #0056b3; \/* Ciemniejszy odcie\u0144 accent-color *\/\n            transform: translateY(-2px);\n            box-shadow: 0 6px 20px var(--shadow-hover);\n        }\n\n        main {\n            flex-grow: 1;\n            padding: 40px 20px;\n            display: flex;\n            justify-content: center;\n            align-items: flex-start; \/* Aligns content to the top *\/\n        }\n\n        .tools-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            gap: 30px;\n            max-width: 1200px;\n            width: 100%;\n        }\n\n        .tool-card {\n            background-color: var(--secondary-bg);\n            border: 1px solid var(--border-color);\n            border-radius: 12px;\n            padding: 30px;\n            text-align: center;\n            text-decoration: none;\n            color: var(--text-primary);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;\n            position: relative;\n            overflow: hidden;\n            box-shadow: 0 2px 10px var(--shadow-light);\n        }\n\n        .tool-card:hover {\n            transform: translateY(-8px);\n            box-shadow: 0 10px 30px var(--shadow-hover);\n            border-color: var(--accent-color);\n            background-color: var(--primary-bg);\n        }\n\n        .tool-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 123, 255, 0.1) 0%, transparent 70%);\n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n\n        .tool-card:hover::before {\n            opacity: 1;\n        }\n\n        .tool-card .icon {\n            font-size: 3.5em;\n            margin-bottom: 20px;\n            color: var(--text-secondary);\n            transition: color 0.3s ease, transform 0.3s ease;\n            line-height: 1; \/* Ensures icon is properly centered *\/\n        }\n\n        .tool-card:hover .icon {\n            color: var(--accent-color);\n            transform: scale(1.1);\n        }\n\n        .tool-card h3 {\n            font-size: 1.5em;\n            font-weight: 500;\n            margin-bottom: 10px;\n            color: var(--text-primary);\n            transition: color 0.3s ease;\n        }\n\n        .tool-card:hover h3 {\n            color: var(--accent-color);\n        }\n\n        .tool-card p {\n            font-size: 0.95em;\n            color: var(--text-secondary);\n            font-weight: 300;\n            line-height: 1.4;\n        }\n\n        \/* Ikony SVG - dostosuj lub zast\u0105p innymi *\/\n        .icon svg {\n            width: 1em;\n            height: 1em;\n            fill: currentColor;\n            vertical-align: middle;\n        }\n\n        footer {\n            text-align: center;\n            padding: 40px 20px;\n            margin-top: 60px;\n            background-color: var(--secondary-bg);\n            border-top: 1px solid var(--border-color);\n            color: var(--text-secondary);\n            font-size: 0.9em;\n        }\n\n        footer .social-links a {\n            color: var(--text-secondary);\n            margin: 0 15px;\n            text-decoration: none;\n            transition: color 0.3s ease;\n        }\n\n        footer .social-links a:hover {\n            color: var(--accent-color);\n        }\n\n        \/* Responsive adjustments *\/\n        @media (max-width: 768px) {\n            header h1 {\n                font-size: 2.5em;\n            }\n            header p {\n                font-size: 1em;\n            }\n            .cta-button {\n                padding: 12px 30px;\n                font-size: 1em;\n            }\n            .tools-grid {\n                grid-template-columns: 1fr;\n            }\n            .tool-card {\n                padding: 25px;\n            }\n            .tool-card .icon {\n                font-size: 3em;\n            }\n            .tool-card h3 {\n                font-size: 1.3em;\n            }\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(20px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <header>\n        <h1>Narz\u0119dzia Webowe<\/h1>\n        <p>Narz\u0119dzia stworzone z my\u015bl\u0105 o u\u0142atwieniu i przyspieszeniu pracy.<\/p>\n    <\/header>\n\n    <main id=\"tools\">\n        <div class=\"tools-grid\">\n            <!-- Przyk\u0142ad kafelka \"Narz\u0119dzie \u015aredniki\" -->\n            <a href=\"sredniki.html\" class=\"tool-card\">\n                <div class=\"icon\">\n                    &#59;\n                <\/div>\n                <h3>Narz\u0119dzie \u015aredniki<\/h3>\n                <!-- <p>Opis<\/p> -->\n            <\/a>\n\n            <!-- Przyk\u0142ad kafelka \"Narz\u0119dzie Przebiegi\" -->\n            <a href=\"\/wp-content\/pages\/przebiegi.html\" class=\"tool-card\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/>\n                    <\/svg>\n                <\/div>\n                <h3>Narz\u0119dzie Przebiegi<\/h3>\n                <!-- <p>Opis<\/p> -->\n            <\/a>\n\n            <!-- Przyk\u0142ad kafelka \"Narz\u0119dzie Strefy\" -->\n            <a href=\"\/wp-content\/pages\/strefy.html\" class=\"tool-card\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a10 10 0 0 0 0 20a10 10 0 0 0 0-20z\"\/><path d=\"M12 2v20\"\/><path d=\"M17.84 7.17L12 12L6.16 7.17\"\/>\n                    <\/svg>\n                <\/div>\n                <h3>Narz\u0119dzie Strefy<\/h3>\n                <!-- <p>Opis<\/p> -->\n            <\/a>\n\n            <!-- Przyk\u0142ad kafelka \"Konwerter FN\" -->\n            <a href=\"\/wp-content\/pages\/fn.html\" class=\"tool-card\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M18 8H6c-2.21 0-4 1.79-4 4s1.79 4 4 4h12c2.21 0 4-1.79 4-4s-1.79-4-4-4zM6 12h12M9 12V6M9 18v-6\"\/>\n                    <\/svg>\n                <\/div>\n                <h3>Konwerter FN<\/h3>\n                <!-- <p>Opis<\/p> -->\n            <\/a>\n\n            <!-- Przyk\u0142ad kafelka \"Konwerter Bolt\" -->\n            <a href=\"\/wp-content\/pages\/bt.html\" class=\"tool-card\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M18 8H6c-2.21 0-4 1.79-4 4s1.79 4 4 4h12c2.21 0 4-1.79 4-4s-1.79-4-4-4zM6 12h12M9 12V6M9 18v-6\"\/>\n                    <\/svg>\n                <\/div>\n                <h3>Konwerter BT<\/h3>\n                <!-- <p>Opis<\/p> -->\n            <\/a>\n\n            <!-- Kafelek \"Wkr\u00f3tce\" -->\n            <a href=\"trdx.html\" class=\"tool-card coming-soon\">\n                <div class=\"icon\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4l3 3\"\/>\n                    <\/svg>\n                <\/div>\n                <h3>Konwerter TRDX<\/h3>\n               <!-- <p>Opis<\/p> -->\n            <\/a>\n        <\/div>\n    <\/main>\n\n    <script>\n        document.querySelectorAll('.tool-card').forEach(card => {\n            card.addEventListener('mousemove', (e) => {\n                const rect = card.getBoundingClientRect();\n                const x = e.clientX - rect.left;\n                const y = e.clientY - rect.top;\n                card.style.setProperty('--mouse-x', `${x \/ rect.width * 100}%`);\n                card.style.setProperty('--mouse-y', `${y \/ rect.height * 100}%`);\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twoje Narz\u0119dzia Webowe \u2013 Minimalistyczny Landing Page Narz\u0119dzia Webowe Narz\u0119dzia stworzone z my\u015bl\u0105 o u\u0142atwieniu i przyspieszeniu pracy. &#59; Narz\u0119dzie \u015aredniki Narz\u0119dzie Przebiegi Narz\u0119dzie Strefy Konwerter FN Konwerter BT Konwerter [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/template-canvas.php","meta":{"footnotes":""},"class_list":["post-27","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jakubduda.ovh\/index.php\/wp-json\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakubduda.ovh\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jakubduda.ovh\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jakubduda.ovh\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jakubduda.ovh\/index.php\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":16,"href":"https:\/\/jakubduda.ovh\/index.php\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":59,"href":"https:\/\/jakubduda.ovh\/index.php\/wp-json\/wp\/v2\/pages\/27\/revisions\/59"}],"wp:attachment":[{"href":"https:\/\/jakubduda.ovh\/index.php\/wp-json\/wp\/v2\/media?parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}