Compare commits

...

11 Commits

Author SHA1 Message Date
tothbt f8c444d1e8 add Matomo tracking code 2026-06-20 11:46:11 +02:00
tothbt bb0a743979 finish desktop view pt2 2026-06-20 11:17:10 +02:00
tothbt 45c9b1c719 finish desktop view pt1 2026-06-19 21:42:28 +02:00
tothbt 9a9bbe33c0 start working on the cover 2026-06-19 16:47:27 +02:00
tothbt b045dc5608 add secondary header row on desktop 2026-06-19 14:21:18 +02:00
tothbt 7ed63e6705 finish mobile menu and scroll event 2026-06-19 13:34:37 +02:00
tothbt 8786d24b37 finish footer 2026-06-18 20:17:17 +02:00
tothbt ad028713df mobile design until Footer section 2026-06-17 19:18:21 +02:00
tothbt e4f51ed01e mobile design until Media section 2026-06-17 14:13:15 +02:00
tothbt 103d2be218 install Inter font 2026-06-17 14:13:00 +02:00
tothbt 8249d87a21 add prettier config 2026-06-17 14:12:46 +02:00
87 changed files with 1158 additions and 364 deletions
+5 -10
View File
@@ -1,12 +1,7 @@
{
"printWidth": 100,
"singleQuote": true,
"overrides": [
{
"files": "*.html",
"options": {
"parser": "angular"
}
}
]
"tabWidth": 2,
"useTabs": false,
"bracketSameLine": true,
"semi": true,
"singleQuote": true
}
+10
View File
@@ -16,6 +16,7 @@
"@angular/platform-server": "^21.2.0",
"@angular/router": "^21.2.0",
"@angular/ssr": "^21.2.15",
"@fontsource/inter": "^5.2.8",
"express": "^5.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0"
@@ -1662,6 +1663,15 @@
}
}
},
"node_modules/@fontsource/inter": {
"version": "5.2.8",
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
"integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==",
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@gar/promise-retry": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@gar/promise-retry/-/promise-retry-1.0.3.tgz",
+1
View File
@@ -20,6 +20,7 @@
"@angular/platform-server": "^21.2.0",
"@angular/router": "^21.2.0",
"@angular/ssr": "^21.2.15",
"@fontsource/inter": "^5.2.8",
"express": "^5.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0"
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: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 507 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 927 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 928 B

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 988 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 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"}
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 217 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 828 B

+10 -341
View File
@@ -1,344 +1,13 @@
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host {
--bright-blue: oklch(51.01% 0.274 263.83);
--electric-violet: oklch(53.18% 0.28 296.97);
--french-violet: oklch(47.66% 0.246 305.88);
--vivid-pink: oklch(69.02% 0.277 332.77);
--hot-red: oklch(61.42% 0.238 15.34);
--orange-red: oklch(63.32% 0.24 31.68);
--gray-900: oklch(19.37% 0.006 300.98);
--gray-700: oklch(36.98% 0.014 302.71);
--gray-400: oklch(70.9% 0.015 304.04);
--red-to-pink-to-purple-vertical-gradient: linear-gradient(
180deg,
var(--orange-red) 0%,
var(--vivid-pink) 50%,
var(--electric-violet) 100%
);
--red-to-pink-to-purple-horizontal-gradient: linear-gradient(
90deg,
var(--orange-red) 0%,
var(--vivid-pink) 50%,
var(--electric-violet) 100%
);
--pill-accent: var(--bright-blue);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
height: 100dvh;
}
h1 {
font-size: 3.125rem;
color: var(--gray-900);
font-weight: 500;
line-height: 100%;
letter-spacing: -0.125rem;
margin: 0;
font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
}
p {
margin: 0;
color: var(--gray-700);
}
main {
width: 100%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
box-sizing: inherit;
position: relative;
}
.angular-logo {
max-width: 9.2rem;
}
.content {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 700px;
margin-bottom: 3rem;
}
.content h1 {
margin-top: 1.75rem;
}
.content p {
margin-top: 1.5rem;
}
.divider {
width: 1px;
background: var(--red-to-pink-to-purple-vertical-gradient);
margin-inline: 0.5rem;
}
.pill-group {
display: flex;
flex-direction: column;
align-items: start;
flex-wrap: wrap;
gap: 1.25rem;
}
.pill {
display: flex;
align-items: center;
--pill-accent: var(--bright-blue);
background: color-mix(in srgb, var(--pill-accent) 5%, transparent);
color: var(--pill-accent);
padding-inline: 0.75rem;
padding-block: 0.375rem;
border-radius: 2.75rem;
border: 0;
transition: background 0.3s ease;
font-family: var(--inter-font);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.4rem;
letter-spacing: -0.00875rem;
text-decoration: none;
white-space: nowrap;
}
.pill:hover {
background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
}
.pill-group .pill:nth-child(6n + 1) {
--pill-accent: var(--bright-blue);
}
.pill-group .pill:nth-child(6n + 2) {
--pill-accent: var(--electric-violet);
}
.pill-group .pill:nth-child(6n + 3) {
--pill-accent: var(--french-violet);
}
.pill-group .pill:nth-child(6n + 4),
.pill-group .pill:nth-child(6n + 5),
.pill-group .pill:nth-child(6n + 6) {
--pill-accent: var(--hot-red);
}
.pill-group svg {
margin-inline-start: 0.25rem;
}
.social-links {
display: flex;
align-items: center;
gap: 0.73rem;
margin-top: 1.5rem;
}
.social-links path {
transition: fill 0.3s ease;
fill: var(--gray-400);
}
.social-links a:hover svg path {
fill: var(--gray-900);
}
@media screen and (max-width: 650px) {
.content {
flex-direction: column;
width: max-content;
}
.divider {
height: 1px;
width: 100%;
background: var(--red-to-pink-to-purple-horizontal-gradient);
margin-block: 1.5rem;
}
}
</style>
<app-header></app-header>
<main class="main">
<div class="content">
<div class="left-side">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 982 239"
fill="none"
class="angular-logo"
>
<g clip-path="url(#a)">
<path
fill="url(#b)"
d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
/>
<path
fill="url(#c)"
d="M388.676 191.625h30.849L363.31 31.828h-35.758l-56.215 159.797h30.848l13.174-39.356h60.061l13.256 39.356Zm-65.461-62.675 21.602-64.311h1.227l21.602 64.311h-44.431Zm126.831-7.527v70.202h-28.23V71.839h27.002v20.374h1.392c2.782-6.71 7.2-12.028 13.255-15.956 6.056-3.927 13.584-5.89 22.503-5.89 8.264 0 15.465 1.8 21.684 5.318 6.137 3.518 10.964 8.673 14.319 15.382 3.437 6.71 5.074 14.81 4.992 24.383v76.175h-28.23v-71.92c0-8.019-2.046-14.237-6.219-18.819-4.173-4.5-9.819-6.791-17.102-6.791-4.91 0-9.328 1.063-13.174 3.272-3.846 2.128-6.792 5.237-9.001 9.328-2.046 4.009-3.191 8.918-3.191 14.728ZM589.233 239c-10.147 0-18.82-1.391-26.103-4.091-7.282-2.7-13.092-6.382-17.511-10.964-4.418-4.582-7.528-9.655-9.164-15.219l25.448-6.136c1.145 2.372 2.782 4.663 4.991 6.954 2.209 2.291 5.155 4.255 8.837 5.81 3.683 1.554 8.428 2.291 14.074 2.291 8.019 0 14.647-1.964 19.884-5.81 5.237-3.845 7.856-10.227 7.856-19.064v-22.665h-1.391c-1.473 2.946-3.601 5.892-6.383 9.001-2.782 3.109-6.464 5.645-10.965 7.691-4.582 2.046-10.228 3.109-17.101 3.109-9.165 0-17.511-2.209-25.039-6.545-7.446-4.337-13.42-10.883-17.757-19.474-4.418-8.673-6.628-19.473-6.628-32.565 0-13.091 2.21-24.301 6.628-33.383 4.419-9.082 10.311-15.955 17.839-20.7 7.528-4.746 15.874-7.037 25.039-7.037 7.037 0 12.846 1.145 17.347 3.518 4.582 2.373 8.182 5.236 10.883 8.51 2.7 3.272 4.746 6.382 6.137 9.327h1.554v-19.8h27.821v121.749c0 10.228-2.454 18.737-7.364 25.447-4.91 6.709-11.538 11.7-20.048 15.055-8.509 3.355-18.165 4.991-28.884 4.991Zm.245-71.266c5.974 0 11.047-1.473 15.302-4.337 4.173-2.945 7.446-7.118 9.573-12.519 2.21-5.482 3.274-12.027 3.274-19.637 0-7.609-1.064-14.155-3.274-19.8-2.127-5.646-5.318-10.064-9.491-13.255-4.174-3.11-9.329-4.746-15.384-4.746s-11.537 1.636-15.792 4.91c-4.173 3.272-7.365 7.772-9.492 13.418-2.128 5.727-3.191 12.191-3.191 19.392 0 7.2 1.063 13.745 3.273 19.228 2.127 5.482 5.318 9.736 9.573 12.764 4.174 3.027 9.41 4.582 15.629 4.582Zm141.56-26.51V71.839h28.23v119.786h-27.412v-21.273h-1.227c-2.7 6.709-7.119 12.191-13.338 16.446-6.137 4.255-13.747 6.382-22.748 6.382-7.855 0-14.81-1.718-20.783-5.237-5.974-3.518-10.72-8.591-14.075-15.382-3.355-6.709-5.073-14.891-5.073-24.464V71.839h28.312v71.921c0 7.609 2.046 13.664 6.219 18.083 4.173 4.5 9.655 6.709 16.365 6.709 4.173 0 8.183-.982 12.111-3.028 3.927-2.045 7.118-5.072 9.655-9.082 2.537-4.091 3.764-9.164 3.764-15.218Zm65.707-109.395v159.796h-28.23V31.828h28.23Zm44.841 162.169c-7.61 0-14.402-1.391-20.457-4.091-6.055-2.7-10.883-6.791-14.32-12.109-3.518-5.319-5.237-11.946-5.237-19.801 0-6.791 1.228-12.355 3.765-16.773 2.536-4.419 5.891-7.937 10.228-10.637 4.337-2.618 9.164-4.664 14.647-6.055 5.4-1.391 11.046-2.373 16.856-3.027 7.037-.737 12.683-1.391 17.102-1.964 4.337-.573 7.528-1.555 9.574-2.782 1.963-1.309 3.027-3.273 3.027-5.973v-.491c0-5.891-1.718-10.391-5.237-13.664-3.518-3.191-8.51-4.828-15.056-4.828-6.955 0-12.356 1.473-16.447 4.5-4.009 3.028-6.71 6.546-8.183 10.719l-26.348-3.764c2.046-7.282 5.483-13.336 10.31-18.328 4.746-4.909 10.638-8.59 17.511-11.045 6.955-2.455 14.565-3.682 22.912-3.682 5.809 0 11.537.654 17.265 2.045s10.965 3.6 15.711 6.71c4.746 3.109 8.51 7.282 11.455 12.6 2.864 5.318 4.337 11.946 4.337 19.883v80.184h-27.166v-16.446h-.9c-1.719 3.355-4.092 6.464-7.201 9.328-3.109 2.864-6.955 5.237-11.619 6.955-4.828 1.718-10.229 2.536-16.529 2.536Zm7.364-20.701c5.646 0 10.556-1.145 14.729-3.354 4.173-2.291 7.364-5.237 9.655-9.001 2.292-3.763 3.355-7.854 3.355-12.273v-14.155c-.9.737-2.373 1.391-4.5 2.046-2.128.654-4.419 1.145-7.037 1.636-2.619.491-5.155.9-7.692 1.227-2.537.328-4.746.655-6.628.901-4.173.572-8.019 1.472-11.292 2.781-3.355 1.31-5.973 3.11-7.855 5.401-1.964 2.291-2.864 5.318-2.864 8.918 0 5.237 1.882 9.164 5.728 11.782 3.682 2.782 8.51 4.091 14.401 4.091Zm64.643 18.328V71.839h27.412v19.965h1.227c2.21-6.955 5.974-12.274 11.292-16.038 5.319-3.763 11.456-5.645 18.329-5.645 1.555 0 3.355.082 5.237.163 1.964.164 3.601.328 4.91.573v25.938c-1.227-.41-3.109-.819-5.646-1.146a58.814 58.814 0 0 0-7.446-.49c-5.155 0-9.738 1.145-13.829 3.354-4.091 2.209-7.282 5.236-9.655 9.164-2.373 3.927-3.519 8.427-3.519 13.5v70.448h-28.312ZM222.077 39.192l-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
/>
</g>
<defs>
<radialGradient
id="c"
cx="0"
cy="0"
r="1"
gradientTransform="rotate(118.122 171.182 60.81) scale(205.794)"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF41F8" />
<stop offset=".707" stop-color="#FF41F8" stop-opacity=".5" />
<stop offset="1" stop-color="#FF41F8" stop-opacity="0" />
</radialGradient>
<linearGradient
id="b"
x1="0"
x2="982"
y1="192"
y2="192"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F0060B" />
<stop offset="0" stop-color="#F0070C" />
<stop offset=".526" stop-color="#CC26D5" />
<stop offset="1" stop-color="#7702FF" />
</linearGradient>
<clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath>
</defs>
</svg>
<h1>Hello, {{ title() }}</h1>
<p>Congratulations! Your app is running. 🎉</p>
</div>
<div class="divider" role="separator" aria-label="Divider"></div>
<div class="right-side">
<div class="pill-group">
@for (item of [
{ title: 'Explore the Docs', link: 'https://angular.dev' },
{ title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
{ title: 'Prompt and best practices for AI', link: 'https://angular.dev/ai/develop-with-ai'},
{ title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
{ title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
{ title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
]; track item.title) {
<a
class="pill"
[href]="item.link"
target="_blank"
rel="noopener"
>
<span>{{ item.title }}</span>
<svg
xmlns="http://www.w3.org/2000/svg"
height="14"
viewBox="0 -960 960 960"
width="14"
fill="currentColor"
>
<path
d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
/>
</svg>
</a>
}
</div>
<div class="social-links">
<a
href="https://github.com/angular/angular"
aria-label="Github"
target="_blank"
rel="noopener"
>
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
alt="Github"
>
<path
d="M12.3047 0C5.50634 0 0 5.50942 0 12.3047C0 17.7423 3.52529 22.3535 8.41332 23.9787C9.02856 24.0946 9.25414 23.7142 9.25414 23.3871C9.25414 23.0949 9.24389 22.3207 9.23876 21.2953C5.81601 22.0377 5.09414 19.6444 5.09414 19.6444C4.53427 18.2243 3.72524 17.8449 3.72524 17.8449C2.61064 17.082 3.81137 17.0973 3.81137 17.0973C5.04697 17.1835 5.69604 18.3647 5.69604 18.3647C6.79321 20.2463 8.57636 19.7029 9.27978 19.3881C9.39052 18.5924 9.70736 18.0499 10.0591 17.7423C7.32641 17.4347 4.45429 16.3765 4.45429 11.6618C4.45429 10.3185 4.9311 9.22133 5.72065 8.36C5.58222 8.04931 5.16694 6.79833 5.82831 5.10337C5.82831 5.10337 6.85883 4.77319 9.2121 6.36459C10.1965 6.09082 11.2424 5.95546 12.2883 5.94931C13.3342 5.95546 14.3801 6.09082 15.3644 6.36459C17.7023 4.77319 18.7328 5.10337 18.7328 5.10337C19.3942 6.79833 18.9789 8.04931 18.8559 8.36C19.6403 9.22133 20.1171 10.3185 20.1171 11.6618C20.1171 16.3888 17.2409 17.4296 14.5031 17.7321C14.9338 18.1012 15.3337 18.8559 15.3337 20.0084C15.3337 21.6552 15.3183 22.978 15.3183 23.3779C15.3183 23.7009 15.5336 24.0854 16.1642 23.9623C21.0871 22.3484 24.6094 17.7341 24.6094 12.3047C24.6094 5.50942 19.0999 0 12.3047 0Z"
/>
</svg>
</a>
<a
href="https://x.com/angular"
aria-label="X"
target="_blank"
rel="noopener"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
alt="X"
>
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
/>
</svg>
</a>
<a
href="https://www.youtube.com/channel/UCbn1OgGei-DV7aSRo_HaAiw"
aria-label="Youtube"
target="_blank"
rel="noopener"
>
<svg
width="29"
height="20"
viewBox="0 0 29 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
alt="Youtube"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z"
/>
</svg>
</a>
</div>
</div>
</div>
<app-cover></app-cover>
<app-welcome></app-welcome>
<app-two-events id="events"></app-two-events>
<app-venue id="venue"></app-venue>
<app-media id="media"></app-media>
<app-information id="information"></app-information>
<app-cities></app-cities>
<app-footer></app-footer>
<router-outlet />
</main>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<router-outlet />
+22 -2
View File
@@ -1,11 +1,31 @@
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Header } from './header/header';
import { Cover } from './cover/cover';
import { Welcome } from './welcome/welcome';
import { TwoEvents } from './two-events/two-events';
import { Venue } from './venue/venue';
import { Media } from './media/media';
import { Information } from './information/information';
import { Cities } from './cities/cities';
import { Footer } from './footer/footer';
@Component({
selector: 'app-root',
imports: [RouterOutlet],
imports: [
RouterOutlet,
Header,
Cover,
Welcome,
TwoEvents,
Venue,
Media,
Information,
Cities,
Footer,
],
templateUrl: './app.html',
styleUrl: './app.css'
styleUrl: './app.css',
})
export class App {
protected readonly title = signal('ejc');
View File
+10
View File
@@ -0,0 +1,10 @@
<svg
width="19"
height="21"
viewBox="0 0 19 21"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.33333 0C14.2333 0 17.5 1.44375 17.5 3.28125V3.9375V5.25C18.1453 5.25 18.6667 5.83652 18.6667 6.5625V9.1875C18.6667 9.91348 18.1453 10.5 17.5 10.5V17.0625C17.5 17.7885 16.9786 18.375 16.3333 18.375V19.6875C16.3333 20.4135 15.812 21 15.1667 21H14C13.3547 21 12.8333 20.4135 12.8333 19.6875V18.375H5.83333V19.6875C5.83333 20.4135 5.31198 21 4.66667 21H3.5C2.85469 21 2.33333 20.4135 2.33333 19.6875V18.375C1.68802 18.375 1.16667 17.7885 1.16667 17.0625V10.5C0.521354 10.5 0 9.91348 0 9.1875V6.5625C0 5.83652 0.521354 5.25 1.16667 5.25V3.9375V3.28125C1.16667 1.44375 4.43333 0 9.33333 0ZM3.5 6.5625V10.5C3.5 11.226 4.02135 11.8125 4.66667 11.8125H8.75V5.25H4.66667C4.02135 5.25 3.5 5.83652 3.5 6.5625ZM9.91667 11.8125H14C14.6453 11.8125 15.1667 11.226 15.1667 10.5V6.5625C15.1667 5.83652 14.6453 5.25 14 5.25H9.91667V11.8125ZM4.08333 16.4062C4.39275 16.4062 4.6895 16.268 4.90829 16.0218C5.12708 15.7757 5.25 15.4418 5.25 15.0938C5.25 14.7457 5.12708 14.4118 4.90829 14.1657C4.6895 13.9195 4.39275 13.7812 4.08333 13.7812C3.77391 13.7812 3.47717 13.9195 3.25838 14.1657C3.03958 14.4118 2.91667 14.7457 2.91667 15.0938C2.91667 15.4418 3.03958 15.7757 3.25838 16.0218C3.47717 16.268 3.77391 16.4062 4.08333 16.4062ZM14.5833 16.4062C14.8928 16.4062 15.1895 16.268 15.4083 16.0218C15.6271 15.7757 15.75 15.4418 15.75 15.0938C15.75 14.7457 15.6271 14.4118 15.4083 14.1657C15.1895 13.9195 14.8928 13.7812 14.5833 13.7812C14.2739 13.7812 13.9772 13.9195 13.7584 14.1657C13.5396 14.4118 13.4167 14.7457 13.4167 15.0938C13.4167 15.4418 13.5396 15.7757 13.7584 16.0218C13.9772 16.268 14.2739 16.4062 14.5833 16.4062ZM12.8333 3.28125C12.8333 2.92031 12.5708 2.625 12.25 2.625H6.41667C6.09583 2.625 5.83333 2.92031 5.83333 3.28125C5.83333 3.64219 6.09583 3.9375 6.41667 3.9375H12.25C12.5708 3.9375 12.8333 3.64219 12.8333 3.28125Z"
fill="white" />
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Bus } from './bus';
describe('Bus', () => {
let component: Bus;
let fixture: ComponentFixture<Bus>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Bus],
}).compileComponents();
fixture = TestBed.createComponent(Bus);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+9
View File
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-bus',
imports: [],
templateUrl: './bus.html',
styleUrl: './bus.css',
})
export class Bus {}
View File
+10
View File
@@ -0,0 +1,10 @@
<svg
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.54531 4.00313L4.4748 7.5H16.5252L15.4547 4.00313C15.2701 3.40313 14.7738 3 14.216 3H6.78398C6.22617 3 5.72988 3.40313 5.54531 4.00313ZM1.62422 7.725L3.06797 3.01406C3.62168 1.20938 5.11055 0 6.78398 0H14.216C15.8895 0 17.3783 1.20938 17.932 3.01406L19.3758 7.725C20.3273 8.175 21 9.24844 21 10.5V17.25V19.5C21 20.3297 20.4135 21 19.6875 21H18.375C17.649 21 17.0625 20.3297 17.0625 19.5V17.25H3.9375V19.5C3.9375 20.3297 3.35098 21 2.625 21H1.3125C0.586523 21 0 20.3297 0 19.5V17.25V10.5C0 9.24844 0.672656 8.175 1.62422 7.725ZM5.25 12C5.25 11.6022 5.11172 11.2206 4.86558 10.9393C4.61944 10.658 4.2856 10.5 3.9375 10.5C3.5894 10.5 3.25556 10.658 3.00942 10.9393C2.76328 11.2206 2.625 11.6022 2.625 12C2.625 12.3978 2.76328 12.7794 3.00942 13.0607C3.25556 13.342 3.5894 13.5 3.9375 13.5C4.2856 13.5 4.61944 13.342 4.86558 13.0607C5.11172 12.7794 5.25 12.3978 5.25 12ZM17.0625 13.5C17.4106 13.5 17.7444 13.342 17.9906 13.0607C18.2367 12.7794 18.375 12.3978 18.375 12C18.375 11.6022 18.2367 11.2206 17.9906 10.9393C17.7444 10.658 17.4106 10.5 17.0625 10.5C16.7144 10.5 16.3806 10.658 16.1344 10.9393C15.8883 11.2206 15.75 11.6022 15.75 12C15.75 12.3978 15.8883 12.7794 16.1344 13.0607C16.3806 13.342 16.7144 13.5 17.0625 13.5Z"
fill="white" />
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Car } from './car';
describe('Car', () => {
let component: Car;
let fixture: ComponentFixture<Car>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Car],
}).compileComponents();
fixture = TestBed.createComponent(Car);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+9
View File
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-car',
imports: [],
templateUrl: './car.html',
styleUrl: './car.css',
})
export class Car {}
+10
View File
@@ -0,0 +1,10 @@
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.245 6.20903C10.5868 6.55083 10.5868 7.10591 10.245 7.4477L4.99502 12.6977C4.65322 13.0395 4.09814 13.0395 3.75635 12.6977C3.41455 12.3559 3.41455 11.8008 3.75635 11.459L8.38838 6.827L3.75908 2.19497C3.41729 1.85317 3.41729 1.2981 3.75908 0.956299C4.10088 0.614502 4.65596 0.614502 4.99775 0.956299L10.2478 6.2063L10.245 6.20903Z"
fill="white" />
</svg>

