@myelophone/nuxt 0.18.2

package/app/assets/css/base.css

@@ -0,0 +1,182 @@
+@font-face {
+	font-family: 'color-emoji';
+	src:
+		local('Apple Color Emoji'), local('Twemoji Mozilla'),
+		local('Segoe UI Emoji'), local('Segoe UI Symbol'),
+		local('Noto Color Emoji'), local('EmojiOne Color'),
+		local('Android Emoji');
+}
+
+body {
+	background-color: var(--ui-bg);
+	color: var(--ui-text);
+	transition:
+		background-color 0.3s ease,
+		color 0.3s ease;
+	min-height: 0.01vw;
+	/* biome-ignore lint/suspicious/noDuplicateProperties: trick for old and new browsers */
+	min-height: 100dvh;
+	text-rendering: optimizelegibility;
+}
+
+#__nuxt {
+	max-width: 100%;
+}
+
+html input,
+html textarea {
+	border-color: #e5e7eb;
+}
+
+iframe {
+	background: var(--ui-bg);
+}
+
+.min-h-dvh {
+	min-height: 100vh;
+	min-height: 100dvh;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: 500;
+	padding-top: 0.75rem;
+	padding-bottom: 0.75rem;
+}
+
+h5,
+h6 {
+	line-height: 1.4;
+}
+
+h1:not([class*='text-']) {
+	font-size: 2.4rem;
+}
+
+h2:not([class*='text-']) {
+	font-size: 2rem;
+}
+
+h3:not([class*='text-']) {
+	font-size: 1.7rem;
+}
+
+h4:not([class*='text-']) {
+	font-size: 1.4rem;
+}
+
+h5:not([class*='text-']) {
+	font-size: 1.2rem;
+}
+
+h1 {
+	line-height: 1.2;
+	font-weight: 600;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+}
+
+h2 {
+	line-height: 1.25;
+}
+
+h3 {
+	line-height: 1.3;
+}
+
+h4 {
+	line-height: 1.35;
+}
+
+a:not([class*='text-']),
+h6:not([class*='text-']),
+li:not([class*='text-']),
+p:not([class*='text-']),
+span:not([class*='text-']) {
+	font-size: 1rem;
+}
+
+p a,
+p span,
+a span,
+li a,
+li span,
+span[class^='text-'] {
+	font-size: inherit;
+}
+
+a,
+li,
+p,
+span {
+	line-height: 1.35;
+}
+
+button {
+	cursor: pointer;
+}
+
+@media (max-width: 480px), (max-height: 480px) {
+	h1:not([class*='text-']) {
+		font-size: 2rem;
+	}
+	h2:not([class*='text-']) {
+		font-size: 1.375rem;
+	}
+	h3:not([class*='text-']) {
+		font-size: 1.275rem;
+	}
+	h4:not([class*='text-']),
+	h5:not([class*='text-']),
+	h6:not([class*='text-']) {
+		font-size: 1.125rem;
+	}
+
+	h1 {
+		padding-top: 0.75rem;
+		padding-bottom: 0.75rem;
+	}
+	h2 {
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem;
+	}
+	h3 {
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem;
+	}
+	h4,
+	h5,
+	h6 {
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem;
+	}
+}
+
+:focus-visible {
+	outline: none;
+}
+
+.value {
+	font-feature-settings: 'tnum';
+	font-variant-numeric: tabular-nums;
+}
+
+.app-icon {
+	display: inline-block;
+	background-color: currentColor;
+	flex-shrink: 0;
+	vertical-align: middle;
+	mask-repeat: no-repeat;
+	mask-size: 100% 100%;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-size: 100% 100%;
+	mask-image: var(--icon-url);
+	-webkit-mask-image: var(--icon-url);
+}
+
+:where(p) .app-icon {
+	margin-top: -0.1875rem;
+}

package/app/assets/css/index.css

@@ -0,0 +1,9 @@
+@import './tailwind.css';
+@import './base.css';
+@import './theme.css';
+@import './preloader.css';
+@import './multimedia.css';
+@import './backgrounds.css';
+@import './animation.css';
+@import './links.css';
+@import './print.css';

package/app/assets/css/links.css

