From 5c649ae164f74d09d8ed8d8551e0c951e7d1c2ec Mon Sep 17 00:00:00 2001
From: KUB0570 <nikola.kubeczkova.st@vsb.cz>
Date: Sat, 8 Feb 2025 14:50:44 +0100
Subject: [PATCH] some components

---
 services/frontend/components/ContactUs.vue    | 69 ++++++++++++++++++
 services/frontend/components/Gallery.vue      | 32 +++++++++
 services/frontend/components/References.vue   | 71 +++++++++++++++++++
 services/frontend/components/Trainers.vue     | 38 +++++++++-
 services/frontend/components/menu/Footer.vue  | 58 +++++++++++++++
 services/frontend/components/menu/Header.vue  | 59 +++++++++++++--
 services/frontend/layouts/default.vue         | 18 +++++
 services/frontend/pages/index.vue             | 19 ++++-
 .../Galery.vue => pages/kurzy.vue}            |  7 +-
 9 files changed, 359 insertions(+), 12 deletions(-)
 create mode 100644 services/frontend/components/Gallery.vue
 create mode 100644 services/frontend/layouts/default.vue
 rename services/frontend/{components/Galery.vue => pages/kurzy.vue} (98%)

diff --git a/services/frontend/components/ContactUs.vue b/services/frontend/components/ContactUs.vue
index ec4a1b4..78662f1 100644
--- a/services/frontend/components/ContactUs.vue
+++ b/services/frontend/components/ContactUs.vue
@@ -1,8 +1,77 @@
 <template>
+  <v-card>
+      <v-card-title>
+        <h1>Kontaktujte nás!</h1>
+      </v-card-title>
+  <v-form v-model="valid" @submit="sendContact">
+    <v-container>
+      <v-row>
+        <v-col
+          cols="12"
+          md="4"
+        >
+          <v-text-field
+            v-model="fullName"
+            label="Jméno a příjmení"
+          ></v-text-field>
+        </v-col>
 
+        <v-col
+          cols="12"
+          md="4"
+        >
+          <v-text-field
+            v-model="email"
+            label="Emailová adresa *"
+            required
+          ></v-text-field>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
+        >
+          <v-text-field
+            v-model="phone"
+            label="Telefonní číslo"
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-textarea
+            v-model="textField"
+            label="Váš dotaz *"
+            required
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-btn
+            type="submit"
+          >
+            Poslat
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-form>
+    </v-card>
 </template>
 <script setup lang="ts">
 
+const valid = ref<boolean>(false);
+
+const fullName = ref<string>("");
+const email = ref<string>("");
+const phone = ref<string>("");
+const textField = ref<string>("");
+
+function sendContact() {
+  console.log("KONTAKT NEZASLAN");
+}
+
 </script>
 
 <style scoped>
diff --git a/services/frontend/components/Gallery.vue b/services/frontend/components/Gallery.vue
new file mode 100644
index 0000000..fe70c2c
--- /dev/null
+++ b/services/frontend/components/Gallery.vue
@@ -0,0 +1,32 @@
+<template>
+<!--  <v-row>-->
+<!--    <template v-for="(image,imgIdx) in imageLayout" :key="imgIdx">-->
+<!--      <v-col :cols="image.cols">-->
+<!--        <v-img-->
+<!--          :src="`https://picsum.photos/500/300?image=${image.cols * 20}`"-->
+<!--          height="100%"-->
+<!--          cover-->
+<!--        ></v-img>-->
+<!--      </v-col>-->
+
+<!--      <v-col v-if="image.children" class="d-flex flex-column" cols="6">-->
+<!--        <v-row>-->
+<!--          <v-col v-for="(children,childIdx) in image.children" :key="childIdx" :cols="children.cols">-->
+<!--            <v-img-->
+<!--              :src="`https://picsum.photos/500/300?image=${children.cols + childIdx}`"-->
+<!--              height="100%"-->
+<!--              cover-->
+<!--            ></v-img>-->
+<!--          </v-col>-->
+<!--        </v-row>-->
+<!--      </v-col>-->
+<!--    </template>-->
+<!--  </v-row>-->
+</template>
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/services/frontend/components/References.vue b/services/frontend/components/References.vue
index 90f8ac3..e4b191f 100644
--- a/services/frontend/components/References.vue
+++ b/services/frontend/components/References.vue
@@ -1,8 +1,79 @@
 <template>
