feat: add donation view to progress page

src/composables/slugify.ts

@@ -0,0 +1,3 @@
+export function slugify(str: string): string {
+	return str.toLowerCase().replaceAll(/ /g, '-');
+}

src/locales/ar_AR.json

@@ -252,7 +252,7 @@
 	},
 	"donation": {
 		"upgradePush": "لتصبح مشتركا والوصول إلى الامتيازات الرائعة ، تفضل بزيارة صفحة <a href=\"/account/upgrade\">upgrade</a>.",
-		"progress": "<span> $${totd} </span> من <span> $${goald} </span> / شهريًا ، <span> ${perc}٪ </span> من الهدف الشهري."
+		"progress": "<span> ${totd} </span> من <span> ${goald} </span> / شهريًا ، <span> {perc}٪ </span> من الهدف الشهري."
 	},
 	"showcase": {
 		"title": "ماذا نقوم به",
@@ -277,4 +277,4 @@
 		"confirm": "تأكيد",
 		"close": "غلق"
 	}
-}
+}

src/locales/ast.json

@@ -206,7 +206,7 @@
 		"back": "Atrás"
 	},
 	"donation": {
-		"progress": "<span>${totd}$</span> de <span>${goald}$</span>/mes, <span>${perc}%</span> de la meta mensual.",
+		"progress": "<span>{totd}$</span> de <span>{goald}$</span>/mes, <span>{perc}%</span> de la meta mensual.",
 		"upgradePush": "Pa convertise en soscriptor/a ya tener accesu a coses guais, visita la <a href=\"/account/upgrade\">páxina d'anovamientu</a>."
 	},
 	"docs": {
@@ -264,4 +264,4 @@
 		"confirm": "Confirmar",
 		"close": "Zarrar"
 	}
-}
+}

src/locales/ca_ES.json

@@ -307,6 +307,6 @@
 	},
 	"donation": {
 		"upgradePush": "Per esdevenir suscriptor i guanyar accés a increïbles avantatges, vés a <a href=\"/account/upgrade\">la pàgina de millores</a>.",
-		"progress": "Objectiu mensual: <span>$${totd}</span> de <span>$${goald}</span>/al mes, <span>${perc}%</span>."
+		"progress": "Objectiu mensual: <span>${totd}</span> de <span>${goald}</span>/al mes, <span>{perc}%</span>."
 	}
-}
+}

src/locales/cs_CZ.json

@@ -457,10 +457,10 @@
 		}
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> z měsíčního cíle <span>$${goald} </span> vybráno (<span>${perc}%</span> měsíčního cíle)",
+		"progress": "<span>${totd}</span> z měsíčního cíle <span>${goald} </span> vybráno (<span>{perc}%</span> měsíčního cíle)",
 		"upgradePush": "Abyste se stal(a) předplatitelem a získal(a) přístup k zajímavým výhodám navštivte <a href=\"/account/upgrade\">upgrade stránku</a>."
 	},
 	"notfound": {
 		"description": "Jejda! Tuto stránku jsme nenalezli."
 	}
-}
+}

src/locales/de_DE.json

@@ -414,7 +414,7 @@
 		"changeTierConfirm": "Stufe ändern"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> von <span>$${goald}</span>/Monat, <span>${perc}%</span> des monatlichen Ziels.",
+		"progress": "<span>${totd}</span> von <span>${goald}</span>/Monat, <span>{perc}%</span> des monatlichen Ziels.",
 		"upgradePush": "Um Abonnent zu werden und Zugang zu coolen Vorteilen zu erhalten, besuche die <a href=\"/account/upgrade\">Upgrade-Seite</a>."
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "Woops! Diese Seite konnte nicht gefunden werden."
 	}
-}
+}

src/locales/el_GR.json

@@ -214,7 +214,7 @@
 		"changeTierPrompt": "Είσαι σίγουρος ότι θέλεις να καταργήσεις τη συνδρομή σου από <span class=\"oldtier\">oldtiername</span> και να εγγραφείς στο <span class=\"newtier\">newtiername</span>;"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> από<span>$${goald}</span>/μήνα, <span>${perc}%</span> του μηνιαίου στόχου.",
