finish desktop view pt2

This commit is contained in:
2026-06-20 11:17:10 +02:00
parent 45c9b1c719
commit bb0a743979
17 changed files with 168 additions and 106 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 670 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

+1
View File
@@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6">
<div class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6 xl:max-w-315 md:px-0">
<div
class="text-center text-2xl text-ejc-dark font-extrabold leading-[130%] md:text-[40px]">
Discover the host cities!
+16 -11
View File
@@ -1,16 +1,21 @@
<div
class="h-[calc(100dvh-76px)] md:h-[calc(100dvh-108px)] flex flex-col justify-center items-center px-5 gap-6 bg-[#EAEFFA] md:flex-row md:bg-[url(/images/tatabanya.jpg)] md:bg-cover md:gap-72 md:bg-blend-overlay md:bg-ejc-dark-blue/50">
<img
src="/images/cover_logo.png"
class="w-6/12 md:order-last md:max-h-67 md:w-auto"
alt="EJC2026 logo" />
<div class="flex flex-col justify-center items-center gap-6 md:gap-7.5 md:items-start">
class="h-[calc(100dvh-76px)] md:h-[calc(100dvh-108px)] bg-[#EAEFFA] md:bg-[url(/images/tatabanya.jpg)] md:bg-cover md:bg-blend-overlay md:bg-ejc-dark-blue/50 flex flex-col justify-center items-center">
<div
class="container flex flex-col justify-center items-center px-5 gap-6 md:flex-row md:justify-around xl:max-w-315 md:px-0">
<img
src="/images/cover_logo.png"
class="w-6/12 md:order-last md:max-h-67 md:w-auto"
alt="EJC2026 logo" />
<div
class="text-ejc-dark text-2xl xs:text-[30px] font-extrabold leading-[130%] text-center md:text-left md:text-[60px] md:text-white">
2026 European Junior<br />Championships
</div>
<div class="text-center text-ejc-orange font-bold text-[16px] md:text-[20px]">
18-27 Augustus 2026
class="flex flex-col justify-center items-center gap-6 md:gap-7.5 md:items-start">
<div
class="text-ejc-dark text-2xl xs:text-[30px] font-extrabold leading-[130%] text-center md:text-left md:text-[45px] lg:text-[60px] md:text-white">
2026 European Junior<br />Championships
</div>
<div
class="text-center text-ejc-orange font-bold text-[16px] md:text-[20px]">
18-27 Augustus 2026
</div>
</div>
</div>
</div>
+70 -35
View File
@@ -1,47 +1,82 @@
<div class="w-screen bg-ejc-dark-blue px-5 py-10">
<div class="container mx-auto flex flex-col gap-6 md:flex-row md:justify-between">
<div class="flex justify-center">
<img src="/images/logo.png" class="max-w-43.75" alt="Logo" />
</div>
<div class="flex flex-col gap-3">
<div class="text-white font-bold text-[16px] md:text-[20px]">Location</div>
<div class="text-white text-[16px] leading-[160%] flex flex-col gap-2.5">
<div>Tatabányai Multifunkcionális Csarnok</div>
<div class="flex gap-2.5">
<app-marker></app-marker>
<div class="text-white text-[16px]">2800 Tatabánya, Olimpikon u.</div>
<div class="w-screen bg-ejc-dark-blue">
<div
class="container mx-auto flex flex-col gap-6 md:flex-wrap md:justify-center xl:max-w-315 px-5 py-10 md:px-0 lg:flex-row lg:justify-between lg:gap-20 xl:gap-30">
<div
class="flex flex-col gap-6 md:flex-row lg:flex-1 lg:justify-between lg:gap-0">
<div class="flex justify-center md:flex-1 md:justify-start">
<img src="/images/logo.png" class="max-w-43.75" alt="Logo" />
</div>
<div class="flex flex-col gap-3 md:flex-1 sm:items-center md:items-start">
<div
class="text-white sm:text-center md:text-left font-bold text-[16px] md:text-[20px]">
Location
</div>
<div
class="text-white sm:text-center md:text-left text-[16px] leading-[160%] flex flex-col gap-2.5">
<div>Tatabányai Multifunkcionális Csarnok</div>
<div class="flex gap-2.5 sm:justify-center md:justify-start">
<app-marker></app-marker>
<div class="text-white sm:text-center md:text-left text-[16px]">
2800 Tatabánya, Olimpikon u.
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-3">
<div class="text-white font-bold text-[16px] md:text-[20px]">Contact</div>
<div class="text-white text-[16px] leading-[160%] flex flex-col gap-2.5">
<div>Hungarian Badminton Association</div>
<div class="flex gap-2.5 items-center">
<app-mail></app-mail>
<div class="text-white text-[16px]">iroda@badminton.hu</div>
<div
class="flex flex-col gap-6 md:flex-row lg:flex-1 lg:justify-between lg:gap-0">
<div class="flex flex-col gap-3 md:flex-1">
<div
class="text-white sm:text-center md:text-left font-bold text-[16px] md:text-[20px]">
Contact
</div>
<div class="flex gap-2.5 items-center">
<app-phone></app-phone>
<div class="text-white text-[16px]">+36 30 329 5154</div>
</div>
<div>Badminton Europe</div>
<div class="flex gap-2.5 items-center">
<app-mail></app-mail>
<div class="text-white text-[16px]">events@badmintoneurope.com</div>
<div
class="text-white sm:text-center md:text-left text-[16px] leading-[160%] flex flex-col gap-2.5">
<div>Hungarian Badminton Association</div>
<div
class="flex gap-2.5 items-center sm:justify-center md:justify-start">
<app-mail></app-mail>
<div class="text-white sm:text-center md:text-left text-[16px]">
iroda@badminton.hu
</div>
</div>
<div
class="flex gap-2.5 items-center sm:justify-center md:justify-start">
<app-phone></app-phone>
<div class="text-white sm:text-center md:text-left text-[16px]">
+36 30 329 5154
</div>
</div>
<div>Badminton Europe</div>
<div
class="flex gap-2.5 items-center sm:justify-center md:justify-start">
<app-mail></app-mail>
<div class="text-white sm:text-center md:text-left text-[16px]">
events@badmintoneurope.com
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-3">
<div class="text-white font-bold text-[16px] md:text-[20px]">Follow us!</div>
<div class="flex gap-2.5">
<img src="/images/facebook.png" alt="Facebook" class="w-7.5 md:w-10" />
<img src="/images/instagram.png" alt="Instagram" class="w-7.5 md:w-10" />
<img src="/images/youtube.png" alt="Youtube" class="w-7.5 md:w-10" />
<div class="flex flex-col gap-3 md:flex-1 lg:items-end">
<div
class="text-white sm:text-center md:text-left font-bold text-[16px] md:text-[20px] lg:pr-10">
Follow us!
</div>
<div class="flex gap-2.5 sm:justify-center md:justify-start">
<img
src="/images/facebook.png"
alt="Facebook"
class="w-7.5 md:w-10" />
<img
src="/images/instagram.png"
alt="Instagram"
class="w-7.5 md:w-10" />
<img src="/images/youtube.png" alt="Youtube" class="w-7.5 md:w-10" />
</div>
</div>
</div>
</div>
<div class="flex justify-center text-white text-[12px] mt-6">
<div class="flex justify-center text-white text-[12px] mt-6 pb-6">
© Magyar Tollaslabda Szövetség
</div>
</div>
+9 -7
View File
@@ -1,9 +1,9 @@
<div class="w-screen bg-ejc-orange h-10.25 hidden md:flex items-center">
<div class="container mx-auto flex justify-between">
<div class="container mx-auto flex justify-between xl:max-w-315">
<div class="flex gap-6">
<div class="flex gap-2.5 items-center">
<app-mail></app-mail>
<div class="text-white text-[13px] font-bold">iroda@badminton.hu</div>
<div class="text-white text-[13px] font-bold">office@badminton.hu</div>
</div>
<div class="flex gap-2.5 items-center">
<app-phone></app-phone>
@@ -12,9 +12,9 @@
</div>
<div class="flex gap-6 text-[13px] font-bold text-ejc-dark">
<div>
<a class="text-ejc-dark" href="https://badmintoneurope.com"
>Badminton Europe</a
>
<a class="text-ejc-dark" href="https://badmintoneurope.com">
Badminton Europe
</a>
</div>
<div>
<a class="text-ejc-dark" href="https://badminton.hu">badminton.hu</a>
@@ -23,7 +23,7 @@
</div>
</div>
<div class="w-screen bg-ejc-dark-blue h-16.75 hidden md:flex items-center">
<div class="container mx-auto flex justify-between">
<div class="container mx-auto flex justify-between xl:max-w-315">
<img class="w-5.25" src="/images/logo-small.png" alt="Logo" />
<div class="flex gap-6 text-[16px] font-bold text-white">
<div>
@@ -60,7 +60,9 @@
<div
#menuContainer
class="w-screen flex md:hidden items-center h-19 bg-ejc-dark-blue justify-between px-5 relative">
<div></div>
<div>
<img class="w-10" src="/images/logo-small.png" alt="Logo" />
</div>
<button
type="button"
+35 -25
View File
@@ -1,5 +1,6 @@
<div class="w-screen bg-ejc-dark-blue">
<div class="container mx-auto px-5 py-10 flex flex-col gap-6 md:py-20">
<div
class="container mx-auto px-5 py-10 flex flex-col gap-6 md:py-20 xl:max-w-315 md:px-0">
<div
class="text-white font-extrabold text-2xl text-center md:text-[40px] md:text-left">
Useful Information
@@ -12,35 +13,44 @@
insert this password:<br />EJC2026
</div>
</div>
<div class="flex flex-col gap-6 md:w-full md:flex-row">
<div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
<div class="font-bold text-[16px] leading-[130%]">
Emergency number
<div
class="flex flex-col gap-6 md:w-full md:flex-row md:flex-wrap xl:flex-nowrap">
<div class="flex flex-col gap-6 md:w-full md:flex-row">
<div
class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
<div class="font-bold text-[16px] leading-[130%]">
Emergency number
</div>
<div class="text-[16px] leading-[130%]">112</div>
</div>
<div class="text-[16px] leading-[130%]">112</div>
</div>
<div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
<div class="font-bold text-[16px] leading-[130%]">
Nearest hospital
</div>
<div class="text-[16px] leading-[160%]">
<p class="mb-3">
Komárom-Esztergom Vármegyei Szent Borbála Kórház 2800
</p>
<p>Tatabánya, Dózsa György út 77.</p>
<div
class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
<div class="font-bold text-[16px] leading-[130%]">
Nearest hospital
</div>
<div class="text-[16px] leading-[160%]">
<p class="mb-3">
Komárom-Esztergom Vármegyei Szent Borbála Kórház 2800
</p>
<p>Tatabánya, Dózsa György út 77.</p>
</div>
</div>
</div>
<div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
<div class="font-bold text-[16px] leading-[130%]">
On-site medical services
<div class="flex flex-col gap-6 md:w-full md:flex-row">
<div
class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
<div class="font-bold text-[16px] leading-[130%]">
On-site medical services
</div>
<div class="text-[16px] leading-[130%]"></div>
</div>
<div class="text-[16px] leading-[130%]"></div>
</div>
<div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
<div class="font-bold text-[16px] leading-[130%]">
Massage booking
<div
class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
<div class="font-bold text-[16px] leading-[130%]">
Massage booking
</div>
<div class="text-[16px] leading-[130%]"></div>
</div>
<div class="text-[16px] leading-[130%]"></div>
</div>
</div>
<div class="flex flex-col gap-6 md:w-full md:flex-row">
+11 -5
View File
@@ -1,14 +1,20 @@
<div class="container mx-auto px-5 py-10 bg-white">
<div class="container mx-auto px-5 py-10 bg-white xl:max-w-315 md:px-0">
<div class="font-extrabold text-ejc-dark text-2xl text-center md:text-[40px]">
Media
</div>
</div>
<div class="container mx-auto px-5 pb-10 bg-white flex flex-col gap-5 md:flex-row">
<div class="md:order-last md:flex-1 md:flex md:justify-center md:items-center">
<img src="/images/badminton_europe_tv.png" class="w-full md:max-w-[395px] md:max-h-[120px]" alt="Badminton Europe TV" />
<div
class="container mx-auto px-5 pb-10 bg-white flex flex-col gap-5 md:flex-row xl:max-w-315 md:px-0">
<div
class="md:order-last md:flex-1 md:flex md:justify-center md:items-center">
<img
src="/images/badminton_europe_tv.png"
class="w-full md:max-w-98.75 md:max-h-30"
alt="Badminton Europe TV" />
</div>
<div class="flex flex-col gap-5 md:flex-1">
<div class="font-extrabold text-2xl text-ejc-dark leading-[130%] md:text-[40px]">
<div
class="font-extrabold text-2xl text-ejc-dark leading-[130%] md:text-[40px]">
Watch every match live on badmintoneurope.tv
</div>
<div
+1 -1
View File
@@ -1,5 +1,5 @@
<div
class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6 md:px-0 md:py-20">
class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6 md:px-0 md:py-20 xl:max-w-315">
<div
class="text-center text-2xl text-ejc-dark font-extrabold leading-[130%] md:text-[40px]">
Follow the two events!
+10 -10
View File
@@ -1,7 +1,7 @@
<div class="w-screen bg-ejc-orange">
<div
class="container mx-auto px-5 py-10 flex flex-col gap-6 md:flex-row md:pb-0">
<div class="md:order-last flex-1">
class="container mx-auto px-5 py-10 flex flex-col gap-6 md:flex-row lg:pb-0 md:gap-15 lg:gap-20 xl:max-w-315 md:px-0">
<div class="md:order-last flex-1 md:flex md:items-center">
<img
class="inline-block md:hidden"
src="/images/csarnok.jpg"
@@ -11,7 +11,7 @@
src="/images/csarnok.png"
alt="Hall" />
</div>
<div class="flex flex-col gap-6 flex-1">
<div class="flex flex-col gap-6 flex-1 md:flex-2 lg:flex-1">
<div class="text-white font-extrabold text-2xl md:text-[40px]">Venue</div>
<div class="text-white text-[16px] leading-[160%]">
The Tatabánya Multifunctional Sports Hall is a state-of-the-art indoor
@@ -21,29 +21,29 @@
volleyball and other indoor sports, as well as major cultural and
sporting events.
</div>
<div class="flex flex-col gap-6 md:flex-row">
<div class="flex flex-col gap-6">
<div class="flex gap-2.5 md:flex-col">
<div class="flex flex-col gap-6 lg:flex-row lg:flex-wrap">
<div class="flex flex-col gap-6 lg:flex-row lg:w-full lg:flex">
<div class="flex gap-2.5 lg:flex-col lg:flex-1">
<app-marker></app-marker>
<div class="text-white font-bold text-[16px]">
2800 Tatabánya, Olimpikon u.
</div>
</div>
<div class="flex gap-2.5 md:flex-col">
<div class="flex gap-2.5 lg:flex-col lg:flex-1">
<app-car></app-car>
<div class="text-white font-bold text-[16px]">
500 parkingplaces are available
</div>
</div>
</div>
<div class="flex flex-col gap-6">
<div class="flex gap-2.5 md:flex-col">
<div class="flex flex-col gap-6 lg:flex-row lg:w-full lg:flex">
<div class="flex gap-2.5 lg:flex-col lg:flex-1">
<app-bus></app-bus>
<div class="text-white font-bold text-[16px]">
Shuttle buses from and to the official hotels
</div>
</div>
<div class="flex gap-2.5 md:flex-col">
<div class="flex gap-2.5 lg:flex-col lg:flex-1">
<app-bus></app-bus>
<div class="text-white font-bold text-[16px]">
The schedule is available on the Sportity app
+1 -1
View File
@@ -1,6 +1,6 @@
<div
class="bg-ejc-orange py-10 px-5 text-center text-white font-extrabold text-2xl leading-[130%] md:px-0 md:py-20 md:text-[40px] md:text-left">
<div class="container mx-auto">
<div class="container mx-auto xl:max-w-315">
Welcome to the 2026 Europen Junior Championships in Tatabánya, Hungary!
</div>
</div>
+13 -10
View File
@@ -1,13 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>2026 European Junior Championships</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
<head>
<meta charset="utf-8" />
<title>2026 European Junior Championships</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png" />
<link rel="manifest" href="/images/site.webmanifest" />
</head>
<body>
<app-root></app-root>
</body>
</html>