tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
Archived
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat: extra vertalingen

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-05-18 12:15:05 +02:00
parent 149e4e80fc
commit c4f178aa52
6 changed files with 320 additions and 280 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/i18n/locale/de.json
View file

@ -165,5 +165,21 @@
"pathContainsNonExistingLearningObjects": "Mindestens eines der in diesem Pfad referenzierten Lernobjekte existiert nicht.", "pathContainsNonExistingLearningObjects": "Mindestens eines der in diesem Pfad referenzierten Lernobjekte existiert nicht.",
"targetAgesMandatory": "Zielalter müssen angegeben werden.", "targetAgesMandatory": "Zielalter müssen angegeben werden.",
"hintRemoveIfUnconditionalTransition": "(entfernen, wenn dies ein bedingungsloser Übergang sein soll)", "hintRemoveIfUnconditionalTransition": "(entfernen, wenn dies ein bedingungsloser Übergang sein soll)",
"hintKeywordsSeparatedBySpaces": "Schlüsselwörter durch Leerzeichen getrennt" "hintKeywordsSeparatedBySpaces": "Schlüsselwörter durch Leerzeichen getrennt",
"title-required": "Titel darf nicht leer sein.",
"class-required": "Du musst eine Klasse auswählen.",
"deadline-invalid": "Ungültiges Datum oder Uhrzeit.",
"deadline-past": "Die Frist muss in der Zukunft liegen.",
"lp-required": "Du musst einen Lernpfad auswählen.",
"lp-invalid": "Der ausgewählte Lernpfad existiert nicht.",
"currently-no-groups": "Es gibt keine Gruppen für diese Aufgabe.",
"random-grouping": "Gruppen zufällig erstellen",
"drag-and-drop": "Gruppen manuell erstellen",
"generate-groups": "erzeugen",
"auto-generate-groups": "Gruppen gleicher Größe erstellen",
"preview": "Vorschau",
"current-groups": "Aktuelle Gruppen",
"group-size-label": "Gruppengröße",
"save": "Speichern",
"unassigned": "Nicht zugewiesen"
} }

2
frontend/src/i18n/locale/en.json
View file

@ -168,7 +168,7 @@
"hintRemoveIfUnconditionalTransition": "(remove this if this should be an unconditional transition)", "hintRemoveIfUnconditionalTransition": "(remove this if this should be an unconditional transition)",
"hintKeywordsSeparatedBySpaces": "Keywords separated by spaces", "hintKeywordsSeparatedBySpaces": "Keywords separated by spaces",
"title-required": "Title cannot be empty.", "title-required": "Title cannot be empty.",
"class-required": "You must select at least one class.", "class-required": "You must select a class.",
"deadline-invalid": "Invalid date or time.", "deadline-invalid": "Invalid date or time.",
"deadline-past": "The deadline must be in the future.", "deadline-past": "The deadline must be in the future.",
"lp-required": "You must select a learning path.", "lp-required": "You must select a learning path.",

22
frontend/src/i18n/locale/fr.json
View file

@ -88,7 +88,7 @@
"deny": "refuser", "deny": "refuser",
"sent": "envoyé", "sent": "envoyé",
"failed": "échoué", "failed": "échoué",
"wrong": "quelque chose n'a pas fonctionné", "wrong": "Il y a une erreur",
"created": "créé", "created": "créé",
"callbackLoading": "Vous serez connecté...", "callbackLoading": "Vous serez connecté...",
"loginUnexpectedError": "La connexion a échoué", "loginUnexpectedError": "La connexion a échoué",
@ -98,7 +98,7 @@
"groupSubmissions": "Soumissions de ce groupe", "groupSubmissions": "Soumissions de ce groupe",
"taskCompleted": "Tâche terminée.", "taskCompleted": "Tâche terminée.",
"submittedBy": "Soumis par", "submittedBy": "Soumis par",
"timestamp": "Horodatage", "timestamp": "Date et heure",
"loadSubmission": "Charger", "loadSubmission": "Charger",
"noSubmissionsYet": "Pas encore de soumissions.", "noSubmissionsYet": "Pas encore de soumissions.",
"viewAsGroup": "Voir la progression du groupe...", "viewAsGroup": "Voir la progression du groupe...",
@ -166,5 +166,21 @@
"pathContainsNonExistingLearningObjects": "Au moins un des objets d’apprentissage référencés dans ce chemin n’existe pas.", "pathContainsNonExistingLearningObjects": "Au moins un des objets d’apprentissage référencés dans ce chemin n’existe pas.",
"targetAgesMandatory": "Les âges cibles doivent être spécifiés.", "targetAgesMandatory": "Les âges cibles doivent être spécifiés.",
"hintRemoveIfUnconditionalTransition": "(supprimer ceci s’il s’agit d’une transition inconditionnelle)", "hintRemoveIfUnconditionalTransition": "(supprimer ceci s’il s’agit d’une transition inconditionnelle)",
"hintKeywordsSeparatedBySpaces": "Mots-clés séparés par des espaces" "hintKeywordsSeparatedBySpaces": "Mots-clés séparés par des espaces",
"title-required": "Le titre ne peut pas être vide.",
"class-required": "Vous devez sélectionner une classe.",
"deadline-invalid": "Date ou heure invalide.",
"deadline-past": "La date limite doit être dans le futur.",
"lp-required": "Vous devez sélectionner un parcours d'apprentissage.",
"lp-invalid": "Le parcours d'apprentissage sélectionné n'existe pas.",
"currently-no-groups": "Il n’y a pas de groupes pour cette tâche.",
"random-grouping": "Créer des groupes aléatoirement",
"drag-and-drop": "Créer des groupes manuellement",
"generate-groups": "générer",
"auto-generate-groups": "Créer des groupes de taille égale",
"preview": "Aperçu",
"current-groups": "Groupes actuels",
"group-size-label": "Taille des groupes",
"save": "Enregistrer",
"unassigned": "Non assigné"
} }

18
frontend/src/i18n/locale/nl.json
View file

@ -165,5 +165,21 @@
"pathContainsNonExistingLearningObjects": "Ten minste één van de leerobjecten in dit pad bestaat niet.", "pathContainsNonExistingLearningObjects": "Ten minste één van de leerobjecten in dit pad bestaat niet.",
"targetAgesMandatory": "Doelleeftijden moeten worden opgegeven.", "targetAgesMandatory": "Doelleeftijden moeten worden opgegeven.",
"hintRemoveIfUnconditionalTransition": "(verwijder dit voor onvoorwaardelijke overgangen)", "hintRemoveIfUnconditionalTransition": "(verwijder dit voor onvoorwaardelijke overgangen)",
"hintKeywordsSeparatedBySpaces": "Trefwoorden gescheiden door spaties" "hintKeywordsSeparatedBySpaces": "Trefwoorden gescheiden door spaties",
"title-required": "Titel mag niet leeg zijn.",
"class-required": "Je moet een klas selecteren.",
"deadline-invalid": "Ongeldige datum of tijd.",
"deadline-past": "De deadline moet in de toekomst liggen.",
"lp-required": "Je moet een leerpad selecteren.",
"lp-invalid": "Het geselecteerde leerpad bestaat niet.",
"currently-no-groups": "Er zijn geen groepen voor deze opdracht.",
"random-grouping": "Groepeer willekeurig",
"drag-and-drop": "Stel groepen handmatig samen",
"generate-groups": "genereren",
"auto-generate-groups": "Maak groepen van gelijke grootte",
"preview": "Voorbeeld",
"current-groups": "Huidige groepen",
"group-size-label": "Grootte van groepen",
"save": "Opslaan",
"unassigned": "Niet toegewezen"
} }

168
frontend/src/views/assignments/StudentAssignment.vue
View file

@ -1,101 +1,95 @@
<script setup lang="ts"> <script setup lang="ts">
import {ref, computed, watchEffect} from "vue"; import { ref, computed, watchEffect } from "vue";
import auth from "@/services/auth/auth-service.ts"; import auth from "@/services/auth/auth-service.ts";
import {useI18n} from "vue-i18n"; import { useI18n } from "vue-i18n";
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
import type {AssignmentsResponse} from "@/controllers/assignments.ts"; import { asyncComputed } from "@vueuse/core";
import {asyncComputed} from "@vueuse/core"; import {
import { useStudentAssignmentsQuery,
useStudentAssignmentsQuery, useStudentGroupsQuery,
useStudentGroupsQuery, useStudentsByUsernamesQuery,
useStudentsByUsernamesQuery } from "@/queries/students.ts";
} from "@/queries/students.ts"; import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
import {useGetLearningPathQuery} from "@/queries/learning-paths.ts"; import type { Language } from "@/data-objects/language.ts";
import type {Language} from "@/data-objects/language.ts"; import { calculateProgress } from "@/utils/assignment-utils.ts";
import {calculateProgress} from "@/utils/assignment-utils.ts"; import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
const props = defineProps<{ const props = defineProps<{
classId: string; classId: string;
assignmentId: number; assignmentId: number;
}>(); }>();
const {t} = useI18n(); const { t } = useI18n();
const lang = ref(); const lang = ref();
const learningPath = ref(); const learningPath = ref();
// Get the user's username/id // Get the user's username/id
const username = asyncComputed(async () => { const username = asyncComputed(async () => {
const user = await auth.loadUser(); const user = await auth.loadUser();
return user?.profile?.preferred_username ?? undefined; return user?.profile?.preferred_username ?? undefined;
}); });
const assignmentsQueryResult = useStudentAssignmentsQuery(username, true); const assignmentsQueryResult = useStudentAssignmentsQuery(username, true);
const assignment = computed(() => { const assignment = computed(() => {
const assignments = assignmentsQueryResult.data.value?.assignments; const assignments = assignmentsQueryResult.data.value?.assignments;
if (!assignments) return undefined; if (!assignments) return undefined;
return assignments.find( return assignments.find((a) => a.id === props.assignmentId && a.within === props.classId);
(a) => a.id === props.assignmentId && a.within === props.classId });
);
});
learningPath.value = assignment.value?.learningPath;
const groupsQueryResult = useStudentGroupsQuery(username, true);
const group = computed(() => {
const groups = groupsQueryResult.data.value?.groups;
if (!groups) return undefined;
// Sort by original groupNumber
const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber);
return sortedGroups
.map((group, index) => ({
...group,
groupNo: index + 1, // Renumbered index
}))
.find((group) => group.members?.some((m) => m.username === username.value));
});
watchEffect(() => {
learningPath.value = assignment.value?.learningPath; learningPath.value = assignment.value?.learningPath;
lang.value = assignment.value?.language as Language;
});
const learningPathParams = computed(() => { const groupsQueryResult = useStudentGroupsQuery(username, true);
if (!group.value || !learningPath.value || !lang.value) return undefined; const group = computed(() => {
const groups = groupsQueryResult.data.value?.groups;
return { if (!groups) return undefined;
forGroup: group.value.groupNumber,
assignmentNo: props.assignmentId,
classId: props.classId,
};
});
const lpQueryResult = useGetLearningPathQuery( // Sort by original groupNumber
() => learningPath.value, const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber);
() => lang.value,
() => learningPathParams.value,
);
const progressColor = computed(() => { return sortedGroups
const progress = calculateProgress(lpQueryResult.data.value as LearningPath); .map((group, index) => ({
if (progress >= 100) return "success"; ...group,
if (progress >= 50) return "warning"; groupNo: index + 1, // Renumbered index
return "error"; }))
}); .find((group) => group.members?.some((m) => m.username === username.value));
});
const studentQueries = useStudentsByUsernamesQuery(() => (group.value?.members as string[]) ?? undefined); watchEffect(() => {
learningPath.value = assignment.value?.learningPath;
lang.value = assignment.value?.language as Language;
});
const learningPathParams = computed(() => {
if (!group.value || !learningPath.value || !lang.value) return undefined;
return {
forGroup: group.value.groupNumber,
assignmentNo: props.assignmentId,
classId: props.classId,
};
});
const lpQueryResult = useGetLearningPathQuery(
() => learningPath.value,
() => lang.value,
() => learningPathParams.value,
);
const progressColor = computed(() => {
const progress = calculateProgress(lpQueryResult.data.value as LearningPath);
if (progress >= 100) return "success";
if (progress >= 50) return "warning";
return "error";
});
const studentQueries = useStudentsByUsernamesQuery(() => (group.value?.members as string[]) ?? undefined);
</script> </script>
<template> <template>
<div class="container"> <div class="container">
<using-query-result <using-query-result :query-result="assignmentsQueryResult">
:query-result="assignmentsQueryResult"
>
<v-card <v-card
v-if="assignment" v-if="assignment"
class="assignment-card" class="assignment-card"
@ -110,9 +104,7 @@ const studentQueries = useStudentsByUsernamesQuery(() => (group.value?.members a
<v-icon>mdi-arrow-left</v-icon> <v-icon>mdi-arrow-left</v-icon>
</v-btn> </v-btn>
</div> </div>
<v-card-title class="text-h4 assignmentTopTitle" <v-card-title class="text-h4 assignmentTopTitle">{{ assignment.title }} </v-card-title>
>{{ assignment.title }}
</v-card-title>
<v-card-subtitle class="subtitle-section"> <v-card-subtitle class="subtitle-section">
<using-query-result <using-query-result
@ -190,9 +182,9 @@ const studentQueries = useStudentsByUsernamesQuery(() => (group.value?.members a
</template> </template>
<style scoped> <style scoped>
@import "@/assets/assignment.css"; @import "@/assets/assignment.css";
.progress-bar { .progress-bar {
width: 40%; width: 40%;
} }
</style> </style>

372
frontend/src/views/assignments/UserAssignments.vue
View file

@ -1,139 +1,138 @@
<script setup lang="ts"> <script setup lang="ts">
import {ref, computed, onMounted, watch} from "vue"; import { ref, computed, onMounted, watch } from "vue";
import {useI18n} from "vue-i18n"; import { useI18n } from "vue-i18n";
import {useRouter} from "vue-router"; import { useRouter } from "vue-router";
import authState from "@/services/auth/auth-service.ts"; import authState from "@/services/auth/auth-service.ts";
import auth from "@/services/auth/auth-service.ts"; import auth from "@/services/auth/auth-service.ts";
import {useTeacherAssignmentsQuery, useTeacherClassesQuery} from "@/queries/teachers.ts"; import { useTeacherAssignmentsQuery, useTeacherClassesQuery } from "@/queries/teachers.ts";
import {useStudentAssignmentsQuery, useStudentClassesQuery} from "@/queries/students.ts"; import { useStudentAssignmentsQuery, useStudentClassesQuery } from "@/queries/students.ts";
import {useDeleteAssignmentMutation} from "@/queries/assignments.ts"; import { useDeleteAssignmentMutation } from "@/queries/assignments.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
const {t, locale} = useI18n(); const { t, locale } = useI18n();
const router = useRouter(); const router = useRouter();
const role = ref(auth.authState.activeRole); const role = ref(auth.authState.activeRole);
const isTeacher = computed(() => role.value === "teacher"); const isTeacher = computed(() => role.value === "teacher");
const username = ref<string | undefined>(undefined); const username = ref<string | undefined>(undefined);
const isLoading = ref(false); const isLoading = ref(false);
const isError = ref(false); const isError = ref(false);
const errorMessage = ref<string>(""); const errorMessage = ref<string>("");
// Load current user before rendering the page // Load current user before rendering the page
onMounted(async () => { onMounted(async () => {
isLoading.value = true; isLoading.value = true;
try { try {
const userObject = await authState.loadUser(); const userObject = await authState.loadUser();
username.value = userObject!.profile.preferred_username; username.value = userObject!.profile.preferred_username;
} catch (error) { } catch (error) {
isError.value = true; isError.value = true;
errorMessage.value = error instanceof Error ? error.message : String(error); errorMessage.value = error instanceof Error ? error.message : String(error);
} finally { } finally {
isLoading.value = false; isLoading.value = false;
} }
});
const classesQueryResult = isTeacher.value
? useTeacherClassesQuery(username, true)
: useStudentClassesQuery(username, true);
const assignmentsQueryResult = isTeacher.value
? useTeacherAssignmentsQuery(username, true)
: useStudentAssignmentsQuery(username, true);
const allAssignments = computed(() => {
const assignments = assignmentsQueryResult.data.value?.assignments;
if (!assignments) return [];
const classes = classesQueryResult.data.value?.classes;
if (!classes) return [];
const result = assignments.map((a) => ({
id: a.id,
class: classes.find((cls) => cls?.id === a.within) ?? undefined,
title: a.title,
description: a.description,
learningPath: a.learningPath,
language: a.language,
deadline: a.deadline,
groups: a.groups,
}));
// Order the assignments by deadline
return result.flat().sort((a, b) => {
const now = Date.now();
const aTime = new Date(a.deadline).getTime();
const bTime = new Date(b.deadline).getTime();
const aIsPast = aTime < now;
const bIsPast = bTime < now;
if (aIsPast && !bIsPast) return 1;
if (!aIsPast && bIsPast) return -1;
return aTime - bTime;
}); });
});
const classesQueryResult = isTeacher.value
? useTeacherClassesQuery(username, true)
: useStudentClassesQuery(username, true);
async function goToCreateAssignment(): Promise<void> { const assignmentsQueryResult = isTeacher.value
await router.push("/assignment/create"); ? useTeacherAssignmentsQuery(username, true)
} : useStudentAssignmentsQuery(username, true);
async function goToAssignmentDetails(id: number, clsId: string): Promise<void> { const allAssignments = computed(() => {
await router.push(`/assignment/${clsId}/${id}`); const assignments = assignmentsQueryResult.data.value?.assignments;
} if (!assignments) return [];
const {mutate, data, isSuccess} = useDeleteAssignmentMutation(); const classes = classesQueryResult.data.value?.classes;
if (!classes) return [];
watch([isSuccess, data], async ([success, oldData]) => { const result = assignments.map((a) => ({
if (success && oldData?.assignment) { id: a.id,
window.location.reload(); class: classes.find((cls) => cls?.id === a.within) ?? undefined,
} title: a.title,
}); description: a.description,
learningPath: a.learningPath,
language: a.language,
deadline: a.deadline,
groups: a.groups,
}));
async function goToDeleteAssignment(num: number, clsId: string): Promise<void> { // Order the assignments by deadline
mutate({cid: clsId, an: num}); return result.flat().sort((a, b) => {
} const now = Date.now();
const aTime = new Date(a.deadline).getTime();
const bTime = new Date(b.deadline).getTime();
function formatDate(date?: string | Date): string { const aIsPast = aTime < now;
if (!date) return "–"; const bIsPast = bTime < now;
const d = new Date(date);
// Choose locale based on selected language if (aIsPast && !bIsPast) return 1;
const currentLocale = locale.value; if (!aIsPast && bIsPast) return -1;
return d.toLocaleDateString(currentLocale, { return aTime - bTime;
weekday: "short", });
day: "2-digit",
month: "long",
year: "numeric",
hour: "numeric",
minute: "2-digit",
}); });
}
function getDeadlineClass(deadline?: string | Date): string { async function goToCreateAssignment(): Promise<void> {
if (!deadline) return ""; await router.push("/assignment/create");
}
const date = new Date(deadline); async function goToAssignmentDetails(id: number, clsId: string): Promise<void> {
const now = new Date(); await router.push(`/assignment/${clsId}/${id}`);
const in24Hours = new Date(now.getTime() + 24 * 60 * 60 * 1000); }
if (date.getTime() < now.getTime()) return "deadline-passed"; const { mutate, data, isSuccess } = useDeleteAssignmentMutation();
if (date.getTime() <= in24Hours.getTime()) return "deadline-in24hours";
return "deadline-upcoming";
}
onMounted(async () => { watch([isSuccess, data], async ([success, oldData]) => {
const user = await auth.loadUser(); if (success && oldData?.assignment) {
username.value = user?.profile?.preferred_username ?? ""; window.location.reload();
}); }
});
onMounted(async () => { async function goToDeleteAssignment(num: number, clsId: string): Promise<void> {
const user = await auth.loadUser(); mutate({ cid: clsId, an: num });
username.value = user?.profile?.preferred_username ?? ""; }
});
function formatDate(date?: string | Date): string {
if (!date) return "–";
const d = new Date(date);
// Choose locale based on selected language
const currentLocale = locale.value;
return d.toLocaleDateString(currentLocale, {
weekday: "short",
day: "2-digit",
month: "long",
year: "numeric",
hour: "numeric",
minute: "2-digit",
});
}
function getDeadlineClass(deadline?: string | Date): string {
if (!deadline) return "";
const date = new Date(deadline);
const now = new Date();
const in24Hours = new Date(now.getTime() + 24 * 60 * 60 * 1000);
if (date.getTime() < now.getTime()) return "deadline-passed";
if (date.getTime() <= in24Hours.getTime()) return "deadline-in24hours";
return "deadline-upcoming";
}
onMounted(async () => {
const user = await auth.loadUser();
username.value = user?.profile?.preferred_username ?? "";
});
onMounted(async () => {
const user = await auth.loadUser();
username.value = user?.profile?.preferred_username ?? "";
});
</script> </script>
<template> <template>
@ -210,87 +209,88 @@ onMounted(async () => {
</template> </template>
<style scoped> <style scoped>
.assignments-container { .assignments-container {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
} }
.center-btn { .center-btn {
display: block; display: block;
margin: 0 auto 2rem auto; margin: 0 auto 2rem auto;
font-weight: 600; font-weight: 600;
background-color: #10ad61; background-color: #10ad61;
color: white; color: white;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
.center-btn:hover { .center-btn:hover {
background-color: #0e6942; background-color: #0e6942;
} }
.assignment-card { .assignment-card {
padding: 1.25rem; padding: 1.25rem;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
background-color: white; background-color: white;
transition: transform 0.2s, transition:
box-shadow 0.2s; transform 0.2s,
} box-shadow 0.2s;
}
.assignment-card:hover { .assignment-card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
} }
.top-content { .top-content {
margin-bottom: 1rem; margin-bottom: 1rem;
word-break: break-word; word-break: break-word;
} }
.assignment-title { .assignment-title {
font-weight: 700; font-weight: 700;
font-size: 1.4rem; font-size: 1.4rem;
color: #0e6942; color: #0e6942;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.assignment-class, .assignment-class,
.assignment-deadline { .assignment-deadline {
font-size: 0.95rem; font-size: 0.95rem;
color: #444; color: #444;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.class-name { .class-name {
font-weight: 600; font-weight: 600;
color: #097180; color: #097180;
} }
.assignment-deadline.deadline-passed { .assignment-deadline.deadline-passed {
color: #d32f2f; color: #d32f2f;
font-weight: bold; font-weight: bold;
} }
.assignment-deadline.deadline-in24hours { .assignment-deadline.deadline-in24hours {
color: #f57c00; color: #f57c00;
font-weight: bold; font-weight: bold;
} }
.spacer { .spacer {
flex: 1; flex: 1;
} }
.button-row { .button-row {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 0.75rem; gap: 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.no-assignments { .no-assignments {
text-align: center; text-align: center;
font-size: 1.2rem; font-size: 1.2rem;
color: #777; color: #777;
padding: 3rem 0; padding: 3rem 0;
} }
</style> </style>