Love Thoughts Dashboard<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n }\n \/* Styles for the modal *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 50;\n transition: opacity 0.3s ease;\n }\n .modal-content {\n background-color: #ffffff; \/* bg-white *\/\n padding: 2rem;\n border-radius: 0.75rem; \/* rounded-xl *\/\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n text-align: center;\n max-width: 90%;\n width: 400px;\n }\n .hidden {\n display: none;\n }\n \/* Simple spinner animation *\/\n .spinner {\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n border-top: 4px solid #ef4444; \/* red-500 *\/\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin: 0 auto 1rem;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body class=\"bg-white text-gray-800 antialiased\">\n\n <div class=\"container mx-auto px-4 py-8 md:py-12\">\n \n \n <header class=\"text-center mb-10\">\n <h1 class=\"text-4xl md:text-5xl font-bold tracking-tight text-red-600\">\n Love Thoughts Dashboard\n <\/h1>\n <p class=\"mt-3 text-lg text-gray-600\">A curated collection of your important links and reflections.<\/p>\n <\/header>\n\n \n <div class=\"text-center mb-10\">\n <button id=\"generate-thought-btn\" class=\"bg-[#990000] hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-red-500\/50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5\">\n \u2728 Generate New Love Thought\n <\/button>\n <\/div>\n\n \n <div id=\"dashboard-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n\n \n <a href=\"https:\/\/gemini.google.com\/share\/9d042382c22e\" target=\"_blank\" rel=\"noopener noreferrer\" \n class=\"block p-6 bg-white border border-gray-200 rounded-xl shadow-lg hover:bg-gray-50 hover:shadow-red-500\/20 hover:-translate-y-1 transition-all duration-300 ease-in-out group\">\n <div class=\"flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg mb-4 group-hover:bg-red-600 transition-colors\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-red-500 group-hover:text-white transition-colors\"><path d=\"M9 18V5l12-2v13\"><\/path><circle cx=\"6\" cy=\"18\" r=\"3\"><\/circle><circle cx=\"18\" cy=\"16\" r=\"3\"><\/circle><\/svg>\n <\/div>\n <h2 class=\"text-lg font-semibold text-gray-900 mb-2\">Boombox Love Song Calendar<\/h2>\n <p class=\"text-sm text-gray-500 truncate\">gemini.google.com\/share\/9d042382c22e<\/p>\n <\/a>\n\n \n <a href=\"https:\/\/gemini.google.com\/share\/27ffed20fb46\" target=\"_blank\" rel=\"noopener noreferrer\" \n class=\"block p-6 bg-white border border-gray-200 rounded-xl shadow-lg hover:bg-gray-50 hover:shadow-red-500\/20 hover:-translate-y-1 transition-all duration-300 ease-in-out group\">\n <div class=\"flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg mb-4 group-hover:bg-red-600 transition-colors\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-red-500 group-hover:text-white transition-colors\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72\"><\/path><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72\"><\/path><\/svg>\n <\/div>\n <h2 class=\"text-lg font-semibold text-gray-900 mb-2\">Love Languages Explained<\/h2>\n <p class=\"text-sm text-gray-500 truncate\">gemini.google.com\/share\/27ffed20fb46<\/p>\n <\/a>\n\n \n <a href=\"https:\/\/gemini.google.com\/share\/7cd720895228\" target=\"_blank\" rel=\"noopener noreferrer\" \n class=\"block p-6 bg-white border border-gray-200 rounded-xl shadow-lg hover:bg-gray-50 hover:shadow-red-500\/20 hover:-translate-y-1 transition-all duration-300 ease-in-out group\">\n <div class=\"flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg mb-4 group-hover:bg-red-600 transition-colors\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-red-500 group-hover:text-white transition-colors\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72\"><\/path><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72\"><\/path><\/svg>\n <\/div>\n <h2 class=\"text-lg font-semibold text-gray-900 mb-2\">Love Calendar Creation<\/h2>\n <p class=\"text-sm text-gray-500 truncate\">gemini.google.com\/share\/7cd720895228<\/p>\n <\/a>\n\n \n <a href=\"https:\/\/g.co\/gemini\/share\/986ccfdfe1dd\" target=\"_blank\" rel=\"noopener noreferrer\" \n class=\"block p-6 bg-white border border-gray-200 rounded-xl shadow-lg hover:bg-gray-50 hover:shadow-red-500\/20 hover:-translate-y-1 transition-all duration-300 ease-in-out group\">\n <div class=\"flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg mb-4 group-hover:bg-red-600 transition-colors\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-red-500 group-hover:text-white transition-colors\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72\"><\/path><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72\"><\/path><\/svg>\n <\/div>\n <h2 class=\"text-lg font-semibold text-gray-900 mb-2\">Love Topic Questions<\/h2>\n <p class=\"text-sm text-gray-500 truncate\">g.co\/gemini\/share\/986ccfdfe1dd<\/p>\n <\/a>\n\n \n <a href=\"https:\/\/gemini.google.com\/share\/d078104951e5\" target=\"_blank\" rel=\"noopener noreferrer\" \n class=\"block p-6 bg-white border border-gray-200 rounded-xl shadow-lg hover:bg-gray-50 hover:shadow-red-500\/20 hover:-translate-y-1 transition-all duration-300 ease-in-out group\">\n <div class=\"flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg mb-4 group-hover:bg-red-600 transition-colors\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-red-500 group-hover:text-white transition-colors\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72\"><\/path><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72\"><\/path><\/svg>\n <\/div>\n <h2 class=\"text-lg font-semibold text-gray-900 mb-2\">Dating Questions for Reflection<\/h2>\n <p class=\"text-sm text-gray-500 truncate\">gemini.google.com\/share\/d078104951e5<\/p>\n <\/a>\n \n \n <\/div>\n <\/div>\n\n \n <div id=\"modal\" class=\"modal-overlay hidden\">\n <div class=\"modal-content\">\n <div id=\"modal-spinner\" class=\"spinner\"><\/div>\n <h3 id=\"modal-title\" class=\"text-xl font-bold text-gray-900 mb-2\">Generating Thought...<\/h3>\n <p id=\"modal-message\" class=\"text-gray-600\"><\/p>\n <button id=\"modal-close-btn\" class=\"mt-6 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg hidden\">Close<\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ --- DOM Elements ---\n const generateBtn = document.getElementById('generate-thought-btn');\n const dashboardGrid = document.getElementById('dashboard-grid');\n const modal = document.getElementById('modal');\n const modalSpinner = document.getElementById('modal-spinner');\n const modalTitle = document.getElementById('modal-title');\n const modalMessage = document.getElementById('modal-message');\n const modalCloseBtn = document.getElementById('modal-close-btn');\n\n \/\/ --- Modal Control Functions ---\n const showModal = (title, message = '', showSpinner = true) => {\n modalTitle.textContent = title;\n modalMessage.textContent = message;\n modalSpinner.style.display = showSpinner ? 'block' : 'none';\n modalCloseBtn.classList.add('hidden');\n modal.classList.remove('hidden');\n };\n\n const showModalError = (message) => {\n showModal('Error', message, false);\n modalCloseBtn.classList.remove('hidden');\n };\n\n const hideModal = () => {\n modal.classList.add('hidden');\n };\n\n \/\/ --- Event Listeners ---\n generateBtn.addEventListener('click', handleGenerateThought);\n modalCloseBtn.addEventListener('click', hideModal);\n\n \/**\n * Handles the button click to generate a new thought.\n *\/\n async function handleGenerateThought() {\n showModal('Generating Thought...', 'Please wait while we craft a new reflection for you.');\n generateBtn.disabled = true;\n generateBtn.classList.add('opacity-50', 'cursor-not-allowed');\n\n try {\n \/\/ The prompt for the Gemini API\n const prompt = \"Write a short, insightful, and new question or thought about love, dating, or relationships. It should be in the style of a reflective journal prompt. Make it unique and not a common cliche. The response should be just the thought itself, without any introductory text.\";\n\n \/\/ Construct the payload for the Gemini API\n let chatHistory = [{ role: \"user\", parts: [{ text: prompt }] }];\n const payload = { contents: chatHistory };\n const apiKey = \"\"; \/\/ API key is handled by the environment\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.0-flash:generateContent?key=${apiKey}`;\n \n \/\/ Make the API call\n const response = await fetch(apiUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload)\n });\n\n if (!response.ok) {\n throw new Error(`API request failed with status ${response.status}`);\n }\n\n const result = await response.json();\n\n \/\/ Process the response and add the new card\n if (result.candidates && result.candidates.length > 0 &&\n result.candidates[0].content && result.candidates[0].content.parts &&\n result.candidates[0].content.parts.length > 0) {\n const newThought = result.candidates[0].content.parts[0].text;\n addThoughtCard(newThought);\n hideModal();\n } else {\n throw new Error(\"Invalid response structure from the API.\");\n }\n\n } catch (error) {\n console.error(\"Error generating thought:\", error);\n showModalError(`Failed to generate thought. Please try again later. Details: ${error.message}`);\n } finally {\n \/\/ Re-enable the button after the process is complete\n generateBtn.disabled = false;\n generateBtn.classList.remove('opacity-50', 'cursor-not-allowed');\n }\n }\n\n \/**\n * Creates and prepends a new \"thought card\" to the dashboard grid.\n * @param {string} thoughtText - The text of the generated thought.\n *\/\n function addThoughtCard(thoughtText) {\n const card = document.createElement('div');\n card.className = \"p-6 bg-white border border-gray-200 rounded-xl shadow-lg flex flex-col group hover:border-red-500 transition-colors duration-300\";\n \n card.innerHTML = `\n <div class=\"flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg mb-4 group-hover:bg-red-600 transition-colors\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"text-red-500 group-hover:text-white transition-colors\">\n <path d=\"M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Z\" \/>\n <path d=\"M12 16v-4\" \/>\n <path d=\"M12 8h.01\" \/>\n <\/svg>\n <\/div>\n <h2 class=\"text-lg font-semibold text-gray-900 mb-2 flex-grow\">${thoughtText}<\/h2>\n <p class=\"text-sm text-red-500 font-medium mt-auto\">\u2728 Generated by Gemini<\/p>\n `;\n \n \/\/ Prepend the new card to the grid for immediate visibility\n dashboardGrid.prepend(card);\n }\n <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Love Thoughts Links Love Thoughts Dashboard Love Thoughts Dashboard A curated collection of your important links and reflections. \u2728 Generate New Love […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"folder":[],"class_list":["post-54","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/987blissfm.com\/afterdark\/wp-json\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/987blissfm.com\/afterdark\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/987blissfm.com\/afterdark\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/987blissfm.com\/afterdark\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/987blissfm.com\/afterdark\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":7,"href":"https:\/\/987blissfm.com\/afterdark\/wp-json\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":115,"href":"https:\/\/987blissfm.com\/afterdark\/wp-json\/wp\/v2\/pages\/54\/revisions\/115"}],"wp:attachment":[{"href":"https:\/\/987blissfm.com\/afterdark\/wp-json\/wp\/v2\/media?parent=54"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/987blissfm.com\/afterdark\/wp-json\/wp\/v2\/folder?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}