info student page, info company page, register, register student page

frontend/app/components/NavBar.vue

@@ -2,7 +2,7 @@
     <div>
         <v-app-bar color="rgb(46, 125, 50)" style="color: white" :elevation="2">
             <v-btn variant="text" dense to="/">Domov</v-btn>
-            <v-btn variant="text" dense>Register</v-btn>
+            <v-btn variant="text" dense to="/register">Register</v-btn>
             <v-btn variant="text" dense>Login</v-btn>
 
             <v-spacer></v-spacer>

frontend/app/components/PageCard.vue

@@ -1,7 +1,12 @@
 <template>
     <v-card variant="outlined" :width="300" class="d-flex flex-column" style="margin: 20px; cursor: pointer" link
         :to="link">
-        <v-card-title class="text-wrap"><strong>{{ title }}</strong></v-card-title>
+        <v-card-title class="text-wrap">
+            <div class="title-row">
+                <v-icon v-if="icon" :icon="icon" size="24" class="title-icon" />
+                <strong class="title-text">{{ title }}</strong>
+            </div>
+        </v-card-title>
         <v-card-text>
             {{ description }}
         </v-card-text>
@@ -30,7 +35,26 @@ export default {
             required: true,
             type: String,
             validator: basicPropValidator
-        }
+        },
+        icon: {
+            required: false,
+            type: String,
+            default: null,
+        },
     }
 }
-</script>
+</script>
+
+<style scoped>
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;              
+}
+.title-icon {
+  transform: translateY(1px);
+}
+.title-text {
+  line-height: 1.2;    
+}
+</style>

frontend/app/pages/index.vue

@@ -5,11 +5,11 @@
                 <v-row>
                     <PageCard title="Informácie o odbornej praxi pre študentov"
                         description="Všetky informácie o predmete Oborná prax, ako ho absolvovať, pravidlá a zmluvy."
-                        link="/" />
+                        link="/infoStudent" />
 
                     <PageCard title="Informácie o odbornej praxi pre firmy"
                         description="Všetky informácie pre zamestnávateľov o zmluvách a pravidlách absolvovania odbornej praxe."
-                        link="/" />
+                        link="/infoCompany" />
 
                     <PageCard title="O aplikácii" description="Informácie o systéme ISOP." link="/about" />
 

frontend/app/pages/infoCompany.vue

@@ -0,0 +1,122 @@
+<template>
+  <h2 class="page-container page-title">Detaily a pravidlá odbornej  praxe pre firmy</h2>
+  <p class="page-container page-lead">
+    Kompletné informácie o odbornej praxi pre firmy
+  </p>
+
+  <br />
+
+  <h3 class="page-container section-title">Zmluvné podmienky</h3>
+
+  <v-row class="pc" align="stretch" justify="start">
+    <PageCard
+      title="Zmluva o odbornej praxi"
+      description="Medzi firmou a študentom sa uzatvára Zmluva o odbornej praxi, ktorá definuje práva a povinnosti oboch strán. 
+      Zmluva musí byť v súlade s legislatívou a internými predpismi školy." 
+      link="/"
+      icon="mdi mdi-file-document-edit-outline"
+    />
+  </v-row>
+
+  <h3 class="page-container section-title">Pravidlá a povinnost počas praxe</h3>
+
+  <v-row class="pc" align="stretch" justify="start">
+    <PageCard
+      title="Pridelenie mentora"
+      description="Každému študentovi musí byť pridelený zodpovedný zamestnanec (mentor), ktorý ho bude viesť, zadávať mu úlohy a poskytovať spätnú väzbu." 
+      link="/"
+      icon="mdi mdi-account-multiple-outline"
+    />
+    <PageCard
+      title="Relevantné úlohy"
+      description="Náplň práce študenta musí zodpovedať jeho študijnému odboru a umožniť mu získať praktické zručnosti a vedomosti." 
+      link="/"
+      icon="mdi mdi-notebook-check-outline"
+    />
+    <PageCard
+      title="Bezpečnosť pri práci"
+      description="Firma je povinná zabezpečiť preškolenie o bezpečnosti a ochrane zdravia pri práci (BOZP) a poskytnúť potrebné ochranné pomôcky." 
+      link="/"
+      icon="mdi mdi-shield-outline"
+    />
+  </v-row>
+
+  <h3 class="page-container section-title">Hodnotenie a ukončenie praxe</h3>
+
+  <div class="ac">
+  <v-expansion-panels
+    variant="accordion"
+    class="faq"
+    elevation="0"
+    rounded="lg"
+  >
+    <v-expansion-panel>
+      <v-expansion-panel-title>
+        Ako prebieha hodnotenie študenta?
+      </v-expansion-panel-title>
+      <v-expansion-panel-text>
+        Študenta hodnotí mentor vo firme a zodpovedná osoba na škole podľa
+        stanovených kritérií (účasť, splnené úlohy, kvalita výstupov a pod.).
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+
+    <v-expansion-panel>
+      <v-expansion-panel-title>
+        Aké dokumenty je potrebné vystaviť po ukončení praxe?
+      </v-expansion-panel-title>
+      <v-expansion-panel-text>
+        Typicky potvrdenie o absolvovaní praxe a hodnotiaci formulár
+        podpísaný mentorom. Presný zoznam dodá škola.
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</div>
+
+
+</template>
+
+<style scoped>
+.page-container {
+  max-width: 1120px; 
+  margin: 0 auto;      
+  padding-left: 24px;  
+  padding-right: 24px;
+}
+
+.page-title {
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 16px 0 8px;
+  color: #1f1f1f;
+}
+.page-lead {
+  margin: 0 0 24px 0;
+  color: #6b6b6b;
+}
+.pc {
+    margin: 0 0 24px 0;
+}
+.section-title {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 16px 0 12px;
+  color: #1f1f1f;
+}
+.ac {
+  margin-left: 24px;
+  margin-bottom: 50px;
+  max-width: 700px;
+}
+.faq :deep(.v-expansion-panel) {
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+}
+.faq :deep(.v-expansion-panel:not(:first-child)) {
+  margin-top: 12px;        
+}
+.faq :deep(.v-expansion-panel-title) {
+  font-weight: 600;       
+}
+
+</style>

frontend/app/pages/infoStudent.vue

@@ -0,0 +1,74 @@
+<template>
+  <h2 class="page-container page-title">Informácie o odbornej praxi pre študentov</h2>
+  <p class="page-container page-lead">
+    Kompletné informácie o odbornej praxi – priebeh, hodnotenie, zmluvy a pokyny pre študentov.
+  </p>
+
+  <br />
+
+  <h3 class="page-container section-title">Podmienky absolvovania predmetu</h3>
+
+  <v-row class="pc" align="stretch" justify="start">
+    <PageCard
+      title="Rozsah a účasť"
+      description="Absolvovanie praxe v minimálnom rozsahu 130 hodín a povinná účasť na úvodnom stretnutí"
+      link="/"
+      icon="mdi-clock-time-five-outline"
+    />
+    <PageCard
+      title="Denník praxe"
+      description="Priebežné vedenie denníka praxe podľa predpísanej štruktúry a jeho odovzdanie na konci obdobia."
+      link="/"
+      icon="mdi-notebook-edit-outline"
+    />
+    <PageCard
+      title="Poster a prezentácia"
+      description="Príprava a prezentácia posteru. Hodnotí sa obsah, vizuálna stránka a kvalita prezentácie."
+      link="/"
+      icon="mdi-presentation"
+    />
+    <PageCard
+      title="Bodové hodnotenie"
+      description="Max. 100 bodov (50b firma, 50b poster a prezentácia). Minimum pre absolvovanie je 51 bodov."
+      link="/"
+      icon="mdi-checkbox-marked-outline"
+    />
+    <PageCard
+      title="Kredity"
+      description="Po úspešnom absolvovaní predmetu študent získa 5 kreditov"
+      link="/"
+      icon="mdi-school-outline"
+    />
+  </v-row>
+</template>
+
+<style scoped>
+.page-container {
+  max-width: 1120px; 
+  margin: 0 auto;      
+  padding-left: 24px;  
+  padding-right: 24px;
+}
+
+.page-title {
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 16px 0 8px;
+  color: #1f1f1f;
+}
+.page-lead {
+  margin: 0 0 24px 0;
+  color: #6b6b6b;
+}
+.pc {
+    margin: 0 0 24px 0;
+}
+.section-title {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 16px 0 12px;
+  color: #1f1f1f;
+}
+
+</style>

frontend/app/pages/register.vue

@@ -0,0 +1,23 @@
+<template>
+
+  <v-row class="pc" align="stretch" justify="start">
+    <PageCard
+      title="Registrácia študenta"
+      description="Zaregistruj sa a začni svoju odbornú prax."
+      link="/registerStudent"
+      icon="mdi mdi-account"
+    />
+    <PageCard
+      title="Registrácia firmy"
+      description="Staň sa partnerskou firmou a pomôž študentom získať prax vo svojom odbore."
+      link="/registerCompany"
+      icon="mdi mdi-office-building"
+    />
+  </v-row>
+</template>
+
+<style scoped>
+.pc {
+    margin: 0 0 24px 0;
+}
+</style>

frontend/app/pages/registerCompany.vue

@@ -0,0 +1,39 @@
+<template>
+    <v-container fluid>
+        <v-card id="footer-card">
+            <h1>O aplikácii</h1>
+
+            <br />
+
+            <p>Táto aplikácia slúži na zaznamenávanie a správu odbornej praxe študentov.</p>
+            <p>Systém spravuje Fakulta prírodných vied a informatiky, UKF v Nitre.</p>
+
+            <br />
+
+            <p>Autori aplikácie:</p>
+            <ul id="authors-list">
+                <li>Bc. Sofia Reháková</li>
+                <li>Bc. Veronika Fehérvíziová</li>
+                <li>Bc. Fábián Varga</li>
+                <li>Bc. Dávid Kecskés</li>
+                <li>Bc. Andrej Kraslan</li>
+            </ul>
+        </v-card>
+    </v-container>
+</template>
+
+<style scoped>
+#footer-card {
+    padding-left: 10px;
+    padding-bottom: 10px;
+}
+
+#authors-list {
+    margin-left: 20px;
+}
+
+#authors-list li {
+    display: list-item;
+    list-style-type: disc;
+}
+</style>

frontend/app/pages/registerStudent.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="page-container form-wrap">
+    <h4 class="page-title">Registrácia študenta</h4>
+    <v-form v-model="isValid" @submit.prevent="onSubmit">
+      <v-text-field
+        v-model="form.title"
+        label="Tituly pred:"
+        variant="outlined"
+        density="comfortable"
+      />
+
+      <v-text-field
+        v-model="form.firstName"
+        :rules="[rules.required]"
+        label="Meno:"
+        variant="outlined"
+        density="comfortable"
+      />
+
+      <v-text-field
+        v-model="form.lastName"
+        :rules="[rules.required]"
+        label="Priezvisko:"
+        variant="outlined"
+        density="comfortable"
+      />
+
+      <v-text-field
+        v-model="form.address"
+        label="Adresa:"
+        variant="outlined"
+        density="comfortable"
+      />
+
+      <v-text-field
+        v-model="form.studentEmail"
+        :rules="[rules.required, rules.email]"
+        label="Študentský email:"
+        variant="outlined"
+        density="comfortable"
+      />
+
+      <v-text-field
+        v-model="form.altEmail"
+        :rules="[rules.optionalEmail]"
+        label="Alternatívny email:"
+        variant="outlined"
+        density="comfortable"
+      />
+
+      <v-text-field
+        v-model="form.phone"
+        :rules="[rules.phone]"
+        label="Telefón:"
+        variant="outlined"
+        density="comfortable"
+      />
+
+      <v-select
+        v-model="form.studyProgram"
+        :items="programs"
+        :rules="[rules.required]"
+        label="Študijný odbor:"
+        variant="outlined"
+        density="comfortable"
+      />
+
+      <v-checkbox
+        v-model="form.consent"
+        :rules="[rules.mustAgree]"
+        label="Súhlasím s podmienkami spracúvania osobných údajov"
+        density="comfortable"
+      />
+
+      <v-btn
+        type="submit"
+        color="success"
+        size="large"
+        block
+        :disabled="!isValid || !form.consent"
+      >
+        Registrovať
+      </v-btn>
+    </v-form>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+
+const isValid = ref(false)
+
+const form = reactive({
+  title: '',
+  firstName: '',
+  lastName: '',
+  address: '',
+  studentEmail: '',
+  altEmail: '',
+  phone: '',
+  studyProgram: null,
+  consent: false,
+})
+
+const programs = [
+  'Aplikovaná informatika',
+]
+
+const rules = {
+  required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole',
+  email: v =>
+    /.+@.+\..+/.test(v) || 'Zadajte platný email',
+  optionalEmail: v =>
+    (!v || /.+@.+\..+/.test(v)) || 'Zadajte platný email',
+  phone: v =>
+    (!v || /^[0-9 +()-]{6,}$/.test(v)) || 'Zadajte platné telefónne číslo',
+  mustAgree: v => v === true || 'Je potrebné súhlasiť',
+}
+
+function onSubmit() {
+  console.log('FORM SUBMIT', { ...form })
+}
+</script>
+
+<style scoped>
+.page-container {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.page-title {
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 24px 0 16px;
+  color: #1f1f1f;
+}
+.form-wrap {
+  max-width: 640px; 
+}
+.mb-2 { margin-bottom: 8px; }
+.mb-3 { margin-bottom: 12px; }
+.mb-4 { margin-bottom: 16px; }
+</style>
+