feat: add certificate and course HTML templates

- Introduced new HTML templates for certificate and course pages.
- The certificate template includes dynamic placeholders for student and course details.
- The course template features structured lesson notes and additional resources.
This commit is contained in:
Rotimi Best
2025-09-28 19:54:50 +01:00
parent 85474ea022
commit 7e0443fc37
2 changed files with 613 additions and 0 deletions
+431
View File
@@ -0,0 +1,431 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen&family=Roboto:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<title>Certificate</title>
<style>
.student-name {
font-family: 'Qwitcher Grypen', cursive;
}
body {
position: relative;
}
</style>
</head>
<body>
<img
src="http://localhost:3002/blue-lined-background.png"
alt=""
class="absolute top-0 left-0 w-full h-[100vh] z-10"
/>
<div class="absolute z-20 left-[5%] top-16 w-[90%]">
<header class="w-full flex justify-center items-center pt-10 gap-3 text-3xl font-bold">
<img src="${orgLogoUrl}" alt="" />
<h1>${orgName}</h1>
</header>
<div class="pl-10 text-lg font-bold mt-[10%]">
<h2>This certificate is awarded to</h2>
<h1 class="text-3xl text-blue-800">${studentName}</h1>
</div>
<div class="pl-10 text-lg font-bold mt-10 w-[70%]">
<h1>has succesfully completed training on</h1>
<h2 class="text-4xl leading-[2.5rem]">${courseName}</h2>
</div>
<div class="flex border justify-between w-[70%] mx-auto text-center items-end my-14">
<div>
<p class="font-bold">${dateIssued}</p>
<h1 class="border-t border-black h-2/4 font-bold">Date Issued</h1>
</div>
<div class="w-[20%]">
<h1 class="h-2/4 border-b border-black"></h1>
<p class="font-bold">Signature</p>
</div>
</div>
<footer class="text-sm pl-10 w-[90%] pb-10">${courseDescription}</footer>
</div>
<!-- plain blueProfessionalBadgePattern -->
<!-- <img
src="http://localhost:3002/blue-professional-badge-background.png"
alt=""
class="absolute top-0 left-0 w-full z-10"
/>
<div class="absolute w-full pl-20 top-10 z-20">
<header class="w-full flex justify-start items-center pt-10 gap-3 text-3xl font-bold">
<svg
width="34"
height="27"
viewBox="0 0 24 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.2076 9.08656C21.5733 9.08656 23.4911 7.16873 23.4911 4.80302C23.4911 2.43731 21.5733 0.519531 19.2076 0.519531C16.8419 0.519531 14.9241 2.43731 14.9241 4.80302C14.9241 7.16873 16.8419 9.08656 19.2076 9.08656Z"
fill="#0542CC"
/>
<path
d="M23.5385 10.7793V16.9927H14.1243V14.7333C14.1243 12.568 15.8659 10.7793 18.0783 10.7793H23.5385Z"
fill="#0542CC"
/>
<path
d="M12.5701 0.519531V16.9945H9.03974C6.78031 16.9945 4.70918 16.0531 3.20289 14.5939C1.69661 13.0876 0.802246 11.0165 0.802246 8.75703C0.802246 4.1911 4.47382 0.519531 9.03974 0.519531H12.5701Z"
fill="#0542CC"
/>
</svg>
<h1 class="text-[#282828]">Classroom<span class="text-[#0233BD]">IO</span></h1>
</header>
<div class="text-lg font-bold mt-[9%]">
<h2>This certificate is awarded to</h2>
<h1 class="text-3xl text-blue-800">Usman Elebute Ayomide</h1>
</div>
<div class="text-lg font-bold mt-10 w-[70%]">
<h1>has succesfully completed training on</h1>
<h2 class="text-5xl mt-3 leading-[3.5rem]">
Building fullstack Applications with superbase & Svelte
</h2>
</div>
<div class="flex justify-between w-[70%] text-center my-[10%]">
<div>
<h1 class="h-2/4">DATE ISSUED:</h1>
<p class="border-b-2 border-black font-bold">02,May 2024</p>
</div>
<div>
<h1 class="h-2/4">FACILITATOR:</h1>
<p class="font-bold">ROTIMI BEST</p>
</div>
<div class="w-[20%]">
<h1 class="h-2/4 border-b-2 border-black"></h1>
<p class="font-bold">Signature</p>
</div>
</div>
<footer class="text-sm w-[90%] pb-10">
Building full-stack apps with Superbase & Svelte merges robust backend services from
Superbase with Svelte's sleek frontend framework. Leveraging PostgreSQL and Svelte's
reactivity, developers create efficient, feature-rich web apps. This stack streamlines
development, offering scalability and performance for modern applications with minimal
overhead.
</footer>
</div> -->
<!-- plain purpleProfessionalBadgePattern -->
<!-- <img
src="http://localhost:3002/purple-professional-badge-background.png"
alt=""
class="absolute top-0 left-0 w-full z-10"
/>
<div class="absolute w-full pl-20 top-10 z-20">
<header class="w-full flex justify-start items-center pt-10 gap-3 text-3xl font-bold">
<svg
width="34"
height="27"
viewBox="0 0 24 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.2076 9.08656C21.5733 9.08656 23.4911 7.16873 23.4911 4.80302C23.4911 2.43731 21.5733 0.519531 19.2076 0.519531C16.8419 0.519531 14.9241 2.43731 14.9241 4.80302C14.9241 7.16873 16.8419 9.08656 19.2076 9.08656Z"
fill="#0542CC"
/>
<path
d="M23.5385 10.7793V16.9927H14.1243V14.7333C14.1243 12.568 15.8659 10.7793 18.0783 10.7793H23.5385Z"
fill="#0542CC"
/>
<path
d="M12.5701 0.519531V16.9945H9.03974C6.78031 16.9945 4.70918 16.0531 3.20289 14.5939C1.69661 13.0876 0.802246 11.0165 0.802246 8.75703C0.802246 4.1911 4.47382 0.519531 9.03974 0.519531H12.5701Z"
fill="#0542CC"
/>
</svg>
<h1 class="text-[#282828]">Classroom<span class="text-[#0233BD]">IO</span></h1>
</header>
<div class="text-lg font-bold mt-[9%]">
<h2>This certificate is awarded to</h2>
<h1 class="text-3xl text-fuchsia-800">Usman Elebute Ayomide</h1>
</div>
<div class="text-lg font-bold mt-10 w-[70%]">
<h1>has succesfully completed training on</h1>
<h2 class="text-5xl mt-3 leading-[3.5rem]">
Building fullstack Applications with superbase & Svelte
</h2>
</div>
<div class="flex justify-between w-[70%] text-center my-[10%]">
<div>
<h1 class="h-2/4">DATE ISSUED:</h1>
<p class="border-b-2 border-black font-bold">02,May 2024</p>
</div>
<div>
<h1 class="h-2/4">FACILITATOR:</h1>
<p class="font-bold">ROTIMI BEST</p>
</div>
<div class="w-[20%]">
<h1 class="h-2/4 border-b-2 border-black"></h1>
<p class="font-bold">Signature</p>
</div>
</div>
<footer class="text-sm w-[90%] pb-10">
Building full-stack apps with Superbase & Svelte merges robust backend services from
Superbase with Svelte's sleek frontend framework. Leveraging PostgreSQL and Svelte's
reactivity, developers create efficient, feature-rich web apps. This stack streamlines
development, offering scalability and performance for modern applications with minimal
overhead.
</footer>
</div> -->
<!------------------------------------------------------- new secton ---------------------------------------------------- -->
<!-- PurpleProfessionalBadge certificate -->
<!-- <img
src="http://localhost:3002/purple-lined-background.png"
alt=""
class="absolute -top-1 left-0 w-full z-10"
/>
<div class="absolute z-20 left-[10%] top-16 w-[90%]">
<header class="w-full flex justify-center items-center pt-10 gap-3 text-3xl font-bold">
<svg
width="34"
height="27"
viewBox="0 0 24 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.2076 9.08656C21.5733 9.08656 23.4911 7.16873 23.4911 4.80302C23.4911 2.43731 21.5733 0.519531 19.2076 0.519531C16.8419 0.519531 14.9241 2.43731 14.9241 4.80302C14.9241 7.16873 16.8419 9.08656 19.2076 9.08656Z"
fill="#0542CC"
/>
<path
d="M23.5385 10.7793V16.9927H14.1243V14.7333C14.1243 12.568 15.8659 10.7793 18.0783 10.7793H23.5385Z"
fill="#0542CC"
/>
<path
d="M12.5701 0.519531V16.9945H9.03974C6.78031 16.9945 4.70918 16.0531 3.20289 14.5939C1.69661 13.0876 0.802246 11.0165 0.802246 8.75703C0.802246 4.1911 4.47382 0.519531 9.03974 0.519531H12.5701Z"
fill="#0542CC"
/>
</svg>
<h1 class="text-[#282828]">Classroom<span class="text-[#0233BD]">IO</span></h1>
</header>
<div class="pl-10 text-lg font-bold mt-[10%]">
<h2>This certificate is awarded to</h2>
<h1 class="text-3xl text-[#95449A]">Usman Elebute Ayomide</h1>
</div>
<div class="pl-10 text-lg font-bold mt-10 w-[70%]">
<h1>has succesfully completed training on</h1>
<h2 class="text-4xl leading-[2.5rem]">
Building fullstack Applications with superbase & Svelte
</h2>
</div>
<div class="pl-10 flex justify-between w-[70%] text-center my-[10%]">
<div>
<h1 class="h-2/4">DATE ISSUED:</h1>
<p class="border-b-2 border-black font-bold">02,May 2024</p>
</div>
<div>
<h1 class="h-2/4">FACILITATOR:</h1>
<p class="font-bold">ROTIMI BEST</p>
</div>
<div class="w-[20%]">
<h1 class="h-2/4 border-b-2 border-black"></h1>
<p class="font-bold">Signature</p>
</div>
</div>
<footer class="text-sm pl-10 w-[90%] pb-10">
Building full-stack apps with Superbase & Svelte merges robust backend services from
Superbase with Svelte's sleek frontend framework. Leveraging PostgreSQL and Svelte's
reactivity, developers create efficient, feature-rich web apps. This stack streamlines
development, offering scalability and performance for modern applications with minimal
overhead.
</footer>
</div> -->
<!-- BlueProfessionalBadge certificate -->
<!-- <img
src="http://localhost:3002/blue-lined-background.png"
alt=""
class="absolute -top-1 left-0 w-full z-10"
/>
<div class="absolute z-20 left-[10%] top-16 w-[90%]">
<header class="w-full flex justify-center items-center pt-10 gap-3 text-3xl font-bold">
<img src="${orgLogoUrl}" alt="" />
<h1>${orgName}</h1>
</header>
<div class="pl-10 text-lg font-bold mt-[10%]">
<h2>This certificate is awarded to</h2>
<h1 class="text-3xl">${studentName}</h1>
</div>
<div class="pl-10 text-lg font-bold mt-10 w-[70%]">
<h1>has succesfully completed training on</h1>
<h2 class="text-4xl leading-[2.5rem]">${courseName}</h2>
</div>
<div class="pl-10 flex justify-between w-[70%] text-center my-[10%]">
<div>
<h1 class="h-2/4">DATE ISSUED:</h1>
<p class="border-b-2 border-black font-bold">02,May 2024</p>
</div>
<div>
<h1 class="h-2/4">FACILITATOR:</h1>
<p class="font-bold">ROTIMI BEST</p>
</div>
<div class="w-[20%]">
<h1 class="h-2/4 border-b-2 border-black"></h1>
<p class="font-bold">Signature</p>
</div>
</div>
<footer class="text-sm pl-10 w-[90%] pb-10">${courseDescription}</footer>
</div> -->
<!-- --------------------- old certificates ------------------------- -->
<!-- <div
class="flex items-center justify-center border border-dashed border-blue-400 h-full w-full"
>
<div class="h-full flex border-l-8 border-blue-800">
<div class="h-full w-full px-5 py-10">
<p class="text-2xl font-normal my-2 mb-10 uppercase text-gray-500">
Certificate<br />
of completion
</p>
<div class="border-b border-gray-500 mb-4">
<p class="text-xl text-black font-normal">This is to certify that</p>
<p class="student-name text-center text-9xl">Rotimi Best</p>
</div>
<div class="mb-2">
<p class="text-xl text-black font-normal">
has successfully completed introductory courses in
</p>
<div>
<p
class="bg-transparent font-semibold text-blue-800 text-center uppercase my-10 text-3xl"
>
Figma for Beginners
</p>
</div>
</div>
<p class="text-xl font-light mb-4 text-justify">
Netlify Functions can stream data to clients as it becomes available, rather than
returning a buffered payload at the end of the computation. This lets developers and
frameworks create faster experiences by using streaming and partial hydration to get
content and interactions in front of people as quickly as possible. For an extended
example that demonstrates a more likely response streaming use case, consider this
function
</p>
<div class="flex justify-between w-[70%] mx-auto text-center my-14">
<div>
<h1 class="h-2/4">DATE ISSUED:</h1>
<p class="border-b border-black font-bold">02,May 2024</p>
</div>
<div>
<h1 class="h-2/4">FACILITATOR:</h1>
<p class="font-bold">ROTIMI BEST</p>
</div>
<div class="w-[20%]">
<h1 class="h-2/4 border-b border-black"></h1>
<p class="font-bold">Signature</p>
</div>
</div>
<div class="flex items-center gap-1 mt-14">
<img
src="https://koxqonvbkeakwvmdegcf.supabase.co/storage/v1/object/public/avatars/user/Coding%20Dojo1684164720355.webp"
alt="logo"
class="w-24 h-24 rounded-md"
/>
<p class="font-semibold capitalize text-5xl">Coding Dojo</p>
</div>
</div>
</div>
</div> -->
<!-- <div
class="flex flex-col items-center justify-center border-4 border-pink-700 py-3 w-full h-full"
>
<div class="flex items-center gap-1 my-2 mb-10">
<img
src="https://koxqonvbkeakwvmdegcf.supabase.co/storage/v1/object/public/avatars/user/Coding%20Dojo1684164720355.webp"
alt="logo"
class="w-24 h-24 rounded-md"
/>
<p class="font-semibold capitalize text-5xl">Coding Dojo</p>
</div>
<div class="w-full px-5 py-3">
<p
class="text-xl text-center font-normal my-2 uppercase tracking-widest text-gray-500 w-full"
>
Certificate of completion
</p>
<div class="border-b border-gray-500 mb-4">
<p class="text-xl text-black font-normal">This is to certify that</p>
<p class="student-name text-center text-8xl">Rotimi Best</p>
</div>
<div class="mb-2">
<p class="text-xl text-black font-normal">has successfully completed a courses in</p>
<div class="my-10">
<p class="bg-transparent font-semibold text-pink-700 text-center uppercase text-3xl">
Figma for Beginners
</p>
</div>
</div>
<p class="text-xl text-center text-gray-500 font-light">
Netlify Functions can stream data to clients as it becomes available, rather than
returning a buffered payload at the end of the computation. This lets developers and
frameworks create faster experiences by using streaming and partial hydration to get
content and interactions in front of people as quickly as possible. For an extended
example that demonstrates a more likely response streaming use case, consider this
function
</p>
<div class="flex justify-between w-[70%] mx-auto text-center my-14">
<div>
<h1 class="h-2/4">DATE ISSUED:</h1>
<p class="border-b border-black font-bold">02,May 2024</p>
</div>
<div>
<h1 class="h-2/4">FACILITATOR:</h1>
<p class="font-bold">ROTIMI BEST</p>
</div>
<div class="w-[20%]">
<h1 class="h-2/4 border-b border-black"></h1>
<p class="font-bold">Signature</p>
</div>
</div>
</div> -->
</body>
</html>
+182
View File
@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400&family=Roboto:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet" />
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<title>Lesson Note</title>
<style>
html {
-webkit-print-color-adjust: exact;
}
header {
border-color: rgb(0, 48, 255);
}
body {
font-family: 'Roboto', sans-serif;
}
.hero {
background-color: rgb(0, 48, 255);
}
.prose h1 {
margin: 0;
}
.prose h2 {
margin: 0.5rem 0 3rem 0;
}
.prose h3 {
margin: 0.5rem 0;
}
h4 {
font-family: 'Roboto Mono', monospace;
}
span {
font-size: 0.8rem;
}
section {
margin-top: 5%;
}
.root {
width: 95%;
}
.footer {
font-size: 3rem;
scale: 3;
}
</style>
<style type="text/tailwindcss">
@tailwind base;
@tailwind base;
@tailwind components;
@tailwind utilities;
.prose {
max-width: unset;
}
</style>
</head>
<body class="w-full">
<header class="flex justify-center items-center flex-col border-[50px] mx-10 h-[100vh] m-0">
<h1 class="font-bold text-8xl text-black m-0 mx-96">React js for Beginners</h1>
<h4 class="text-md text-2xl font-light text-black mt-5 ">By TheSpace</h4>
</header>
<div class="root mx-auto mt-5 prose">
<div class="hero w-full h-40 flex flex-col items-center justify-center gap-2 rounded-lg m-0">
<h3
class="my-0 rounded-full w-10 text-center mx-auto py-1 text-blue-700 bg-white text-md font-bold tracking-tighter">
32
</h3>
<h1 class="font-bold text-5xl text-white m-0">The Yams</h1>
<h4 class="text-md font-normal text-white m-0">By The Space</h4>
</div>
<main>
<section>
<h1>Lesson Note: Introduction and Counselling</h1>
<h2>Course: The Ultimate Guide to relocating to the UK via Study Path</h2>
<h3>Lesson Overview:</h3>
<p>This lesson serves as the introduction to the course &quot;The Ultimate Guide to relocating to the UK via
Study Path.&quot; In this session, we will provide an overview of the course and discuss the importance of
effective counseling in the relocation process.</p>
<h3>Learning Objectives:</h3>
<p>By the end of this lesson, students should be able to:</p>
<ul>
<li>Understand the goals and structure of the course.</li>
<li>Recognize the significance of counseling in the relocation process.</li>
<li>Acquire knowledge about the necessary steps involved in relocating to the UK through the study path.</li>
</ul>
<h3>Lesson Content:</h3>
<ol>
<li>
<p><strong>Introduction to the Course</strong></p>
<ul>
<li>Briefly introduce the course title and explain its relevance to students&#39; interests.</li>
<li>Highlight the main topics and modules covered throughout the course.</li>
</ul>
</li>
<li>
<p><strong>Importance of Counseling</strong></p>
<ul>
<li>Define the role of counseling in the relocation process.</li>
<li>Discuss how counseling can assist students in making informed decisions regarding their studies and
life in the UK.</li>
<li>Explain the benefits of seeking professional guidance during the relocation journey.</li>
</ul>
</li>
<li>
<p><strong>Steps for Relocating to the UK via Study Path</strong></p>
<ul>
<li>Provide an overview of the necessary steps involved in relocating to the UK for study purposes.</li>
<li>Discuss the importance of thorough planning, research, and documentation in the relocation process.
</li>
<li>Highlight key points such as visa applications, university admissions, accommodation arrangements, and
financial considerations.</li>
</ul>
</li>
<li>
<p><strong>Q&amp;A and Discussion Time</strong></p>
<ul>
<li>Allocate time for students to ask questions, provide comments, or share personal experiences.</li>
<li>Encourage active participation and foster a supportive learning environment.</li>
</ul>
</li>
</ol>
<h3>Conclusion:</h3>
<p>In this lesson, we introduced the course &quot;The Ultimate Guide to relocating to the UK via Study
Path&quot; and emphasized the significance of counseling in the relocation process. We explored the essential
steps involved in relocating to the UK and highlighted the importance of thorough planning and research.
Students should now have a better understanding of the course objectives and overall expectations. In the next
session, we will delve deeper into the specific requirements for studying in the UK and provide detailed
guidance on university admissions.</p>
</section>
<section>
<h1 class="text-xl font-bold my-1">Extra Resources</h1>
<div class="flex mt-2 mb-1">
<p class="m-0 mr-2">Slide Link:</p> <a href=https://youtu.be/dyLaKhePzj8 style="color: blue"
class="underline">Open Here</a>
</div>
<p class="m-0">Video Link:</p>
<div class="m-0">
<ol class="m-0">
<li key={index + 1}><a href=https://youtu.be/0fYi8SGA20k style="color: blue"
class="underline">https://youtu.be/0fYi8SGA20k</a></li>
<li key={index + 1}><a href=https://youtu.be/0fYi8SGA20k style="color: blue"
class="underline">https://youtu.be/0fYi8SGA20k</a></li>
</ol>
</div>
</section>
</main>
</div>
</body>
</html>