{"id":1976,"date":"2026-07-29T15:42:04","date_gmt":"2026-07-29T09:42:04","guid":{"rendered":"https:\/\/mahfuzollah.webseekbd.com\/?page_id=1976"},"modified":"2026-07-29T16:46:53","modified_gmt":"2026-07-29T10:46:53","slug":"date-with-me","status":"publish","type":"page","link":"https:\/\/mahfuzollah.webseekbd.com\/index.php\/date-with-me\/","title":{"rendered":"Date with me"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1976\" class=\"elementor elementor-1976\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-85ca418 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"85ca418\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e1339b2 elementor-widget__width-inherit exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"e1339b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"date-form-unique-wrapper\">\r\n    <style>\r\n        \/* CSS Reset & Scope Isolation for Elementor *\/\r\n        #date-form-unique-wrapper * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n            font-family: 'Poppins', sans-serif !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .date-container {\r\n            background: rgba(255, 255, 255, 0.95) !important;\r\n            backdrop-filter: blur(10px) !important;\r\n            border-radius: 20px !important;\r\n            padding: 30px !important;\r\n            width: 100% !important;\r\n            max-width: 600px !important;\r\n            margin: 0 auto !important;\r\n            box-shadow: 0 15px 35px rgba(255, 105, 180, 0.3) !important;\r\n            border: 2px solid rgba(255, 182, 193, 0.5) !important;\r\n            text-align: center !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .step {\r\n            display: none;\r\n            animation: fadeInDate 0.5s ease-in-out;\r\n        }\r\n\r\n        #date-form-unique-wrapper .step.active {\r\n            display: block !important;\r\n        }\r\n\r\n        @keyframes fadeInDate {\r\n            from { opacity: 0; transform: translateY(10px); }\r\n            to { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        #date-form-unique-wrapper h1, \r\n        #date-form-unique-wrapper h2 {\r\n            font-family: 'Dancing Script', cursive !important;\r\n            color: #ff3366 !important;\r\n            margin-bottom: 20px !important;\r\n            line-height: 1.3 !important;\r\n            background: none !important;\r\n            -webkit-text-fill-color: initial !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper h1 { font-size: 2.2rem !important; }\r\n        #date-form-unique-wrapper h2 { font-size: 1.8rem !important; }\r\n\r\n        #date-form-unique-wrapper p {\r\n            color: #555555 !important;\r\n            margin-bottom: 20px !important;\r\n            font-size: 1rem !important;\r\n            line-height: 1.5 !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .btn-group {\r\n            display: flex !important;\r\n            justify-content: center !important;\r\n            gap: 15px !important;\r\n            margin-top: 20px !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .date-btn {\r\n            background: linear-gradient(45deg, #ff416c, #ff4b2b) !important;\r\n            color: #ffffff !important;\r\n            border: none !important;\r\n            padding: 12px 25px !important;\r\n            font-size: 1rem !important;\r\n            border-radius: 30px !important;\r\n            cursor: pointer !important;\r\n            transition: all 0.3s ease !important;\r\n            box-shadow: 0 5px 15px rgba(255, 65, 108, 0.4) !important;\r\n            font-weight: 600 !important;\r\n            display: inline-block !important;\r\n            text-decoration: none !important;\r\n            width: auto !important;\r\n            height: auto !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .date-btn:hover {\r\n            transform: translateY(-3px) scale(1.03) !important;\r\n            box-shadow: 0 8px 20px rgba(255, 65, 108, 0.6) !important;\r\n            background: linear-gradient(45deg, #ff416c, #ff4b2b) !important;\r\n            color: #ffffff !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .date-btn-secondary {\r\n            background: #ffffff !important;\r\n            color: #ff416c !important;\r\n            border: 2px solid #ff416c !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .date-btn-secondary:hover {\r\n            background: #fff0f5 !important;\r\n            color: #ff416c !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .input-group {\r\n            margin: 15px 0 !important;\r\n            text-align: left !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .input-group label {\r\n            display: block !important;\r\n            margin-bottom: 5px !important;\r\n            color: #ff3366 !important;\r\n            font-weight: 600 !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .input-group input {\r\n            width: 100% !important;\r\n            padding: 12px !important;\r\n            border: 2px solid #ffb6c1 !important;\r\n            border-radius: 10px !important;\r\n            outline: none !important;\r\n            font-size: 1rem !important;\r\n            background: #ffffff !important;\r\n            color: #333333 !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .grid-options {\r\n            display: grid !important;\r\n            grid-template-columns: repeat(3, 1fr) !important;\r\n            gap: 12px !important;\r\n            margin-bottom: 20px !important;\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            #date-form-unique-wrapper .grid-options { \r\n                grid-template-columns: repeat(2, 1fr) !important; \r\n            }\r\n        }\r\n\r\n        #date-form-unique-wrapper .option-card {\r\n            border: 3px solid transparent !important;\r\n            border-radius: 12px !important;\r\n            overflow: hidden !important;\r\n            cursor: pointer !important;\r\n            background: #ffffff !important;\r\n            transition: all 0.3s ease !important;\r\n            box-shadow: 0 3px 8px rgba(0,0,0,0.08) !important;\r\n            position: relative !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .option-card img {\r\n            width: 100% !important;\r\n            height: 90px !important;\r\n            object-fit: cover !important;\r\n            display: block !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .option-card span {\r\n            display: block !important;\r\n            padding: 6px !important;\r\n            font-weight: 600 !important;\r\n            color: #444444 !important;\r\n            font-size: 0.85rem !important;\r\n            background: #ffffff !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .option-card.selected {\r\n            border-color: #ff3366 !important;\r\n            background: #fff0f5 !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .option-card.selected span {\r\n            background: #fff0f5 !important;\r\n            color: #ff3366 !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .navigation {\r\n            display: flex !important;\r\n            justify-content: space-between !important;\r\n            margin-top: 15px !important;\r\n        }\r\n\r\n        #date-form-unique-wrapper .loading-text {\r\n            display: none;\r\n            color: #ff3366 !important;\r\n            font-weight: bold !important;\r\n            margin-top: 10px !important;\r\n        }\r\n    <\/style>\r\n\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Dancing+Script:wght@700&display=swap\" rel=\"stylesheet\">\r\n\r\n    <div class=\"date-container\">\r\n        <!-- STEP 1 -->\r\n        <div class=\"step active\" id=\"d-step-1\">\r\n            <h1>Will you wanna go date with me? \ud83e\udd7a\ud83d\udc96<\/h1>\r\n            <p>I promise it will be special!<\/p>\r\n            <div class=\"btn-group\">\r\n                <button class=\"date-btn\" onclick=\"nextStepDate()\">1. Yes! \ud83d\ude0d<\/button>\r\n                <button class=\"date-btn date-btn-secondary\" onclick=\"handleMaybeDate()\">2. Maybe... \ud83d\ude0f<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- STEP 2 (NEW: Nickname Step) -->\r\n        <div class=\"step\" id=\"d-step-2\">\r\n            <h2>What is your cute nick name? \ud83e\udd70<\/h2>\r\n            <p>So I know what to call my favorite person!<\/p>\r\n            <div class=\"input-group\">\r\n                <label for=\"nickname-val\">Your Cute Nickname:<\/label>\r\n                <input type=\"text\" id=\"nickname-val\" placeholder=\"e.g. Cutie, Angel, Sweetie...\">\r\n            <\/div>\r\n            <div class=\"navigation\">\r\n                <button class=\"date-btn date-btn-secondary\" onclick=\"prevStepDate()\">Back<\/button>\r\n                <button class=\"date-btn\" onclick=\"validateStep2Date()\">Next \u27a1\ufe0f<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- STEP 3 (Date & Time) -->\r\n        <div class=\"step\" id=\"d-step-3\">\r\n            <h2>When are you free? \ud83d\udcc5\u2728<\/h2>\r\n            <div class=\"input-group\">\r\n                <label for=\"date-val\">Select Date:<\/label>\r\n                <input type=\"date\" id=\"date-val\">\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n                <label for=\"time-val\">Select Time:<\/label>\r\n                <input type=\"time\" id=\"time-val\">\r\n            <\/div>\r\n            <div class=\"navigation\">\r\n                <button class=\"date-btn date-btn-secondary\" onclick=\"prevStepDate()\">Back<\/button>\r\n                <button class=\"date-btn\" onclick=\"validateStep3Date()\">Next \u27a1\ufe0f<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- STEP 4 (Place) -->\r\n        <div class=\"step\" id=\"d-step-4\">\r\n            <h2>Where should we go? \ud83d\udccd\ud83c\udf39<\/h2>\r\n            <div class=\"grid-options\">\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'place')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517248135467-4c7edcad34c4?w=300\" alt=\"Restaurant\">\r\n                    <span>Restaurant<\/span>\r\n                <\/div>\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'place')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1519331379826-f10be5486c6f?w=300\" alt=\"Park\">\r\n                    <span>Park<\/span>\r\n                <\/div>\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'place')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1439066615861-d1af74d74000?w=300\" alt=\"Lake\">\r\n                    <span>Lake<\/span>\r\n                <\/div>\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'place')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1507525428034-b723cf961d3e?w=300\" alt=\"Sea\">\r\n                    <span>Sea Beach<\/span>\r\n                <\/div>\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'place')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1514933651103-005eec06c04b?w=300\" alt=\"Bar\">\r\n                    <span>Bar\/Pub<\/span>\r\n                <\/div>\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'place')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1442512595331-e89e73853f31?w=300\" alt=\"Rooftop Cafe\">\r\n                    <span>Rooftop Cafe<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"navigation\">\r\n                <button class=\"date-btn date-btn-secondary\" onclick=\"prevStepDate()\">Back<\/button>\r\n                <button class=\"date-btn\" onclick=\"validateStep4Date()\">Next \u27a1\ufe0f<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- STEP 5 (Food) -->\r\n        <div class=\"step\" id=\"d-step-5\">\r\n            <h2>What are we eating? \ud83c\udf55\u2615<\/h2>\r\n            <div class=\"grid-options\">\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'food')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1513104890138-7c749659a591?w=300\" alt=\"Pizza\">\r\n                    <span>Pizza<\/span>\r\n                <\/div>\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'food')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1568901346375-23c9450c58cd?w=300\" alt=\"Burger\">\r\n                    <span>Burger<\/span>\r\n                <\/div>\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'food')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1509042239860-f550ce710b93?w=300\" alt=\"Coffee\">\r\n                    <span>Coffee<\/span>\r\n                <\/div>\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'food')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551024709-8f23befc6f87?w=300\" alt=\"Drinks\">\r\n                    <span>Drinks<\/span>\r\n                <\/div>\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'food')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1563805042-7684c019e1cb?w=300\" alt=\"Ice Cream\">\r\n                    <span>Ice Cream<\/span>\r\n                <\/div>\r\n                <div class=\"option-card\" onclick=\"selectDateOption(this, 'food')\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1555396273-367ea4eb4db5?w=300\" alt=\"Pasta\">\r\n                    <span>Pasta<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <p class=\"loading-text\" id=\"loading-txt\">Sending response to mail... \ud83d\udc8c<\/p>\r\n            <div class=\"navigation\">\r\n                <button class=\"date-btn date-btn-secondary\" onclick=\"prevStepDate()\">Back<\/button>\r\n                <button class=\"date-btn\" id=\"submit-btn\" onclick=\"submitDateForm()\">Submit \ud83d\udc95<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- STEP 6 (Success Screen) -->\r\n        <div class=\"step\" id=\"d-step-6\">\r\n            <h1>Yay! It's a Date! \ud83c\udf89\ud83d\udc96<\/h1>\r\n            <p>Your response has been sent successfully!<\/p>\r\n            <p style=\"font-size: 1.3rem !important;\">Can't wait to see you! \ud83e\udd70\ud83c\udf39<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        let currentStepDate = 1;\r\n        let selectedPlaceVal = '';\r\n        let selectedFoodVal = '';\r\n\r\n        const WEB3FORMS_KEY = \"207d69d3-d0b4-496a-8d85-d1083950dfdc\"; \r\n\r\n        function showStepDate(step) {\r\n            document.querySelectorAll('#date-form-unique-wrapper .step').forEach(s => s.classList.remove('active'));\r\n            document.getElementById(`d-step-${step}`).classList.add('active');\r\n        }\r\n\r\n        function nextStepDate() {\r\n            currentStepDate++;\r\n            showStepDate(currentStepDate);\r\n        }\r\n\r\n        function prevStepDate() {\r\n            currentStepDate--;\r\n            showStepDate(currentStepDate);\r\n        }\r\n\r\n        function handleMaybeDate() {\r\n            alert(\"Aww, 'Maybe' is not an option! You have to say YES! \ud83d\ude09\u2764\ufe0f\");\r\n            nextStepDate();\r\n        }\r\n\r\n        function selectDateOption(element, type) {\r\n            let parent = element.parentElement;\r\n            parent.querySelectorAll('.option-card').forEach(card => card.classList.remove('selected'));\r\n            element.classList.add('selected');\r\n\r\n            if (type === 'place') selectedPlaceVal = element.querySelector('span').innerText;\r\n            if (type === 'food') selectedFoodVal = element.querySelector('span').innerText;\r\n        }\r\n\r\n        function validateStep2Date() {\r\n            const nickname = document.getElementById('nickname-val').value.trim();\r\n            if (!nickname) {\r\n                alert(\"Please tell me your cute nickname! \ud83e\udd7a\u2764\ufe0f\");\r\n                return;\r\n            }\r\n            nextStepDate();\r\n        }\r\n\r\n        function validateStep3Date() {\r\n            const date = document.getElementById('date-val').value;\r\n            const time = document.getElementById('time-val').value;\r\n            if (!date || !time) {\r\n                alert(\"Please select both Date and Time! \ud83d\udcc5\u23f0\");\r\n                return;\r\n            }\r\n            nextStepDate();\r\n        }\r\n\r\n        function validateStep4Date() {\r\n            if (!selectedPlaceVal) {\r\n                alert(\"Please pick a place! \ud83d\udccd\");\r\n                return;\r\n            }\r\n            nextStepDate();\r\n        }\r\n\r\n        function submitDateForm() {\r\n            if (!selectedFoodVal) {\r\n                alert(\"Please choose what you'd like to eat! \ud83c\udf55\");\r\n                return;\r\n            }\r\n\r\n            const nickname = document.getElementById('nickname-val').value.trim();\r\n            const date = document.getElementById('date-val').value;\r\n            const time = document.getElementById('time-val').value;\r\n            const loadingTxt = document.getElementById('loading-txt');\r\n            const submitBtn = document.getElementById('submit-btn');\r\n\r\n            loadingTxt.style.display = 'block';\r\n            submitBtn.disabled = true;\r\n\r\n            fetch('https:\/\/api.web3forms.com\/submit', {\r\n                method: 'POST',\r\n                headers: {\r\n                    'Content-Type': 'application\/json',\r\n                    'Accept': 'application\/json'\r\n                },\r\n                body: JSON.stringify({\r\n                    access_key: WEB3FORMS_KEY,\r\n                    subject: \"New Date Response Received! \u2764\ufe0f\",\r\n                    from_name: \"Date Proposal Form\",\r\n                    \"Cute Nickname\": nickname,\r\n                    Date: date,\r\n                    Time: time,\r\n                    Place: selectedPlaceVal,\r\n                    Food: selectedFoodVal\r\n                })\r\n            })\r\n            .then(async (response) => {\r\n                if (response.status === 200) {\r\n                    nextStepDate();\r\n                } else {\r\n                    alert(\"Something went wrong. Please try again.\");\r\n                }\r\n            })\r\n            .catch(error => {\r\n                alert(\"Error submitting the form. Please try again.\");\r\n            })\r\n            .finally(() => {\r\n                loadingTxt.style.display = 'none';\r\n                submitBtn.disabled = false;\r\n            });\r\n        }\r\n    <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Will you wanna go date with me? \ud83e\udd7a\ud83d\udc96 I promise it will be special! 1. Yes! \ud83d\ude0d 2. Maybe&#8230; \ud83d\ude0f What is your cute nick name? \ud83e\udd70 So I know what to call my favorite person! Your Cute Nickname: Back Next \u27a1\ufe0f When are you free? \ud83d\udcc5\u2728 Select Date: Select Time: Back Next \u27a1\ufe0f Where should we go? \ud83d\udccd\ud83c\udf39 Restaurant Park Lake Sea Beach Bar\/Pub Rooftop Cafe Back Next \u27a1\ufe0f What are we eating? \ud83c\udf55\u2615 Pizza Burger Coffee Drinks Ice Cream Pasta Sending response to mail&#8230; \ud83d\udc8c Back Submit \ud83d\udc95 Yay! It&#8217;s a Date! \ud83c\udf89\ud83d\udc96 Your response has been sent successfully! Can&#8217;t wait to see you! \ud83e\udd70\ud83c\udf39<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1976","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mahfuzollah.webseekbd.com\/index.php\/wp-json\/wp\/v2\/pages\/1976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mahfuzollah.webseekbd.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mahfuzollah.webseekbd.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mahfuzollah.webseekbd.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mahfuzollah.webseekbd.com\/index.php\/wp-json\/wp\/v2\/comments?post=1976"}],"version-history":[{"count":25,"href":"https:\/\/mahfuzollah.webseekbd.com\/index.php\/wp-json\/wp\/v2\/pages\/1976\/revisions"}],"predecessor-version":[{"id":2021,"href":"https:\/\/mahfuzollah.webseekbd.com\/index.php\/wp-json\/wp\/v2\/pages\/1976\/revisions\/2021"}],"wp:attachment":[{"href":"https:\/\/mahfuzollah.webseekbd.com\/index.php\/wp-json\/wp\/v2\/media?parent=1976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}