{"id":5,"date":"2026-02-15T10:57:03","date_gmt":"2026-02-15T09:57:03","guid":{"rendered":"https:\/\/www.nasesvatba-ap.cz\/?page_id=5"},"modified":"2026-02-15T12:15:38","modified_gmt":"2026-02-15T11:15:38","slug":"5-2","status":"publish","type":"page","link":"https:\/\/www.nasesvatba-ap.cz\/?page_id=5","title":{"rendered":"Svatba Petr &amp; Al\u017eb\u011bta"},"content":{"rendered":"\n<!-- \nINSTRUKCE:\nTento k\u00f3d obsahuje \"\u00fanikov\u00fd skript\". I kdy\u017e ho vlo\u017e\u00edte doprost\u0159ed str\u00e1nky, \ns\u00e1m se p\u0159esune a p\u0159ekryje cel\u00fd web v\u010detn\u011b hlavi\u010dky a menu WordPressu.\nSta\u010d\u00ed vlo\u017eit do bloku \"Vlastn\u00ed HTML\".\n-->\n\n<div id=\"wedding-teleport-container\">\n    <!-- Tento kontejner bude skriptem p\u0159esunut na konec <body> -->\n    \n    <!-- Na\u010dten\u00ed knihoven -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\n    <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n    <style>\n        \/* Import font\u016f *\/\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Montserrat:wght@200;300;400;500&display=swap');\n\n        \/* STYL PRO P\u0158EKRYT\u00cd CEL\u00c9 STR\u00c1NKY *\/\n        #wedding-full-overlay {\n            position: fixed !important;\n            top: 0 !important;\n            left: 0 !important;\n            width: 100vw !important;\n            height: 100vh !important;\n            background-color: #FAF8F5;\n            z-index: 2147483647 !important; \/* Maxim\u00e1ln\u00ed mo\u017en\u00e1 hodnota *\/\n            overflow-y: auto;\n            overflow-x: hidden;\n            font-family: 'Montserrat', sans-serif;\n        }\n\n        \/* Skryt\u00ed scrollbaru p\u016fvodn\u00edho WordPressu, aby nebyly dva *\/\n        body.wedding-active {\n            overflow: hidden !important;\n        }\n\n        \/* Styly uvnit\u0159 aplikace *\/\n        #wedding-full-overlay .font-serif { font-family: 'Cormorant Garamond', serif; }\n        #wedding-full-overlay .font-sans { font-family: 'Montserrat', sans-serif; }\n        \n        .fade-in-up { animation: fadeInUp 1.2s ease-out forwards; opacity: 0; transform: translateY(20px); }\n        @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }\n        .animate-spin-slow { animation: spin 12s linear infinite; }\n        @keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }\n    <\/style>\n\n    <!-- Zde se vykresl\u00ed aplikace -->\n    <div id=\"root\"><\/div>\n\n    <script type=\"text\/babel\">\n        \/\/ --- 1. TELEPORTACE APLIKACE ---\n        \/\/ Tento k\u00f3d zajist\u00ed, \u017ee se aplikace vyt\u00e1hne z obsahu str\u00e1nky a vlo\u017e\u00ed se p\u0159\u00edmo do BODY\n        const moveAppToBody = () => {\n            \/\/ Vytvo\u0159\u00edme nov\u00fd hlavn\u00ed kontejner p\u0159\u00edmo v body\n            const overlay = document.createElement('div');\n            overlay.id = 'wedding-full-overlay';\n            document.body.appendChild(overlay);\n            \n            \/\/ Zablokujeme scrollov\u00e1n\u00ed na p\u016fvodn\u00ed WordPress str\u00e1nce\n            document.body.classList.add('wedding-active');\n\n            \/\/ \u0158ekneme Reactu, aby se vykreslil do tohoto nov\u00e9ho overlaye\n            return ReactDOM.createRoot(overlay);\n        };\n\n        const root = moveAppToBody();\n\n        \/\/ --- 2. SAMOTN\u00c1 APLIKACE (Stejn\u00e1 jako d\u0159\u00edve) ---\n        const { useState, useEffect } = React;\n\n        const IconBase = ({ children, className }) => (\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>{children}<\/svg>\n        );\n        const Heart = ({ className }) => <IconBase className={className}><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\/><\/IconBase>;\n        const Calendar = ({ className }) => <IconBase className={className}><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"\/><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"\/><line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"\/><\/IconBase>;\n        const MapPin = ({ className }) => <IconBase className={className}><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/IconBase>;\n        const Clock = ({ className }) => <IconBase className={className}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/IconBase>;\n        const Utensils = ({ className }) => <IconBase className={className}><path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"\/><path d=\"M7 2v20\"\/><path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"\/><\/IconBase>;\n        const Music = ({ className }) => <IconBase className={className}><path d=\"M9 18V5l12-2v13\"\/><circle cx=\"6\" cy=\"18\" r=\"3\"\/><circle cx=\"18\" cy=\"16\" r=\"3\"\/><\/IconBase>;\n        const GlassWater = ({ className }) => <IconBase className={className}><path d=\"M15.2 22H8.8a2 2 0 0 1-2-1.79L5 3h14l-1.81 17.21A2 2 0 0 1 15.2 22Z\"\/><path d=\"M6 12h12\"\/><path d=\"M5.6 6h12.8\"\/><\/IconBase>;\n        const Moon = ({ className }) => <IconBase className={className}><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"\/><\/IconBase>;\n\n        const App = () => {\n            const [activeTab, setActiveTab] = useState('home');\n            const [isVisible, setIsVisible] = useState(false);\n\n            useEffect(() => {\n                setIsVisible(true);\n            }, []);\n\n            return (\n                <div className=\"min-h-screen text-[#2C2C2C]\">\n                    {\/* Navigation *\/}\n                    <nav className=\"fixed top-0 left-0 right-0 w-full bg-[#FAF8F5]\/95 backdrop-blur-sm bg-white\/90 z-[50] border-b border-[#ecc813]\/20 transition-all duration-300\">\n                        <div className=\"max-w-4xl mx-auto px-6 py-4 flex justify-between items-center\">\n                            <div \n                                className=\"font-serif text-2xl tracking-wider cursor-pointer text-[#ecc813]\"\n                                onClick={() => setActiveTab('home')}\n                            ><strong>\n                                Svatba P & A<\/strong>\n                            <\/div>\n                            <div className=\"flex space-x-8 text-sm uppercase tracking-widest font-light\">\n                                <button \n                                    onClick={() => setActiveTab('home')}\n                                    className={`transition-colors duration-300 hover:text-[#ecc813] ${activeTab === 'home' ? 'text-[#ecc813] font-medium border-b border-[#ecc813]' : 'text-gray-500'}`}\n                                >\n                                    Svatba\n                                <\/button>\n                                <button \n                                    onClick={() => setActiveTab('schedule')}\n                                    className={`transition-colors duration-300 hover:text-[#ecc813] ${activeTab === 'schedule' ? 'text-[#ecc813] font-medium border-b border-[#ecc813]' : 'text-gray-500'}`}\n                                >\n                                    Harmonogram\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/nav>\n\n                    {\/* Main Content *\/}\n                    <main className=\"pt-24 pb-20 px-4\">\n                        <div className={`max-w-3xl mx-auto transition-opacity duration-700 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>\n                            {activeTab === 'home' ? <HomeSection \/> : <ScheduleSection \/>}\n                        <\/div>\n                    <\/main>\n\n                    {\/* Footer *\/}\n                    <footer className=\"py-8 text-center border-t border-[#ecc813]\/20 bg-white\">\n                        <div className=\"font-serif italic text-[#ecc813] text-lg\">T\u011b\u0161\u00edme se na v\u00e1s<\/div>\n                        <div className=\"mt-2 text-xs uppercase tracking-widest text-gray-400\">Petr & Al\u017eb\u011bta \u2022 2026<\/div>\n                    <\/footer>\n                <\/div>\n            );\n        };\n\n        const HomeSection = () => {\n            return (\n                <div className=\"space-y-24 fade-in-up\">\n                    <header className=\"text-center py-12 relative\">\n                        <div className=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-64 h-64 border border-[#ecc813]\/10 rounded-full animate-spin-slow pointer-events-none\"><\/div>\n                        <div className=\"relative z-10\">\n                            <div className=\"text-xs uppercase tracking-[0.3em] text-gray-500 mb-4\">S radost\u00ed oznamujeme na\u0161i svatbu<\/div>\n                            <h1 className=\"font-serif text-6xl md:text-8xl text-[#2C2C2C] mb-4\">\n                                Petr <span className=\"text-[#ecc813]\">&<\/span> Al\u017eb\u011bta\n                            <\/h1>\n                            <div className=\"flex flex-col justify-center items-center gap-6 mt-12 text-[#5A5A5A] font-light tracking-wide\">\n                                <div className=\"flex items-center gap-2\">\n                                    <Calendar className=\"w-4 h-4 text-[#ecc813]\" \/>\n                                    <span><strong>03. \u0159\u00edjna 2026<\/strong><\/span>\n                                <\/div>\n                                <div className=\"flex items-center gap-2\">\n                                    <MapPin className=\"w-4 h-4 text-[#ecc813]\" \/>\n                                    <span><strong>Hotel & Garden U Holub\u016f<\/strong><\/span>\n                                <\/div>\n\t\t\t\t<div className=\"flex items-center gap-2\">\n                                    <span>\u010celadn\u00e1 0808, 739 12<\/span>\n                                <\/div>\n\t\t\t\t<div className=\"flex items-center gap-2\">\n                                    <span><a href=\"https:\/\/www.uholubu.com\/\">www.uholubu.cz<\/a><\/span>\n                                <\/div>\n\n                            <\/div>\n                        <\/div>\n                    <\/header>\n\n                    <div className=\"flex justify-center items-center gap-4 opacity-40\">\n                        <div className=\"h-px w-24 bg-gradient-to-r from-transparent to-[#ecc813]\"><\/div>\n                        <Heart className=\"w-4 h-4 text-[#ecc813] fill-current\" \/>\n                        <div className=\"h-px w-24 bg-gradient-to-l from-transparent to-[#ecc813]\"><\/div>\n                    <\/div>\n\n                    <section id=\"rsvp\" className=\"bg-white p-8 md:p-12 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.05)] border border-[#ecc813]\/20 rounded-sm relative overflow-hidden\">\n                        <div className=\"absolute top-0 right-0 w-20 h-20 bg-[#FAF8F5] rounded-bl-full -mr-10 -mt-10 z-0\"><\/div>\n                        <div className=\"relative z-10\">\n                            <h2 className=\"font-serif text-4xl text-center mb-2 text-[#2C2C2C]\">R.S.V.P.<\/h2>\n                            <p className=\"text-center text-gray-500 text-sm mb-10 tracking-wider uppercase\"><strong>Pros\u00edme o potvrzen\u00ed \u00fa\u010dasti do 31. b\u0159ezna<\/strong><\/p>\n                            <RsvpForm \/>\n                        <\/div>\n                    <\/section>\n                <\/div>\n            );\n        };\n\n        const RsvpForm = () => {\n            const googleFormSrc = \"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSdY6MmLvooztsM3Gk2p6bOUKn1jYrGzftuT4db4--Yk541U4Q\/viewform?embedded=true\";\n            return (\n                <div className=\"w-full flex justify-center bg-[#FAF8F5]\/50 p-4 rounded-sm border border-[#ecc813]\/10\">\n                    <div className=\"w-full max-w-[640px]\">\n                        <iframe src={googleFormSrc} width=\"100%\" height=\"1100\" frameBorder=\"0\" marginHeight=\"0\" marginWidth=\"0\" title=\"Svatebn\u00ed formul\u00e1\u0159\" className=\"bg-transparent mx-auto\">Na\u010d\u00edt\u00e1n\u00ed\u2026<\/iframe>\n                    <\/div>\n                <\/div>\n            );\n        };\n\n        const ScheduleSection = () => {\n            const events = [\n                { time: \"12:30\", title: \"P\u0159\u00edjezd host\u016f\", desc: \"Welcome drink na n\u00e1dvo\u0159\u00ed z\u00e1mku\", icon: GlassWater },\n                { time: \"13:00\", title: \"Svatebn\u00ed ob\u0159ad\", desc: \"V z\u00e1meck\u00e9 zahrad\u011b pod alt\u00e1nem\", icon: Heart },\n                { time: \"14:00\", title: \"Spole\u010dn\u00e9 focen\u00ed\", desc: \"Skupinov\u00e9 fotografie\", icon: Calendar },\n                { time: \"15:00\", title: \"Slavnostn\u00ed hostina\", desc: \"Tradi\u010dn\u00ed ob\u011bd v Zrcadlov\u00e9m s\u00e1le\", icon: Utensils },\n                { time: \"17:00\", title: \"Kr\u00e1jen\u00ed dortu\", desc: \"A odpoledn\u00ed k\u00e1va na terase\", icon: Utensils },\n                { time: \"18:00\", title: \"Prvn\u00ed tanec\", desc: \"Zah\u00e1jen\u00ed ve\u010dern\u00ed z\u00e1bavy\", icon: Music },\n                { time: \"21:00\", title: \"Ve\u010dern\u00ed raut\", desc: \"Tepl\u00fd a studen\u00fd bufet\", icon: GlassWater },\n                { time: \"23:00\", title: \"Prskavkov\u00fd tanec\", desc: \"Romantick\u00e9 rozlou\u010den\u00ed pod hv\u011bzdami\", icon: Moon },\n            ];\n\n            return (\n                <div className=\"fade-in-up py-8\">\n                    <div className=\"text-center mb-16\">\n                        <h2 className=\"font-serif text-4xl md:text-5xl text-[#2C2C2C] mb-4\">Svatebn\u00ed Harmonogram<\/h2>\n                        <div className=\"h-px w-24 bg-[#ecc813] mx-auto\"><\/div>\n                    <\/div>\n                    <div className=\"relative\">\n                        <div className=\"absolute left-4 md:left-1\/2 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-[#ecc813]\/40 to-transparent\"><\/div>\n                        <div className=\"space-y-12\">\n                            {events.map((item, index) => {\n                                const Icon = item.icon;\n                                const isLeft = index % 2 === 0;\n                                return (\n                                    <div key={index} className={`relative flex items-center ${isLeft ? 'md:flex-row' : 'md:flex-row-reverse'} flex-row`}>\n                                        <div className={`flex-1 ${isLeft ? 'md:text-right pl-12 md:pl-0 md:pr-12' : 'pl-12 md:pl-12'} text-left`}>\n                                            <div className={`inline-flex items-center gap-2 mb-1 ${isLeft ? 'md:flex-row-reverse' : ''}`}>\n                                                <span className=\"font-serif text-2xl text-[#ecc813] font-semibold\">{item.time}<\/span>\n                                            <\/div>\n                                            <h3 className=\"text-lg uppercase tracking-widest font-medium text-[#2C2C2C]\">{item.title}<\/h3>\n                                            <p className=\"text-gray-500 font-light text-sm mt-1\">{item.desc}<\/p>\n                                        <\/div>\n                                        <div className=\"absolute left-4 md:left-1\/2 -translate-x-1\/2 w-8 h-8 bg-[#FAF8F5] border border-[#ecc813] rounded-full flex items-center justify-center z-10 shadow-sm\">\n                                           <Icon className=\"w-3 h-3 text-[#ecc813]\" \/>\n                                        <\/div>\n                                        <div className=\"hidden md:block flex-1\"><\/div>\n                                    <\/div>\n                                );\n                            })}\n                        <\/div>\n                    <\/div>\n                    <div className=\"mt-20 text-center p-8 bg-white border border-[#ecc813]\/10 mx-4 md:mx-0\">\n                        <p className=\"font-serif italic text-gray-600\">\"\u010casy jsou orienta\u010dn\u00ed, hlavn\u00edm bodem programu je oslava na\u0161\u00ed l\u00e1sky s v\u00e1mi.\"<\/p>\n                    <\/div>\n                <\/div>\n            );\n        };\n\n        \/\/ Renderujeme aplikaci do na\u0161eho \"teleportovan\u00e9ho\" kontejneru\n        root.render(<App \/>);\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5"}],"version-history":[{"count":20,"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/pages\/5\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}