{"id":28,"date":"2026-02-15T14:54:14","date_gmt":"2026-02-15T13:54:14","guid":{"rendered":"https:\/\/www.nasesvatba-ap.cz\/?page_id=28"},"modified":"2026-02-15T21:17:23","modified_gmt":"2026-02-15T20:17:23","slug":"28-2","status":"publish","type":"page","link":"https:\/\/www.nasesvatba-ap.cz\/?page_id=28","title":{"rendered":"Svatba P&amp;A draft"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\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    <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 url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Montserrat:wght@200;300;400;500&family=Playfair+Display:ital,wght@1,400&display=swap');\n\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        .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': 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>; break;\n                case 'clock': content = <g><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/g>; break;\n                case 'mapPin': 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>; break;\n                case 'heart': 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\"\/>; break;\n                case 'glass': content = <path d=\"M8 2h8l-2 11c0 .5-.5 1-1 1H9c-.5 0-1-.5-1-1L8 2Z m0 17v3 m-3 0h6\"\/>; break;\n                case 'utensils': 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\"\/>; break;\n                case 'music': content = <g><path d=\"M9 18V5l12-2v13\"\/><circle cx=\"6\" cy=\"18\" r=\"3\"\/><circle cx=\"18\" cy=\"16\" r=\"3\"\/><\/g>; break;\n                case 'moon': content = <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"\/>; break;\n                default: return null;\n            }\n            return <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}>{content}<\/svg>;\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')}>P & A<\/div>\n                            \n                            {\/* MENU - OPRAVA PRO MOBIL (flex-col md:flex-row) *\/}\n                            <nav className=\"flex flex-col md:flex-row justify-center items-center gap-4 md:gap-16 border-b border-[#D4AF37]\/20 pb-6 md:pb-4 w-full max-w-2xl 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                            Petr & Al\u017eb\u011bta \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                <div className=\"text-[10px] md:text-xs uppercase tracking-[0.4em] text-gray-400 mb-6\">\n                    Srde\u010dn\u011b V\u00e1s zveme na na\u0161i svatbu\n                <\/div>\n                \n                <h1 className=\"font-serif text-6xl md:text-8xl text-[#222] mb-10 leading-none\">\n                    Petr <span className=\"text-[#D4AF37] font-ampersand italic text-5xl md:text-7xl align-middle mx-1\">&<\/span> Al\u017eb\u011bta\n                <\/h1>\n\n                <div className=\"h-px w-20 bg-[#D4AF37] mx-auto mb-10 opacity-50\"><\/div>\n\n                <div className=\"flex flex-col gap-8 text-gray-600 font-light mb-12\">\n                    <InfoBlock icon=\"calendar\" title=\"Datum\" text=\"03. \u0159\u00edjna 2026\" \/>\n                    {\/* <InfoBlock icon=\"clock\" title=\"\u010cas\" text=\"Je\u0161t\u011b potvrd\u00edme\" \/> *\/}\n                    <InfoBlock icon=\"mapPin\" title=\"M\u00edsto\" text={<>Hotel & Garden<br\/>U Holub\u016f<\/>} link=\"https:\/\/www.uholubu.cz\" linkText=\"www.uholubu.cz\" \/>\n                <\/div>\n\n                {\/* NOV\u00dd TEXT A UPRAVEN\u00c9 TLA\u010c\u00cdTKO *\/}\n                <div className=\"mt-8\">\n                    <p className=\"text-[10px] md:text-xs uppercase tracking-widest text-gray-500 mb-4 font-sans\">\n                        Pros\u00edme potvr\u010fte svou \u00fa\u010dast do 31. b\u0159ezna 2026\n                    <\/p>\n\n                    <button \n                        onClick={navigateToRsvp}\n                        className=\"group relative inline-block px-12 py-4 bg-[#D4AF37] text-white font-sans text-xs uppercase tracking-[0.2em] transition-all duration-300 hover:bg-[#b5952f] shadow-lg hover:shadow-xl hover:-translate-y-0.5\"\n                    >\n                        Potvrdit \u00fa\u010dast\n                    <\/button>\n                <\/div>\n            <\/div>\n        );\n\n        const InfoBlock = ({ icon, title, text, link, linkText }) => (\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-400 mb-1\">{title}<\/h3>\n                <div className=\"text-lg font-serif italic text-gray-800\">\n                    {text}\n                <\/div>\n                {link && (\n                    <a href={link} target=\"_blank\" className=\"text-xs text-[#D4AF37] hover:underline mt-1 font-sans\">{linkText}<\/a>\n                )}\n            <\/div>\n        );\n\n        const ScheduleSection = () => {\n            const events = [\n                { time: \"12:30\", title: \"P\u0159\u00edjezd host\u016f\", desc: \"Welcome drink\", icon: \"glass\" },\n                { time: \"13:00\", title: \"Svatebn\u00ed ob\u0159ad\", desc: \"V zahrad\u011b\", icon: \"heart\" },\n                { time: \"14:00\", title: \"Spole\u010dn\u00e9 focen\u00ed\", desc: \"\", icon: \"calendar\" },\n                { time: \"15:00\", title: \"Slavnostn\u00ed hostina\", desc: \"Ob\u011bd\", icon: \"utensils\" },\n                { time: \"17:00\", title: \"Kr\u00e1jen\u00ed dortu\", desc: \"K\u00e1va a dezert\", icon: \"utensils\" },\n                { time: \"18:00\", title: \"Prvn\u00ed tanec\", desc: \"Tane\u010dn\u00ed parket\", icon: \"music\" },\n                { time: \"21:00\", title: \"Ve\u010dern\u00ed raut\", desc: \"\", icon: \"glass\" },\n                { time: \"23:00\", title: \"Prskavky\", desc: \"Rozlou\u010den\u00ed\", 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                    \n                    <div className=\"space-y-0 border-l border-[#D4AF37]\/30 ml-[50%] md:ml-0 md:border-l-0 relative\">\n                        {events.map((e, i) => (\n                            <div key={i} className=\"flex flex-col md:flex-row md:justify-between md:items-center py-4 relative group\">\n                                <div className=\"absolute left-[-5px] top-6 w-2.5 h-2.5 rounded-full bg-[#FAF8F5] border border-[#D4AF37] md:hidden\"><\/div>\n                                \n                                <div className=\"pl-6 md:pl-0 text-left md:text-right md:w-[45%]\">\n                                    <span className=\"font-serif text-xl text-[#D4AF37] font-semibold block\">{e.time}<\/span>\n                                <\/div>\n                                \n                                <div className=\"hidden md:flex w-[10%] justify-center items-center relative z-10\">\n                                    <div className=\"w-8 h-8 rounded-full bg-[#FAF8F5] border border-[#D4AF37] flex items-center justify-center text-[#D4AF37] shadow-sm transform group-hover:scale-110 transition-transform duration-300\">\n                                         <Icon name={e.icon} className=\"w-3.5 h-3.5\" \/>\n                                    <\/div>\n                                <\/div>\n\n                                <div className=\"pl-6 md:pl-0 text-left md:w-[45%]\">\n                                    <span className=\"uppercase text-xs tracking-widest font-medium text-gray-800 block\">{e.title}<\/span>\n                                    {e.desc && <span className=\"text-gray-500 text-xs italic\">{e.desc}<\/span>}\n                                <\/div>\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-[1100px]\">\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-28","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/pages\/28","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=28"}],"version-history":[{"count":24,"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=\/wp\/v2\/pages\/28\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/www.nasesvatba-ap.cz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}