Swedbanki Tallinna Maraton
15.05.2027
LHV Maijooks
:root {
--orange: #fca4b4;
--white: #ffffff;
--black: #101010;
--radius: 8px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: transparent;
font-family: Roboto, Arial, Helvetica, sans-serif;
}
.registration-countdown {
width: min(100%, 900px);
margin: 0 auto;
padding: 26px 28px 24px;
border: 0 !important;
color: var(--black);
background: var(--white);
text-align: center;
box-shadow: none !important;
}
.registration-countdown::before,
.registration-countdown::after,
.registration-countdown h2::before,
.registration-countdown h2::after {
display: none !important;
content: none !important;
border: 0 !important;
}
.registration-countdown h2 {
width: auto !important;
margin: 0 0 16px !important;
padding: 0 !important;
border: 0 !important;
color: var(--black) !important;
background: transparent !important;
font: 700 20px/1.15 Roboto, Arial, Helvetica, sans-serif !important;
letter-spacing: -0.2px !important;
white-space: nowrap !important;
text-align: center !important;
box-shadow: none !important;
}
.counter-content {
width: 100%;
margin: 0 auto;
}
.counter {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.counter-card {
min-width: 0;
padding: 12px 4px 10px;
border-radius: var(--radius);
color: var(--white);
background: var(--orange);
overflow: hidden;
}
.counter-value {
display: block;
color: var(--white) !important;
font: 700 clamp(26px, 3vw, 34px) / 0.95 Roboto, Arial,
Helvetica, sans-serif !important;
font-variant-numeric: tabular-nums;
}
.counter-label {
display: block;
margin-top: 8px;
color: var(--white) !important;
font: 700 clamp(10px, 1.2vw, 12px) / 1 Roboto, Arial,
Helvetica, sans-serif !important;
white-space: nowrap;
}
.counter-actions {
position: relative !important;
left: -2px !important;
right: auto !important;
width: 100% !important;
margin: 14px 0 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
align-items: stretch;
transform: none !important;
}
.phase-label {
margin: 0 0 16px;
font-size: 18px;
font-weight: 700;
}
.campaign-period {
width: 100% !important;
margin: 11px 0 0 !important;
color: #555555;
font: 400 12px/1.35 Roboto, Arial, Helvetica, sans-serif;
text-align: center;
}
.register-action,
.counter-button {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 50px !important;
min-height: 50px !important;
max-height: 50px !important;
margin: 0 !important;
padding: 0 10px !important;
border: 0 !important;
border-radius: var(--radius) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--white) !important;
background: var(--orange) !important;
text-decoration: none !important;
white-space: nowrap;
appearance: none !important;
-webkit-appearance: none !important;
box-shadow: none !important;
position: static !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
translate: none !important;
vertical-align: middle !important;
align-self: stretch !important;
}
.register-action {
font: 700 13px/1 Roboto, Arial, Helvetica, sans-serif !important;
transition: background-color 0.16s ease;
}
.register-action:focus-visible {
outline: 3px solid rgba(252, 164, 180, 0.45);
outline-offset: 3px;
}
[hidden] {
display: none !important;
}
.counter-button {
gap: 7px;
font: 700 12px/1 Roboto, Arial, Helvetica, sans-serif !important;
cursor: pointer;
transition: background-color 0.16s ease;
}
#shareButton {
gap: 6px;
font-size: 11px !important;
}
#shareButton .icon {
width: 16px;
height: 16px;
}
.register-action:hover,
.counter-button:hover,
.register-action:active,
.counter-button:active,
.register-action:focus,
.counter-button:focus {
background: #ee8ea1 !important;
transform: none !important;
translate: none !important;
top: auto !important;
bottom: auto !important;
}
.counter-button:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.75);
outline-offset: 3px;
}
.icon {
width: 18px;
height: 18px;
flex: none;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.mobile-button-label {
display: none;
}
.toast {
position: fixed;
z-index: 20;
left: 50%;
bottom: 24px;
transform: translate(-50%, 100px);
padding: 13px 18px;
border-radius: var(--radius);
color: var(--white);
background: var(--black);
opacity: 0;
transition: 0.22s ease;
pointer-events: none;
}
.toast.show {
transform: translate(-50%, 0);
opacity: 1;
}
.calendar-modal {
position: fixed;
z-index: 1000;
inset: 0;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(16, 16, 16, 0.55);
}
.calendar-modal[hidden] {
display: none !important;
}
.calendar-modal-card {
position: relative;
width: min(100%, 380px);
padding: 28px 24px 24px;
border-radius: 14px;
color: var(--black);
background: var(--white);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
text-align: center;
}
.calendar-modal-card h3 {
margin: 0 32px 8px !important;
padding: 0 !important;
border: 0 !important;
color: var(--black) !important;
background: transparent !important;
font: 700 22px/1.2 Roboto, Arial, Helvetica, sans-serif !important;
}
.calendar-modal-card p {
margin: 0 0 18px;
font: 400 15px/1.4 Roboto, Arial, Helvetica, sans-serif;
}
.calendar-modal-close {
position: absolute;
top: 10px;
right: 12px;
width: 36px;
height: 36px;
padding: 0;
border: 0;
color: var(--black);
background: transparent;
font: 400 28px/1 Roboto, Arial, Helvetica, sans-serif;
cursor: pointer;
}
.calendar-choices {
display: grid;
gap: 10px;
}
.calendar-choice {
width: 100%;
min-height: 50px;
padding: 0 16px;
border: 0;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
color: var(--white) !important;
background: var(--orange) !important;
font: 700 14px/1 Roboto, Arial, Helvetica, sans-serif !important;
text-decoration: none !important;
cursor: pointer;
}
.calendar-choice:hover {
background: #ee8ea1 !important;
}
@media (max-width: 620px) {
.registration-countdown {
padding: 6px 8px 7px;
}
.registration-countdown h2 {
margin-bottom: 7px !important;
font-size: clamp(13px, 3vw, 15px) !important;
}
.phase-label {
margin-bottom: 7px;
font-size: 13px;
}
.counter-content {
width: 94%;
margin-right: auto !important;
margin-left: auto !important;
}
.counter {
width: 100% !important;
margin: 0 !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
}
.counter-card {
padding: 6px 1px 5px;
border-radius: 5px;
}
.counter-value {
font-size: clamp(18px, 5vw, 22px) !important;
}
.counter-label {
margin-top: 3px;
font-size: clamp(6.5px, 1.8vw, 7.5px) !important;
}
.counter-actions {
width: 100% !important;
margin: 6px 0 0 !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 4px;
align-items: stretch;
}
.counter-button,
.register-action {
width: 100% !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 0 9px !important;
gap: 4px;
font-size: 7.5px !important;
line-height: 1.15 !important;
white-space: normal;
position: static !important;
inset: auto !important;
transform: none !important;
translate: none !important;
align-self: stretch !important;
}
#shareButton {
gap: 3px;
font-size: 7px !important;
}
#shareButton .icon {
width: 12px;
height: 12px;
}
.icon {
width: 12px;
height: 12px;
}
.desktop-button-label {
display: none;
}
.mobile-button-label {
display: inline;
}
.campaign-period {
width: 100% !important;
margin: 6px 0 0 !important;
font-size: 8.5px;
line-height: 1.25;
}
}
Registreerimise avamiseni on
Avamishinna lõpuni on
00 PÄEVA
00 TUNDI
00 MINUTIT
00 SEKUNDIT
LISA KALENDRISSE LISA
KALENDRISSE REGISTREERI JAGA SÕBRALE JAGA
SÕBRALE
Avamishind kehtib 12.–22.10.2026.
×
Lisa kalendrisse
Vali kasutatav kalender.
GOOGLE CALENDAR APPLE / OUTLOOK (.ICS)
const SETTINGS = {
registrationOpens: "2026-10-12T00:00:00+03:00",
/*
22. oktoober kuulub kampaaniaperioodi.
Kampaania lõpeb 23.10.2026 kell 00.00.
*/
openingPriceEnds: "2026-10-23T00:00:00+03:00",
registrationUrl:
"https://iseteenindus.jooks.ee/et/registreeru",
pageUrl: window.location.href.split("?")[0],
shareText:
"Lähme koos LHV Maijooksule 2027? Registreerimine avaneb 12. oktoobril avamishinnaga.",
/*
Meeldetuletus 11.10.2026 kell 18.00 Eesti aja järgi.
*/
reminderTime: "20261011T150000Z",
reminderEndTime: "20261011T153000Z"
};
const elements = {
days: document.getElementById("days"),
hours: document.getElementById("hours"),
minutes: document.getElementById("minutes"),
seconds: document.getElementById("seconds"),
section: document.querySelector(
".registration-countdown"
),
mainTitle: document.getElementById("mainTitle"),
phaseLabel: document.getElementById("phaseLabel"),
campaignPeriod:
document.getElementById("campaignPeriod"),
counterGrid: document.getElementById("counterGrid"),
calendarButton:
document.getElementById("calendarButton"),
registerButton:
document.getElementById("registerButton")
};
const mobileView = window.matchMedia(
"(max-width: 620px)"
);
function pad(value) {
return String(value).padStart(2, "0");
}
function setCounter(target, now) {
const total = Math.max(
0,
Math.floor((target - now) / 1000)
);
elements.days.textContent = pad(
Math.floor(total / 86400)
);
elements.hours.textContent = pad(
Math.floor((total % 86400) / 3600)
);
elements.minutes.textContent = pad(
Math.floor((total % 3600) / 60)
);
elements.seconds.textContent = pad(total % 60);
}
function updateCounter() {
const now = Date.now();
const opens = new Date(
SETTINGS.registrationOpens
).getTime();
const ends = new Date(
SETTINGS.openingPriceEnds
).getTime();
if (now {
toast.classList.remove("show");
}, 2400);
}
const calendarModal =
document.getElementById("calendarModal");
const calendarModalClose =
document.getElementById("calendarModalClose");
const googleCalendarLink =
document.getElementById("googleCalendarLink");
function openCalendarModal() {
const googleParams = new URLSearchParams({
action: "TEMPLATE",
text:
"Meeldetuletus: LHV Maijooksu 2027 registreerimine avaneb homme",
dates:
`${SETTINGS.reminderTime}/${SETTINGS.reminderEndTime}`,
details:
`Registreerimine avaneb 12. oktoobril avamishinnaga. ${SETTINGS.registrationUrl}`
});
googleCalendarLink.href =
`https://calendar.google.com/calendar/render?${googleParams.toString()}`;
calendarModal.hidden = false;
calendarModalClose.focus();
}
function closeCalendarModal() {
calendarModal.hidden = true;
elements.calendarButton.focus();
}
document
.getElementById("calendarButton")
.addEventListener("click", (event) => {
event.preventDefault();
openCalendarModal();
});
calendarModalClose.addEventListener(
"click",
closeCalendarModal
);
calendarModal.addEventListener("click", (event) => {
if (event.target === calendarModal) {
closeCalendarModal();
}
});
document.addEventListener("keydown", (event) => {
if (
event.key === "Escape" &&
!calendarModal.hidden
) {
closeCalendarModal();
}
});
googleCalendarLink.addEventListener("click", () => {
calendarModal.hidden = true;
});
document
.getElementById("icsCalendarButton")
.addEventListener("click", () => {
const ics = [
"BEGIN:VCALENDAR",
"VERSION:2.0",
"PRODID:-//LHV Maijooks//Registreerimise avamine//ET",
"BEGIN:VEVENT",
"UID:lhv-maijooks-2027-registreerimine@jooks.ee",
`DTSTAMP:${new Date()
.toISOString()
.replace(/[-:]/g, "")
.replace(/\.\d{3}/, "")}`,
`DTSTART:${SETTINGS.reminderTime}`,
`DTEND:${SETTINGS.reminderEndTime}`,
"SUMMARY:Meeldetuletus: LHV Maijooksu 2027 registreerimine avaneb homme",
`DESCRIPTION:Registreerimine avaneb 12. oktoobril avamishinnaga. ${SETTINGS.registrationUrl}`,
`URL:${SETTINGS.registrationUrl}`,
"BEGIN:VALARM",
"TRIGGER:-PT0M",
"ACTION:DISPLAY",
"DESCRIPTION:LHV Maijooksu registreerimine avaneb homme",
"END:VALARM",
"END:VEVENT",
"END:VCALENDAR"
].join("\r\n");
const url = URL.createObjectURL(
new Blob([ics], {
type: "text/calendar;charset=utf-8"
})
);
const link = document.createElement("a");
link.href = url;
link.download =
"lhv-maijooks-registreerimise-avamine.ics";
link.click();
setTimeout(() => {
URL.revokeObjectURL(url);
}, 1000);
calendarModal.hidden = true;
showToast(
"Kalendrimeeldetuletus on valmis."
);
});
document
.getElementById("shareButton")
.addEventListener("click", async (event) => {
event.preventDefault();
const isPrelaunch =
Date.now()
2026
RIMI Eesti Linnajooksud
/* ===== LINNAJOOKSUDE LOENDUR ===== */
.cityrun-countdown {
max-width: 720px;
margin: 0 auto;
padding: 10px 0;
text-align: center;
font-family: inherit;
}
/* Sündmuse nimi */
.cityrun-countdown-title {
margin: 0 0 16px;
color: #222;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
}
/* Loenduri kastid */
.cityrun-countdown-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
width: 100%;
}
/* Üks kast */
.cityrun-countdown-box {
display: flex;
min-height: 88px;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 6px;
background: #2384c8;
color: #fff;
border-radius: 10px;
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.08);
}
/* Number */
.cityrun-countdown-value {
display: block;
font-size: 32px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.5px;
}
/* Päeva / tunni / min / sek */
.cityrun-countdown-label {
display: block;
margin-top: 8px;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.6px;
}
/* Tulemuste osa */
.cityrun-countdown-finished {
display: none;
margin: 0;
}
/* Tulemuste nupp */
.cityrun-countdown-results {
display: inline-block;
min-width: 180px;
padding: 13px 28px;
background: #2384c8;
color: #fff !important;
border-radius: 10px;
font-size: 17px;
font-weight: 700;
line-height: 1.2;
text-decoration: none !important;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.cityrun-countdown-results:hover {
color: #fff !important;
text-decoration: none !important;
opacity: 0.9;
transform: translateY(-1px);
}
/* ===== TABLET / MOBIIL ===== */
@media (max-width: 600px) {
.cityrun-countdown {
padding: 5px 0;
}
.cityrun-countdown-title {
margin-bottom: 13px;
font-size: 18px;
}
.cityrun-countdown-grid {
gap: 5px;
}
.cityrun-countdown-box {
min-height: 78px;
padding: 10px 3px;
border-radius: 8px;
}
.cityrun-countdown-value {
font-size: 27px;
}
.cityrun-countdown-label {
margin-top: 7px;
font-size: 10px;
letter-spacing: 0.3px;
}
.cityrun-countdown-results {
width: 100%;
max-width: 300px;
padding: 13px 20px;
font-size: 16px;
}
}
/* Väga kitsad telefonid */
@media (max-width: 360px) {
.cityrun-countdown-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.cityrun-countdown-box {
min-height: 72px;
}
.cityrun-countdown-value {
font-size: 26px;
}
}
00
PÄEVA
00
TUNDI
00
MIN
00
SEK
TULEMUSED
(function () {
/*
* SÜNDMUSED
*
* Loendur valib automaatselt esimese
* tulevase sündmuse.
*/
const events = [
{
name: "Jüri Jaansoni Kahe Silla jooks",
date: "2026-09-05T21:00:00+03:00"
},
{
name: "Swedbank Tallinna Maraton",
date: "2026-09-11T18:30:00+03:00"
},
{
name: "44. Viking Window Paide-Türi rahvajooks",
date: "2026-09-27T14:00:00+03:00"
},
{
name: "15. Tartu Linnamaraton",
date: "2026-10-02T21:00:00+03:00"
}
];
const titleEl =
document.getElementById("cityrun-countdown-title");
const countdownEl =
document.getElementById("cityrun-countdown-grid");
const finishedEl =
document.getElementById("cityrun-countdown-finished");
const daysEl =
document.getElementById("cityrun-days");
const hoursEl =
document.getElementById("cityrun-hours");
const minutesEl =
document.getElementById("cityrun-minutes");
const secondsEl =
document.getElementById("cityrun-seconds");
let timer = null;
/*
* Leiab järgmise sündmuse,
* mis ei ole veel alanud.
*/
function getNextEvent() {
const now = Date.now();
return events.find(function (event) {
return new Date(event.date).getTime() > now;
});
}
/*
* Kahekohaline number:
* 7 → 07
*/
function formatNumber(number) {
return String(number).padStart(2, "0");
}
/*
* Loenduri uuendamine
*/
function updateCountdown() {
const event = getNextEvent();
/*
* Kõik sündmused on lõppenud
*/
if (!event) {
titleEl.style.display = "none";
countdownEl.style.display = "none";
finishedEl.style.display = "block";
if (timer) {
clearInterval(timer);
timer = null;
}
return;
}
/*
* Kuvame loenduri
*/
titleEl.style.display = "block";
countdownEl.style.display = "grid";
finishedEl.style.display = "none";
titleEl.textContent = event.name;
const eventTime =
new Date(event.date).getTime();
const now =
Date.now();
const distance =
eventTime - now;
/*
* Kui sündmus lõppes just praegu,
* valime kohe järgmise.
*/
if (distance
5.-6.06.2026
Narva Linna Jooks
TULEMUSED
// Set the date we're counting down to
var countDownDate = new Date("Jun 3, 2026 23:59:59").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));if (days " +
days + " PÄEVA " +
hours + " TUNDI " + minutes + " MIN " + seconds + " SEK " +
" ";
// If the count down is over, write some text
if (distance
E-pood
E-pood