+		"progress": "<span>${totd}</span> από<span>${goald}</span>/μήνα, <span>{perc}%</span> του μηνιαίου στόχου.",
 		"upgradePush": "Για να γίνεις συνδρομητής και να αποκτήσεις πρόσβαση σε κούλ οφέλη, επισκέψου την <a href=\"/account/upgrade\">σελίδα αναβάθμισης</a>."
 	},
 	"localizationPage": {
@@ -282,4 +282,4 @@
 		"close": "Κλείσιμο",
 		"confirm": "Επιβεβαίωση"
 	}
-}
+}

src/locales/en@uwu.json

@@ -448,10 +448,10 @@
 		"filePlaceholder": "mew://a.meow.site/4_jzon.jzon"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> of <span>$${goald}</span>/munth, <span>${perc}%</span> of teh monthly goal",
+		"progress": "<span>${totd}</span> of <span>${goald}</span>/munth, <span>{perc}%</span> of teh monthly goal",
 		"upgradePush": "u wanna become super kitteh and get kool perkz?? <a href=\"/account/upgrade\">upgrade now!!</a>"
 	},
 	"notfound": {
 		"description": "uh oh! we did a widdle fucky wucky! oopsie daisie! oh noes!!!!!"
 	}
-}
+}

src/locales/en_GB.json

@@ -414,7 +414,7 @@
 		"changeTierPrompt": "Are you sure you want to unsubscribe from <span class=\"oldtier\">oldtiername</span> and subscribe to <span class=\"newtier\">newtiername</span>?"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> of <span>$${goald}</span>/month, <span>${perc}%</span> of the monthly goal.",
+		"progress": "<span>${totd}</span> of <span>${goald}</span>/month, <span>{perc}%</span> of the monthly goal.",
 		"upgradePush": "To become a subscriber and gain access to cool perks, visit the <a href=\"/account/upgrade\">upgrade page</a>."
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "Oops! We could not find this page."
 	}
-}
+}

src/locales/en_US.json

@@ -415,7 +415,7 @@
 		"back": "Back"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> of <span>$${goald}</span>/month, <span>${perc}%</span> of the monthly goal.",
+		"progress": "<span>${totd}</span> of <span>${goald}</span>/month, <span>{perc}%</span> of the monthly goal.",
 		"upgradePush": "To become a subscriber and gain access to cool perks, visit the <a href=\"/account/upgrade\">upgrade page</a>."
 	},
 	"localizationPage": {
@@ -464,4 +464,4 @@
 	"notfound": {
 		"description": "Oops! We could not find this page."
 	}
-}
+}

src/locales/es_ES.json

@@ -452,7 +452,7 @@
 		"title": "Subir rango"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> de <span>$${goald}</span>/mes, <span>${perc}%</span> del objetivo mensual.",
+		"progress": "<span>${totd}</span> de <span>${goald}</span>/mes, <span>{perc}%</span> del objetivo mensual.",
 		"upgradePush": "Para convertirse en suscriptor y obtener acceso a beneficios geniales, visita la página <a href=\"/account/upgrade\">actualizar</a>."
 	},
 	"modals": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "¡Vaya! No hemos podido encontrar esta página."
 	}
-}
+}

src/locales/fi_FI.json

@@ -353,7 +353,7 @@
 		"confirm": "Vahvista"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> tavoitteesta <span>$${goald}</span>/kuussa, <span>${perc}%</span> kuukausitavoitteesta.",
+		"progress": "<span>${totd}</span> tavoitteesta <span>${goald}</span>/kuussa, <span>{perc}%</span> kuukausitavoitteesta.",
 		"upgradePush": "Tullaksesi tilaajaksi ja saadaksesi siistejä etuja, vieraile <a href=\"/account/upgrade\">tilityypin korotussivulla</a>."
 	}
-}
+}

src/locales/fr_FR.json

@@ -454,7 +454,7 @@
 	},
 	"donation": {
 		"upgradePush": "Pour s'abonner et avoir accès à des récompenses spéciales, visitez <a href=\"/account/upgrade\">la page de mise à niveau</a>.",
-		"progress": "<span>$${totd}</span> sur <span>$${goald}</span>/mois, <span>${perc}%</span> du but mensuel."
+		"progress": "<span>${totd}</span> sur <span>${goald}</span>/mois, <span>{perc}%</span> du but mensuel."
 	},
 	"modals": {
 		"cancel": "Annuler",
@@ -464,4 +464,4 @@
 	"notfound": {
 		"description": "Oups ! Nous n'arrivons pas à trouver cette page."
 	}
-}
+}

