Beeebooo/TKO
1
0
Fork 0
generated from JustScreaMy/ProjectTemplate
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hopefully css almost done

Browse source
This commit is contained in:
KUB0570 2025-02-16 14:20:40 +01:00
parent 499375a8e8
commit 8cd16bdcea
20 changed files with 662 additions and 591 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
TODO Normal file
View file

@ -0,0 +1,21 @@
Nastylovat:
- header nedrží
- footer
- lazyload načítat o něco dříve (neli zrušit alespoň mimo galerii)
Naprogramovat:
- tlačítko "načíst další aktuality" v komponentě News (možná přidat i novou stránku /aktuality
- přidat kalendář
- kotvičky
- přidat v galerii zvětsovač na obrázky
- přidat backend
- přidat databázi
- přidat api
- přidat volání na api
Naplánovat:
- kurzy + cena: vyskakovací okno na rezervaci s jménem lekce? jak to vyřešit s kalendářem? (stránka /rezervace)
- změnit (logicky) pořadí komponent na hlavní stránce
Čeká na Ondru:
- Důležité kontakty + obrázky jak se dostat nebo vzdálenosti od městské dopravy? přidat do googlu

4
services/backend/backend/settings.py
View file

@ -147,7 +147,9 @@ USE_TZ = True
# Static files (CSS, JavaScript, Images) # Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.1/howto/static-files/ # https://docs.djangoproject.com/en/5.1/howto/static-files/
STATIC_URL = 'static/' STATIC_URL = '/static/'
MEDIA_URL = '/media/'
# Default primary key field type # Default primary key field type
# https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field

204
services/frontend/assets/css/main.css Normal file
View file

@ -0,0 +1,204 @@
@font-face {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-style: normal;
font-display: block;
}
h1 {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3rem;
color: #333; /* Dark gray */
text-align: center;
margin-bottom: 1rem;
margin-top: 2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: #CF3476;
text-align: center;
margin-bottom: 0.5rem;
}
h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: #666; /* Light gray */
text-align: center;
margin-bottom: 0.5rem;
}
h4 {
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: #666; /* Light gray */
text-align: center;
margin-bottom: 0.5rem;
}
h5 {
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: #aaa; /* Light gray */
margin-top: 1rem;
}
.to_left {
font-family: 'Playfair Display', serif;
font-size: 1rem;
}
.to_right {
font-family: 'Playfair Display', serif;
float: right;
}
.contact {
margin: 20px calc(20% - 40px) 50px;
min-width: 25rem;
border-radius: 15px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.contact__title {
text-align: center;
font-size: 3rem;
color: #333; /* Dark gray */
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
font-weight: bold;
}
.contact__button {
width: 100%;
color: #ffffff;
background-color: #CF3476;
}
.article {
padding: 20px;
min-width: 40%;
border-radius: 15px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
margin: 50px
}
.article__title {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: #CF3476; /* Dark gray */
text-align: left;
margin-top: 0.1rem;
font-weight: bold;
}
.article__date {
font-family: 'Playfair Display', serif;
font-size: 0.8rem;
text-align: left;
}
.article__text {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 1rem;
text-align: left;
color: #666; /* Dark gray */
}
.article__sign {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 1rem;
float: right;
color: #333; /* Dark gray */
}
.pricing-box {
padding: 20px;
text-align: center;
min-width: 25rem;
border-radius: 1rem;
height: 230px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
margin: 50px
}
.pricing-box:not(:last-child) {
margin: 20px;
}
.pricing__price {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3.5rem;
color: #CF3476; /* Dark gray */
text-align: center;
}
.pricing__subtitle {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 1rem;
color: #333; /* Dark gray */
text-align: center;
}
.advantage {
min-width: 25rem;
border-radius: 1rem;
background: transparent;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
margin-top: 1.2rem;
margin-left: calc(20% - 2.5rem);
margin-right: calc(20% - 2.5rem);
}
.advantage__title {
font-family: 'Playfair Display', serif;
color: #CF3476;
font-size: 1.5rem;
font-weight: bold;
margin-top: 0.1rem;
}
.advantage__text {
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: #333;
}
.about {
min-width: 25rem;
border-radius: 0;
background: transparent;
}
.about__parallax {
max-height: 36rem;
}
.about__title {
font-family: 'Playfair Display', serif;
font-size: 3rem;
text-align: center;
color: #ddd; /* Dark gray */
margin-bottom: 1rem;
margin-top: 1rem;
font-weight: bold;
}
.about__subtitle {
font-family: 'Playfair Display', serif;
color: #CF3476;
font-size: 1.5rem;
text-align: center;
margin-bottom: 0.5rem;
font-weight: bold;
}
.about__text {
font-family: 'Playfair Display', serif;
color: #aaa; /* Dark gray */
font-size: 1.2rem;
text-align: center;
}

91
services/frontend/components/About.vue
View file

@ -1,68 +1,39 @@
<template> <template>
<v-parallax <v-parallax
src="https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg" src="https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"
style="max-height: 580px" class="about__parallax"
> >
<v-container fluid fill-height> <v-container fluid fill-height>
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<v-col <v-col
cols="12" cols="12"
md="4" md="4"
/> />
<v-col <v-col
cols="12" cols="12"
md="8" md="8"
style="color: white; padding: 50px" style="color: white; padding: 50px"
>
<v-card
class="overflow-y-auto"
max-height="460"
style="background-color: transparent"
> >
<h1>Vítejte v tanečním klubu!</h1> <v-card class="about">
<h4>Tanec je vášeň!</h4> <v-card-title class="about__title">Vítejte v tanečním klubu!</v-card-title>
<div class="subtitle"> <v-card-subtitle class="about__subtitle">Tanec je vášeň!</v-card-subtitle>
Sportovní taneční klub jsme založili v roce 2016 s absolventy středoškolských tanečních kurzů taneční školy Bolero Ostrava. <v-card-text class="about__text">
Společně jsme se zaměřili na profesionální stránku tance, našli jsme pár aktivních tanečníků se kterými jsme začali pravidelně trénovat pohyb, krokové variace a techniku jednotlivých tanců. Sportovní taneční klub jsme založili v roce 2016 s absolventy středoškolských tanečních kurzů taneční školy Bolero Ostrava.
Po roce tréninků se dostavily i první výsledky a dnes již tito mladí tanečníci skvěle reprezentují klub na celé řadě tanečních soutěží. Společně jsme se zaměřili na profesionální stránku tance, našli jsme pár aktivních tanečníků se kterými jsme začali pravidelně trénovat pohyb, krokové variace a techniku jednotlivých tanců.
<br><br> Po roce tréninků se dostavily i první výsledky a dnes již tito mladí tanečníci skvěle reprezentují klub na celé řadě tanečních soutěží.
O rok později v roce 2017 jsme založili také společenský taneční klub pro dospělé, kteří by se rádi také tanci věnovali. <br><br>
Příjemná atmosféra, zábava, ale i chuť se učit novým věcem, to jsou tři slova, které by mohly charakterizovat atmosféru v tanečních lekcích. O rok později v roce 2017 jsme založili také společenský taneční klub pro dospělé, kteří by se rádi také tanci věnovali.
Taneční klub, ať už sportovní tak i společenský vítá všechny milovníky tance, kteří chtějí poodhalit tajemství ladných tanečních pohybů, sdílet nezaměnitelnou atmosféru a dovědět se více o taneční technice. Příjemná atmosféra, zábava, ale i chuť se učit novým věcem, to jsou tři slova, které by mohly charakterizovat atmosféru v tanečních lekcích.
Našim přáním je, abyste na tanečním parketu jednoduše zářili. Taneční klub, ať už sportovní tak i společenský vítá všechny milovníky tance, kteří chtějí poodhalit tajemství ladných tanečních pohybů, sdílet nezaměnitelnou atmosféru a dovědět se více o taneční technice.
</div> Našim přáním je, abyste na tanečním parketu jednoduše zářili.
</v-card> </v-card-text>
</v-col> </v-card>
</v-row> </v-col>
</v-container> </v-row>
</v-container>
</v-parallax> </v-parallax>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import './assets/css/main.css'
</script> </script>
<style scoped>
h1 {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3rem;
color: #ddd; /* reverse Dark gray */
text-align: center;
margin-bottom: 1rem;
margin-top: 2rem;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.1); /* Subtle shadow */
}
h4 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: #aaa; /* Light gray */
text-align: center;
margin-bottom: 0.5rem;
}
.subtitle {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 1.2rem;
text-align: center;
color: #ddd; /* Dark gray */
}
</style>

