mentaian uniformity in ui!
This commit is contained in:
parent
5bd3b83973
commit
5d8dbfd330
8 changed files with 11 additions and 13 deletions
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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)}
|
||||
>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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 = "";
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue