mirror of
https://github.com/Lapikud/lapikud.github.io.git
synced 2026-08-08 21:19:12 +00:00
helpdesk page
This commit is contained in:
Henri
@@ -1,18 +1,23 @@
|
||||
<!--
|
||||
A responsive grid wrapper using CSS Grid. It exposes `min` and
|
||||
`gap` props to control the responsive column minimum width and
|
||||
spacing. Content is projected into the default slot.
|
||||
A responsive grid wrapper using CSS Grid. It exposes `min`, `columns`,
|
||||
and `gap` props to control the responsive column minimum width, fixed
|
||||
column count, and spacing. Content is projected into the default slot.
|
||||
-->
|
||||
|
||||
<script>
|
||||
export let min = "220px"; // minimum column width
|
||||
export let min = "220px"; // minimum column width (used when columns is not set)
|
||||
export let columns = null; // fixed number of columns (e.g., "2", "3", "4")
|
||||
export let gap = "var(--space-3)";
|
||||
export let className = "";
|
||||
|
||||
$: gridTemplateColumns = columns
|
||||
? `repeat(${columns}, 1fr)`
|
||||
: '1fr';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="grid {className}"
|
||||
style="--min: {min}; --gap: {gap}; grid-template-columns: 1fr; gap: var(--gap);"
|
||||
style="--min: {min}; --gap: {gap}; --columns: {gridTemplateColumns}; grid-template-columns: var(--columns); gap: var(--gap);"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -20,6 +25,10 @@ spacing. Content is projected into the default slot.
|
||||
<style>
|
||||
@media (min-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: var(--columns) !important;
|
||||
}
|
||||
|
||||
.grid:not([style*="--columns: repeat"]) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
38
src/locales/en/Helpdesk.json
Normal file
38
src/locales/en/Helpdesk.json
Normal file
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"hero": {
|
||||
"title": "HELPDESK"
|
||||
},
|
||||
"whatIs": {
|
||||
"title": "What is HELPDESK?",
|
||||
"description": "HELPDESK is a computer support service provided by MTÜ Lapikud. The service is aimed at students, lecturers, and anyone interested both inside and outside Tallinn University of Technology. Our team consists of experienced and smart IT students from Tallinn University of Technology."
|
||||
},
|
||||
"services": {
|
||||
"title": "What services do we offer?",
|
||||
"list": [
|
||||
"Computer hardware diagnostics and repair",
|
||||
"Computer hardware maintenance",
|
||||
"Software diagnostics and configuration",
|
||||
"Software installation",
|
||||
"Other electronics repair"
|
||||
]
|
||||
},
|
||||
"pricing": {
|
||||
"title": "Price List",
|
||||
"tableHeaders": {
|
||||
"service": "Service",
|
||||
"quantity": "Quantity/Time",
|
||||
"price": "Price"
|
||||
},
|
||||
"note": "Parts are ordered by the client themselves or by agreement with the technician.<br/><br/>If needed, we can come to the student village and Technopol area.<br/><br/>With our student-friendly prices and personal approach, we offer a service you won't be disappointed with!"
|
||||
},
|
||||
"hours": {
|
||||
"title": "Opening Hours:",
|
||||
"schedule": "<strong>M</strong>onday – <strong>F</strong>riday 14-19*",
|
||||
"note": "* This is the time period when we are most likely to be found. However, we cannot guarantee presence."
|
||||
},
|
||||
"location": {
|
||||
"title": "Location",
|
||||
"busInfo": "Accessible via <span class='text-[#E69635]'>buses 11, 37, 83, 91 from Keemia stop</span> or <span class='text-[#E69635]'>buses 10, 27, 33, 36, 45 from Tehnikaülikool stop.</span>",
|
||||
"address": "Akadeemia tee 5 dormitory, room 008A"
|
||||
}
|
||||
}
|
||||
38
src/locales/est/Helpdesk.json
Normal file
38
src/locales/est/Helpdesk.json
Normal file
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"hero": {
|
||||
"title": "HELPDESK"
|
||||
},
|
||||
"whatIs": {
|
||||
"title": "Mis on HELPDESK?",
|
||||
"description": "HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele ka väljaspool Tallinna Tehnikaülikooli. Meie meeskond koosneb kogenud ja nutikatest Tallinna Tehnikaülikooli IT-tudengitest."
|
||||
},
|
||||
"services": {
|
||||
"title": "Mis teenuseid osutame?",
|
||||
"list": [
|
||||
"Arvuti riistvara diagnostika ja remont",
|
||||
"Arvuti riistvara hooldus",
|
||||
"Tarkvara diagnostika ja seadistamine",
|
||||
"Tarkvara paigaldamine",
|
||||
"Muu elektroonika parandamine"
|
||||
]
|
||||
},
|
||||
"pricing": {
|
||||
"title": "Hinnakiri",
|
||||
"tableHeaders": {
|
||||
"service": "Teenus",
|
||||
"quantity": "Kogus/Aeg",
|
||||
"price": "Hind"
|
||||
},
|
||||
"note": "Jupid tellitakse kliendi enda poolt või kokkuleppel tehnikuga.<br/><br/>Vajadusel tuleme üliõpilasküla ja Tehnopoli piires kohale.<br/><br/>Oma tudengisõbralike hindade ja personaalse lähenemisega pakume teenust, milles ei pea pettuma!"
|
||||
},
|
||||
"hours": {
|
||||
"title": "Lahtiolekuajad:",
|
||||
"schedule": "<strong>E</strong>smaspäevast – <strong>R</strong>eedeni 14-19*",
|
||||
"note": "* Tegu on ajaperioodiga, mil meid on kõige tõenäolisem tabada. Siiski ei saa garanteerida kohalolekut."
|
||||
},
|
||||
"location": {
|
||||
"title": "Asukoht",
|
||||
"busInfo": "Saab <span class='text-[#E69635]'>11, 37, 83, 91 bussiga Keemia peatusest</span> või <span class='text-[#E69635]'>Tehnikaülikool peatusest 10, 27, 33, 36, 45 bussiga.</span>",
|
||||
"address": "Akadeemia tee 5 ühiselamu, ruum 008A"
|
||||
}
|
||||
}
|
||||
@@ -2,244 +2,192 @@
|
||||
import {
|
||||
Section,
|
||||
Grid,
|
||||
Card,
|
||||
Center,
|
||||
Container,
|
||||
} from "$components";
|
||||
import { onMount } from "svelte";
|
||||
import { text } from "$lib/i18n";
|
||||
import yaml from 'js-yaml';
|
||||
|
||||
import Laptop from "lucide-svelte/icons/laptop";
|
||||
import Smartphone from "lucide-svelte/icons/smartphone";
|
||||
import HardDrive from "lucide-svelte/icons/hard-drive";
|
||||
import Wifi from "lucide-svelte/icons/wifi";
|
||||
import Settings from "lucide-svelte/icons/settings";
|
||||
import Wrench from "lucide-svelte/icons/wrench";
|
||||
import Clock from "lucide-svelte/icons/clock";
|
||||
import { MapLibre, Marker } from "svelte-maplibre";
|
||||
import MapPin from "lucide-svelte/icons/map-pin";
|
||||
import Mail from "lucide-svelte/icons/mail";
|
||||
import Phone from "lucide-svelte/icons/phone";
|
||||
import CheckCircle from "lucide-svelte/icons/check-circle";
|
||||
import BusFront from "lucide-svelte/icons/bus-front";
|
||||
import { navigate } from "$lib/router/router.js";
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Laptop,
|
||||
title: "Arvuti diagnostika",
|
||||
description: "Tuvastame riistvara- ja tarkvaraprobleemid ning pakume lahendusi",
|
||||
price: "Alates 10€"
|
||||
},
|
||||
{
|
||||
icon: Settings,
|
||||
title: "Operatsioonisüsteemi paigaldus",
|
||||
description: "Windows, Linux või macOS paigaldamine ja seadistamine",
|
||||
price: "20€"
|
||||
},
|
||||
{
|
||||
icon: HardDrive,
|
||||
title: "Riistvara vahetus",
|
||||
description: "RAM, SSD, HDD või muu komponendi vahetus ja paigaldus",
|
||||
price: "Vastavalt tööle"
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Arvuti puhastus",
|
||||
description: "Füüsiline puhastus tolmust ja termopasta vahetus",
|
||||
price: "15€"
|
||||
},
|
||||
{
|
||||
icon: Wifi,
|
||||
title: "Võrgu seadistamine",
|
||||
description: "Koduvõrgu või WiFi seadistamine ja probleemide lahendamine",
|
||||
price: "15€"
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: "Nutiseadmete abi",
|
||||
description: "Nutitelefonide ja tahvelarvutite seadistamine ja nõustamine",
|
||||
price: "10€"
|
||||
}
|
||||
];
|
||||
// Images
|
||||
const helpdeskbg = "/assets/helpdesk/helpdesk_bg.jpg";
|
||||
const helpdesk = "/assets/helpdesk/helpdesk-on-black.png";
|
||||
|
||||
const whyChooseUs = [
|
||||
"Tudengisõbralikud hinnad",
|
||||
"Kiire teenindus",
|
||||
"Kogenud meeskond",
|
||||
"Paindlikud lahtiolekuajad",
|
||||
"Garantii töödele",
|
||||
"Sõbralik teenindus"
|
||||
];
|
||||
// Coordinates for Akadeemia tee 5, 12616 Tallinn [longitude, latitude]
|
||||
const center = [24.66887400515207, 59.396427975093935];
|
||||
// Coordinates for Keemia bus stop [longitude, latitude]
|
||||
const keemiaBusStop = [24.668325396145953, 59.397074517662276];
|
||||
// Coordinates for Tehnikaülikool bus stop [longitude, latitude]
|
||||
const tehnikaBusStop = [24.67328945396854, 59.39508874042947];
|
||||
|
||||
// Google Maps directions URL
|
||||
const getDirectionsUrl = (lng, lat) => {
|
||||
return `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
|
||||
};
|
||||
|
||||
// Navigate to directions using router
|
||||
const openDirections = (lng, lat) => {
|
||||
navigate(getDirectionsUrl(lng, lat), { external: true });
|
||||
};
|
||||
|
||||
// Load pricing data
|
||||
let pricingData = { services: [] };
|
||||
|
||||
onMount(async () => {
|
||||
const response = await fetch('/_data/helpdesk/hinnakiri.yml');
|
||||
const yamlText = await response.text();
|
||||
pricingData = yaml.load(yamlText);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<Section background="orange">
|
||||
<Center>
|
||||
<div class="text-center max-w-4xl">
|
||||
<h1 class="text-5xl font-bold mb-6">Helpdesk</h1>
|
||||
<p class="text-2xl leading-relaxed">
|
||||
Tudengisõbralik arvutiabiteenus. Aitame lahendada kõik sinu IT-mured!
|
||||
</p>
|
||||
</div>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<Section>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Meie teenused</h2>
|
||||
<p class="text-xl text-gray-600">Pakume laia valikut IT-teenuseid soodsa hinnaga</p>
|
||||
<div class="w-full bg-black">
|
||||
<div class="flex absolute justify-center items-center flex-row w-full h-[60vh] px-4">
|
||||
<img src={helpdesk} alt={$text["hero"]?.title || "Helpdesk logo"} class="z-10" />
|
||||
</div>
|
||||
|
||||
<Grid columns={3} gap="var(--space-5)">
|
||||
{#each services as service}
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<svelte:component this={service.icon} size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">{service.title}</h3>
|
||||
<p class="text-gray-600 mb-4">{service.description}</p>
|
||||
<p class="text-lg font-bold" style="color: var(--orange)">{service.price}</p>
|
||||
</Card>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Section>
|
||||
<img
|
||||
class="h-[60vh] object-cover object-left w-full opacity-50 blur-[1.5px]"
|
||||
src={helpdeskbg}
|
||||
alt="Helpdesk"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<Section background="neutral">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Miks valida meid?</h2>
|
||||
</div>
|
||||
|
||||
<Center>
|
||||
<Card variant="glass" class="max-w-4xl">
|
||||
<Grid columns={2} gap="var(--space-4)">
|
||||
{#each whyChooseUs as reason}
|
||||
<div class="flex items-center gap-3">
|
||||
<CheckCircle size={24} style="color: var(--orange)" />
|
||||
<span class="text-lg">{reason}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Card>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<!-- Pricing Info -->
|
||||
<Section>
|
||||
<Grid gap="var(--space-5)">
|
||||
<Card variant="glass">
|
||||
<h2 class="text-4xl font-bold mb-6">Hinnakirjast</h2>
|
||||
<div class="space-y-4 text-lg">
|
||||
<p>
|
||||
Meie hinnad on tudengisõbralikud ja läbipaistvad. Enne töö alustamist teeme alati hinnapakkumise,
|
||||
et sa teaksid täpselt, mida oodata.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Diagnostika:</strong> Esimene diagnostika on tasuta! Maksad ainult siis, kui otsustad lasta meil
|
||||
probleem lahendada.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Töötunnid:</strong> Tavaline tunnitasu on 15€. Keerulisemad tööd võivad olla kallimad,
|
||||
kuid lepime alati kokku enne töö alustamist.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Varuosad:</strong> Varuosade hind lisandub töötasule. Aitame leida parimad hinnad ja kvaliteedi.
|
||||
<!-- Main Content -->
|
||||
<Container>
|
||||
<Section>
|
||||
<Grid columns="2" gap="var(--space-5)">
|
||||
<!-- What is HELPDESK? -->
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-4xl font-light pb-4">{$text["whatIs"]?.title || ""}</h2>
|
||||
<p class="text-lg">
|
||||
{$text["whatIs"]?.description || ""}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<h2 class="text-4xl font-bold mb-6">Kuidas toimub teenindus?</h2>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">1.</div>
|
||||
<div>
|
||||
<strong class="text-lg">Võta ühendust</strong><br/>
|
||||
Kirjuta meile või tule otse meie kontorisse. Kirjelda oma probleemi.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">2.</div>
|
||||
<div>
|
||||
<strong class="text-lg">Diagnostika</strong><br/>
|
||||
Vaatame probleemi üle ja selgitame välja põhjuse. Teeme hinnapakkumise.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">3.</div>
|
||||
<div>
|
||||
<strong class="text-lg">Remont</strong><br/>
|
||||
Kui oled nõus, alustame tööd. Hoiame sind kursis protsessiga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">4.</div>
|
||||
<div>
|
||||
<strong class="text-lg">Üleandmine</strong><br/>
|
||||
Anname arvuti üle, selgitame tehtud tööd ja anname nõu tulevikuks.
|
||||
</div>
|
||||
</div>
|
||||
<!-- What services do we offer? -->
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-4xl font-light pb-4">{$text["services"]?.title || ""}</h2>
|
||||
<ul class="text-lg list-disc pl-5">
|
||||
{#each $text["services"]?.list || [] as service}
|
||||
<li>{service}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<Section background="orange">
|
||||
<Center>
|
||||
<div class="text-center max-w-4xl text-white">
|
||||
<h2 class="text-4xl font-bold mb-8">Võta ühendust</h2>
|
||||
|
||||
<Grid columns={2} gap="var(--space-6)">
|
||||
<Card variant="glass">
|
||||
<div class="mb-4">
|
||||
<MapPin size={32} class="mx-auto" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Asukoht</h3>
|
||||
<p>Akadeemia tee 5</p>
|
||||
<p>12616 Tallinn</p>
|
||||
<p class="mt-2">ICT-teaduskond, Raja 15 ruum 111</p>
|
||||
</Card>
|
||||
<!-- Pricing Table -->
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-4xl font-light pb-4">{$text["pricing"]?.title || ""}</h2>
|
||||
<div class="overflow-hidden rounded-lg border border-gray-200 shadow-sm">
|
||||
<table class="w-full text-lg">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
|
||||
{$text["pricing"]?.tableHeaders?.service || ""}
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
|
||||
{$text["pricing"]?.tableHeaders?.quantity || ""}
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
|
||||
{$text["pricing"]?.tableHeaders?.price || ""}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
{#each pricingData.services as service}
|
||||
<tr class="hover:bg-gray-50 transition-colors duration-200">
|
||||
<td class="px-6 py-4 text-gray-900">{service.name}</td>
|
||||
<td class="px-6 py-4 text-gray-600">{service.quantity}</td>
|
||||
<td class="px-6 py-4 font-medium" class:text-green-600={service.price === "Tasuta"} class:text-gray-900={service.price !== "Tasuta"}>
|
||||
{service.price}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="pt-4 text-lg font-bold">
|
||||
{@html $text["pricing"]?.note || ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="mb-4">
|
||||
<Clock size={32} class="mx-auto" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Lahtiolekuajad</h3>
|
||||
<p>Esmaspäev - Reede</p>
|
||||
<p>10:00 - 16:00</p>
|
||||
<p class="mt-2 text-sm">Võta ette ühendust, et vältida ootamist</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="mb-4">
|
||||
<Mail size={32} class="mx-auto" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">E-post</h3>
|
||||
<a href="mailto:erki@lapikud.ee" class="hover:underline">
|
||||
erki@lapikud.ee
|
||||
</a>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="mb-4">
|
||||
<Phone size={32} class="mx-auto" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Telefon</h3>
|
||||
<a href="tel:+37259079190" class="hover:underline">
|
||||
+372 5907 9190
|
||||
</a>
|
||||
</Card>
|
||||
</Grid>
|
||||
</div>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.feature-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(255, 127, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<!-- Opening Hours & Location -->
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-4xl font-light pb-4">
|
||||
{@html $text["hours"]?.title || ""}
|
||||
<br />
|
||||
{@html $text["hours"]?.schedule || ""}
|
||||
</h2>
|
||||
<p class="text-lg font-light opacity-70 pb-16">
|
||||
{$text["hours"]?.note || ""}
|
||||
</p>
|
||||
|
||||
<h2 class="text-4xl font-light pb-4">{$text["location"]?.title || ""}</h2>
|
||||
<div class="w-full h-96 rounded-lg overflow-hidden">
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
|
||||
class="relative w-full h-full"
|
||||
{center}
|
||||
zoom={15}
|
||||
interactive={false}
|
||||
attributionControl={false}
|
||||
>
|
||||
<!-- Main location -->
|
||||
<Marker lngLat={center}>
|
||||
<div
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={() => openDirections(center[0], center[1])}
|
||||
onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && openDirections(center[0], center[1])}
|
||||
class="flex flex-col items-center hover:scale-110 transition-transform cursor-pointer"
|
||||
title="Get directions to Akadeemia tee 5"
|
||||
>
|
||||
<span class="text-xs font-semibold text-white bg-[#E69635] px-2 py-0.5 rounded shadow-md mb-1 whitespace-nowrap">Akadeemia tee 5</span>
|
||||
<MapPin class="w-7 h-7 text-[#E69635] drop-shadow-lg" />
|
||||
</div>
|
||||
</Marker>
|
||||
|
||||
<!-- Keemia bus stop -->
|
||||
<Marker lngLat={keemiaBusStop}>
|
||||
<div
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={() => openDirections(keemiaBusStop[0], keemiaBusStop[1])}
|
||||
onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && openDirections(keemiaBusStop[0], keemiaBusStop[1])}
|
||||
class="flex flex-col items-center hover:scale-110 transition-transform cursor-pointer"
|
||||
title="Get directions to Keemia bus stop"
|
||||
>
|
||||
<span class="text-xs font-semibold text-gray-900 bg-white px-2 py-0.5 rounded shadow-md mb-1">Keemia</span>
|
||||
<BusFront class="w-7 h-7 text-[#E69635] drop-shadow-lg" />
|
||||
</div>
|
||||
</Marker>
|
||||
|
||||
<!-- Tehnikaülikool bus stop -->
|
||||
<Marker lngLat={tehnikaBusStop}>
|
||||
<div
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={() => openDirections(tehnikaBusStop[0], tehnikaBusStop[1])}
|
||||
onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && openDirections(tehnikaBusStop[0], tehnikaBusStop[1])}
|
||||
class="flex flex-col items-center hover:scale-110 transition-transform cursor-pointer"
|
||||
title="Get directions to Tehnikaülikool bus stop"
|
||||
>
|
||||
<span class="text-xs font-semibold text-gray-900 bg-white px-2 py-0.5 rounded shadow-md mb-1">Tehnikaülikool</span>
|
||||
<BusFront class="w-7 h-7 text-[#E69635] drop-shadow-lg" />
|
||||
</div>
|
||||
</Marker>
|
||||
</MapLibre>
|
||||
</div>
|
||||
<p class="pb-4 text-lg">
|
||||
{@html $text["location"]?.busInfo || ""}
|
||||
</p>
|
||||
<p class="text-lg font-bold">
|
||||
{$text["location"]?.address || ""}
|
||||
</p>
|
||||
</div>
|
||||
</Grid>
|
||||
</Section>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user