src/locales/gl_ES.json

@@ -187,7 +187,7 @@
 	},
 	"donation": {
 		"upgradePush": "Para facerte un subscritor e acceder a grandes vantaxes, visita a <a href=\"/account/upgrade\">páxina de actualización</a>.",
-		"progress": "<span>$${totd}</span> de <span>$${goald}</span>/mes, <span>${perc}%</span> do obxectivo mensual."
+		"progress": "<span>${totd}</span> de <span>${goald}</span>/mes, <span>{perc}%</span> do obxectivo mensual."
 	},
 	"localizationPage": {
 		"description": "Pega unha ligazón a unha configuración rexional JSON de acceso público para probala no teu sitio web",
@@ -277,4 +277,4 @@
 		"changeTierPrompt": "Estás seguro de que queres cancelar a subscrición de <span class=\"oldtier\">oldtiername</span> e subscribirte a <span class=\"newtier\">newtiername</span>?",
 		"changeTierConfirm": "Cambiar rango"
 	}
-}
+}

src/locales/hr_HR.json

@@ -414,7 +414,7 @@
 		"back": "Natrag"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> od <span>$${goald}</span>/mjesečno, <span>${perc} %</span> mjesečnog cilja.",
+		"progress": "<span>${totd}</span> od <span>${goald}</span>/mjesečno, <span>{perc} %</span> mjesečnog cilja.",
 		"upgradePush": "Za pretplatu i pristup još boljim pogodnostima, posjeti <a href=\"/account/upgrade\">stranicu za nadogradnju</a>."
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "Nažalost nismo uspjeli pronaći ovu stranicu."
 	}
-}
+}

src/locales/hu_HU.json

@@ -414,7 +414,7 @@
 		"description": "Tekintsd meg a projekt előrehaladását és céljait! (Minden órában frissítve, így nem tükröz minden projekt célt vagy az előrehaladást."
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> a <span>$${goald}</span>/hó, <span>${perc}%</span> a havi célból.",
+		"progress": "<span>${totd}</span> a <span>${goald}</span>/hó, <span>{perc}%</span> a havi célból.",
 		"upgradePush": "Hogy előfizetővé válhass, és hozzáférj király cuccokhoz, látogasd meg a <a href=\"/account/upgrade\">bővítés oldalt</a>."
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "Hoppá! Nem találjuk ezt az oldalt."
 	}
-}
+}

src/locales/id_ID.json

@@ -417,7 +417,7 @@
 		"back": "Kembali"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> dari <span>$${goald}</span> per bulan, <span>${perc}%</span> dari target bulanan.",
+		"progress": "<span>${totd}</span> dari <span>${goald}</span> per bulan, <span>{perc}%</span> dari target bulanan.",
 		"upgradePush": "Untuk menjadi pelanggan dan mendapatkan akses ke berbagai keuntungan menarik, kunjungi <a href=\"/account/upgrade\">halaman upgrade</a>."
 	},
 	"localizationPage": {
@@ -461,4 +461,4 @@
 	"notfound": {
 		"description": "Maaf! Kami tidak dapat menemukan halaman ini."
 	}
-}
+}

src/locales/it_IT.json

@@ -457,10 +457,10 @@
 		"close": "Chiudi"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> di <span>$${goald}</span>/mese, <span>${perc}%</span> del goal mensile.",
+		"progress": "<span>${totd}</span> di <span>${goald}</span>/mese, <span>{perc}%</span> del goal mensile.",
 		"upgradePush": "Per diventare un abbonato e accedere a ricompense speciali, visita la <a href=\"/account/upgrade\">pagina per fare l'upgrade</a>."
 	},
 	"notfound": {
 		"description": "Oops! Non siamo riusciti a trovare questa pagina."
 	}
-}
+}

src/locales/ja_JP.json

@@ -450,7 +450,7 @@
 		"unsubPrompt": "<span>tiername</span> から退会しますか？そのレベルに関連付けられた特典にアクセスできなくなります。"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span>/<span>$${goald}</span>(寄付額/目標) ー 月間目標の <span>${perc}%</span>の寄付を頂いています。",
+		"progress": "<span>${totd}</span>/<span>${goald}</span>(寄付額/目標) ー 月間目標の <span>{perc}%</span>の寄付を頂いています。",
 		"upgradePush": "サブスクライバーになってクールな特典にアクセスするには、<a href=\"/account/upgrade\">アップグレード ページ</a>にアクセスしてください。"
 	},
 	"modals": {
@@ -461,4 +461,4 @@
 	"notfound": {
 		"description": "おっと！このページは見つかりません。"
 	}
-}
+}

src/locales/kk_KZ.json

@@ -219,7 +219,7 @@
 	},
 	"donation": {
 		"upgradePush": "Жазылу және керемет қондырмаларға қол жеткізу үшін <a href=\"/account/upgrade\">жаңарту бетіне</a> кіріңіз.",
-		"progress": "<span>$${totd}</span>/айына <span>$${goald}</span>, айлық мақсаттың <span>${perc}%</span>."
+		"progress": "<span>${totd}</span>/айына <span>${goald}</span>, айлық мақсаттың <span>{perc}%</span>."
 	},
 	"localizationPage": {
 		"title": "Жергілікті жерлестірейік",
@@ -264,4 +264,4 @@
 		"confirm": "Растау",
 		"close": "Жабу"
 	}
-}
+}

src/locales/ko_KR.json

@@ -349,7 +349,7 @@
 		"month": "달"
 	},
 	"donation": {
-		"progress": "<span>$${goald}</span>/월 중에서 <span>$${totd}</span> , 매달 목표의 <span>${perc}%</span>.",
+		"progress": "<span>${goald}</span>/월 중에서 <span>${totd}</span> , 매달 목표의 <span>{perc}%</span>.",
 		"upgradePush": "구독자가 되고 멋진 혜택을 받으시려면, <a href=\"/account/upgrade\">업그레이드 페이지</a>를 방문하세요."
 	}
-}
+}

src/locales/nl_NL.json

@@ -120,7 +120,7 @@
 		"button": "Test bestand"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> van <span>$${goald}</span>/maand, <span>${perc}%</span> van de maandelijkse doelstelling.",
+		"progress": "<span>${totd}</span> van <span>${goald}</span>/maand, <span>{perc}%</span> van de maandelijkse doelstelling.",
 		"upgradePush": "Om een abonnee te worden en toegang te krijgen tot coole voordelen, bezoek je de <a href=\"/account/upgrade\">upgradepagina</a>."
 	},
 	"upgrade": {
@@ -291,4 +291,4 @@
 			"juxt_err": "Foutcodes - Juxt"
 		}
 	}
-}
+}

src/locales/pl_PL.json

@@ -291,7 +291,7 @@
 		"description": "Osiągnięcie celu miesięcznego sprawi, że Pretendo stanie się pracą na pełen etat, zapewniając aktualizacje lepszej jakości w szybszym tempie."
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> z <span>$${goald}</span>/miesiąc, <span>${perc}%</span> miesięcznego celu.",
+		"progress": "<span>${totd}</span> z <span>${goald}</span>/miesiąc, <span>{perc}%</span> miesięcznego celu.",
 		"upgradePush": "Aby zostać subskrybentem i uzyskać dostęp do fajnych bonusów, odwiedź <a href=\"/account/upgrade\">stronę ulepszeń</a>."
 	},
 	"modals": {
@@ -299,4 +299,4 @@
 		"confirm": "Potwierdż",
 		"close": "Zamknij"
 	}
-}
+}

src/locales/pt_BR.json

@@ -451,10 +451,10 @@
 		"close": "Fechar"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> de <span>$${goald}</span> por mês, o que significa <span>${perc}%</span> do objetivo mensal.",
+		"progress": "<span>${totd}</span> de <span>${goald}</span> por mês, o que significa <span>{perc}%</span> do objetivo mensal.",
 		"upgradePush": "Para se tornar um doador e ganhar acesso a vários benefícios legais, visite a página de <a href=\"/account/upgrade\">upgrade</a>."
 	},
 	"notfound": {
 		"description": "Ops! Nós não conseguimos achar esta página."
 	}
-}
+}

src/locales/pt_PT.json

@@ -274,7 +274,7 @@
 		"description": "Verifique o andamento do projeto e as suas metas! (Atualizado em média a cada uma hora, não reflete TODAS as metas ou progresso do projeto)"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> de <span>$${goald}</span> por mês, o que significa <span>${perc}%</span> do objetivo mensal.",
+		"progress": "<span>${totd}</span> de <span>${goald}</span> por mês, o que significa <span>{perc}%</span> do objetivo mensal.",
 		"upgradePush": "Para se tornar um doador e ganhar acesso a vários benefícios legais, visite a página de <a href=\"/account/upgrade\">upgrade</a>."
 	}
-}
+}

src/locales/ro_RO.json

@@ -274,7 +274,7 @@
 		"changeTier": "Schimbă nivelul"
 	},
 	"donation": {
-		"progress": "<span>${totd}$</span> din <span>${goald}$</span>/lună, <span>${perc}%</span> din ținta lunară.",
+		"progress": "<span>{totd}$</span> din <span>{goald}$</span>/lună, <span>{perc}%</span> din ținta lunară.",
 		"upgradePush": "Pentru a te abona și să ai acces la benefici faine, vizitează <a href=\"/account/upgrade\">această pagină</a>."
 	}
-}
+}

src/locales/ru_RU.json

@@ -432,7 +432,7 @@
 		"unsubPrompt": "Вы уверены в том что хотите отписаться от <span>tiername</span>? Вы потеряете доступ к функциям которые были доступны на данном уровне."
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> из <span>$${goald}</span>/в месяц, <span>${perc}%</span> от месячной цели.",
+		"progress": "<span>${totd}</span> из <span>${goald}</span>/в месяц, <span>{perc}%</span> от месячной цели.",
 		"upgradePush": "Чтобы стать подписчиком и получить доступ к крутым возможностям, посетите <a href=\"/account/upgrade\">upgrade page</a>."
 	},
 	"modals": {
@@ -461,4 +461,4 @@
 	"notfound": {
 		"description": "Упс! Мы не смогли найти эту страницу."
 	}
-}
+}

src/locales/sv_SE.json

@@ -270,11 +270,11 @@
 	},
 	"donation": {
 		"upgradePush": "För att bli en prenumerant och få tillgång till coola förmåner, besök <a href=\"/account/upgrade\">uppgraderingssidan</a>.",
-		"progress": "<span>$${totd}</span> av <span>$${goald}</span>/månad, <span>${perc}%</span> av det månatliga målet."
+		"progress": "<span>${totd}</span> av <span>${goald}</span>/månad, <span>{perc}%</span> av det månatliga målet."
 	},
 	"modals": {
 		"close": "Stäng",
 		"confirm": "Bekräfta",
 		"cancel": "Avbryt"
 	}
-}
+}

src/locales/ta_IN.json

@@ -414,7 +414,7 @@
 		"back": "பின்"
 	},
 	"donation": {
-		"progress": "மாதாந்திர இலக்கில் <span>$${totd}</span> <span>$${goald}</span>/mouth, <span>${perc}%</span>.",
+		"progress": "மாதாந்திர இலக்கில் <span>${totd}</span> <span>${goald}</span>/mouth, <span>{perc}%</span>.",
 		"upgradePush": "சந்தாதாரராவதற்கும் சிறந்த சலுகைகளுக்கான அணுகலைப் பெறுவதற்கும், <a href=\"/account/upgrade\">மேம்படுத்தல் பக்கத்தைப்</a> பார்வையிடவும்."
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "அச்சச்சோ! இந்தப் பக்கத்தை எங்களால் கண்டுபிடிக்க முடியவில்லை."
 	}
-}
+}

src/locales/tr_TR.json

@@ -421,7 +421,7 @@
 	},
 	"donation": {
 		"upgradePush": "Abone olmak ve harika avantajlara erişmek için <a href=\"/account/upgrade\">yükseltme sayfasını</a> ziyaret edin.",
-		"progress": "Ayda <span>$${totd}</span>, <span>$${goald}</span>/ay, aylık hedefin <span>%${perc}</span>."
+		"progress": "Ayda <span>${totd}</span>, <span>${goald}</span>/ay, aylık hedefin <span>%{perc}</span>."
 	},
 	"blogPage": {
 		"published": "Tarafından yayınlandı",
@@ -454,4 +454,4 @@
 	"notfound": {
 		"description": "Woops! Bu sayfayı bulamadık."
 	}
-}
+}

src/locales/uk_UA.json

@@ -401,7 +401,7 @@
 		"unsubPrompt": "Ви впевнені, що бажаєте скасувати підписку на <span>tiername</span>? Ви втратите доступ до бонусів, пов’язаних із цим рівнем."
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> з <span>$${goald}</span>/місяць, <span>${perc}%</span> місячної цілі.",
+		"progress": "<span>${totd}</span> з <span>${goald}</span>/місяць, <span>{perc}%</span> місячної цілі.",
 		"upgradePush": "Щоб стати передплатником і отримати доступ до цікавих бонусів, відвідайте <a href=\"/account/upgrade\">сторінку прокачки</a>."
 	},
 	"localizationPage": {
@@ -454,4 +454,4 @@
 	"notfound": {
 		"description": "Упс! Сторінка не знайдена."
 	}
-}
+}

src/locales/zh_CN.json

@@ -452,7 +452,7 @@
 		"back": "退回"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span> <span>$${goald}</span>/月，<span>${perc}%</span> 的每月目标。",
+		"progress": "<span>${totd}</span> <span>${goald}</span>/月，<span>{perc}%</span> 的每月目标。",
 		"upgradePush": "要成为订阅者并获得超值福利，请访问<a href=\"/account/upgrade\">升级页面</a>。"
 	},
 	"modals": {
@@ -463,4 +463,4 @@
 	"notfound": {
 		"description": "糟糕！我们找不到该页面。"
 	}
-}
+}

src/locales/zh_Hant.json

@@ -422,7 +422,7 @@
 		"publishedOn": "於"
 	},
 	"donation": {
-		"progress": "<span>$${totd}</span>的<span>$${goald}</span>/月，完成月度目標的<span>${perc}%</span>",
+		"progress": "<span>${totd}</span>的<span>${goald}</span>/月，完成月度目標的<span>{perc}%</span>",
 		"upgradePush": "若要成為訂閱者並獲得超棒的特權，請前往<a href=\"/account/upgrade\">升級頁面</a>。"
 	},
 	"localizationPage": {
@@ -463,4 +463,4 @@
 			"juxt_err": "錯誤代碼 - Juxt"
 		}
 	}
-}
+}

src/pages/progress.vue

@@ -1,34 +1,351 @@
 <script setup lang="ts">
+/* eslint-disable vue/no-v-html -- we might wanna avoid this by rewriting the locales to use variables */
+const { t } = useI18n();
+
 const progress = await useFetch('/api/progress');
 const projects = computed(() => progress.data.value?.items ?? []);
 const donations = computed(() => progress.data.value?.donations);
+const goalPercentage = computed(() => Math.floor((donations.value?.currentCents ?? 0) / (donations.value?.goalCents ?? 0) * 100));
+
+const goalText = computed(() => {
+	return t('donation.progress', {
+		totd: Math.round((donations.value?.currentCents ?? 0) / 100).toString(),
+		goald: Math.round((donations.value?.goalCents ?? 0) / 100).toString(),
+		perc: goalPercentage.value.toString()
+	});
+});
 </script>
 
 <template>
   <div>