+  <v-card>
+    <v-card-title>
+      <h1>Reference</h1>
+    </v-card-title>
+    <v-card-item>
+      <v-expansion-panels class="pa-4" variant="popout">
+    <v-expansion-panel
+      v-for="(reference, id) in references"
+      :key="id"
+      hide-actions
+    >
+      <v-expansion-panel-title>
+        <v-row
+          align="center"
+          class="spacer"
+          no-gutters
+        >
+          <v-col
+            cols="4"
+            md="1"
+            sm="2"
+          >
+            <v-avatar
+              size="36px"
+            >
+              <v-img
+                v-if="reference.avatar"
+                alt="Avatar"
+                :src="reference.avatar"
+              ></v-img>
+            </v-avatar>
+          </v-col>
 
+          <v-col
+            md="3"
+            sm="5"
+          >
+            <strong v-html="reference.name" style="font-size: 20px"></strong>
+            <div>
+            <v-rating
+              readonly
+              :length="5"
+              :size="20"
+              :model-value="5"
+             />
+            </div>
+          </v-col>
+        </v-row>
+      </v-expansion-panel-title>
+
+      <v-expansion-panel-text>
+        <v-card-text v-text="reference.desc"></v-card-text>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
+    </v-card-item>
+  </v-card>
 </template>
 <script setup lang="ts">
 
