{"id":181,"date":"2025-06-05T20:02:39","date_gmt":"2025-06-06T00:02:39","guid":{"rendered":"https:\/\/mse.ucf.edu\/fms\/?page_id=181"},"modified":"2026-04-13T14:24:43","modified_gmt":"2026-04-13T18:24:43","slug":"contact","status":"publish","type":"page","link":"https:\/\/mse.ucf.edu\/fms\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"<style>\n    \/* Hero overrides for contact page only *\/\n    .page-hero,\n    .hero-section,\n    section.hero {\n        min-height: 200px !important;\n        padding-top: 100px !important;\n        padding-bottom: 30px !important;\n    }\n\n    \/* Page-wide gradient background matching other pages *\/\n    body::before,\n    .site-content::before,\n    main::before,\n    #main::before,\n    .entry-content::before {\n        content: '';\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: \n            radial-gradient(circle at 20% 20%, rgba(0, 242, 254, 0.1) 0%, transparent 50%),\n            radial-gradient(circle at 80% 80%, rgba(79, 172, 254, 0.1) 0%, transparent 50%);\n        pointer-events: none;\n        z-index: -1;\n    }\n<\/style>\n\n<div class=\"contact-page\">\n    <div class=\"contact-grid\">\n        <!-- Left Panel - Contact Info -->\n        <div class=\"contact-info-panel\">\n            <div class=\"info-content\">\n                <h2 class=\"info-title\">Get in Touch<\/h2>\n                <p class=\"info-subtitle\">We&#8217;d love to hear from you. Whether you have questions about our research, collaboration opportunities, or joining our team.<\/p>\n                \n                <div class=\"info-items\">\n                    <div class=\"info-item\">\n                        <div class=\"info-icon\">\n                            <i class=\"fas fa-envelope\"><\/i>\n                        <\/div>\n                        <div class=\"info-details\">\n                            <span class=\"info-label\">Email<\/span>\n                            <a href=\"mailto:sidong.lei@ucf.edu\" class=\"info-value\">sidong.lei@ucf.edu<\/a>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"info-item\">\n                        <div class=\"info-icon\">\n                            <i class=\"fas fa-phone\"><\/i>\n                        <\/div>\n                        <div class=\"info-details\">\n                            <span class=\"info-label\">Phone<\/span>\n                            <a href=\"tel:+14078231428\" class=\"info-value\">+1 (407) 823-1428<\/a>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"info-item\">\n                        <div class=\"info-icon\">\n                            <i class=\"fas fa-map-marker-alt\"><\/i>\n                        <\/div>\n                        <div class=\"info-details\">\n                            <span class=\"info-label\">Location<\/span>\n                            <span class=\"info-value\">UCF Research 1<br>4353 Scorpius St, 309<br>Orlando, FL 32816<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"info-item\">\n                        <div class=\"info-icon\">\n                            <i class=\"fas fa-clock\"><\/i>\n                        <\/div>\n                        <div class=\"info-details\">\n                            <span class=\"info-label\">Lab Hours<\/span>\n                            <span class=\"info-value\">Monday &#8211; Friday<br>9:00 AM &#8211; 5:00 PM<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"social-links\">\n                    <a href=\"https:\/\/www.linkedin.com\/in\/sidong-lei-0a804a25\" target=\"_blank\" rel=\"noopener\" aria-label=\"LinkedIn\"><i class=\"fab fa-linkedin\"><\/i><\/a>\n                    <a href=\"https:\/\/github.com\/FunctionalMaterialsStudio\" target=\"_blank\" rel=\"noopener\" aria-label=\"GitHub\"><i class=\"fab fa-github\"><\/i><\/a>\n                    <a href=\"https:\/\/scholar.google.com\/citations?user=h2Pn038AAAAJ&#038;hl=en\" target=\"_blank\" rel=\"noopener\" aria-label=\"Google Scholar\"><i class=\"fas fa-graduation-cap\"><\/i><\/a>\n                <\/div>\n            <\/div>\n            \n            <div class=\"info-decoration\">\n                <div class=\"deco-circle deco-1\"><\/div>\n                <div class=\"deco-circle deco-2\"><\/div>\n                <div class=\"deco-circle deco-3\"><\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Right Panel - Contact Form -->\n        <div class=\"contact-form-panel\">\n            <div class=\"form-content\">\n                <h2 class=\"form-title\">Send a Message<\/h2>\n                <p class=\"form-subtitle\">Fill out the form below and we&#8217;ll get back to you as soon as possible.<\/p>\n                \n                <div id=\"alert\" class=\"alert\" role=\"alert\"><\/div>\n                \n                <form id=\"contactForm\" action=\"https:\/\/api.web3forms.com\/submit\" method=\"POST\">\n                    <input type=\"hidden\" name=\"access_key\" value=\"00bbd9c4-e301-4c81-883b-8d5b98bdf2e2\">\n                    \n                    <div class=\"form-row\">\n                        <div class=\"form-group\">\n                            <label for=\"name\" class=\"form-label\">Full Name<\/label>\n                            <input type=\"text\" id=\"name\" name=\"name\" class=\"form-input\" placeholder=\"John Doe\" required>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label for=\"email\" class=\"form-label\">Email Address<\/label>\n                            <input type=\"email\" id=\"email\" name=\"email\" class=\"form-input\" placeholder=\"john@example.com\" required>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"form-group\">\n                        <label for=\"subject\" class=\"form-label\">Subject<\/label>\n                        <input type=\"text\" id=\"subject\" name=\"subject\" class=\"form-input\" placeholder=\"How can we help?\" required>\n                    <\/div>\n                    \n                    <div class=\"form-group\">\n                        <label for=\"message\" class=\"form-label\">Message<\/label>\n                        <textarea id=\"message\" name=\"message\" class=\"form-input form-textarea\" placeholder=\"Tell us about your inquiry...\" required><\/textarea>\n                        <div class=\"char-counter\"><span id=\"char-count\">0<\/span>\/500<\/div>\n                    <\/div>\n                    \n                    <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\n                        <span class=\"btn-text\">Send Message<\/span>\n                        <span class=\"btn-icon\"><i class=\"fas fa-paper-plane\"><\/i><\/span>\n                        <span class=\"spinner\" id=\"spinner\"><\/span>\n                    <\/button>\n                <\/form>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    :root {\n        --primary-color: #00f2fe;\n        --secondary-color: #4facfe;\n        --dark-bg: #0a192f;\n        --darker-bg: #020c1b;\n        --text-color: #e6f1ff;\n        --text-muted: #8892b0;\n        --success-color: #00d084;\n        --error-color: #ff6b6b;\n        --border-color: rgba(255, 255, 255, 0.08);\n        --glass-bg: rgba(255, 255, 255, 0.03);\n    }\n\n    .contact-page {\n        min-height: 80vh;\n        padding: 2rem;\n    }\n\n    .contact-grid {\n        display: grid;\n        grid-template-columns: 1fr 1.2fr;\n        gap: 0;\n        max-width: 1400px;\n        margin: 0 auto;\n        border-radius: 24px;\n        overflow: hidden;\n        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);\n    }\n\n    \/* Left Panel *\/\n    .contact-info-panel {\n        background: linear-gradient(135deg, rgba(0, 242, 254, 0.08) 0%, rgba(79, 172, 254, 0.05) 100%);\n        padding: 4rem 3rem;\n        position: relative;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n\n    .contact-info-panel::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: linear-gradient(180deg, transparent 0%, rgba(0, 242, 254, 0.03) 100%);\n        pointer-events: none;\n    }\n\n    .info-content {\n        position: relative;\n        z-index: 2;\n    }\n\n    .info-title {\n        font-size: 2.75rem;\n        font-weight: 700;\n        margin-bottom: 1rem;\n        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n        -webkit-background-clip: text;\n        background-clip: text;\n        -webkit-text-fill-color: transparent;\n        font-family: 'Space Grotesk', sans-serif;\n    }\n\n    .info-subtitle {\n        color: var(--text-muted);\n        font-size: 1.1rem;\n        line-height: 1.7;\n        margin-bottom: 3rem;\n        max-width: 400px;\n    }\n\n    .info-items {\n        display: flex;\n        flex-direction: column;\n        gap: 1.75rem;\n    }\n\n    .info-item {\n        display: flex;\n        align-items: flex-start;\n        gap: 1.25rem;\n        padding: 1.25rem;\n        background: rgba(255, 255, 255, 0.03);\n        border: 1px solid var(--border-color);\n        border-radius: 16px;\n        transition: all 0.3s ease;\n    }\n\n    .info-item:hover {\n        background: rgba(255, 255, 255, 0.06);\n        border-color: rgba(0, 242, 254, 0.2);\n        transform: translateX(8px);\n    }\n\n    .info-icon {\n        width: 48px;\n        height: 48px;\n        border-radius: 12px;\n        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 1.1rem;\n        color: var(--darker-bg);\n        flex-shrink: 0;\n    }\n\n    .info-details {\n        display: flex;\n        flex-direction: column;\n        gap: 0.25rem;\n    }\n\n    .info-label {\n        font-size: 0.8rem;\n        color: var(--text-muted);\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        font-weight: 500;\n    }\n\n    .info-value {\n        color: var(--text-color);\n        font-size: 1rem;\n        line-height: 1.5;\n        text-decoration: none;\n        transition: color 0.2s ease;\n    }\n\n    a.info-value:hover {\n        color: var(--primary-color);\n    }\n\n    .social-links {\n        display: flex;\n        gap: 1rem;\n        margin-top: 3rem;\n        padding-top: 2rem;\n        border-top: 1px solid var(--border-color);\n    }\n\n    .social-links a {\n        width: 48px;\n        height: 48px;\n        border-radius: 12px;\n        background: rgba(255, 255, 255, 0.05);\n        border: 1px solid var(--border-color);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--text-muted);\n        font-size: 1.2rem;\n        transition: all 0.3s ease;\n    }\n\n    .social-links a:hover {\n        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n        border-color: transparent;\n        color: var(--darker-bg);\n        transform: translateY(-4px);\n    }\n\n    \/* Decorations *\/\n    .info-decoration {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        pointer-events: none;\n        overflow: hidden;\n    }\n\n    .deco-circle {\n        position: absolute;\n        border-radius: 50%;\n        border: 1px solid rgba(0, 242, 254, 0.1);\n    }\n\n    .deco-1 {\n        width: 300px;\n        height: 300px;\n        top: -100px;\n        right: -100px;\n        animation: pulse 8s ease-in-out infinite;\n    }\n\n    .deco-2 {\n        width: 200px;\n        height: 200px;\n        bottom: 10%;\n        left: -80px;\n        animation: pulse 6s ease-in-out infinite reverse;\n    }\n\n    .deco-3 {\n        width: 150px;\n        height: 150px;\n        bottom: -50px;\n        right: 20%;\n        animation: pulse 10s ease-in-out infinite;\n    }\n\n    @keyframes pulse {\n        0%, 100% { transform: scale(1); opacity: 0.3; }\n        50% { transform: scale(1.1); opacity: 0.5; }\n    }\n\n    \/* Right Panel *\/\n    .contact-form-panel {\n        background: var(--glass-bg);\n        padding: 4rem 3.5rem;\n        border-left: 1px solid var(--border-color);\n    }\n\n    .form-content {\n        max-width: 540px;\n        margin: 0 auto;\n    }\n\n    .form-title {\n        font-size: 2rem;\n        font-weight: 700;\n        color: var(--text-color);\n        margin-bottom: 0.5rem;\n        font-family: 'Space Grotesk', sans-serif;\n    }\n\n    .form-subtitle {\n        color: var(--text-muted);\n        margin-bottom: 2.5rem;\n        font-size: 1rem;\n    }\n\n    .form-row {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 1.5rem;\n    }\n\n    .form-group {\n        margin-bottom: 1.5rem;\n    }\n\n    .form-label {\n        display: block;\n        color: var(--text-color);\n        font-weight: 500;\n        margin-bottom: 0.6rem;\n        font-size: 0.95rem;\n    }\n\n    .form-input {\n        width: 100%;\n        padding: 1rem 1.25rem;\n        background: rgba(255, 255, 255, 0.04);\n        border: 1px solid var(--border-color);\n        border-radius: 12px;\n        color: var(--text-color);\n        font-size: 1rem;\n        transition: all 0.3s ease;\n        font-family: inherit;\n    }\n\n    .form-input:focus {\n        outline: none;\n        border-color: var(--primary-color);\n        background: rgba(255, 255, 255, 0.06);\n        box-shadow: 0 0 0 4px rgba(0, 242, 254, 0.1);\n    }\n\n    .form-input::placeholder {\n        color: var(--text-muted);\n        opacity: 0.6;\n    }\n\n    .form-textarea {\n        resize: vertical;\n        min-height: 160px;\n        line-height: 1.6;\n    }\n\n    .char-counter {\n        text-align: right;\n        font-size: 0.8rem;\n        color: var(--text-muted);\n        margin-top: 0.5rem;\n    }\n\n    .submit-btn {\n        width: 100%;\n        padding: 1.1rem 2rem;\n        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n        border: none;\n        border-radius: 12px;\n        color: var(--darker-bg);\n        font-size: 1.05rem;\n        font-weight: 600;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.75rem;\n        margin-top: 0.5rem;\n        font-family: inherit;\n    }\n\n    .submit-btn:hover {\n        transform: translateY(-3px);\n        box-shadow: 0 12px 35px rgba(0, 242, 254, 0.25);\n    }\n\n    .submit-btn:active {\n        transform: translateY(-1px);\n    }\n\n    .submit-btn .btn-icon {\n        transition: transform 0.3s ease;\n    }\n\n    .submit-btn:hover .btn-icon {\n        transform: translateX(4px);\n    }\n\n    .spinner {\n        display: none;\n        width: 20px;\n        height: 20px;\n        border: 2px solid transparent;\n        border-top: 2px solid currentColor;\n        border-radius: 50%;\n        animation: spin 0.8s linear infinite;\n    }\n\n    @keyframes spin {\n        to { transform: rotate(360deg); }\n    }\n\n    .alert {\n        padding: 1rem 1.25rem;\n        border-radius: 12px;\n        margin-bottom: 1.5rem;\n        display: none;\n        font-size: 0.95rem;\n    }\n\n    .alert-success {\n        background: rgba(0, 208, 132, 0.1);\n        border: 1px solid rgba(0, 208, 132, 0.3);\n        color: var(--success-color);\n    }\n\n    .alert-error {\n        background: rgba(255, 107, 107, 0.1);\n        border: 1px solid rgba(255, 107, 107, 0.3);\n        color: var(--error-color);\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 1024px) {\n        .contact-grid {\n            grid-template-columns: 1fr;\n        }\n\n        .contact-info-panel {\n            padding: 3rem 2rem;\n        }\n\n        .contact-form-panel {\n            border-left: none;\n            border-top: 1px solid var(--border-color);\n            padding: 3rem 2rem;\n        }\n\n        .info-title {\n            font-size: 2.25rem;\n        }\n    }\n\n    @media (max-width: 640px) {\n        .contact-page {\n            padding: 1rem;\n        }\n\n        .contact-info-panel,\n        .contact-form-panel {\n            padding: 2rem 1.5rem;\n        }\n\n        .form-row {\n            grid-template-columns: 1fr;\n            gap: 0;\n        }\n\n        .info-title {\n            font-size: 2rem;\n        }\n\n        .form-title {\n            font-size: 1.75rem;\n        }\n\n        .info-item {\n            padding: 1rem;\n        }\n\n        .info-icon {\n            width: 42px;\n            height: 42px;\n        }\n    }\n<\/style>\n\n<script>\n    const form = document.getElementById('contactForm');\n    const alert = document.getElementById('alert');\n    const submitBtn = document.getElementById('submitBtn');\n    const spinner = document.getElementById('spinner');\n    const messageField = document.getElementById('message');\n    const charCount = document.getElementById('char-count');\n\n    function updateCharCount() {\n        const count = messageField.value.length;\n        charCount.textContent = count;\n        charCount.parentElement.style.color = count > 450 ? 'var(--error-color)' : count > 350 ? '#fcb900' : '';\n    }\n\n    function showAlert(message, type) {\n        alert.textContent = message;\n        alert.className = `alert alert-${type}`;\n        alert.style.display = 'block';\n    }\n\n    function hideAlert() {\n        alert.style.display = 'none';\n    }\n\n    function setLoading(loading) {\n        submitBtn.disabled = loading;\n        spinner.style.display = loading ? 'inline-block' : 'none';\n        submitBtn.querySelector('.btn-text').textContent = loading ? 'Sending...' : 'Send Message';\n        submitBtn.querySelector('.btn-icon').style.display = loading ? 'none' : 'inline';\n    }\n\n    messageField.addEventListener('input', updateCharCount);\n\n    form.addEventListener('submit', async function(e) {\n        e.preventDefault();\n        setLoading(true);\n        hideAlert();\n\n        const formData = new FormData(form);\n        const object = Object.fromEntries(formData);\n        \n        if (object.subject && object.message) {\n            object.message = `Subject: ${object.subject}\\n\\n${object.message}`;\n        }\n\n        try {\n            const response = await fetch('https:\/\/api.web3forms.com\/submit', {\n                method: 'POST',\n                headers: { 'Content-Type': 'application\/json', 'Accept': 'application\/json' },\n                body: JSON.stringify(object)\n            });\n            \n            if (response.ok) {\n                showAlert(\"Message sent successfully! We'll get back to you soon.\", 'success');\n                form.reset();\n                updateCharCount();\n            } else {\n                showAlert(\"Something went wrong. Please try again.\", 'error');\n            }\n        } catch (error) {\n            showAlert(\"Connection error. Please check your internet and try again.\", 'error');\n        } finally {\n            setLoading(false);\n            setTimeout(hideAlert, 6000);\n        }\n    });\n<\/script>\n\n\n<pre class=\"wp-block-code\"><code><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Get in Touch We&#8217;d love to hear from you. Whether you have questions about our research, collaboration opportunities, or joining our team. Email sidong.lei@ucf.edu Phone +1 (407) 823-1428 Location UCF Research 14353 Scorpius St, 309Orlando, FL 32816 Lab Hours Monday &#8211; Friday9:00 AM &#8211; 5:00 PM Send a Message Fill out the form below and [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_analysis_target_kw":"","footnotes":""},"class_list":["post-181","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/pages\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":29,"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/pages\/181\/revisions"}],"predecessor-version":[{"id":911,"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/pages\/181\/revisions\/911"}],"wp:attachment":[{"href":"https:\/\/mse.ucf.edu\/fms\/wp-json\/wp\/v2\/media?parent=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}