After

Width:  |  Height:  |  Size: 482 B

@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ChevronRight } from './chevron-right';
describe('ChevronRight', () => {
let component: ChevronRight;
let fixture: ComponentFixture<ChevronRight>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ChevronRight],
}).compileComponents();
fixture = TestBed.createComponent(ChevronRight);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+9
View File
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-chevron-right',
imports: [],
templateUrl: './chevron-right.html',
styleUrl: './chevron-right.css',
})
export class ChevronRight {}
View File
+49
View File
@@ -0,0 +1,49 @@
<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!
</div>
<div class="flex flex-col gap-6 md:flex-row">
<div class="flex flex-col gap-6 md:flex-1">
<img class="aspect-video" src="/images/tatabanya.jpg" alt="Tatabánya" />
<div class="text-ejc-dark font-extrabold text-xl text-center">
Tatabánya
</div>
<div class="text-center text-[16px] text-ejc-dark leading-[160%]">
Tatabánya, located in north-western Hungary, is a vibrant city with
cultural and natural attractions that make it a great destination for
athletes and visitors alike. Explore the iconic Turul Monument atop
Gerecse Mountain offering panoramic views, and unwind in the scenic
Gerecse Forest Park or the nearby Szelim cave, perfect for outdoor
enthusiasts and families.
</div>
<div class="flex justify-center">
<div
class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
More info
<app-chevron-right></app-chevron-right>
</div>
</div>
</div>
<div class="flex flex-col gap-6 md:flex-1">
<img class="aspect-video" src="/images/tata.png" alt="Tata" />
<div class="text-ejc-dark font-extrabold text-xl text-center">Tata</div>
<div class="text-center text-[16px] text-ejc-dark leading-[160%]">
Tata, known as the “Town of Waters”, is one of Hungary's most
picturesque destinations, famous for beautiful lakes, historic landmarks
and peaceful atmosphere. Visitors can explore the stunning Old Lake
(Öreg-tó), the iconic Tata Castle situated on its shores and enjoy
relaxing walks in the English Garden. Surrounded by natural beauty and
rich cultural heritage, Tata offers a perfect setting for both
recreation and sightseeing.
</div>
<div class="flex justify-center">
<div
class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
More info
<app-chevron-right></app-chevron-right>
</div>
</div>
</div>
</div>
</div>
+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Cities } from './cities';
describe('Cities', () => {
let component: Cities;
let fixture: ComponentFixture<Cities>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Cities],
}).compileComponents();
fixture = TestBed.createComponent(Cities);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+10
View File
@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
import { ChevronRight } from '../chevron-right/chevron-right';
@Component({
selector: 'app-cities',
imports: [ChevronRight],
templateUrl: './cities.html',
styleUrl: './cities.css',
})
export class Cities {}
View File
+21
View File
@@ -0,0 +1,21 @@
<div
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="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>
+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Cover } from './cover';
describe('Cover', () => {
let component: Cover;
let fixture: ComponentFixture<Cover>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Cover],
}).compileComponents();
fixture = TestBed.createComponent(Cover);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+9
View File
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-cover',
imports: [],
templateUrl: './cover.html',
styleUrl: './cover.css',
})
export class Cover {}
View File
+82
View File
@@ -0,0 +1,82 @@
<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-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="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 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 pb-6">
© Magyar Tollaslabda Szövetség
</div>
</div>
+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Footer } from './footer';
describe('Footer', () => {
let component: Footer;
let fixture: ComponentFixture<Footer>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Footer],
}).compileComponents();
fixture = TestBed.createComponent(Footer);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+12
View File
@@ -0,0 +1,12 @@
import { Component } from '@angular/core';
import { Marker } from '../marker/marker';
import { Mail } from '../mail/mail';
import { Phone } from '../phone/phone';
@Component({
selector: 'app-footer',
imports: [Marker, Mail, Phone],
templateUrl: './footer.html',
styleUrl: './footer.css',
})
export class Footer {}
View File
+112
View File
@@ -0,0 +1,112 @@
<div class="w-screen bg-ejc-orange h-10.25 hidden md:flex items-center">
<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">office@badminton.hu</div>
</div>
<div class="flex gap-2.5 items-center">
<app-phone></app-phone>
<div class="text-white text-[13px] font-bold">+36 30 329 5154</div>
</div>
</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>
</div>
<div>
<a class="text-ejc-dark" href="https://badminton.hu">badminton.hu</a>
</div>
</div>
</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 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>
<a
class="text-white font-extrabold cursor-pointer"
(click)="scrollTo('events');">
Events
</a>
</div>
<div>
<a
class="text-white font-extrabold cursor-pointer"
(click)="scrollTo('venue');">
Venue
</a>
</div>
<div>
<a
class="text-white font-extrabold cursor-pointer"
(click)="scrollTo('media');">
Media
</a>
</div>
<div>
<a
class="text-white font-extrabold cursor-pointer"
(click)="scrollTo('information');">
Information
</a>
</div>
</div>
</div>
</div>
<div
#menuContainer
class="w-screen flex md:hidden items-center h-19 bg-ejc-dark-blue justify-between px-5 relative">
<div>
<img class="w-10" src="/images/logo-small.png" alt="Logo" />
</div>
<button
type="button"
(click)="isMenuOpen = !isMenuOpen"
class="flex items-center justify-center cursor-pointer">
<!-- Hamburger icon -->
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
@if (isMenuOpen) {
<div
#menu
class="absolute top-full right-0 mt-2 w-56 rounded-lg shadow-lg bg-white z-50">
<a
class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
(click)="scrollTo('events'); closeMenu()">
Events
</a>
<a
class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
(click)="scrollTo('venue'); closeMenu()">
Venue
</a>
<a
class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
(click)="scrollTo('media'); closeMenu()">
Media
</a>
<a
class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
(click)="scrollTo('information'); closeMenu()">
Information
</a>
</div>
}
</div>
+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Header } from './header';
describe('Header', () => {
let component: Header;
let fixture: ComponentFixture<Header>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Header],
}).compileComponents();
fixture = TestBed.createComponent(Header);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+43
View File
@@ -0,0 +1,43 @@
import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
import { Phone } from '../phone/phone';
import { Mail } from '../mail/mail';
@Component({
selector: 'app-header',
imports: [Phone, Mail],
templateUrl: './header.html',
styleUrl: './header.css',
})
export class Header {
isMenuOpen = false;
@ViewChild('menuContainer')
menuContainer!: ElementRef;
toggleMenu(): void {
this.isMenuOpen = !this.isMenuOpen;
}
closeMenu(): void {
this.isMenuOpen = false;
}
scrollTo(id: string): void {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
}
@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent): void {
if (!this.isMenuOpen) {
return;
}
const clickedInside = this.menuContainer.nativeElement.contains(
event.target,
);
if (!clickedInside) {
this.closeMenu();
}
}
}
View File
+77
View File
@@ -0,0 +1,77 @@
<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 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
</div>
<div class="flex flex-col gap-6 md:flex-row md:flex-wrap">
<div class="flex flex-col gap-6 md:w-full">
<div
class="bg-white p-10 text-ejc-dark font-bold text-[16px] leading-[130%]">
For direct event information please download the Sportity app and
insert this password:<br />EJC2026
</div>
</div>
<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="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="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="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>
</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%]">Currency</div>
<div class="text-[16px] leading-[160%]">
<p class="mb-3">Hungarian Forint - HUF</p>
<p>Nowadays, the average exchange rate: 1 Euro = 355 HUF</p>
</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%]">
Weather in August
</div>
<div class="text-[16px] leading-[160%]">
August is typically the hottest month in Hungary. The temperature
hits about 30℃ during the day, falling away to a balmy 19℃ at night.
On average, there will be 2 rainy days during the month
</div>
</div>
</div>
</div>
</div>
</div>
+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Information } from './information';
describe('Information', () => {
let component: Information;
let fixture: ComponentFixture<Information>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Information],
}).compileComponents();
fixture = TestBed.createComponent(Information);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+9
View File
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-information',
imports: [],
templateUrl: './information.html',
styleUrl: './information.css',
})
export class Information {}
View File
+10
View File
@@ -0,0 +1,10 @@
<svg
width="20"
height="15"
viewBox="0 0 20 15"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M1.875 0C0.839844 0 0 0.839844 0 1.875C0 2.46484 0.277344 3.01953 0.75 3.375L9.25 9.75C9.69531 10.082 10.3047 10.082 10.75 9.75L19.25 3.375C19.7227 3.01953 20 2.46484 20 1.875C20 0.839844 19.1602 0 18.125 0H1.875ZM0 4.375V12.5C0 13.8789 1.12109 15 2.5 15H17.5C18.8789 15 20 13.8789 20 12.5V4.375L11.5 10.75C10.6094 11.418 9.39062 11.418 8.5 10.75L0 4.375Z"
fill="#FCF1EE" />
</svg>