+const references = [
+  {id: 1, avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460", name: "Alenka", desc: "Dlouhý popisek"},
+  {
+    id: 2, avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460",
+    name: "Pepík",
+    desc: "Dlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisek"
+  },
+  {id: 3, avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460", name: "Davídek", desc: "Dlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekisek"},
+  {
+    id: 4, avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460",
+    name: "Franta",
+    desc: "Dlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisek"
+  },
+]
+
 </script>
 
 <style scoped>
diff --git a/services/frontend/components/Trainers.vue b/services/frontend/components/Trainers.vue
index ec4a1b4..2a82a95 100644
--- a/services/frontend/components/Trainers.vue
+++ b/services/frontend/components/Trainers.vue
@@ -1,8 +1,42 @@
 <template>
-
+  <v-card>
+    <v-card-title>
+      <h1>Naši trenéři a lektoři</h1>
+    </v-card-title>
+    <v-row>
+      <v-col v-for="lector in lectors" :key="lector.id" cols="12" md="6" lg="4">
+        <v-img
+          src="https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"
+          max-height="250"
+          max-width="700"
+          min-width="500"
+          width="50%"
+          cover
+        >
+          <v-avatar
+            color="grey"
+            rounded="0"
+            size="150"
+          >
+            <v-img src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg" cover></v-img>
+          </v-avatar>
+          <v-list-item
+            class="text-white"
+            :subtitle="lector.desc"
+            :title="lector.name"
+          ></v-list-item>
+        </v-img>
+      </v-col>
+    </v-row>
+  </v-card>
 </template>
 <script setup lang="ts">
-
+const lectors = [
+  {id: 1, name: "Ondřej Gilar", desc: "Trenér - latinskoamerické tance a Pro-AM"},
+  {id: 2, name: "Leona Hruštincová", desc: "Lektorka - tance pro děti"},
+  {id: 3, name: "Ondřej Gilar", desc: "Trenér - latinskoamerické tance a Pro-AM"},
+  {id: 4, name: "Leona Hruštincová", desc: "Lektorka - tance pro děti"},
+]
 </script>
 
 <style scoped>
diff --git a/services/frontend/components/menu/Footer.vue b/services/frontend/components/menu/Footer.vue
index ec4a1b4..cf2fd72 100644
--- a/services/frontend/components/menu/Footer.vue
+++ b/services/frontend/components/menu/Footer.vue
@@ -1,5 +1,63 @@
 <template>
+  <v-footer
+    style="background-color: black"
+  >
+    <v-container class="text-white">
+      <v-row>
+        <v-col
+          cols="12"
+          md="4"
+        >
+          <strong>Kontakt</strong>
+          <v-divider />
+          <v-row><v-col>Tomáš Ožana</v-col></v-row>
+          <v-row><v-col>Zimmlerova 2893/47, Ostrava</v-col></v-row>
+          <v-row><v-col>tanecniklub-ostrava@email.cz</v-col></v-row>
+          <v-row><v-col>+420774908180</v-col></v-row>
+        </v-col>
 
+        <v-col
+          cols="12"
+          md="4"
+        >
+          <strong>Tréningové hodiny</strong>
+          <v-divider />
+          <v-row><v-col>Pondělí:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
+          <v-row><v-col>Úterý:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
+          <v-row><v-col>Středa:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
+          <v-row><v-col>Čtvrtek:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
+          <v-row><v-col>Pátek:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
+          <v-row><v-col>Sobota:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
+          <v-row><v-col>Neděle:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="4"
+        >
+          <strong>Sociální sítě</strong>
+          <v-divider />
+<!--          https://pictogrammers.com/library/mdi/icon/youtube/-->
+          <span class="mdi mdi-facebook" style="font-size: 60px"></span>
+          <span class="mdi mdi-instagram" style="font-size: 60px"></span>
+          <span class="mdi mdi-youtube" style="font-size: 60px"></span>
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row>
+        <v-col
+          style="text-align: left"
+        >
+          <h5>Taneční klub Ostrava © 2025</h5>
+        </v-col>
+        <v-col
+          style="text-align: right"
+        >
+          <h5>created by Beeebooo Crew</h5>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-footer>
 </template>
 <script setup lang="ts">
 
diff --git a/services/frontend/components/menu/Header.vue b/services/frontend/components/menu/Header.vue
index ec4a1b4..a0bf54a 100644
--- a/services/frontend/components/menu/Header.vue
+++ b/services/frontend/components/menu/Header.vue
@@ -1,10 +1,57 @@
 <template>
+    <v-app-bar  style="position: sticky">
+     <v-app-bar-nav-icon
+         @click="drawer = !drawer"
+         class="d-flex d-sm-none"
+     />
+      <span class="mdi mdi-dance-ballroom" style="font-size: 60px"></span>
+      Taneční klub ostrava
+          <v-tabs
+            v-model="tab"
+            align-with-title
+            class="d-none d-sm-flex"
+          >
 
+            <v-tab
+              v-for="item in items"
+              :key="item"
+            >
+              {{ item }}
+            </v-tab>
+          </v-tabs>
+    </v-app-bar>
+
+    <!-- Add a navigation bar -->
+    <v-navigation-drawer
+      v-model="drawer"
+      absolute
+      fixed
+      temporary
+    >
+      <v-list
+        nav
+        dense
+      >
+        <v-list-item>
+          <v-list-item v-for="(item, index) in items">
+            <v-list-item-title @click="tab = index">{{ item }}</v-list-item-title>
+          </v-list-item>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
 </template>
-<script setup lang="ts">
 
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+<script>
+export default {
+  el: '#app',
+  data () {
+    return {
+      drawer: false,
+      tab: null,
+      items: [
+        'O nás', "Trenéři", 'Kurzy', 'Galerie', 'Aktuality', 'Kontakty',
+      ],
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/services/frontend/layouts/default.vue b/services/frontend/layouts/default.vue
new file mode 100644
index 0000000..3919004
--- /dev/null
+++ b/services/frontend/layouts/default.vue
@@ -0,0 +1,18 @@
+<template>
+  <v-layout>
+    <v-app app>
+      <menu-header/>
+      <v-main>
+        <slot />
+      </v-main>
+      <menu-footer/>
+    </v-app>
+  </v-layout>
+</template>
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/services/frontend/pages/index.vue b/services/frontend/pages/index.vue
index 522c197..41c7a5b 100644
--- a/services/frontend/pages/index.vue
+++ b/services/frontend/pages/index.vue
@@ -1,3 +1,20 @@
 <template>
-Index file
+  <v-parallax
+    src="https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"
+    style="margin-top: -80px"
+  >
+    <div class="d-flex flex-column fill-height justify-center align-center text-white">
+      <h1 class="text-h4 font-weight-thin mb-4">
+        Taneční klub Ostrava
+      </h1>
+      <h4 class="subheading">
+        Naučíme Vás tančit!
+      </h4>
+    </div>
+  </v-parallax>
+  <trainers/>
+  <v-divider />
+  <references/>
+  <v-divider />
+  <contact-us/>
 </template>
\ No newline at end of file
diff --git a/services/frontend/components/Galery.vue b/services/frontend/pages/kurzy.vue
similarity index 98%
rename from services/frontend/components/Galery.vue
rename to services/frontend/pages/kurzy.vue
index ec4a1b4..96c0baf 100644
--- a/services/frontend/components/Galery.vue
+++ b/services/frontend/pages/kurzy.vue
@@ -1,10 +1,11 @@
-<template>
-
-</template>
 <script setup lang="ts">
 
 </script>
 
+<template>
+
+</template>
+
 <style scoped>
 
 </style>
\ No newline at end of file