i remade the whole landing and homepage, and make it fully risponsivee to mobiles!
This commit is contained in:
parent
6b2d7b6f4b
commit
078f3eecc0
14 changed files with 221 additions and 228 deletions
28
src/routes/+HomePage/Galery.svelte
Normal file
28
src/routes/+HomePage/Galery.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<script>
|
||||||
|
import tools from "./tools.json"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-center p-3">
|
||||||
|
<div
|
||||||
|
class="flex flex-wrap justify-center gap-5"
|
||||||
|
>
|
||||||
|
{#each tools as tool}
|
||||||
|
<a href={tool.link} class="flex justify-center">
|
||||||
|
<div class="card flex w-full max-w-xs flex-col items-center text-center">
|
||||||
|
<img
|
||||||
|
class="mb-2 w-full rounded border-2 border-white"
|
||||||
|
src={tool.image}
|
||||||
|
alt="how the tool {tool.name} looks like"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-center text-2xl whitespace-nowrap md:text-3xl lg:text-4xl"
|
||||||
|
>
|
||||||
|
<i class="nf {tool.icon}"></i>
|
||||||
|
<span class="ml-2">{tool.name}</span>
|
||||||
|
</div>
|
||||||
|
<p>{@html tool.description}</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<div class="border-2 border-amber-400">
|
|
||||||
<div class="card">
|
|
||||||
<h1 class="text-[100px]">
|
|
||||||
<i class="nf nf-md-google_classroom"></i>hi
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<pre class="text-center font-mono text-[4px] leading-[0.6] text-gray-500">
|
<pre class="w-full text-center font-mono text-[4.5px] leading-[0.6] text-gray-500">
|
||||||
##########%#% ############%#
|
##########%#% ############%#
|
||||||
#%#################% %###################%#%%
|
#%#################% %###################%#%%
|
||||||
%%###################### ###########################%
|
%%###################### ###########################%
|
||||||
|
|
|
||||||
6
src/routes/+HomePage/footer.svelte
Normal file
6
src/routes/+HomePage/footer.svelte
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<div class="mt-5 bg-gray-700 p-3 text-center text-2xl">
|
||||||
|
Made By <a href="https://rezhack.xyz" class="text-blue-400 underline">RezHackXYZ</a> for
|
||||||
|
<a href="https://neighborhood.hackclub.com/" class="text-blue-400 underline">Neighborhood</a>. •
|
||||||
|
Source code available
|
||||||
|
<a href="https://neighborhood.hackclub.com/" class="text-blue-400 underline">here</a>.
|
||||||
|
</div>
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import Ascii from "./ascisi.svelte";
|
import Ascii from "./ascii.svelte";
|
||||||
|
import RightCards from "./rightCards.svelte";
|
||||||
|
|
||||||
let FlagAscii = false;
|
let FlagAscii = false;
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
|
@ -8,11 +9,9 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-col h-full justify-between items-center">
|
||||||
|
<div class="flex h-full items-center justify-around w-full">
|
||||||
|
<div class="flex w-[600px] flex-col items-baseline gap-3">
|
||||||
<div class="flex h-17/20 items-center justify-center border-2 border-amber-400">
|
|
||||||
<div class="flex w-2/3 min-w-[600px] flex-col items-center gap-3">
|
|
||||||
{#if FlagAscii == true}
|
{#if FlagAscii == true}
|
||||||
<Ascii />
|
<Ascii />
|
||||||
{:else}
|
{:else}
|
||||||
|
|
@ -22,7 +21,22 @@
|
||||||
class="w-[600px]"
|
class="w-[600px]"
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
<h1 class="text-center text-5xl">🎓 Your One-Stop Toolkit for Interactive Classrooms!</h1>
|
<h1 class="text-center text-5xl">
|
||||||
<button class="btn">Get Stated</button>
|
The
|
||||||
|
<span class="rounded-full bg-blue-800 px-3 py-1 text-3xl">
|
||||||
|
<i class="nf nf-cod-sparkle"></i> ultimate <i class="nf nf-cod-sparkle"></i>
|
||||||
|
</span>
|
||||||
|
classroom
|
||||||
|
<span class="rounded-full bg-green-800 px-3 py-1 text-3xl">
|
||||||
|
<i class="nf nf-cod-tools"></i> toolkit <i class="nf nf-cod-tools"></i>
|
||||||
|
</span> for all the teachers and students needs!
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<RightCards />
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full bg-gray-900 px-3 py-1 text-xl text-gray-500 w-fit m-3">
|
||||||
|
<i class="nf-fa-angles_down nf"></i>
|
||||||
|
Scroll to see more tools!
|
||||||
|
<i class="nf-fa-angles_down nf"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
24
src/routes/+HomePage/rightCards.svelte
Normal file
24
src/routes/+HomePage/rightCards.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script>
|
||||||
|
import tools from "./tools.json";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="hidden flex-col gap-3 lg:flex">
|
||||||
|
{#each tools as tool, i}
|
||||||
|
{#if i < 3}
|
||||||
|
<div class="card max-w-[320px]">
|
||||||
|
<div class="flex gap-2 text-4xl">
|
||||||
|
<i class="nf {tool.icon}"></i>
|
||||||
|
<h1>{tool.name}</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>{@html tool.description}</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
<div class="card max-w-[320px]">
|
||||||
|
<div class="flex gap-2 text-4xl">
|
||||||
|
<i class="nf nf-fa-angles_down"></i>
|
||||||
|
<h1>and more!</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
37
src/routes/+HomePage/tools.json
Normal file
37
src/routes/+HomePage/tools.json
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "Kahoot Clone",
|
||||||
|
"description": "A Kahoot clone built from scratch with a Postgres DB, AI integration, and more.",
|
||||||
|
"link": "/kahootclone",
|
||||||
|
"icon": "nf-md-chat_question",
|
||||||
|
"image": "https://placehold.co/1800x1000?text=screenshot+TBA"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Wordle",
|
||||||
|
"description": "with unlimited tries, customizable world lengths and more.",
|
||||||
|
"link": "/wordle",
|
||||||
|
"icon": "nf-md-file_word_box",
|
||||||
|
"image": "https://placehold.co/1800x1000?text=screenshot+TBA"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Announcer",
|
||||||
|
"description": "To let the have computer <strike>talk</strike> shout on them, if they don't listen to you",
|
||||||
|
"link": "/announcer",
|
||||||
|
"icon": "nf-md-speaker_wireless",
|
||||||
|
"image": "https://placehold.co/1800x1000?text=screenshot+TBA"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Name Selecter",
|
||||||
|
"description": "to chose any student randomly, with memory of previous names and more.",
|
||||||
|
"link": "/randomname",
|
||||||
|
"icon": "nf-oct-people",
|
||||||
|
"image": "https://placehold.co/1800x1000?text=screenshot+TBA"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Time&Table",
|
||||||
|
"description": "The perfect idle screen when theres no teacher with the timetable, time and date!",
|
||||||
|
"link": "/randomname",
|
||||||
|
"icon": "nf-cod-table",
|
||||||
|
"image": "https://placehold.co/1800x1000?text=screenshot+TBA"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -1,8 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import LandingPage from "./+HomePage/landingPage.svelte";
|
import LandingPage from "./+HomePage/landingPage.svelte";
|
||||||
import ToolsBelt from "./+HomePage/ToolsBelt.svelte";
|
import Galery from "./+HomePage/Galery.svelte";
|
||||||
|
import Footer from "./+HomePage/footer.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<LandingPage />
|
<LandingPage />
|
||||||
<ToolsBelt />
|
<Galery />
|
||||||
|
<Footer />
|
||||||
|
|
@ -1,112 +0,0 @@
|
||||||
<div id="root">
|
|
||||||
<img
|
|
||||||
src="https://hc-cdn.hel1.your-objectstorage.com/s/v3/77e7a04f27807b4e0c16bcda09ea222f9e091616_group_18.svg"
|
|
||||||
id="logo"
|
|
||||||
alt="ClassRoomStuff Logo"
|
|
||||||
/>
|
|
||||||
<h2>A collection of awesome tools, games, and more — made to be used in any classroom!</h2>
|
|
||||||
<h3>MAIN</h3>
|
|
||||||
<div id="items2">
|
|
||||||
<a href="/kahootclone">
|
|
||||||
<button class="button2">
|
|
||||||
<span class="front2">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="70px"
|
|
||||||
viewBox="0 -960 960 960"
|
|
||||||
width="70px"
|
|
||||||
fill="#e3e3e3"
|
|
||||||
><path
|
|
||||||
d="M560-360q17 0 29.5-12.5T602-402q0-17-12.5-29.5T560-444q-17 0-29.5 12.5T518-402q0 17 12.5 29.5T560-360Zm-30-128h60q0-29 6-42.5t28-35.5q30-30 40-48.5t10-43.5q0-45-31.5-73.5T560-760q-41 0-71.5 23T446-676l54 22q9-25 24.5-37.5T560-704q24 0 39 13.5t15 36.5q0 14-8 26.5T578-596q-33 29-40.5 45.5T530-488ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
DaKahootClone
|
|
||||||
<p>The best ever kahoot clone.</p>
|
|
||||||
</span>
|
|
||||||
</button></a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<h3>OTHERS</h3>
|
|
||||||
<div id="items">
|
|
||||||
<a href="/IdleScreen">
|
|
||||||
<button>
|
|
||||||
<span class="front">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="30px"
|
|
||||||
viewBox="0 -960 960 960"
|
|
||||||
width="30px"
|
|
||||||
fill="#FFFFFF"
|
|
||||||
><path
|
|
||||||
d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
Timetable
|
|
||||||
<p>Clock included!</p></span
|
|
||||||
>
|
|
||||||
</button></a
|
|
||||||
>
|
|
||||||
<a href="/RandomName">
|
|
||||||
<button>
|
|
||||||
<span class="front">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="30px"
|
|
||||||
viewBox="0 -960 960 960"
|
|
||||||
width="30px"
|
|
||||||
fill="#FFFFFF"
|
|
||||||
><path
|
|
||||||
d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
Name selector
|
|
||||||
<p>for any class activity!</p></span
|
|
||||||
>
|
|
||||||
</button></a
|
|
||||||
>
|
|
||||||
<a href="/wordle">
|
|
||||||
<button>
|
|
||||||
<span class="front">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="30px"
|
|
||||||
viewBox="0 -960 960 960"
|
|
||||||
width="30px"
|
|
||||||
fill="#FFFFFF"
|
|
||||||
><path
|
|
||||||
d="M182-200q-51 0-79-35.5T82-322l42-300q9-60 53.5-99T282-760h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778-200q-21 0-39-7.5T706-230l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm16-86 114-114h336l114 114q2 2 16 6 11 0 17.5-6.5T800-304l-44-308q-4-29-26-48.5T678-680H282q-30 0-52 19.5T204-612l-44 308q-2 11 4.5 17.5T182-280q2 0 16-6Zm482-154q17 0 28.5-11.5T720-480q0-17-11.5-28.5T680-520q-17 0-28.5 11.5T640-480q0 17 11.5 28.5T680-440Zm-80-120q17 0 28.5-11.5T640-600q0-17-11.5-28.5T600-640q-17 0-28.5 11.5T560-600q0 17 11.5 28.5T600-560ZM310-440h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Zm170-40Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
Wordle
|
|
||||||
<p>Challenge your vocabulary!</p></span
|
|
||||||
>
|
|
||||||
</button></a
|
|
||||||
>
|
|
||||||
|
|
||||||
<a href="/announcer">
|
|
||||||
<button>
|
|
||||||
<span class="front">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="30px"
|
|
||||||
viewBox="0 -960 960 960"
|
|
||||||
width="30px"
|
|
||||||
fill="#FFFFFF"
|
|
||||||
><path
|
|
||||||
d="M720-440v-80h160v80H720Zm48 280-128-96 48-64 128 96-48 64Zm-80-480-48-64 128-96 48 64-128 96ZM200-200v-160h-40q-33 0-56.5-23.5T80-440v-80q0-33 23.5-56.5T160-600h160l200-120v480L320-360h-40v160h-80Zm240-182v-196l-98 58H160v80h182l98 58Zm120 36v-268q27 24 43.5 58.5T620-480q0 41-16.5 75.5T560-346ZM300-480Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
Announcer
|
|
||||||
<p>to shout from the speakers!</p></span
|
|
||||||
>
|
|
||||||
</button></a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="BottomBadge">
|
|
||||||
Made by <a href="https://rezhack.xyz" target="_blank">RezHackXYZ</a> for
|
|
||||||
<a href="https://neighborhood.hackclub.com/" target="_blank">Neighborhood</a>!
|
|
||||||
<a href="https://github.com/RezHackXYZ/ClassRoomStuff" target="_blank">Contribute here</a> if you
|
|
||||||
want.
|
|
||||||
</div>
|
|
||||||
|
|
@ -3,11 +3,9 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@apply bg-gray-950 p-5 text-white;
|
@apply bg-gray-950 text-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
@apply cursor-pointer rounded border-2 border-white bg-gray-600 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:-rotate-5 hover:bg-gray-500 hover:shadow-lg;
|
@apply cursor-pointer rounded border-2 border-white bg-gray-600 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:-rotate-5 hover:bg-gray-500 hover:shadow-lg;
|
||||||
|
|
||||||
|
|
@ -15,3 +13,7 @@
|
||||||
@apply bg-green-600 hover:bg-green-500;
|
@apply bg-green-600 hover:bg-green-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
@apply shadow-[4px_4px_0px_0px_white] hover:-translate-0.5 hover:shadow-[6px_6px_0px_0px_white] active:translate-0.5 active:shadow-[2px_2px_0px_0px_white] cursor-pointer border-2 border-gray-700 bg-gray-800 p-4 rounded transition-all;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue