mentaian uniformity in ui!

This commit is contained in:
RezHackXYZ 2025-06-07 15:06:04 +05:30
parent 5bd3b83973
commit 5d8dbfd330
8 changed files with 11 additions and 13 deletions

View file

@ -1,17 +1,15 @@
<script>
import tools from "./tools.json"
import tools from "./tools.json";
</script>
<div id="galarry" class="flex items-center justify-center p-3">
<div
class="flex flex-wrap justify-center gap-5"
>
<div class="flex max-w-[1300px] 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='https://image.thum.io/get/fullpage/wait/5/maxAge/1/https://classroomstuff.xyz/{tool.link}'
src="https://image.thum.io/get/fullpage/wait/5/maxAge/1/https://classroomstuff.xyz/{tool.link}"
alt="how the tool {tool.name} looks like"
/>
<div

View file

@ -1,5 +1,5 @@
<script>
import { PlayingAnnouncement ,CurrentText} from "./logic/announcerData.svelte.js";
import { PlayingAnnouncement, CurrentText } from "./logic/announcerData.svelte.js";
import List from "./components/CommonAnounceedTexts/list.svelte";
import Add from "./components/CustomText/add.svelte";
@ -11,7 +11,7 @@
</script>
<div class="flex h-full flex-col items-center justify-center gap-5 p-5">
<div class="w-fit rounded-2xl bg-gray-900 p-3">
<div class="w-fit rounded border-2 p-3">
{#if PlayingAnnouncement.v == true}
<p class="text-center text-5xl">{CurrentText.v}</p>
{:else}

View file

@ -6,7 +6,7 @@
</script>
<button
class="cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-120 hover:-rotate-15 hover:bg-gray-600"
class="btn dull"
aria-label="Delete announcement"
onclick={() => DeleteMostUsedAnnouncement(announcementID)}
>

View file

@ -6,7 +6,7 @@
</script>
<button
class="w-full cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-105 hover:bg-gray-600"
class="btn w-full"
onclick={() => AnnounceUsingTTS(announcementText)}
>
📢 {announcementText}

View file

@ -6,7 +6,7 @@
{#if CurrentText.v}
<div class="flex w-full justify-center mt-2">
<button
class="text-1xl w-fit cursor-pointer self-center rounded-2xl bg-gray-800 p-2.5 transition-all hover:scale-110 hover:bg-gray-600"
class="btn dull"
onclick={() => {
AddMostUsedAnnouncement(CurrentText.v);
CurrentText.v = "";

View file

@ -5,5 +5,5 @@
<input
bind:value={CurrentText.v}
placeholder="Type in here what you want to announce"
class="flex-1 rounded-2xl bg-gray-800 p-2.5 text-2xl"
class="input"
/>

View file

@ -4,7 +4,7 @@
</script>
<button
class="cursor-pointer rounded-2xl bg-gray-800 p-2.5 text-2xl transition-all hover:scale-120 hover:-rotate-15 hover:bg-gray-600"
class="btn"
onclick={() => AnnounceUsingTTS(CurrentText.v)}
>
📢</button

View file

@ -8,7 +8,7 @@
}
.btn {
@apply flex cursor-pointer items-center gap-1 rounded border-2 border-white bg-gray-700 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:bg-gray-500 hover:shadow-lg;
@apply flex cursor-pointer items-center gap-1 rounded border-2 border-gray-700 bg-gray-800 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:bg-gray-500 hover:border-white hover:shadow-lg;
&.dull {
@apply border-gray-700 bg-transparent text-gray-700 hover:bg-gray-700 hover:text-white;