{"id":105,"date":"2026-02-15T21:32:38","date_gmt":"2026-02-15T20:32:38","guid":{"rendered":"https:\/\/www.nasesvatba-ap.cz\/?page_id=105"},"modified":"2026-04-03T09:37:05","modified_gmt":"2026-04-03T07:37:05","slug":"svatba-draft-psacim-pismem","status":"publish","type":"page","link":"https:\/\/www.nasesvatba-ap.cz\/","title":{"rendered":"Svatba P&amp;A"},"content":{"rendered":"\n<!-- \nINSTRUKCE PRO WORDPRESS:\n1. Sma\u017ete ve\u0161ker\u00fd p\u0159edchoz\u00ed k\u00f3d v bloku \"Vlastn\u00ed HTML\".\n2. Vlo\u017ete tento nov\u00fd k\u00f3d.\n3. Ulo\u017ete.\n-->\n\n<div id=\"wedding-teleport-container\">\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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&#038;family=Great+Vibes&#038;family=Pinyon+Script&#038;family=Montserrat:wght@200;300;400;500&#038;family=Playfair+Display:ital,wght@1,400&#038;display=swap\" rel=\"stylesheet\">\n\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        \/* Overlay *\/\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: #F0EFEB; \n            z-index: 2147483647 !important;\n            overflow-y: auto;\n            overflow-x: hidden;\n            font-family: 'Montserrat', sans-serif;\n        }\n\n        body.wedding-active { overflow: hidden !important; }\n\n        #wedding-full-overlay .font-serif { font-family: 'Cormorant Garamond', serif; }\n        #wedding-full-overlay .font-sans { font-family: 'Montserrat', sans-serif; }\n        #wedding-full-overlay .font-ampersand { font-family: 'Playfair Display', serif; }\n        \n        #wedding-full-overlay .font-script { \n            font-family: 'Great Vibes', cursive; \n        }\n\n        .fade-in { animation: fadeIn 1.5s ease-out forwards; opacity: 0; }\n        @keyframes fadeIn { to { opacity: 1; } }\n        \n        .slide-up { animation: slideUp 1s ease-out forwards; opacity: 0; transform: translateY(30px); }\n        @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }\n\n        .wedding-card {\n            background-color: #FFFCF8;\n            box-shadow: 0 20px 60px -15px rgba(0,0,0,0.1);\n            position: relative;\n        }\n\n        .double-border-frame {\n            position: absolute;\n            top: 12px; left: 12px; right: 12px; bottom: 12px;\n            border: 1px solid #D4AF37;\n            pointer-events: none;\n            z-index: 10;\n        }\n        .double-border-frame::after {\n            content: '';\n            position: absolute;\n            top: 4px; left: 4px; right: 4px; bottom: 4px;\n            border: 1px solid rgba(212, 175, 55, 0.4);\n        }\n    <\/style>\n\n    <div id=\"root\"><\/div>\n\n    <script type=\"text\/babel\">\n        const moveAppToBody = () => {\n            const existing = document.getElementById('wedding-full-overlay');\n            if (existing) existing.remove();\n            const overlay = document.createElement('div');\n            overlay.id = 'wedding-full-overlay';\n            document.body.appendChild(overlay);\n            document.body.classList.add('wedding-active');\n            return ReactDOM.createRoot(overlay);\n        };\n        const root = moveAppToBody();\n\n        const { useState, useEffect } = React;\n\n        \/\/ --- IKONY ---\n        const Icon = ({ name, className }) => {\n            let content = null;\n            switch (name) {\n                case 'calendar':\n                    content = <g><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\"\/><\/g>;\n                    break;\n                case 'clock':\n                    content = <g><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/g>;\n                    break;\n                case 'mapPin':\n                    content = <g><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\"\/><\/g>;\n                    break;\n                case 'heart':\n                    content = <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\"\/>;\n                    break;\n                case 'glass':\n                    content = <path d=\"M8 2h8l-2 11c0 .5-.5 1-1 1H9c-.5 0-1-.5-1-1L8 2Z m0 17v3 m-3 0h6\"\/>;\n                    break;\n                case 'utensils':\n                    content = <path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2 M7 2v20 M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"\/>;\n                    break;\n                case 'music':\n                    content = <g><path d=\"M9 18V5l12-2v13\"\/><circle cx=\"6\" cy=\"18\" r=\"3\"\/><circle cx=\"18\" cy=\"16\" r=\"3\"\/><\/g>;\n                    break;\n                case 'moon':\n                    content = <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"\/>;\n                    break;\n                default:\n                    return null;\n            }\n\n            return (\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n                    {content}\n                <\/svg>\n            );\n        };\n\n        const App = () => {\n            const [activeTab, setActiveTab] = useState('home');\n\n            return (\n                <div className=\"min-h-screen flex flex-col items-center py-8 px-4 md:py-12 md:px-6\">\n                    <div className=\"wedding-card w-full max-w-5xl min-h-[85vh] rounded-sm flex flex-col fade-in relative overflow-hidden\">\n                        <div className=\"double-border-frame\"><\/div>\n\n                        <header className=\"relative z-20 pt-12 pb-8 px-8 text-center\">\n                            <div className=\"font-serif text-3xl text-[#D4AF37] mb-8 cursor-pointer tracking-widest\" onClick={() => setActiveTab('home')}>A & P<\/div>\n                            \n                            <nav className=\"flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-12 border-b border-[#D4AF37]\/20 pb-4 w-full max-w-3xl mx-auto\">\n                                <NavBtn label=\"Svatba\" isActive={activeTab === 'home'} onClick={() => setActiveTab('home')} \/>\n                                <NavBtn label=\"Potvrzen\u00ed \u00fa\u010dasti\" isActive={activeTab === 'rsvp'} onClick={() => setActiveTab('rsvp')} \/>\n                                <NavBtn label=\"Harmonogram\" isActive={activeTab === 'schedule'} onClick={() => setActiveTab('schedule')} \/>\n                            <\/nav>\n                        <\/header>\n\n                        <main className=\"flex-grow relative z-20 px-6 py-8 md:px-16 flex flex-col items-center justify-center\">\n                            {activeTab === 'home' && <HomeSection navigateToRsvp={() => setActiveTab('rsvp')} \/>}\n                            {activeTab === 'schedule' && <ScheduleSection \/>}\n                            {activeTab === 'rsvp' && <RsvpSection \/>}\n                        <\/main>\n\n                        <footer className=\"relative z-20 py-6 text-center text-[10px] uppercase tracking-[0.25em] text-gray-400\">\n                            Al\u017eb\u011bta & Petr \u2022 2026\n                        <\/footer>\n                    <\/div>\n                <\/div>\n            );\n        };\n\n        const NavBtn = ({ label, isActive, onClick }) => (\n            <button \n                onClick={onClick} \n                className={`text-xs uppercase tracking-[0.2em] transition-all duration-300 pb-1 ${isActive ? 'text-[#D4AF37] border-b border-[#D4AF37] font-medium' : 'text-gray-400 hover:text-[#D4AF37]'}`}\n            >\n                {label}\n            <\/button>\n        );\n\n        const HomeSection = ({ navigateToRsvp }) => (\n            <div className=\"text-center w-full max-w-2xl slide-up\">\n                \n                <div \n                    className=\"relative w-full rounded-sm overflow-hidden mb-12 shadow-sm border border-[#D4AF37]\/10\"\n                    style={{\n                        backgroundImage: `url('https:\/\/www.nasesvatba-ap.cz\/wp-content\/uploads\/2026\/02\/Gemini_Generated_Image_wlcve9wlcve9wlcv.png')`,\n                        backgroundSize: 'cover',\n                        backgroundPosition: 'center'\n                    }}\n                >\n                    <div className=\"absolute inset-0 bg-white\/70\"><\/div>\n\n                    <div className=\"relative z-10 py-16 px-6\">\n                        {\/* ZLAT\u00dd TEXT *\/}\n                        <div className=\"text-[10px] md:text-xs uppercase tracking-[0.4em] text-[#D4AF37] mb-6 font-medium\">\n                            Srde\u010dn\u011b V\u00e1s zveme na na\u0161i svatbu\n                        <\/div>\n                        \n                        <h1 className=\"font-script text-5xl md:text-7xl lg:text-8xl text-[#222] mb-8 leading-none drop-shadow-sm pb-2 whitespace-nowrap\">\n                            Al\u017eb\u011bta <span className=\"text-[#D4AF37] font-ampersand italic text-3xl md:text-6xl align-middle mx-2\">&<\/span> Petr\n                        <\/h1>\n\n                        <div className=\"h-px w-20 bg-[#D4AF37] mx-auto mb-10 opacity-60\"><\/div>\n\n                        <div className=\"flex flex-col gap-8 text-gray-700 font-light\">\n                            <InfoBlock icon=\"calendar\" title=\"Datum\" text=\"03. \u0159\u00edjna 2026\" \/>\n                            \n                            {\/* UPRAVENO: Blok \"M\u00edsto\" nyn\u00ed obsahuje dva odkazy *\/}\n                            <InfoBlock \n                                icon=\"mapPin\" \n                                title=\"M\u00edsto\" \n                                text={<>Hotel & Garden U Holub\u016f<br\/>\u010celadn\u00e1<\/>} \n                                link=\"https:\/\/www.uholubu.com\" \n                                linkText=\"www.uholubu.com\" \n                                link2=\"https:\/\/mapy.cz\/s\/covefujosu\"\n                                linkText2=\"Zobrazit na map\u011b\"\n                            \/>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <p className=\"text-[10px] md:text-xs uppercase tracking-widest text-gray-400 mb-6 font-sans\">\n                    Pros\u00edme potvr\u010fte svou \u00fa\u010dast do 19. dubna 2026\n                <\/p>\n\n                <button \n                    onClick={navigateToRsvp}\n                    className=\"inline-block px-12 py-4 bg-[#D4AF37] border border-[#D4AF37] text-white font-sans text-xs uppercase tracking-[0.2em] hover:bg-[#b8962e] hover:border-[#b8962e] transition-all duration-300 shadow-md hover:shadow-lg\"\n                >\n                    Potvrdit \u00fa\u010dast\n                <\/button>\n            <\/div>\n        );\n\n        \/* UPRAVENO: InfoBlock nyn\u00ed podporuje link2 a linkText2 *\/\n        const InfoBlock = ({ icon, title, text, link, linkText, link2, linkText2 }) => (\n            <div className=\"flex flex-col items-center\">\n                <div className=\"mb-3 text-[#D4AF37]\">\n                    <Icon name={icon} className=\"w-5 h-5\" \/>\n                <\/div>\n                <h3 className=\"uppercase text-[10px] tracking-widest text-gray-500 mb-1 font-semibold\">{title}<\/h3>\n                <div className=\"text-lg font-serif italic text-gray-900 text-center\">\n                    {text}\n                <\/div>\n                \n                {\/* Prvn\u00ed odkaz *\/}\n                {link && (\n                    <a href={link} target=\"_blank\" className=\"text-xs text-[#D4AF37] hover:underline mt-2 font-sans block\">\n                        {linkText}\n                    <\/a>\n                )}\n                \n                {\/* Druh\u00fd odkaz *\/}\n                {link2 && (\n                    <a href={link2} target=\"_blank\" className=\"text-xs text-[#D4AF37] hover:underline mt-1 font-sans block\">\n                        {linkText2}\n                    <\/a>\n                )}\n            <\/div>\n        );\n\n        const ScheduleSection = () => {\n            const events = [\n                { time: \"Bude up\u0159esn\u011bno\", title: \"P\u0159\u00edjezd host\u016f\", desc: \"Welcome drink\", icon: \"glass\" },\n                { time: \"Bude up\u0159esn\u011bno\", title: \"Svatebn\u00ed ob\u0159ad\", desc: \"Bude up\u0159esn\u011bno\", icon: \"heart\" },\n                { time: \"Bude up\u0159esn\u011bno\", title: \"Spole\u010dn\u00e9 focen\u00ed\", desc: \"Bude up\u0159esn\u011bno\", icon: \"calendar\" },\n                { time: \"Bude up\u0159esn\u011bno\", title: \"Slavnostn\u00ed hostina\", desc: \"Hlavn\u00ed s\u00e1l\", icon: \"utensils\" },\n                { time: \"Bude up\u0159esn\u011bno\", title: \"Kr\u00e1jen\u00ed dortu\", desc: \"Hlavn\u00ed s\u00e1l\", icon: \"utensils\" },\n                { time: \"Bude up\u0159esn\u011bno\", title: \"Prvn\u00ed tanec\", desc: \"Tane\u010dn\u00ed parket\", icon: \"music\" },\n                { time: \"Bude up\u0159esn\u011bno\", title: \"Ve\u010dern\u00ed raut\", desc: \"Hlavn\u00ed s\u00e1l\", icon: \"glass\" },\n                { time: \"Bude up\u0159esn\u011bno\", title: \"Ve\u010dern\u00ed z\u00e1bava\", desc: \"Hlavn\u00ed s\u00e1l\", icon: \"moon\" },\n            ];\n\n            return (\n                <div className=\"w-full max-w-lg slide-up text-center\">\n                    <h2 className=\"font-serif text-4xl text-[#222] mb-12\">Harmonogram<\/h2>\n                    <p className=\"font-serif text-xl text-gray-600 italic mb-8\">\n                        Harmonogram pro v\u00e1s p\u0159ipravujeme.\n                    <\/p>\n                    \n                    <div className=\"relative\">\n                        <div className=\"absolute left-1\/2 top-0 bottom-0 w-px bg-[#D4AF37]\/30 -translate-x-1\/2\"><\/div>\n\n                        {events.map((e, i) => (\n                            <div key={i} className=\"flex flex-row items-center justify-between py-4 relative z-10\">\n                                \n                                <div className=\"w-[42%] md:w-[45%] text-right pr-3 md:pr-8\">\n                                    <span className=\"font-serif text-lg md:text-xl text-[#D4AF37] font-semibold block leading-tight\">\n                                        {e.time}\n                                    <\/span>\n                                <\/div>\n\n                                <div className=\"w-[16%] md:w-[10%] flex justify-center items-center\">\n                                    <div className=\"hidden md:flex w-8 h-8 rounded-full bg-[#FAF8F5] border border-[#D4AF37] items-center justify-center text-[#D4AF37] shadow-sm z-20 group-hover:scale-110 transition-transform duration-300\">\n                                            <Icon name={e.icon} className=\"w-3.5 h-3.5\" \/>\n                                    <\/div>\n                                    <div className=\"md:hidden w-3 h-3 rounded-full bg-[#FAF8F5] border border-[#D4AF37] z-20\"><\/div>\n                                <\/div>\n\n                                <div className=\"w-[42%] md:w-[45%] text-left pl-3 md:pl-8\">\n                                    <span className=\"uppercase text-[10px] md:text-xs tracking-widest font-medium text-gray-800 block\">\n                                        {e.title}\n                                    <\/span>\n                                    {e.desc && <span className=\"text-gray-500 text-[10px] md:text-xs italic block mt-1\">{e.desc}<\/span>}\n                                <\/div>\n\n                            <\/div>\n                        ))}\n                    <\/div>\n                <\/div>\n            );\n        };\n\n        const RsvpSection = () => {\n             const googleFormSrc = \"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSdY6MmLvooztsM3Gk2p6bOUKn1jYrGzftuT4db4--Yk541U4Q\/viewform?embedded=true\";\n             return (\n                <div className=\"w-full h-full slide-up flex flex-col items-center\">\n                    <h2 className=\"font-serif text-3xl text-[#222] mb-6\">Potvrzen\u00ed \u00fa\u010dasti<\/h2>\n                    <div className=\"w-full max-w-2xl bg-white border border-gray-100 shadow-inner rounded-sm overflow-hidden h-[1150px]\">\n                        <iframe src={googleFormSrc} width=\"100%\" height=\"100%\" frameBorder=\"0\" marginHeight=\"0\" marginWidth=\"0\" title=\"Svatebn\u00ed formul\u00e1\u0159\">Na\u010d\u00edt\u00e1n\u00ed\u2026<\/iframe>\n                    <\/div>\n                <\/div>\n             );\n        };\n\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-105","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/pages\/105","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=105"}],"version-history":[{"count":14,"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/pages\/105\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/pages\/105\/revisions\/123"}],"wp:attachment":[{"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}