ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lint codebase and run precommit hook

Browse Source
This commit is contained in:
Rotimi Best
2025-12-25 09:01:51 +00:00
parent 334c67f22a
commit b31ccf3037
214 changed files with 6191 additions and 2880 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/website/src/lib/components/blog-list-item.svelte
+6 -14
View File
@@ -13,7 +13,7 @@
</script>
{#if !isRecommended}
<div class="mb-5 flex md:flex-row flex-col md:items-center gap-2">
<div class="mb-5 flex flex-col gap-2 md:flex-row md:items-center">
<!-- Date -->
<p class="text-sm text-slate-500">{formatDate(post.date)}</p>
@@ -29,24 +29,16 @@
{/if}
<a href="/blog/{post.slug}" class="group">
<img
loading="lazy"
src={post.imageUrl}
alt={post.title}
class="w-70 h-48 object-cover rounded-md"
/>
<p
class="font-bold text-lg py-2 {isRecommended &&
'h-[60px]'} line-clamp-2 group-hover:text-slate-500"
>
<img loading="lazy" src={post.imageUrl} alt={post.title} class="w-70 h-48 rounded-md object-cover" />
<p class="py-2 text-lg font-bold {isRecommended && 'h-[60px]'} line-clamp-2 group-hover:text-slate-500">
{@html post.title}
</p>
<p class="text-slate-500 pt-2 mb-4 line-clamp-3">{post.description}</p>
<p class="mb-4 line-clamp-3 pt-2 text-slate-500">{post.description}</p>
</a>
<div class="flex items-center justify-start gap-4 my-2">
<img loading="lazy" src={post.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
<div class="my-2 flex items-center justify-start gap-4">
<img loading="lazy" src={post.avatar} alt="avatar" class="h-10 w-10 rounded-full" />
<span>
<p class="font-semibold">{post.author}</p>
<p class="text-slate-500">{post.role}</p>
apps/website/src/lib/components/core-feature-section.svelte
+9 -9
View File
@@ -26,14 +26,14 @@
} = $props();
</script>
<section {id} class="w-full py-32 border-b border-x-0 border-t-0 border-gray-200">
<section {id} class="w-full border-x-0 border-b border-t-0 border-gray-200 py-32">
<div
class="w-4/5 mx-auto flex flex-col {rightToLeft
class="mx-auto flex w-4/5 flex-col {rightToLeft
? 'lg:flex-row-reverse'
: 'lg:flex-row'} items-center justify-between gap-8 lg:gap-28"
>
<div class="w-[80vw] flex flex-col">
<div class="my-2 lg:my-4 ml-1 flex gap-2 items-center">
<div class="flex w-[80vw] flex-col">
<div class="my-2 ml-1 flex items-center gap-2 lg:my-4">
{#if taglineIcon === 'simplified'}
<img width="27" height="27" loading="lazy" src={thumbsUp} alt="" class="w-7" />
{:else if taglineIcon === 'flexible'}
@@ -46,16 +46,16 @@
{:else if taglineIcon === 'productivity'}
<img width="27" height="27" loading="lazy" src={robotArm} alt="" class="w-7" />
{/if}
<p class="font-medium text-base">{tagline}</p>
<p class="text-base font-medium">{tagline}</p>
</div>
<h2 class="text-3xl mb-3 lg:mb-6">{title}</h2>
<p class="leading-8 text-lg text-gray-500">
<h2 class="mb-3 text-3xl lg:mb-6">{title}</h2>
<p class="text-lg leading-8 text-gray-500">
{description}
</p>
{#if more}
<br />
<p class="leading-8 text-lg text-gray-500">
<p class="text-lg leading-8 text-gray-500">
{@render more?.()}
</p>
{/if}
@@ -64,7 +64,7 @@
<video
width="100%"
height="100%"
class="w-full h-auto lg:max-h-[80%] rounded-md shadow-xl"
class="h-auto w-full rounded-md shadow-xl lg:max-h-[80%]"
autoplay
loop
muted
apps/website/src/lib/components/core-features.svelte
+14 -25
View File
@@ -3,8 +3,8 @@
import { PUBLIC_ENABLE_STATS } from '$env/static/public';
</script>
<section class="w-full py-32 border-b border-x-0 border-t-0 border-gray-200">
<div class="justify-center flex text-center flex-wrap gap-x-12 gap-y-16">
<section class="w-full border-x-0 border-b border-t-0 border-gray-200 py-32">
<div class="flex flex-wrap justify-center gap-x-12 gap-y-16 text-center">
<div class="w-full min-w-0" style="max-width: 1000px; flex: 1 1 550px;">
<div class="mx-auto flex max-w-lg flex-col items-center gap-2">
<div class="flex-none">
@@ -19,19 +19,16 @@
/>
</div>
</div>
<div class="text-base leading-snug text-center">
<span class="font-bold opacity-50 text-4xl">“</span>
<div class="text-center text-base leading-snug">
<span class="text-4xl font-bold opacity-50">“</span>
<span class="text-gray-800" style="font-size: 17px;"
>ClassroomIO really helped me bootstrap my program. The dashboard is extremely
intuitive. I could navigate most of it without any help / support. Coming from framer, I
can honestly say that I am extremely greatful that I found ClassroomIO.</span
> <span class="font-bold opacity-50 inline-block text-4xl">”</span>
>ClassroomIO really helped me bootstrap my program. The dashboard is extremely intuitive. I could navigate
most of it without any help / support. Coming from framer, I can honestly say that I am extremely greatful
that I found ClassroomIO.</span
> <span class="inline-block text-4xl font-bold opacity-50">”</span>
</div>
<div class="mx-auto flex items-center gap-2 justify-center">
<div
class="flex max-w-[200px] flex-none flex-col overflow-hidden text-left"
style="color: var(--clr-text);"
>
<div class="mx-auto flex items-center justify-center gap-2">
<div class="flex max-w-[200px] flex-none flex-col overflow-hidden text-left" style="color: var(--clr-text);">
<div class="text-center text-sm font-medium opacity-90">
Pranav Singhal <div class="block text-xs font-medium opacity-70 hover:opacity-50">
Founder at <a href="https://www.dblocked.io/" target="_blank">DBlockEd</a>
@@ -80,26 +77,18 @@
<!-- body section 5 -->
{#if PUBLIC_ENABLE_STATS}
<div
class="flex justify-between flex-row flex-wrap lg:flex-nowrap items-center text-center px-[10%] py-[7%] border-b-[1px] gap-y-20 gap-x-20 mx-0 lg:mx-[12%]"
class="mx-0 flex flex-row flex-wrap items-center justify-between gap-x-20 gap-y-20 border-b-[1px] px-[10%] py-[7%] text-center lg:mx-[12%] lg:flex-nowrap"
>
<div class="w-full">
<h2
class="w-full order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
>
1 thousand
</h2>
<h2 class="order-first w-full text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">1 thousand</h2>
<p class="text-base leading-7 text-gray-600">Feedback collected</p>
</div>
<div class="w-full">
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
5 thousand
</h2>
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">5 thousand</h2>
<p class="text-base leading-7 text-gray-600">Documents processed</p>
</div>
<div class="w-full">
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
1 million
</h2>
<h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">1 million</h2>
<p class="text-base leading-7 text-gray-600">Page views recorded</p>
</div>
</div>
apps/website/src/lib/components/custom-img.svelte
+1 -6
View File
@@ -8,10 +8,5 @@
</script>
<figure>
<img
{src}
{alt}
loading="lazy"
class="max-w-full w-full h-full md:min-h-[400px] object-cover my-2 rounded-lg"
/>
<img {src} {alt} loading="lazy" class="my-2 h-full w-full max-w-full rounded-lg object-cover md:min-h-[400px]" />
</figure>
apps/website/src/lib/components/faq.svelte
+5 -7
View File
@@ -6,19 +6,17 @@
<div class="mb-20 mt-10 flex flex-col items-center justify-center">
<header class="text-center">
<h1 class="mt-2 text-xl md:text-4xl">
Questions & Answers
</h1>
<h1 class="mt-2 text-xl md:text-4xl">Questions & Answers</h1>
<p
class="mt-4 text-sm md:text-lg font-normal tracking-normal ui:text-muted-foreground lg:px-[20%] lg:text-xl lg:tracking-wide"
class="ui:text-muted-foreground mt-4 text-sm font-normal tracking-normal md:text-lg lg:px-[20%] lg:text-xl lg:tracking-wide"
>
Can't find the answer you're looking for?
<a class="font-semibold text-blue-700" href="mailto:help@classroomio.com" target="_blank"
>Shoot us an email</a> and we'll get back to you ASAP.
<a class="font-semibold text-blue-700" href="mailto:help@classroomio.com" target="_blank">Shoot us an email</a> and
we'll get back to you ASAP.
</p>
</header>
<div class="mt-[20%] lg:m-0 max-w-3xl w-full mx-auto px-2">
<div class="mx-auto mt-[20%] w-full max-w-3xl px-2 lg:m-0">
<Accordion.Root type="single" class="w-full">
{#each faqs as faq, index}
<Accordion.Item value="faq-{index}">
apps/website/src/lib/components/footer.svelte
+8 -11
View File
@@ -26,17 +26,16 @@
/></a
> -->
<div class="mt-5 flex items-center gap-3 lg:mt-10 lg:gap-7">
<Button href="https://www.facebook.com/classroomiohq" target="_blank" variant="ghost" aria-label="Facebook Link">
<Button
href="https://www.facebook.com/classroomiohq"
target="_blank"
variant="ghost"
aria-label="Facebook Link"
>
<Facebook />
</Button>
<Button href="https://twitter.com/classroomio" target="_blank" variant="ghost" aria-label="Twitter Link">
<img
width="20"
height="20"
loading="lazy"
src="/twitter.svg"
alt=""
/>
<img width="20" height="20" loading="lazy" src="/twitter.svg" alt="" />
</Button>
<Button href="https://www.youtube.com/@ClassroomIO" target="_blank" variant="ghost" aria-label="Youtube Link">
<Youtube />
@@ -130,9 +129,7 @@
</div>
</nav>
</div>
<footer
class="border-t py-3 text-center text-xs font-light leading-5 text-gray-500 lg:text-left lg:text-base"
>
<footer class="border-t py-3 text-center text-xs font-light leading-5 text-gray-500 lg:text-left lg:text-base">
<p>All rights reserved.</p>
<p class="flex items-center justify-center">
ClassroomIO © {new Date().getFullYear()} by
apps/website/src/lib/components/hero.svelte
+6 -13
View File
@@ -114,9 +114,9 @@
<span>from one Platform</span>
</div>
<p class="mx-auto mt-10 px-4 ui:text-muted-foreground md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
ClassroomIO is an open source learning management system for companies. We give you a suite
of tools to help you achieve your training, onboarding and certification goals.
<p class="ui:text-muted-foreground mx-auto mt-10 px-4 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
ClassroomIO is an open source learning management system for companies. We give you a suite of tools to help you
achieve your training, onboarding and certification goals.
</p>
</div>
@@ -169,12 +169,8 @@
</div>
<div class="my-10 flex flex-col items-center justify-center gap-4 md:flex-row">
<Button variant="outline" href="/demo" target="_blank" rel="noopener noreferrer nofollow">
Book a demo
</Button>
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">
Sign Up for Free
</Button>
<Button variant="outline" href="/demo" target="_blank" rel="noopener noreferrer nofollow">Book a demo</Button>
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Sign Up for Free</Button>
<!-- <a
class="font-medium lg:font-semibold text-sm md:text-base w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
href="/github"
@@ -195,10 +191,7 @@
/>
</div> -->
<div
style="position: relative; padding-bottom: calc(50% + 42px);"
class="mx-auto w-[85%] lg:w-[70%]"
>
<div style="position: relative; padding-bottom: calc(50% + 42px);" class="mx-auto w-[85%] lg:w-[70%]">
<iframe
title="ClassroomIO Live Demo"
src="https://app.supademo.com/embed/cluw8chyy06nhq2s9m697a680"
apps/website/src/lib/components/modal.svelte
+2 -4
View File
@@ -13,10 +13,8 @@
{#if open}
<div class="relative flex items-center justify-center">
<!-- black background -->
<div class="fixed z-[3000] top-0 left-0 w-full h-full bg-black opacity-[0.7]"></div>
<div
class="fixed z-[3001] {className} w-full md:w-[30%] md:min-w-[500px] bg-white rounded-md mx-auto py-6 px-7"
>
<div class="fixed left-0 top-0 z-[3000] h-full w-full bg-black opacity-[0.7]"></div>
<div class="fixed z-[3001] {className} mx-auto w-full rounded-md bg-white px-7 py-6 md:w-[30%] md:min-w-[500px]">
{@render children?.()}
</div>
</div>
apps/website/src/lib/components/more-features.svelte
+14 -32
View File
@@ -11,15 +11,13 @@
{
icon: globe,
title: 'Customizable Landing Page',
description:
'A minimalistic landing page template out of the box to share your courses with the world',
description: 'A minimalistic landing page template out of the box to share your courses with the world',
image: '/landing-page-builder.webp'
},
{
icon: team,
title: 'Team management',
description:
'Extend invitations and manage your teaching institution seamlessly through ClassroomIO.',
description: 'Extend invitations and manage your teaching institution seamlessly through ClassroomIO.',
image: '/team-management.png'
},
// {
@@ -49,39 +47,28 @@
</script>
<!-- More Features -->
<section id="morefeatures" class="py-[10%] px-3 lg:px-0 bg-gray-50">
<section id="morefeatures" class="bg-gray-50 px-3 py-[10%] lg:px-0">
<div class="mx-0 lg:mx-[12%]">
<div class="w-full lg:w-4/5 mx-4 lg:mx-0 mb-14">
<h2 class="mt-2 text-3xl tracking-tight">
There is More...
</h2>
<p class="mt-4 text-lg text-gray-500 w-[94%] lg:w-4/5">
<div class="mx-4 mb-14 w-full lg:mx-0 lg:w-4/5">
<h2 class="mt-2 text-3xl tracking-tight">There is More...</h2>
<p class="mt-4 w-[94%] text-lg text-gray-500 lg:w-4/5">
ClassroomIO is packed with useful features while we try to make it easy to use.
</p>
</div>
<div class="flex flex-col-reverse lg:flex-row gap-3 md:gap-10" id="image-container">
<div
class="w-[95%] p-3 mt-5 overflow-auto lg:overflow-hidden lg:mt-0 lg:w-[45%] flex lg:block"
>
<div class="flex flex-col-reverse gap-3 md:gap-10 lg:flex-row" id="image-container">
<div class="mt-5 flex w-[95%] overflow-auto p-3 lg:mt-0 lg:block lg:w-[45%] lg:overflow-hidden">
{#each moreFeatures as moreFeature, i}
<button
class="p-4 rounded-md {i === selected &&
'selected'} mb-3 text-start min-w-[75vw] lg:min-w-[unset] cursor-pointer"
class="rounded-md p-4 {i === selected &&
'selected'} mb-3 min-w-[75vw] cursor-pointer text-start lg:min-w-[unset]"
onclick={() => {
selected = i;
clearInterval(interval);
}}
>
<div class="flex gap-1 items-center">
<img
loading="lazy"
width="32"
height="32"
src={moreFeature.icon}
alt=""
class="w-8"
/>
<div class="flex items-center gap-1">
<img loading="lazy" width="32" height="32" src={moreFeature.icon} alt="" class="w-8" />
<p class="text-lg">
{moreFeature.title}
</p>
@@ -100,7 +87,7 @@
loading="lazy"
id="image"
in:fly={{ x: 100, duration: 800 }}
class="w-full flex flex-col items-center"
class="flex w-full flex-col items-center"
src={moreFeatures[selected].image}
alt={moreFeatures[selected].title}
/>
@@ -112,11 +99,6 @@
<style>
#morefeatures .selected {
background-image: linear-gradient(
45deg,
rgb(253, 239, 132),
rgb(247, 198, 169),
rgb(21, 186, 196)
);
background-image: linear-gradient(45deg, rgb(253, 239, 132), rgb(247, 198, 169), rgb(21, 186, 196));
}
</style>
apps/website/src/lib/components/navigation.svelte
+12 -10
View File
@@ -16,7 +16,6 @@
import LibraryBigIcon from '@lucide/svelte/icons/library-big';
import { cn } from '@cio/ui/tools';
let { stars }: { stars: number } = $props();
type ListItemProps = HTMLAttributes<HTMLAnchorElement> & {
@@ -126,7 +125,7 @@
<p class="text-sm">
{title}
</p>
<p class="mt-1 text-xs ui:text-muted-foreground">
<p class="ui:text-muted-foreground mt-1 text-xs">
{subtitle}
</p>
</div>
@@ -136,8 +135,8 @@
</li>
{/snippet}
<section class="z-50 fixed top-0 w-full bg-white border-b">
<div class="mx-auto flex w-full items-center justify-between gap-20 py-1 lg:w-[90%] lg:px-0 px-4">
<section class="fixed top-0 z-50 w-full border-b bg-white">
<div class="mx-auto flex w-full items-center justify-between gap-20 px-4 py-1 lg:w-[90%] lg:px-0">
<a href="/" class="w-[10%]">
<div class="flex w-full items-center">
<img loading="lazy" width="28" height="28" src="/logo-512.png" alt="classroomio logo" class="w-6 md:w-7" />
@@ -151,7 +150,7 @@
<NavigationMenu.Item>
<NavigationMenu.Trigger
class={cn(
"flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100",
'flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100',
isSolutionsActive && 'bg-gray-100!'
)}
>
@@ -173,7 +172,10 @@
<NavigationMenu.Item>
<NavigationMenu.Trigger
class={cn("flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100", activeLink.startsWith('/tools') && 'bg-gray-100!')}
class={cn(
'flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100',
activeLink.startsWith('/tools') && 'bg-gray-100!'
)}
>
<a href="/tools" class="no-underline"> Free Tools </a>
</NavigationMenu.Trigger>
@@ -278,7 +280,7 @@
<li class="w-full cursor-pointer text-sm font-semibold text-gray-800 md:text-lg">
<button
class={cn(
"flex w-full items-center justify-between rounded-lg px-4 py-3 transition-all duration-200 hover:bg-gray-100",
'flex w-full items-center justify-between rounded-lg px-4 py-3 transition-all duration-200 hover:bg-gray-100',
isSolutionsActive && 'bg-gray-100'
)}
onclick={handleShowDrawer}
@@ -313,7 +315,7 @@
</a>
<a
class={cn(
"w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg",
'w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg',
activeLink.startsWith('/morefeatures') && 'bg-gray-100'
)}
onclick={() => {
@@ -325,7 +327,7 @@
</a>
<a
class={cn(
"w-full cursor-pointer rounded-xl px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg",
'w-full cursor-pointer rounded-xl px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg',
activeLink.startsWith('/pricing') && 'bg-gray-100'
)}
onclick={() => {
@@ -337,7 +339,7 @@
</a>
<a
class={cn(
"w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg",
'w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg',
activeHash.includes('morefeatures') && 'bg-gray-100'
)}
onclick={() => {
apps/website/src/lib/components/not-found.svelte
+7 -12
View File
@@ -22,18 +22,13 @@
}
</script>
<div class="{className} min-h-[80vh] w-screen flex items-center justify-center">
<div class="{className} flex min-h-[80vh] w-screen items-center justify-center">
<Empty
title={isOrg ? 'Organization doesn\'t exist!' : 'Page not found'}
description="The page you are looking for doesn't exist or has been moved. Please go back to the homepage."
icon={SearchXIcon}
variant="page"
>
<Button
onclick={handleClick}
>
Go Home
</Button>
title={isOrg ? "Organization doesn't exist!" : 'Page not found'}
description="The page you are looking for doesn't exist or has been moved. Please go back to the homepage."
icon={SearchXIcon}
variant="page"
>
<Button onclick={handleClick}>Go Home</Button>
</Empty>
</div>
apps/website/src/lib/components/page-signup-cta.svelte
+4 -11
View File
@@ -13,26 +13,19 @@
</script>
<div
class="floating grad relative mx-auto my-5 flex h-[61vh] w-full flex-col items-center justify-center px-6 py-12 text-center shadow-2xl lg:h-[50vh] lg:w-[70%] lg:rounded-3xl max-w-4xl space-y-8"
class="floating grad relative mx-auto my-5 flex h-[61vh] w-full max-w-4xl flex-col items-center justify-center space-y-8 px-6 py-12 text-center shadow-2xl lg:h-[50vh] lg:w-[70%] lg:rounded-3xl"
>
<div>
<h3
class="font-display mt-3 text-xl tracking-tight text-white lg:mt-2 lg:text-4xl max-w-2xl"
>
<h3 class="font-display mt-3 max-w-2xl text-xl tracking-tight text-white lg:mt-2 lg:text-4xl">
{header}
</h3>
<p class="mt-6 text-md text-gray-300">
<p class="text-md mt-6 text-gray-300">
{subText}
</p>
</div>
{#if demo}
<Button
variant="ghost"
data-cal-config="'layout':'month_view'"
data-cal-link="classroomio/demo"
class="bg-white!"
>
<Button variant="ghost" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo" class="bg-white!">
{btnLabel}
</Button>
{:else}
apps/website/src/lib/components/student-dashboard.svelte
+7 -11
View File
@@ -2,24 +2,20 @@
import { Badge } from '@cio/ui/base/badge';
</script>
<section id="student-dashboard" class="text-center text-white py-[10%] px-3 lg:px-0 bg-black">
<Badge class="py-2! px-4! underline text-sm!">yourorg.classroomio.com</Badge>
<h1
class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] flex flex-col items-center gap-4"
>
<section id="student-dashboard" class="bg-black px-3 py-[10%] text-center text-white lg:px-0">
<Badge class="py-2! px-4! text-sm! underline">yourorg.classroomio.com</Badge>
<h1 class="mx-auto flex flex-col items-center gap-4 text-3xl font-normal leading-[1.5] md:text-4xl lg:text-6xl">
Your Student Dashboard
</h1>
<p
class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-base tracking-wide leading-6 text-gray-400 lg:w-2/4"
>
Once you create an account, you get a dedicated dashboard where your students can access all
their courses, assignments, and more.
<p class="mx-auto mt-10 px-4 text-base leading-6 tracking-wide text-gray-400 lg:mt-6 lg:w-2/4 lg:p-0">
Once you create an account, you get a dedicated dashboard where your students can access all their courses,
assignments, and more.
</p>
<div class="relative my-5 md:my-10">
<video
class="floating w-[85%] lg:w-[70%] mx-auto rounded-lg shadow-lg"
class="floating mx-auto w-[85%] rounded-lg shadow-lg lg:w-[70%]"
autoplay
loop
muted
apps/website/src/lib/components/success.svelte
+5 -6
View File
@@ -5,13 +5,12 @@
</script>
<div
class="relative overflow-hidden mt-10 flex space-y-3 flex-col text-center items-center border border-[#D9E0F5] justify-center w-full rounded-md min-h-[300px] p-4 bg-[#F5F8FE]"
class="relative mt-10 flex min-h-[300px] w-full flex-col items-center justify-center space-y-3 overflow-hidden rounded-md border border-[#D9E0F5] bg-[#F5F8FE] p-4 text-center"
>
<div class="absolute w-20 h-20 bg-[#0233BD] -top-14 -left-9 rotate-[50deg]"></div>
<h1 class="font-bold text-3xl">Your message has been sent 🎉</h1>
<p class="w-[70%] font-normal text-sm">
We'll get back to you as soon as possible. In the meantime, Explore and enjoy features on our
website
<div class="absolute -left-9 -top-14 h-20 w-20 rotate-[50deg] bg-[#0233BD]"></div>
<h1 class="text-3xl font-bold">Your message has been sent 🎉</h1>
<p class="w-[70%] text-sm font-normal">
We'll get back to you as soon as possible. In the meantime, Explore and enjoy features on our website
</p>
<Button class="px-10 md:px-20" onclick={() => goto('/')}>Go to Home</Button>
</div>
apps/website/src/lib/components/testimonial.svelte
+5 -15
View File
@@ -3,27 +3,17 @@
import { Button } from '@cio/ui/base/button';
</script>
<section id="testimonial" class="flex flex-col items-center py-[5%] px-3 lg:px-0 space-y-2">
<h1
class="mx-auto text-3xl md:text-4xl lg:text-5xl font-normal leading-normal flex flex-col items-center gap-4 my-0"
>
<section id="testimonial" class="flex flex-col items-center space-y-2 px-3 py-[5%] lg:px-0">
<h1 class="mx-auto my-0 flex flex-col items-center gap-4 text-3xl font-normal leading-normal md:text-4xl lg:text-5xl">
Hear from Happy ClassroomIO Users
</h1>
<p
class="mx-auto text-center px-4 lg:p-0 text-base tracking-wide leading-6 ui:text-muted-foreground lg:w-2/4"
>
<p class="ui:text-muted-foreground mx-auto px-4 text-center text-base leading-6 tracking-wide lg:w-2/4 lg:p-0">
See what excites them about building and managing bootcamps with ClassroomIO.
</p>
<Button
href="/signup"
target="_blank"
rel="noopener noreferrer nofollow"
>
Sign Up for Free
</Button>
<Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Sign Up for Free</Button>
<div class="relative my-5 md:my-10 w-[85%] lg:w-[70%]">
<div class="relative my-5 w-[85%] md:my-10 lg:w-[70%]">
<SenjaEmbed id="3e847d7a-13d3-483e-8a71-5b35273dcc6c" />
</div>
</section>
apps/website/src/lib/components/timeline.svelte
+11 -11
View File
@@ -1,29 +1,29 @@
<script lang="ts">
interface Props {
items?: {
title: string;
desc: string;
}[];
title: string;
desc: string;
}[];
}
let { items = [] }: Props = $props();
</script>
<div class="relative w-fit flex justify-center space-x-8 md:space-x-10">
<div class="relative flex w-fit justify-center space-x-8 md:space-x-10">
<div
class="w-[3px] md:w-[2px] bg-blue-600 mt-10 before:bg-linear-to-t before:from-white before:to-transparent before:w-[4px] before:h-36 before:absolute before:bottom-0"
></div>
class="before:bg-linear-to-t mt-10 w-[3px] bg-blue-600 before:absolute before:bottom-0 before:h-36 before:w-[4px] before:from-white before:to-transparent md:w-[2px]"
></div>
<div class="space-y-8">
{#each items as card, index}
<div class="md:w-140 w-full border-2 rounded-lg px-4 py-8 space-y-4 bg-white">
<div class="md:w-140 w-full space-y-4 rounded-lg border-2 bg-white px-4 py-8">
<div class="flex items-center">
<div
class={`z-50 absolute -left-3 ${
class={`absolute -left-3 z-50 ${
index > 0 &&
'before:bg-linear-to-t before:from-white before:to-transparent before:w-[4px] before:h-36 before:absolute before:-top-36'
} flex items-center justify-center w-7 h-7 bg-blue-100 rounded-full`}
'before:bg-linear-to-t before:absolute before:-top-36 before:h-36 before:w-[4px] before:from-white before:to-transparent'
} flex h-7 w-7 items-center justify-center rounded-full bg-blue-100`}
>
<div class="w-4 h-4 bg-blue-800 rounded-full z-50"></div>
<div class="z-50 h-4 w-4 rounded-full bg-blue-800"></div>
</div>
<h1 class="text-2xl font-bold text-blue-800">{card.title}</h1>
</div>
apps/website/src/lib/components/upload-widget.svelte
+2 -9
View File
@@ -10,12 +10,7 @@
labelClassName?: string;
}
let {
imageURL = $bindable(''),
label = '',
isRequired = false,
labelClassName = ''
}: Props = $props();
let { imageURL = $bindable(''), label = '', isRequired = false, labelClassName = '' }: Props = $props();
let isUploading = false;
let fileInput: HTMLInputElement = $state();
@@ -98,9 +93,7 @@
{:else}
<div class="space-y-4">
<Copy size={24} class="mx-auto" />
<p class="text-center text-sm text-gray-500 my-2">
Max file size: 2MB, accepted: JPEG, PNG, GIF, WebP only
</p>
<p class="my-2 text-center text-sm text-gray-500">Max file size: 2MB, accepted: JPEG, PNG, GIF, WebP only</p>
</div>
{/if}
</div>
apps/website/src/lib/features/contact/feedback-form.svelte
+3 -9
View File
@@ -49,9 +49,9 @@
{#if sent}
<Success />
{:else}
<div class="w-full my-10 space-y-5">
<div class="my-10 w-full space-y-5">
<Field.Group>
<div class="flex flex-col md:flex-row gap-10">
<div class="flex flex-col gap-10 md:flex-row">
<Field.Field class="w-full">
<Field.Label for="feedback-name">Your Name</Field.Label>
<Input id="feedback-name" bind:value={name} required />
@@ -75,13 +75,7 @@
</Field.Field>
{/if}
</Field.Group>
<Button
onclick={handleClick}
disabled={isLoading}
loading={isLoading}
>
Submit Feedback
</Button>
<Button onclick={handleClick} disabled={isLoading} loading={isLoading}>Submit Feedback</Button>
</div>
{/if}
</div>
apps/website/src/lib/features/contact/help-form.svelte
+3 -9
View File
@@ -49,9 +49,9 @@
{#if sent}
<Success />
{:else}
<div class="w-full my-10 space-y-5">
<div class="my-10 w-full space-y-5">
<Field.Group>
<div class="flex flex-col md:flex-row gap-10">
<div class="flex flex-col gap-10 md:flex-row">
<Field.Field class="w-full">
<Field.Label for="help-name">Your Name</Field.Label>
<Input id="help-name" bind:value={name} required />
@@ -75,13 +75,7 @@
</Field.Field>
{/if}
</Field.Group>
<Button
onclick={handleClick}
disabled={isLoading}
loading={isLoading}
>
Submit Request
</Button>
<Button onclick={handleClick} disabled={isLoading} loading={isLoading}>Submit Request</Button>
</div>
{/if}
</div>
apps/website/src/lib/features/tools/progress/avatar.svelte
+4 -8
View File
@@ -45,7 +45,7 @@
</Dialog.Header>
<!-- map for each avatar -->
<div class="flex flex-wrap justify-evenly gap-y-3 mt-3">
<div class="mt-3 flex flex-wrap justify-evenly gap-y-3">
{#each avatars as avatar, index}
<button
onclick={() => {
@@ -59,21 +59,17 @@
hoveredIndex = null;
isAddIcon = false;
}}
class="relative w-[17%] flex justify-center items-center shadow-sm rounded-full hover:scale-110 transition-all duration-300"
class="relative flex w-[17%] items-center justify-center rounded-full shadow-sm transition-all duration-300 hover:scale-110"
>
<!-- + icon overlay -->
{#if isAddIcon && hoveredIndex === index}
<div
class="w-full h-full flex justify-center items-center bg-white border absolute rounded-full opacity-[0.7] blur-md"
class="absolute flex h-full w-full items-center justify-center rounded-full border bg-white opacity-[0.7] blur-md"
></div>
<img src="/free-tools/progress-report/hover-plus-icon.svg" alt="" class="absolute" />
{/if}
<!-- avatar -->
<img
src="https://assets.cdn.clsrio.com/progress-report/avatar/{avatar.src}.svg"
alt=""
class="w-full"
/>
<img src="https://assets.cdn.clsrio.com/progress-report/avatar/{avatar.src}.svg" alt="" class="w-full" />
</button>
{/each}
</div>
apps/website/src/lib/features/tools/progress/background.svelte
+3 -9
View File
@@ -58,21 +58,15 @@
</Dialog.Header>
<!-- -->
<div
class="flex flex-wrap justify-between gap-y-3 mt-3 overflow-y-auto overflow-x-hidden h-[85%]"
>
<div class="mt-3 flex h-[85%] flex-wrap justify-between gap-y-3 overflow-y-auto overflow-x-hidden">
{#each backgrounds as background}
<button
onclick={() => {
selectBackground(background);
}}
class="flex w-[30%] items-center shadow-sm hover:scale-110 transition-all duration-300"
class="flex w-[30%] items-center shadow-sm transition-all duration-300 hover:scale-110"
>
<img
src="https://assets.cdn.clsrio.com/progress-report/backgrounds/{background.src}.webp"
alt=""
class=""
/>
<img src="https://assets.cdn.clsrio.com/progress-report/backgrounds/{background.src}.webp" alt="" class="" />
</button>
{/each}
</div>
apps/website/src/lib/features/tools/progress/mood.svelte
+3 -3
View File
@@ -72,15 +72,15 @@
</Dialog.Header>
<!-- mapping -->
<div class="flex flex-wrap justify-between gap-y-3 mt-3">
<div class="mt-3 flex flex-wrap justify-between gap-y-3">
{#each moods as mood}
<button
onclick={() => {
selectMood(mood);
}}
class="flex gap-3 items-center shadow-sm rounded-full px-4 py-1 bg-[#F1F6FF] hover:bg-[#0233BD] hover:text-white transition-all duration-700"
class="flex items-center gap-3 rounded-full bg-[#F1F6FF] px-4 py-1 shadow-sm transition-all duration-700 hover:bg-[#0233BD] hover:text-white"
>
<p class="text-xs md:text-sm font-semibold">{mood.text}</p>
<p class="text-xs font-semibold md:text-sm">{mood.text}</p>
<img
src="https://assets.cdn.clsrio.com/progress-report/emojis/{mood.iconSrc}.png"
alt={mood.text}
apps/website/src/lib/features/tools/progress/report.svelte
+24 -25
View File
@@ -30,13 +30,15 @@
nodeStore.set(node);
});
let rootBgImage = $derived(`https://assets.cdn.clsrio.com/progress-report/backgrounds/${
$htmlBody.background || 'blue_tetiary_background'
}.webp`);
let rootBgImage = $derived(
`https://assets.cdn.clsrio.com/progress-report/backgrounds/${
$htmlBody.background || 'blue_tetiary_background'
}.webp`
);
</script>
<div
class="h-full min-h-[500px] max-h-[500px] md:h-[60vh] w-full border relative flex items-center justify-center"
class="relative flex h-full max-h-[500px] min-h-[500px] w-full items-center justify-center border md:h-[60vh]"
style={`font-family: "Space Grotesk", sans-serif; background-image: url('${rootBgImage}'); background-size: cover; background-repeat: no-repeat`}
bind:this={node}
>
@@ -46,7 +48,7 @@
<button
type="button"
onclick={() => ($openModal.fullscreen = !$openModal.fullscreen)}
class="absolute top-4 right-4 p-1.5 rounded-full hover:scale-90 transition-all duration-300 bg-white"
class="absolute right-4 top-4 rounded-full bg-white p-1.5 transition-all duration-300 hover:scale-90"
>
<img src="/free-tools/progress-report/close-icon.svg" alt="" class="" />
</button>
@@ -54,7 +56,7 @@
<button
type="button"
onclick={() => ($openModal.fullscreen = !$openModal.fullscreen)}
class="absolute top-4 right-4 w-7 hover:scale-90 transition-all duration-300"
class="absolute right-4 top-4 w-7 transition-all duration-300 hover:scale-90"
>
<img src="/free-tools/progress-report/full-screen-icon.svg" alt="" class="" />
</button>
@@ -64,34 +66,31 @@
<div class="mt-20">
<!-- using both md & lg for the width here because the lib doesn't consider md to be medium screens and above, using md alone will make the output break on desktop so i had to also specify for large screens -->
<div
class="rounded-lg shadow-md bg-white border-4 border-gray-100 z-20 mx-auto flex justify-center items-center w-[16rem] h-[16rem]"
class="z-20 mx-auto flex h-[16rem] w-[16rem] items-center justify-center rounded-lg border-4 border-gray-100 bg-white shadow-md"
>
<div class="relative w-full h-full flex flex-col justify-center gap-3 items-center px-2">
<div class="relative flex h-full w-full flex-col items-center justify-center gap-3 px-2">
<!-- avatar -->
<img
src={`https://assets.cdn.clsrio.com/progress-report/avatar/${
$htmlBody.avatar || 'avatar_a'
}.svg`}
src={`https://assets.cdn.clsrio.com/progress-report/avatar/${$htmlBody.avatar || 'avatar_a'}.svg`}
alt=""
class="absolute top-0 w-[25%] h-[25%] ml-2 -mt-[2.2rem]"
class="absolute top-0 -mt-[2.2rem] ml-2 h-[25%] w-[25%]"
/>
<!-- mood -->
{#if $htmlBody.name || $htmlBody.mood.text}
<div
style="background-color: {$backgroundColor}; color: white; display: flex;"
class="px-3 py-0.5 border border-[#EDEDED] rounded-2xl mt-6 md:mt-3 font-semibold text-[10px] md:text-[0.7rem] flex items-center justify-between"
class="mt-6 flex items-center justify-between rounded-2xl border border-[#EDEDED] px-3 py-0.5 text-[10px] font-semibold md:mt-3 md:text-[0.7rem]"
>
<span class="mr-0.5">{$htmlBody.name}</span>
{#if $htmlBody.mood.text}
<span class="flex gap-1 items-center">
<p class="font-semibold text-[10px] md:text-[0.7rem]">
<span class="flex items-center gap-1">
<p class="text-[10px] font-semibold md:text-[0.7rem]">
is {$htmlBody.mood.text}
</p>
<img
src="https://assets.cdn.clsrio.com/progress-report/emojis/{$htmlBody.mood
.iconSrc}.png"
src="https://assets.cdn.clsrio.com/progress-report/emojis/{$htmlBody.mood.iconSrc}.png"
alt={$htmlBody.mood.text}
class="w-3"
/>
@@ -101,7 +100,7 @@
{:else}
<p
style="background-color: {$backgroundColor}"
class="px-3 py-0.5 border border-[#EDEDED] text-white rounded-2xl mt-3 font-medium text-[9px]"
class="mt-3 rounded-2xl border border-[#EDEDED] px-3 py-0.5 text-[9px] font-medium text-white"
>
Add your name
</p>
@@ -109,27 +108,27 @@
<!-- learning -->
<span
class="w-full md:my-2 p-1 overflow-hidden text-[0.7rem] md:text-[0.8rem] font-normal text-center outline-none h-[10vh] md:h-[12vh]"
class="h-[10vh] w-full overflow-hidden p-1 text-center text-[0.7rem] font-normal outline-none md:my-2 md:h-[12vh] md:text-[0.8rem]"
>
{$htmlBody.learning}
</span>
<!-- progress -->
<div class="flex flex-col justify-center items-center mb-2 md:mb-0">
<div class="border border-[#d9e0f5] w-full h-4 rounded-full p-0.5 bg-[#f1f6ff]">
<div class="mb-2 flex flex-col items-center justify-center md:mb-0">
<div class="h-4 w-full rounded-full border border-[#d9e0f5] bg-[#f1f6ff] p-0.5">
<div
class="progress-range rounded-full w-full h-full"
class="progress-range h-full w-full rounded-full"
style="background: {$backgroundColor}; width: {$htmlBody.progress}%"
></div>
></div>
</div>
<p class="text-[12px] font-semibold mt-1">Progress Achieved: {$htmlBody.progress}%</p>
<p class="mt-1 text-[12px] font-semibold">Progress Achieved: {$htmlBody.progress}%</p>
</div>
</div>
</div>
<div
style="display: flex;"
class="border mt-20 bottom-5 w-[50%] mx-auto flex gap-1 items-center justify-center bg-white rounded-md px-2 py-1"
class="bottom-5 mx-auto mt-20 flex w-[50%] items-center justify-center gap-1 rounded-md border bg-white px-2 py-1"
>
<img src="/logo-192.png" alt="classroomio logo" class="w-4" />
<p class="text-[10px] font-bold">ClassroomIO.com</p>
apps/website/src/lib/features/tools/stopwatch/timer.svelte
+6 -9
View File
@@ -29,29 +29,26 @@
<div transition:fly={{ y: 100, delay: 0, easing: sineInOut }}>
<div class="px-6 pt-8 text-center">
<button
type="button"
onclick={resetTimer}
class="text-[10px] text-[#656565] font-semibold uppercase underline"
<button type="button" onclick={resetTimer} class="text-[10px] font-semibold uppercase text-[#656565] underline"
>set timer for another activity</button
>
<button
class="border mx-auto mt-7 mb-3 px-2 py-0.5 rounded-full flex items-center gap-1 text-sm text-[#656565] font-semibold border-[#C2D2FF] bg-[#DCE5FF]"
class="mx-auto mb-3 mt-7 flex items-center gap-1 rounded-full border border-[#C2D2FF] bg-[#DCE5FF] px-2 py-0.5 text-sm font-semibold text-[#656565]"
>
{activityName}:
<span class="text-[#0233BD]">{formattedTime}</span>
</button>
<!-- countdown -->
<h1 class="text-[#040F2D] mb-14 text-6xl font-bold">{displayTime}</h1>
<h1 class="mb-14 text-6xl font-bold text-[#040F2D]">{displayTime}</h1>
</div>
<div class="flex">
<button
type="button"
onclick={toggleSound}
class="bg-[#F7F7F7] w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10 rounded-bl-md hover:bg-[#F1F6FF] transition-all duration-500"
class="flex w-[34%] flex-col items-center gap-1 rounded-bl-md bg-[#F7F7F7] py-5 text-[10px] uppercase transition-all duration-500 hover:bg-[#F1F6FF] md:py-10"
>
{#if soundOn}
<img src="/free-tools/stopwatch/speaker-icon.svg" alt="" class="w-7 md:w-12" />
@@ -63,7 +60,7 @@
<button
type="button"
onclick={toggleTimer}
class="bg-[#0F62FE] text-white w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10"
class="flex w-[34%] flex-col items-center gap-1 bg-[#0F62FE] py-5 text-[10px] uppercase text-white md:py-10"
>
{#if isPaused}
<img src="/free-tools/stopwatch/play-icon.svg" alt="" class="w-7 md:w-12" />
@@ -75,7 +72,7 @@
<button
type="button"
onclick={restartTimer}
class="bg-[#F7F7F7] w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10 rounded-br-md hover:bg-[#F1F6FF] transition-all duration-500"
class="flex w-[34%] flex-col items-center gap-1 rounded-br-md bg-[#F7F7F7] py-5 text-[10px] uppercase transition-all duration-500 hover:bg-[#F1F6FF] md:py-10"
>
<img src="/free-tools/stopwatch/reset-icon.svg" alt="" class="w-7 md:w-12" />
restart</button
apps/website/src/lib/features/tools/tic-tac-toe/board.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
<tr>
{#each row as column, columnIndex}
<td
class="cursor-pointer text-center h-25 w-[1.5em] border-r-10 border-b-10 border-white last:border-r-0"
class="h-25 border-r-10 border-b-10 w-[1.5em] cursor-pointer border-white text-center last:border-r-0"
onclick={() => {
game = game.click(rowIndex, columnIndex);
}}
apps/website/src/lib/features/tools/tic-tac-toe/board.ts
+1 -5
View File
@@ -79,11 +79,7 @@ function getWinner(board: string[][]) {
// check columns
for (let column = 0; column < 3; column++) {
if (
board[0][column] === board[1][column] &&
board[0][column] === board[2][column] &&
board[0][column]
) {
if (board[0][column] === board[1][column] && board[0][column] === board[2][column] && board[0][column]) {
return { symbol: board[0][column], direction: 'vertical', column };
}
}
apps/website/src/lib/features/tools/tic-tac-toe/winning-line.svelte
+3 -5
View File
@@ -29,13 +29,11 @@
{#if winner}
<div
transition:fade={{ delay: 500, duration: 2 }}
class="winning-line absolute bg-[#ffc300] z-[100]"
class="winning-line absolute z-[100] bg-[#ffc300]"
class:horizontal-line={winner.direction === 'horizontal'}
class:vertical-line={winner.direction === 'vertical'}
class:diagonal-line-1={winner.direction === 'diagonal' &&
winner.diagonal === 'top-left-to-bottom-right'}
class:diagonal-line-2={winner.direction === 'diagonal' &&
winner.diagonal === 'top-right-to-bottom-left'}
class:diagonal-line-1={winner.direction === 'diagonal' && winner.diagonal === 'top-left-to-bottom-right'}
class:diagonal-line-2={winner.direction === 'diagonal' && winner.diagonal === 'top-right-to-bottom-left'}
></div>
{/if}
apps/website/src/lib/utils/constants/tools.ts
+2 -4
View File
@@ -45,8 +45,7 @@ export const tools: Tool[] = [
{
src: '/free-tools/tic-tac.svg',
title: 'Tic tac toe game',
subText:
"More than just a game; it's an educational tool that teaches pattern recognition, and decision-making.",
subText: "More than just a game; it's an educational tool that teaches pattern recognition, and decision-making.",
slug: 'tic-tac-toe',
show: true,
showFeature: true
@@ -62,8 +61,7 @@ export const tools: Tool[] = [
{
src: '/free-tools/jamb.svg',
title: 'JAMB Practice tool',
subText:
'Prepare for JAMB with past questions and instant feedback for effective exam readiness',
subText: 'Prepare for JAMB with past questions and instant feedback for effective exam readiness',
slug: 'jamb',
show: false,
showFeature: false