{"id":2199,"date":"2026-05-19T17:09:52","date_gmt":"2026-05-19T17:09:52","guid":{"rendered":"https:\/\/duaforall.com\/?page_id=2199"},"modified":"2026-05-19T17:09:55","modified_gmt":"2026-05-19T17:09:55","slug":"islamic-goal-tracker","status":"publish","type":"page","link":"https:\/\/duaforall.com\/en\/islamic-goal-tracker\/","title":{"rendered":"Islamic Goal Tracker"},"content":{"rendered":"<style>.kadence-column2199_defe76-63 > .kt-inside-inner-col,.kadence-column2199_defe76-63 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column2199_defe76-63 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column2199_defe76-63 > .kt-inside-inner-col{flex-direction:column;}.kadence-column2199_defe76-63 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column2199_defe76-63 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column2199_defe76-63{position:relative;}@media all and (max-width: 1024px){.kadence-column2199_defe76-63 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column2199_defe76-63 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column2199_defe76-63\"><div class=\"kt-inside-inner-col\">\n<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Islamic Goal Tracker \u2014 Set, Track &#038; Achieve Goals the Islamic Way | DuaForAll<\/title>\n<meta name=\"description\" content=\"A free, advanced Islamic Goal Tracker to set meaningful goals aligned with Quran and Sunnah. Track Salah, Quran recitation, Dhikr, Sadaqah, health, and life goals with niyyah, duas, streaks, and progress analytics.\">\n<meta name=\"keywords\" content=\"Islamic goal tracker, Muslim goal setting, Niyyah goal, Islamic productivity, Quran goals, Salah tracker, Dhikr tracker, Muslim habits, Islamic SMART goals, goal setting in Islam\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Amiri:ital,wght@0,400;0,700;1,400&#038;family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&#038;family=Nunito:wght@300;400;500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n<style>\n\/* ============================================================\n   DESIGN TOKENS\n   ============================================================ *\/\n:root {\n  --green-deep:    #09201A;\n  --green-mid:     #1B4332;\n  --green-rich:    #2D6A4F;\n  --green-soft:    #40916C;\n  --green-pale:    #D8F3DC;\n  --gold:          #C9A84C;\n  --gold-bright:   #E0C060;\n  --gold-pale:     #FFF8E7;\n  --gold-muted:    #8B6914;\n  --cream:         #FAF7F2;\n  --cream-dark:    #F0EAE0;\n  --text-dark:     #1A1A1A;\n  --text-mid:      #4A4A4A;\n  --text-soft:     #7A7A7A;\n  --white:         #FFFFFF;\n  --danger:        #C0392B;\n  --danger-pale:   #FDECEA;\n  --warning:       #D4930A;\n  --success:       #27AE60;\n  --shadow-sm:     0 2px 8px rgba(9,32,26,0.10);\n  --shadow-md:     0 6px 24px rgba(9,32,26,0.14);\n  --shadow-lg:     0 16px 48px rgba(9,32,26,0.18);\n  --radius-sm:     8px;\n  --radius-md:     14px;\n  --radius-lg:     22px;\n  --radius-xl:     32px;\n  --font-arabic:   'Amiri', serif;\n  --font-heading:  'Cormorant Garamond', serif;\n  --font-body:     'Nunito', sans-serif;\n  --transition:    all 0.28s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n\/* ============================================================\n   RESET & BASE\n   ============================================================ *\/\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nhtml { scroll-behavior: smooth; }\nbody {\n  font-family: var(--font-body);\n  background: var(--cream);\n  color: var(--text-dark);\n  line-height: 1.65;\n  overflow-x: hidden;\n}\nimg { max-width: 100%; }\na { color: var(--green-rich); text-decoration: none; }\na:hover { color: var(--gold); text-decoration: underline; }\nbutton { cursor: pointer; font-family: var(--font-body); border: none; outline: none; }\ninput, textarea, select {\n  font-family: var(--font-body);\n  outline: none;\n  border: none;\n}\n\n\/* ============================================================\n   UTILITY CLASSES\n   ============================================================ *\/\n.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }\n.text-center { text-align: center; }\n.text-gold { color: var(--gold); }\n.text-green { color: var(--green-rich); }\n.arabic { font-family: var(--font-arabic); direction: rtl; }\n.mt-sm { margin-top: 12px; }\n.mt-md { margin-top: 24px; }\n.mt-lg { margin-top: 40px; }\n.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }\n.section { padding: 72px 0; }\n.section-alt { background: var(--cream-dark); }\n.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }\n.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\n.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }\n@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } }\n@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .section { padding: 48px 0; } }\n\n\/* ============================================================\n   ISLAMIC GEOMETRIC PATTERN BACKGROUND\n   ============================================================ *\/\n.geo-bg {\n  position: relative;\n  overflow: hidden;\n}\n.geo-bg::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='80' height='80'%3E%3Cg fill='none' stroke='rgba(201,168,76,0.10)' stroke-width='1'%3E%3Cpolygon points='40,4 76,20 76,60 40,76 4,60 4,20'\/%3E%3Cpolygon points='40,14 66,27 66,53 40,66 14,53 14,27'\/%3E%3Cline x1='40' y1='4' x2='40' y2='14'\/%3E%3Cline x1='76' y1='20' x2='66' y2='27'\/%3E%3Cline x1='76' y1='60' x2='66' y2='53'\/%3E%3Cline x1='40' y1='76' x2='40' y2='66'\/%3E%3Cline x1='4' y1='60' x2='14' y2='53'\/%3E%3Cline x1='4' y1='20' x2='14' y2='27'\/%3E%3C\/g%3E%3C\/svg%3E\");\n  background-size: 80px 80px;\n  pointer-events: none;\n  z-index: 0;\n}\n.geo-bg > * { position: relative; z-index: 1; }\n\n\/* ============================================================\n   TOP BISMILLAH BANNER\n   ============================================================ *\/\n.bismillah-banner {\n  background: var(--green-deep);\n  color: var(--gold);\n  text-align: center;\n  padding: 10px 20px;\n  font-family: var(--font-arabic);\n  font-size: 1.15rem;\n  letter-spacing: 0.05em;\n}\n\n\/* ============================================================\n   HERO SECTION\n   ============================================================ *\/\n.hero {\n  background: linear-gradient(160deg, var(--green-deep) 0%, var(--green-mid) 55%, var(--green-rich) 100%);\n  padding: 70px 20px 80px;\n  text-align: center;\n  color: var(--white);\n}\n.hero-crescent {\n  font-size: 3rem;\n  margin-bottom: 12px;\n  display: block;\n  animation: floatMoon 4s ease-in-out infinite;\n}\n@keyframes floatMoon { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }\n.hero-arabic {\n  font-family: var(--font-arabic);\n  font-size: clamp(1.3rem, 3vw, 2rem);\n  color: var(--gold);\n  margin-bottom: 8px;\n  opacity: 0.9;\n}\n.hero h1 {\n  font-family: var(--font-heading);\n  font-size: clamp(2rem, 5vw, 3.4rem);\n  font-weight: 700;\n  line-height: 1.2;\n  margin-bottom: 18px;\n  color: var(--white);\n}\n.hero h1 span { color: var(--gold-bright); }\n.hero-subtitle {\n  font-size: clamp(0.95rem, 2vw, 1.12rem);\n  color: rgba(255,255,255,0.82);\n  max-width: 640px;\n  margin: 0 auto 32px;\n  font-weight: 300;\n}\n.hero-stats {\n  display: flex;\n  justify-content: center;\n  gap: 32px;\n  flex-wrap: wrap;\n  margin-top: 28px;\n}\n.hero-stat {\n  text-align: center;\n}\n.hero-stat-num {\n  font-family: var(--font-heading);\n  font-size: 2.2rem;\n  font-weight: 700;\n  color: var(--gold-bright);\n  display: block;\n}\n.hero-stat-label {\n  font-size: 0.8rem;\n  color: rgba(255,255,255,0.7);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n}\n.hero-divider {\n  width: 60px;\n  height: 2px;\n  background: var(--gold);\n  margin: 0 auto 20px;\n  border-radius: 2px;\n}\n\n\/* ============================================================\n   TOOL WRAPPER\n   ============================================================ *\/\n.tool-wrapper {\n  background: var(--white);\n  border-radius: var(--radius-xl);\n  box-shadow: var(--shadow-lg);\n  margin: -32px auto 0;\n  max-width: 1060px;\n  overflow: hidden;\n  position: relative;\n  z-index: 10;\n}\n\n\/* ============================================================\n   TAB NAVIGATION\n   ============================================================ *\/\n.tool-tabs {\n  display: flex;\n  background: var(--green-mid);\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.tool-tabs::-webkit-scrollbar { display: none; }\n.tab-btn {\n  flex: 1;\n  min-width: 120px;\n  padding: 16px 12px;\n  background: transparent;\n  color: rgba(255,255,255,0.65);\n  font-size: 0.82rem;\n  font-weight: 600;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  transition: var(--transition);\n  border-bottom: 3px solid transparent;\n  white-space: nowrap;\n}\n.tab-btn:hover { color: var(--gold); background: rgba(255,255,255,0.05); }\n.tab-btn.active {\n  color: var(--gold);\n  border-bottom-color: var(--gold);\n  background: rgba(255,255,255,0.08);\n}\n.tab-btn .tab-icon { display: block; font-size: 1.3rem; margin-bottom: 2px; }\n\n\/* ============================================================\n   TAB PANELS\n   ============================================================ *\/\n.tab-panel { display: none; padding: 28px; animation: fadeIn 0.3s ease; }\n.tab-panel.active { display: block; }\n@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }\n\n\/* ============================================================\n   DASHBOARD\n   ============================================================ *\/\n.dash-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 24px;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n.dash-title {\n  font-family: var(--font-heading);\n  font-size: 1.7rem;\n  color: var(--green-mid);\n  font-weight: 700;\n}\n.hijri-badge {\n  background: var(--green-mid);\n  color: var(--gold);\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 0.8rem;\n  font-weight: 600;\n}\n\n\/* Stat Cards *\/\n.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }\n@media (max-width: 700px) { .stat-cards { grid-template-columns: 1fr 1fr; } }\n.stat-card {\n  background: var(--cream);\n  border-radius: var(--radius-md);\n  padding: 18px 14px;\n  text-align: center;\n  border: 1.5px solid var(--cream-dark);\n  transition: var(--transition);\n}\n.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }\n.stat-card-icon { font-size: 1.8rem; display: block; margin-bottom: 6px; }\n.stat-card-num {\n  font-family: var(--font-heading);\n  font-size: 2rem;\n  font-weight: 700;\n  color: var(--green-mid);\n  display: block;\n  line-height: 1;\n}\n.stat-card-label { font-size: 0.75rem; color: var(--text-soft); margin-top: 4px; }\n\n\/* Goal Progress Cards in Dashboard *\/\n.goal-progress-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }\n.goal-progress-card {\n  background: var(--cream);\n  border-radius: var(--radius-md);\n  padding: 20px;\n  border: 1.5px solid var(--cream-dark);\n  transition: var(--transition);\n  cursor: pointer;\n}\n.goal-progress-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--gold); }\n.gpc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }\n.gpc-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }\n.gpc-meta { flex: 1; }\n.gpc-name { font-weight: 700; font-size: 0.92rem; color: var(--text-dark); line-height: 1.2; }\n.gpc-category { font-size: 0.73rem; color: var(--text-soft); }\n.gpc-streak { margin-left: auto; font-size: 0.75rem; font-weight: 700; color: var(--gold-muted); background: var(--gold-pale); padding: 3px 8px; border-radius: 10px; white-space: nowrap; }\n.progress-bar-wrap { background: var(--cream-dark); border-radius: 6px; height: 8px; overflow: hidden; }\n.progress-bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease; }\n.gpc-pct { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-soft); margin-top: 5px; }\n.gpc-pct strong { color: var(--green-mid); }\n\n\/* Check-in Buttons *\/\n.checkin-btn {\n  width: 100%;\n  margin-top: 10px;\n  padding: 8px;\n  border-radius: var(--radius-sm);\n  font-size: 0.8rem;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  transition: var(--transition);\n}\n.checkin-btn.pending { background: var(--gold-pale); color: var(--gold-muted); border: 1.5px solid var(--gold); }\n.checkin-btn.pending:hover { background: var(--gold); color: var(--white); }\n.checkin-btn.done { background: var(--green-pale); color: var(--green-rich); border: 1.5px solid var(--green-soft); cursor: default; }\n\n.empty-dash {\n  text-align: center;\n  padding: 48px 20px;\n  color: var(--text-soft);\n}\n.empty-dash .empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; }\n.empty-dash p { font-size: 1rem; margin-bottom: 16px; }\n\n\/* ============================================================\n   ADD GOAL FORM\n   ============================================================ *\/\n.form-section-title {\n  font-family: var(--font-heading);\n  font-size: 1.5rem;\n  color: var(--green-mid);\n  margin-bottom: 20px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }\n@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }\n.form-group { margin-bottom: 0; }\n.form-group.full { grid-column: 1 \/ -1; }\nlabel {\n  display: block;\n  font-size: 0.82rem;\n  font-weight: 700;\n  color: var(--green-mid);\n  margin-bottom: 5px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.form-control {\n  width: 100%;\n  padding: 11px 14px;\n  border: 1.5px solid var(--cream-dark);\n  border-radius: var(--radius-sm);\n  font-size: 0.92rem;\n  color: var(--text-dark);\n  background: var(--cream);\n  transition: var(--transition);\n}\n.form-control:focus {\n  border-color: var(--gold);\n  background: var(--white);\n  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);\n}\nselect.form-control { appearance: none; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A4A4A' stroke-width='1.5' fill='none'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }\ntextarea.form-control { resize: vertical; min-height: 80px; }\n.niyyah-hint { font-size: 0.78rem; color: var(--text-soft); margin-top: 4px; font-style: italic; }\n\n\/* Category Selector *\/\n.cat-selector { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }\n@media (max-width: 600px) { .cat-selector { grid-template-columns: repeat(3, 1fr); } }\n.cat-opt { display: none; }\n.cat-label {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  padding: 12px 8px;\n  border: 2px solid var(--cream-dark);\n  border-radius: var(--radius-md);\n  cursor: pointer;\n  transition: var(--transition);\n  text-align: center;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--text-mid);\n  background: var(--cream);\n}\n.cat-label:hover { border-color: var(--gold); color: var(--gold-muted); }\n.cat-label .cat-emoji { font-size: 1.5rem; }\n.cat-opt:checked + .cat-label { border-color: var(--green-mid); background: var(--green-mid); color: var(--gold); }\n\n\/* Primary Button *\/\n.btn-primary {\n  background: linear-gradient(135deg, var(--green-mid), var(--green-rich));\n  color: var(--gold);\n  padding: 13px 28px;\n  border-radius: var(--radius-md);\n  font-size: 0.9rem;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  transition: var(--transition);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  box-shadow: 0 4px 14px rgba(27,67,50,0.30);\n}\n.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,67,50,0.36); }\n.btn-gold {\n  background: linear-gradient(135deg, var(--gold), var(--gold-bright));\n  color: var(--green-deep);\n  padding: 13px 28px;\n  border-radius: var(--radius-md);\n  font-size: 0.9rem;\n  font-weight: 700;\n  transition: var(--transition);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,168,76,0.40); }\n.btn-danger { background: var(--danger-pale); color: var(--danger); padding: 7px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; transition: var(--transition); }\n.btn-danger:hover { background: var(--danger); color: var(--white); }\n.btn-sm { padding: 7px 14px; font-size: 0.8rem; border-radius: 8px; }\n\n\/* ============================================================\n   GOALS LIST\n   ============================================================ *\/\n.goals-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }\n.filter-chip {\n  padding: 6px 14px;\n  border-radius: 20px;\n  border: 1.5px solid var(--cream-dark);\n  background: var(--white);\n  font-size: 0.78rem;\n  font-weight: 700;\n  color: var(--text-mid);\n  cursor: pointer;\n  transition: var(--transition);\n}\n.filter-chip:hover, .filter-chip.active { border-color: var(--green-mid); background: var(--green-mid); color: var(--gold); }\n\n.goal-card {\n  background: var(--white);\n  border: 1.5px solid var(--cream-dark);\n  border-radius: var(--radius-md);\n  padding: 20px;\n  margin-bottom: 14px;\n  transition: var(--transition);\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  gap: 14px;\n  align-items: start;\n}\n.goal-card:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }\n.goal-card-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }\n.goal-card-body { flex: 1; }\n.goal-card-name { font-weight: 700; font-size: 1rem; color: var(--text-dark); margin-bottom: 3px; }\n.goal-card-niyyah { font-size: 0.8rem; color: var(--text-soft); font-style: italic; margin-bottom: 8px; }\n.goal-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }\n.tag { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }\n.tag-cat { background: var(--green-pale); color: var(--green-mid); }\n.tag-freq { background: var(--gold-pale); color: var(--gold-muted); }\n.tag-target { background: var(--cream-dark); color: var(--text-mid); }\n.goal-card-actions { display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0; }\n\n\/* ============================================================\n   REPORTS \/ ANALYTICS\n   ============================================================ *\/\n.chart-container { background: var(--cream); border-radius: var(--radius-md); padding: 24px; margin-bottom: 20px; }\n.chart-title { font-family: var(--font-heading); font-size: 1.2rem; color: var(--green-mid); margin-bottom: 16px; font-weight: 700; }\n\n\/* Radial Progress *\/\n.radials { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }\n.radial-wrap { text-align: center; }\n.radial-wrap svg { overflow: visible; }\n.radial-label { font-size: 0.8rem; font-weight: 700; color: var(--text-mid); margin-top: 8px; max-width: 90px; }\n\n\/* Weekly Heatmap *\/\n.heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }\n.heatmap-day { aspect-ratio: 1; border-radius: 4px; background: var(--cream-dark); transition: var(--transition); position: relative; }\n.heatmap-day.level-1 { background: #B7E4C7; }\n.heatmap-day.level-2 { background: #74C69D; }\n.heatmap-day.level-3 { background: #40916C; }\n.heatmap-day.level-4 { background: #1B4332; }\n.heatmap-day-label { font-size: 0.65rem; text-align: center; color: var(--text-soft); margin-bottom: 4px; }\n.heatmap-labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }\n\n\/* Streak Calendar *\/\n.streak-info { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }\n.streak-item { display: flex; align-items: center; gap: 8px; }\n.streak-dot { width: 12px; height: 12px; border-radius: 3px; }\n\n\/* ============================================================\n   SECTION HEADINGS (SEO Content Sections)\n   ============================================================ *\/\n.section-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--gold-pale);\n  color: var(--gold-muted);\n  border: 1px solid var(--gold);\n  border-radius: 20px;\n  padding: 5px 14px;\n  font-size: 0.78rem;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  margin-bottom: 14px;\n}\n.section-heading {\n  font-family: var(--font-heading);\n  font-size: clamp(1.7rem, 4vw, 2.6rem);\n  font-weight: 700;\n  color: var(--green-mid);\n  line-height: 1.2;\n  margin-bottom: 16px;\n}\n.section-heading.light { color: var(--white); }\n.section-subheading {\n  font-size: 1.05rem;\n  color: var(--text-mid);\n  max-width: 640px;\n  margin-bottom: 40px;\n  font-weight: 300;\n  line-height: 1.7;\n}\n.section-subheading.light { color: rgba(255,255,255,0.80); }\n\n\/* ============================================================\n   HADITH \/ QURAN QUOTE CARDS\n   ============================================================ *\/\n.quote-card {\n  background: linear-gradient(135deg, var(--green-deep), var(--green-mid));\n  border-radius: var(--radius-lg);\n  padding: 36px 32px;\n  color: var(--white);\n  position: relative;\n  overflow: hidden;\n  margin-bottom: 20px;\n}\n.quote-card::after {\n  content: '\u275d';\n  position: absolute;\n  right: 20px;\n  top: 10px;\n  font-size: 6rem;\n  color: rgba(201,168,76,0.12);\n  font-family: Georgia, serif;\n  line-height: 1;\n}\n.quote-arabic {\n  font-family: var(--font-arabic);\n  font-size: 1.4rem;\n  color: var(--gold);\n  text-align: right;\n  margin-bottom: 10px;\n  direction: rtl;\n  line-height: 2;\n}\n.quote-translation {\n  font-size: 1rem;\n  color: rgba(255,255,255,0.88);\n  font-style: italic;\n  line-height: 1.7;\n  margin-bottom: 8px;\n}\n.quote-source {\n  font-size: 0.78rem;\n  color: var(--gold);\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n\n\/* ============================================================\n   INFOGRAPHIC CARDS\n   ============================================================ *\/\n.infographic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }\n.infographic-card {\n  background: var(--white);\n  border-radius: var(--radius-lg);\n  padding: 28px 20px;\n  text-align: center;\n  border: 1.5px solid var(--cream-dark);\n  transition: var(--transition);\n  box-shadow: var(--shadow-sm);\n}\n.infographic-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold); }\n.infographic-num {\n  font-family: var(--font-heading);\n  font-size: 3rem;\n  font-weight: 700;\n  color: var(--gold);\n  line-height: 1;\n  display: block;\n}\n.infographic-icon { font-size: 2rem; display: block; margin-bottom: 10px; }\n.infographic-title {\n  font-weight: 700;\n  font-size: 0.95rem;\n  color: var(--green-mid);\n  margin-bottom: 6px;\n}\n.infographic-desc { font-size: 0.8rem; color: var(--text-soft); line-height: 1.5; }\n\n\/* 5-Step Process Infographic *\/\n.process-steps { display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }\n@media (max-width: 700px) { .process-steps { flex-direction: column; } }\n.process-step {\n  flex: 1;\n  min-width: 160px;\n  background: var(--white);\n  padding: 24px 16px;\n  text-align: center;\n  border: 1.5px solid var(--cream-dark);\n  position: relative;\n}\n.process-step:not(:last-child)::after {\n  content: '\u2192';\n  position: absolute;\n  right: -16px;\n  top: 50%;\n  transform: translateY(-50%);\n  font-size: 1.2rem;\n  color: var(--gold);\n  z-index: 2;\n  background: var(--white);\n  width: 32px;\n  text-align: center;\n}\n@media (max-width:700px){ .process-step:not(:last-child)::after { content: '\u2193'; right: auto; left:50%; top:auto; bottom:-16px; transform:translateX(-50%); } }\n.process-step:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }\n.process-step:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }\n.process-num {\n  width: 36px; height: 36px;\n  border-radius: 50%;\n  background: var(--green-mid);\n  color: var(--gold);\n  font-weight: 800;\n  font-size: 1.1rem;\n  display: flex; align-items: center; justify-content: center;\n  margin: 0 auto 10px;\n}\n.process-title { font-weight: 700; font-size: 0.9rem; color: var(--green-mid); margin-bottom: 4px; }\n.process-arabic { font-family: var(--font-arabic); font-size: 0.9rem; color: var(--gold-muted); }\n.process-desc { font-size: 0.75rem; color: var(--text-soft); margin-top: 6px; line-height: 1.4; }\n\n\/* ============================================================\n   DUA CARD\n   ============================================================ *\/\n.dua-card {\n  background: var(--gold-pale);\n  border: 1.5px solid var(--gold);\n  border-radius: var(--radius-md);\n  padding: 22px 20px;\n  margin-bottom: 14px;\n}\n.dua-arabic { font-family: var(--font-arabic); font-size: 1.3rem; color: var(--green-mid); text-align: right; direction: rtl; line-height: 2; margin-bottom: 8px; }\n.dua-transliteration { font-size: 0.83rem; color: var(--text-mid); font-style: italic; margin-bottom: 4px; }\n.dua-translation { font-size: 0.88rem; color: var(--text-dark); margin-bottom: 6px; }\n.dua-source { font-size: 0.75rem; color: var(--gold-muted); font-weight: 700; }\n\n\/* ============================================================\n   FAQ ACCORDION\n   ============================================================ *\/\n.faq-item { border: 1.5px solid var(--cream-dark); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; }\n.faq-question {\n  width: 100%;\n  text-align: left;\n  padding: 16px 20px;\n  background: var(--white);\n  font-weight: 700;\n  font-size: 0.95rem;\n  color: var(--green-mid);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: var(--transition);\n}\n.faq-question:hover { background: var(--cream); }\n.faq-question.open { background: var(--green-mid); color: var(--gold); }\n.faq-icon { font-size: 1.1rem; transition: transform 0.3s ease; flex-shrink: 0; margin-left: 12px; }\n.faq-question.open .faq-icon { transform: rotate(45deg); }\n.faq-answer { display: none; padding: 16px 20px; font-size: 0.9rem; color: var(--text-mid); line-height: 1.7; background: var(--cream); }\n.faq-answer.open { display: block; animation: fadeIn 0.25s ease; }\n\n\/* ============================================================\n   LINK SECTIONS\n   ============================================================ *\/\n.link-card {\n  background: var(--white);\n  border: 1.5px solid var(--cream-dark);\n  border-radius: var(--radius-md);\n  padding: 18px;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  transition: var(--transition);\n  text-decoration: none;\n  color: inherit;\n}\n.link-card:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); transform: translateX(4px); text-decoration: none; }\n.link-card-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--green-pale); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }\n.link-card-title { font-weight: 700; font-size: 0.92rem; color: var(--green-mid); margin-bottom: 2px; }\n.link-card-desc { font-size: 0.78rem; color: var(--text-soft); }\n.link-card-arrow { margin-left: auto; color: var(--gold); font-size: 1rem; flex-shrink: 0; }\n\n\/* External link badge *\/\n.ext-badge {\n  font-size: 0.65rem;\n  background: var(--cream-dark);\n  color: var(--text-soft);\n  padding: 1px 5px;\n  border-radius: 4px;\n  margin-left: 4px;\n  vertical-align: middle;\n}\n\n\/* ============================================================\n   MODAL\n   ============================================================ *\/\n.modal-overlay {\n  display: none;\n  position: fixed;\n  inset: 0;\n  background: rgba(9,32,26,0.70);\n  z-index: 1000;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n}\n.modal-overlay.open { display: flex; }\n.modal-box {\n  background: var(--white);\n  border-radius: var(--radius-xl);\n  padding: 32px;\n  max-width: 480px;\n  width: 100%;\n  box-shadow: var(--shadow-lg);\n  animation: modalIn 0.3s ease;\n  position: relative;\n}\n@keyframes modalIn { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:none; } }\n.modal-close { position: absolute; top: 14px; right: 14px; background: var(--cream); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--text-mid); cursor: pointer; transition: var(--transition); }\n.modal-close:hover { background: var(--danger-pale); color: var(--danger); }\n.modal-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--green-mid); font-weight: 700; margin-bottom: 16px; }\n.modal-arabic { font-family: var(--font-arabic); font-size: 1.1rem; color: var(--gold-muted); text-align: right; direction: rtl; line-height: 2; margin-bottom: 10px; }\n\n\/* Log Entry *\/\n.log-form { display: flex; gap: 10px; align-items: center; }\n.log-input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--cream-dark); border-radius: var(--radius-sm); font-size: 0.9rem; background: var(--cream); color: var(--text-dark); }\n.log-input:focus { border-color: var(--gold); outline: none; }\n\n\/* ============================================================\n   TOAST NOTIFICATION\n   ============================================================ *\/\n.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }\n.toast {\n  background: var(--green-mid);\n  color: var(--gold);\n  padding: 14px 20px;\n  border-radius: var(--radius-md);\n  font-size: 0.88rem;\n  font-weight: 600;\n  box-shadow: var(--shadow-md);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;\n  max-width: 280px;\n}\n@keyframes toastIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }\n@keyframes toastOut { from { opacity:1; } to { opacity:0; } }\n\n\/* ============================================================\n   DARK STRIP SECTIONS\n   ============================================================ *\/\n.strip-dark {\n  background: linear-gradient(160deg, var(--green-deep) 0%, var(--green-mid) 100%);\n  padding: 64px 20px;\n}\n.strip-gold {\n  background: linear-gradient(135deg, var(--gold-pale) 0%, #FFF0C0 100%);\n  border-top: 3px solid var(--gold);\n  border-bottom: 3px solid var(--gold);\n  padding: 56px 20px;\n}\n\n\/* ============================================================\n   ISLAMIC SMART FRAMEWORK TABLE\n   ============================================================ *\/\n.smart-table { width: 100%; border-collapse: collapse; }\n.smart-table th { background: var(--green-mid); color: var(--gold); padding: 12px 16px; text-align: left; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; }\n.smart-table td { padding: 12px 16px; border-bottom: 1px solid var(--cream-dark); font-size: 0.88rem; vertical-align: top; }\n.smart-table tr:hover td { background: var(--cream); }\n.smart-table .letter { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--gold); line-height: 1; }\n.smart-table .arabic-cell { font-family: var(--font-arabic); font-size: 1rem; color: var(--green-rich); direction: rtl; }\n\n\/* ============================================================\n   FOOTER STRIP\n   ============================================================ *\/\n.tool-footer {\n  background: var(--green-deep);\n  color: rgba(255,255,255,0.6);\n  text-align: center;\n  padding: 20px;\n  font-size: 0.78rem;\n}\n.tool-footer a { color: var(--gold); }\n\n\/* ============================================================\n   RESPONSIVE TWEAKS\n   ============================================================ *\/\n@media (max-width: 800px) {\n  .stat-cards { grid-template-columns: 1fr 1fr; }\n  .cat-selector { grid-template-columns: repeat(3, 1fr); }\n  .process-steps { flex-direction: column; }\n  .process-step:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }\n  .process-step:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }\n  .goal-card { grid-template-columns: auto 1fr; }\n  .goal-card-actions { grid-column: 2; }\n}\n@media (max-width: 500px) {\n  .tab-btn { min-width: 90px; font-size: 0.7rem; padding: 12px 8px; }\n  .tab-btn .tab-icon { font-size: 1.1rem; }\n  .tab-panel { padding: 18px; }\n  .modal-box { padding: 22px; }\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- ============================================================\n     BISMILLAH BANNER\n     ============================================================ -->\n<div class=\"bismillah-banner\" aria-label=\"Bismillah ir-Rahman ir-Raheem\">\n  \u0628\u0650\u0633\u0652\u0645\u0650 \u0627\u0644\u0644\u064e\u0651\u0647\u0650 \u0627\u0644\u0631\u064e\u0651\u062d\u0652\u0645\u064e\u0646\u0650 \u0627\u0644\u0631\u064e\u0651\u062d\u0650\u064a\u0645\u0650 &nbsp;\u2014&nbsp; In the Name of Allah, the Most Gracious, the Most Merciful\n<\/div>\n\n<!-- ============================================================\n     HERO\n     ============================================================ -->\n<header class=\"hero geo-bg\" itemscope itemtype=\"https:\/\/schema.org\/WebPage\">\n  <div class=\"container\">\n    <span class=\"hero-crescent\" aria-hidden=\"true\">\u263d<\/span>\n    <p class=\"hero-arabic\" lang=\"ar\">\u0627\u0644\u0645\u062a\u0627\u0628\u0639 \u0627\u0644\u0625\u0633\u0644\u0627\u0645\u064a \u0644\u0644\u0623\u0647\u062f\u0627\u0641<\/p>\n    <h1 itemprop=\"name\">Islamic <span>Goal Tracker<\/span> \u2014<br>Set Purposeful Goals the Islamic Way<\/h1>\n    <div class=\"hero-divider\"><\/div>\n    <p class=\"hero-subtitle\" itemprop=\"description\">\n      Align your ambitions with Niyyah (intention), track progress with consistency, and achieve goals rooted in Quran &amp; Sunnah. A smart, data-driven Islamic productivity tool for Muslims worldwide.\n    <\/p>\n    <div class=\"hero-stats\">\n      <div class=\"hero-stat\">\n        <span class=\"hero-stat-num\">10<\/span>\n        <span class=\"hero-stat-label\">Goal Categories<\/span>\n      <\/div>\n      <div class=\"hero-stat\">\n        <span class=\"hero-stat-num\">\u221e<\/span>\n        <span class=\"hero-stat-label\">Goals You Can Set<\/span>\n      <\/div>\n      <div class=\"hero-stat\">\n        <span class=\"hero-stat-num\">\ud83d\udd25<\/span>\n        <span class=\"hero-stat-label\">Streak Tracking<\/span>\n      <\/div>\n      <div class=\"hero-stat\">\n        <span class=\"hero-stat-num\">100%<\/span>\n        <span class=\"hero-stat-label\">Free &#038; Private<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/header>\n\n<!-- ============================================================\n     INTERACTIVE TOOL\n     ============================================================ -->\n<div class=\"container\" style=\"padding-top:0; padding-bottom:40px;\">\n  <div class=\"tool-wrapper\" id=\"goalTool\" role=\"application\" aria-label=\"Islamic Goal Tracker\">\n\n    <!-- TAB NAVIGATION -->\n    <nav class=\"tool-tabs\" role=\"tablist\" aria-label=\"Goal Tracker Sections\">\n      <button class=\"tab-btn active\" role=\"tab\" aria-selected=\"true\" aria-controls=\"tab-dashboard\" onclick=\"switchTab('dashboard',this)\">\n        <span class=\"tab-icon\">\ud83c\udfe0<\/span>Dashboard\n      <\/button>\n      <button class=\"tab-btn\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-goals\" onclick=\"switchTab('goals',this)\">\n        <span class=\"tab-icon\">\ud83c\udfaf<\/span>My Goals\n      <\/button>\n      <button class=\"tab-btn\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-add\" onclick=\"switchTab('add',this)\">\n        <span class=\"tab-icon\">\u2795<\/span>Add Goal\n      <\/button>\n      <button class=\"tab-btn\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-reports\" onclick=\"switchTab('reports',this)\">\n        <span class=\"tab-icon\">\ud83d\udcca<\/span>Reports\n      <\/button>\n      <button class=\"tab-btn\" role=\"tab\" aria-selected=\"false\" aria-controls=\"tab-duas\" onclick=\"switchTab('duas',this)\">\n        <span class=\"tab-icon\">\ud83e\udd32<\/span>Goal Duas\n      <\/button>\n    <\/nav>\n\n    <!-- ==================== DASHBOARD TAB ==================== -->\n    <div id=\"tab-dashboard\" class=\"tab-panel active\" role=\"tabpanel\">\n      <div class=\"dash-header\">\n        <h2 class=\"dash-title\">Assalamu Alaikum \ud83d\udc4b<\/h2>\n        <div class=\"hijri-badge\" id=\"hijriBadge\">Loading Hijri date\u2026<\/div>\n      <\/div>\n\n      <!-- Daily Motivational Hadith -->\n      <div id=\"dashHadith\" style=\"background:var(--gold-pale);border:1.5px solid var(--gold);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:22px;font-size:0.87rem;color:var(--text-mid);font-style:italic;\"><\/div>\n\n      <!-- Stat Cards -->\n      <div class=\"stat-cards\">\n        <div class=\"stat-card\">\n          <span class=\"stat-card-icon\">\ud83c\udfaf<\/span>\n          <span class=\"stat-card-num\" id=\"statTotal\">0<\/span>\n          <div class=\"stat-card-label\">Total Goals<\/div>\n        <\/div>\n        <div class=\"stat-card\">\n          <span class=\"stat-card-icon\">\u2705<\/span>\n          <span class=\"stat-card-num\" id=\"statToday\">0<\/span>\n          <div class=\"stat-card-label\">Completed Today<\/div>\n        <\/div>\n        <div class=\"stat-card\">\n          <span class=\"stat-card-icon\">\ud83d\udd25<\/span>\n          <span class=\"stat-card-num\" id=\"statStreak\">0<\/span>\n          <div class=\"stat-card-label\">Best Streak<\/div>\n        <\/div>\n        <div class=\"stat-card\">\n          <span class=\"stat-card-icon\">\u2b50<\/span>\n          <span class=\"stat-card-num\" id=\"statRate\">0%<\/span>\n          <div class=\"stat-card-label\">Completion Rate<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Goals Progress -->\n      <h3 style=\"font-family:var(--font-heading);font-size:1.1rem;color:var(--green-mid);margin-bottom:14px;font-weight:700;\">\n        \ud83d\udccb Today&#8217;s Goal Check-in\n      <\/h3>\n      <div class=\"goal-progress-grid\" id=\"dashGoalGrid\">\n        <div class=\"empty-dash\">\n          <span class=\"empty-icon\">\ud83c\udf31<\/span>\n          <p>No goals yet. Start by adding your first goal!<\/p>\n          <button class=\"btn-gold\" onclick=\"switchTab('add', document.querySelectorAll('.tab-btn')[2])\">\n            \u2795 Add Your First Goal\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Jumu'ah Reminder -->\n      <div id=\"jumuahReminder\" style=\"display:none;margin-top:18px;background:var(--green-mid);color:var(--gold);border-radius:var(--radius-md);padding:14px 18px;font-size:0.88rem;font-weight:600;text-align:center;\">\n        \ud83d\udd4c Jumu&#8217;ah Mubarak! Friday is the best day to review your weekly goals and make dua.\n        <a href=\"https:\/\/duaforall.com\/friday-duas\" target=\"_blank\" rel=\"noopener\" style=\"color:var(--gold-bright);margin-left:8px;\">Friday Duas \u2192<\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ==================== MY GOALS TAB ==================== -->\n    <div id=\"tab-goals\" class=\"tab-panel\" role=\"tabpanel\">\n      <div style=\"display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;\">\n        <h2 class=\"form-section-title\" style=\"margin-bottom:0;\">\ud83c\udfaf My Goals<\/h2>\n        <button class=\"btn-primary btn-sm\" onclick=\"switchTab('add', document.querySelectorAll('.tab-btn')[2])\">\u2795 Add Goal<\/button>\n      <\/div>\n      <div class=\"goals-filter-bar\" id=\"filterBar\">\n        <button class=\"filter-chip active\" onclick=\"filterGoals('all',this)\">All<\/button>\n        <button class=\"filter-chip\" onclick=\"filterGoals('ibadah',this)\">\ud83d\udd4c Ibadah<\/button>\n        <button class=\"filter-chip\" onclick=\"filterGoals('quran',this)\">\ud83d\udcd6 Quran<\/button>\n        <button class=\"filter-chip\" onclick=\"filterGoals('dhikr',this)\">\ud83d\udcff Dhikr<\/button>\n        <button class=\"filter-chip\" onclick=\"filterGoals('fasting',this)\">\ud83c\udf19 Fasting<\/button>\n        <button class=\"filter-chip\" onclick=\"filterGoals('sadaqah',this)\">\ud83d\udcb0 Sadaqah<\/button>\n        <button class=\"filter-chip\" onclick=\"filterGoals('health',this)\">\ud83d\udcaa Health<\/button>\n        <button class=\"filter-chip\" onclick=\"filterGoals('knowledge',this)\">\ud83d\udcda Knowledge<\/button>\n        <button class=\"filter-chip\" onclick=\"filterGoals('family',this)\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67 Family<\/button>\n        <button class=\"filter-chip\" onclick=\"filterGoals('career',this)\">\ud83d\udcbc Career<\/button>\n        <button class=\"filter-chip\" onclick=\"filterGoals('community',this)\">\ud83c\udf0d Community<\/button>\n      <\/div>\n      <div id=\"goalsListContainer\">\n        <div class=\"empty-dash\">\n          <span class=\"empty-icon\">\ud83c\udfaf<\/span>\n          <p>No goals found. Add your first goal to get started!<\/p>\n          <button class=\"btn-gold\" onclick=\"switchTab('add', document.querySelectorAll('.tab-btn')[2])\">\u2795 Add Goal<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- ==================== ADD GOAL TAB ==================== -->\n    <div id=\"tab-add\" class=\"tab-panel\" role=\"tabpanel\">\n      <h2 class=\"form-section-title\">\ud83c\udf31 Set a New Islamic Goal<\/h2>\n\n      <div class=\"form-grid\">\n        <!-- Goal Name -->\n        <div class=\"form-group full\">\n          <label for=\"goalName\">Goal Name *<\/label>\n          <input type=\"text\" id=\"goalName\" class=\"form-control\" placeholder=\"e.g. Read 1 page of Quran daily\" maxlength=\"100\">\n        <\/div>\n\n        <!-- Category -->\n        <div class=\"form-group full\">\n          <label>Category *<\/label>\n          <div class=\"cat-selector\">\n            <input type=\"radio\" name=\"goalCat\" id=\"cat_ibadah\" value=\"ibadah\" class=\"cat-opt\" checked>\n            <label for=\"cat_ibadah\" class=\"cat-label\"><span class=\"cat-emoji\">\ud83d\udd4c<\/span>Ibadah<\/label>\n\n            <input type=\"radio\" name=\"goalCat\" id=\"cat_quran\" value=\"quran\" class=\"cat-opt\">\n            <label for=\"cat_quran\" class=\"cat-label\"><span class=\"cat-emoji\">\ud83d\udcd6<\/span>Quran<\/label>\n\n            <input type=\"radio\" name=\"goalCat\" id=\"cat_dhikr\" value=\"dhikr\" class=\"cat-opt\">\n            <label for=\"cat_dhikr\" class=\"cat-label\"><span class=\"cat-emoji\">\ud83d\udcff<\/span>Dhikr<\/label>\n\n            <input type=\"radio\" name=\"goalCat\" id=\"cat_fasting\" value=\"fasting\" class=\"cat-opt\">\n            <label for=\"cat_fasting\" class=\"cat-label\"><span class=\"cat-emoji\">\ud83c\udf19<\/span>Fasting<\/label>\n\n            <input type=\"radio\" name=\"goalCat\" id=\"cat_sadaqah\" value=\"sadaqah\" class=\"cat-opt\">\n            <label for=\"cat_sadaqah\" class=\"cat-label\"><span class=\"cat-emoji\">\ud83d\udcb0<\/span>Sadaqah<\/label>\n\n            <input type=\"radio\" name=\"goalCat\" id=\"cat_health\" value=\"health\" class=\"cat-opt\">\n            <label for=\"cat_health\" class=\"cat-label\"><span class=\"cat-emoji\">\ud83d\udcaa<\/span>Health<\/label>\n\n            <input type=\"radio\" name=\"goalCat\" id=\"cat_knowledge\" value=\"knowledge\" class=\"cat-opt\">\n            <label for=\"cat_knowledge\" class=\"cat-label\"><span class=\"cat-emoji\">\ud83d\udcda<\/span>Knowledge<\/label>\n\n            <input type=\"radio\" name=\"goalCat\" id=\"cat_family\" value=\"family\" class=\"cat-opt\">\n            <label for=\"cat_family\" class=\"cat-label\"><span class=\"cat-emoji\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67<\/span>Family<\/label>\n\n            <input type=\"radio\" name=\"goalCat\" id=\"cat_career\" value=\"career\" class=\"cat-opt\">\n            <label for=\"cat_career\" class=\"cat-label\"><span class=\"cat-emoji\">\ud83d\udcbc<\/span>Career<\/label>\n\n            <input type=\"radio\" name=\"goalCat\" id=\"cat_community\" value=\"community\" class=\"cat-opt\">\n            <label for=\"cat_community\" class=\"cat-label\"><span class=\"cat-emoji\">\ud83c\udf0d<\/span>Community<\/label>\n          <\/div>\n        <\/div>\n\n        <!-- Niyyah -->\n        <div class=\"form-group full\">\n          <label for=\"goalNiyyah\">Niyyah (Intention) *<\/label>\n          <textarea id=\"goalNiyyah\" class=\"form-control\" placeholder=\"State your sincere intention for this goal \u2014 for the sake of Allah (SWT)\u2026\" rows=\"2\"><\/textarea>\n          <p class=\"niyyah-hint\">\ud83d\udca1 &#8220;Actions are judged by intentions&#8221; \u2014 Sahih Bukhari 1. Be sincere in your niyyah.<\/p>\n        <\/div>\n\n        <!-- Target & Unit -->\n        <div class=\"form-group\">\n          <label for=\"goalTarget\">Daily Target *<\/label>\n          <input type=\"number\" id=\"goalTarget\" class=\"form-control\" placeholder=\"e.g. 5\" min=\"1\" max=\"10000\">\n        <\/div>\n        <div class=\"form-group\">\n          <label for=\"goalUnit\">Unit<\/label>\n          <select id=\"goalUnit\" class=\"form-control\">\n            <option value=\"times\">Times \/ Count<\/option>\n            <option value=\"pages\">Pages<\/option>\n            <option value=\"minutes\">Minutes<\/option>\n            <option value=\"verses\">Verses (Ayat)<\/option>\n            <option value=\"rakaat\">Rakaat<\/option>\n            <option value=\"juz\">Juz<\/option>\n            <option value=\"days\">Days<\/option>\n            <option value=\"riyals\">Riyals \/ PKR<\/option>\n            <option value=\"percent\">% (Percentage)<\/option>\n            <option value=\"custom\">Custom<\/option>\n          <\/select>\n        <\/div>\n\n        <!-- Frequency -->\n        <div class=\"form-group\">\n          <label for=\"goalFreq\">Frequency<\/label>\n          <select id=\"goalFreq\" class=\"form-control\">\n            <option value=\"daily\">Daily<\/option>\n            <option value=\"weekly\">Weekly<\/option>\n            <option value=\"monthly\">Monthly<\/option>\n          <\/select>\n        <\/div>\n\n        <!-- Color -->\n        <div class=\"form-group\">\n          <label for=\"goalColor\">Accent Color<\/label>\n          <select id=\"goalColor\" class=\"form-control\">\n            <option value=\"#1B4332\">Deep Green (Tawba)<\/option>\n            <option value=\"#40916C\">Fresh Green (Growth)<\/option>\n            <option value=\"#C9A84C\">Gold (Barakah)<\/option>\n            <option value=\"#2980B9\">Blue (Tranquility)<\/option>\n            <option value=\"#8E44AD\">Purple (Wisdom)<\/option>\n            <option value=\"#C0392B\">Red (Strength)<\/option>\n            <option value=\"#E67E22\">Orange (Energy)<\/option>\n          <\/select>\n        <\/div>\n\n        <!-- Dua for Goal -->\n        <div class=\"form-group full\">\n          <label for=\"goalDua\">Goal-Specific Dua (Optional)<\/label>\n          <textarea id=\"goalDua\" class=\"form-control\" placeholder=\"Enter a dua related to this goal, e.g. 'Rabbi zidni ilma' for a knowledge goal\u2026\" rows=\"2\"><\/textarea>\n        <\/div>\n\n        <!-- Deadline -->\n        <div class=\"form-group\">\n          <label for=\"goalDeadline\">Target Completion Date<\/label>\n          <input type=\"date\" id=\"goalDeadline\" class=\"form-control\">\n        <\/div>\n\n        <!-- Notes -->\n        <div class=\"form-group\">\n          <label for=\"goalNotes\">Personal Notes<\/label>\n          <input type=\"text\" id=\"goalNotes\" class=\"form-control\" placeholder=\"Any reminders or motivation\u2026\">\n        <\/div>\n      <\/div>\n\n      <div style=\"margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;\">\n        <button class=\"btn-primary\" onclick=\"addGoal()\">\n          \ud83c\udf31 Set This Goal \u2014 Bismillah\n        <\/button>\n        <button class=\"btn-gold\" onclick=\"loadSampleGoals()\">\n          \u2728 Load Sample Islamic Goals\n        <\/button>\n      <\/div>\n\n      <div id=\"addGoalMsg\" style=\"margin-top:14px;display:none;\"><\/div>\n    <\/div>\n\n    <!-- ==================== REPORTS TAB ==================== -->\n    <div id=\"tab-reports\" class=\"tab-panel\" role=\"tabpanel\">\n      <h2 class=\"form-section-title\">\ud83d\udcca Progress Reports &#038; Analytics<\/h2>\n\n      <div class=\"chart-container\">\n        <div class=\"chart-title\">\ud83d\udd35 Goal Completion Rates<\/div>\n        <div class=\"radials\" id=\"radialCharts\"><\/div>\n      <\/div>\n\n      <div class=\"chart-container\">\n        <div class=\"chart-title\">\ud83d\udcc5 Weekly Activity Heatmap (Last 28 Days)<\/div>\n        <div class=\"heatmap-labels\" id=\"heatmapLabels\">\n          <div class=\"heatmap-day-label\">Sun<\/div><div class=\"heatmap-day-label\">Mon<\/div>\n          <div class=\"heatmap-day-label\">Tue<\/div><div class=\"heatmap-day-label\">Wed<\/div>\n          <div class=\"heatmap-day-label\">Thu<\/div><div class=\"heatmap-day-label\">Fri<\/div>\n          <div class=\"heatmap-day-label\">Sat<\/div>\n        <\/div>\n        <div class=\"heatmap\" id=\"heatmapGrid\"><\/div>\n        <div class=\"streak-info\" style=\"margin-top:12px;\">\n          <div class=\"streak-item\"><div class=\"streak-dot\" style=\"background:var(--cream-dark)\"><\/div> <span style=\"font-size:0.75rem;color:var(--text-soft)\">No activity<\/span><\/div>\n          <div class=\"streak-item\"><div class=\"streak-dot\" style=\"background:#B7E4C7\"><\/div> <span style=\"font-size:0.75rem;color:var(--text-soft)\">1\u201325%<\/span><\/div>\n          <div class=\"streak-item\"><div class=\"streak-dot\" style=\"background:#74C69D\"><\/div> <span style=\"font-size:0.75rem;color:var(--text-soft)\">26\u201350%<\/span><\/div>\n          <div class=\"streak-item\"><div class=\"streak-dot\" style=\"background:#40916C\"><\/div> <span style=\"font-size:0.75rem;color:var(--text-soft)\">51\u201375%<\/span><\/div>\n          <div class=\"streak-item\"><div class=\"streak-dot\" style=\"background:#1B4332\"><\/div> <span style=\"font-size:0.75rem;color:var(--text-soft)\">76\u2013100%<\/span><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"chart-container\">\n        <div class=\"chart-title\">\ud83d\udcc2 Goals by Category<\/div>\n        <div id=\"categoryBar\" style=\"display:flex;flex-direction:column;gap:10px;\"><\/div>\n      <\/div>\n\n      <div style=\"margin-top:8px;\">\n        <button class=\"btn-danger\" onclick=\"clearAllData()\" style=\"font-size:0.78rem;padding:8px 14px;\">\n          \ud83d\uddd1\ufe0f Reset All Data\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <!-- ==================== DUAS TAB ==================== -->\n    <div id=\"tab-duas\" class=\"tab-panel\" role=\"tabpanel\">\n      <h2 class=\"form-section-title\">\ud83e\udd32 Duas for Goal Achievement<\/h2>\n      <p style=\"font-size:0.88rem;color:var(--text-soft);margin-bottom:24px;\">Recite these authentic duas from Quran and Sunnah to seek Allah&#8217;s help in achieving your goals.<\/p>\n\n      <div class=\"dua-card\">\n        <div style=\"font-size:0.72rem;font-weight:700;color:var(--gold-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;\">For Success in All Affairs<\/div>\n        <div class=\"dua-arabic\">\u0631\u064e\u0628\u064e\u0651\u0646\u064e\u0627 \u0622\u062a\u0650\u0646\u064e\u0627 \u0641\u0650\u064a \u0627\u0644\u062f\u064f\u0651\u0646\u0652\u064a\u064e\u0627 \u062d\u064e\u0633\u064e\u0646\u064e\u0629\u064b \u0648\u064e\u0641\u0650\u064a \u0627\u0644\u0652\u0622\u062e\u0650\u0631\u064e\u0629\u0650 \u062d\u064e\u0633\u064e\u0646\u064e\u0629\u064b \u0648\u064e\u0642\u0650\u0646\u064e\u0627 \u0639\u064e\u0630\u064e\u0627\u0628\u064e \u0627\u0644\u0646\u064e\u0651\u0627\u0631\u0650<\/div>\n        <div class=\"dua-transliteration\">Rabban\u0101 \u0101tin\u0101 fid-duny\u0101 \u1e25asanatan wa fil-\u0101khirati \u1e25asanatan wa qin\u0101 &#8216;adh\u0101ban-n\u0101r<\/div>\n        <div class=\"dua-translation\">&#8220;Our Lord, give us good in this world and good in the Hereafter, and protect us from the punishment of the Fire.&#8221;<\/div>\n        <div class=\"dua-source\">\ud83d\udcda Quran, Surah Al-Baqarah 2:201<\/div>\n      <\/div>\n\n      <div class=\"dua-card\">\n        <div style=\"font-size:0.72rem;font-weight:700;color:var(--gold-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;\">For Increase in Knowledge<\/div>\n        <div class=\"dua-arabic\">\u0631\u064e\u0628\u0650\u0651 \u0632\u0650\u062f\u0652\u0646\u0650\u064a \u0639\u0650\u0644\u0652\u0645\u064b\u0627<\/div>\n        <div class=\"dua-transliteration\">Rabbi zidn\u012b &#8216;ilm\u0101<\/div>\n        <div class=\"dua-translation\">&#8220;My Lord, increase me in knowledge.&#8221;<\/div>\n        <div class=\"dua-source\">\ud83d\udcda Quran, Surah Ta-Ha 20:114<\/div>\n      <\/div>\n\n      <div class=\"dua-card\">\n        <div style=\"font-size:0.72rem;font-weight:700;color:var(--gold-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;\">For Strength &#038; Guidance<\/div>\n        <div class=\"dua-arabic\">\u0627\u0644\u0644\u064e\u0651\u0647\u064f\u0645\u064e\u0651 \u0623\u064e\u0639\u0650\u0646\u0650\u0651\u064a \u0639\u064e\u0644\u064e\u0649 \u0630\u0650\u0643\u0652\u0631\u0650\u0643\u064e \u0648\u064e\u0634\u064f\u0643\u0652\u0631\u0650\u0643\u064e \u0648\u064e\u062d\u064f\u0633\u0652\u0646\u0650 \u0639\u0650\u0628\u064e\u0627\u062f\u064e\u062a\u0650\u0643\u064e<\/div>\n        <div class=\"dua-transliteration\">All\u0101humma a&#8217;inn\u012b &#8216;al\u0101 dhikrika wa shukrika wa \u1e25usni &#8216;ib\u0101datik<\/div>\n        <div class=\"dua-translation\">&#8220;O Allah, help me to remember You, to be grateful to You, and to worship You in an excellent manner.&#8221;<\/div>\n        <div class=\"dua-source\">\ud83d\udcda Abu Dawud 1522 \u2014 Authentic (Sahih)<\/div>\n      <\/div>\n\n      <div class=\"dua-card\">\n        <div style=\"font-size:0.72rem;font-weight:700;color:var(--gold-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;\">For Ease in Difficulty<\/div>\n        <div class=\"dua-arabic\">\u0631\u064e\u0628\u0650\u0651 \u0627\u0634\u0652\u0631\u064e\u062d\u0652 \u0644\u0650\u064a \u0635\u064e\u062f\u0652\u0631\u0650\u064a \u0648\u064e\u064a\u064e\u0633\u0650\u0651\u0631\u0652 \u0644\u0650\u064a \u0623\u064e\u0645\u0652\u0631\u0650\u064a<\/div>\n        <div class=\"dua-transliteration\">Rabbish ra\u1e25 l\u012b \u1e63adr\u012b wa yassir l\u012b amr\u012b<\/div>\n        <div class=\"dua-translation\">&#8220;My Lord, expand my chest, and ease my task for me.&#8221;<\/div>\n        <div class=\"dua-source\">\ud83d\udcda Quran, Surah Ta-Ha 20:25\u201326<\/div>\n      <\/div>\n\n      <div class=\"dua-card\">\n        <div style=\"font-size:0.72rem;font-weight:700;color:var(--gold-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;\">For Health &#038; Well-Being<\/div>\n        <div class=\"dua-arabic\">\u0627\u0644\u0644\u064e\u0651\u0647\u064f\u0645\u064e\u0651 \u0639\u064e\u0627\u0641\u0650\u0646\u0650\u064a \u0641\u0650\u064a \u0628\u064e\u062f\u064e\u0646\u0650\u064a\u060c \u0627\u0644\u0644\u064e\u0651\u0647\u064f\u0645\u064e\u0651 \u0639\u064e\u0627\u0641\u0650\u0646\u0650\u064a \u0641\u0650\u064a \u0633\u064e\u0645\u0652\u0639\u0650\u064a \u0648\u064e\u0628\u064e\u0635\u064e\u0631\u0650\u064a<\/div>\n        <div class=\"dua-transliteration\">All\u0101humma &#8216;\u0101fin\u012b f\u012b badan\u012b, All\u0101humma &#8216;\u0101fin\u012b f\u012b sam&#8217;\u012b wa ba\u1e63ar\u012b<\/div>\n        <div class=\"dua-translation\">&#8220;O Allah, grant me health in my body. O Allah, grant me health in my hearing and my sight.&#8221;<\/div>\n        <div class=\"dua-source\">\ud83d\udcda Abu Dawud 5090 \u2014 Authentic (Sahih)<\/div>\n      <\/div>\n\n      <div class=\"dua-card\">\n        <div style=\"font-size:0.72rem;font-weight:700;color:var(--gold-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;\">For Rizq &#038; Provision<\/div>\n        <div class=\"dua-arabic\">\u0627\u0644\u0644\u064e\u0651\u0647\u064f\u0645\u064e\u0651 \u0627\u0643\u0652\u0641\u0650\u0646\u0650\u064a \u0628\u0650\u062d\u064e\u0644\u0627\u0644\u0650\u0643\u064e \u0639\u064e\u0646\u0652 \u062d\u064e\u0631\u064e\u0627\u0645\u0650\u0643\u064e \u0648\u064e\u0623\u064e\u063a\u0652\u0646\u0650\u0646\u0650\u064a \u0628\u0650\u0641\u064e\u0636\u0652\u0644\u0650\u0643\u064e \u0639\u064e\u0645\u064e\u0651\u0646\u0652 \u0633\u0650\u0648\u064e\u0627\u0643\u064e<\/div>\n        <div class=\"dua-transliteration\">All\u0101humma-kfin\u012b bi\u1e25al\u0101lik\u0101 &#8216;an \u1e25ar\u0101mik wa aghnini bifa\u1e0dlika &#8216;amman siw\u0101k<\/div>\n        <div class=\"dua-translation\">&#8220;O Allah, suffice me with what You have made lawful against what You have made unlawful, and make me independent of all others besides You.&#8221;<\/div>\n        <div class=\"dua-source\">\ud83d\udcda Tirmidhi 3563 \u2014 Hasan<\/div>\n      <\/div>\n\n      <div style=\"margin-top:20px;text-align:center;\">\n        <a href=\"https:\/\/duaforall.com\/duas-for-success\" target=\"_blank\" rel=\"noopener\" class=\"btn-primary\" style=\"display:inline-flex;\">\n          \ud83d\udcff Explore More Duas for Success on DuaForAll \u2192\n        <\/a>\n      <\/div>\n    <\/div>\n\n  <\/div><!-- end tool-wrapper -->\n<\/div>\n\n<!-- ============================================================\n     MODAL: LOG PROGRESS\n     ============================================================ -->\n<div class=\"modal-overlay\" id=\"logModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\">\n  <div class=\"modal-box\">\n    <button class=\"modal-close\" onclick=\"closeModal()\" aria-label=\"Close\">\u2715<\/button>\n    <h3 class=\"modal-title\" id=\"modalTitle\">Log Progress<\/h3>\n    <p class=\"modal-arabic\" id=\"modalArabic\" lang=\"ar\"><\/p>\n    <p style=\"font-size:0.85rem;color:var(--text-soft);margin-bottom:16px;\" id=\"modalDesc\"><\/p>\n    <div class=\"log-form\">\n      <input type=\"number\" id=\"logAmount\" class=\"log-input\" placeholder=\"Enter amount\u2026\" min=\"0\">\n      <button class=\"btn-primary btn-sm\" onclick=\"submitLog()\">\u2705 Log It<\/button>\n    <\/div>\n    <p id=\"logMsg\" style=\"margin-top:10px;font-size:0.82rem;color:var(--green-rich);font-weight:600;\"><\/p>\n  <\/div>\n<\/div>\n\n<!-- ============================================================\n     TOAST CONTAINER\n     ============================================================ -->\n<div class=\"toast-container\" id=\"toastContainer\" aria-live=\"polite\"><\/div>\n\n<!-- ============================================================\n     SEO CONTENT: WHAT IS ISLAMIC GOAL SETTING\n     ============================================================ -->\n<section class=\"section\" aria-labelledby=\"what-heading\">\n  <div class=\"container\">\n    <div class=\"text-center\" style=\"margin-bottom:48px;\">\n      <div class=\"section-badge\">\u262a\ufe0f Islamic Productivity<\/div>\n      <h2 class=\"section-heading\" id=\"what-heading\">What Is Islamic Goal Setting?<\/h2>\n      <p class=\"section-subheading\" style=\"margin:0 auto;\">\n        Islamic goal setting is the practice of defining purposeful objectives rooted in <strong>Niyyah (intention)<\/strong>, guided by the Quran and Sunnah, and pursued with <strong>Tawakkul (reliance on Allah)<\/strong> \u2014 balancing worldly effort with spiritual surrender.\n      <\/p>\n    <\/div>\n    <div class=\"grid-2\">\n      <div>\n        <p style=\"font-size:0.95rem;color:var(--text-mid);line-height:1.85;margin-bottom:16px;\">\n          Islam is a complete way of life (<em>Deen<\/em>) that addresses every dimension of human existence \u2014 spiritual, physical, social, and intellectual. The Prophet Muhammad \ufdfa was the most productive human being who ever lived, setting and achieving extraordinary goals while maintaining the highest standard of worship and character.\n        <\/p>\n        <p style=\"font-size:0.95rem;color:var(--text-mid);line-height:1.85;margin-bottom:16px;\">\n          Research in behavioural psychology, including <a href=\"https:\/\/www.apa.org\/pubs\/journals\/bul\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:var(--green-rich);\">studies published in the APA&#8217;s <em>Psychological Bulletin<\/em><span class=\"ext-badge\">\u2197<\/span><\/a>, confirms that goal-setting is one of the strongest predictors of achievement. When combined with the spiritual dimension of Islamic intention and accountability before Allah, goal-setting becomes a powerful act of worship.\n        <\/p>\n        <p style=\"font-size:0.95rem;color:var(--text-mid);line-height:1.85;\">\n          The Islamic framework adds three unique layers to conventional goal-setting: <strong>Niyyah<\/strong> (pure intention), <strong>Tawakkul<\/strong> (trust in Allah after effort), and <strong>Muhasabah<\/strong> (self-accountability before the Day of Judgement) \u2014 making every goal a spiritual journey, not merely a productivity exercise.\n        <\/p>\n      <\/div>\n      <div>\n        <div class=\"quote-card\">\n          <div class=\"quote-arabic\" lang=\"ar\">\u0625\u0650\u0646\u064e\u0651\u0645\u064e\u0627 \u0627\u0644\u0652\u0623\u064e\u0639\u0652\u0645\u064e\u0627\u0644\u064f \u0628\u0650\u0627\u0644\u0646\u0650\u0651\u064a\u064e\u0651\u0627\u062a\u0650<\/div>\n          <p class=\"quote-translation\">&#8220;Verily, actions are judged by their intentions, and every person will get what they intended.&#8221;<\/p>\n          <div class=\"quote-source\">\ud83d\udcda Sahih Bukhari, Hadith 1 \u2014 One of the most fundamental principles in Islam<\/div>\n        <\/div>\n        <div class=\"quote-card\" style=\"margin-top:14px;\">\n          <div class=\"quote-arabic\" lang=\"ar\">\u0648\u064e\u0623\u064e\u0646\u0652 \u0644\u064e\u064a\u0652\u0633\u064e \u0644\u0650\u0644\u0652\u0625\u0650\u0646\u0633\u064e\u0627\u0646\u0650 \u0625\u0650\u0644\u064e\u0651\u0627 \u0645\u064e\u0627 \u0633\u064e\u0639\u064e\u0649<\/div>\n          <p class=\"quote-translation\">&#8220;And that there is not for man except that for which he strives.&#8221;<\/p>\n          <div class=\"quote-source\">\ud83d\udcda Quran, Surah An-Najm 53:39<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     INFOGRAPHIC: 5 PILLARS OF ISLAMIC GOAL SETTING\n     ============================================================ -->\n<section class=\"strip-dark geo-bg\" aria-labelledby=\"pillars-heading\">\n  <div class=\"container\">\n    <div class=\"text-center\" style=\"margin-bottom:40px;\">\n      <div class=\"section-badge\" style=\"background:rgba(201,168,76,0.15);border-color:var(--gold);\">\ud83c\udfdb\ufe0f Framework<\/div>\n      <h2 class=\"section-heading light\" id=\"pillars-heading\">The 5 Pillars of Islamic Goal Achievement<\/h2>\n      <p class=\"section-subheading light\" style=\"margin:0 auto;\">An evidence-based, spiritually-grounded framework derived from Quran, Sunnah, and modern productivity science.<\/p>\n    <\/div>\n    <div class=\"process-steps\" role=\"list\">\n      <div class=\"process-step\" role=\"listitem\">\n        <div class=\"process-num\">1<\/div>\n        <div class=\"process-title\">Niyyah<\/div>\n        <div class=\"process-arabic\" lang=\"ar\">\u0627\u0644\u0646\u064a\u0629<\/div>\n        <div class=\"process-desc\">Set a pure, sincere intention for the sake of Allah. Define the &#8220;why&#8221; behind your goal in spiritual terms.<\/div>\n      <\/div>\n      <div class=\"process-step\" role=\"listitem\">\n        <div class=\"process-num\">2<\/div>\n        <div class=\"process-title\">Tasmiyah<\/div>\n        <div class=\"process-arabic\" lang=\"ar\">\u0627\u0644\u062a\u0633\u0645\u064a\u0629<\/div>\n        <div class=\"process-desc\">Begin with Bismillah. Seek Allah&#8217;s blessing before starting. Write your goal clearly and specifically.<\/div>\n      <\/div>\n      <div class=\"process-step\" role=\"listitem\">\n        <div class=\"process-num\">3<\/div>\n        <div class=\"process-title\">Musharata<\/div>\n        <div class=\"process-arabic\" lang=\"ar\">\u0627\u0644\u0645\u0634\u0627\u0631\u0637\u0629<\/div>\n        <div class=\"process-desc\">Make a firm commitment. The soul agrees with itself to uphold the goal consistently, day by day.<\/div>\n      <\/div>\n      <div class=\"process-step\" role=\"listitem\">\n        <div class=\"process-num\">4<\/div>\n        <div class=\"process-title\">Muraqabah<\/div>\n        <div class=\"process-arabic\" lang=\"ar\">\u0627\u0644\u0645\u0631\u0627\u0642\u0628\u0629<\/div>\n        <div class=\"process-desc\">Track with God-consciousness. Know that Allah watches your effort. Log daily progress mindfully.<\/div>\n      <\/div>\n      <div class=\"process-step\" role=\"listitem\">\n        <div class=\"process-num\">5<\/div>\n        <div class=\"process-title\">Muhasabah<\/div>\n        <div class=\"process-arabic\" lang=\"ar\">\u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629<\/div>\n        <div class=\"process-desc\">Weekly self-accountability. Review what you did and didn&#8217;t do. Reflect, correct course, and renew niyyah.<\/div>\n      <\/div>\n    <\/div>\n    <p style=\"text-align:center;margin-top:28px;font-size:0.82rem;color:rgba(255,255,255,0.55);\">\n      Framework adapted from Imam Al-Ghazali&#8217;s <em>Ihya Ulum al-Din<\/em> and contemporary Islamic productivity research by ProductiveMuslim.com.\n    <\/p>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     ISLAMIC SMART GOALS FRAMEWORK\n     ============================================================ -->\n<section class=\"section\" aria-labelledby=\"smart-heading\">\n  <div class=\"container\">\n    <div class=\"text-center\" style=\"margin-bottom:40px;\">\n      <div class=\"section-badge\">\ud83c\udfaf Methodology<\/div>\n      <h2 class=\"section-heading\" id=\"smart-heading\">The Islamic S.M.A.R.T. Goals Framework<\/h2>\n      <p class=\"section-subheading\" style=\"margin:0 auto;\">\n        Adapt the globally recognised <a href=\"https:\/\/www.mindtools.com\/pages\/article\/smart-goals.htm\" target=\"_blank\" rel=\"noopener noreferrer\">SMART goals framework<span class=\"ext-badge\">\u2197<\/span><\/a> with an Islamic lens \u2014 adding Tawakkul and Shura to create a complete system.\n      <\/p>\n    <\/div>\n    <div style=\"overflow-x:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);\">\n      <table class=\"smart-table\" role=\"table\" aria-label=\"Islamic SMART Goals Framework\">\n        <thead>\n          <tr>\n            <th>Letter<\/th>\n            <th>Secular Meaning<\/th>\n            <th>Islamic Meaning<\/th>\n            <th>Arabic Term<\/th>\n            <th>Application<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody>\n          <tr>\n            <td><div class=\"letter\">S<\/div><\/td>\n            <td><strong>Specific<\/strong><br><span style=\"font-size:0.8rem;color:var(--text-soft)\">Define clearly<\/span><\/td>\n            <td><strong>Sincere &#038; Specific<\/strong><br><span style=\"font-size:0.8rem;color:var(--text-soft)\">With pure niyyah<\/span><\/td>\n            <td class=\"arabic-cell\" lang=\"ar\">\u0627\u0644\u0646\u064a\u0629 \u0627\u0644\u062e\u0627\u0644\u0635\u0629<\/td>\n            <td style=\"font-size:0.82rem;\">&#8220;I will recite 5 pages of Quran daily after Fajr, for the sake of Allah.&#8221;<\/td>\n          <\/tr>\n          <tr>\n            <td><div class=\"letter\">M<\/div><\/td>\n            <td><strong>Measurable<\/strong><br><span style=\"font-size:0.8rem;color:var(--text-soft)\">Track progress<\/span><\/td>\n            <td><strong>Muhasabah-based<\/strong><br><span style=\"font-size:0.8rem;color:var(--text-soft)\">Daily self-accountability<\/span><\/td>\n            <td class=\"arabic-cell\" lang=\"ar\">\u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629<\/td>\n            <td style=\"font-size:0.82rem;\">&#8220;I track pages read daily and review weekly on Jumu&#8217;ah.&#8221;<\/td>\n          <\/tr>\n          <tr>\n            <td><div class=\"letter\">A<\/div><\/td>\n            <td><strong>Achievable<\/strong><br><span style=\"font-size:0.8rem;color:var(--text-soft)\">Realistic target<\/span><\/td>\n            <td><strong>Amanah-conscious<\/strong><br><span style=\"font-size:0.8rem;color:var(--text-soft)\">Fulfil your capacity<\/span><\/td>\n            <td class=\"arabic-cell\" lang=\"ar\">\u0627\u0644\u0623\u0645\u0627\u0646\u0629<\/td>\n            <td style=\"font-size:0.82rem;\">&#8220;I set a target I can consistently maintain \u2014 not beyond my capacity.&#8221;<\/td>\n          <\/tr>\n          <tr>\n            <td><div class=\"letter\">R<\/div><\/td>\n            <td><strong>Relevant<\/strong><br><span style=\"font-size:0.8rem;color:var(--text-soft)\">Aligned with values<\/span><\/td>\n            <td><strong>Rabbani<\/strong><br><span style=\"font-size:0.8rem;color:var(--text-soft)\">For Allah&#8217;s pleasure<\/span><\/td>\n            <td class=\"arabic-cell\" lang=\"ar\">\u0644\u0644\u0647 \u062a\u0639\u0627\u0644\u0649<\/td>\n            <td style=\"font-size:0.82rem;\">&#8220;This goal aligns with my role as a Muslim and my duties to Allah.&#8221;<\/td>\n          <\/tr>\n          <tr>\n            <td><div class=\"letter\">T<\/div><\/td>\n            <td><strong>Time-bound<\/strong><br><span style=\"font-size:0.8rem;color:var(--text-soft)\">Set a deadline<\/span><\/td>\n            <td><strong>Tawakkul-based<\/strong><br><span style=\"font-size:0.8rem;color:var(--text-soft)\">Plan &#038; trust Allah<\/span><\/td>\n            <td class=\"arabic-cell\" lang=\"ar\">\u0627\u0644\u062a\u0648\u0643\u0644<\/td>\n            <td style=\"font-size:0.82rem;\">&#8220;I complete Quran by Ramadan, then say &#8216;In sha Allah&#8217; and trust the outcome.&#8221;<\/td>\n          <\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n    <p style=\"margin-top:14px;font-size:0.8rem;color:var(--text-soft);text-align:center;\">\n      Research by <a href=\"https:\/\/doi.org\/10.1037\/0033-2909.101.3.398\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:var(--green-rich);\">Locke &amp; Latham (Psychological Bulletin, 1987)<span class=\"ext-badge\">\u2197<\/span><\/a> demonstrates that specific and challenging goals lead to significantly higher performance than vague intentions \u2014 a finding that resonates deeply with the Islamic emphasis on clear niyyah.\n    <\/p>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     INFOGRAPHIC STATS SECTION\n     ============================================================ -->\n<section class=\"section section-alt\" aria-labelledby=\"stats-heading\">\n  <div class=\"container\">\n    <div class=\"text-center\" style=\"margin-bottom:40px;\">\n      <div class=\"section-badge\">\ud83d\udcc8 Research-Backed<\/div>\n      <h2 class=\"section-heading\" id=\"stats-heading\">Why Islamic Goal Setting Works<\/h2>\n      <p class=\"section-subheading\" style=\"margin:0 auto;\">Evidence from Islamic scholarship and modern behavioural science converges on the same truth: intentional, spiritually-grounded goal pursuit produces remarkable results.<\/p>\n    <\/div>\n    <div class=\"infographic-grid\">\n      <div class=\"infographic-card\">\n        <span class=\"infographic-icon\">\ud83c\udfaf<\/span>\n        <span class=\"infographic-num\">42%<\/span>\n        <div class=\"infographic-title\">Higher Goal Achievement<\/div>\n        <div class=\"infographic-desc\">People who write down goals are 42% more likely to achieve them (Dominican University research).<\/div>\n      <\/div>\n      <div class=\"infographic-card\">\n        <span class=\"infographic-icon\">\ud83d\udd25<\/span>\n        <span class=\"infographic-num\">66<\/span>\n        <div class=\"infographic-title\">Days to Form a Habit<\/div>\n        <div class=\"infographic-desc\">Average number of days to form an automatic habit, per UCL research \u2014 consistency is key in Islamic practice.<\/div>\n      <\/div>\n      <div class=\"infographic-card\">\n        <span class=\"infographic-icon\">\ud83e\udd32<\/span>\n        <span class=\"infographic-num\">5\u00d7<\/span>\n        <div class=\"infographic-title\">Daily Prayer Check-ins<\/div>\n        <div class=\"infographic-desc\">Salah itself is a built-in goal-tracking system \u2014 5 daily accountability moments ordained by Allah.<\/div>\n      <\/div>\n      <div class=\"infographic-card\">\n        <span class=\"infographic-icon\">\ud83d\udcd6<\/span>\n        <span class=\"infographic-num\">604<\/span>\n        <div class=\"infographic-title\">Pages in the Quran<\/div>\n        <div class=\"infographic-desc\">Reading just 4 pages after each Salah completes the entire Quran in one month \u2014 the power of small daily goals.<\/div>\n      <\/div>\n      <div class=\"infographic-card\">\n        <span class=\"infographic-icon\">\ud83c\udf19<\/span>\n        <span class=\"infographic-num\">29-30<\/span>\n        <div class=\"infographic-title\">Days of Ramadan<\/div>\n        <div class=\"infographic-desc\">Ramadan is Islam&#8217;s annual intensive goal-setting bootcamp \u2014 proving Muslims can achieve extraordinary discipline.<\/div>\n      <\/div>\n      <div class=\"infographic-card\">\n        <span class=\"infographic-icon\">\ud83d\udcb0<\/span>\n        <span class=\"infographic-num\">2.5%<\/span>\n        <div class=\"infographic-title\">Zakat Threshold<\/div>\n        <div class=\"infographic-desc\">Islam&#8217;s mandatory charity goal \u2014 a built-in system of financial accountability for Muslims worldwide.<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     CATEGORIES DEEP DIVE\n     ============================================================ -->\n<section class=\"section\" aria-labelledby=\"cat-heading\">\n  <div class=\"container\">\n    <div class=\"text-center\" style=\"margin-bottom:40px;\">\n      <div class=\"section-badge\">\ud83d\udcc2 Goal Categories<\/div>\n      <h2 class=\"section-heading\" id=\"cat-heading\">10 Islamic Goal Categories to Transform Your Life<\/h2>\n      <p class=\"section-subheading\" style=\"margin:0 auto;\">Islam addresses every dimension of human life. Set goals across all categories for a balanced, fulfilled Muslim life.<\/p>\n    <\/div>\n    <div class=\"grid-2\">\n      <div style=\"display:flex;flex-direction:column;gap:14px;\">\n        <div class=\"link-card\" style=\"border-left:4px solid #1B4332;\">\n          <div class=\"link-card-icon\" style=\"background:#D8F3DC;\">\ud83d\udd4c<\/div>\n          <div>\n            <div class=\"link-card-title\">Ibadah (Worship) Goals<\/div>\n            <div class=\"link-card-desc\">Salah, Wudu consistency, Sunnah prayers, night prayers (Qiyam al-Layl). The foundation of all goals.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"link-card\" style=\"border-left:4px solid #2980B9;\">\n          <div class=\"link-card-icon\" style=\"background:#D6EAF8;\">\ud83d\udcd6<\/div>\n          <div>\n            <div class=\"link-card-title\">Quran Goals<\/div>\n            <div class=\"link-card-desc\">Daily recitation, memorisation (hifz), Tafsir study. Track pages, verses, and Juz completed.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"link-card\" style=\"border-left:4px solid #8E44AD;\">\n          <div class=\"link-card-icon\" style=\"background:#F0E6FF;\">\ud83d\udcff<\/div>\n          <div>\n            <div class=\"link-card-title\">Dhikr &#038; Tasbih Goals<\/div>\n            <div class=\"link-card-desc\">SubhanAllah, Alhamdulillah, Allahu Akbar \u2014 track daily counts of remembrance of Allah.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"link-card\" style=\"border-left:4px solid #C9A84C;\">\n          <div class=\"link-card-icon\" style=\"background:#FFF8E7;\">\ud83c\udf19<\/div>\n          <div>\n            <div class=\"link-card-title\">Fasting Goals<\/div>\n            <div class=\"link-card-desc\">Monday\u2013Thursday fasts, Shawwal, Muharram, Arafah. Track voluntary fasts beyond Ramadan.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"link-card\" style=\"border-left:4px solid #27AE60;\">\n          <div class=\"link-card-icon\" style=\"background:#D5F5E3;\">\ud83d\udcb0<\/div>\n          <div>\n            <div class=\"link-card-title\">Sadaqah &#038; Zakat Goals<\/div>\n            <div class=\"link-card-desc\">Daily charity, Zakat calculation, Waqf contribution. Use our <a href=\"https:\/\/duaforall.com\/zakat-calculator\/\" target=\"_blank\" rel=\"noopener\" style=\"color:var(--green-rich);\">Zakat Calculator<\/a> alongside this tool.<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div style=\"display:flex;flex-direction:column;gap:14px;\">\n        <div class=\"link-card\" style=\"border-left:4px solid #E67E22;\">\n          <div class=\"link-card-icon\" style=\"background:#FDEBD0;\">\ud83d\udcaa<\/div>\n          <div>\n            <div class=\"link-card-title\">Health &#038; Wellness Goals<\/div>\n            <div class=\"link-card-desc\">Exercise, diet (halal &#038; tayyib), sleep \u2014 caring for the amanah of your body as Allah commanded.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"link-card\" style=\"border-left:4px solid #C0392B;\">\n          <div class=\"link-card-icon\" style=\"background:#FDECEA;\">\ud83d\udcda<\/div>\n          <div>\n            <div class=\"link-card-title\">Islamic Knowledge Goals<\/div>\n            <div class=\"link-card-desc\">Study fiqh, aqeedah, seerah, Arabic language. Track books read, lessons attended, and courses completed.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"link-card\" style=\"border-left:4px solid #2C3E50;\">\n          <div class=\"link-card-icon\" style=\"background:#EAECEE;\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67<\/div>\n          <div>\n            <div class=\"link-card-title\">Family Goals<\/div>\n            <div class=\"link-card-desc\">Quality time with parents, spouse, children. Upholding the rights of family is an act of &#8216;ibadah.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"link-card\" style=\"border-left:4px solid #16A085;\">\n          <div class=\"link-card-icon\" style=\"background:#D1F2EB;\">\ud83d\udcbc<\/div>\n          <div>\n            <div class=\"link-card-title\">Career &#038; Rizq Goals<\/div>\n            <div class=\"link-card-desc\">Seeking halal livelihood is worship. Set professional goals with barakah in mind \u2014 not just income.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"link-card\" style=\"border-left:4px solid #1ABC9C;\">\n          <div class=\"link-card-icon\" style=\"background:#D5F5F0;\">\ud83c\udf0d<\/div>\n          <div>\n            <div class=\"link-card-title\">Community &#038; Da&#8217;wah Goals<\/div>\n            <div class=\"link-card-desc\">Volunteering, sharing knowledge, supporting the Ummah. The best people are those most beneficial to others (Hadith).<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     INTERNAL + EXTERNAL LINKS SECTION\n     ============================================================ -->\n<div class=\"strip-gold\">\n  <div class=\"container\">\n    <div class=\"text-center\" style=\"margin-bottom:32px;\">\n      <div class=\"section-badge\" style=\"background:rgba(201,168,76,0.2);border-color:var(--gold-muted);\">\ud83d\udd17 Islamic Resources<\/div>\n      <h2 class=\"section-heading\" style=\"color:var(--green-mid);\">Boost Your Goal Journey with These Tools<\/h2>\n    <\/div>\n    <div class=\"grid-2\">\n      <div>\n        <h3 style=\"font-family:var(--font-heading);font-size:1.1rem;color:var(--green-mid);margin-bottom:14px;font-weight:700;\">\ud83c\udf19 From DuaForAll.com<\/h3>\n        <div style=\"display:flex;flex-direction:column;gap:10px;\">\n          <a href=\"https:\/\/duaforall.com\/duas-for-success\" target=\"_blank\" rel=\"noopener\" class=\"link-card\">\n            <div class=\"link-card-icon\">\u2b50<\/div>\n            <div><div class=\"link-card-title\">Duas for Success &#038; Rizq<\/div><div class=\"link-card-desc\">Authentic supplications for achievement<\/div><\/div>\n            <div class=\"link-card-arrow\">\u2192<\/div>\n          <\/a>\n          <a href=\"https:\/\/duaforall.com\/zakat-calculator\/\" target=\"_blank\" rel=\"noopener\" class=\"link-card\">\n            <div class=\"link-card-icon\">\ud83d\udcb0<\/div>\n            <div><div class=\"link-card-title\">Zakat Calculator<\/div><div class=\"link-card-desc\">Set your Sadaqah goals precisely<\/div><\/div>\n            <div class=\"link-card-arrow\">\u2192<\/div>\n          <\/a>\n          <a href=\"https:\/\/duaforall.com\/prayer-time-calculator\/\" target=\"_blank\" rel=\"noopener\" class=\"link-card\">\n            <div class=\"link-card-icon\">\ud83d\udd4c<\/div>\n            <div><div class=\"link-card-title\">Prayer Time Calculator<\/div><div class=\"link-card-desc\">Plan your Salah goal around prayer times<\/div><\/div>\n            <div class=\"link-card-arrow\">\u2192<\/div>\n          <\/a>\n          <a href=\"https:\/\/duaforall.com\/daily-duas\" target=\"_blank\" rel=\"noopener\" class=\"link-card\">\n            <div class=\"link-card-icon\">\ud83c\udf05<\/div>\n            <div><div class=\"link-card-title\">Daily Duas Collection<\/div><div class=\"link-card-desc\">Morning &#038; Evening adhkar for your routine<\/div><\/div>\n            <div class=\"link-card-arrow\">\u2192<\/div>\n          <\/a>\n          <a href=\"https:\/\/duaforall.com\/islamic-calendar\/\" target=\"_blank\" rel=\"noopener\" class=\"link-card\">\n            <div class=\"link-card-icon\">\ud83d\udcc5<\/div>\n            <div><div class=\"link-card-title\">Hijri Date Converter<\/div><div class=\"link-card-desc\">Set goals aligned with the Islamic calendar<\/div><\/div>\n            <div class=\"link-card-arrow\">\u2192<\/div>\n          <\/a>\n        <\/div>\n      <\/div>\n      <div>\n        <h3 style=\"font-family:var(--font-heading);font-size:1.1rem;color:var(--green-mid);margin-bottom:14px;font-weight:700;\">\ud83c\udf10 Authority External Resources<\/h3>\n        <div style=\"display:flex;flex-direction:column;gap:10px;\">\n          <a href=\"https:\/\/productivemuslim.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"link-card\">\n            <div class=\"link-card-icon\" style=\"background:var(--cream-dark);\">\ud83d\udcc8<\/div>\n            <div><div class=\"link-card-title\">ProductiveMuslim.com <span class=\"ext-badge\">\u2197<\/span><\/div><div class=\"link-card-desc\">World&#8217;s leading Islamic productivity platform<\/div><\/div>\n            <div class=\"link-card-arrow\">\u2192<\/div>\n          <\/a>\n          <a href=\"https:\/\/sunnah.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"link-card\">\n            <div class=\"link-card-icon\" style=\"background:var(--cream-dark);\">\ud83d\udcda<\/div>\n            <div><div class=\"link-card-title\">Sunnah.com <span class=\"ext-badge\">\u2197<\/span><\/div><div class=\"link-card-desc\">Authentic hadith database \u2014 primary source<\/div><\/div>\n            <div class=\"link-card-arrow\">\u2192<\/div>\n          <\/a>\n          <a href=\"https:\/\/quran.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"link-card\">\n            <div class=\"link-card-icon\" style=\"background:var(--cream-dark);\">\ud83d\udcd6<\/div>\n            <div><div class=\"link-card-title\">Quran.com <span class=\"ext-badge\">\u2197<\/span><\/div><div class=\"link-card-desc\">Read Quran with translation &amp; tafsir<\/div><\/div>\n            <div class=\"link-card-arrow\">\u2192<\/div>\n          <\/a>\n          <a href=\"https:\/\/islamicfinanceguru.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"link-card\">\n            <div class=\"link-card-icon\" style=\"background:var(--cream-dark);\">\ud83d\udcbc<\/div>\n            <div><div class=\"link-card-title\">Islamic Finance Guru <span class=\"ext-badge\">\u2197<\/span><\/div><div class=\"link-card-desc\">Halal career &amp; financial goal planning<\/div><\/div>\n            <div class=\"link-card-arrow\">\u2192<\/div>\n          <\/a>\n          <a href=\"https:\/\/islamicstudies.info\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"link-card\">\n            <div class=\"link-card-icon\" style=\"background:var(--cream-dark);\">\ud83c\udf93<\/div>\n            <div><div class=\"link-card-title\">Islamic Studies Info <span class=\"ext-badge\">\u2197<\/span><\/div><div class=\"link-card-desc\">Academic Islamic scholarship resource<\/div><\/div>\n            <div class=\"link-card-arrow\">\u2192<\/div>\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- ============================================================\n     FAQ SECTION\n     ============================================================ -->\n<section class=\"section section-alt\" aria-labelledby=\"faq-heading\" itemscope itemtype=\"https:\/\/schema.org\/FAQPage\">\n  <div class=\"container\">\n    <div class=\"text-center\" style=\"margin-bottom:40px;\">\n      <div class=\"section-badge\">\u2753 FAQ<\/div>\n      <h2 class=\"section-heading\" id=\"faq-heading\">Frequently Asked Questions<\/h2>\n      <p class=\"section-subheading\" style=\"margin:0 auto;\">Everything you need to know about Islamic goal setting and using this tracker.<\/p>\n    <\/div>\n    <div style=\"max-width:740px;margin:0 auto;\" id=\"faqContainer\">\n\n      <div class=\"faq-item\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n        <button class=\"faq-question\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\" itemprop=\"name\">\n          Is setting goals permitted (halal) in Islam? <span class=\"faq-icon\">+<\/span>\n        <\/button>\n        <div class=\"faq-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n          <div itemprop=\"text\">\n            Yes, absolutely. Islam strongly encourages planning, effort, and purposeful living. The Prophet \ufdfa said: <em>&#8220;Tie your camel, then put your trust in Allah&#8221;<\/em> (Tirmidhi) \u2014 meaning: take practical steps, then rely on Allah for the outcome. Allah Himself states in Surah An-Najm (53:39): <em>&#8220;There is not for man except that for which he strives.&#8221;<\/em> Setting goals, working towards them with sincerity, and leaving the results to Allah is the very definition of Islamic excellence (Ihsan).\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-item\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n        <button class=\"faq-question\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\" itemprop=\"name\">\n          What is Niyyah and why is it central to goal-setting? <span class=\"faq-icon\">+<\/span>\n        <\/button>\n        <div class=\"faq-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n          <div itemprop=\"text\">\n            Niyyah (\u0646\u064a\u0629) means intention \u2014 the inner resolve with which an action is performed. It is the most important concept in Islamic ethics: the same action can be worship or merely habit depending on intention. The Prophet \ufdfa said: <em>&#8220;Actions are judged by their intentions&#8221;<\/em> (Bukhari 1). When you set a goal with the intention to please Allah and serve the Ummah, your entire journey of effort becomes an act of worship \u2014 every step is rewarded, even if you don&#8217;t reach your final target.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-item\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n        <button class=\"faq-question\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\" itemprop=\"name\">\n          How does this Islamic Goal Tracker store my data? Is it private? <span class=\"faq-icon\">+<\/span>\n        <\/button>\n        <div class=\"faq-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n          <div itemprop=\"text\">\n            Your data is stored entirely in your browser&#8217;s local storage \u2014 it never leaves your device and is never sent to any server. This tracker works 100% offline after loading. Your goals, progress logs, and personal intentions are completely private. To preserve your data, avoid clearing browser storage. You can use the export feature to back up your goals. This privacy-first design aligns with the Islamic principle of keeping personal worship and intentions between you and Allah.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-item\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n        <button class=\"faq-question\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\" itemprop=\"name\">\n          What goal categories does the Islamic Goal Tracker include? <span class=\"faq-icon\">+<\/span>\n        <\/button>\n        <div class=\"faq-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n          <div itemprop=\"text\">\n            The tracker includes 10 Islamic life categories: (1) Ibadah\/Worship, (2) Quran recitation and memorisation, (3) Dhikr &amp; Tasbih, (4) Voluntary Fasting, (5) Sadaqah &amp; Zakat, (6) Health &amp; Wellness, (7) Islamic Knowledge, (8) Family relations, (9) Career &amp; Rizq, and (10) Community &amp; Da&#8217;wah. This comprehensive coverage is based on the Islamic concept of balance (Mizan) \u2014 the Quran emphasises that Muslims must excel in both worldly and spiritual domains.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-item\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n        <button class=\"faq-question\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\" itemprop=\"name\">\n          What does Muhasabah mean and how often should I do it? <span class=\"faq-icon\">+<\/span>\n        <\/button>\n        <div class=\"faq-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n          <div itemprop=\"text\">\n            Muhasabah (\u0645\u062d\u0627\u0633\u0628\u0629) means self-accountability \u2014 a spiritual audit of your deeds, intentions, and progress. Imam Al-Ghazali, in Ihya Ulum al-Din, recommends daily Muhasabah before sleep and a more comprehensive review weekly. The companion Umar ibn al-Khattab (RA) famously said: <em>&#8220;Account for yourselves before you are called to account.&#8221;<\/em> We recommend using this tracker&#8217;s Reports tab for daily quick check-ins and a full weekly review every Friday (Jumu&#8217;ah) \u2014 an especially blessed day for spiritual reflection.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"faq-item\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\">\n        <button class=\"faq-question\" onclick=\"toggleFaq(this)\" aria-expanded=\"false\" itemprop=\"name\">\n          How do I set a good Islamic goal? Any tips? <span class=\"faq-icon\">+<\/span>\n        <\/button>\n        <div class=\"faq-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\">\n          <div itemprop=\"text\">\n            Follow these five principles: (1) <strong>Start small and consistent<\/strong> \u2014 the Prophet \ufdfa said the best deeds are those done regularly, even if small (Bukhari\/Muslim). (2) <strong>Write your Niyyah first<\/strong> \u2014 before the goal itself. (3) <strong>Be specific and measurable<\/strong> \u2014 &#8220;Read 2 pages of Quran after Fajr&#8221; is better than &#8220;Read more Quran.&#8221; (4) <strong>Link goals to your daily Salah<\/strong> \u2014 use prayer times as natural check-in moments. (5) <strong>Review weekly on Jumu&#8217;ah<\/strong> \u2014 the most blessed day for reflection and renewal of intentions.\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     SCHOLARLY AUTHORITY SECTION\n     ============================================================ -->\n<section class=\"section\" aria-labelledby=\"scholar-heading\">\n  <div class=\"container\">\n    <div class=\"text-center\" style=\"margin-bottom:40px;\">\n      <div class=\"section-badge\">\ud83c\udf93 Scholarly Foundation<\/div>\n      <h2 class=\"section-heading\" id=\"scholar-heading\">Grounded in Islamic Scholarship<\/h2>\n      <p class=\"section-subheading\" style=\"margin:0 auto;\">This tool&#8217;s framework draws from 1,400 years of Islamic scholarship on self-development, spiritual discipline, and purposeful living.<\/p>\n    <\/div>\n    <div class=\"grid-3\">\n      <div class=\"infographic-card\" style=\"text-align:left;padding:24px;\">\n        <div style=\"font-size:1.8rem;margin-bottom:10px;\">\ud83d\udcda<\/div>\n        <h3 style=\"font-family:var(--font-heading);font-size:1.1rem;color:var(--green-mid);margin-bottom:8px;\">Imam Al-Ghazali<\/h3>\n        <p style=\"font-size:0.82rem;color:var(--text-soft);line-height:1.6;\">The 11th-century scholar&#8217;s <em>Ihya Ulum al-Din<\/em> (Revival of the Religious Sciences) provides the most comprehensive Islamic framework for self-discipline, habits, and spiritual development \u2014 the foundation of Muhasabah-based goal tracking.<\/p>\n      <\/div>\n      <div class=\"infographic-card\" style=\"text-align:left;padding:24px;\">\n        <div style=\"font-size:1.8rem;margin-bottom:10px;\">\ud83c\udf1f<\/div>\n        <h3 style=\"font-family:var(--font-heading);font-size:1.1rem;color:var(--green-mid);margin-bottom:8px;\">Ibn Al-Qayyim<\/h3>\n        <p style=\"font-size:0.82rem;color:var(--text-soft);line-height:1.6;\">In <em>Madarij al-Salikin<\/em>, Ibn Al-Qayyim Al-Jawziyyah outlines the stations of the spiritual journey \u2014 from intention (Niyyah) through effort (Sa&#8217;y) to trust (Tawakkul) \u2014 a perfect roadmap for purposeful Muslim living.<\/p>\n      <\/div>\n      <div class=\"infographic-card\" style=\"text-align:left;padding:24px;\">\n        <div style=\"font-size:1.8rem;margin-bottom:10px;\">\ud83d\udd4c<\/div>\n        <h3 style=\"font-family:var(--font-heading);font-size:1.1rem;color:var(--green-mid);margin-bottom:8px;\">Imam Ibn Rajab<\/h3>\n        <p style=\"font-size:0.82rem;color:var(--text-soft);line-height:1.6;\">His commentary on the 40 Nawawi Hadiths, particularly Hadith 1 on intentions and Hadith 17 on excellence in all things (Ihsan), provides the theological basis for why every Muslim goal should be pursued with utmost sincerity and quality.<\/p>\n      <\/div>\n    <\/div>\n    <div style=\"margin-top:28px;padding:20px;background:var(--cream-dark);border-radius:var(--radius-md);border-left:4px solid var(--gold);\">\n      <p style=\"font-size:0.85rem;color:var(--text-mid);line-height:1.7;\">\n        <strong style=\"color:var(--green-mid);\">Academic References:<\/strong> This tool&#8217;s psychological framework references <a href=\"https:\/\/doi.org\/10.1037\/0033-2909.101.3.398\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:var(--green-rich);\">Locke &amp; Latham&#8217;s Goal-Setting Theory<\/a>, \n        <a href=\"https:\/\/www.ncbi.nlm.nih.gov\/pmc\/articles\/PMC3826549\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:var(--green-rich);\">habit formation research (Lally et al., European Journal of Social Psychology, 2010)<\/a>, \n        and the <a href=\"https:\/\/www.apa.org\/science\/leadership\/motivation\/goal-theory.aspx\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:var(--green-rich);\">APA&#8217;s evidence base on motivation and self-regulation<\/a>.\n        Islamic references drawn from Sahih Bukhari, Sahih Muslim, Sunan Abu Dawud, and Jami&#8217; al-Tirmidhi via <a href=\"https:\/\/sunnah.com\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:var(--green-rich);\">Sunnah.com<\/a>.\n      <\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n     CTA STRIP\n     ============================================================ -->\n<div class=\"strip-dark geo-bg\" style=\"padding:56px 20px;text-align:center;\">\n  <div class=\"container\">\n    <span style=\"font-family:var(--font-arabic);font-size:1.6rem;color:var(--gold);display:block;margin-bottom:10px;\" lang=\"ar\">\u0648\u064e\u0627\u0644\u0644\u064e\u0651\u0647\u064f \u064a\u064f\u062d\u0650\u0628\u064f\u0651 \u0627\u0644\u0652\u0645\u064f\u062d\u0652\u0633\u0650\u0646\u0650\u064a\u0646\u064e<\/span>\n    <p style=\"font-size:0.82rem;color:rgba(255,255,255,0.6);margin-bottom:24px;\">&#8220;And Allah loves the doers of good.&#8221; \u2014 Quran 3:134<\/p>\n    <h2 style=\"font-family:var(--font-heading);font-size:clamp(1.6rem,4vw,2.4rem);color:var(--white);font-weight:700;margin-bottom:14px;\">Begin Your Goal Journey Today \u2014 Bismillah<\/h2>\n    <p style=\"font-size:0.95rem;color:rgba(255,255,255,0.75);margin-bottom:28px;max-width:500px;margin-left:auto;margin-right:auto;\">Your Islamic Goal Tracker is ready. Set your first goal, make your niyyah, and take the first step. Allah rewards the effort, not only the outcome.<\/p>\n    <div style=\"display:flex;gap:14px;justify-content:center;flex-wrap:wrap;\">\n      <button class=\"btn-gold\" onclick=\"document.getElementById('goalTool').scrollIntoView({behavior:'smooth'});switchTab('add',document.querySelectorAll('.tab-btn')[2]);\">\n        \ud83c\udf31 Set My First Goal\n      <\/button>\n      <a href=\"https:\/\/duaforall.com\/duas-for-success\" target=\"_blank\" rel=\"noopener\" class=\"btn-primary\" style=\"text-decoration:none;\">\n        \ud83e\udd32 Find Goal Duas\n      <\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- ============================================================\n     TOOL FOOTER\n     ============================================================ -->\n<div class=\"tool-footer\">\n  <p>\n    <strong style=\"color:var(--gold);\">Islamic Goal Tracker<\/strong> \u2014 A free tool by \n    <a href=\"https:\/\/duaforall.com\" target=\"_blank\" rel=\"noopener\">DuaForAll.com<\/a> \n    &nbsp;|&nbsp; \u062c\u064e\u0632\u064e\u0627\u0643\u064e \u0627\u0644\u0644\u064e\u0651\u0647\u064f \u062e\u064e\u064a\u0652\u0631\u064b\u0627 &nbsp;|&nbsp; \n    <a href=\"https:\/\/duaforall.com\/about\" target=\"_blank\" rel=\"noopener\">About Us<\/a> \n    &nbsp;|&nbsp; \n    <a href=\"https:\/\/duaforall.com\/daily-duas\" target=\"_blank\" rel=\"noopener\">Daily Duas<\/a>\n    &nbsp;|&nbsp; Data stored locally in your browser. 100% private. \u263d\n  <\/p>\n<\/div>\n\n<!-- ============================================================\n     JAVASCRIPT APPLICATION\n     ============================================================ -->\n<script>\n'use strict';\n\n\/\/ ============================================================\n\/\/ CONSTANTS & CONFIGURATION\n\/\/ ============================================================\nconst CATEGORIES = {\n  ibadah:    { label:'Ibadah',    icon:'\ud83d\udd4c', color:'#1B4332' },\n  quran:     { label:'Quran',     icon:'\ud83d\udcd6', color:'#2980B9' },\n  dhikr:     { label:'Dhikr',     icon:'\ud83d\udcff', color:'#8E44AD' },\n  fasting:   { label:'Fasting',   icon:'\ud83c\udf19', color:'#C9A84C' },\n  sadaqah:   { label:'Sadaqah',   icon:'\ud83d\udcb0', color:'#27AE60' },\n  health:    { label:'Health',    icon:'\ud83d\udcaa', color:'#E67E22' },\n  knowledge: { label:'Knowledge', icon:'\ud83d\udcda', color:'#C0392B' },\n  family:    { label:'Family',    icon:'\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67', color:'#2C3E50' },\n  career:    { label:'Career',    icon:'\ud83d\udcbc', color:'#16A085' },\n  community: { label:'Community', icon:'\ud83c\udf0d', color:'#1ABC9C' }\n};\n\nconst HADITHS = [\n  { text: '\"The best of deeds are those done regularly, even if they are few.\" \u2014 Prophet Muhammad \ufdfa', source: 'Bukhari & Muslim' },\n  { text: '\"Actions are judged by their intentions.\" \u2014 Prophet Muhammad \ufdfa', source: 'Sahih Bukhari 1' },\n  { text: '\"Take on only as much as you are able to do.\" \u2014 Prophet Muhammad \ufdfa', source: 'Sahih Bukhari' },\n  { text: '\"Allah loves that when one of you does something, they do it with excellence (Ihsan).\" \u2014 Prophet Muhammad \ufdfa', source: 'Bayhaqi' },\n  { text: '\"Tie your camel, then put your trust in Allah.\" \u2014 Prophet Muhammad \ufdfa', source: 'Tirmidhi' },\n  { text: '\"There is not for man except that for which he strives.\" \u2014 Quran 53:39', source: 'Surah An-Najm' },\n  { text: '\"And whoever relies upon Allah \u2014 then He is sufficient for him.\" \u2014 Quran 65:3', source: 'Surah At-Talaq' }\n];\n\nconst ISLAMIC_PHRASES = ['Alhamdulillah! \ud83c\udf1f', 'MashaAllah! \u2728', 'BaarakAllahu feek! \ud83e\udd32', 'SubhanAllah! \u262a\ufe0f', 'Allahu Akbar! \ud83d\udd4c'];\n\nconst SAMPLE_GOALS = [\n  { name:'Read 2 Juz of Quran', category:'quran', niyyah:'To strengthen my connection with Allah\\'s word and seek His guidance daily.', target:2, unit:'juz', frequency:'daily', color:'#2980B9', dua:'Rabbi zidni ilma', notes:'After Fajr prayer', deadline:'' },\n  { name:'Pray all 5 Salah on time', category:'ibadah', niyyah:'To fulfil my obligation to Allah and maintain Khushoo in every prayer.', target:5, unit:'times', frequency:'daily', color:'#1B4332', dua:'', notes:'', deadline:'' },\n  { name:'100 SubhanAllah after Fajr', category:'dhikr', niyyah:'To purify my heart and earn the reward of Dhikr before sunrise.', target:100, unit:'times', frequency:'daily', color:'#8E44AD', dua:'', notes:'', deadline:'' },\n  { name:'Fast every Monday', category:'fasting', niyyah:'To follow the Sunnah of the Prophet \ufdfa and earn extra rewards.', target:1, unit:'days', frequency:'weekly', color:'#C9A84C', dua:'', notes:'', deadline:'' },\n  { name:'Exercise 30 minutes', category:'health', niyyah:'To care for the amanah of my body as Allah commanded.', target:30, unit:'minutes', frequency:'daily', color:'#E67E22', dua:'', notes:'', deadline:'' }\n];\n\n\/\/ ============================================================\n\/\/ STATE MANAGEMENT\n\/\/ ============================================================\nconst STORAGE_KEYS = { GOALS:'igt_goals_v2', LOGS:'igt_logs_v2' };\n\nfunction getGoals() {\n  try { return JSON.parse(localStorage.getItem(STORAGE_KEYS.GOALS)) || []; }\n  catch(e) { return []; }\n}\nfunction setGoals(goals) {\n  localStorage.setItem(STORAGE_KEYS.GOALS, JSON.stringify(goals));\n}\nfunction getLogs() {\n  try { return JSON.parse(localStorage.getItem(STORAGE_KEYS.LOGS)) || {}; }\n  catch(e) { return {}; }\n}\nfunction setLogs(logs) {\n  localStorage.setItem(STORAGE_KEYS.LOGS, JSON.stringify(logs));\n}\n\nfunction today() {\n  return new Date().toISOString().split('T')[0];\n}\n\nfunction logEntry(goalId, amount) {\n  const logs = getLogs();\n  const td = today();\n  if (!logs[goalId]) logs[goalId] = {};\n  logs[goalId][td] = (logs[goalId][td] || 0) + amount;\n  setLogs(logs);\n}\n\nfunction getTodayLog(goalId) {\n  const logs = getLogs();\n  return (logs[goalId] && logs[goalId][today()]) || 0;\n}\n\nfunction getStreak(goalId, target) {\n  const logs = getLogs();\n  const goalLogs = logs[goalId] || {};\n  let streak = 0;\n  const d = new Date();\n  while (true) {\n    const ds = d.toISOString().split('T')[0];\n    if ((goalLogs[ds] || 0) >= target) { streak++; d.setDate(d.getDate()-1); }\n    else { break; }\n  }\n  return streak;\n}\n\nfunction getCompletionRate(goalId, target, days=30) {\n  const logs = getLogs();\n  const goalLogs = logs[goalId] || {};\n  let completed = 0;\n  const d = new Date();\n  for (let i=0;i<days;i++) {\n    const ds = d.toISOString().split('T')[0];\n    if ((goalLogs[ds]||0) >= target) completed++;\n    d.setDate(d.getDate()-1);\n  }\n  return Math.round((completed\/days)*100);\n}\n\n\/\/ ============================================================\n\/\/ HIJRI DATE\n\/\/ ============================================================\nfunction toHijri(year, month, day) {\n  const jd = Math.floor((1461*(year+4800+Math.floor((month-14)\/12)))\/4)\n    + Math.floor((367*(month-2-12*Math.floor((month-14)\/12)))\/12)\n    - Math.floor((3*Math.floor((year+4900+Math.floor((month-14)\/12))\/100))\/4)\n    + day - 32075;\n  const l=jd-1948440+10632; const n=Math.floor((l-1)\/10631);\n  const ll=l-10631*n+354;\n  const j=(Math.floor((10985-ll)\/5316))*(Math.floor((50*ll)\/17719))+(Math.floor(ll\/5670))*(Math.floor((43*ll)\/15238));\n  const lll=ll-(Math.floor((30-j)\/15))*(Math.floor((17719*j)\/50))-(Math.floor(j\/16))*(Math.floor((15238*j)\/43))+29;\n  const hMonth=Math.ceil(lll\/29.5); const hDay=lll-Math.floor(29.5*(hMonth-1));\n  const hYear=30*n+j-29;\n  const hMonthNames=['Mu\u1e25arram','\u1e62afar','Rab\u012b\u02bf al-Awwal','Rab\u012b\u02bf al-Th\u0101n\u012b','Jum\u0101d\u0101 al-\u016al\u0101','Jum\u0101d\u0101 al-\u0100khirah','Rajab','Sha\u02bfb\u0101n','Rama\u1e0d\u0101n','Shaww\u0101l','Dh\u016b al-Qa\u02bfdah','Dh\u016b al-\u1e24ijjah'];\n  return { day:hDay, month:hMonth, monthName:hMonthNames[hMonth-1], year:hYear };\n}\n\nfunction displayHijriDate() {\n  const now = new Date();\n  const h = toHijri(now.getFullYear(), now.getMonth()+1, now.getDate());\n  const el = document.getElementById('hijriBadge');\n  if (el) el.textContent = `${h.day} ${h.monthName} ${h.year} AH`;\n}\n\n\/\/ ============================================================\n\/\/ UI RENDERING\n\/\/ ============================================================\nlet activeFilter = 'all';\nlet currentLogGoalId = null;\n\nfunction switchTab(id, btn) {\n  document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));\n  document.querySelectorAll('.tab-btn').forEach(b=>{ b.classList.remove('active'); b.setAttribute('aria-selected','false'); });\n  const panel = document.getElementById('tab-'+id);\n  if (panel) panel.classList.add('active');\n  if (btn) { btn.classList.add('active'); btn.setAttribute('aria-selected','true'); }\n  if (id==='dashboard') renderDashboard();\n  else if (id==='goals') renderGoalsList();\n  else if (id==='reports') renderReports();\n}\n\nfunction renderDashboard() {\n  displayHijriDate();\n  const goals = getGoals();\n  \/\/ Hadith\n  const h = HADITHS[new Date().getDay() % HADITHS.length];\n  const hEl = document.getElementById('dashHadith');\n  if (hEl) hEl.innerHTML = `\ud83d\udca1 <em>${h.text}<\/em> <strong style=\"color:var(--gold-muted)\">${h.source}<\/strong>`;\n  \/\/ Jumu'ah\n  const jumuahEl = document.getElementById('jumuahReminder');\n  if (jumuahEl) jumuahEl.style.display = new Date().getDay()===5 ? 'block':'none';\n  \/\/ Stats\n  const todayCompleted = goals.filter(g=>getTodayLog(g.id)>=g.target).length;\n  const bestStreak = goals.reduce((mx,g)=>Math.max(mx,getStreak(g.id,g.target)),0);\n  const avgRate = goals.length ? Math.round(goals.reduce((s,g)=>s+getCompletionRate(g.id,g.target),0)\/goals.length) : 0;\n  document.getElementById('statTotal').textContent = goals.length;\n  document.getElementById('statToday').textContent = todayCompleted;\n  document.getElementById('statStreak').textContent = bestStreak+'\ud83d\udd25';\n  document.getElementById('statRate').textContent = avgRate+'%';\n  \/\/ Goal Grid\n  const grid = document.getElementById('dashGoalGrid');\n  if (!goals.length) {\n    grid.innerHTML = `<div class=\"empty-dash\"><span class=\"empty-icon\">\ud83c\udf31<\/span><p>No goals yet. Start by adding your first goal!<\/p><button class=\"btn-gold\" onclick=\"switchTab('add',document.querySelectorAll('.tab-btn')[2])\">\u2795 Add Your First Goal<\/button><\/div>`;\n    return;\n  }\n  grid.innerHTML = goals.map(g => {\n    const done = getTodayLog(g.id);\n    const pct = Math.min(100, Math.round((done\/g.target)*100));\n    const streak = getStreak(g.id, g.target);\n    const cat = CATEGORIES[g.category] || CATEGORIES.ibadah;\n    const isDone = done >= g.target;\n    return `\n    <div class=\"goal-progress-card\" onclick=\"openLogModal('${g.id}')\">\n      <div class=\"gpc-top\">\n        <div class=\"gpc-icon\" style=\"background:${g.color}22;\">${cat.icon}<\/div>\n        <div class=\"gpc-meta\">\n          <div class=\"gpc-name\">${escHtml(g.name)}<\/div>\n          <div class=\"gpc-category\">${cat.label} \u00b7 ${g.frequency}<\/div>\n        <\/div>\n        ${streak>0?`<div class=\"gpc-streak\">\ud83d\udd25${streak}<\/div>`:''}\n      <\/div>\n      <div class=\"progress-bar-wrap\">\n        <div class=\"progress-bar-fill\" style=\"width:${pct}%;background:${g.color}\"><\/div>\n      <\/div>\n      <div class=\"gpc-pct\">\n        <span>${done} \/ ${g.target} ${g.unit}<\/span>\n        <strong>${pct}%<\/strong>\n      <\/div>\n      <button class=\"checkin-btn ${isDone?'done':'pending'}\" onclick=\"event.stopPropagation();${isDone?'':'openLogModal(\\''+g.id+'\\')'}\">\n        ${isDone ? '\u2705 Completed \u2014 Alhamdulillah!' : '+ Log Progress'}\n      <\/button>\n    <\/div>`;\n  }).join('');\n}\n\nfunction renderGoalsList() {\n  const goals = getGoals();\n  const filtered = activeFilter==='all' ? goals : goals.filter(g=>g.category===activeFilter);\n  const container = document.getElementById('goalsListContainer');\n  if (!filtered.length) {\n    container.innerHTML = `<div class=\"empty-dash\"><span class=\"empty-icon\">\ud83c\udfaf<\/span><p>No goals ${activeFilter!=='all'?'in this category ':''} found.<\/p><button class=\"btn-gold\" onclick=\"switchTab('add',document.querySelectorAll('.tab-btn')[2])\">\u2795 Add Goal<\/button><\/div>`;\n    return;\n  }\n  container.innerHTML = filtered.map(g => {\n    const cat = CATEGORIES[g.category] || CATEGORIES.ibadah;\n    const streak = getStreak(g.id, g.target);\n    const rate = getCompletionRate(g.id, g.target);\n    return `\n    <div class=\"goal-card\">\n      <div class=\"goal-card-icon\" style=\"background:${g.color}22;\">${cat.icon}<\/div>\n      <div class=\"goal-card-body\">\n        <div class=\"goal-card-name\">${escHtml(g.name)}<\/div>\n        ${g.niyyah?`<div class=\"goal-card-niyyah\">\ud83e\udd0d Niyyah: ${escHtml(g.niyyah.substring(0,80))}${g.niyyah.length>80?'\u2026':''}<\/div>`:''}\n        <div class=\"goal-card-tags\">\n          <span class=\"tag tag-cat\">${cat.label}<\/span>\n          <span class=\"tag tag-freq\">${g.frequency}<\/span>\n          <span class=\"tag tag-target\">Target: ${g.target} ${g.unit}<\/span>\n          ${streak>0?`<span class=\"tag\" style=\"background:#FFF3CD;color:#856404;\">\ud83d\udd25 ${streak} day streak<\/span>`:''}\n          <span class=\"tag\" style=\"background:${rate>=70?'var(--green-pale)':'var(--cream-dark)'};color:${rate>=70?'var(--green-mid)':'var(--text-soft)'};\">\ud83d\udcca ${rate}% rate<\/span>\n        <\/div>\n        ${g.deadline?`<div style=\"font-size:0.75rem;color:var(--text-soft);margin-top:6px;\">\ud83d\uddd3\ufe0f Target by: ${g.deadline}<\/div>`:''}\n      <\/div>\n      <div class=\"goal-card-actions\">\n        <button class=\"btn-primary btn-sm\" onclick=\"openLogModal('${g.id}')\">Log<\/button>\n        <button class=\"btn-danger\" onclick=\"deleteGoal('${g.id}')\">\u2715<\/button>\n      <\/div>\n    <\/div>`;\n  }).join('');\n}\n\nfunction filterGoals(cat, btn) {\n  activeFilter = cat;\n  document.querySelectorAll('.filter-chip').forEach(c=>c.classList.remove('active'));\n  btn.classList.add('active');\n  renderGoalsList();\n}\n\nfunction renderReports() {\n  const goals = getGoals();\n  \/\/ Radial Charts\n  const radialContainer = document.getElementById('radialCharts');\n  if (!goals.length) {\n    radialContainer.innerHTML = '<p style=\"color:var(--text-soft);font-size:0.88rem;\">No goals to display yet.<\/p>';\n  } else {\n    radialContainer.innerHTML = goals.slice(0,8).map(g => {\n      const rate = getCompletionRate(g.id, g.target);\n      const cat = CATEGORIES[g.category] || CATEGORIES.ibadah;\n      const r=38, circ=2*Math.PI*r;\n      const stroke = circ*(1-(rate\/100));\n      return `\n      <div class=\"radial-wrap\">\n        <svg width=\"90\" height=\"90\" viewBox=\"0 0 90 90\">\n          <circle cx=\"45\" cy=\"45\" r=\"${r}\" fill=\"none\" stroke=\"#E8E8E8\" stroke-width=\"7\"\/>\n          <circle cx=\"45\" cy=\"45\" r=\"${r}\" fill=\"none\" stroke=\"${g.color}\" stroke-width=\"7\"\n            stroke-dasharray=\"${circ}\" stroke-dashoffset=\"${stroke}\"\n            stroke-linecap=\"round\" transform=\"rotate(-90 45 45)\"\/>\n          <text x=\"45\" y=\"45\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-size=\"14\" font-weight=\"700\" fill=\"${g.color}\">${rate}%<\/text>\n          <text x=\"45\" y=\"60\" text-anchor=\"middle\" font-size=\"10\" fill=\"#7A7A7A\">${cat.icon}<\/text>\n        <\/svg>\n        <div class=\"radial-label\">${escHtml(g.name.substring(0,18))}${g.name.length>18?'\u2026':''}<\/div>\n      <\/div>`;\n    }).join('');\n  }\n\n  \/\/ Heatmap (last 28 days)\n  const logs = getLogs();\n  const heatmap = document.getElementById('heatmapGrid');\n  let heatHtml = '';\n  for (let i=27;i>=0;i--) {\n    const d=new Date(); d.setDate(d.getDate()-i);\n    const ds=d.toISOString().split('T')[0];\n    let totalPct=0, count=0;\n    goals.forEach(g=>{ const l=(logs[g.id]&&logs[g.id][ds])||0; totalPct+=Math.min(1,l\/g.target); count++; });\n    const avgPct = count ? totalPct\/count : 0;\n    let level=0;\n    if(avgPct>0.75)level=4; else if(avgPct>0.5)level=3; else if(avgPct>0.25)level=2; else if(avgPct>0)level=1;\n    heatHtml+=`<div class=\"heatmap-day level-${level}\" title=\"${ds}: ${Math.round(avgPct*100)}% completion\"><\/div>`;\n  }\n  if(heatmap) heatmap.innerHTML=heatHtml;\n\n  \/\/ Category breakdown\n  const catBar = document.getElementById('categoryBar');\n  if(catBar) {\n    const catCounts={};\n    goals.forEach(g=>{catCounts[g.category]=(catCounts[g.category]||0)+1;});\n    const total=goals.length||1;\n    catBar.innerHTML=Object.entries(catCounts).map(([cat,cnt])=>{\n      const c=CATEGORIES[cat]||CATEGORIES.ibadah;\n      const pct=Math.round((cnt\/total)*100);\n      return `<div>\n        <div style=\"display:flex;justify-content:space-between;font-size:0.8rem;color:var(--text-mid);margin-bottom:4px;\">\n          <span>${c.icon} ${c.label}<\/span><span><strong>${cnt}<\/strong> goal${cnt>1?'s':''}<\/span>\n        <\/div>\n        <div style=\"background:var(--cream-dark);border-radius:4px;height:8px;overflow:hidden;\">\n          <div style=\"height:100%;width:${pct}%;background:${c.color};border-radius:4px;transition:width 0.6s ease;\"><\/div>\n        <\/div>\n      <\/div>`;\n    }).join('');\n  }\n}\n\n\/\/ ============================================================\n\/\/ MODAL\n\/\/ ============================================================\nfunction openLogModal(goalId) {\n  const goals = getGoals();\n  const goal = goals.find(g=>g.id===goalId);\n  if (!goal) return;\n  currentLogGoalId = goalId;\n  const cat = CATEGORIES[goal.category] || CATEGORIES.ibadah;\n  document.getElementById('modalTitle').textContent = cat.icon+' '+goal.name;\n  document.getElementById('modalArabic').textContent = goal.dua || '';\n  const done = getTodayLog(goalId);\n  document.getElementById('modalDesc').textContent = `Target: ${goal.target} ${goal.unit}\/day | Today: ${done} logged`;\n  document.getElementById('logAmount').value = '';\n  document.getElementById('logMsg').textContent = '';\n  document.getElementById('logModal').classList.add('open');\n  document.getElementById('logAmount').focus();\n}\n\nfunction closeModal() {\n  document.getElementById('logModal').classList.remove('open');\n  currentLogGoalId = null;\n}\n\nfunction submitLog() {\n  const amount = parseFloat(document.getElementById('logAmount').value);\n  if (!currentLogGoalId || isNaN(amount) || amount<=0) {\n    document.getElementById('logMsg').textContent = '\u26a0\ufe0f Please enter a valid amount.';\n    return;\n  }\n  logEntry(currentLogGoalId, amount);\n  const goals = getGoals();\n  const goal = goals.find(g=>g.id===currentLogGoalId);\n  const total = getTodayLog(currentLogGoalId);\n  const phrase = ISLAMIC_PHRASES[Math.floor(Math.random()*ISLAMIC_PHRASES.length)];\n  document.getElementById('logMsg').textContent = `\u2705 Logged ${amount} ${goal.unit}. Total today: ${total}`;\n  showToast(`${phrase} ${total}\/${goal.target} ${goal.unit} logged!`);\n  if(total >= goal.target) {\n    setTimeout(()=>{ closeModal(); renderDashboard(); }, 1200); \n  } else {\n    renderDashboard();\n  }\n}\n\n\/\/ ============================================================\n\/\/ ADD GOAL\n\/\/ ============================================================\nfunction addGoal() {\n  const name = document.getElementById('goalName').value.trim();\n  const cat = document.querySelector('input[name=\"goalCat\"]:checked')?.value || 'ibadah';\n  const niyyah = document.getElementById('goalNiyyah').value.trim();\n  const target = parseFloat(document.getElementById('goalTarget').value);\n  const unit = document.getElementById('goalUnit').value;\n  const frequency = document.getElementById('goalFreq').value;\n  const color = document.getElementById('goalColor').value;\n  const dua = document.getElementById('goalDua').value.trim();\n  const deadline = document.getElementById('goalDeadline').value;\n  const notes = document.getElementById('goalNotes').value.trim();\n  const msg = document.getElementById('addGoalMsg');\n\n  if (!name) { showMsg(msg,'error','\u26a0\ufe0f Please enter a goal name.'); return; }\n  if (!niyyah) { showMsg(msg,'error','\u26a0\ufe0f Please enter your Niyyah (intention). This is the most important step!'); return; }\n  if (!target || target<=0) { showMsg(msg,'error','\u26a0\ufe0f Please enter a valid target.'); return; }\n\n  const goal = { id:'goal_'+Date.now()+'_'+Math.random().toString(36).substr(2,6), name, category:cat, niyyah, target, unit, frequency, color, dua, deadline, notes, createdAt:new Date().toISOString() };\n  const goals = getGoals();\n  goals.push(goal);\n  setGoals(goals);\n\n  showMsg(msg,'success',`\ud83c\udf31 BismiAllah! \"${name}\" goal set successfully. May Allah grant you success!`);\n  \/\/ Reset form\n  document.getElementById('goalName').value='';\n  document.getElementById('goalNiyyah').value='';\n  document.getElementById('goalTarget').value='';\n  document.getElementById('goalDua').value='';\n  document.getElementById('goalDeadline').value='';\n  document.getElementById('goalNotes').value='';\n  showToast('\ud83c\udf1f New goal set \u2014 Bismillah!');\n  setTimeout(()=>{ switchTab('dashboard', document.querySelectorAll('.tab-btn')[0]); },1500);\n}\n\nfunction loadSampleGoals() {\n  const goals = getGoals();\n  let added = 0;\n  SAMPLE_GOALS.forEach(sg=>{\n    const id='goal_sample_'+Date.now()+'_'+Math.random().toString(36).substr(2,4);\n    goals.push({...sg, id, createdAt:new Date().toISOString()});\n    added++;\n  });\n  setGoals(goals);\n  showToast(`\u2705 ${added} sample Islamic goals loaded!`);\n  setTimeout(()=>switchTab('dashboard', document.querySelectorAll('.tab-btn')[0]), 800);\n}\n\nfunction deleteGoal(goalId) {\n  if (!confirm('Remove this goal? Your progress logs will also be deleted.')) return;\n  let goals = getGoals().filter(g=>g.id!==goalId);\n  setGoals(goals);\n  const logs = getLogs();\n  delete logs[goalId];\n  setLogs(logs);\n  renderGoalsList();\n  renderDashboard();\n  showToast('Goal removed.');\n}\n\nfunction clearAllData() {\n  if (!confirm('\u26a0\ufe0f This will delete ALL your goals and progress. This cannot be undone. Continue?')) return;\n  localStorage.removeItem(STORAGE_KEYS.GOALS);\n  localStorage.removeItem(STORAGE_KEYS.LOGS);\n  renderDashboard();\n  showToast('All data cleared.');\n}\n\n\/\/ ============================================================\n\/\/ HELPERS\n\/\/ ============================================================\nfunction escHtml(str) {\n  if (!str) return '';\n  return str.replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;').replace(\/\"\/g,'&quot;');\n}\n\nfunction showMsg(el, type, text) {\n  if (!el) return;\n  el.style.display='block';\n  el.style.cssText=`display:block;padding:12px 16px;border-radius:8px;font-size:0.87rem;font-weight:600;background:${type==='error'?'var(--danger-pale)':'var(--green-pale)'};color:${type==='error'?'var(--danger)':'var(--green-mid)'};border:1.5px solid ${type==='error'?'var(--danger)':'var(--green-soft)'};`;\n  el.textContent=text;\n}\n\nfunction showToast(msg) {\n  const tc=document.getElementById('toastContainer');\n  const t=document.createElement('div');\n  t.className='toast';\n  t.innerHTML='\u263d '+msg;\n  tc.appendChild(t);\n  setTimeout(()=>t.remove(), 3000);\n}\n\nfunction toggleFaq(btn) {\n  const answer = btn.nextElementSibling;\n  const isOpen = answer.classList.contains('open');\n  \/\/ Close all\n  document.querySelectorAll('.faq-answer.open').forEach(a=>{ a.classList.remove('open'); a.previousElementSibling.classList.remove('open'); a.previousElementSibling.setAttribute('aria-expanded','false'); });\n  if (!isOpen) {\n    answer.classList.add('open');\n    btn.classList.add('open');\n    btn.setAttribute('aria-expanded','true');\n  }\n}\n\n\/\/ ============================================================\n\/\/ KEYBOARD NAVIGATION\n\/\/ ============================================================\ndocument.addEventListener('keydown', e=>{\n  if (e.key==='Escape') closeModal();\n  if (document.getElementById('logModal').classList.contains('open') && e.key==='Enter') submitLog();\n});\n\n\/\/ Click outside modal to close\ndocument.getElementById('logModal').addEventListener('click', e=>{\n  if (e.target===document.getElementById('logModal')) closeModal();\n});\n\n\/\/ ============================================================\n\/\/ INIT\n\/\/ ============================================================\ndocument.addEventListener('DOMContentLoaded', ()=>{\n  displayHijriDate();\n  renderDashboard();\n});\n<\/script>\n\n<!-- JSON-LD STRUCTURED DATA -->\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"WebApplication\",\n  \"name\": \"Islamic Goal Tracker\",\n  \"url\": \"https:\/\/duaforall.com\/islamic-goal-tracker\/\",\n  \"description\": \"A free, advanced Islamic Goal Tracker to set meaningful goals aligned with Quran and Sunnah. Track Salah, Quran recitation, Dhikr, Sadaqah, health, and life goals with niyyah, duas, streaks, and progress analytics.\",\n  \"applicationCategory\": \"LifestyleApplication\",\n  \"operatingSystem\": \"Web Browser\",\n  \"offers\": { \"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"USD\" },\n  \"author\": { \"@type\": \"Organization\", \"name\": \"DuaForAll\", \"url\": \"https:\/\/duaforall.com\" },\n  \"keywords\": \"Islamic goal tracker, Muslim goal setting, Niyyah, Islamic productivity, Quran goals, Salah tracker, Dhikr tracker\",\n  \"inLanguage\": [\"en\", \"ar\"],\n  \"isAccessibleForFree\": true\n}\n<\/script>\n\n<\/body>\n<\/html>\n<\/div><\/div>\n\n\n<style>.kb-image2199_d47601-c3 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image2199_d47601-c3\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/duaforall.com\/\" class=\"kb-advanced-image-link\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/duaforall.com\/wp-content\/uploads\/2026\/04\/islamic-goal-tracker-featured-1024x538.webp\" alt=\"Islamic Goal Tracker\" class=\"kb-img wp-image-2392\" title=\"\" srcset=\"https:\/\/duaforall.com\/wp-content\/uploads\/2026\/04\/islamic-goal-tracker-featured-1024x538.webp 1024w, https:\/\/duaforall.com\/wp-content\/uploads\/2026\/04\/islamic-goal-tracker-featured-300x158.webp 300w, https:\/\/duaforall.com\/wp-content\/uploads\/2026\/04\/islamic-goal-tracker-featured-768x403.webp 768w, https:\/\/duaforall.com\/wp-content\/uploads\/2026\/04\/islamic-goal-tracker-featured.webp 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Islamic Goal Tracker \u2014 Set, Track &#038; Achieve Goals the Islamic Way | DuaForAll \u0628\u0650\u0633\u0652\u0645\u0650 \u0627\u0644\u0644\u064e\u0651\u0647\u0650 \u0627\u0644\u0631\u064e\u0651\u062d\u0652\u0645\u064e\u0646\u0650 \u0627\u0644\u0631\u064e\u0651\u062d\u0650\u064a\u0645\u0650 &nbsp;\u2014&nbsp; In the Name of Allah, the Most Gracious, the Most Merciful \u263d \u0627\u0644\u0645\u062a\u0627\u0628\u0639 \u0627\u0644\u0625\u0633\u0644\u0627\u0645\u064a \u0644\u0644\u0623\u0647\u062f\u0627\u0641 Islamic Goal Tracker \u2014Set Purposeful Goals the Islamic Way Align your ambitions with Niyyah (intention), track progress with consistency, and achieve&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"show","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2199","page","type-page","status-publish","hentry"],"acf":[],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"miqbaldotpk@gmail.com","author_link":"https:\/\/duaforall.com\/en\/author\/miqbaldotpkgmail-com\/"},"comment_info":0,"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/duaforall.com\/en\/wp-json\/wp\/v2\/pages\/2199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duaforall.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/duaforall.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/duaforall.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/duaforall.com\/en\/wp-json\/wp\/v2\/comments?post=2199"}],"version-history":[{"count":5,"href":"https:\/\/duaforall.com\/en\/wp-json\/wp\/v2\/pages\/2199\/revisions"}],"predecessor-version":[{"id":2395,"href":"https:\/\/duaforall.com\/en\/wp-json\/wp\/v2\/pages\/2199\/revisions\/2395"}],"wp:attachment":[{"href":"https:\/\/duaforall.com\/en\/wp-json\/wp\/v2\/media?parent=2199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}