HKM Melbourne - Donation Appeals<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700&display=swap');\r\n\r\n * {\r\n margin: 01;\r\n padding: 01;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Outfit', sans-serif;\r\n background-color: #f9f9f9; \/* Light background for the page *\/\r\n padding: 20px;\r\n }\r\n\r\n .appeal-container {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr); \/* 3 columns matches image 2 *\/\r\n gap: 20px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .appeal-card {\r\n background: #fff;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n border: 1px solid #d1d1d1; \/* Soft border *\/\r\n display: flex;\r\n flex-direction: column;\r\n transition: transform 0.2s ease;\r\n }\r\n\r\n \/* The Image Container (White part) *\/\r\n .image-wrapper {\r\n padding: 10px; \/* This creates the white space around the image *\/\r\n background: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .appeal-image {\r\n width: 100%;\r\n \/* aspect-ratio: 16\/9; forces all images to be the same height *\/\r\n aspect-ratio: 16 \/ 10; \r\n object-fit: cover;\r\n border-radius: 6px; \/* Slight round on the image itself *\/\r\n }\r\n\r\n \/* The Image Container - Centering logic *\/\r\n .image-wrapper {\r\n padding: 12px 12px 0 12px;\r\n background: #e99b9b;\r\n display: flex; \/* Enables flexbox centering *\/\r\n justify-content: center; \/* Centers horizontally *\/\r\n align-items: center; \/* Centers vertically *\/\r\n }\r\n\r\n .appeal-image {\r\n width: 100%;\r\n max-width: 100%; \/* Ensures it doesn't overflow *\/\r\n aspect-ratio: 1.4 \/ 1; \r\n object-fit: cover;\r\n border-radius: 8px;\r\n display: block;\r\n }\r\n\r\n \/* The Text Area (Gray part) *\/\r\n .appeal-content {\r\n background-color: #fcfcfc; \/* Very light gray\/off-white *\/\r\n border-top: 1px solid #eee;\r\n padding: 15px;\r\n min-height: 70px; \/* Ensures all text boxes are the same height *\/\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n }\r\n\r\n .appeal-title {\r\n font-size: 0.95rem;\r\n font-weight: 500;\r\n color: #8a2a2b; \/* The brownish-red color from image 2 *\/\r\n line-height: 1;\r\n text-decoration: none;\r\n }\r\n\/* Removes underline from all links *\/\r\na {\r\n text-decoration: none !important;\r\n}\r\n\r\n\/* If you only want to target a specific class *\/\r\n.your-link-class {\r\n text-decoration: none;\r\n}\r\n \/* Responsive adjustments *\/\r\n @media (max-width: 900px) {\r\n .appeal-container { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n @media (max-width: 600px) {\r\n .appeal-container { grid-template-columns: 1fr; }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <div id=\"appeal-list\" class=\"appeal-container\">\r\n <div class=\"loading\">Loading appeals...<\/div>\r\n <\/div>\r\n\r\n <script>\r\n async function fetchAppeals() {\r\n const container = document.getElementById('appeal-list');\r\n try {\r\n \/\/ Determine paths robustly\r\n const appealPaths = [\r\n '\/admin\/data\/appeals.json', '\/data\/appeals.json', \r\n 'admin\/data\/appeals.json', 'data\/appeals.json', \r\n '..\/admin\/data\/appeals.json', '..\/data\/appeals.json'\r\n ];\r\n \r\n const donationPaths = [\r\n '\/admin\/data\/donations.json', '\/data\/donations.json', \r\n 'admin\/data\/donations.json', 'data\/donations.json', \r\n '..\/admin\/data\/donations.json', '..\/data\/donations.json'\r\n ];\r\n\r\n const fetchFirstValid = async (paths) => {\r\n for (const path of paths) {\r\n try {\r\n const response = await fetch(path + `?t=${new Date().getTime()}`);\r\n if (response.ok) {\r\n return { data: await response.json(), path: path };\r\n }\r\n } catch (e) { \/* silent *\/ }\r\n }\r\n return null;\r\n };\r\n\r\n const appealsResult = await fetchFirstValid(appealPaths);\r\n const donationsResult = await fetchFirstValid(donationPaths);\r\n\r\n if (!appealsResult || !appealsResult.data || appealsResult.data.length === 0) {\r\n container.innerHTML = `<div class=\"loading\"><p>No active appeals found.<\/p><\/div>`;\r\n return;\r\n }\r\n\r\n let ibase = '';\r\n if (appealsResult.path.includes('admin\/')) ibase = '\/admin\/';\r\n else if (appealsResult.path.startsWith('\/')) ibase = '\/';\r\n\r\n const appealsData = appealsResult.data;\r\n const donationsData = donationsResult ? donationsResult.data : {};\r\n\r\n container.innerHTML = '';\r\n appealsData.forEach(appeal => {\r\n \/\/ Match with donations.json data\r\n let donationsList = null;\r\n if (appeal.donations && Array.isArray(appeal.donations) && appeal.donations.length > 0) {\r\n donationsList = appeal.donations;\r\n } else if (donationsData[appeal.title] && donationsData[appeal.title].donations) {\r\n donationsList = donationsData[appeal.title].donations;\r\n }\r\n\r\n const card = document.createElement('a');\r\n card.className = 'appeal-card';\r\n \r\n let imgUrl = appeal.image;\r\n if (!imgUrl.startsWith('http') && !imgUrl.startsWith('\/')) {\r\n imgUrl = ibase + imgUrl;\r\n }\r\n\r\n const appealDonationsStr = donationsList ? encodeURIComponent(JSON.stringify(donationsList)) : '';\r\n \r\n const donationUrl = 'https:\/\/www.balabah.com\/donation\/';\r\n card.href = `${donationUrl}?title=${encodeURIComponent(appeal.title)}&image=${encodeURIComponent(imgUrl)}&donations=${appealDonationsStr}`;\r\n \r\n card.innerHTML = `\r\n <img decoding=\"async\" src=\"${imgUrl}\" class=\"appeal-image\" alt=\"${appeal.title}\" onerror=\"this.src='https:\/\/via.placeholder.com\/400x250?text=No+Image'\">\r\n <div class=\"appeal-content\">\r\n <h3 class=\"appeal-title\">${appeal.title}<\/h3>\r\n <\/div>\r\n `;\r\n container.appendChild(card);\r\n });\r\n\r\n } catch (error) {\r\n console.error('Error fetching data:', error);\r\n container.innerHTML = '<div class=\"error\">Unable to load appeals. Please check the console for details.<\/div>';\r\n }\r\n }\r\n\r\n fetchAppeals();\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\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>Make a Donation HKM Melbourne – Donation Appeals Loading appeals…<\/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-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.servekrishna.net\/index.php?rest_route=\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.servekrishna.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.servekrishna.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.servekrishna.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.servekrishna.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":5,"href":"https:\/\/www.servekrishna.net\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/www.servekrishna.net\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/www.servekrishna.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}