After

Width:  |  Height:  |  Size: 507 B

+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Mail } from './mail';
describe('Mail', () => {
let component: Mail;
let fixture: ComponentFixture<Mail>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Mail],
}).compileComponents();
fixture = TestBed.createComponent(Mail);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+9
View File
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-mail',
imports: [],
templateUrl: './mail.html',
styleUrl: './mail.css',
})
export class Mail {}
View File
+11
View File
@@ -0,0 +1,11 @@
<svg
width="16"
height="21"
class="overflow-visible"
viewBox="0 0 16 21"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M8.9875 20.5281C11.125 17.8881 16 11.4895 16 7.89543C16 3.5365 12.4167 0 8 0C3.58333 0 0 3.5365 0 7.89543C0 11.4895 4.875 17.8881 7.0125 20.5281C7.525 21.1573 8.475 21.1573 8.9875 20.5281ZM8 5.26362C8.70724 5.26362 9.38552 5.5409 9.88562 6.03446C10.3857 6.52802 10.6667 7.19743 10.6667 7.89543C10.6667 8.59343 10.3857 9.26284 9.88562 9.7564C9.38552 10.25 8.70724 10.5272 8 10.5272C7.29276 10.5272 6.61448 10.25 6.11438 9.7564C5.61428 9.26284 5.33333 8.59343 5.33333 7.89543C5.33333 7.19743 5.61428 6.52802 6.11438 6.03446C6.61448 5.5409 7.29276 5.26362 8 5.26362Z"
fill="white" />
</svg>

