RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mored on ui for the Random Name , now working on seting the absentesa nd all thing

Browse source
This commit is contained in:
RezHackXYZ 2025-05-06 18:29:08 +05:30
parent 1ac14dca72
commit 70c9a703c5
8 changed files with 359 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/RandomName/TopDisplay.svelte Normal file
View file

@ -0,0 +1,90 @@
<script>
import { RandomNamesState } from "./main.svelte";
</script>
<div id="root">
<div id="NotSelectedYet">
<h1>Not Selected Yet</h1>
<div class="wrap">
{#each RandomNamesState.NotSelectedYet as name}
<span draggable="true" class="NotSelectedYet">
{name}
</span>
{/each}
</div>
</div>
<hr />
<div id="Selected">
<h1>Selected</h1>
<div class="wrap">
{#each RandomNamesState.Selected as name}
<span draggable="true" class="Selected">
{name}
</span>
{/each}
</div>
</div>
<hr />
<div id="Absent">
<h1>Absent</h1>
<div class="wrap">
{#each RandomNamesState.Absent as name}
<span draggable="true" class="Absent">
{name}
</span>
{/each}
</div>
</div>
</div>
<style>
#root {
display: flex;
overflow-x: hidden;
}
span {
margin: 5px;
padding: 5px;
border-radius: 5px;
background-color: #4d4d4d;
color: white;
font-size: 30px;
}
h1 {
text-align: center;
font-size: 40px;
margin: 0;
}
#NotSelectedYet,
#Selected {
min-width: 40%;
max-width: 40%;
}
#Absent {
min-width: 20%;
max-width: 20%;
}
.wrap {
display: flex;
flex-wrap: wrap;
height: fit-content;
justify-content: center;
}
.NotSelectedYet {
color: #ffe677;
}
.Selected {
color: #a3ffa3;
}
.Absent {
color: #242424;
}
</style>