58
services/frontend/components/Advantages.vue
View file

@ -1,17 +1,28 @@
<template> <template>
<h1>Co dostanete s tanečním klubem</h1> <h1>Co dostanete s tanečním klubem</h1>
<h4>Výhody tanečníka</h4> <h2>Výhody tanečníka</h2>
<v-card <card
v-for="advantage in advantages" v-for="advantage in advantages"
:key="advantage.id" :key="advantage.id"
:prepend-icon="advantage.icon" class="advantage"
class="advantage-box"
:title="advantage.title"
> >
<v-card-text style="color: #666">{{ advantage.subtitle }}</v-card-text> <v-row>
</v-card> <v-col cols="12" md="1">
<small-icon :icon="advantage.icon" />
</v-col>
<v-col>
<v-card-title class="advantage__title">
{{advantage.title}}
</v-card-title>
</v-col>
</v-row>
<v-card-text class="advantage__text">
{{ advantage.subtitle }}
</v-card-text>
</card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import './assets/css/main.css'
const advantages = [ const advantages = [
{id: 1, icon: "mdi mdi-heart", title: "Zdravé tělo a mysl", {id: 1, icon: "mdi mdi-heart", title: "Zdravé tělo a mysl",
@ -21,35 +32,4 @@ const advantages = [
{id: 3, icon: "mdi mdi-account-group", title: "Krealitvní a zábavní lidé", {id: 3, icon: "mdi mdi-account-group", title: "Krealitvní a zábavní lidé",
subtitle: "Příjemná společnost a tým lidí, ce kterém se také můžete spolehnout na individuální přístup lektorů, kteří tu vždy budou právě pro Vás."}, subtitle: "Příjemná společnost a tým lidí, ce kterém se také můžete spolehnout na individuální přístup lektorů, kteří tu vždy budou právě pro Vás."},
] ]
</script>
</script>
<style scoped>
h1 {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3rem;
color: #333; /* Dark gray */
text-align: center;
margin-bottom: 1rem;
margin-top: 2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
h4 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: #666; /* Light gray */
text-align: center;
margin-bottom: 0.5rem;
}
.advantage-box {
min-width: 400px;
border-radius: 15px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
margin-top: 20px;
margin-left: calc(20% - 40px); /* Subtract half of min-width from left margin */
margin-right: calc(20% - 40px); /* Subtract half of min-width from right margin */
}
</style>

130
services/frontend/components/ContactUs.vue
View file

@ -1,63 +1,67 @@
<template> <template>
<h1>Kontaktujte nás!</h1> <v-card class="contact">
<v-card> <v-form v-model="valid" @submit="sendContact">
<v-form v-model="valid" @submit="sendContact"> <v-container>
<v-container> <v-card-title class="contact__title">Kontaktujte nás!</v-card-title>
<v-row> <v-row>
<v-col <v-col
cols="12" cols="12"
md="4" 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-text-field
</v-btn> v-model="fullName"
</v-col> label="Jméno"
</v-row> variant="underlined"
</v-container> ></v-text-field>
</v-form> </v-col>
</v-card>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="email"
label="Emailová adresa"
variant="underlined"
></v-text-field>
</v-col>
<v-col
cols="12"
md="4"
>
<v-text-field
v-model="phone"
label="Telefonní číslo"
variant="underlined"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col>
<v-textarea
v-model="textField"
label="Váš dotaz *"
variant="underlined"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn
class="contact__button"
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">
import './assets/css/main.css'
const valid = ref<boolean>(false); const valid = ref<boolean>(false);
@ -70,16 +74,4 @@ function sendContact() {
console.log("KONTAKT NEZASLAN"); console.log("KONTAKT NEZASLAN");
} }
</script> </script>
<style scoped>
h1 {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3rem;
color: #333; /* Dark gray */
text-align: center;
margin-bottom: 1rem;
margin-top: 2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
</style>

72
services/frontend/components/Courses.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<h1>Kurzy - cena</h1> <h1>Kurzy - cena</h1>
<h4>Vyberte, co Vám nejlépe vyhovuje</h4> <h2>Vyberte, co Vám nejlépe vyhovuje</h2>
<v-row> <v-row>
<v-col <v-col
cols="12" cols="12"
@ -8,18 +9,17 @@
v-for="course in courses" v-for="course in courses"
:key="course.id" :key="course.id"
> >
<v-card <v-card class="pricing-box">
class="pricing-box" <h3>{{ course.name }}</h3>
> <v-card-subtitle><div class="pricing__subtitle">{{ course.time }}</div></v-card-subtitle>
<h2>{{ course.name }}</h2> <v-card-title><div class="pricing__price">{{ course.price }}</div></v-card-title>
<v-card-subtitle><div class="subtitle">{{ course.time }}</div></v-card-subtitle> <v-card-subtitle v-if="course.desc"><div class="pricing__subtitle">{{ course.desc }}</div></v-card-subtitle>
<v-card-title><div class="price">{{ course.price }}</div></v-card-title>
<v-card-subtitle v-if="course.desc"><div class="subtitle">{{ course.desc }}</div></v-card-subtitle>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import './assets/css/main.css'
const courses = [ const courses = [
{id: 1, name: "Sportovní taneční klub", time: "24 hodin/měsíc", price: "600 Kč", desc: false}, {id: 1, name: "Sportovní taneční klub", time: "24 hodin/měsíc", price: "600 Kč", desc: false},
@ -27,58 +27,4 @@ const courses = [
{id: 3, name: "Volný trénink s lektorem", time: "60min / taneční pár", price: "100 Kč", desc: "Pro členy tanečního klubu"}, {id: 3, name: "Volný trénink s lektorem", time: "60min / taneční pár", price: "100 Kč", desc: "Pro členy tanečního klubu"},
] ]
</script> </script>
<style scoped>
h1 {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3rem;
color: #333; /* Dark gray */
text-align: center;
margin-bottom: 1rem;
margin-top: 2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 1.7rem;
color: #666; /* Light gray */
}
h4 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: #666; /* Light gray */
text-align: center;
margin-bottom: 0.5rem;
}
.pricing-box {
padding: 20px;
text-align: center;
min-width: 80%;
border-radius: 15px;
height: 230px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
margin: 50px
}
.pricing-box:not(:last-child) {
margin: 20px;
}
.price {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3.5rem;
color: #333; /* Dark gray */
text-align: center;
}
.subtitle {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 1rem;
color: #333; /* Dark gray */
text-align: center;
}
</style>

75
services/frontend/components/Gallery.vue
View file

@ -1,75 +0,0 @@
<template>
<h1>Galerie</h1>
<v-row>
<v-col
v-for="(photo, index) in photos"
:key="index"
cols="4"
style="padding: 0;"
>
<v-img
:lazy-src="photo.src"
:src="photo.src"
aspect-ratio="1"
cover
>
<template v-slot:placeholder>
<v-row>
<v-progress-circular
color="grey-lighten-5"
indeterminate
></v-progress-circular>
</v-row>
</template>
</v-img>
</v-col>
</v-row>
</template>
<script setup lang="ts">
const photos = [
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
]
</script>
<style scoped>
h1 {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3rem;
color: #333; /* Dark gray */
text-align: center;
margin-bottom: 1rem;
margin-top: -2rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
</style>

111
services/frontend/components/News.vue
View file

@ -1,48 +1,49 @@
<template> <template>
<h1>Články</h1> <h1>Aktuality</h1>
<v-card> <h2>Přečtěte si aktuality z našeho klubu</h2>
<v-row> <v-row>
<v-col <v-col
v-for="(article, index) in articles" v-for="(article, index) in articles"
:key="index" :key="index"
cols="12" cols="12"
md="6" md="6"
> >
<v-row> <v-card class="article">
<v-col <v-row>
cols="12" <v-col>
md="4" <v-img
> :lazy-src="article.src"
<v-img :src="article.src"
:lazy-src="article.src" aspect-ratio="1"
:src="article.src" cover
aspect-ratio="1" >
cover <template v-slot:placeholder>
<v-row>
<v-progress-circular
color="grey-lighten-5"
indeterminate
></v-progress-circular>
</v-row>
</template>
</v-img>
</v-col>
<v-col
cols="12"
md="8"
> >
<template v-slot:placeholder> <v-row class="article__title">{{ article.title }}</v-row>
<v-row> <v-row class="article__date">{{ article.date}}</v-row>
<v-progress-circular <v-row class="article__text">{{ article.desc }}</v-row>
color="grey-lighten-5" <v-row class="article__sign">{{ article.autor }}</v-row>
indeterminate </v-col>
></v-progress-circular> </v-row>
</v-row> </v-card>
</template>
</v-img>
</v-col>
<v-col
cols="12"
md="8"
>
<v-row><v-card-title><h2>{{ article.title }}</h2></v-card-title></v-row>
<v-row><v-card-subtitle><h4>{{ article.autor }}, ({{ article.date}})</h4></v-card-subtitle></v-row>
<v-row><v-card-text><div class="subtitle">{{ article.desc }}</div></v-card-text></v-row>
</v-col>
</v-row>
</v-col> </v-col>
</v-row> </v-row>
</v-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import './assets/css/main.css'
const articles = [ const articles = [
{ {
autor: "Bebloid Obecný", autor: "Bebloid Obecný",
@ -51,30 +52,12 @@ const articles = [
src: "https://melbourneentertainmentco.com.au/wp-content/uploads/2020/04/Juan-and-Jess-600x600-profile.jpg", src: "https://melbourneentertainmentco.com.au/wp-content/uploads/2020/04/Juan-and-Jess-600x600-profile.jpg",
desc: "V neděli 2. 2. David potrolil sambu, kde místo tančení lítal jako zmatená včelka. Terka, ačkoliv před soutěží velice zmatkovala a sebepoškozovala se, tak na parketě předvedla výborné představení. Na další trolení se můžeme všichni těšit do Brna na konci tohoto měsíce. " desc: "V neděli 2. 2. David potrolil sambu, kde místo tančení lítal jako zmatená včelka. Terka, ačkoliv před soutěží velice zmatkovala a sebepoškozovala se, tak na parketě předvedla výborné představení. Na další trolení se můžeme všichni těšit do Brna na konci tohoto měsíce. "
}, },
{
autor: "Bebloid Obecný",
date: "2. 2. 2025",
title: "David potrolil soutěž",
src: "https://melbourneentertainmentco.com.au/wp-content/uploads/2020/04/Juan-and-Jess-600x600-profile.jpg",
desc: "V neděli 2. 2. David potrolil sambu, kde místo tančení lítal jako zmatená včelka. Terka, ačkoliv před soutěží velice zmatkovala a sebepoškozovala se, tak na parketě předvedla výborné představení. Na další trolení se můžeme všichni těšit do Brna na konci tohoto měsíce. "
},
] ]
</script> </script>
<style scoped>
h1 {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3rem;
color: #333; /* Dark gray */
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
margin-top: 2rem;
margin-bottom: 1rem;
}
h2 {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1.7rem;
color: #666; /* Light gray */
}
.subtitle {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 1rem;
color: #333; /* Dark gray */
}
</style>

35
services/frontend/components/Trainers.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<h1>Naši trenéři a lektoři</h1> <h1>Naši trenéři a lektoři</h1>
<h2>Seznamte se s námi!</h2>
<v-row style="margin-bottom: 2rem;"> <v-row style="margin-bottom: 2rem;">
<v-col class="text-center" cols="12" md="3" v-for="lector in lectors" :key="lector.id"> <v-col class="text-center" cols="12" md="3" v-for="lector in lectors" :key="lector.id">
<v-avatar <v-avatar
@ -11,16 +12,18 @@
<v-img :src="lector.img" cover></v-img> <v-img :src="lector.img" cover></v-img>
</v-avatar> </v-avatar>
<h2>{{lector.name}}</h2> <h2>{{lector.name}}</h2>
<div class="subtitle">{{ lector.desc }}</div> <h4>{{ lector.desc }}</h4>
</v-col> </v-col>
</v-row> </v-row>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import './assets/css/main.css'
const lectors = [ const lectors = [
{ {
id: 1, id: 1,
name: "Ondřej Gilar", name: "Ondřej Gilar",
img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg", img: "/Beblik.jpg",
desc: "Trenér - latinskoamerické tance a Pro-AM", desc: "Trenér - latinskoamerické tance a Pro-AM",
}, },
{ {
@ -42,30 +45,4 @@ const lectors = [
desc: "Lektorka - tance pro děti", desc: "Lektorka - tance pro děti",
}, },
] ]
</script> </script>
<style scoped>
h1 {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3rem;
color: #333; /* Dark gray */
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
margin-top: 2rem;
margin-bottom: 1rem;
}
h2 {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1.7rem;
color: #666; /* Light gray */
}
.subtitle {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 1rem;
color: #333; /* Dark gray */
text-align: center;
}
</style>

57
services/frontend/components/menu/Footer.vue
View file

@ -8,7 +8,7 @@
cols="12" cols="12"
md="4" md="4"
> >
<h4>Kontakt</h4> <h5>Kontakt</h5>
<v-divider :thickness="3" /> <v-divider :thickness="3" />
<div class="footer-text">Tomáš Ožana</div> <div class="footer-text">Tomáš Ožana</div>
<div class="footer-text">Zimmlerova 2893/47, Ostrava</div> <div class="footer-text">Zimmlerova 2893/47, Ostrava</div>
@ -20,27 +20,26 @@
cols="12" cols="12"
md="4" md="4"
> >
<h4>Tréningové hodiny</h4> <h5>Tréningové hodiny</h5>
<v-divider :thickness="3" /> <v-divider :thickness="3" />
<div class="footer-text">Pondělí: <span class="timespan">16:30 - 18:30 (VS)</span></div> <div class="to_left">Pondělí: <span class="to_right">16:30 - 18:30 (VS)</span></div>
<div class="footer-text">Úterý: <span class="timespan">16:30 - 18:30 (VS)</span></div> <div class="to_left">Úterý: <span class="to_right">16:30 - 18:30 (VS)</span></div>
<div class="footer-text">Středa: <span class="timespan">16:30 - 18:30 (VS)</span></div> <div class="to_left">Středa: <span class="to_right">16:30 - 18:30 (VS)</span></div>
<div class="footer-text">Čtvrtek: <span class="timespan">16:30 - 18:30 (VS)</span></div> <div class="to_left">Čtvrtek: <span class="to_right">16:30 - 18:30 (VS)</span></div>
<div class="footer-text">Pátek: <span class="timespan">16:30 - 18:30 (VS)</span></div> <div class="to_left">Pátek: <span class="to_right">16:30 - 18:30 (VS)</span></div>
<div class="footer-text">Sobota: <span class="timespan">16:30 - 18:30 (VS)</span></div> <div class="to_left">Sobota: <span class="to_right">16:30 - 18:30 (VS)</span></div>
<div class="footer-text">Neděle: <span class="timespan">16:30 - 18:30 (VS)</span></div> <div class="to_left">Neděle: <span class="to_right">16:30 - 18:30 (VS)</span></div>
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
md="4" md="4"
> >
<h4>Sociální sítě</h4> <h5>Sociální sítě</h5>
<v-divider :thickness="3" /> <v-divider :thickness="3" />
<!-- https://pictogrammers.com/library/mdi/icon/youtube/--> <big-icon icon="mdi-facebook" />
<span class="mdi mdi-facebook" style="font-size: 60px"></span> <big-icon icon="mdi-instagram" />
<span class="mdi mdi-instagram" style="font-size: 60px"></span> <big-icon icon="mdi-youtube" />
<span class="mdi mdi-youtube" style="font-size: 60px"></span>
</v-col> </v-col>
</v-row> </v-row>
<v-divider :thickness="3" style="margin-top: 60px" /> <v-divider :thickness="3" style="margin-top: 60px" />
@ -60,32 +59,6 @@
</v-footer> </v-footer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import './assets/css/main.css'
</script> </script>
<style scoped>
h4 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: #aaa; /* Light gray */
text-align: center;
margin-bottom: 0.5rem;
}
h5 {
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: #aaa; /* Light gray */
margin-top: 1rem;
}
.footer-text {
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: #aaa; /* Light gray */
}
.timespan {
float: right; /* Aligns the timespan to the right */
}
</style>

161
services/frontend/components/menu/Header.vue
View file

@ -1,57 +1,120 @@
<template> <template>
<v-app-bar style="position: sticky"> <v-layout>
<v-app-bar-nav-icon <v-app-bar
@click="drawer = !drawer" color="primary"
class="d-flex d-sm-none" style="position: sticky"
/>
<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-app-bar-nav-icon
<v-list-item v-for="(item, index) in items"> @click="drawer = !drawer"
<v-list-item-title @click="tab = index">{{ item }}</v-list-item-title> class="d-flex d-sm-none"
/>
<a href=""><big-icon icon="mdi-dance-ballroom" /></a>
<v-app-bar-title>Taneční klub Ostrava</v-app-bar-title>
<v-tabs
v-for="(tab, index) in tabs" :key="index"
v-model="currentTab"
align-with-title
class="d-none d-sm-flex"
color="color"
>
<v-tab :text="tab.name" :value="tab.name" @click="useGoTo(tab.ref)"></v-tab>
</v-tabs>
<!-- <v-col-->
<!-- class="text-right"-->
<!-- @click="toggleTheme"-->
<!-- >-->
<!-- <big-icon icon="mdi-lightbulb-cfl"/>-->
<!-- </v-col>-->
</v-app-bar>
<v-fab
:key="currentTab.ref"
class="ms-4 mb-4"
></v-fab>
<v-navigation-drawer
v-model="drawer"
absolute
fixed
left
>
<v-list
nav
dense
>
<v-list-item>
<v-list-item v-for="(tab, index) in tabs" :key="index">
<v-list-item-title @click="useGoTo(tab.ref)">{{ tab.name }}</v-list-item-title>
</v-list-item>
</v-list-item> </v-list-item>
</v-list-item> </v-list>
</v-list> </v-navigation-drawer>
</v-navigation-drawer>
</v-layout>
</template> </template>
<script> <script setup lang="ts">
export default { function waitForElement (selector: string, timeout = 2000) : Promise<Element> {
el: '#app', return new Promise((resolve, reject) => {
data () { const startTime = Date.now();
return { // eslint-disable-next-line prefer-const
drawer: false, let observer: MutationObserver;
tab: null,
items: [ function checkElement () {
'O nás', "Trenéři", 'Kurzy', 'Galerie', 'Aktuality', 'Kontakty', const element = document.querySelector(selector);
],
if (element) {
resolve(element);
observer.disconnect(); // Stop observing DOM changes
} else if (Date.now() - startTime >= timeout) {
reject(new Error(`Timeout exceeded while waiting for element with selector '${selector}'`));
observer.disconnect(); // Stop observing DOM changes
}
} }
}
observer = new MutationObserver(checkElement);
observer.observe(document.body, { childList: true, subtree: true });
checkElement(); // Check initially in case the element is already present
});
} }
async function useGoTo (selector: string, props: {offset? :number} = {}): Promise<void> {
console.log(selector);
let element: Element;
try {
element = await waitForElement(selector);
} catch {
// element not found
return;
}
const yOffset = props?.offset ?? -80;
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({ top: y, behavior: "smooth" });
}
const currentTab = ref({name: 'O nás', ref: "#about", href: "o-nas"});
const drawer = ref(null)
const tabs = [
{name: 'O nás', ref: "#about", href: "o-nas"},
{name: "Trenéři", ref: "#trainers", href: "treneri"},
{name: 'Kurzy', ref: "#courses", href: "kurzy"},
{name: 'Galerie', ref: "#gallery", href: "galerie"},
{name: 'Aktuality', ref: "#article", href: "clanky"},
{name: 'Kontakty', ref: "#contact", href: "kontakt"},
]
// import { useTheme } from 'vuetify'
//
// const theme = useTheme()
//
// function toggleTheme () {
// theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
// }
</script> </script>

4
services/frontend/layouts/default.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<v-layout> <v-layout>
<v-app app> <v-app app>
<menu-header/> <menu-header />
<v-main> <v-main>
<slot /> <slot />
</v-main> </v-main>
<menu-footer/> <menu-footer />
</v-app> </v-app>
</v-layout> </v-layout>
</template> </template>

65
services/frontend/pages/galerie.vue
View file

@ -1,10 +1,63 @@
<template> <template>
<gallery/> <h1>Galerie</h1>
<v-row>
<v-col
v-for="(photo, index) in photos"
:key="index"
cols="4"
style="padding: 0;"
>
<v-img
:lazy-src="photo.src"
:src="photo.src"
aspect-ratio="1"
cover
>
<template v-slot:placeholder>
<v-row>
<v-progress-circular
color="grey-lighten-5"
indeterminate
></v-progress-circular>
</v-row>
</template>
</v-img>
</v-col>
</v-row>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import './assets/css/main.css'
</script> const photos = [
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
<style scoped> {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
</style> {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
{src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
{src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
{src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
{src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
{src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
]
</script>

20
services/frontend/pages/index.vue
View file

@ -1,22 +1,20 @@
<template> <template>
<v-parallax <v-parallax
src="https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg" 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"> <div class="d-flex flex-column fill-height justify-center">
<h1 class="text-h3 font-weight-thin mb-4"> <h1 class="text-white">
Taneční klub Ostrava Taneční klub Ostrava
</h1> </h1>
<h2 class="subheading"> <h2>
Naučíme Vás tančit! Naučíme Vás tančit!
</h2> </h2>
</div> </div>
</v-parallax> </v-parallax>
<news /> <advantages id="advantages"/>
<advantages/> <courses id="courses"/>
<courses /> <news id="article"/>
<about /> <about id="about"/>
<trainers/> <trainers id="trainers"/>
<references/> <contact-us id="contact"/>
<contact-us/>
</template> </template>

14
services/frontend/pages/kontakty.vue Normal file
View file

@ -0,0 +1,14 @@
<template>
<contact-us />
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d160.87512165223046!2d18.205641416752258!3d49.82362861573854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1scs!2scz!4v1739304600235!5m2!1scs!2scz"
width="100%" height="500"
style="border:0;"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
/>
</template>
<script setup lang="ts">
import './assets/css/main.css'
</script>

10
services/frontend/pages/kurzy.vue
View file

@ -1,10 +0,0 @@
<template>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

70
services/frontend/pages/treneri.vue
View file

@ -1,70 +0,0 @@
<template>
<h1>Naši trenéři a lektoři</h1>
<v-card>
<v-row v-for="(lector, index) in lectors" :key="index">
<v-col
style="padding: 0;" >
<v-img
:src="lector.background"
cover
>
<v-col style="text-align: center" cols="12" md="4">
<v-avatar
color="grey"
rounded="1"
size="300"
style="margin: 30px"
>
<v-img :src="lector.img" cover></v-img>
</v-avatar>
<h2>{{lector.name}}</h2>
<div class="subtitle">{{ lector.desc }}</div>
<v-divider :thickness="3" />
<h4>{{lector.story}}</h4>
</v-col>
</v-img>
</v-col>
</v-row>
</v-card>
</template>
<script setup lang="ts">
const lectors = [
{
name: "Ondřej Gilar",
img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
desc: "Trenér - latinskoamerické tance a Pro-AM",
background: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg",
story: "Něco velice zajímavého sepsané dlouhým textem, který snad někdo přečte, protože je to určitě zajímavé. Nová koloběžka bylo vrhnuta do řeky hned vedle pískoviště na počítači.",
},
{
name: "Leona Hruštincová",
img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
desc: "Lektorka - tance pro děti",
background: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg",
story: "Něco velice zajímavého sepsané dlouhým textem, který snad někdo přečte, protože je to určitě zajímavé. Nová koloběžka bylo vrhnuta do řeky hned vedle pískoviště na počítači.",
},
]
</script>
<style scoped>
h1 {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 3rem;
color: #333; /* Dark gray */
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
margin-top: -2rem;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: #666; /* Light gray */
}
.subtitle {
font-family: 'Playfair Display', serif; /* Or a similar elegant font */
font-size: 1.5rem;
color: #333; /* Dark gray */
}
</style>

51
services/frontend/plugins/vuetify.ts
View file

@ -3,8 +3,57 @@ import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles' import 'vuetify/styles'
import { createVuetify } from 'vuetify' import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import {VIcon} from "vuetify/components";
export default defineNuxtPlugin((app) => { export default defineNuxtPlugin((app) => {
const vuetify = createVuetify({}) const vuetify = createVuetify({
icons: { // https://pictogrammers.com/library/mdi/icon/youtube/
defaultSet: 'mdi',
},
theme: {
defaultTheme: 'light',
themes: {
light: {
colors: {
background: '#ffffff',
primary: '#303030',
'primary-darken': '#d0d0d0',
secondary: '#606060',
'secondary-darken': '#a0a0a0',
color: '#CF3476',
light: '#d0d0d0',
dark: '#303030'
},
},
// dark: {
// colors: {
// background: '#000',
// primary: '#d0d0d0',
// 'primary-darken': '#303030',
// secondary: '#a0a0a0',
// 'secondary-darken': '#606060',
// color: '#CF3476',
// }
// }
},
},
aliases: {
SmallIcon: VIcon,
BigIcon: VIcon,
},
defaults: {
SmallIcon: {
color: 'color',
style: [{ 'margin-left': '20px', 'margin-top': '15px', 'font-size': '30px'}]
},
BigIcon: {
color: 'color',
style: [{ margin: '20px', 'font-size': '60px'}]
},
},
})
app.vueApp.use(vuetify) app.vueApp.use(vuetify)
}) })

BIN
services/frontend/public/Beblik.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 100 KiB