After

Width:  |  Height:  |  Size: 740 B

+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Marker } from './marker';
describe('Marker', () => {
let component: Marker;
let fixture: ComponentFixture<Marker>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Marker],
}).compileComponents();
fixture = TestBed.createComponent(Marker);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+9
View File
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-marker',
imports: [],
templateUrl: './marker.html',
styleUrl: './marker.css',
})
export class Marker {}
View File
+26
View File
@@ -0,0 +1,26 @@
<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 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]">
Watch every match live on badmintoneurope.tv
</div>
<div
class="w-45.75 py-3.75 px-7.5 rounded-md flex items-center gap-2.5 bg-ejc-orange">
<div class="font-bold text-[17px] text-white">Watch now</div>
<app-chevron-right />
</div>
</div>
</div>
+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Media } from './media';
describe('Media', () => {
let component: Media;
let fixture: ComponentFixture<Media>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Media],
}).compileComponents();
fixture = TestBed.createComponent(Media);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+10
View File
@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
import { ChevronRight } from '../chevron-right/chevron-right';
@Component({
selector: 'app-media',
imports: [ChevronRight],
templateUrl: './media.html',
styleUrl: './media.css',
})
export class Media {}
View File
+10
View File
@@ -0,0 +1,10 @@
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.44141 0.960842C6.14062 0.234279 5.34766 -0.15244 4.58984 0.0545917L1.15234 0.992092C0.472656 1.17959 0 1.79678 0 2.4999C0 12.164 7.83594 19.9999 17.5 19.9999C18.2031 19.9999 18.8203 19.5272 19.0078 18.8476L19.9453 15.4101C20.1523 14.6522 19.7656 13.8593 19.0391 13.5585L15.2891 11.996C14.6523 11.7304 13.9141 11.914 13.4805 12.4491L11.9023 14.3749C9.15234 13.0741 6.92578 10.8476 5.625 8.09756L7.55078 6.52334C8.08594 6.08584 8.26953 5.35147 8.00391 4.71475L6.44141 0.964748V0.960842Z"
fill="#FCF1EE" />
</svg>

