\n
\n\n\n\n \n
Messenger Mockup<\/title>\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body, html {\n width: 100%;\n height: 100%;\n font-family: sans-serif;\n }\n .container {\n width: 100vw;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #e4e6eb;\n }\n .phone {\n width: 240px;\n height: 500px;\n background: white;\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);\n display: flex;\n flex-direction: column;\n }\n .screen {\n flex: 1;\n overflow-y: auto;\n display: none;\n flex-direction: column;\n }\n .screen.active {\n display: flex;\n }\n .login-screen {\n padding: 20px;\n text-align: center;\n }\n .login-screen img {\n width: 70px;\n margin-bottom: 20px;\n }\n .login-screen input {\n width: 100%;\n padding: 10px;\n margin: 10px 0;\n border: 1px solid #ccc;\n border-radius: 5px;\n }\n .login-screen button {\n width: 100%;\n padding: 10px;\n background: #0084ff;\n color: white;\n border: none;\n border-radius: 5px;\n font-weight: bold;\n }\n .chat-preview, .chat-header, .chat-message {\n padding: 10px;\n display: flex;\n align-items: center;\n border-bottom: 1px solid #ddd;\n cursor: pointer;\n }\n .chat-preview img, .chat-header img {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n margin-right: 10px;\n }\n .chat-info {\n flex: 1;\n }\n .chat-info strong {\n display: block;\n font-size: 14px;\n }\n .chat-info small {\n color: gray;\n font-size: 12px;\n }\n .chat-screen {\n position: relative;\n background: #f0f0f0;\n flex: 1;\n }\n .blurred {\n filter: blur(6px);\n pointer-events: none;\n user-select: none;\n }\n .back-btn {\n position: absolute;\n top: 10px;\n left: 10px;\n background: #0084ff;\n color: white;\n padding: 5px 10px;\n border-radius: 20px;\n font-size: 12px;\n cursor: pointer;\n z-index: 2;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"phone\">\n \n <!-- Login Screen -->\n <div class=\"screen active\" id=\"loginScreen\">\n <div class=\"login-screen\">\n <img decoding=\"async\" src=\"https:\/\/tryspyme.online\/wp-content\/uploads\/2025\/06\/Screenshot-2025-01-14-112814.png\" alt=\"Messenger Logo\">\n <input type=\"text\" placeholder=\"Phone or email\" id=\"loginInput\">\n <input type=\"password\" placeholder=\"Password\">\n <button onclick=\"showChats()\">Log In<\/button>\n <\/div>\n <\/div>\n\n <!-- Chat Preview Screen -->\n <div class=\"screen\" id=\"chatPreviewScreen\">\n <div id=\"chatList\"><\/div>\n <\/div>\n\n <!-- Chat View Screen -->\n <div class=\"screen\" id=\"chatScreen\">\n <div class=\"back-btn\" onclick=\"goBack()\">\u2190 Back<\/div>\n <div class=\"chat-header blurred\">\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/100?img=25\">\n <div class=\"chat-info\">\n <strong>Demo User<\/strong>\n <small>Online<\/small>\n <\/div>\n <\/div>\n <div class=\"chat-message blurred\">\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/100?img=25\">\n <div class=\"chat-info\">\n <strong>Demo User:<\/strong>\n <small>Hey! Can you send the files?<\/small>\n <\/div>\n <\/div>\n <div class=\"chat-message blurred\">\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/100?img=26\">\n <div class=\"chat-info\">\n <strong>You:<\/strong>\n <small>Sure, give me a moment.<\/small>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n function showChats() {\n document.getElementById(\"loginScreen\").classList.remove(\"active\");\n document.getElementById(\"chatPreviewScreen\").classList.add(\"active\");\n\n const chatList = document.getElementById(\"chatList\");\n const names = [\n \"Emily\", \"Jake\", \"Sarah\", \"Liam\", \"Olivia\",\n \"Noah\", \"Sophia\", \"Mason\", \"Isabella\", \"Lucas\",\n \"Ava\", \"Ethan\", \"Mia\", \"Logan\", \"Emma\"\n ];\n\n for (let i = 0; i < 15; i++) {\n const chat = document.createElement(\"div\");\n chat.className = \"chat-preview\";\n chat.onclick = () => showChat(i);\n chat.innerHTML = `\n <img decoding=\"async\" src=\"https:\/\/i.pravatar.cc\/100?img=${i + 15}\">\n <div class=\"chat-info\">\n <strong>${names[i]}<\/strong>\n <small>Sent you a message<\/small>\n <\/div>\n `;\n chatList.appendChild(chat);\n }\n }\n\n function showChat(index) {\n document.getElementById(\"chatPreviewScreen\").classList.remove(\"active\");\n document.getElementById(\"chatScreen\").classList.add(\"active\");\n }\n\n function goBack() {\n document.getElementById(\"chatScreen\").classList.remove(\"active\");\n document.getElementById(\"chatPreviewScreen\").classList.add(\"active\");\n }\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Demo Notice<\/title>\n <style>\n body {\n margin: 0;\n font-family: Arial, sans-serif;\n }\n\n \/* Overlay *\/\n .popup-overlay {\n position: fixed;\n top: 0; left: 0;\n width: 100%; height: 100%;\n background-color: rgba(0, 0, 0, 0.6);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n }\n\n \/* Modal Box *\/\n .popup-box {\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n width: 90%;\n max-width: 400px;\n box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n position: relative;\n }\n\n .popup-box h2 {\n font-size: 18px;\n margin-bottom: 10px;\n color: #333;\n }\n\n .popup-box p {\n font-size: 14px;\n color: #555;\n line-height: 1.5;\n }\n\n .popup-box button {\n margin-top: 15px;\n background-color: #007bff;\n color: white;\n padding: 8px 15px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n float: right;\n }\n\n .popup-box button:hover {\n background-color: #0056b3;\n }\n <\/style>\n<\/head>\n<body>\n\n<!-- Popup Structure -->\n<div class=\"popup-overlay\" id=\"demoPopup\">\n <div class=\"popup-box\">\n <h2>Heads Up!<\/h2>\n <p>\n We don\u2019t want you to get confused \u2014 this is just a <strong>demo<\/strong>.\n It might not fetch you accurate results, as it is a sample not connected to live data.\n As soon as you contact the support team, you get access to live information.\n <\/p>\n <p>\n If you’re trying the WhatsApp demo, the OTP code sent to the remote access dashboard is:\n <strong>760130<\/strong>.\n <\/p>\n <button onclick=\"document.getElementById('demoPopup').style.display='none'\">Got it<\/button>\n <\/div>\n<\/div>\n\n<\/body>\n<\/html>\n\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Messenger Mockup Log In \u2190 Back Demo User Online Demo User: Hey! Can you send the files? You: Sure, give me a moment. Demo Notice Heads Up! We don\u2019t want you to get confused \u2014 this is just a demo. It might not fetch you accurate results, as it is a sample not connected to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3889","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"hire.hackorbit@gmail.com","author_link":"https:\/\/tryspyme.online\/en\/author\/hire-hackorbitgmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Messenger Mockup Log In \u2190 Back Demo User Online Demo User: Hey! Can you send the files? You: Sure, give me a moment. Demo Notice Heads Up! We don\u2019t want you to get confused \u2014 this is just a demo. It might not fetch you accurate results, as it is a sample not connected to…","_links":{"self":[{"href":"https:\/\/tryspyme.online\/en\/wp-json\/wp\/v2\/pages\/3889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tryspyme.online\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tryspyme.online\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tryspyme.online\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tryspyme.online\/en\/wp-json\/wp\/v2\/comments?post=3889"}],"version-history":[{"count":10,"href":"https:\/\/tryspyme.online\/en\/wp-json\/wp\/v2\/pages\/3889\/revisions"}],"predecessor-version":[{"id":3909,"href":"https:\/\/tryspyme.online\/en\/wp-json\/wp\/v2\/pages\/3889\/revisions\/3909"}],"wp:attachment":[{"href":"https:\/\/tryspyme.online\/en\/wp-json\/wp\/v2\/media?parent=3889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}