212 lines
10 KiB
HTML
212 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html class="light" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<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">
|
|
<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>
|
|
<style>
|
|
body {
|
|
width: 1280px;
|
|
height: 800px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background-color: #f9f9f9;
|
|
font-family: 'Manrope', sans-serif;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="text-on-background bg-surface">
|
|
<!-- Digital Signage Container (1280x800) -->
|
|
<div class="w-[1280px] h-[800px] relative flex flex-col overflow-hidden">
|
|
<!-- Header: TopAppBar Adaption -->
|
|
<header class="bg-stone-50/80 backdrop-blur-xl flex justify-between items-center w-full px-16 pt-12 pb-8 z-10">
|
|
<div class="flex items-center gap-6">
|
|
<img alt="Mole Institute Logo" class="h-16 w-auto"
|
|
data-alt="Sophisticated medical institute logo featuring elegant serif typography and a minimalist burgundy emblem on a clean white background"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuB2KfrZDX3wqDlPuRYstXN8NGn3owMsYi9eFQ5pERuzVsYOL_Xr4gOyPNycO0RjWCOO75N0V1LbxKBeeuRHchMX1Q7aWtAZdTa7SIcOuyQfq2gXCIrSwTYuAyxFAZqwhvK6lKNcDQlG6FvePeKmBBNQ3R8wqMBaAhpEpPMGs5DHzskVi6cqGJsXIsHXriv-VILrRUIQNi05PsXRfng-6pxhIXAdUXKwMvJ3Db3uGVG7eNR5gGfScQMg6VDoOJ9ryBWleGLSe7uFMNA"
|
|
style="">
|
|
<h1 class="font-headline font-bold text-3xl tracking-tight text-primary" style="">Mole Institute</h1>
|
|
</div>
|
|
<div class="flex items-center gap-4 text-on-surface-variant font-semibold">
|
|
<span class="material-symbols-outlined text-primary" style="">verified_user</span>
|
|
<span class="font-label uppercase tracking-widest text-sm" style="">Certified Dermatology
|
|
Specialists</span>
|
|
</div>
|
|
</header>
|
|
<!-- Main Layout: Split-Screen -->
|
|
<main class="flex-1 flex w-full">
|
|
<!-- Left Side: Editorial Content -->
|
|
<div class="w-1/2 flex flex-col justify-center px-16 relative">
|
|
<!-- 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">
|
|
<span class="text-primary font-label font-extrabold uppercase tracking-[0.2em] text-sm mb-6 block"
|
|
style="">Precision Medicine</span>
|
|
<h2 class="font-headline text-7xl font-bold leading-[1.1] text-on-background mb-8" style="">
|
|
Expert Mole & <br>
|
|
<span class="text-primary" style="">Skin Tag</span> Removal
|
|
</h2>
|
|
<div class="flex flex-col gap-6 max-w-md">
|
|
<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" style="">biotech</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-lg text-on-background" style="">Advanced Diagnostic Imaging
|
|
</h3>
|
|
<p class="text-on-surface-variant leading-relaxed" style="">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" style="">medical_services</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-lg text-on-background" style="">Minimally Invasive Care</h3>
|
|
<p class="text-on-surface-variant leading-relaxed" style="">Surgical excellence with a
|
|
focus on aesthetic outcomes and rapid recovery.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12 flex items-center gap-4">
|
|
<div class="h-px w-12 bg-primary"></div>
|
|
<p class="font-headline italic text-xl text-primary-container" style="">Excellence in
|
|
Dermatological Care</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Side: QR Code & CTA -->
|
|
<div class="w-1/2 bg-surface-container-low flex flex-col items-center justify-center relative px-16">
|
|
<!-- Large tonal decorative element -->
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-bl-[12rem]"></div>
|
|
<div
|
|
class="bg-surface-container-lowest editorial-shadow rounded-[2.5rem] p-12 flex flex-col items-center max-w-sm w-full border border-outline-variant/10 relative z-10">
|
|
<div class="bg-primary/5 p-4 rounded-full mb-8">
|
|
<span class="material-symbols-outlined text-primary text-4xl" style="">qr_code_scanner</span>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-2xl border border-outline-variant/20 mb-8">
|
|
<img alt="Scan to book consultation" class="w-48 h-48"
|
|
data-alt="High-resolution digital QR code centered on a clean white background with subtle burgundy border accents"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBvjMyjYnRg8wYGw6cvwc9mtLPwzaYN-ilaGI8yGZ_bpcHPg3x9bL7_Aau_4CZsWyhYBI37AR0_PHzw0AzFPymvjKZ_1wmslYT-OgTbB9P1FI7gojI3FpDhfdS-xMq3a2hfPZNXqp_CjqruC6BOKsT8vqL1bsqgpyZYInJE-unOr9-d8LlZdyMv-ghjHHeRwFcJpnYzwmiX05edFVbjfJ561E977Kq3flGz_Eib0L286kZuQcEh52xuF1mk9izhLN71iFyVbgQb7pA"
|
|
style="">
|
|
</div>
|
|
<h3 class="font-headline text-2xl font-bold text-on-background mb-2 text-center" style="">Scan to
|
|
Book</h3>
|
|
<p class="text-on-surface-variant text-center font-medium mb-8" style="">Secure your consultation
|
|
with our specialist team in seconds.</p>
|
|
<button
|
|
class="w-full bg-gradient-to-r from-primary to-primary-container text-white py-4 px-8 rounded-full font-bold text-lg flex items-center justify-center gap-3 shadow-lg shadow-primary/20"
|
|
style=""><span class="material-symbols-outlined" style="">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="mt-12 flex items-center gap-8 text-on-surface-variant/60 font-label text-xs uppercase tracking-widest">
|
|
<span class="" style="">No Referral Required</span>
|
|
<div class="w-1 h-1 bg-outline rounded-full"></div>
|
|
<span class="" style="">Private & Confidential</span>
|
|
<div class="w-1 h-1 bg-outline rounded-full"></div>
|
|
<span class="" style="">Walk-ins Welcome</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Accent Accents (Editorial Aesthetics) -->
|
|
<div class="absolute bottom-16 left-16 flex items-center gap-4">
|
|
<div class="w-3 h-3 rounded-full bg-primary"></div>
|
|
<div class="w-3 h-3 rounded-full bg-primary/40"></div>
|
|
<div class="w-3 h-3 rounded-full bg-primary/10"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |