diff --git a/apps/hackathon/index.html b/apps/hackathon/index.html
index 8a9b483..efd8de5 100644
--- a/apps/hackathon/index.html
+++ b/apps/hackathon/index.html
@@ -18,6 +18,9 @@
type="image/svg+xml"
href="/images/imphnen-logo-simple.svg"
/>
+
+
+
diff --git a/apps/hackathon/public/images/blank_cert.png b/apps/hackathon/public/images/blank_cert.png
index 56c2c8e..1982b6e 100644
Binary files a/apps/hackathon/public/images/blank_cert.png and b/apps/hackathon/public/images/blank_cert.png differ
diff --git a/apps/hackathon/public/images/blank_cert.svg b/apps/hackathon/public/images/blank_cert.svg
new file mode 100644
index 0000000..0fab4d1
--- /dev/null
+++ b/apps/hackathon/public/images/blank_cert.svg
@@ -0,0 +1,142 @@
+
diff --git a/apps/hackathon/src/app/certificate/[certId]/page.tsx b/apps/hackathon/src/app/certificate/[certId]/page.tsx
index 2f8a5f8..3506046 100644
--- a/apps/hackathon/src/app/certificate/[certId]/page.tsx
+++ b/apps/hackathon/src/app/certificate/[certId]/page.tsx
@@ -115,19 +115,22 @@ const CertificatePage: FC = (): ReactElement => {
setIsGenerating(true);
try {
- // Wait a bit for fonts and images to load
- await new Promise((resolve) => setTimeout(resolve, 500));
+ // Wait longer for fonts and images to load properly
+ await new Promise((resolve) => setTimeout(resolve, 1500));
const canvas = await html2canvas(certificateRef.current, {
- scale: 2,
+ scale: 4,
useCORS: true,
backgroundColor: '#ffffff',
logging: false,
width: 1000,
height: (1000 * 2480) / 3508,
+ allowTaint: true,
+ imageTimeout: 0,
+ removeContainer: true,
});
- const imageUrl = canvas.toDataURL('image/png');
+ const imageUrl = canvas.toDataURL('image/png', 1.0);
setCertificateImage(imageUrl);
setShowTemplate(false);
} catch (error) {
@@ -315,57 +318,30 @@ const CertificatePage: FC = (): ReactElement => {
id="certificate-template"
style={{
position: 'relative',
- backgroundImage: 'url(/images/blank_cert.png)',
+ backgroundImage: 'url(/images/blank_cert.svg)',
backgroundSize: 'cover',
backgroundPosition: 'center',
width: '1000px',
height: `${(1000 * 2480) / 3508}px`,
}}
>
- {/* User Name (from session) */}
+ {/* Team Name - positioned in middle between "Diberikan Kepada" and "Telah Berpartisipasi" */}
-
- {certificateName || 'N/A'}
-
-
-
- {/* Team Name */}
-
{
- {/* Participation Text */}
+ {/* User Name - positioned below team name */}
-
-
- Peserta Hackathon IMPHNEN x KOLOSAL AI
-
-
+ {certificateName || 'N/A'}
+
{qrCodeUrl && (
-
-
-
+
)}
-
- {new Date().toLocaleDateString(
- 'id-ID',
- {
- day: 'numeric',
- month: 'long',
- year: 'numeric',
- }
- )}
-
-