Swedbanki Tallinna Maraton
15.-16.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;
}
}
Ilmoittautumisen avautumiseen on
Early Bird -hinnan päättymiseen on
00 PÄIVÄÄ
00 TUNTIA
00 MINUUTTIA
00 SEKUNTIA
LISÄÄ KALENTERIIN LISÄÄ
KALENTERIIN ILMOITTAUDU JAA KAVERILLE JAA
KAVERILLE
Early Bird -hinta on voimassa 12.–22.10.2026.
×
Lisää kalenteriin
Valitse käyttämäsi kalenteri.
GOOGLE CALENDAR APPLE / OUTLOOK (.ICS)
const SETTINGS = {
registrationOpens: "2026-10-12T00:00:00+03:00",
/*
Kampanjan viimeinen voimassaolopäivä on 22.10.
Osio piilotetaan 23.10.2026 klo 00.00.
*/
openingPriceEnds: "2026-10-23T00:00:00+03:00",
registrationUrl:
"https://iseteenindus.jooks.ee/en/register/register",
pageUrl: window.location.href.split("?")[0],
shareText:
"Lähdetäänkö yhdessä LHV Maijooks 2027 -tapahtumaan? Ilmoittautuminen avautuu 12. lokakuuta Early Bird -hintaan.",
/*
Muistutus 11.10.2026 klo 18.00 Viron aikaa.
*/
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:
"Muistutus: LHV Maijooks 2027 -tapahtuman ilmoittautuminen avautuu huomenna",
dates:
`${SETTINGS.reminderTime}/${SETTINGS.reminderEndTime}`,
details:
`Ilmoittautuminen avautuu 12. lokakuuta Early Bird -hintaan. ${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//Ilmoittautumisen avautuminen//FI",
"BEGIN:VEVENT",
"UID:lhv-maijooks-2027-ilmoittautuminen@jooks.ee",
`DTSTAMP:${new Date()
.toISOString()
.replace(/[-:]/g, "")
.replace(/\.\d{3}/, "")}`,
`DTSTART:${SETTINGS.reminderTime}`,
`DTEND:${SETTINGS.reminderEndTime}`,
"SUMMARY:Muistutus: LHV Maijooks 2027 -tapahtuman ilmoittautuminen avautuu huomenna",
`DESCRIPTION:Ilmoittautuminen avautuu 12. lokakuuta Early Bird -hintaan. ${SETTINGS.registrationUrl}`,
`URL:${SETTINGS.registrationUrl}`,
"BEGIN:VALARM",
"TRIGGER:-PT0M",
"ACTION:DISPLAY",
"DESCRIPTION:LHV Maijooks -tapahtuman ilmoittautuminen avautuu huomenna",
"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-ilmoittautumisen-avautuminen.ics";
link.click();
setTimeout(() => {
URL.revokeObjectURL(url);
}, 1000);
calendarModal.hidden = true;
showToast(
"Kalenterimuistutus on valmis."
);
});
document
.getElementById("shareButton")
.addEventListener("click", async (event) => {
event.preventDefault();
const isPrelaunch =
Date.now()
RIMI Eesti Linnajooksud
Jüri Jaansoni Kahe Silla jooks
// Set the date we're counting down to
var countDownDate = new Date("Sep 5, 2026 21:00:00").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
06.06.2026
Narva Linna Jooks
Until the next price increase
// 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 + " DAYS " +
hours + " HOURS " + minutes + " MIN " + seconds + " SEC " +
" ";
// If the count down is over, write some text
if (distance
E-pood