After

Width:  |  Height:  |  Size: 639 B

+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Phone } from './phone';
describe('Phone', () => {
let component: Phone;
let fixture: ComponentFixture<Phone>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Phone],
}).compileComponents();
fixture = TestBed.createComponent(Phone);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+9
View File
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-phone',
imports: [],
templateUrl: './phone.html',
styleUrl: './phone.css',
})
export class Phone {}
View File
+49
View File
@@ -0,0 +1,49 @@
<div
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!
</div>
<div class="flex flex-col gap-6 md:flex-row">
<div class="flex flex-col gap-6">
<img
class="md:aspect-video"
src="/images/team_event.png"
alt="Team Event" />
<div class="text-ejc-dark font-extrabold text-xl text-center">
2026 European Junior Team Championships
</div>
<div
class="text-center text-[16px] text-ejc-orange font-bold leading-[130%]">
18-22 Aug 2026
</div>
<div class="flex justify-center">
<div
class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
More info
<app-chevron-right></app-chevron-right>
</div>
</div>
</div>
<div class="flex flex-col gap-6">
<img
class="md:aspect-video"
src="/images/individual_event.png"
alt="Individual Event" />
<div class="text-ejc-dark font-extrabold text-xl text-center">
2026 European Junior Championships
</div>
<div
class="text-center text-[16px] text-ejc-orange font-bold leading-[130%]">
22-27 Aug 2026
</div>
<div class="flex justify-center">
<div
class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
More info
<app-chevron-right></app-chevron-right>
</div>
</div>
</div>
</div>
</div>
+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TwoEvents } from './two-events';
describe('TwoEvents', () => {
let component: TwoEvents;
let fixture: ComponentFixture<TwoEvents>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TwoEvents],
}).compileComponents();
fixture = TestBed.createComponent(TwoEvents);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+10
View File
@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
import { ChevronRight } from "../chevron-right/chevron-right";
@Component({
selector: 'app-two-events',
imports: [ChevronRight],
templateUrl: './two-events.html',
styleUrl: './two-events.css',
})
export class TwoEvents {}
View File
+56
View File
@@ -0,0 +1,56 @@
<div class="w-screen bg-ejc-orange">
<div
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"
alt="Hall" />
<img
class="md:inline-block hidden md:w-147.5"
src="/images/csarnok.png"
alt="Hall" />
</div>
<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
sports arena with a seating capacity of around 6,000, opened in 2022.
Designed to host international and high-level competitions, it offers
versatile facilities suitable for badminton, handball, basketball,
volleyball and other indoor sports, as well as major cultural and
sporting events.
</div>
<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 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 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 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
</div>
</div>
</div>
</div>
</div>
</div>
</div>
+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Venue } from './venue';
describe('Venue', () => {
let component: Venue;
let fixture: ComponentFixture<Venue>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Venue],
}).compileComponents();
fixture = TestBed.createComponent(Venue);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+12
View File
@@ -0,0 +1,12 @@
import { Component } from '@angular/core';
import { Marker } from '../marker/marker';
import { Car } from "../car/car";
import { Bus } from "../bus/bus";
@Component({
selector: 'app-venue',
imports: [Marker, Car, Bus],
templateUrl: './venue.html',
styleUrl: './venue.css',
})
export class Venue {}
View File
+6
View File
@@ -0,0 +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 xl:max-w-315">
Welcome to the 2026 Europen Junior Championships in Tatabánya, Hungary!
</div>
</div>
+22
View File
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Welcome } from './welcome';
describe('Welcome', () => {
let component: Welcome;
let fixture: ComponentFixture<Welcome>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [Welcome],
}).compileComponents();
fixture = TestBed.createComponent(Welcome);
component = fixture.componentInstance;
await fixture.whenStable();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
+9
View File
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-welcome',
imports: [],
templateUrl: './welcome.html',
styleUrl: './welcome.css',
})
export class Welcome {}
+43 -10
View File
@@ -1,13 +1,46 @@
<!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" />
<!-- Matomo -->
<script>
var _paq = (window._paq = window._paq || []);
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = 'https://analytics.tothbt.com/';
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '6']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<!-- End Matomo Code -->
</head>
<body>
<app-root></app-root>
</body>
</html>
+18
View File
@@ -1,3 +1,21 @@
/* You can add global styles to this file, and also import other style files */
@import 'tailwindcss';
@import '@fontsource/inter';
@import "@fontsource/inter/800.css";
@theme {
--breakpoint-xs: 30rem;
--color-ejc-blue: #153255;
--color-ejc-yellow: #ffd24f;
--color-ejc-dark-blue: #111c4e;
--color-ejc-orange: #efab46;
--color-ejc-light-blue: #3d4985;
--color-ejc-dark: #011111;
--font-sans:
'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
}