308 lines
12 KiB
HTML
308 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html class="light" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<!-- <meta http-equiv="refresh" content="190"> -->
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&family=Manrope:wght@300;400;600;800&display=swap"
|
|
rel="stylesheet">
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
|
rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"error": "#ba1a1a",
|
|
"primary": "#6b081d",
|
|
"primary-fixed-dim": "#ffb3b6",
|
|
"error-container": "#ffdad6",
|
|
"surface-variant": "#e2e2e2",
|
|
"primary-fixed": "#ffdada",
|
|
"on-secondary": "#ffffff",
|
|
"secondary-container": "#cbcafd",
|
|
"on-error-container": "#93000a",
|
|
"on-secondary-fixed": "#17163f",
|
|
"on-error": "#ffffff",
|
|
"on-surface-variant": "#574142",
|
|
"on-tertiary-fixed": "#3f001a",
|
|
"outline-variant": "#ddc0c0",
|
|
"surface-dim": "#dadada",
|
|
"on-primary": "#ffffff",
|
|
"outline": "#8a7172",
|
|
"on-tertiary-container": "#ff9eb8",
|
|
"surface-container-low": "#f3f4f3",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-tint": "#a63744",
|
|
"on-primary-fixed": "#40000c",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-container-highest": "#e2e2e2",
|
|
"secondary": "#5a5a86",
|
|
"tertiary-fixed": "#ffd9e1",
|
|
"primary-container": "#8b2332",
|
|
"surface-bright": "#f9f9f9",
|
|
"secondary-fixed-dim": "#c3c2f5",
|
|
"inverse-primary": "#ffb3b6",
|
|
"on-secondary-container": "#545480",
|
|
"tertiary-container": "#852748",
|
|
"secondary-fixed": "#e2dfff",
|
|
"on-tertiary-fixed-variant": "#802345",
|
|
"surface-container-high": "#e8e8e8",
|
|
"surface-container": "#eeeeed",
|
|
"background": "#f9f9f9",
|
|
"inverse-surface": "#2f3131",
|
|
"on-secondary-fixed-variant": "#42426d",
|
|
"on-background": "#1a1c1c",
|
|
"inverse-on-surface": "#f0f1f0",
|
|
"tertiary": "#670d32",
|
|
"surface": "#f9f9f9",
|
|
"on-surface": "#1a1c1c",
|
|
"on-primary-fixed-variant": "#861f2f",
|
|
"on-primary-container": "#ffa0a5",
|
|
"tertiary-fixed-dim": "#ffb1c4"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Noto Serif"],
|
|
"body": ["Manrope"],
|
|
"label": ["Manrope"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<script>
|
|
const pushURL = "https://status.wirediv.dev/api/push/eebJ5qBKusVivlSMGm3ZtqDT6YvtpTDa?status=up&msg=OK&ping=";
|
|
const interval = 60;
|
|
|
|
const push = async () => {
|
|
await fetch(pushURL);
|
|
console.log("Pushed!");
|
|
};
|
|
|
|
push();
|
|
setInterval(push, interval * 1000);
|
|
</script>
|
|
<style>
|
|
html {
|
|
height: 100%;
|
|
min-height: 100dvh;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
height: 100%;
|
|
min-height: 100dvh;
|
|
max-height: 100dvh;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
background-color: #f9f9f9;
|
|
font-family: 'Manrope', sans-serif;
|
|
touch-action: manipulation;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
/* Full-screen stage: no document scroll; viewport-locked flex column (CSS only) */
|
|
.signage-stage {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
min-height: 0;
|
|
}
|
|
|
|
.page-root {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
padding-top: max(0.5rem, env(safe-area-inset-top));
|
|
padding-right: max(2rem, env(safe-area-inset-right));
|
|
padding-bottom: max(1rem, env(safe-area-inset-bottom));
|
|
padding-left: max(2rem, env(safe-area-inset-left));
|
|
}
|
|
|
|
.headline-display {
|
|
font-size: clamp(1.25rem, calc(0.65rem + 3.5vi + 0.75dvh), 4rem);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
|
|
}
|
|
|
|
.editorial-shadow {
|
|
box-shadow: 0 32px 64px -12px rgba(26, 28, 28, 0.06);
|
|
}
|
|
|
|
/* Wide-short viewports: two columns before lg breakpoint so content stays shorter */
|
|
@media (orientation: landscape) and (min-width: 600px) {
|
|
.page-root .signage-main {
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.page-root .signage-main>.signage-split {
|
|
flex: 1 1 50%;
|
|
width: 50%;
|
|
max-width: 50%;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
/* Short viewports: tighter vertical rhythm */
|
|
@media (max-height: 600px) {
|
|
.page-root {
|
|
padding-top: max(0.25rem, env(safe-area-inset-top));
|
|
padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
|
|
padding-left: max(1.5rem, env(safe-area-inset-left));
|
|
padding-right: max(1.5rem, env(safe-area-inset-right));
|
|
}
|
|
|
|
.signage-header {
|
|
padding-top: 0.5rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
gap: 0.5rem !important;
|
|
}
|
|
|
|
.signage-editorial {
|
|
padding-top: 0.75rem !important;
|
|
padding-bottom: 0.75rem !important;
|
|
}
|
|
|
|
.signage-qr {
|
|
padding-top: 0.75rem !important;
|
|
padding-bottom: 0.75rem !important;
|
|
}
|
|
|
|
.signage-qr-card {
|
|
padding: 1.25rem !important;
|
|
border-radius: 1.25rem !important;
|
|
}
|
|
|
|
.signage-qr-foot {
|
|
margin-top: 0.75rem !important;
|
|
gap: 0.375rem 0.75rem !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="text-on-background bg-surface antialiased">
|
|
<div class="signage-stage">
|
|
<div class="page-root">
|
|
<!-- Header -->
|
|
<header
|
|
class="signage-header bg-stone-50/80 backdrop-blur-xl z-10 flex w-full min-h-0 flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6 py-4">
|
|
<div class="flex min-w-0 items-center gap-3 sm:gap-6">
|
|
<img alt="Mole Institute Logo" class="h-12 w-auto shrink-0 sm:h-16"
|
|
data-alt="Sophisticated medical institute logo featuring elegant serif typography and a minimalist burgundy emblem on a clean white background"
|
|
src="https://www.moleinstitute.com/wp-content/uploads/2025/10/cropped-Mole_Institute_logo_emblem_gold-e1761595525281.png">
|
|
<h1 class="font-headline truncate text-2xl font-bold tracking-tight text-primary sm:text-3xl">Mole
|
|
Institute
|
|
</h1>
|
|
</div>
|
|
<div class="flex max-w-full items-center gap-2 text-on-surface-variant sm:gap-4 sm:font-semibold">
|
|
<span class="material-symbols-outlined shrink-0 text-primary">verified_user</span>
|
|
<span class="font-label text-xs uppercase tracking-widest sm:text-sm">Certified Dermatology
|
|
Specialists</span>
|
|
</div>
|
|
</header>
|
|
<!-- Main: column on small screens, split from lg up -->
|
|
<main class="signage-main flex w-full min-h-0 flex-1 flex-col overflow-hidden sm:flex-row sm:items-stretch">
|
|
<!-- Editorial -->
|
|
<div
|
|
class="signage-split signage-editorial relative flex min-h-0 min-w-0 w-full flex-col justify-center overflow-hidden px-4 py-8 sm:px-8 sm:py-10 lg:w-1/2 lg:px-10 lg:py-12 xl:px-16">
|
|
<!-- Background Subtle Texture -->
|
|
<div class="absolute inset-0 opacity-5 pointer-events-none bg-[url('image-11.png')] bg-cover bg-center"
|
|
data-alt="Microscopic view of healthy skin texture with soft warm lighting and clinical burgundy color tones">
|
|
</div>
|
|
<div class="relative z-10 min-h-0 overflow-hidden">
|
|
<span
|
|
class="mb-4 block text-sm font-extrabold uppercase tracking-[0.2em] text-primary font-label sm:mb-6">Precision
|
|
Medicine</span>
|
|
<h2 class="headline-display font-headline mb-6 font-bold text-on-background sm:mb-8">
|
|
Expert Wart &
|
|
<span class="text-primary">Mole</span> Removal
|
|
</h2>
|
|
<div class="flex max-w-md flex-col gap-5 sm:gap-6">
|
|
<div class="flex items-start gap-4">
|
|
<div class="mt-1 bg-primary/10 p-2 rounded-lg">
|
|
<span class="material-symbols-outlined text-primary">biotech</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-lg text-on-background">Advanced Diagnostic Imaging
|
|
</h3>
|
|
<p class="text-on-surface-variant leading-relaxed">State-of-the-art dermoscopy
|
|
for precise identification and safe removal protocols.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="mt-1 bg-primary/10 p-2 rounded-lg">
|
|
<span class="material-symbols-outlined text-primary">medical_services</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-lg text-on-background">Minimally Invasive Care</h3>
|
|
<p class="text-on-surface-variant leading-relaxed">Surgical excellence with a
|
|
focus on aesthetic outcomes and rapid recovery.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- QR & CTA -->
|
|
<div
|
|
class="signage-split signage-qr relative flex min-h-0 min-w-0 w-full flex-col items-center justify-center overflow-hidden bg-surface-container-low px-4 py-10 sm:px-8 lg:w-1/2 lg:px-10 xl:px-16">
|
|
<div
|
|
class="absolute right-0 top-0 h-40 w-40 rounded-bl-[8rem] bg-primary/5 sm:h-64 sm:w-64 sm:rounded-bl-[12rem]">
|
|
</div>
|
|
<div
|
|
class="signage-qr-card relative z-10 flex w-full max-w-sm flex-col items-center rounded-[1.75rem] border border-outline-variant/10 bg-surface-container-lowest p-8 editorial-shadow sm:rounded-[2.5rem] sm:p-6 lg:p-8">
|
|
<div class="mb-6 rounded-2xl border border-outline-variant/20 bg-white p-3 sm:mb-8 sm:p-4">
|
|
<img alt="Scan to book consultation"
|
|
class="mx-auto aspect-square h-auto w-[150px] xl:w-[250px]"
|
|
data-alt="High-resolution digital QR code centered on a clean white background with subtle burgundy border accents"
|
|
src="./assets/ref-mole-institute-qr-code.png">
|
|
</div>
|
|
<h3 class="mb-2 text-center font-headline text-xl font-bold text-on-background sm:text-2xl">Scan to Book
|
|
</h3>
|
|
<p class="mb-6 text-center font-medium text-on-surface-variant sm:mb-8">Secure your consultation with
|
|
our
|
|
specialist team in seconds.</p>
|
|
</div>
|
|
<div
|
|
class="signage-qr-foot mt-8 flex max-w-full flex-wrap items-center justify-center gap-x-4 gap-y-2 text-center font-label text-[0.65rem] uppercase tracking-widest text-on-surface-variant/60 sm:mt-10 sm:gap-x-6 sm:gap-y-3 sm:text-xs lg:mt-12">
|
|
<span>No Referral Required</span>
|
|
<span class="hidden h-1 w-1 rounded-full bg-outline sm:inline-block" aria-hidden="true"></span>
|
|
<span>Private & Confidential</span>
|
|
<span class="hidden h-1 w-1 rounded-full bg-outline sm:inline-block" aria-hidden="true"></span>
|
|
<span>Walk-ins Welcome</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |