DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS school progress
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / Rebuild Signaller (push) Successful in 23s
Details

Browse source
This commit is contained in:
BOTAlex 2026-05-22 11:53:41 +02:00
parent 3dfb5810f2
commit 8d3e7af85f
1 changed files with 26 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/routes/school/css/+page.svelte
View file

@ -23,6 +23,7 @@
} }
let currentCountry: string = ""; let currentCountry: string = "";
let currentCountrySelected: string = "";
let interactiveEmbed: HTMLIFrameElement; let interactiveEmbed: HTMLIFrameElement;
function selectCountry(country: string, towards: boolean) { function selectCountry(country: string, towards: boolean) {
@ -33,10 +34,16 @@
(towards ? "in" : "out") + (towards ? "in" : "out") +
".html"; ".html";
interactiveEmbed.scrollIntoView({ currentCountrySelected = towards
behavior: "smooth", ? "Others towards " + getCountryName(country)
block: "start", : getCountryName(country) + "'s opinion of others";
});
setTimeout(() => {
interactiveEmbed.scrollIntoView({
behavior: "smooth",
block: "end",
});
}, 200);
} }
function getCountryName(code) { function getCountryName(code) {
@ -65,7 +72,7 @@
}); });
</script> </script>
<div class="flex flex-col w-full h-full pt-40 gap-16"> <div class="flex flex-col w-full h-full pt-40 gap-16 NotoSans">
<div class="flex justify-center w-full"> <div class="flex justify-center w-full">
<h1 class="text-4xl">Computational Social Science</h1> <h1 class="text-4xl">Computational Social Science</h1>
</div> </div>
@ -129,7 +136,11 @@
</div> </div>
</div> </div>
<div style="width: 80%; height: 800px;"> <div
class={currentCountry == "" ? "hidden" : ""}
style="width: 80%; height: 800px;"
>
<div>{currentCountrySelected}</div>
<iframe <iframe
src={currentCountry} src={currentCountry}
width="100%" width="100%"
@ -144,10 +155,19 @@
<div class="w-[40%]"> <div class="w-[40%]">
<div class="text-2xl">List of interactive graphs</div> <div class="text-2xl">List of interactive graphs</div>
<table class="table"> <table class="table">
<thead>
<tr>
<th>Country</th>
<th>ISO3</th>
<th>From buttons</th>
<th>Towards buttons</th>
</tr>
</thead>
<tbody> <tbody>
{#each iso3 as country} {#each iso3 as country}
<tr> <tr>
<th>{getCountryName(country)}</th> <th>{getCountryName(country)}</th>
<th>{country}</th>
<th <th
><button ><button
on:click={() => selectCountry(country, false)} on:click={() => selectCountry(country, false)}