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>
|
<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>
|
</template>
|
||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
<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>
|
</template>
|
||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,42 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,63 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,57 @@
|
||||||
<template>
|
<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>
|
</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>
|
</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>
|
<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>
|
</template>
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
<template>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in a new issue