generated from JustScreaMy/ProjectTemplate
hopefully css almost done
This commit is contained in:
KUB0570
parent
499375a8e8
commit
8cd16bdcea
20 changed files with 662 additions and 591 deletions
21
TODO
Normal file
21
TODO
Normal 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
|
||||
|
|
@ -147,7 +147,9 @@ USE_TZ = True
|
|||
# Static files (CSS, JavaScript, Images)
|
||||
# https://docs.djangoproject.com/en/5.1/howto/static-files/
|
||||
|
||||
STATIC_URL = 'static/'
|
||||
STATIC_URL = '/static/'
|
||||
|
||||
MEDIA_URL = '/media/'
|
||||
|
||||
# Default primary key field type
|
||||
# https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
|
||||
|
|
|
|||
204
services/frontend/assets/css/main.css
Normal file
204
services/frontend/assets/css/main.css
Normal 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;
|
||||
}
|
||||
|
|
@ -1,68 +1,39 @@
|
|||
<template>
|
||||
<v-parallax
|
||||
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-row align="center" justify="center">
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
/>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="8"
|
||||
style="color: white; padding: 50px"
|
||||
>
|
||||
<v-card
|
||||
class="overflow-y-auto"
|
||||
max-height="460"
|
||||
style="background-color: transparent"
|
||||
<v-container fluid fill-height>
|
||||
<v-row align="center" justify="center">
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
/>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="8"
|
||||
style="color: white; padding: 50px"
|
||||
>
|
||||
<h1>Vítejte v tanečním klubu!</h1>
|
||||
<h4>Tanec je vášeň!</h4>
|
||||
<div class="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.
|
||||
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ů.
|
||||
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ěží.
|
||||
<br><br>
|
||||
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.
|
||||
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.
|
||||
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.
|
||||
Našim přáním je, abyste na tanečním parketu jednoduše zářili.
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-card class="about">
|
||||
<v-card-title class="about__title">Vítejte v tanečním klubu!</v-card-title>
|
||||
<v-card-subtitle class="about__subtitle">Tanec je vášeň!</v-card-subtitle>
|
||||
<v-card-text class="about__text">
|
||||
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.
|
||||
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ů.
|
||||
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ěží.
|
||||
<br><br>
|
||||
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.
|
||||
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.
|
||||
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.
|
||||
Našim přáním je, abyste na tanečním parketu jednoduše zářili.
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-parallax>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</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>
|
||||
import './assets/css/main.css'
|
||||
</script>
|
||||
|
|
@ -1,17 +1,28 @@
|
|||
<template>
|
||||
<h1>Co dostanete s tanečním klubem</h1>
|
||||
<h4>Výhody tanečníka</h4>
|
||||
<v-card
|
||||
<h2>Výhody tanečníka</h2>
|
||||
<card
|
||||
v-for="advantage in advantages"
|
||||
:key="advantage.id"
|
||||
:prepend-icon="advantage.icon"
|
||||
class="advantage-box"
|
||||
:title="advantage.title"
|
||||
class="advantage"
|
||||
>
|
||||
<v-card-text style="color: #666">{{ advantage.subtitle }}</v-card-text>
|
||||
</v-card>
|
||||
<v-row>
|
||||
<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>
|
||||
<script setup lang="ts">
|
||||
import './assets/css/main.css'
|
||||
|
||||
const advantages = [
|
||||
{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é",
|
||||
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>
|
||||
|
||||
<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>
|
||||
</script>
|
||||
|
|
@ -1,63 +1,67 @@
|
|||
<template>
|
||||
<h1>Kontaktujte nás!</h1>
|
||||
<v-card>
|
||||
<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"
|
||||
<v-card class="contact">
|
||||
<v-form v-model="valid" @submit="sendContact">
|
||||
<v-container>
|
||||
<v-card-title class="contact__title">Kontaktujte nás!</v-card-title>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
Poslat
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</v-card>
|
||||
<v-text-field
|
||||
v-model="fullName"
|
||||
label="Jméno"
|
||||
variant="underlined"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<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>
|
||||
<script setup lang="ts">
|
||||
import './assets/css/main.css'
|
||||
|
||||
const valid = ref<boolean>(false);
|
||||
|
||||
|
|
@ -70,16 +74,4 @@ function sendContact() {
|
|||
console.log("KONTAKT NEZASLAN");
|
||||
}
|
||||
|
||||
</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>
|
||||
</script>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<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-col
|
||||
cols="12"
|
||||
|
|
@ -8,18 +9,17 @@
|
|||
v-for="course in courses"
|
||||
:key="course.id"
|
||||
>
|
||||
<v-card
|
||||
class="pricing-box"
|
||||
>
|
||||
<h2>{{ course.name }}</h2>
|
||||
<v-card-subtitle><div class="subtitle">{{ course.time }}</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 class="pricing-box">
|
||||
<h3>{{ course.name }}</h3>
|
||||
<v-card-subtitle><div class="pricing__subtitle">{{ course.time }}</div></v-card-subtitle>
|
||||
<v-card-title><div class="pricing__price">{{ course.price }}</div></v-card-title>
|
||||
<v-card-subtitle v-if="course.desc"><div class="pricing__subtitle">{{ course.desc }}</div></v-card-subtitle>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import './assets/css/main.css'
|
||||
|
||||
const courses = [
|
||||
{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"},
|
||||
]
|
||||
|
||||
</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>
|
||||
</script>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,48 +1,49 @@
|
|||
<template>
|
||||
<h1>Články</h1>
|
||||
<v-card>
|
||||
<h1>Aktuality</h1>
|
||||
<h2>Přečtěte si aktuality z našeho klubu</h2>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(article, index) in articles"
|
||||
:key="index"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<v-img
|
||||
:lazy-src="article.src"
|
||||
:src="article.src"
|
||||
aspect-ratio="1"
|
||||
cover
|
||||
<v-col
|
||||
v-for="(article, index) in articles"
|
||||
:key="index"
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<v-card class="article">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-img
|
||||
:lazy-src="article.src"
|
||||
:src="article.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-col
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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-row class="article__title">{{ article.title }}</v-row>
|
||||
<v-row class="article__date">{{ article.date}}</v-row>
|
||||
<v-row class="article__text">{{ article.desc }}</v-row>
|
||||
<v-row class="article__sign">{{ article.autor }}</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import './assets/css/main.css'
|
||||
|
||||
const articles = [
|
||||
{
|
||||
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",
|
||||
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>
|
||||
|
||||
<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>
|
||||
</script>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<h1>Naši trenéři a lektoři</h1>
|
||||
<h2>Seznamte se s námi!</h2>
|
||||
<v-row style="margin-bottom: 2rem;">
|
||||
<v-col class="text-center" cols="12" md="3" v-for="lector in lectors" :key="lector.id">
|
||||
<v-avatar
|
||||
|
|
@ -11,16 +12,18 @@
|
|||
<v-img :src="lector.img" cover></v-img>
|
||||
</v-avatar>
|
||||
<h2>{{lector.name}}</h2>
|
||||
<div class="subtitle">{{ lector.desc }}</div>
|
||||
<h4>{{ lector.desc }}</h4>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import './assets/css/main.css'
|
||||
|
||||
const lectors = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Ondřej Gilar",
|
||||
img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
|
||||
img: "/Beblik.jpg",
|
||||
desc: "Trenér - latinskoamerické tance a Pro-AM",
|
||||
},
|
||||
{
|
||||
|
|
@ -42,30 +45,4 @@ const lectors = [
|
|||
desc: "Lektorka - tance pro děti",
|
||||
},
|
||||
]
|
||||
</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>
|
||||
</script>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<h4>Kontakt</h4>
|
||||
<h5>Kontakt</h5>
|
||||
<v-divider :thickness="3" />
|
||||
<div class="footer-text">Tomáš Ožana</div>
|
||||
<div class="footer-text">Zimmlerova 2893/47, Ostrava</div>
|
||||
|
|
@ -20,27 +20,26 @@
|
|||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<h4>Tréningové hodiny</h4>
|
||||
<h5>Tréningové hodiny</h5>
|
||||
<v-divider :thickness="3" />
|
||||
<div class="footer-text">Pondělí: <span class="timespan">16:30 - 18:30 (VS)</span></div>
|
||||
<div class="footer-text">Úterý: <span class="timespan">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="footer-text">Čtvrtek: <span class="timespan">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="footer-text">Sobota: <span class="timespan">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">Pondělí: <span class="to_right">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="to_left">Středa: <span class="to_right">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="to_left">Pátek: <span class="to_right">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="to_left">Neděle: <span class="to_right">16:30 - 18:30 (VS)</span></div>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<h4>Sociální sítě</h4>
|
||||
<h5>Sociální sítě</h5>
|
||||
<v-divider :thickness="3" />
|
||||
<!-- 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>
|
||||
<big-icon icon="mdi-facebook" />
|
||||
<big-icon icon="mdi-instagram" />
|
||||
<big-icon icon="mdi-youtube" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider :thickness="3" style="margin-top: 60px" />
|
||||
|
|
@ -60,32 +59,6 @@
|
|||
</v-footer>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import './assets/css/main.css'
|
||||
|
||||
</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>
|
||||
</script>
|
||||
|
|
@ -1,57 +1,120 @@
|
|||
<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-layout>
|
||||
<v-app-bar
|
||||
color="primary"
|
||||
style="position: sticky"
|
||||
>
|
||||
<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-app-bar-nav-icon
|
||||
@click="drawer = !drawer"
|
||||
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>
|
||||
</v-navigation-drawer>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
el: '#app',
|
||||
data () {
|
||||
return {
|
||||
drawer: false,
|
||||
tab: null,
|
||||
items: [
|
||||
'O nás', "Trenéři", 'Kurzy', 'Galerie', 'Aktuality', 'Kontakty',
|
||||
],
|
||||
<script setup lang="ts">
|
||||
function waitForElement (selector: string, timeout = 2000) : Promise<Element> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const startTime = Date.now();
|
||||
// eslint-disable-next-line prefer-const
|
||||
let observer: MutationObserver;
|
||||
|
||||
function checkElement () {
|
||||
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>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<v-layout>
|
||||
<v-app app>
|
||||
<menu-header/>
|
||||
<menu-header />
|
||||
<v-main>
|
||||
<slot />
|
||||
</v-main>
|
||||
<menu-footer/>
|
||||
<menu-footer />
|
||||
</v-app>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
|
@ -1,10 +1,63 @@
|
|||
<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>
|
||||
<script setup lang="ts">
|
||||
import './assets/css/main.css'
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
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>
|
||||
|
|
@ -1,22 +1,20 @@
|
|||
<template>
|
||||
<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-h3 font-weight-thin mb-4">
|
||||
<div class="d-flex flex-column fill-height justify-center">
|
||||
<h1 class="text-white">
|
||||
Taneční klub Ostrava
|
||||
</h1>
|
||||
<h2 class="subheading">
|
||||
<h2>
|
||||
Naučíme Vás tančit!
|
||||
</h2>
|
||||
</div>
|
||||
</v-parallax>
|
||||
<news />
|
||||
<advantages/>
|
||||
<courses />
|
||||
<about />
|
||||
<trainers/>
|
||||
<references/>
|
||||
<contact-us/>
|
||||
<advantages id="advantages"/>
|
||||
<courses id="courses"/>
|
||||
<news id="article"/>
|
||||
<about id="about"/>
|
||||
<trainers id="trainers"/>
|
||||
<contact-us id="contact"/>
|
||||
</template>
|
||||
14
services/frontend/pages/kontakty.vue
Normal file
14
services/frontend/pages/kontakty.vue
Normal 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>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
@ -3,8 +3,57 @@ import '@mdi/font/css/materialdesignicons.css'
|
|||
|
||||
import 'vuetify/styles'
|
||||
import { createVuetify } from 'vuetify'
|
||||
import { aliases, mdi } from 'vuetify/iconsets/mdi'
|
||||
import {VIcon} from "vuetify/components";
|
||||
|
||||
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)
|
||||
})
|
||||
|
|
|
|||
BIN
services/frontend/public/Beblik.jpg
Normal file
BIN
services/frontend/public/Beblik.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Loading…
Reference in a new issue