-    <p>TODO: progress stub page</p>
-    <h1 v-if="donations">
-      {{ donations.currentCents }}¢ / {{ donations.goalCents }}¢
-    </h1>
-    <div
-      v-for="project of projects"
-      :key="project.title"
-    >
-      <h1>{{ project.title }} ({{ project.completion }}%)</h1>
-      <a
-        v-if="project.githubUrl"
-        :href="project.githubUrl"
-      >Github</a>
-      <p
-        v-for="task of project.tasks"
-        :key="task.title"
-      >
-        [{{ task.status }}] {{ task.title }}
-      </p>
-      <hr>
+    <div class="progress-hero">
+      <div class="hero-meta reduced-margin">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="48.87"
+          height="71.093"
+          viewBox="0 0 48.87 71.093"
+        >
+          <g
+            id="XMLID_6_"
+            transform="translate(0)"
+          >
+            <path
+              id="XMLID_15_"
+              d="M69.581,29.593c-2.029,1.068-.249,4.129,1.78,3.061,5.162-2.67,11.463-2.6,16.981-1.1,4.735,1.282,9.5,3.845,12.246,8.045,1.246,1.922,4.307.142,3.061-1.78C96.921,27.386,80.3,24.04,69.581,29.593Z"
+              transform="translate(-60.112 -20.086)"
+              fill="#9d6ff3"
+            />
+            <path
+              id="XMLID_14_"
+              d="M103.359,21.045c-3.951-6.159-10.751-10-17.657-11.89C77.763,6.948,68.721,7.019,61.281,10.9c-2.029,1.068-.249,4.129,1.78,3.061,6.586-3.453,14.667-3.311,21.644-1.388,5.981,1.638,12.1,4.913,15.521,10.252C101.507,24.783,104.569,23,103.359,21.045Z"
+              transform="translate(-54.766 -7.693)"
+              fill="#9d6ff3"
+            />
+            <path
+              id="XMLID_9_"
+              d="M65.995,47.8a20.7,20.7,0,0,0-12.958,4.45H47.27a2.579,2.579,0,0,0-2.67,2.456v47.239a2.763,2.763,0,0,0,2.67,2.67h5.838a2.639,2.639,0,0,0,2.528-2.67V87.564A21.228,21.228,0,1,0,65.995,47.8Zm0,33.178a12,12,0,1,1,12-12A12,12,0,0,1,65.995,80.978Z"
+              transform="translate(-44.6 -33.522)"
+              fill="#9d6ff3"
+            />
+          </g>
+        </svg>
+        <h1 class="title dot">
+          {{ t('progressPage.title') }}
+        </h1>
+        <p class="text">
+          {{ t('progressPage.description') }}
+        </p>
+      </div>
+    </div>
+
+    <div class="all-progress-lists">
+      <div class="donation-progress">
+        <h1 class="title dot">
+          <span>Donation goal</span>
+          <img
+            v-if="goalPercentage >= 100"
+            :src="'/assets/images/ganon.apng'"
+            alt="An animated image of Cucuí Ganon dancing"
+            class="cucui-dance"
+          >
+        </h1>
+        <div
+          class="progress-bar"
+          :style="{
+            '--progress-bar-width': goalPercentage + '%',
+          }"
+        >
+          <div
+            v-if="goalPercentage >= 100"
+            class="progress-bar-real"
+          />
+          <div class="progress-bar-capped" />
+        </div>
+        <p class="localeReplace">
+          <span
+            class="goal-text-content"
+            v-html="goalText"
+          />
+          {{ ' ' }}
+          <span v-html="t('donation.upgradePush')" />
+        </p>
+      </div>
+
+      <div
+        v-if="projects.length > 0"
+        id="quick-nav"
+      >
+        <h1 class="title dot">
+          Quick Nav
+        </h1>
+        <ul>
+          <li
+            v-for="project of projects"
+            :key="project.title"
+          >
+            <a :href="'#'+slugify(project.title)">{{ project.title }}</a>
+          </li>
+        </ul>
+      </div>
+      <br>
+      <div
+        v-for="project of projects"
+        :id="slugify(project.title)"
+        :key="project.title"
+        class="purple-card"
+      >
+        <p>{{ project.title }}</p>
+      </div>
+      <p v-if="projects.length === 0">
+        No projects
+      </p>
     </div>
-    <p v-if="projects.length === 0">
-      No projects
-    </p>
   </div>
 </template>
