generated from JustScreaMy/ProjectTemplate
some components
This commit is contained in:
KUB0570
parent
07c48b2fba
commit
5c649ae164
9 changed files with 359 additions and 12 deletions
|
|
@ -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>
|
||||
|
|
|
|||
32
services/frontend/components/Gallery.vue
Normal file
32
services/frontend/components/Gallery.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
export default {
|
||||
el: '#app',
|
||||
data () {
|
||||
return {
|
||||
drawer: false,
|
||||
tab: null,
|
||||
items: [
|
||||
'O nás', "Trenéři", 'Kurzy', 'Galerie', 'Aktuality', 'Kontakty',
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
18
services/frontend/layouts/default.vue
Normal file
18
services/frontend/layouts/default.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in a new issue