@@ -0,0 +1,12 @@
+a[href^='http']:not(.no-external-icon)::after {
+	content: '';
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	vertical-align: middle;
+
+	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8L8 16' stroke='%238A8A8A' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.4 8H16V12.8' stroke='%238A8A8A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+
+	background-repeat: no-repeat;
+	background-size: contain;
+}

package/app/assets/css/multimedia.css

@@ -0,0 +1,102 @@
+.loadersvg {
+	animation: loaderanimation 1s linear infinite;
+	will-change: transform;
+}
+
+@keyframes loaderanimation {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.lazy-image-wrapper {
+	position: relative;
+	display: inline-block;
+	width: 100%;
+	overflow: hidden;
+}
+
+.lazy-image {
+	display: block;
+	width: 100%;
+	height: auto;
+	opacity: 0;
+	will-change: opacity;
+}
+
+.loaderparent {
+	width: 100%;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	flex-direction: row;
+	align-items: center;
+	background: rgba(255, 255, 255, 0.05);
+	z-index: 2;
+	padding-block: 2rem;
+	padding-inline: 2rem;
+}
+
+.img-fade-in {
+	opacity: 0;
+	transition: opacity 0.3s ease;
+}
+.img-fade-in.image-visible {
+	opacity: 1;
+}
+
+.js .ssr-image {
+	opacity: 0;
+}
+
+.nojs .ssr-image {
+	opacity: 1;
+}
+
+.video-player {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	background-color: #000;
+}
+
+.poster-wrapper {
+	width: 100%;
+	height: 100%;
+	background-size: cover;
+	background-position: center;
+	position: relative;
+	cursor: pointer;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.play-icon {
+	background: rgba(0, 0, 0, 0.6);
+	border-radius: 50%;
+	padding: 16px;
+	transition: opacity 0.3s;
+}
+
+.video-wrapper {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.video {
+	width: 100%;
+	height: 100%;
+	border: none;
+}
+
+.loading-overlay {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(0, 0, 0, 0.4);
+	z-index: 2;
+}

package/app/assets/css/preloader.css

@@ -0,0 +1,68 @@
+.preloader {
+	position: relative;
+	width: 15px;
+	height: 15px;
+	border: solid 2px transparent;
+	border-top-color: #0082e6;
+	border-top-color: var(--loader-fill-color);
+	border-radius: 10px;
+	animation: preloader-spinner 400ms linear infinite;
+	pointer-events: none;
+	user-select: none;
+	margin: 1rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.preloader.hidden {
+	display: none;
+}
+
+@keyframes preloader-spinner {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.lineloader {
+	display: block;
+	width: 100%;
+	height: 2px;
+	background-color: transparent;
+	position: relative;
+	overflow: hidden;
+	margin-top: -2px;
+}
+
+.lineloader::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #0066cc;
+	background-color: var(--loader-fill-color);
+	transform: translateX(-100%);
+	animation: lineloader-animation 2s linear infinite;
+	opacity: 0.5;
+}
+
+@keyframes lineloader-animation {
+	0% {
+		transform: translateX(-100%);
+	}
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+.preloaderBox {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

package/app/assets/css/print.css

@@ -0,0 +1,40 @@
+@media print {
+	:root {
+		--ui-bg: #f7f7f7;
+		--ui-text: #1a1a1b;
+		--loader-fill-color: #000;
+		--ui-border: #374151;
+	}
+
+	body {
+		font-size: 12pt;
+		background: none;
+		max-width: 210mm;
+		margin: auto;
+	}
+
+	nav,
+	.sidebar,
+	.ads,
+	.button {
+		display: none;
+	}
+
+	a {
+		color: black;
+		text-decoration: underline;
+	}
+
+	a::after {
+		content: ' (' attr(href) ')';
+		font-size: 10pt;
+		color: gray;
+	}
+
+	h1,
+	h2,
+	h3,
+	p {
+		break-inside: avoid;
+	}
+}

package/app/assets/css/tailwind.css

@@ -0,0 +1,20 @@
+@import 'tailwindcss';
+
+@theme {
+	--font-sans:
+		-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif, color-emoji;
+	--default-font-feature-settings: normal;
+	--default-font-variation-settings: normal;
+}
+
+html {
+	font-family: var(--font-sans) !important;
+	font-feature-settings: normal !important;
+	font-variation-settings: normal !important;
+}
+
+@source "../../../**/*.{vue}";
+@source "../../constants/**/*.ts";
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

package/app/assets/css/theme.css

@@ -0,0 +1,29 @@
+:root {
+	--ui-bg: #f7f7f7;
+	--ui-text: #1a1a1b;
+	--loader-fill-color: #000;
+	--ui-border: #374151;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--ui-bg: #121212;
+		--ui-text: #e0e0e0;
+		--loader-fill-color: #000;
+		--ui-border: #d1d5db;
+	}
+}
+
+[data-theme='light'] {
+	--ui-bg: #f7f7f7;
+	--ui-text: #1a1a1b;
+	--loader-fill-color: #0082e6;
+	--ui-border: #374151;
+}
+
+[data-theme='dark'] {
+	--ui-bg: #121212;
+	--ui-text: #e0e0e0;
+	--loader-fill-color: #fff;
+	--ui-border: #d1d5db;
+}

package/app/components/consent/GoogleMap.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+type Props = {
+	address?: string;
+	placeId?: string;
+	language?: string;
+	region?: string;
+	title?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	address: "",
+	placeId: "",
+	language: "eb",
+	region: "pl",
+	title: "Google Maps",
+});
+
+const mapSrc = computed(() => {
+	const query = props.placeId ? `place_id:${props.placeId}` : props.address;
+
+	if (!query) {
+		return "";
+	}
+
+	const params = new URLSearchParams({
+		q: query,
+		output: "embed",
+		hl: props.language,
+		gl: props.region,
+	});
+
+	return `https://www.google.com/maps?${params.toString()}`;
+});
+
+const { t } = useMultiLang(["interface"]);
+</script>
+
+<template>
+	<div class="h-100 w-full">
+		<CookieConsentWrapper category="functional">
+			<iframe
+				v-if="mapSrc"
+				:src="mapSrc"
+				:title="title"
+				class="h-full w-full rounded-xl border-0"
+				loading="lazy"
+				referrerpolicy="no-referrer-when-downgrade"
+				allowfullscreen
+			/>
+
+			<div
+				v-else
+				class="flex h-full w-full items-center justify-center rounded-xl bg-gray-100"
+			>
+				{{ t("interface.noGoogleMapAddress") }}
+			</div>
+		</CookieConsentWrapper>
+	</div>
+</template>

package/app/components/consent/Youtube.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+	videoId: string;
+}>();
+</script>
+
+<template>
+	<CookieConsentWrapper category="marketing" serviceName="YouTube">
+		<div class="aspect-video rounded-xl overflow-hidden shadow-lg">
+			<iframe
+				width="100%"
+				height="100%"
+				:src="`https://www.youtube.com/embed/${videoId}`"
+				frameborder="0"
+				allow="
+					accelerometer;
+					autoplay;
+					clipboard-write;
+					encrypted-media;
+					gyroscope;
+					picture-in-picture;
+				"
+				allowfullscreen
+			></iframe>
+		</div>
+	</CookieConsentWrapper>
+</template>

package/app/components/cookie/Banner.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+const { isBannerVisible, acceptAll } = useCookieControl();
+const emit = defineEmits(["settings"]);
+const { open } = useCookieModal();
+
+const handleSettings = () => {
+	emit("settings");
+	open();
+};
+
+const { t } = useMultiLang(["cookies"]);
+</script>
+
+<template>
+	<Transition
+		appear
+		enter-active-class="transition duration-500 ease-out delay-300"
+		enter-from-class="translate-y-full opacity-0"
+		enter-to-class="translate-y-0 opacity-100"
+		leave-active-class="transition duration-300 ease-in"
+		leave-from-class="translate-y-0 opacity-100"
+		leave-to-class="translate-y-full opacity-0"
+	>
+		<div
+			v-if="isBannerVisible"
+			class="fixed bottom-4 left-4 right-4 z-60 md:right-auto md:left-6 md:bottom-6 max-w-100 mx-auto md:m-0"
+			data-nosnippet
+		>
+			<div
+				class="relative flex flex-col gap-4 p-4 w-full md:w-auto md:max-w-82.5 rounded-xl border border-neutral-200/80 bg-white/90 shadow-xl backdrop-blur-md dark:border-neutral-800/80 dark:bg-neutral-950/90"
+			>
+				<div class="flex gap-3">
+					<span class="text-xl leading-none mt-0.5 select-none"
+						>🍪</span
+					>
+					<p
+						class="text-sm font-medium leading-snug text-neutral-600 dark:text-neutral-300"
+					>
+						{{ t("cookies.weUseCookies") }}
+					</p>
+				</div>
+
+				<div class="flex flex-col gap-2">
+					<div class="grid grid-cols-2 gap-2">
+						<button
+							@click="handleSettings"
+							class="flex items-center justify-center px-3 py-2 text-xs font-semibold text-neutral-700 bg-neutral-100 rounded-lg transition-colors hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
+						>
+							{{ t("cookies.decline") }}
+						</button>
+
+						<button
+							@click="acceptAll"
+							class="flex items-center justify-center px-3 py-2 text-xs font-semibold text-white bg-neutral-900 rounded-lg shadow-sm transition-all hover:bg-neutral-800 hover:shadow dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200"
+						>
+							{{ t("cookies.acceptAll") }}
+						</button>
+					</div>
+
+					<button
+						@click="handleSettings"
+						class="w-full text-center text-xs text-neutral-400 transition-colors hover:text-neutral-900 dark:hover:text-neutral-200"
+					>
+						{{ t("cookies.changePrefs") }}
+					</button>
+				</div>
+			</div>
+		</div>
+	</Transition>
+</template>

package/app/components/cookie/ConsentWrapper.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { toast } from "vue-sonner";
+import type { CookieCategory } from "~/types/cookie";
+
+interface Props {
+	category: CookieCategory;
+	serviceName?: string;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useMultiLang(["cookies"]);
+
+const { checkConsent, isBannerVisible } = useCookieControl();
+
+const hasConsent = computed(() => checkConsent(props.category));
+
+const categoryNames = computed<Record<CookieCategory, string>>(() => ({
+	necessary: t("cookies.necessary"),
+	analytics: t("cookies.analytics"),
+	marketing: t("cookies.marketing"),
+	functional: t("cookies.functional"),
+}));
+
+const messageText = computed(() => {
+	const catName = categoryNames.value[props.category] || props.category;
+	if (props.serviceName) {
+		return `${t("cookies.toUse")} ${props.serviceName} ${t("cookies.needToAccept")} ${catName} ${t("cookies.cookies")}.`;
+	}
+	return `${t("cookies.toSee")} ${catName} ${t("cookies.cookies")}.`;
+});
+
+const handleRequestConsent = () => {
+	isBannerVisible.value = true;
+	toast.message(t("cookies.actionRequired"), {
+		description: t("cookies.selectCategories"),
+	});
+};
+</script>
+
+<template>
+	<div class="w-full h-full relative isolate">
+		<slot v-if="hasConsent" />
+
+		<div
+			v-else
+			class="flex flex-col items-center justify-center w-full h-full min-h-50 p-6 text-center bg-neutral-50 border border-neutral-200 rounded-xl dark:bg-neutral-900 dark:border-neutral-800"
+		>
+			<div class="text-4xl mb-3 opacity-80 select-none">🍪</div>
+
+			<h3
+				class="text-base font-semibold text-neutral-900 dark:text-neutral-100 mb-2"
+			>
+				{{ t("cookies.contentHidden") }}
+			</h3>
+
+			<p
+				class="text-sm text-neutral-500 dark:text-neutral-400 mb-5 max-w-xs mx-auto leading-relaxed"
+			>
+				{{ messageText }}
+			</p>
+
+			<button
+				@click="handleRequestConsent"
+				class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-neutral-900 rounded-lg shadow-sm hover:bg-neutral-800 transition-all dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200"
+			>
+				{{ t("cookies.setPrefs") }}
+			</button>
+		</div>
+	</div>
+</template>