+
+<style scoped>
+.progress-hero {
+	width: 100%;
+	display: flex;
+	justify-items: center;
+	align-items: center;
+	text-align: center;
+}
+.progress-hero svg {
+	width: 3rem;
+	height: 3rem;
+}
+.progress-hero .text {
+	max-width: 423px;
+	color: var(--text-shade-1);
+	line-height: 1.8;
+}
+.progress-hero .text a {
+	color: var(--accent-shade-1);
+	text-decoration: none;
+	font-weight: bold;
+}
+.progress-hero .text a:hover {
+	text-decoration: underline;
+}
+
+.hero-meta {
+	margin-top: 25vh;
+}
+.hero-meta.reduced-margin {
+	margin: 10vh 0;
+	width: 100%;
+}
+.hero-meta.reduced-margin h1 {
+	width: 100%;
+}
+.hero-meta.reduced-margin p {
+	margin: 0 auto;
+}
+.hero-image {
+	position: relative;
+	height: 100%;
+}
+
+.progress-bar {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 12px;
+	margin: 1rem 0;
+	border-radius: 6px;
+	background: var(--bg-shade-3);
+}
+.progress-bar-real,
+.progress-bar-capped {
+	position: absolute;
+	height: 100%;
+	border-radius: 6px;
+	width: var(--progress-bar-width);
+}
+.progress-bar-capped {
+	background-color: var(--accent-shade-0);
+	max-width: 100%;
+}
+.progress-bar-real {
+	background-color: var(--green-shade-1);
+	width: calc(var(--progress-bar-width) - 6px);
+	left: 6px;
+}
+
+.donation-progress {
+	padding: 72px 72px;
+  border-radius: 10px;
+  background: var(--bg-shade-0);
+	grid-column: span 2;
+}
+.donation-progress h1 {
+	display: inline-block;
+	margin: 0;
+}
+.donation-progress .goal-text-content :deep(span) {
+	font-weight: bold;
+}
+.donation-progress :deep(a) {
+	color: var(--accent-shade-1);
+	text-decoration: none;
+	font-weight: bold;
+}
+.donation-progress :deep(a:hover) {
+	text-decoration: underline;
+}
+
+.donation-progress .cucui-dance {
+	height: 2em;
+	margin-bottom: -0.6em;
+}
+
+.all-progress-lists {
+	margin-top: 50px;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-gap: 20px;
+}
+.feature-list-wrapper {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-gap: 20px;
+	margin-top: 22px;
+}
+.feature-progress-chart {
+	max-width: 100px;
+}
+.feature-progress-chart canvas.percentage-chart {
+	pointer-events: none; /* Fixes issue #48 */
+}
+.feature-list-wrapper h3 {
+	margin: 0;
+}
+.feature-list-wrapper hr {
+	border: 0;
+	width: 100%;
+	height: 1px;
+	margin: 20px 0;
+	background: rgba(255, 255, 255, 0.1);
+}
+.progress-title {
+	margin-bottom: 20px;
+}
+.progress-title a.github {
+	margin-top: 10px;
+	color: var(--text-shade-0);
+	display: inline-flex;
+	align-items: center;
+	opacity: .75;
+	text-decoration: none;
+	transition: color 50ms ease-in-out;
+}
+.progress-title a.github:focus, .progress-title a.github:hover, .progress-title a.github:visited {
+	color: var(--text-shade-0);
+	text-decoration: none;
+}
+.progress-title a.github:hover {
+	opacity: 1;
+}
+.progress-title a.github svg {
+	height: 1.3rem;
+	margin-right: .4rem;
+}
+.feature-list-wrapper.purple .progress-title a.github, .feature-list-wrapper.purple .progress-title a.github:focus, .feature-list-wrapper.purple .progress-title a.github:hover, .feature-list-wrapper.purple .progress-title a.github:visited {
+	color: var(--accent-shade-3);
+}
+.feature-list-wrapper .core > .progress-title a.github:hover {
+	color: white;
+}
+
+.feature-list-wrapper canvas {
+	width: 100px;
+	height: 100px;
+}
+
+.feature-progress-chart {
+	position: relative;
+}
+.feature-progress-chart p {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	margin: 0;
+	font-weight: bolder;
+	font-size: 1.3rem;
+}
+
+/* Progress: Feature list */
+.feature-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+	grid-gap: 10px;
+}
+.feature {
+	display: grid;
+	align-items: flex-start;
+	grid-template-columns: auto 1fr;
+	grid-gap: 10px;
+}
+
+/* Custom checkboxes */
+.custom-checkbox {
+	width: 1.5rem;
+	height: 1.5rem;
+	background: var(--bg-shade-3);
+	color: var(--text-shade-3);
+	border-radius: 2px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.custom-checkbox.done {
+	background: #50AC75;
+}
+.custom-checkbox.ongoing {
+	background: #DBAC5B;
+}
+.custom-checkbox svg {
+	width: 100%;
+	height: 100%;
+}
+.custom-checkbox .small-dot {
+	width: 0.5rem;
+	height: 0.5rem;
+	background: white;
+	border-radius: 50%;
+}
+
+#quick-nav a {
+	color: var(--text-shade-1);
+	text-decoration: none;
+	width: fit-content;
+}
+
+#quick-nav a:hover {
+	color: var(--text-shade-3);
+	text-decoration: underline;
+}
+</style>