mobile design until Media section
This commit is contained in:
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: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
+6
-341
@@ -1,344 +1,9 @@
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * 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>
|
||||
</main>
|
||||
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * * -->
|
||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
||||
|
||||
|
||||
<app-cover></app-cover>
|
||||
<app-welcome></app-welcome>
|
||||
<app-two-events></app-two-events>
|
||||
<app-venue></app-venue>
|
||||
<router-outlet />
|
||||
</main>
|
||||
|
||||
+7
-2
@@ -1,11 +1,16 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [RouterOutlet],
|
||||
imports: [RouterOutlet, Header, Cover, Welcome, TwoEvents, Venue],
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.css'
|
||||
styleUrl: './app.css',
|
||||
})
|
||||
export class App {
|
||||
protected readonly title = signal('ejc');
|
||||
|
||||
@@ -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 |
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-bus',
|
||||
imports: [],
|
||||
templateUrl: './bus.html',
|
||||
styleUrl: './bus.css',
|
||||
})
|
||||
export class Bus {}
|
||||
@@ -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 |
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-car',
|
||||
imports: [],
|
||||
templateUrl: './car.html',
|
||||
styleUrl: './car.css',
|
||||
})
|
||||
export class Car {}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,11 @@
|
||||
<div
|
||||
class="h-[calc(100dvh-76px)] flex flex-col justify-center items-center px-5 gap-6 bg-[#EAEFFA]">
|
||||
<img src="/images/cover_logo.png" class="w-6/12" alt="EJC2026 logo" />
|
||||
<div
|
||||
class="text-ejc-dark text-2xl xs:text-[30px] font-extrabold leading-[130%] text-center">
|
||||
2026 European Junior<br />Championships
|
||||
</div>
|
||||
<div class="text-center text-ejc-orange font-bold text-[16px]">
|
||||
18-27 Augustus 2026
|
||||
</div>
|
||||
</div>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-cover',
|
||||
imports: [],
|
||||
templateUrl: './cover.html',
|
||||
styleUrl: './cover.css',
|
||||
})
|
||||
export class Cover {}
|
||||
@@ -0,0 +1,51 @@
|
||||
<div class="w-screen bg-ejc-orange h-10.25 hidden md:flex items-center">
|
||||
<div class="container mx-auto">aaa</div>
|
||||
</div>
|
||||
<div
|
||||
#menuContainer
|
||||
class="w-screen flex md:hidden items-center h-19 bg-ejc-dark-blue justify-between px-5 relative">
|
||||
<div>logo</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
(click)="isMenuOpen = !isMenuOpen"
|
||||
class="flex items-center justify-center">
|
||||
<!-- 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-gray-100 transition-colors cursor-pointer"
|
||||
(click)="closeMenu()">
|
||||
Menu Item 1
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="block px-4 py-3 hover:bg-gray-100 transition-colors cursor-pointer"
|
||||
(click)="closeMenu()">
|
||||
Menu Item 2
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="block px-4 py-3 hover:bg-gray-100 transition-colors cursor-pointer"
|
||||
(click)="closeMenu()">
|
||||
Menu Item 3
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
imports: [],
|
||||
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;
|
||||
}
|
||||
|
||||
@HostListener('document:click', ['$event'])
|
||||
onDocumentClick(event: MouseEvent): void {
|
||||
if (!this.isMenuOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
const clickedInside = this.menuContainer.nativeElement.contains(
|
||||
event.target,
|
||||
);
|
||||
|
||||
if (!clickedInside) {
|
||||
this.closeMenu();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
<svg
|
||||
width="16"
|
||||
height="21"
|
||||
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: 713 B |
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-marker',
|
||||
imports: [],
|
||||
templateUrl: './marker.html',
|
||||
styleUrl: './marker.css',
|
||||
})
|
||||
export class Marker {}
|
||||
@@ -0,0 +1,39 @@
|
||||
<div class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6">
|
||||
<div class="text-center text-2xl text-ejc-dark font-extrabold leading-[130%]">
|
||||
Follow the two events!
|
||||
</div>
|
||||
<div class="flex flex-col gap-6">
|
||||
<img 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 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>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,38 @@
|
||||
<div class="container mx-auto bg-ejc-orange px-5 py-10 flex flex-col gap-6">
|
||||
<img src="/images/csarnok.jpg" alt="Hall" />
|
||||
<div class="text-white font-extrabold text-2xl">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">
|
||||
<div class="flex gap-2.5">
|
||||
<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">
|
||||
<app-car></app-car>
|
||||
<div class="text-white font-bold text-[16px]">
|
||||
500 parkingplaces are available
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2.5">
|
||||
<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">
|
||||
<app-bus></app-bus>
|
||||
<div class="text-white font-bold text-[16px]">
|
||||
The schedule is available on the Sportity app
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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 {}
|
||||
@@ -0,0 +1,4 @@
|
||||
<div
|
||||
class="bg-ejc-orange py-10 px-5 text-center text-white font-extrabold text-2xl leading-[130%]">
|
||||
Welcome to the 2026 Europen Junior Championships in Tatabánya, Hungary!
|
||||
</div>
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-welcome',
|
||||
imports: [],
|
||||
templateUrl: './welcome.html',
|
||||
styleUrl: './welcome.css',
|
||||
})
|
||||
export class Welcome {}
|
||||
@@ -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';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user