Mood Mirror Selector<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background: #f0f4f8;\n color: #1f2430;\n text-align: center;\n padding: 2rem;\n transition: background 0.4s ease, color 0.4s ease;\n }\n video {\n width: 320px;\n height: 240px;\n border: 4px solid #ccc;\n border-radius: 8px;\n transform: scaleX(-1);\n display: block;\n margin: 0 auto 1rem;\n }\n select, button {\n margin: 0.5rem;\n padding: 0.6rem 1rem;\n font-size: 1rem;\n border-radius: 6px;\n border: 1px solid #ccc;\n outline: none;\n }\n button {\n background: #2d6cdf;\n color: #fff;\n border: none;\n cursor: pointer;\n transition: background 0.2s;\n }\n button:hover {\n background: #1f4ea3;\n }\n #mood-msg {\n font-size: 1.3rem;\n margin-top: 1.5rem;\n }\n #suggestions {\n text-align: left;\n display: inline-block;\n margin-top: 1rem;\n padding-left: 1rem;\n }\n #suggestions li {\n margin-bottom: 0.5rem;\n }\n <\/style>\n<\/head>\n<body>\n\n <h1>\ud83e\ude9e Mood Mirror Selector<\/h1>\n <p>Allow camera access, see yourself, then pick how you feel for instant tips.<\/p>\n\n <video id=\"video\" autoplay muted playsinline><\/video>\n\n <div>\n <select id=\"moodSelect\">\n <option value=\"\" disabled selected>— How are you feeling? —<\/option>\n <\/select>\n <button id=\"showBtn\">Show Tips<\/button>\n <\/div>\n\n <div id=\"mood-msg\"><\/div>\n <ul id=\"suggestions\"><\/ul>\n\n <script>\n \/\/ 1) Start webcam feed\n const video = document.getElementById('video');\n navigator.mediaDevices.getUserMedia({ video: true })\n .then(stream => video.srcObject = stream)\n .catch(() => alert('Please allow camera access to use the Mood Mirror.'));\n\n \/\/ 2) Mood definitions\n const moods = [\n { name: \"Happy\", color: \"#f9d342\", message: \"\ud83d\ude0a You feel joyful and upbeat!\", suggestions: [\"Share your happiness with a friend\", \"Write down three things you\u2019re grateful for\", \"Play an uplifting song\"] },\n { name: \"Sad\", color: \"#6c7a89\", message: \"\ud83d\udc99 It\u2019s okay to feel low sometimes.\", suggestions: [\"Talk to someone you trust\", \"Take a relaxing walk outside\", \"Watch something that lifts your spirits\"] },\n { name: \"Anxious\", color: \"#f67280\", message: \"\ud83d\ude28 Your mind feels restless. Breathe easy.\", suggestions: [\"Practice 4-4-4 breathing\", \"Listen to calming music or sounds\", \"Ground yourself by naming five things you see\"] },\n { name: \"Calm\", color: \"#88d8b0\", message: \"\ud83c\udf3f You\u2019re centered and at peace.\", suggestions: [\"Savor this calm with a warm beverage\", \"Close your eyes for a brief mindfulness pause\", \"Notice the sounds around you\"] },\n { name: \"Disgusted\",color: \"#b85c38\", message: \"\ud83e\udd22 Something feels off right now.\", suggestions: [\"Journal what\u2019s causing the feeling\", \"Take a few deep breaths and stretch\", \"Engage in a quick pleasant activity\"] },\n { name: \"Angry\", color: \"#d1495b\", message: \"\ud83d\ude20 You feel tension and frustration.\", suggestions: [\"Count slowly backward from 20\", \"Do a short physical exercise\", \"Write down what\u2019s bothering you\"] },\n { name: \"Upset\", color: \"#8b0000\", message: \"\ud83d\ude25 You\u2019re feeling distressed or hurt.\", suggestions: [\"Reach out to a supportive friend\", \"Write your feelings in a journal\", \"Give yourself permission to take a break\"] },\n { name: \"Surprised\",color: \"#ffca3a\", message: \"\ud83d\ude32 You\u2019ve been taken aback!\", suggestions: [\"Reflect on what surprised you\", \"Jot down your immediate thoughts\", \"Embrace the novelty with curiosity\"] },\n { name: \"Fearful\", color: \"#6a4c93\", message: \"\ud83d\ude30 You feel uneasy and alert.\", suggestions: [\"Name 5 things you see and touch\", \"Take a slow, controlled breath\", \"Remind yourself you\u2019re safe\"] },\n { name: \"Neutral\", color: \"#cccccc\", message: \"\ud83d\ude10 You\u2019re balanced and composed.\", suggestions: [\"Enjoy this moment of calm\", \"Set a small goal for your next task\", \"Capture this feeling with a quick note\"] }\n ];\n\n \/\/ 3) Populate dropdown\n const selectEl = document.getElementById('moodSelect');\n moods.forEach((m, i) => {\n const opt = document.createElement('option');\n opt.value = i;\n opt.textContent = m.name;\n selectEl.appendChild(opt);\n });\n\n \/\/ 4) Utility: contrasting text color\n function getTextColor(hex) {\n const [r,g,b] = hex.match(\/\\w\\w\/g).map(x => parseInt(x,16));\n const lum = 0.299*r + 0.587*g + 0.114*b;\n return lum < 128 ? '#ffffff' : '#000000';\n }\n\n \/\/ 5) Show tips on button click\n const msgEl = document.getElementById('mood-msg');\n const suggEl = document.getElementById('suggestions');\n const showBtn = document.getElementById('showBtn');\n const defaultBg = '#f0f4f8';\n const defaultFg = '#1f2430';\n\n showBtn.addEventListener('click', () => {\n const idx = selectEl.value;\n if (idx === \"\") {\n return alert('Please select a mood first.');\n }\n const mood = moods[idx];\n document.body.style.background = mood.color;\n document.body.style.color = getTextColor(mood.color);\n msgEl.innerHTML = `<strong>${mood.name}<\/strong><br>${mood.message}`;\n suggEl.innerHTML = mood.suggestions.map(s => `<li>\ud83d\udca1 ${s}<\/li>`).join('');\n });\n\n \/\/ 6) Reset UI on mood change\n selectEl.addEventListener('change', () => {\n document.body.style.background = defaultBg;\n document.body.style.color = defaultFg;\n msgEl.textContent = '';\n suggEl.innerHTML = '';\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Mood Mirror Selector \ud83e\ude9e Mood Mirror Selector Allow camera access, see yourself, then pick how you feel for instant tips. — How are you feeling? — Show Tips<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-5353","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=5353"}],"version-history":[{"count":5,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5353\/revisions"}],"predecessor-version":[{"id":5360,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5353\/revisions\/5360"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=5353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5353,"date":"2025-08-11T00:49:52","date_gmt":"2025-08-11T05:49:52","guid":{"rendered":"https:\/\/madlysane.com\/?page_id=5353"},"modified":"2025-08-11T00:49:52","modified_gmt":"2025-08-11T05:49:52","slug":"mood-mirror-selector","status":"publish","type":"page","link":"https:\/\/madlysane.site\/en\/mood-mirror-selector\/","title":{"rendered":"Mood Mirror Selector"},"content":{"rendered":"\n\n\n\n \n \n Mood Mirror Selector<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background: #f0f4f8;\n color: #1f2430;\n text-align: center;\n padding: 2rem;\n transition: background 0.4s ease, color 0.4s ease;\n }\n video {\n width: 320px;\n height: 240px;\n border: 4px solid #ccc;\n border-radius: 8px;\n transform: scaleX(-1);\n display: block;\n margin: 0 auto 1rem;\n }\n select, button {\n margin: 0.5rem;\n padding: 0.6rem 1rem;\n font-size: 1rem;\n border-radius: 6px;\n border: 1px solid #ccc;\n outline: none;\n }\n button {\n background: #2d6cdf;\n color: #fff;\n border: none;\n cursor: pointer;\n transition: background 0.2s;\n }\n button:hover {\n background: #1f4ea3;\n }\n #mood-msg {\n font-size: 1.3rem;\n margin-top: 1.5rem;\n }\n #suggestions {\n text-align: left;\n display: inline-block;\n margin-top: 1rem;\n padding-left: 1rem;\n }\n #suggestions li {\n margin-bottom: 0.5rem;\n }\n <\/style>\n<\/head>\n<body>\n\n <h1>\ud83e\ude9e Mood Mirror Selector<\/h1>\n <p>Allow camera access, see yourself, then pick how you feel for instant tips.<\/p>\n\n <video id=\"video\" autoplay muted playsinline><\/video>\n\n <div>\n <select id=\"moodSelect\">\n <option value=\"\" disabled selected>— How are you feeling? —<\/option>\n <\/select>\n <button id=\"showBtn\">Show Tips<\/button>\n <\/div>\n\n <div id=\"mood-msg\"><\/div>\n <ul id=\"suggestions\"><\/ul>\n\n <script>\n \/\/ 1) Start webcam feed\n const video = document.getElementById('video');\n navigator.mediaDevices.getUserMedia({ video: true })\n .then(stream => video.srcObject = stream)\n .catch(() => alert('Please allow camera access to use the Mood Mirror.'));\n\n \/\/ 2) Mood definitions\n const moods = [\n { name: \"Happy\", color: \"#f9d342\", message: \"\ud83d\ude0a You feel joyful and upbeat!\", suggestions: [\"Share your happiness with a friend\", \"Write down three things you\u2019re grateful for\", \"Play an uplifting song\"] },\n { name: \"Sad\", color: \"#6c7a89\", message: \"\ud83d\udc99 It\u2019s okay to feel low sometimes.\", suggestions: [\"Talk to someone you trust\", \"Take a relaxing walk outside\", \"Watch something that lifts your spirits\"] },\n { name: \"Anxious\", color: \"#f67280\", message: \"\ud83d\ude28 Your mind feels restless. Breathe easy.\", suggestions: [\"Practice 4-4-4 breathing\", \"Listen to calming music or sounds\", \"Ground yourself by naming five things you see\"] },\n { name: \"Calm\", color: \"#88d8b0\", message: \"\ud83c\udf3f You\u2019re centered and at peace.\", suggestions: [\"Savor this calm with a warm beverage\", \"Close your eyes for a brief mindfulness pause\", \"Notice the sounds around you\"] },\n { name: \"Disgusted\",color: \"#b85c38\", message: \"\ud83e\udd22 Something feels off right now.\", suggestions: [\"Journal what\u2019s causing the feeling\", \"Take a few deep breaths and stretch\", \"Engage in a quick pleasant activity\"] },\n { name: \"Angry\", color: \"#d1495b\", message: \"\ud83d\ude20 You feel tension and frustration.\", suggestions: [\"Count slowly backward from 20\", \"Do a short physical exercise\", \"Write down what\u2019s bothering you\"] },\n { name: \"Upset\", color: \"#8b0000\", message: \"\ud83d\ude25 You\u2019re feeling distressed or hurt.\", suggestions: [\"Reach out to a supportive friend\", \"Write your feelings in a journal\", \"Give yourself permission to take a break\"] },\n { name: \"Surprised\",color: \"#ffca3a\", message: \"\ud83d\ude32 You\u2019ve been taken aback!\", suggestions: [\"Reflect on what surprised you\", \"Jot down your immediate thoughts\", \"Embrace the novelty with curiosity\"] },\n { name: \"Fearful\", color: \"#6a4c93\", message: \"\ud83d\ude30 You feel uneasy and alert.\", suggestions: [\"Name 5 things you see and touch\", \"Take a slow, controlled breath\", \"Remind yourself you\u2019re safe\"] },\n { name: \"Neutral\", color: \"#cccccc\", message: \"\ud83d\ude10 You\u2019re balanced and composed.\", suggestions: [\"Enjoy this moment of calm\", \"Set a small goal for your next task\", \"Capture this feeling with a quick note\"] }\n ];\n\n \/\/ 3) Populate dropdown\n const selectEl = document.getElementById('moodSelect');\n moods.forEach((m, i) => {\n const opt = document.createElement('option');\n opt.value = i;\n opt.textContent = m.name;\n selectEl.appendChild(opt);\n });\n\n \/\/ 4) Utility: contrasting text color\n function getTextColor(hex) {\n const [r,g,b] = hex.match(\/\\w\\w\/g).map(x => parseInt(x,16));\n const lum = 0.299*r + 0.587*g + 0.114*b;\n return lum < 128 ? '#ffffff' : '#000000';\n }\n\n \/\/ 5) Show tips on button click\n const msgEl = document.getElementById('mood-msg');\n const suggEl = document.getElementById('suggestions');\n const showBtn = document.getElementById('showBtn');\n const defaultBg = '#f0f4f8';\n const defaultFg = '#1f2430';\n\n showBtn.addEventListener('click', () => {\n const idx = selectEl.value;\n if (idx === \"\") {\n return alert('Please select a mood first.');\n }\n const mood = moods[idx];\n document.body.style.background = mood.color;\n document.body.style.color = getTextColor(mood.color);\n msgEl.innerHTML = `<strong>${mood.name}<\/strong><br>${mood.message}`;\n suggEl.innerHTML = mood.suggestions.map(s => `<li>\ud83d\udca1 ${s}<\/li>`).join('');\n });\n\n \/\/ 6) Reset UI on mood change\n selectEl.addEventListener('change', () => {\n document.body.style.background = defaultBg;\n document.body.style.color = defaultFg;\n msgEl.textContent = '';\n suggEl.innerHTML = '';\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Mood Mirror Selector \ud83e\ude9e Mood Mirror Selector Allow camera access, see yourself, then pick how you feel for instant tips. — How are you feeling? — Show Tips<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-5353","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/comments?post=5353"}],"version-history":[{"count":5,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5353\/revisions"}],"predecessor-version":[{"id":5360,"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/pages\/5353\/revisions\/5360"}],"wp:attachment":[{"href":"https:\/\/madlysane.site\/en\/wp-json\/wp\/v2\/media?parent=5353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}