feat: [lw] free tools (#297)
* checkpoint * checkpoint * feat: Create free tools page * responsiveness fix * rename free-tools to tools * add slug * feat: Random name picker * quick fix * PR Fixes * PR Fixes * - adjustments * update env example * remove base url * remove base url in .env.example * fix type errors * add og images * add signup cta to /tools layout * update cta * add socials avatar * add meta tags * feat: tic tac toe (#307) * Feat: tic tac toe * PR Adjustments * feat: Implement Timed Activity Tool (#316) * chore: update verification email content * chore: landing page improvements * feat: grade exercise with AI (#296) * working on the UI of the grading * working on the grading function of the radio and checkboxes * ai grading fully implemented with dummy functions for generating scores * working on the openai response * working on the openai response * finished with the ai_grading * finished with the ai_grading * creating new migration file * working on reviews * updated the translations * improvements --------- Co-authored-by: Rotimi Best <best@classroomio.com> * feat: selfhost tinymce * fix: logo resolution error in manifest.json * feat: move from gpt3.5 to gpt-4o * feat: customize the LMS from dashboard (#304) * Done with the customization of the LMS task * generated custom_lms migration file * updated the migration file * copy improvements * update wording * made updates based on reviews,i hope i didnt miss anything * updated the translations and migration files * refactoring * disabled improvements for apps * more improvements * more custom improvements * pr refactoring --------- Co-authored-by: Rotimi Best <best@classroomio.com> * fix: CustomizeLMS not found * fix: CustomizeLms wrong path * setup * docs: update short hero tagline * debug: courses not showing on vercel * more debugging * i think this fixes it * fix: phew, clean up debug cause it works * fix: move RBS into coursecontainer on marks page * chore: cleaner way to implement redirect if role permission denied * docs: update tagline * fix: delete /org/# route * checkpoint * add reusable header component * fix: empty lesson title bug (#314) * finished the lesson title bug * made chnages based on review * Update +page.svelte --------- Co-authored-by: Rotimi Best <best@classroomio.com> * feat: add sound cdn * remove console.log * feat: course types - self paced and live class (#309) * working on the course type * trying to mark it persist * almost done here * fixed sendig emtpy options bug * created migration file * created migration file * made updates based on PR review * merge * update course type card * add redirect logic with classroomio.com/new * make new course modal only open/close with url * feat: page active state (#315) * finished the active link state * updated the active link state based on review * simplify code --------- Co-authored-by: Rotimi Best <best@classroomio.com> * add type to course card --------- Co-authored-by: Rotimi Best <best@classroomio.com> * general improvements to free tools * fix timer and styling issues --------- Co-authored-by: Rotimi Best <best@classroomio.com> Co-authored-by: Em_Dev <Chifez1@gmail.com> * update tagline for tools page * feat: Add Free Section to Landing Page (#332) * feat: Add Free Section to Landing Page * PR Fixes * refactor * PR Fixes * restructure * improve cursor UX --------- Co-authored-by: Rotimi Best <best@classroomio.com> * feat: Progress Report Tool (#329) * checkpoint * fix: corrections * finalization * improve ux of progress tool * more styling improvements * PR Fixes * PR Fixes * fix: mood bg on report * fix: generate exercise with AI bug (#331) * fix: enable lesson cascade delete (#335) * styling improvements * chore: hide course grading toggle in settings (#338) * feat: reset select in community page (#339) * Feat: Add Reset for comminity dropdown * - add translation * refactor --------- Co-authored-by: Rotimi Best <best@classroomio.com> * fix: prevent hypen at start or end of organzation or domain name (#340) * fix: adding hypen to start or end of org or domain name * fix: add org name validation to settings page * chore: remove unnecessary variable use * chore: remove error reset function * Update OrgSettings.svelte --------- Co-authored-by: Rotimi Best <best@classroomio.com> * fix: full screen * fix: pnpm version error & add top level .nvmrc (#343) * update name of tool * chore: add translations for validation messages (#345) * chore: add validation texts to locale file * feat: switch all validations from plain text to use i18n locale * feat: switch review form validations from plain text to use locale file * run translation script * chore: add translations for validation messages (#345) (#347) * chore: add translations for validation messages (#345) * chore: add validation texts to locale file * feat: switch all validations from plain text to use i18n locale * feat: switch review form validations from plain text to use locale file * run translation script --------- Co-authored-by: Iniubong Obonguko <iniubongobonguko2018@gmail.com> * PR Fixes * Bug fixes on mobile * Final bug fix * code improvements * PR Fixes * Merge Fix * PR Fixes * fix: width * code cleanup * feat: Promodo Tool (tracks tim spent) * feat: Pomodoro timer (without tracking feature) * fix: - change pause functionality to next - correct spelling of pomodoro * fix: pomodoro logo rename * styling improvements --------- Co-authored-by: Rotimi Best <best@classroomio.com> Co-authored-by: Em_Dev <Chifez1@gmail.com> Co-authored-by: Iniubong Obonguko <iniubongobonguko2018+github@gmail.com> Co-authored-by: Iniubong Obonguko <iniubongobonguko2018@gmail.com> Co-authored-by: Aditya Deshlahre <132184385+adityadeshlahre@users.noreply.github.com> * feat: Implement Bottom menu (#341) * popup logic done * popup UI first phase done * finished the menupop up for both lms and admin * finished the menupop up for both lms and admin * done * cleanup * fixed popover position * still working on the routing * i think that is it for the day * updated the menupopup currentorgdomain * rename popup to bottomMenu * refactoring --------- Co-authored-by: Rotimi Best <best@classroomio.com> * remove logout * change tagline * feat: Store todolist to localStorage (#375) * feat: Save todo to localStorage * remove fly animation to todos * feat: Progress Report avatar update (#376) * feat: Reorder Avatar list * quick fix * change avatar url * more improvements * quick background fix * fix: white background * body background fix * update lock --------- Co-authored-by: Rotimi Best <best@classroomio.com> Co-authored-by: Em_Dev <Chifez1@gmail.com> Co-authored-by: Iniubong Obonguko <iniubongobonguko2018+github@gmail.com> Co-authored-by: Iniubong Obonguko <iniubongobonguko2018@gmail.com> Co-authored-by: Aditya Deshlahre <132184385+adityadeshlahre@users.noreply.github.com>
This commit is contained in:
Adeyemi Adetunji
co-authored by
Rotimi Best
Em_Dev
Iniubong Obonguko
Iniubong Obonguko
Aditya Deshlahre
Rotimi Best
Em_Dev
Iniubong Obonguko
Iniubong Obonguko
Aditya Deshlahre
parent
91bd9d4414
commit
9c066c79be
@@ -106,6 +106,14 @@ li {
|
||||
background-image: url('/hero-bg.svg');
|
||||
}
|
||||
|
||||
.tools-hero-bg {
|
||||
background-image: url('/tools-hero-bg.svg');
|
||||
}
|
||||
@media (min-width: 760px) {
|
||||
.tools-hero-bg {
|
||||
min-height: 350px;
|
||||
}
|
||||
}
|
||||
.cio-bg-blue {
|
||||
background: rgb(2, 51, 189);
|
||||
background-size: cover;
|
||||
|
||||
@@ -24,8 +24,7 @@
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="1920" />
|
||||
<meta property="og:image:height" content="1080" />
|
||||
<meta property="og:image:secure_url" itemprop="image"
|
||||
content="https://classroomio.com/classroomio-opengraph-image.png" />
|
||||
<meta property="og:image:secure_url" itemprop="image" content="https://brand.cdn.clsrio.com/og/classroomio-og.png" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:domain" content="classroomio.com" />
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<p class="lg:text-base mb-5 mr-2 text-sm leading-7 tracking-wide text-gray-600 lg:leading-7">
|
||||
Launch Your Online Bootcamp In Minutes
|
||||
<br />
|
||||
The easiest way to launch and scale your online bootcamp
|
||||
ClassroomIO is the easiest way to grow your teaching business.
|
||||
</p>
|
||||
<!-- <a
|
||||
href="https://www.producthunt.com/posts/classroomio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-classroomio"
|
||||
|
||||
@@ -1,193 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export { before, after, offset, overlay, contain, hideOnSlide };
|
||||
|
||||
let hideOnSlide = true,
|
||||
imgOffset = null,
|
||||
sliding = false,
|
||||
contain = false,
|
||||
overlay = true,
|
||||
offset = 0.5,
|
||||
before = '',
|
||||
after = '',
|
||||
img;
|
||||
|
||||
function resize(e) {
|
||||
imgOffset = (e.type === 'load' ? e.target : img).getBoundingClientRect();
|
||||
w = imgOffset && imgOffset.width;
|
||||
h = imgOffset && imgOffset.height;
|
||||
style = contain ? `width:100%;height:100%;` : `width:${w}px;height:${h}px;`;
|
||||
}
|
||||
|
||||
function move(e) {
|
||||
if (sliding && imgOffset) {
|
||||
let x = (e.touches ? e.touches[0].pageX : e.pageX) - imgOffset.left;
|
||||
x = x < 0 ? 0 : x > w ? w : x;
|
||||
offset = x / w;
|
||||
}
|
||||
}
|
||||
|
||||
function start(e) {
|
||||
sliding = true;
|
||||
move(e);
|
||||
}
|
||||
|
||||
function end() {
|
||||
sliding = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
resize({});
|
||||
});
|
||||
|
||||
$: w = imgOffset && imgOffset.width;
|
||||
$: h = imgOffset && imgOffset.height;
|
||||
$: x = w * offset;
|
||||
$: opacity = hideOnSlide && sliding ? 0 : 1;
|
||||
$: style = contain ? `width:100%;height:100%;` : `width:${w}px;height:${h}px;`;
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize={resize} />
|
||||
|
||||
<button
|
||||
class="container floating w-[85%] lg:w-[70%] h-full mx-auto rounded-md"
|
||||
{style}
|
||||
on:touchstart={start}
|
||||
on:mousedown={start}
|
||||
on:touchmove={move}
|
||||
on:touchend={end}
|
||||
on:mousemove={move}
|
||||
on:mouseup={end}
|
||||
>
|
||||
<img
|
||||
loading="lazy"
|
||||
bind:this={img}
|
||||
src={after}
|
||||
alt="after"
|
||||
on:mousedown|preventDefault
|
||||
on:load={resize}
|
||||
{style}
|
||||
/>
|
||||
<img
|
||||
loading="lazy"
|
||||
src={before}
|
||||
alt="before"
|
||||
on:mousedown|preventDefault
|
||||
style="{style}clip:rect(0, {x}px, {h}px, 0);"
|
||||
/>
|
||||
{#if overlay}
|
||||
<div class="overlay" style="opacity:{opacity}" />
|
||||
{/if}
|
||||
<div class="before-label" style="opacity:{opacity}">
|
||||
<slot name="before" />
|
||||
</div>
|
||||
<div class="after-label" style="opacity:{opacity}">
|
||||
<slot name="after" />
|
||||
</div>
|
||||
<div class="handle" style="left: calc({offset * 100}% - 20px)">
|
||||
<div class="arrow-left" />
|
||||
<div class="arrow-right" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
.container img {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
user-select: none;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
.overlay {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
z-index: 25;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: opacity 0.5s;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.before-label,
|
||||
.after-label {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 25;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
}
|
||||
.before-label {
|
||||
left: 0;
|
||||
}
|
||||
.after-label {
|
||||
right: 0;
|
||||
}
|
||||
.container:hover > .overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
.handle {
|
||||
z-index: 30;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: move;
|
||||
background: none;
|
||||
margin-top: -4px;
|
||||
margin-left: -4px;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
border-radius: 50px;
|
||||
top: calc(50% - 20px);
|
||||
border: 4px solid white;
|
||||
}
|
||||
.handle:before,
|
||||
.handle:after {
|
||||
content: '';
|
||||
height: 9999px;
|
||||
position: absolute;
|
||||
left: calc(50% - 2px);
|
||||
border: 2px solid white;
|
||||
}
|
||||
.handle:before {
|
||||
top: 40px;
|
||||
}
|
||||
.handle:after {
|
||||
bottom: 40px;
|
||||
}
|
||||
.arrow-right,
|
||||
.arrow-left {
|
||||
width: 0;
|
||||
height: 0;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
}
|
||||
.arrow-right {
|
||||
left: 17px;
|
||||
bottom: 13px;
|
||||
border-left: 10px solid white;
|
||||
}
|
||||
.arrow-left {
|
||||
left: 5px;
|
||||
top: 7px;
|
||||
border-right: 10px solid white;
|
||||
}
|
||||
|
||||
img,
|
||||
.overlay,
|
||||
.container {
|
||||
max-height: 500px;
|
||||
}
|
||||
</style>
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import Section from './Section.svelte';
|
||||
import Section from './CoreFeatureSection.svelte';
|
||||
import { env } from '$env/dynamic/public';
|
||||
</script>
|
||||
|
||||
+42
@@ -2,6 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { folder, globe, team, transcription } from '$lib/emojis';
|
||||
import { tools } from '$lib/utils/constants/tools';
|
||||
|
||||
let selected = 0;
|
||||
let interval: NodeJS.Timer;
|
||||
@@ -36,6 +37,8 @@
|
||||
}
|
||||
];
|
||||
|
||||
const freeTools = tools.filter((item) => item.showFeature);
|
||||
|
||||
onMount(() => {
|
||||
if (window.innerWidth > 768) {
|
||||
interval = setInterval(() => {
|
||||
@@ -104,6 +107,45 @@
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- free tools section -->
|
||||
<div>
|
||||
<div class="flex justify-evenly gap-y-8 flex-wrap w-full mt-10 mx-auto">
|
||||
<div class="text-center">
|
||||
<h1 class="text-3xl md:text-5xl font-bold">
|
||||
Play With Our <span class="text-[#0233BD]">Free Tools</span>
|
||||
</h1>
|
||||
<p class="text-sm md:text-base text-[#334155] md:w-[65%] mt-5 md:mt-10 mx-auto">
|
||||
Innovative tools to help you aid you example preparation, as well as making learning
|
||||
more fun for students and educator looking for engaging resources.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#each freeTools as tool}
|
||||
<a
|
||||
class="w-full flex flex-col gap-3 max-w-[400px] md:max-w-[300px] mt-5 p-5 border rounded-md bg-white shadow-sm hover:scale-95 transition-all ease-in-out cursor-pointer"
|
||||
href="/tools/{tool.slug}"
|
||||
>
|
||||
<img class="w-[30%] rounded-full border border-[#EAEAEA]" src={tool.src} alt="" />
|
||||
<div class="rounded-r-md p-3">
|
||||
<h1 class="font-bold text-sm md:text-base">{tool.title}</h1>
|
||||
<p class="text-xs text-gray-600 mt-1.5">
|
||||
{tool.subText}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex justify-center items-center mt-20">
|
||||
<a
|
||||
class="md:text-base w-full md:max-w-[300px] max-w-[400px] rounded-md bg-blue-700 px-6 py-3 lg:px-6 lg:py-3 text-sm font-medium text-white text-center transition-all delay-100 hover:bg-blue-800 hover:shadow-xl hover:scale-95 lg:font-semibold cursor-pointer"
|
||||
href="/tools"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
More Tools
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
<script>
|
||||
export let className = '';
|
||||
export let open = false;
|
||||
</script>
|
||||
|
||||
{#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"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -52,7 +52,7 @@
|
||||
<div
|
||||
class="flex w-full justify-between items-center py-6 border-b-[1px] md:px-12 px-5 fixed top-0 z-[3000] filter backdrop-blur-xl shadow-sm bg-white"
|
||||
>
|
||||
<a href="/" class="w-[20%]">
|
||||
<a href="/" class="w-[10%]">
|
||||
<div class="flex items-center w-full">
|
||||
<img
|
||||
loading="lazy"
|
||||
@@ -66,7 +66,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<nav class="w-[40%] hidden md:hidden lg:block">
|
||||
<nav class="w-[50%] hidden md:hidden lg:block">
|
||||
<ul class="flex items-center justify-between w-full gap-2">
|
||||
<li class="text-gray-800 font-semibold text-sm cursor-pointer relative">
|
||||
<button
|
||||
@@ -111,20 +111,20 @@
|
||||
{/if}
|
||||
</li>
|
||||
<a
|
||||
href="/pricing"
|
||||
href="/tools"
|
||||
class="text-gray-800 font-semibold text-sm cursor-pointer"
|
||||
class:active={activeLink.startsWith('/pricing')}
|
||||
class:active={activeLink.startsWith('/tools')}
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Pricing</li>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Free Tools</li>
|
||||
</a>
|
||||
<a
|
||||
<!-- <a
|
||||
href="/docs"
|
||||
target="_blank"
|
||||
class="text-gray-800 font-semibold text-sm cursor-pointer"
|
||||
class:active={activeLink.startsWith('/docs')}
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Docs</li>
|
||||
</a>
|
||||
</a> -->
|
||||
|
||||
<a
|
||||
href="/blog"
|
||||
@@ -133,6 +133,13 @@
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Blog</li>
|
||||
</a>
|
||||
<a
|
||||
href="/pricing"
|
||||
class="text-gray-800 font-semibold text-sm cursor-pointer"
|
||||
class:active={activeLink.startsWith('/pricing')}
|
||||
>
|
||||
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Pricing</li>
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -214,17 +221,15 @@
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
<!-- Free Tools -->
|
||||
<a
|
||||
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full"
|
||||
on:click={() => {
|
||||
handleShowNav();
|
||||
}}
|
||||
href="/pricing"
|
||||
class:active={activeLink.startsWith('/pricing')}
|
||||
on:click={handleShowNav}
|
||||
href="/tools"
|
||||
>
|
||||
<li>Pricing</li>
|
||||
<li>Free Tools</li>
|
||||
</a>
|
||||
<a
|
||||
<!-- <a
|
||||
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
|
||||
on:click={() => {
|
||||
handleShowNav();
|
||||
@@ -234,7 +239,7 @@
|
||||
target="_blank"
|
||||
>
|
||||
<li>Docs</li>
|
||||
</a>
|
||||
</a> -->
|
||||
<a
|
||||
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
|
||||
on:click={() => {
|
||||
@@ -245,6 +250,17 @@
|
||||
>
|
||||
<li>Blog</li>
|
||||
</a>
|
||||
<!-- Pricing -->
|
||||
<a
|
||||
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full"
|
||||
on:click={() => {
|
||||
handleShowNav();
|
||||
}}
|
||||
href="/pricing"
|
||||
class:active={activeLink.startsWith('/pricing')}
|
||||
>
|
||||
<li>Pricing</li>
|
||||
</a>
|
||||
<a
|
||||
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
|
||||
on:click={() => {
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let className = '';
|
||||
</script>
|
||||
|
||||
<header class="tools-hero-bg text-center py-14 {className} border-b border-slate-100 bg-white">
|
||||
<slot />
|
||||
</header>
|
||||
@@ -0,0 +1,71 @@
|
||||
interface Tool {
|
||||
src: string;
|
||||
title: string;
|
||||
subText: string;
|
||||
slug: string;
|
||||
show: boolean;
|
||||
showFeature: boolean;
|
||||
}
|
||||
|
||||
export const tools: Tool[] = [
|
||||
{
|
||||
src: '/free-tools/progress-report.svg',
|
||||
title: 'Progress Report',
|
||||
subText: 'Monitor your progress with a system to check and share your progress with others',
|
||||
slug: 'progress',
|
||||
show: true,
|
||||
showFeature: true
|
||||
},
|
||||
{
|
||||
src: '/free-tools/pomodoro.svg',
|
||||
title: 'Pomodoro Timer',
|
||||
subText:
|
||||
'Make your workday more engaging and effective with the Pomodoro timer, break work into 25-minute focused intervals called "pomodoros".',
|
||||
slug: 'pomodoro',
|
||||
show: true,
|
||||
showFeature: false
|
||||
},
|
||||
{
|
||||
src: '/free-tools/name-picker.svg',
|
||||
title: 'Random Name Picker',
|
||||
subText: 'Effortlessly choose names for class participation or group activities',
|
||||
slug: 'name-picker',
|
||||
show: true,
|
||||
showFeature: false
|
||||
},
|
||||
{
|
||||
src: '/free-tools/activity-stopwatch.svg',
|
||||
title: 'Activity Stopwatch',
|
||||
subText:
|
||||
'Stay on track and enhance productivity with our customizable stopwatch for timed tasks, quizzes, and study sessions',
|
||||
slug: 'stopwatch',
|
||||
show: true,
|
||||
showFeature: true
|
||||
},
|
||||
{
|
||||
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.",
|
||||
slug: 'tic-tac-toe',
|
||||
show: true,
|
||||
showFeature: true
|
||||
},
|
||||
{
|
||||
src: '/free-tools/waec.svg',
|
||||
title: 'WAEC Practice tool',
|
||||
subText: 'Ace your WAEC exams with comprehensive study materials, past questions',
|
||||
slug: 'waec',
|
||||
show: false,
|
||||
showFeature: false
|
||||
},
|
||||
{
|
||||
src: '/free-tools/jamb.svg',
|
||||
title: 'JAMB Practice tool',
|
||||
subText:
|
||||
'Prepare for JAMB with past questions and instant feedback for effective exam readiness',
|
||||
slug: 'jamb',
|
||||
show: false,
|
||||
showFeature: false
|
||||
}
|
||||
];
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
<MetaTags {...metaTags} />
|
||||
|
||||
<div class="overflow-hidden">
|
||||
<div class="overflow-hidden bg-white">
|
||||
<Navigation />
|
||||
|
||||
<PageTransition url={data.url}>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script>
|
||||
import Hero from '$lib/Hero/Hero.svelte';
|
||||
import Body from '$lib/Body/Body.svelte';
|
||||
import Faq from '$lib/Faq/Faq.svelte';
|
||||
import StudentDashboard from '$lib/StudentDashboard/StudentDashboard.svelte';
|
||||
import MoreFeatures from '$lib/MoreFeatures/MoreFeatures.svelte';
|
||||
import Testimonial from '$lib/Testimonial/Testimonial.svelte';
|
||||
import Hero from '$lib/Home/Hero.svelte';
|
||||
import CoreFeatures from '$lib/Home/CoreFeatures.svelte';
|
||||
import Faq from '$lib/Home/Faq.svelte';
|
||||
import StudentDashboard from '$lib/Home/StudentDashboard.svelte';
|
||||
import MoreFeatures from '$lib/Home/MoreFeatures.svelte';
|
||||
import Testimonial from '$lib/Home/Testimonial.svelte';
|
||||
|
||||
import { env } from '$env/dynamic/public';
|
||||
import { onMount } from 'svelte';
|
||||
@@ -15,7 +15,7 @@
|
||||
</script>
|
||||
|
||||
<Hero />
|
||||
<Body />
|
||||
<CoreFeatures />
|
||||
<StudentDashboard />
|
||||
<Testimonial />
|
||||
<MoreFeatures />
|
||||
|
||||
@@ -186,9 +186,9 @@
|
||||
</section>
|
||||
|
||||
<PageSignupCTA
|
||||
header="Launch Your First Training in Minutes"
|
||||
header="Bring your bootcamp vision online"
|
||||
subText="Try before you buy. No credit card required."
|
||||
btnLabel="Sign up"
|
||||
btnLabel="Sign up for free"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
|
||||
@@ -77,11 +77,7 @@
|
||||
|
||||
<svelte:head>
|
||||
<title>Teach | ClassroomIO</title>
|
||||
<meta
|
||||
property="og:image"
|
||||
itemprop="image"
|
||||
content="https://classroomio.com/teach/teacher-banner.png"
|
||||
/>
|
||||
<meta property="og:image" itemprop="image" content="https://brand.cdn.clsrio.com/og/teach.png" />
|
||||
<meta property="og:title" content="Teach on ClassroomIO" />
|
||||
<meta
|
||||
property="og:description"
|
||||
@@ -91,7 +87,7 @@
|
||||
<meta
|
||||
property="og:image:secure_url"
|
||||
itemprop="image"
|
||||
content="https://classroomio.com/teach/teacher-banner.png"
|
||||
content="https://brand.cdn.clsrio.com/og/teach.png"
|
||||
/>
|
||||
|
||||
<meta name="twitter:title" content="Teach on ClassroomIO" />
|
||||
@@ -99,7 +95,7 @@
|
||||
name="twitter:description"
|
||||
content="On ClassroomIO you can make side income while doing what you love."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://classroomio.com/teach/teacher-banner.png" />
|
||||
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/teach.png" />
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
@@ -113,7 +109,7 @@
|
||||
<a
|
||||
href="/teach/register"
|
||||
target="_blank"
|
||||
class="w-full block text-center lg:w-[30%] py-3 text-base text-white rounded-md bg-[#1D4ED8]"
|
||||
class="w-full block text-center lg:w-[30%] py-3 text-base text-white rounded-md bg-blue-700"
|
||||
>
|
||||
Register
|
||||
</a>
|
||||
@@ -169,7 +165,7 @@
|
||||
<a
|
||||
href="/teach/register"
|
||||
target="_blank"
|
||||
class="w-full lg:max-w-[20%] py-3 text-base text-white rounded-md bg-[#1D4ED8] text-center"
|
||||
class="w-full lg:max-w-[20%] py-3 text-base text-white rounded-md bg-blue-700 text-center"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
import PageSignupCTA from '$lib/PageSignupCTA/index.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Free Tools | ClassroomIO</title>
|
||||
<meta
|
||||
property="og:image"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
<meta property="og:title" content="ClassroomIO Free Tools" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="At ClassroomIO, we have built a suit of tools for anyone to use freely while collaborating with students"
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:image:secure_url"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
|
||||
<meta name="twitter:title" content="ClassroomIO Free Tools" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="At ClassroomIO, we have built a suit of tools for anyone to use freely while collaborating with students"
|
||||
/>
|
||||
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
|
||||
</svelte:head>
|
||||
|
||||
<slot />
|
||||
|
||||
<PageSignupCTA
|
||||
header="Scale Your Bootcamp Today with ClassroomIO"
|
||||
subText="ClassroomIO gives small and medium bootcamps the power of online learning, simplified."
|
||||
btnLabel="Sign me up"
|
||||
link="/signup"
|
||||
demo={false}
|
||||
/>
|
||||
@@ -0,0 +1 @@
|
||||
export const prerender = true;
|
||||
@@ -0,0 +1,80 @@
|
||||
<script>
|
||||
import PageHeader from '$lib/PageHeader/PageHeader.svelte';
|
||||
import { tools } from '$lib/utils/constants/tools';
|
||||
|
||||
const freeTools = tools.filter((item) => item.show);
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<PageHeader>
|
||||
<!-- added bg-white to keep the background white on devices that are on darkmode -->
|
||||
<div class="bg-white text-left md:text-center md:w-2/4 px-7 md:p-0 mx-auto">
|
||||
<h1 class="text-5xl md:text-6xl font-bold">
|
||||
Explore our free <span class="text-blue-700">tools</span>
|
||||
</h1>
|
||||
<p class="my-4 md:my-8">
|
||||
Innovative tools to help you aid you example preparation, as well as making learning more
|
||||
fun for students and educator looking for engaging resources.
|
||||
</p>
|
||||
|
||||
<div class="flex relative w-[90%] md:w-[50%] my-3 md:mt-10 mx-auto bg-white">
|
||||
<!-- <img
|
||||
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-0 z-0"
|
||||
src="/free-tools/waec.svg"
|
||||
alt="Waec logo"
|
||||
/> -->
|
||||
<img
|
||||
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[55px] z-10"
|
||||
src="/free-tools/progress-report.svg"
|
||||
alt="Progress Report"
|
||||
/>
|
||||
<img
|
||||
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[100px] z-20"
|
||||
src="/free-tools/activity-stopwatch.svg"
|
||||
alt="Activity Stopwatch logo"
|
||||
/>
|
||||
<img
|
||||
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[150px] z-30"
|
||||
src="/free-tools/name-picker.svg"
|
||||
alt="Name picker logo"
|
||||
/>
|
||||
<img
|
||||
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[200px] z-40"
|
||||
src="/free-tools/tic-tac.svg"
|
||||
alt="Tic tac logo"
|
||||
/>
|
||||
<img
|
||||
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[250px] z-50 bg-white"
|
||||
src="/free-tools/pomodoro.svg"
|
||||
alt="Pomodoro Timer logo"
|
||||
/>
|
||||
<!-- <img
|
||||
class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[250px] z-50"
|
||||
src="/free-tools/jamb.svg"
|
||||
alt="Jamb logo"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<div class="p-10 px-2 md:px-0 bg-white">
|
||||
<h1 class="text-center font-bold text-3xl">Featured Tools</h1>
|
||||
|
||||
<div class="flex justify-evenly gap-y-8 flex-wrap w-full md:w-[70%] mt-10 mx-auto bg-white">
|
||||
{#each freeTools as tool}
|
||||
<a
|
||||
href="/tools/{tool.slug}"
|
||||
class="w-full flex md:max-w-[370px] border rounded-md shadow-sm hover:scale-95 transition-all ease-in-out"
|
||||
>
|
||||
<img class="w-[30%] rounded-l-md" src={tool.src} alt="" />
|
||||
<div class="bg-[#F5F8FE] p-5 rounded-r-md w-[70%]">
|
||||
<h1 class="font-bold text-sm md:text-base">{tool.title}</h1>
|
||||
<p class="text-xs text-gray-600 mt-1.5">
|
||||
{tool.subText}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,260 @@
|
||||
<script lang="ts">
|
||||
import ToolsHeader from '$lib/ToolsHeader/ToolsHeader.svelte';
|
||||
|
||||
let namesInput = '';
|
||||
let numNames = 0;
|
||||
let wordCount = 0;
|
||||
let selectedNames: string[] = [];
|
||||
let avatarUrls: string[] = [];
|
||||
let avatarUrlsFetched = false;
|
||||
|
||||
// function to shuffle an array
|
||||
const shuffleArray = (array: string[]) => {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
};
|
||||
|
||||
// function to reset entries
|
||||
const resetEntry = () => {
|
||||
namesInput = '';
|
||||
numNames = 0;
|
||||
wordCount = 0;
|
||||
selectedNames = [];
|
||||
};
|
||||
|
||||
// function to sort the input alphabetically
|
||||
const sortRandom = () => {
|
||||
const sortedNames = namesInput
|
||||
.split(',')
|
||||
.map((name) => name.trim())
|
||||
.sort((a, b) => a.localeCompare(b));
|
||||
namesInput = sortedNames.join(', ');
|
||||
};
|
||||
|
||||
// function to unsort
|
||||
const unsortRandom = () => {
|
||||
const unsortedNames = namesInput
|
||||
.split(',')
|
||||
.map((name) => name.trim())
|
||||
.sort(() => 0.5 - Math.random());
|
||||
namesInput = unsortedNames.join(', ');
|
||||
};
|
||||
|
||||
const selectName = async () => {
|
||||
const namesArray = namesInput.split(',').map((name) => name.trim());
|
||||
|
||||
if (numNames > namesArray.length) {
|
||||
console.error('Number of names to pick exceeds the length of the name list.');
|
||||
return;
|
||||
}
|
||||
|
||||
wordCount = namesArray.length;
|
||||
const shuffledNames = shuffleArray(namesArray);
|
||||
|
||||
selectedNames = shuffledNames.slice(0, numNames);
|
||||
avatarUrls = []; // reset avatar URLs
|
||||
avatarUrlsFetched = false; // reset avatarUrlsFetched flag
|
||||
|
||||
try {
|
||||
// set loading state
|
||||
avatarUrlsFetched = false;
|
||||
|
||||
// generate avatar for each selected name
|
||||
for (const name of selectedNames) {
|
||||
const avatarUrl = await generateRandomAvatar('pixel-art');
|
||||
if (avatarUrl) {
|
||||
avatarUrls.push(avatarUrl);
|
||||
}
|
||||
}
|
||||
|
||||
// set avatarUrlsFetched to true after avatars are fetched
|
||||
avatarUrlsFetched = true;
|
||||
} catch (error) {
|
||||
console.error('Error fetching avatars:', error);
|
||||
avatarUrlsFetched = true;
|
||||
}
|
||||
};
|
||||
|
||||
// function to generate a random avatar
|
||||
async function generateRandomAvatar(styleName: string, format = 'svg') {
|
||||
const baseUrl = 'https://api.dicebear.com/8.x/';
|
||||
const randomSeed = Math.random().toString(36).substring(7);
|
||||
|
||||
try {
|
||||
const apiUrl = `${baseUrl}${styleName}/svg?seed=${randomSeed}`;
|
||||
const response = await fetch(apiUrl);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch avatar');
|
||||
}
|
||||
|
||||
return response.url;
|
||||
} catch (error) {
|
||||
console.error('Error generating random avatar:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
$: wordCount = namesInput?.split(',').filter((name) => name.trim())?.length ?? 0;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Random Name Picker | ClassroomIO</title>
|
||||
<meta
|
||||
property="og:image"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
<meta property="og:title" content="Random Name Picker | ClassroomIO" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Use this online name picker to draw a random name from a list of names for your online or physical classroom."
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:image:secure_url"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
|
||||
<meta name="twitter:title" content="Random Name Picker | ClassroomIO" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Use this online name picker to draw a random name from a list of names for your online or physical classroom."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
|
||||
</svelte:head>
|
||||
|
||||
<section class="mt-[10%] md:mt-16 px-5 md:px-0 bg-white">
|
||||
<ToolsHeader>
|
||||
<img
|
||||
src="/free-tools/name-picker.svg"
|
||||
class="w-[15%] md:w-[5%] mx-auto border rounded-full"
|
||||
alt=""
|
||||
/>
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-[#040F2D] my-3">Random Name Picker</h1>
|
||||
<p class="text-md text-[#656565] font-light md:font-normal md:w-[45%] mx-auto">
|
||||
Use this online name picker to draw a random name from a list of names, or to draw several
|
||||
names randomly out of a list. You can use it as a name randomizer for a class activities.
|
||||
</p>
|
||||
</ToolsHeader>
|
||||
|
||||
<div class="border rounded-md md:w-[60%] my-10 py-8 md:py-[3%] mx-auto shadow-md bg-white">
|
||||
<div class="w-[85%] md:w-[70%] mx-auto bg-white">
|
||||
<h1 class="font-bold text-sm">List of names</h1>
|
||||
|
||||
<!-- container -->
|
||||
<div
|
||||
class="relative focus-within:border-[#0233BD] border-2 mt-5 h-[12rem] pl-3 pt-2 overflow-hidden rounded-sm bg-[#F1F2F4]"
|
||||
>
|
||||
<!-- sidebar -->
|
||||
<div class="flex flex-col gap-y-3 absolute right-2 md:right-7 top-3">
|
||||
<button
|
||||
type="button"
|
||||
on:click={sortRandom}
|
||||
class="p-1.5 rounded-full bg-[#D9E0F5] flex justify-center items-center"
|
||||
>
|
||||
<img src="/sort-icon.svg" class="w-2.5" alt="" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={unsortRandom}
|
||||
class="p-1.5 rounded-full bg-[#D9E0F5] flex justify-center items-center"
|
||||
>
|
||||
<img src="/unsort-icon.svg" class="w-2.5" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- content -->
|
||||
<div class="z-10 h-[80%]">
|
||||
<span
|
||||
role="textbox"
|
||||
tabindex={0}
|
||||
contenteditable
|
||||
bind:textContent={namesInput}
|
||||
class="w-full pr-9 md:pr-14 overflow-y-auto text-xs block border-0 outline-none h-full"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<!-- word count -->
|
||||
<p
|
||||
class="rounded-xl w-[80px] mt-1 py-1 bg-[#D9E0F5] text-center text-[#0F62FE] text-[10px] font-semibold"
|
||||
>
|
||||
name count: {wordCount}
|
||||
</p>
|
||||
</div>
|
||||
<p class="py-4 border-b text-xs">Each name must be separated by a comma</p>
|
||||
|
||||
<div class="mt-10">
|
||||
<h1 class="font-bold text-sm">Number of Names</h1>
|
||||
<!-- number input & button -->
|
||||
<div class="flex flex-wrap gap-y-3 justify-between w-full mt-5">
|
||||
<input
|
||||
type="number"
|
||||
bind:value={numNames}
|
||||
class="px-3 py-2 text-sm w-full md:w-2/4 border-2 rounded-sm outline focus:border-[#0233BD] bg-[#F1F2F4] outline-none"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
on:click={selectName}
|
||||
class="bg-[#0F62FE] rounded-md text-sm py-3 md:py-0 text-white w-[70%] md:w-[35%]"
|
||||
>Select name(s) at random</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer logo -->
|
||||
<div class="py-3 mt-10 mb-5 bg-[#F1F6FF] flex justify-center items-center gap-3">
|
||||
<img src="/free-tools/name-picker.svg" class="w-[12%] md:w-[9%]" alt="" />
|
||||
{#if selectedNames.length > 0}
|
||||
<h1 class="text-[#0233BD] text-xl font-bold">Selected Names</h1>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- loading state -->
|
||||
{#if selectedNames.length > 0 && !avatarUrlsFetched}
|
||||
<div class="w-full flex justify-center items-center">
|
||||
<p class="font-bold">Loading...</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- generated name -->
|
||||
{#if selectedNames.length > 0 && avatarUrlsFetched}
|
||||
<div>
|
||||
<ul>
|
||||
{#each selectedNames as name, index}
|
||||
<li class="py-2 border-b">
|
||||
<div class="flex item-center gap-3 md:gap-5 justify-center">
|
||||
<img src={avatarUrls[index]} alt="" class="w-7" />
|
||||
<p
|
||||
class="font-medium text-sm md:text-base w-[20%] md:w-[10%] flex justify-center items-center"
|
||||
>
|
||||
{name}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<div class="flex flex-wrap justify-between md:justify-center items-center md:gap-3 mt-3">
|
||||
<button
|
||||
type="button"
|
||||
on:click={resetEntry}
|
||||
class="py-2 border text-xs md:text-sm rounded-md w-[45%] md:w-[20%]"
|
||||
>Reset Entries</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={selectName}
|
||||
class="py-2 bg-[#0F62FE] rounded-md text-xs md:text-sm text-white w-[45%] md:w-[27%]"
|
||||
>Select other names</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,393 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import ToolsHeader from '$lib/ToolsHeader/ToolsHeader.svelte';
|
||||
|
||||
interface TodoItem {
|
||||
id: number;
|
||||
content: string;
|
||||
time: string;
|
||||
isPaused: boolean;
|
||||
isEditing: boolean;
|
||||
isDone: boolean;
|
||||
isVisible: boolean;
|
||||
}
|
||||
|
||||
let addInput: HTMLInputElement;
|
||||
let buzzSound: HTMLAudioElement;
|
||||
let todoList: TodoItem[] = [];
|
||||
|
||||
let countdownTime: number = 25 * 60;
|
||||
let countdownDisplay: string = '25:00';
|
||||
let timerState: string = 'pomodoro';
|
||||
|
||||
let isPaused: boolean = true;
|
||||
let timerInterval: any = null;
|
||||
let isVisible: boolean = false;
|
||||
|
||||
const timerSequence = ['pomodoro', 'long-break', 'short-break'];
|
||||
|
||||
function saveTodoList() {
|
||||
localStorage.setItem('todoList', JSON.stringify(todoList));
|
||||
}
|
||||
|
||||
function loadTodoList() {
|
||||
const storedTodoList = localStorage.getItem('todoList');
|
||||
if (storedTodoList) {
|
||||
todoList = JSON.parse(storedTodoList);
|
||||
}
|
||||
}
|
||||
|
||||
function setEditing(i: number, isEditing: boolean) {
|
||||
todoList[i].isEditing = isEditing;
|
||||
saveTodoList();
|
||||
}
|
||||
|
||||
function deleteTodo(i: number) {
|
||||
todoList.splice(i, 1);
|
||||
todoList = todoList;
|
||||
isVisible = false;
|
||||
saveTodoList();
|
||||
}
|
||||
|
||||
function markTodoAsDone(i: number) {
|
||||
todoList[i].isDone = true;
|
||||
todoList = [...todoList];
|
||||
todoList[i].isVisible = false;
|
||||
saveTodoList();
|
||||
}
|
||||
|
||||
function addTodo() {
|
||||
todoList = [
|
||||
...todoList,
|
||||
{
|
||||
id: new Date().getMilliseconds(),
|
||||
content: '',
|
||||
isEditing: true,
|
||||
time: '25:00',
|
||||
isPaused: true,
|
||||
isDone: false,
|
||||
isVisible: false
|
||||
}
|
||||
];
|
||||
|
||||
setTimeout(() => {
|
||||
addInput.focus();
|
||||
}, 50);
|
||||
|
||||
saveTodoList();
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
if (!isPaused) {
|
||||
return;
|
||||
}
|
||||
|
||||
isPaused = false;
|
||||
|
||||
timerInterval = setInterval(() => {
|
||||
if (countdownTime > 0) {
|
||||
countdownTime--;
|
||||
updateCountdownDisplay();
|
||||
} else {
|
||||
clearInterval(timerInterval);
|
||||
countdownDisplay = '00:00';
|
||||
buzzSound.play();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function pauseCountdown() {
|
||||
if (isPaused) {
|
||||
return;
|
||||
}
|
||||
|
||||
isPaused = true;
|
||||
clearInterval(timerInterval);
|
||||
}
|
||||
|
||||
function resetCountdown() {
|
||||
clearInterval(timerInterval);
|
||||
|
||||
switch (timerState) {
|
||||
case 'pomodoro':
|
||||
countdownTime = 25 * 60;
|
||||
break;
|
||||
case 'short-break':
|
||||
countdownTime = 15 * 60;
|
||||
break;
|
||||
case 'long-break':
|
||||
countdownTime = 5 * 60;
|
||||
break;
|
||||
}
|
||||
|
||||
isPaused = true;
|
||||
|
||||
updateCountdownDisplay();
|
||||
}
|
||||
|
||||
function nextTimerState() {
|
||||
const currentIndex = timerSequence.indexOf(timerState);
|
||||
const nextIndex = (currentIndex + 1) % timerSequence.length;
|
||||
setTimerState(timerSequence[nextIndex]);
|
||||
}
|
||||
|
||||
function updateCountdownDisplay() {
|
||||
const minutes = Math.floor(countdownTime / 60);
|
||||
const seconds = countdownTime % 60;
|
||||
countdownDisplay = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function setTimerState(state: string) {
|
||||
timerState = state;
|
||||
resetCountdown();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
buzzSound = new Audio('https://assets.cdn.clsrio.com/beeping-sound.mp3');
|
||||
loadTodoList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Pomodoro Timer | ClassroomIO</title>
|
||||
<meta property="og:image" itemprop="image" content="" />
|
||||
<meta property="og:title" content="Pomodoro Timer | ClassroomIO" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Make your workday more engaging and effective with the Pomodoro timer, break work into 25-minute focused intervals called 'pomodoros', followed by 5-minute breaks"
|
||||
/>
|
||||
|
||||
<meta property="og:image:secure_url" itemprop="image" content="" />
|
||||
|
||||
<meta name="twitter:title" content="Pomodoro Timer | ClassroomIO" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Make your workday more engaging and effective with the Pomodoro timer, break work into 25-minute focused intervals called 'pomodoros', followed by 5-minute breaks"
|
||||
/>
|
||||
<meta name="twitter:image" content="" />
|
||||
</svelte:head>
|
||||
|
||||
<section class="mt-[10%] md:mt-16 px-1 md:px-0 w-full md:w-full bg-white">
|
||||
<ToolsHeader>
|
||||
<img
|
||||
src="/free-tools/pomodoro.svg"
|
||||
class="w-[15%] md:w-[5%] mx-auto border rounded-full"
|
||||
alt=""
|
||||
/>
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-[#040F2D] my-3">Pomodoro Timer</h1>
|
||||
<p class="text-sm mt-10 text-[#656565] font-light md:font-normal md:w-[45%] mx-auto">
|
||||
Make your workday more engaging and effective with the Pomodoro timer, break work into
|
||||
25-minute focused intervals called "pomodoros," followed by 5-minute breaks. take a longer
|
||||
break.
|
||||
</p>
|
||||
</ToolsHeader>
|
||||
|
||||
<div
|
||||
class="body w-full md:h-[60vh] flex flex-col gap-y-10 md:flex-row justify-evenly px-5 md:px-10 my-10 text-white text-center"
|
||||
>
|
||||
<!-- left side -->
|
||||
<div
|
||||
class="w-full md:w-[50%] bg-[#0D4CFF] rounded-lg md:rounded-2xl py-7 px-5 md:p-10 flex flex-col gap-y-16 md:gap-y-0 justify-between"
|
||||
>
|
||||
<!-- types -->
|
||||
<div class="flex item-center justify-evenly">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => setTimerState('pomodoro')}
|
||||
class:bg-[#3ADFECED]={timerState === 'pomodoro'}
|
||||
class:bg-[#0233BD]={timerState !== 'pomodoro'}
|
||||
class="transition-all duration-500 italic py-1.5 md:py-2 w-[25%] text-xs md:text-sm md:font-medium rounded-md hover:bg-[#3ADFECED]"
|
||||
>Pomodoro</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => setTimerState('long-break')}
|
||||
class:bg-[#3ADFECED]={timerState === 'long-break'}
|
||||
class:bg-[#0233BD]={timerState !== 'long-break'}
|
||||
class="transition-all duration-500 italic py-1.5 md:py-2 w-[25%] text-xs md:text-sm md:font-medium rounded-md hover:bg-[#3ADFECED]"
|
||||
>Short Break
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => setTimerState('short-break')}
|
||||
class:bg-[#3ADFECED]={timerState === 'short-break'}
|
||||
class:bg-[#0233BD]={timerState !== 'short-break'}
|
||||
class="transition-all duration-500 italic py-1.5 md:py-2 w-[25%] text-xs md:text-sm md:font-medium rounded-md hover:bg-[#3ADFECED]"
|
||||
>Long Break
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- countdown -->
|
||||
<h1 class="text-7xl md:text-9xl font-bold">{countdownDisplay}</h1>
|
||||
|
||||
<!-- controls -->
|
||||
<div class="flex items-center justify-center gap-7">
|
||||
<!-- reset -->
|
||||
<button type="button" on:click={resetCountdown}>
|
||||
<img
|
||||
src="/free-tools/pomodoro/restart-icon.svg"
|
||||
alt="Restart Icon"
|
||||
class="w-7 hover:scale-110 transition-all duration-300"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- start (i intentionally disabled this button once the user clicks start so they can use the pause button to actually pause the countdown) -->
|
||||
<button
|
||||
type="button"
|
||||
on:click={isPaused ? startCountdown : pauseCountdown}
|
||||
class="bg-white text-[#0542CC] border text-base font-bold uppercase py-3 px-14 rounded-md hover:bg-transparent hover:text-white hover:border-white hover:border transition-all duration-300"
|
||||
>
|
||||
{isPaused ? 'Start' : 'Pause'}
|
||||
</button>
|
||||
|
||||
<!-- next -->
|
||||
<button type="button" on:click={nextTimerState}>
|
||||
<img
|
||||
src="/free-tools/pomodoro/timer-play-icon.svg"
|
||||
alt="Play Icon"
|
||||
class="w-7 hover:scale-110 transition-all duration-300"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- right side -->
|
||||
<div class="w-full md:w-[36%] relative">
|
||||
<h1
|
||||
class="bg-[#040F2D] uppercase text-xl font-bold py-4"
|
||||
style="clip-path: polygon(0 0, 100% 1%, 100% 65%, 0% 100%);"
|
||||
>
|
||||
To do list
|
||||
</h1>
|
||||
|
||||
<div class="overflow-hidden">
|
||||
<!-- todos -->
|
||||
<div class="overflow-y-auto mt-3 max-h-[40vh] md:max-h-[50vh]">
|
||||
{#each todoList as todo, i}
|
||||
<div class="border text-black p-5">
|
||||
{#if todo.isEditing}
|
||||
<form on:submit|preventDefault={() => setEditing(i, false)}>
|
||||
<p class="text-xs text-left text-[#656565] font-semibold">Pomodoro name</p>
|
||||
<input
|
||||
type="text"
|
||||
bind:this={addInput}
|
||||
bind:value={todo.content}
|
||||
class="bg-[#F1F2F4] border-[#EAEAEA] w-full border mt-2 px-3 py-2 text-base outline-none"
|
||||
/>
|
||||
<div class="flex justify-end items-center gap-5 mt-5">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => deleteTodo(i)}
|
||||
class="rounded-sm py-2 px-5 text-xs font-semibold bg-[#F7F7F7]"
|
||||
>Discard</button
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-sm py-2 px-5 text-xs font-semibold bg-[#0D4CFF] text-white"
|
||||
>Save</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="">
|
||||
<div class="flex justify-between">
|
||||
<p class="text-sm font-medium">{todo.content}</p>
|
||||
|
||||
<!-- pen and menu icon -->
|
||||
<div class="relative flex justify-between w-[15%]">
|
||||
<button type="button" on:click={() => setEditing(i, true)}>
|
||||
<img src="/free-tools/pomodoro/pen-icon.svg" alt="Pen icon" class="w-5" />
|
||||
</button>
|
||||
|
||||
<button type="button" on:click={() => (todo.isVisible = !todo.isVisible)}>
|
||||
<img src="/free-tools/pomodoro/menu-icon.svg" alt="Menu icon" class="w-5" />
|
||||
</button>
|
||||
|
||||
{#if todo.isVisible}
|
||||
<ul
|
||||
class="z-40 absolute top-6 -right-3 text-xs w-[8rem] bg-white border shadow-md rounded-[5px]"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => markTodoAsDone(i)}
|
||||
class="w-full font-medium text-left py-3 px-5"
|
||||
>
|
||||
Mark as done
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => deleteTodo(i)}
|
||||
class="w-full font-medium text-left py-3 px-5 bg-red-600 text-white rounded-b-[5px]"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center mt-10">
|
||||
<p
|
||||
class="rounded-[3px] text-xs font-medium text-[#656565] bg-[#EAEAEA] py-0.5 px-1.5"
|
||||
>
|
||||
{todo.time}
|
||||
</p>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if (todo.isPaused) {
|
||||
startCountdown();
|
||||
} else {
|
||||
pauseCountdown();
|
||||
}
|
||||
|
||||
todo.isPaused = !todo.isPaused;
|
||||
}}
|
||||
class="{todo.isDone
|
||||
? 'bg-[#00D06C] border-none text-white'
|
||||
: todo.isPaused
|
||||
? 'bg-white text-[#0D4CFF] border-[#0D4CFF]'
|
||||
: 'bg-[#0D4CFF] text-white border-none'}
|
||||
|
||||
flex items-center border-2 justify-center gap-2 py-1.5 px-4 rounded-[4px] text-xs font-bold uppercase"
|
||||
>
|
||||
{#if todo.isDone}
|
||||
<img src="/free-tools/pomodoro/done-icon.svg" alt="Done icon" />
|
||||
done
|
||||
{:else if todo.isPaused}
|
||||
<img src="/free-tools/pomodoro/list-play-icon.svg" alt="Play icon" />
|
||||
play task
|
||||
{:else}
|
||||
<img src="/free-tools/pomodoro/pause-icon.svg" alt="Pause icon" />
|
||||
pause task
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- todo button -->
|
||||
<button
|
||||
type="button"
|
||||
on:click={addTodo}
|
||||
class="bg-[#1D4ED8] rounded-md text-center font-medium mt-10 py-3 w-full flex justify-center items-center gap-3"
|
||||
>
|
||||
Add new item
|
||||
<img src="/free-tools/pomodoro/add-icon.svg" alt="Add icon" class="w-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
|
||||
|
||||
.body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,426 @@
|
||||
<script lang="ts">
|
||||
import { LogoFacebook, LogoLinkedin } from 'carbon-icons-svelte';
|
||||
import { onDestroy } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
import Mood from './components/Mood.svelte';
|
||||
import ToolsHeader from '$lib/ToolsHeader/ToolsHeader.svelte';
|
||||
import Avatar from './components/Avatar.svelte';
|
||||
import Background from './components/Background.svelte';
|
||||
import Report from './components/Report.svelte';
|
||||
import FullView from './components/FullView.svelte';
|
||||
import DownloadButton from './components/DownloadButton.svelte';
|
||||
import { htmlBody, type HtmlBody, openModal, isFormComplete } from './components/store';
|
||||
|
||||
const MAX_CHARS = 160;
|
||||
let remainingChars = MAX_CHARS;
|
||||
let showReport: boolean = false;
|
||||
let showSetter: boolean = true;
|
||||
let isDownloading: boolean = false;
|
||||
let isDisabled: boolean;
|
||||
|
||||
// sets the result of the mini validation for the htmlBody store
|
||||
const unsubscribe = isFormComplete.subscribe((value) => {
|
||||
isDisabled = value;
|
||||
});
|
||||
|
||||
function handleInputChange(event: any, property: keyof HtmlBody) {
|
||||
$htmlBody[property] = event.target.value;
|
||||
|
||||
if (property === 'learning') {
|
||||
remainingChars = MAX_CHARS - event.target.value.length;
|
||||
}
|
||||
}
|
||||
|
||||
function shareTemplate() {
|
||||
return encodeURIComponent(
|
||||
`Learning Progress Update: ${$htmlBody.learning} and I'm ${$htmlBody.mood.text}. \nGenerated yours on classroomio.com\n`
|
||||
);
|
||||
}
|
||||
|
||||
function shareOnTwitter() {
|
||||
const text = shareTemplate();
|
||||
const hashtags = encodeURIComponent('classroomIO,progressReport');
|
||||
const url = `https://x.com/intent/post?text=${text}&hashtags=${hashtags}`;
|
||||
window.open(url);
|
||||
}
|
||||
|
||||
function shareOnFacebook() {
|
||||
const text = shareTemplate();
|
||||
window.open(
|
||||
`https://www.facebook.com/dialog/share?app_id=145634995501895&display=popup&href=https%3A%2F%2Fclassroomio.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fclassroomio.com%2Ftools%2Fexplorer&hashtag=${text}`
|
||||
);
|
||||
}
|
||||
|
||||
function shareOnLinkedIn() {
|
||||
const text = shareTemplate();
|
||||
const url = `http://www.linkedin.com/shareArticle?summary=${text}&text=${text}`;
|
||||
window.open(url);
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
unsubscribe();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Random Name Picker | ClassroomIO</title>
|
||||
<meta
|
||||
property="og:image"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
<meta property="og:title" content="Random Name Picker | ClassroomIO" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Use this online name picker to draw a random name from a list of names for your online or physical classroom."
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:image:secure_url"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
|
||||
<meta name="twitter:title" content="Random Name Picker | ClassroomIO" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Use this online name picker to draw a random name from a list of names for your online or physical classroom."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
|
||||
</svelte:head>
|
||||
|
||||
<section class="mt-[10%] md:mt-16 px-1 md:px-0 w-full md:w-full">
|
||||
<ToolsHeader>
|
||||
<img
|
||||
src="/free-tools/progress-report.svg"
|
||||
class="w-[15%] md:w-[5%] mx-auto border rounded-full"
|
||||
alt=""
|
||||
/>
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-[#040F2D] my-3">Progress Report</h1>
|
||||
<p class="text-md text-[#656565] font-light md:font-normal md:w-[45%] mx-auto">
|
||||
Generate cool reports of your learning progress. Share reports with your network for
|
||||
collaborative learning
|
||||
</p>
|
||||
</ToolsHeader>
|
||||
|
||||
<!-- modals -->
|
||||
<Avatar />
|
||||
<Mood />
|
||||
<Background />
|
||||
<FullView />
|
||||
|
||||
<div
|
||||
class="border rounded-md w-full md:w-11/12 lg:w-[80%] my-10 mx-auto shadow-md flex md:flex-row flex-col justify-evenly"
|
||||
>
|
||||
<!-- left side -->
|
||||
{#if showSetter}
|
||||
<div
|
||||
transition:fly={{ y: 100, easing: sineInOut }}
|
||||
class="w-full mx-auto md:w-[48%] md:max-w-[500px] p-5 md:border-r"
|
||||
>
|
||||
<!-- preview button -->
|
||||
<div class="flex md:hidden justify-end mb-5">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
showSetter = false;
|
||||
showReport = true;
|
||||
}}
|
||||
class="flex justify-between items-center gap-2 px-3 py-1 rounded-full text-white text-xs bg-[#0233BD]"
|
||||
>
|
||||
<img
|
||||
src="/free-tools/progress-report/preview-icon.svg"
|
||||
alt="preview icon"
|
||||
class="w-4"
|
||||
/>
|
||||
Preview
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- name input -->
|
||||
<div>
|
||||
<p class="text-sm text-[#656565]">Add your name</p>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={$htmlBody.name}
|
||||
on:input={(event) => handleInputChange(event, 'name')}
|
||||
placeholder="Enter your name here"
|
||||
class="w-full border my-3 py-2 px-3 outline-none rounded-sm bg-[#F1F2F4] text-xs placeholder:text-sm placeholder:text-[#ADADAD]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- mood input -->
|
||||
<div class="mt-3">
|
||||
<p class="text-sm text-[#656565]">Select your mood</p>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => ($openModal.mood = true)}
|
||||
class="w-full flex justify-between items-center border my-3 py-2 px-3 outline-none rounded-sm bg-[#F1F2F4] text-gray-400 text-sm"
|
||||
>
|
||||
{#if $htmlBody.mood.text}
|
||||
<div
|
||||
class="px-3 py-1 border border-[#EDEDED] text-white bg-blue-500 rounded-2xl font-semibold text-[7px] md:text-xs flex items-center justify-between"
|
||||
>
|
||||
{#if $htmlBody.mood.text}
|
||||
<span class="flex gap-1 items-center">
|
||||
<p class="font-semibold text-[9px] md:text-xs">is {$htmlBody.mood.text}</p>
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/progress-report/emojis/{$htmlBody.mood
|
||||
.iconSrc}.png"
|
||||
alt={$htmlBody.mood.text}
|
||||
class="w-3"
|
||||
/>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
What feeling describes you?
|
||||
<img
|
||||
src="/free-tools/progress-report/smiley-face-icon.svg"
|
||||
alt="smiley face"
|
||||
class="w-3"
|
||||
/>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- learning input -->
|
||||
<div class="mt-5">
|
||||
<p class="text-sm text-[#656565]">What are you learning?</p>
|
||||
<textarea
|
||||
bind:value={$htmlBody.learning}
|
||||
maxlength={MAX_CHARS}
|
||||
on:input={(event) => handleInputChange(event, 'learning')}
|
||||
placeholder="Tell us what you are learning"
|
||||
class="w-full h-[17vh] border my-3 py-2 px-3 outline-none rounded-sm bg-[#F1F2F4] text-sm placeholder:text-sm placeholder:text-[#ADADAD]"
|
||||
></textarea>
|
||||
<p class="text-xs text-right text-[#656565]">{remainingChars} characters remaining</p>
|
||||
</div>
|
||||
|
||||
<!-- range input -->
|
||||
<div class="mt-3">
|
||||
<p class="text-sm text-[#656565] pb-4">Estimate your progress</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
bind:value={$htmlBody.progress}
|
||||
class="range-input"
|
||||
on:input={(event) => handleInputChange(event, 'progress')}
|
||||
style="background: linear-gradient(to right, #0F62FE {$htmlBody.progress}%, #ccc {$htmlBody.progress}%);"
|
||||
/>
|
||||
<p class="text-sm font-semibold">{$htmlBody.progress}%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- avatar button -->
|
||||
<div class="flex flex-wrap justify-between items-center mt-3">
|
||||
<div class="w-full md:w-2/4">
|
||||
<p class="text-[12px] md:text-sm text-[#656565]">Choose your avatar</p>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => ($openModal.avatar = true)}
|
||||
class="bg-[#F7F7F7] w-full py-1.5 px-5 md:px-0 mt-3 flex md:w-[65%] items-center justify-between md:justify-center gap-2"
|
||||
>
|
||||
<img
|
||||
src={`https://assets.cdn.clsrio.com/progress-report/avatars/${
|
||||
$htmlBody.avatar || 'avatar_m'
|
||||
}.svg`}
|
||||
alt=""
|
||||
class="w-[15%] md:w-[30%]"
|
||||
/>
|
||||
<img
|
||||
src="/free-tools/progress-report/question-mark.svg"
|
||||
alt="A question mark"
|
||||
class="w-[15%] md:w-[30%]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- & background -->
|
||||
<div class="w-full md:w-2/4">
|
||||
<p class="text-[12px] md:text-sm text-[#656565]">Choose your background</p>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => ($openModal.background = true)}
|
||||
class="bg-[#F7F7F7] w-full py-1.5 px-5 md:px-0 mt-3 flex md:w-[65%] items-center justify-between md:justify-center gap-2"
|
||||
>
|
||||
<img
|
||||
src={`https://assets.cdn.clsrio.com/progress-report/backgrounds/${
|
||||
$htmlBody.background || 'blue_tetiary_background'
|
||||
}.webp`}
|
||||
alt="An avatar"
|
||||
class="w-[15%] md:w-[30%]"
|
||||
/>
|
||||
<img
|
||||
src="/free-tools/progress-report/question-mark.svg"
|
||||
alt="A question mark"
|
||||
class="w-[15%] md:w-[30%]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<DownloadButton {isDisabled} {isDownloading} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- right side -->
|
||||
|
||||
<div
|
||||
transition:fly={{ y: 100, easing: sineInOut }}
|
||||
class="w-full mx-auto md:w-[48%] md:min-w-[400px] md:max-w-[500px] px-5 md:px-1 md:mt-0 mt-5 md:p-5"
|
||||
>
|
||||
<div class="hidden md:block">
|
||||
<Report />
|
||||
|
||||
<!-- download & share button -->
|
||||
<div class="mt-9 pt-8 px-2 h-auto border-t">
|
||||
<DownloadButton {isDisabled} {isDownloading} text="Download Image" />
|
||||
|
||||
<!-- share button -->
|
||||
<div class="w-full md:w-[70%] mx-auto my-5">
|
||||
<h1 class="text-sm font-semibold text-center">Share on image on social media:</h1>
|
||||
|
||||
<div
|
||||
class="flex justify-evenly border rounded-xl gap-5 w-[60%] md:w-[80%] px-5 py-2 mt-2 mx-auto"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={shareOnFacebook}
|
||||
class="w-10 hover:scale-[1.2] transition-all duration-300"
|
||||
>
|
||||
<LogoFacebook size={32} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={shareOnLinkedIn}
|
||||
class="w-10 hover:scale-[1.2] transition-all duration-300"
|
||||
>
|
||||
<LogoLinkedin size={32} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={shareOnTwitter}
|
||||
class="w-5 hover:scale-[1.2] transition-all duration-300"
|
||||
>
|
||||
<img src="/twitter_logo.png" alt="X.com" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showReport}
|
||||
<!-- hide button -->
|
||||
<div class="flex justify-end mb-5">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
showReport = false;
|
||||
showSetter = true;
|
||||
}}
|
||||
class="flex justify-between items-center gap-2 px-3 py-1 rounded-full text-white text-xs bg-[#0233BD]"
|
||||
>
|
||||
<img src="/free-tools/progress-report/hide-icon.svg" alt="preview icon" class="w-4" />
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<Report />
|
||||
|
||||
<!-- download & share button -->
|
||||
<div class="mt-9 pt-8 px-2 h-auto border-t">
|
||||
<DownloadButton {isDisabled} {isDownloading} />
|
||||
|
||||
<!-- share button -->
|
||||
<div class="w-full md:w-[70%] mx-auto my-5">
|
||||
<h1 class="text-sm font-semibold text-center">Share on image on social media:</h1>
|
||||
|
||||
<div
|
||||
class="flex justify-evenly border rounded-xl gap-5 w-[60%] md:w-[80%] px-5 py-2 mt-2 mx-auto"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={shareOnFacebook}
|
||||
class="w-10 hover:scale-[1.2] transition-all duration-300"
|
||||
>
|
||||
<LogoFacebook size={32} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={shareOnLinkedIn}
|
||||
class="w-10 hover:scale-[1.2] transition-all duration-300"
|
||||
>
|
||||
<LogoLinkedin size={32} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={shareOnTwitter}
|
||||
class="w-5 hover:scale-[1.2] transition-all duration-300"
|
||||
>
|
||||
<img src="/twitter_logo.png" alt="X.com" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.range-input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 80%;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-radius: 15px;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.range-input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
background-color: #0f62fe;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.range-input::-moz-range-thumb {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
background-color: yellow;
|
||||
border-radius: 50%;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.range-input:active::-webkit-slider-thumb {
|
||||
border: 3px solid #fff;
|
||||
filter: drop-shadow(0px 1px 1px #000000);
|
||||
}
|
||||
|
||||
.range-input:focus::-webkit-slider-thumb {
|
||||
border: 3px solid #fff;
|
||||
filter: drop-shadow(0px 1px 1px #000000);
|
||||
}
|
||||
|
||||
.range-input::-moz-range-thumb:hover {
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 0 0 10px rgba(255, 85, 0, 0.1);
|
||||
}
|
||||
|
||||
.range-input:active::-moz-range-thumb {
|
||||
border: 3px solid #fff;
|
||||
filter: drop-shadow(0px 1px 1px #000000);
|
||||
}
|
||||
|
||||
.range-input:focus::-moz-range-thumb {
|
||||
border: 3px solid #fff;
|
||||
filter: drop-shadow(0px 1px 1px #000000);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
import { openModal, htmlBody } from './store';
|
||||
import Modal from '$lib/Modal/Modal.svelte';
|
||||
|
||||
interface Avatar {
|
||||
src: string;
|
||||
}
|
||||
|
||||
let isAddIcon = false;
|
||||
let hoveredIndex: number | null = null;
|
||||
|
||||
let avatars: Avatar[] = [
|
||||
{ src: 'avatar_a' },
|
||||
{ src: 'avatar_b' },
|
||||
{ src: 'avatar_c' },
|
||||
{ src: 'avatar_d' },
|
||||
{ src: 'avatar_e' },
|
||||
{ src: 'avatar_f' },
|
||||
{ src: 'avatar_g' },
|
||||
{ src: 'avatar_h' },
|
||||
{ src: 'avatar_i' },
|
||||
{ src: 'avatar_j' },
|
||||
{ src: 'avatar_k' },
|
||||
{ src: 'avatar_l' },
|
||||
{ src: 'avatar_m' },
|
||||
{ src: 'avatar_n' },
|
||||
{ src: 'avatar_o' },
|
||||
{ src: 'avatar_p' },
|
||||
{ src: 'avatar_q' },
|
||||
{ src: 'avatar_r' },
|
||||
{ src: 'avatar_s' },
|
||||
{ src: 'avatar_t' }
|
||||
];
|
||||
|
||||
function selectAvatar(avatar: Avatar) {
|
||||
$htmlBody.avatar = avatar.src;
|
||||
$openModal.avatar = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal bind:open={$openModal.avatar}>
|
||||
<!-- heading -->
|
||||
<div class="flex justify-between">
|
||||
<h1 class="text-sm font-semibold">Choose your Avatars</h1>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => ($openModal.avatar = false)}
|
||||
class="p-2 bg-[#F1F6FF] hover:scale-110 transition-all duration-300 rounded-full w-6"
|
||||
>
|
||||
<img src="/free-tools/progress-report/close-icon.svg" alt="Close icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- map for each avatar -->
|
||||
<div class="flex flex-wrap justify-evenly gap-y-3 mt-3">
|
||||
{#each avatars as avatar, index}
|
||||
<button
|
||||
on:click={() => {
|
||||
selectAvatar(avatar);
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
hoveredIndex = index;
|
||||
isAddIcon = true;
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
hoveredIndex = null;
|
||||
isAddIcon = false;
|
||||
}}
|
||||
class="relative w-[17%] flex justify-center items-center shadow-sm rounded-full hover:scale-110 transition-all duration-300"
|
||||
>
|
||||
<!-- + 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"
|
||||
></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"
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<!-- -->
|
||||
</Modal>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import Modal from '$lib/Modal/Modal.svelte';
|
||||
import { htmlBody, openModal } from './store';
|
||||
|
||||
interface Background {
|
||||
src: string;
|
||||
}
|
||||
|
||||
let backgrounds: Background[] = [
|
||||
{
|
||||
src: 'blue_tetiary_background'
|
||||
},
|
||||
{
|
||||
src: 'blue_secondary_background'
|
||||
},
|
||||
{
|
||||
src: 'blue_primary_background'
|
||||
},
|
||||
{
|
||||
src: 'purple_tetiary_background'
|
||||
},
|
||||
{
|
||||
src: 'purple_secondary_background'
|
||||
},
|
||||
{
|
||||
src: 'purple_primary_background'
|
||||
},
|
||||
{
|
||||
src: 'black_tetiary_background'
|
||||
},
|
||||
{
|
||||
src: 'black_secondary_background'
|
||||
},
|
||||
{
|
||||
src: 'black_primary_background'
|
||||
},
|
||||
{
|
||||
src: 'yellow_tetiary_background'
|
||||
},
|
||||
{
|
||||
src: 'yellow_secondary_background'
|
||||
},
|
||||
{
|
||||
src: 'yellow_primary_background'
|
||||
}
|
||||
];
|
||||
|
||||
function selectBackground(background: Background) {
|
||||
$htmlBody.background = background.src;
|
||||
$openModal.background = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal className="h-full max-h-[60vh]" bind:open={$openModal.background}>
|
||||
<!-- -->
|
||||
<div class="flex justify-between">
|
||||
<h1 class="text-sm font-semibold">Choose your Background</h1>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => ($openModal.background = false)}
|
||||
class="p-2 bg-[#F1F6FF] hover:scale-110 transition-all duration-300 rounded-full w-6"
|
||||
>
|
||||
<img src="/free-tools/progress-report/close-icon.svg" alt="Close icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
<div
|
||||
class="flex flex-wrap justify-between gap-y-3 mt-3 overflow-y-auto overflow-x-hidden h-[85%]"
|
||||
>
|
||||
{#each backgrounds as background}
|
||||
<button
|
||||
on:click={() => {
|
||||
selectBackground(background);
|
||||
}}
|
||||
class="flex w-[30%] items-center shadow-sm hover:scale-110 transition-all duration-300"
|
||||
>
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/progress-report/backgrounds/{background.src}.webp"
|
||||
alt=""
|
||||
class=""
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<!-- -->
|
||||
</Modal>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import { toPng } from 'html-to-image';
|
||||
import { nodeStore, htmlBody, openModal } from './store';
|
||||
|
||||
export let isDisabled: boolean;
|
||||
export let isDownloading: boolean;
|
||||
export let text: string = 'Generate Progress Report';
|
||||
|
||||
function convertToPng() {
|
||||
isDownloading = true;
|
||||
$openModal.showFullscreenButton = false;
|
||||
|
||||
const fileName = `${$htmlBody.name} - ${$htmlBody.mood.text} (ClassroomIO_com)`;
|
||||
|
||||
if ($nodeStore) {
|
||||
setTimeout(() => {
|
||||
toPng($nodeStore, {
|
||||
width: 500,
|
||||
height: 500,
|
||||
quality: 1
|
||||
})
|
||||
.then((dataUrl) => {
|
||||
const link = document.createElement('a');
|
||||
link.download = fileName;
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Oops, something went wrong!', error);
|
||||
})
|
||||
.finally(() => {
|
||||
isDownloading = false;
|
||||
$openModal.showFullscreenButton = true;
|
||||
});
|
||||
}, 300);
|
||||
} else {
|
||||
console.error('Node is not defined');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={isDownloading || !isDisabled ? true : false}
|
||||
on:click={convertToPng}
|
||||
class="{isDownloading || !isDisabled
|
||||
? 'bg-gray-200 cursor-not-allowed text-gray-600'
|
||||
: 'bg-[#0233BD] text-white'} {text === 'Generate Progress Report'
|
||||
? 'block md:hidden'
|
||||
: ''} mt-5 transition-all delay-100 text-white text-xs font-semibold w-full py-3 rounded-md"
|
||||
>{isDownloading ? 'Loading...' : text}</button
|
||||
>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
import Modal from '$lib/Modal/Modal.svelte';
|
||||
import Report from './Report.svelte';
|
||||
import { openModal } from './store';
|
||||
</script>
|
||||
|
||||
<Modal bind:open={$openModal.fullscreen}>
|
||||
<!-- -->
|
||||
<Report />
|
||||
<!-- -->
|
||||
</Modal>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script lang="ts">
|
||||
import Modal from '$lib/Modal/Modal.svelte';
|
||||
import { htmlBody, openModal } from './store';
|
||||
|
||||
interface Mood {
|
||||
text: string;
|
||||
iconSrc: string;
|
||||
}
|
||||
|
||||
let moods: Mood[] = [
|
||||
{
|
||||
text: 'Unmotivated',
|
||||
iconSrc: 'unmotivated'
|
||||
},
|
||||
{
|
||||
text: 'Feeling Enlightened',
|
||||
iconSrc: 'feeling-enlightened'
|
||||
},
|
||||
{
|
||||
text: 'Enthusiastic',
|
||||
iconSrc: 'enthusiastic'
|
||||
},
|
||||
{
|
||||
text: 'Confused',
|
||||
iconSrc: 'confused'
|
||||
},
|
||||
{
|
||||
text: 'Feeling stuck',
|
||||
iconSrc: 'feeling-stuck'
|
||||
},
|
||||
// {
|
||||
// text: 'Believing in the process',
|
||||
// iconSrc: 'believing-in-the-process'
|
||||
// },
|
||||
{
|
||||
text: 'Curious',
|
||||
iconSrc: 'curious'
|
||||
},
|
||||
{
|
||||
text: 'Achieving Mastery',
|
||||
iconSrc: 'achieving-mastery'
|
||||
},
|
||||
{
|
||||
text: 'Feeling Positive',
|
||||
iconSrc: 'feeling-positive'
|
||||
},
|
||||
{
|
||||
text: 'Reflecting',
|
||||
iconSrc: 'reflecting'
|
||||
},
|
||||
{
|
||||
text: 'Making progress',
|
||||
iconSrc: 'progress'
|
||||
},
|
||||
{
|
||||
text: 'Feeling Sad',
|
||||
iconSrc: 'sad'
|
||||
}
|
||||
];
|
||||
|
||||
function selectMood(mood: Mood) {
|
||||
$htmlBody.mood.text = mood.text;
|
||||
$htmlBody.mood.iconSrc = mood.iconSrc;
|
||||
$openModal.mood = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal bind:open={$openModal.mood}>
|
||||
<!-- header -->
|
||||
<div class="flex justify-between">
|
||||
<h1 class="text-sm font-semibold">Choose your Mood</h1>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => ($openModal.mood = false)}
|
||||
class="p-2 bg-[#F1F6FF] hover:scale-110 transition-all duration-300 rounded-full w-6"
|
||||
>
|
||||
<img src="/free-tools/progress-report/close-icon.svg" alt="Close icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- mapping -->
|
||||
<div class="flex flex-wrap justify-between gap-y-3 mt-3">
|
||||
{#each moods as mood}
|
||||
<button
|
||||
on:click={() => {
|
||||
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"
|
||||
>
|
||||
<p class="text-xs md:text-sm font-semibold">{mood.text}</p>
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/progress-report/emojis/{mood.iconSrc}.png"
|
||||
alt={mood.text}
|
||||
class="w-4"
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<!-- -->
|
||||
</Modal>
|
||||
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import { htmlBody, nodeStore, openModal } from './store';
|
||||
|
||||
import { derived } from 'svelte/store';
|
||||
|
||||
const colorMap = {
|
||||
blue_tetiary_background: '#0542CC',
|
||||
blue_secondary_background: '#0542CC',
|
||||
blue_primary_background: '#0542CC',
|
||||
purple_tetiary_background: '#9D4EDD',
|
||||
purple_secondary_background: '#9D4EDD',
|
||||
purple_primary_background: '#9D4EDD',
|
||||
black_tetiary_background: '#252525',
|
||||
black_secondary_background: '#252525',
|
||||
black_primary_background: '#252525',
|
||||
yellow_tetiary_background: '#FFBC42',
|
||||
yellow_secondary_background: '#FFBC42',
|
||||
yellow_primary_background: '#FFBC42'
|
||||
};
|
||||
|
||||
type ColorMapKey = keyof typeof colorMap;
|
||||
|
||||
const backgroundColor = derived(htmlBody, ($htmlBody) => {
|
||||
return colorMap[$htmlBody.background as ColorMapKey] || '#1e5ed2';
|
||||
});
|
||||
|
||||
let node: any;
|
||||
|
||||
$: nodeStore.set(node);
|
||||
|
||||
$: rootBgImage = `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"
|
||||
style={`font-family: "Space Grotesk", sans-serif; background-image: url('${rootBgImage}'); background-size: cover; background-repeat: no-repeat`}
|
||||
bind:this={node}
|
||||
>
|
||||
<!-- fullscreen button -->
|
||||
{#if $openModal.showFullscreenButton}
|
||||
{#if $openModal.fullscreen}
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => ($openModal.fullscreen = !$openModal.fullscreen)}
|
||||
class="absolute top-4 right-4 p-1.5 rounded-full hover:scale-90 transition-all duration-300 bg-white"
|
||||
>
|
||||
<img src="/free-tools/progress-report/close-icon.svg" alt="" class="" />
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => ($openModal.fullscreen = !$openModal.fullscreen)}
|
||||
class="absolute top-4 right-4 w-7 hover:scale-90 transition-all duration-300"
|
||||
>
|
||||
<img src="/free-tools/progress-report/full-screen-icon.svg" alt="" class="" />
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<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]"
|
||||
>
|
||||
<div class="relative w-full h-full flex flex-col justify-center gap-3 items-center px-2">
|
||||
<!-- avatar -->
|
||||
<img
|
||||
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]"
|
||||
/>
|
||||
|
||||
<!-- 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"
|
||||
>
|
||||
<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]">
|
||||
is {$htmlBody.mood.text}
|
||||
</p>
|
||||
<img
|
||||
src="https://assets.cdn.clsrio.com/progress-report/emojis/{$htmlBody.mood
|
||||
.iconSrc}.png"
|
||||
alt={$htmlBody.mood.text}
|
||||
class="w-3"
|
||||
/>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{: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]"
|
||||
>
|
||||
Add your name
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<!-- 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]"
|
||||
>
|
||||
{$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="progress-range rounded-full w-full h-full"
|
||||
style="background: {$backgroundColor}; width: {$htmlBody.progress}%"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-[12px] font-semibold mt-1">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"
|
||||
>
|
||||
<img src="/logo-192.png" alt="classroomio logo" class="w-4" />
|
||||
<p class="text-[10px] font-bold">ClassroomIO.com</p>
|
||||
</div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- importing font family -->
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
import { derived, writable } from 'svelte/store';
|
||||
import type { Writable } from 'svelte/store';
|
||||
|
||||
interface OpenModal {
|
||||
avatar: boolean;
|
||||
background: boolean;
|
||||
fullscreen: boolean;
|
||||
showFullscreenButton: boolean;
|
||||
mood: boolean;
|
||||
}
|
||||
|
||||
export interface HtmlBody {
|
||||
name: string;
|
||||
learning: string;
|
||||
progress: number;
|
||||
avatar: string;
|
||||
background: string;
|
||||
mood: {
|
||||
text: string;
|
||||
iconSrc: string;
|
||||
};
|
||||
}
|
||||
|
||||
// store for the node binded to the report component for the component to image conversion
|
||||
export const nodeStore = writable(null);
|
||||
|
||||
export const openModal: Writable<OpenModal> = writable({
|
||||
avatar: false,
|
||||
background: false,
|
||||
fullscreen: false,
|
||||
showFullscreenButton: true,
|
||||
mood: false
|
||||
});
|
||||
|
||||
const placeholderLearning = 'Tell us what you are learning';
|
||||
|
||||
// report html
|
||||
export const htmlBody: Writable<HtmlBody> = writable({
|
||||
name: '',
|
||||
learning: placeholderLearning,
|
||||
progress: 10,
|
||||
avatar: '',
|
||||
background: '',
|
||||
mood: {
|
||||
text: '',
|
||||
iconSrc: ''
|
||||
}
|
||||
});
|
||||
|
||||
// a mini validation for the htmlBody store that ensures all fields are filled
|
||||
export const isFormComplete = derived(htmlBody, ($htmlBody) => {
|
||||
return !!(
|
||||
$htmlBody.name.trim() &&
|
||||
$htmlBody.learning.trim() !== placeholderLearning &&
|
||||
$htmlBody.progress > 0 &&
|
||||
$htmlBody.mood.text.trim() &&
|
||||
$htmlBody.mood.iconSrc.trim()
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,240 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
import Timer from './components/Timer.svelte';
|
||||
import ToolsHeader from '$lib/ToolsHeader/ToolsHeader.svelte';
|
||||
|
||||
let timer: NodeJS.Timeout;
|
||||
let buzzSound: HTMLAudioElement;
|
||||
let isNextStep: boolean = false;
|
||||
let isPaused: boolean = false;
|
||||
let soundOn: boolean = true;
|
||||
|
||||
let hours: number = 0;
|
||||
let minutes: number = 0;
|
||||
let seconds: number = 0;
|
||||
|
||||
let activityName: string = '';
|
||||
let displayTime: string = '00:00:00';
|
||||
let totalSeconds: number = 0;
|
||||
let formattedTime: string = '00:00';
|
||||
|
||||
export function toggleTimer() {
|
||||
if (isPaused) {
|
||||
// Start or resume the timer
|
||||
isPaused = false;
|
||||
if (totalSeconds <= 0) {
|
||||
totalSeconds = hours * 3600 + minutes * 60 + seconds;
|
||||
}
|
||||
if (totalSeconds <= 0) {
|
||||
alert('Please set a valid timer.');
|
||||
isPaused = true;
|
||||
return;
|
||||
}
|
||||
timer = setInterval(() => {
|
||||
if (totalSeconds <= 0) {
|
||||
if (soundOn) {
|
||||
buzzSound.play();
|
||||
}
|
||||
clearInterval(timer);
|
||||
isPaused = true;
|
||||
} else {
|
||||
totalSeconds--;
|
||||
updateDisplayTime();
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
// Pause the timer
|
||||
clearInterval(timer);
|
||||
isPaused = true;
|
||||
}
|
||||
isNextStep = true;
|
||||
}
|
||||
|
||||
export function startTimer() {
|
||||
toggleTimer();
|
||||
totalSeconds = hours * 3600 + minutes * 60 + seconds;
|
||||
updateDisplayTime();
|
||||
}
|
||||
|
||||
function toggleSound() {
|
||||
soundOn = !soundOn;
|
||||
}
|
||||
|
||||
function updateDisplayTime() {
|
||||
const hrs = Math.floor(totalSeconds / 3600);
|
||||
const mins = Math.floor((totalSeconds % 3600) / 60);
|
||||
const secs = totalSeconds % 60;
|
||||
displayTime = `${String(hrs).padStart(2, '0')}:${String(mins).padStart(2, '0')}:${String(
|
||||
secs
|
||||
).padStart(2, '0')}`;
|
||||
|
||||
if (formattedTime === '00:00') {
|
||||
formattedTime = `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
|
||||
}
|
||||
}
|
||||
|
||||
function restartTimer() {
|
||||
clearInterval(timer);
|
||||
totalSeconds = hours * 3600 + minutes * 60 + seconds;
|
||||
if (totalSeconds <= 0) {
|
||||
alert('Please set a valid timer.');
|
||||
return;
|
||||
}
|
||||
isPaused = false;
|
||||
timer = setInterval(() => {
|
||||
if (totalSeconds <= 0) {
|
||||
if (soundOn) {
|
||||
buzzSound.play();
|
||||
}
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
totalSeconds--;
|
||||
updateDisplayTime();
|
||||
}
|
||||
}, 1000);
|
||||
updateDisplayTime();
|
||||
}
|
||||
|
||||
function resetTimer() {
|
||||
isNextStep = false;
|
||||
clearInterval(timer);
|
||||
isPaused = false;
|
||||
hours = 0;
|
||||
minutes = 0;
|
||||
seconds = 0;
|
||||
totalSeconds = 0;
|
||||
activityName = '';
|
||||
displayTime = '00:00:00';
|
||||
formattedTime = '00:00';
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
buzzSound = new Audio('https://assets.cdn.clsrio.com/beeping-sound.mp3');
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Activity Stopwatch | ClassroomIO</title>
|
||||
<meta
|
||||
property="og:image"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
<meta property="og:title" content="Activity Stopwatch | ClassroomIO" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Stay on track with a customizable stopwatch for timed tasks, quizzes, and study sessions"
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:image:secure_url"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
|
||||
<meta name="twitter:title" content="Activity Stopwatch | ClassroomIO" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Stay on track with a customizable stopwatch for timed tasks, quizzes, and study sessions"
|
||||
/>
|
||||
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
|
||||
</svelte:head>
|
||||
|
||||
<section class="mt-[10%] md:mt-16 px-5 md:px-0 bg-white">
|
||||
<ToolsHeader>
|
||||
<img
|
||||
src="/free-tools/name-picker.svg"
|
||||
class="w-[15%] md:w-[5%] mx-auto border rounded-full"
|
||||
alt=""
|
||||
/>
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-[#040F2D] my-3">Activity Stopwatch</h1>
|
||||
<p class="text-md text-[#656565] font-light md:font-normal md:w-[45%] mx-auto">
|
||||
Stay on track and enhance productivity with our customizable stopwatch for timed tasks,
|
||||
quizzes, and study sessions.
|
||||
</p>
|
||||
</ToolsHeader>
|
||||
|
||||
<div class="w-full md:w-2/4 my-10 mx-auto border rounded-md overflow-hidden bg-white">
|
||||
<!-- countdown setter -->
|
||||
{#if !isNextStep}
|
||||
<div transition:fly={{ y: -300, delay: 0, easing: sineInOut }} class="px-6 py-8 bg-white">
|
||||
<form on:submit|preventDefault={startTimer}>
|
||||
<div>
|
||||
<h1 class="font-bold text-sm">Name of activity</h1>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={activityName}
|
||||
class="w-full rounded-sm border py-2 mt-3 bg-[#F1F2F4] outline-none px-3 focus-within:border-[#0233BD] focus-within:border"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 bg-white">
|
||||
<h1 class="font-bold text-sm">Set an Activity</h1>
|
||||
<div class="flex flex-wrap justify-between gap-y-5 w-full mt-3 uppercase font-bold">
|
||||
<div class="bg-[#F1F2F4] w-full md:w-[30%] border px-4 py-5">
|
||||
<div class="w-2/4 md:w-full mx-auto flex items-end gap-2">
|
||||
<input
|
||||
type="number"
|
||||
bind:value={hours}
|
||||
class="w-[80%] md:w-[75%] outline-none text-center py-3 px-1.5 text-3xl placeholder:text-3xl placeholder:text-black"
|
||||
/>
|
||||
<p class="text-[10px]">hrs</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#F1F2F4] w-full md:w-[30%] border px-4 py-5">
|
||||
<div class="w-2/4 md:w-full mx-auto flex items-end gap-2">
|
||||
<input
|
||||
type="number"
|
||||
bind:value={minutes}
|
||||
class="w-[80%] md:w-[75%] outline-none text-center py-3 px-1.5 text-3xl placeholder:text-3xl placeholder:text-black"
|
||||
/>
|
||||
<p class="text-[10px]">mins</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#F1F2F4] w-full md:w-[30%] border px-4 py-5">
|
||||
<div class="w-2/4 md:w-full mx-auto flex items-end gap-2">
|
||||
<input
|
||||
type="number"
|
||||
bind:value={seconds}
|
||||
class="w-[80%] md:w-[75%] outline-none text-center py-3 px-1.5 text-3xl placeholder:text-3xl placeholder:text-black"
|
||||
/>
|
||||
<p class="text-[10px]">sec</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-10">
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-[#0F62FE] text-white text-sm px-5 py-3 rounded-md flex gap-3 items-center"
|
||||
>
|
||||
<img src="/free-tools/stopwatch/loading-timer.svg" alt="" />
|
||||
Start Timer</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- countdown -->
|
||||
{#if isNextStep}
|
||||
<Timer
|
||||
{activityName}
|
||||
{formattedTime}
|
||||
{displayTime}
|
||||
{resetTimer}
|
||||
{toggleTimer}
|
||||
{toggleSound}
|
||||
{restartTimer}
|
||||
{isPaused}
|
||||
{soundOn}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script lang="ts">
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let activityName: string;
|
||||
export let formattedTime: string;
|
||||
export let displayTime: string;
|
||||
export let resetTimer: () => void;
|
||||
export let toggleSound: () => void;
|
||||
export let toggleTimer: () => void;
|
||||
export let restartTimer: () => void;
|
||||
export let isPaused: boolean;
|
||||
export let soundOn: boolean;
|
||||
</script>
|
||||
|
||||
<div transition:fly={{ y: 100, delay: 0, easing: sineInOut }}>
|
||||
<div class="px-6 pt-8 text-center">
|
||||
<button
|
||||
type="button"
|
||||
on:click={resetTimer}
|
||||
class="text-[10px] text-[#656565] font-semibold uppercase 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]"
|
||||
>
|
||||
{activityName}:
|
||||
<span class="text-[#0233BD]">{formattedTime}</span>
|
||||
</button>
|
||||
|
||||
<!-- countdown -->
|
||||
<h1 class="text-[#040F2D] mb-14 text-6xl font-bold">{displayTime}</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<button
|
||||
type="button"
|
||||
on:click={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"
|
||||
>
|
||||
{#if soundOn}
|
||||
<img src="/free-tools/stopwatch/speaker-icon.svg" alt="" class="w-7 md:w-12" />
|
||||
{:else}
|
||||
<img src="/free-tools/stopwatch/no-speaker-icon.svg" alt="" class="w-7 md:w-12" />
|
||||
{/if}
|
||||
buzzer</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={toggleTimer}
|
||||
class="bg-[#0F62FE] text-white w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10"
|
||||
>
|
||||
{#if isPaused}
|
||||
<img src="/free-tools/stopwatch/play-icon.svg" alt="" class="w-7 md:w-12" />
|
||||
{:else}
|
||||
<img src="/free-tools/stopwatch/pause-icon.svg" alt="" class="w-7 md:w-12" />
|
||||
{/if}
|
||||
{isPaused ? 'play' : 'pause'}</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={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"
|
||||
>
|
||||
<img src="/free-tools/stopwatch/reset-icon.svg" alt="" class="w-7 md:w-12" />
|
||||
restart</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,236 @@
|
||||
<script lang="ts">
|
||||
import { fly } from 'svelte/transition';
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
import Board from './components/Board.svelte';
|
||||
import { TicTacToe } from './components/board';
|
||||
import { scores, changeToComputer } from './components/store';
|
||||
import ToolsHeader from '$lib/ToolsHeader/ToolsHeader.svelte';
|
||||
|
||||
let startGame = false;
|
||||
let message: string | null = null;
|
||||
let winner: Winner | null = null;
|
||||
let game = createGame();
|
||||
|
||||
interface Winner {
|
||||
symbol?: string;
|
||||
}
|
||||
|
||||
function createGame() {
|
||||
message = '';
|
||||
winner = null;
|
||||
|
||||
return TicTacToe({
|
||||
onWin(winnerInfo) {
|
||||
console.log('winner object', winnerInfo);
|
||||
winner = winnerInfo;
|
||||
|
||||
scores.update((currentScores) => {
|
||||
if (winner!.symbol === 'X') {
|
||||
return { ...currentScores, X: currentScores.X + 1 };
|
||||
} else if (winner!.symbol === 'O') {
|
||||
return { ...currentScores, O: currentScores.O + 1 };
|
||||
}
|
||||
return currentScores;
|
||||
});
|
||||
|
||||
if (winner!.symbol === 'O') {
|
||||
message = `Winner: Player 2 wins the round`;
|
||||
} else if (winner!.symbol === 'X') {
|
||||
message = `Winner: Player 1 wins the round`;
|
||||
}
|
||||
},
|
||||
|
||||
onTie() {
|
||||
message = `Tie game!`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function newGame() {
|
||||
// reset scores to zero
|
||||
scores.update(() => ({
|
||||
X: 0,
|
||||
O: 0,
|
||||
draw: 0
|
||||
}));
|
||||
|
||||
// disable ai
|
||||
$changeToComputer = { change: false };
|
||||
|
||||
// create a new game instance
|
||||
game = createGame();
|
||||
}
|
||||
|
||||
function playAgain() {
|
||||
message = '';
|
||||
// create a new game instance
|
||||
game = createGame();
|
||||
}
|
||||
|
||||
function changePlayer() {
|
||||
changeToComputer.update((value) => ({ change: !value.change }));
|
||||
}
|
||||
|
||||
function startTicTac() {
|
||||
startGame = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Tic Tac Toe | ClassroomIO</title>
|
||||
<meta
|
||||
property="og:image"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
<meta property="og:title" content="Tic Tac Toe | ClassroomIO" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A simple and free tic tac toe game to play to your friends in class or outside the classroom."
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:image:secure_url"
|
||||
itemprop="image"
|
||||
content="https://brand.cdn.clsrio.com/og/free-tools.png"
|
||||
/>
|
||||
|
||||
<meta name="twitter:title" content="Tic Tac Toe | ClassroomIO" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="A simple and free tic tac toe game to play to your friends in class or outside the classroom."
|
||||
/>
|
||||
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
|
||||
</svelte:head>
|
||||
|
||||
<section class="mt-[10%] md:mt-16 px-5 md:px-0 bg-white">
|
||||
<ToolsHeader className="mb-10">
|
||||
<img
|
||||
src="/free-tools/tic-tac.svg"
|
||||
class="w-14 md:w-[5%] mx-auto border rounded-full"
|
||||
alt="Tic Tac Icon"
|
||||
/>
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-[#040F2D] my-3">Tic-Tac game</h1>
|
||||
<p class="text-md text-[#656565] font-light md:font-normal md:w-[45%] mx-auto">
|
||||
More than just a game; it's an educational tool that teaches pattern recognition, and
|
||||
decision-making.
|
||||
</p>
|
||||
</ToolsHeader>
|
||||
|
||||
<div
|
||||
class="overflow-hidden relative tic-tac-bg text-white w-full h-[55vh] md:w-[59%] md:h-[82vh] border-8 border-black mx-auto flex justify-center items-center bg-white"
|
||||
>
|
||||
<!-- congratulatory message -->
|
||||
{#if message}
|
||||
<div
|
||||
transition:fly={{ x: -100, delay: 600, easing: sineInOut }}
|
||||
class="absolute w-full top-[43%] flex flex-col justify-center items-center z-[150]"
|
||||
>
|
||||
<div
|
||||
class="flex gap-10 justify-center py-1 h-[8vh] md:h-[13vh] w-full items-center bg-white font-bold text-[#0233BD]"
|
||||
>
|
||||
{#if message != 'Tie game!'}
|
||||
<img src="/free-tools/tic-tac/winner-star-icon.svg" alt="Star icon" class="h-full" />
|
||||
{/if}
|
||||
<h2 class="md:text-base text-xs">{message}</h2>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
on:click={playAgain}
|
||||
class="px-16 pt-1 pb-1.5 md:text-base text-xs border border-white font-bold rounded-md mt-10 bg-[#0F62FE]"
|
||||
>Play Again</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- this condition renders the game -->
|
||||
{#if startGame}
|
||||
<div class="w-full h-full p-5 flex flex-col border justify-between items-center">
|
||||
<header class="flex w-full items-center justify-between">
|
||||
<button
|
||||
on:click={changePlayer}
|
||||
class="text-[10px] md:text-xs w-[35%] gap-2 md:w-28 flex flex-row items-center leading-3 font-medium"
|
||||
>
|
||||
<img
|
||||
src="/free-tools/tic-tac/computer-icon.svg"
|
||||
alt="Computer icon"
|
||||
class="w-4 md:w-6"
|
||||
/>
|
||||
{#if $changeToComputer.change}
|
||||
Play two players
|
||||
{:else}
|
||||
Change to computer
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
on:click={newGame}
|
||||
class="text-[10px] w-24 flex flex-col gap-1 p-2 shadow-md rounded-md items-center leading-3 font-medium border text-[#0542CC] bg-white"
|
||||
>
|
||||
<img src="/free-tools/tic-tac/restart-icon.svg" alt="Restart icon" class="w-3 md:w-4" />
|
||||
Reset Score</button
|
||||
>
|
||||
</header>
|
||||
|
||||
<!-- board -->
|
||||
<Board {game} {winner} />
|
||||
|
||||
<!-- scores -->
|
||||
<div
|
||||
class="flex justify-between md:justify-center items-center gap-10 w-full text-white font-semibold"
|
||||
>
|
||||
<div class="md:text-3xl text-2xl flex items-center md:gap-5 gap-2">
|
||||
<span class="px-1 md:p-1 bg-[#FE28CB99] md:text-sm text-[10px]">Player 1</span>
|
||||
{$scores.X}
|
||||
</div>
|
||||
<div class="md:text-3xl text-2xl flex items-center md:gap-5 gap-2">
|
||||
<span class="px-1 md:p-1 bg-[#0F62FE] md:text-sm text-[10px]">Draw</span>
|
||||
{$scores.draw}
|
||||
</div>
|
||||
<div class="md:text-3xl text-2xl flex items-center md:gap-5 gap-2">
|
||||
<span class="px-1 md:p-1 bg-[#94F7FFB2] md:text-sm text-[10px]">Player 2</span>
|
||||
{$scores.O}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- this condition renders the homepage -->
|
||||
{:else}
|
||||
<div class="flex flex-col items-center gap-5">
|
||||
<img
|
||||
src="/free-tools/tic-tac/tic-tac-start-icon.svg"
|
||||
alt="Tic tac toe game icon"
|
||||
class="w-[50%] md:w-[70%]"
|
||||
/>
|
||||
<div class="flex flex-col gap-3">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
changePlayer();
|
||||
startTicTac();
|
||||
}}
|
||||
class="mt-5 px-[3.3rem] pt-1 pb-1.5 border border-white text-sm font-bold rounded-md bg-[#0F62FE]"
|
||||
>
|
||||
Play with computer</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
startTicTac();
|
||||
}}
|
||||
class="px-16 pt-1 pb-1.5 border border-white text-sm font-bold rounded-md bg-[#0F62FE]"
|
||||
>Play two players</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.tic-tac-bg {
|
||||
background: url('/free-tools/tic-tac/tic-tac-bg.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script lang="ts">
|
||||
import { sineInOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
import WinningLine from './WinningLine.svelte';
|
||||
import { changeToComputer } from './store';
|
||||
|
||||
interface Game {
|
||||
board: Array<Array<string>>;
|
||||
click: (rowIndex: number, columnIndex: number) => Game;
|
||||
}
|
||||
|
||||
export let game: Game;
|
||||
export let winner = null;
|
||||
|
||||
let customDelay: number;
|
||||
|
||||
$: {
|
||||
if ($changeToComputer.change) {
|
||||
customDelay = 400;
|
||||
} else {
|
||||
customDelay = 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="relative">
|
||||
<table>
|
||||
<tbody>
|
||||
{#each game.board as row, rowIndex}
|
||||
<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"
|
||||
on:click={() => {
|
||||
game = game.click(rowIndex, columnIndex);
|
||||
}}
|
||||
>
|
||||
{#if column === 'X'}
|
||||
<img
|
||||
transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
|
||||
src="/free-tools/tic-tac/tic-tac-x.svg"
|
||||
alt="X icon"
|
||||
/>
|
||||
{:else if column === 'O'}
|
||||
<img
|
||||
transition:fly={{ y: 100, delay: customDelay, easing: sineInOut }}
|
||||
src="/free-tools/tic-tac/tic-tac-o.svg"
|
||||
alt="O icon"
|
||||
/>
|
||||
{:else}
|
||||
<!-- empty cell -->
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<WinningLine {winner} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
table {
|
||||
overflow: hidden;
|
||||
border-collapse: collapse;
|
||||
font-size: 4em;
|
||||
color: white;
|
||||
border: 0px;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
td {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border-right: 10px solid white;
|
||||
border-bottom: 10px solid white;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
td {
|
||||
width: 16vw;
|
||||
height: 16vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
export let winner: Winner | null = null;
|
||||
|
||||
interface Winner {
|
||||
direction: 'horizontal' | 'vertical' | 'diagonal';
|
||||
row?: number;
|
||||
column?: number;
|
||||
diagonal?: 'top-left-to-bottom-right' | 'top-right-to-bottom-left';
|
||||
}
|
||||
|
||||
$: if (winner) {
|
||||
if (winner.direction === 'vertical' && winner.column !== undefined) {
|
||||
document.documentElement.style.setProperty('--col-index', winner.column.toString());
|
||||
} else if (winner.direction === 'horizontal' && winner.row !== undefined) {
|
||||
document.documentElement.style.setProperty('--row-index', winner.row.toString());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if winner}
|
||||
<div
|
||||
transition:fade={{ delay: 500, duration: 2 }}
|
||||
class="winning-line absolute bg-[#ffc300] z-[100]"
|
||||
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'}
|
||||
></div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.horizontal-line {
|
||||
top: calc(var(--row-index) * 100px + 50px - 5px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
top: 0;
|
||||
left: calc(var(--col-index) * 100px + 50px - 5px);
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.diagonal-line-1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 140%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
border-top: 10px solid #ffc300;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.diagonal-line-2 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 140%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
border-top: 10px solid #ffc300;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.horizontal-line {
|
||||
top: calc(var(--row-index) * 16vw + 8vw - 5px);
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
left: calc(var(--col-index) * 16vw + 8vw - 5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
import { scores, changeToComputer } from './store';
|
||||
|
||||
let activateComp = false;
|
||||
|
||||
changeToComputer.subscribe((value) => {
|
||||
if (value && value.change === true) {
|
||||
activateComp = true;
|
||||
} else {
|
||||
activateComp = false;
|
||||
}
|
||||
});
|
||||
|
||||
export function TicTacToe({ onWin, onTie }: { onWin: (winner: any) => void, onTie: () => void }) {
|
||||
const board = [
|
||||
['', '', ''],
|
||||
['', '', ''],
|
||||
['', '', '']
|
||||
];
|
||||
|
||||
let turn = 'X';
|
||||
let done = false;
|
||||
|
||||
return {
|
||||
board,
|
||||
|
||||
click(rowIndex:number, columnIndex:number) {
|
||||
if (!done && !board[rowIndex][columnIndex]) {
|
||||
board[rowIndex][columnIndex] = turn;
|
||||
turn = turn === 'X' ? 'O' : 'X';
|
||||
|
||||
const winner = getWinner(board);
|
||||
|
||||
if (winner) {
|
||||
onWin(winner);
|
||||
done = true;
|
||||
} else if (isBoardFull(board)) {
|
||||
onTie();
|
||||
scores.update((currentScores) => {
|
||||
return { ...currentScores, draw: currentScores.draw + 1 };
|
||||
});
|
||||
done = true;
|
||||
} else {
|
||||
if (activateComp) {
|
||||
const aiMove = getBestMove(board);
|
||||
if (aiMove) {
|
||||
board[aiMove.row][aiMove.column] = 'O';
|
||||
turn = 'X';
|
||||
|
||||
const aiWinner = getWinner(board);
|
||||
if (aiWinner) {
|
||||
onWin(aiWinner);
|
||||
done = true;
|
||||
} else if (isBoardFull(board)) {
|
||||
onTie();
|
||||
scores.update((currentScores) => {
|
||||
return { ...currentScores, draw: currentScores.draw + 1 };
|
||||
});
|
||||
done = true;
|
||||
}
|
||||
} else {
|
||||
console.error("AI could not find a valid move.");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getWinner(board: string[][]) {
|
||||
// check rows
|
||||
for (let row = 0; row < 3; row++) {
|
||||
if (board[row][0] === board[row][1] && board[row][0] === board[row][2] && board[row][0]) {
|
||||
return { symbol: board[row][0], direction: 'horizontal', row };
|
||||
}
|
||||
}
|
||||
|
||||
// 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]
|
||||
) {
|
||||
return { symbol: board[0][column], direction: 'vertical', column };
|
||||
}
|
||||
}
|
||||
|
||||
// check diagonals
|
||||
if (board[0][0] === board[1][1] && board[0][0] == board[2][2] && board[0][0]) {
|
||||
return { symbol: board[0][0], direction: 'diagonal', diagonal: 'top-left-to-bottom-right' };
|
||||
}
|
||||
|
||||
if (board[0][2] === board[1][1] && board[0][2] == board[2][0] && board[0][2]) {
|
||||
return { symbol: board[0][2], direction: 'diagonal', diagonal: 'top-right-to-bottom-left' };
|
||||
}
|
||||
|
||||
// no winner
|
||||
return null;
|
||||
}
|
||||
|
||||
function isBoardFull(board: string[][]) {
|
||||
for (let row = 0; row < 3; row++) {
|
||||
for (let column = 0; column < 3; column++) {
|
||||
if (!board[row][column]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function getBestMove(board: string[][]) {
|
||||
let bestScore = -Infinity;
|
||||
let move;
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
for (let j = 0; j < 3; j++) {
|
||||
// check if cell is empty
|
||||
if (board[i][j] === '') {
|
||||
board[i][j] = 'O'; // make the move
|
||||
let score = minimax(board, 0, false); // call minimax on the new board
|
||||
board[i][j] = ''; // undo the move
|
||||
if (score > bestScore) {
|
||||
bestScore = score;
|
||||
move = { row: i, column: j };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return move;
|
||||
}
|
||||
|
||||
function minimax(board: string[][], depth: number, isMaximizing: boolean) {
|
||||
const result = getWinner(board);
|
||||
if (result !== null) {
|
||||
if (result.symbol === 'O') {
|
||||
return 10 - depth; // ai wins
|
||||
} else if (result.symbol === 'X') {
|
||||
return depth - 10; // player wins
|
||||
} else {
|
||||
return 0; // draw
|
||||
}
|
||||
}
|
||||
|
||||
if (isMaximizing) {
|
||||
let bestScore = -Infinity;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
for (let j = 0; j < 3; j++) {
|
||||
if (board[i][j] === '') {
|
||||
board[i][j] = 'O';
|
||||
let score = minimax(board, depth + 1, false);
|
||||
board[i][j] = '';
|
||||
bestScore = Math.max(score, bestScore);
|
||||
}
|
||||
}
|
||||
}
|
||||
return bestScore;
|
||||
} else {
|
||||
let bestScore = Infinity;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
for (let j = 0; j < 3; j++) {
|
||||
if (board[i][j] === '') {
|
||||
board[i][j] = 'X';
|
||||
let score = minimax(board, depth + 1, true);
|
||||
board[i][j] = '';
|
||||
bestScore = Math.min(score, bestScore);
|
||||
}
|
||||
}
|
||||
}
|
||||
return bestScore;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { writable } from 'svelte/store';
|
||||
import type {Writable} from 'svelte/store'
|
||||
|
||||
interface Scores {
|
||||
X: number;
|
||||
O: number;
|
||||
draw: number;
|
||||
}
|
||||
|
||||
interface ChangeToComputer {
|
||||
change: boolean;
|
||||
}
|
||||
|
||||
export const scores: Writable<Scores> = writable({
|
||||
X: 0,
|
||||
O: 0,
|
||||
draw: 0
|
||||
});
|
||||
|
||||
export const changeToComputer: Writable<ChangeToComputer> = writable({
|
||||
change: false
|
||||
});
|
||||
Reference in New Issue
Block a user