Skip to content

Instantly share code, notes, and snippets.

@harryneopotter

harryneopotter/page.html

Created March 28, 2026 12:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save harryneopotter/3674c68a10aa794622f09b1408c065fe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save harryneopotter/3674c68a10aa794622f09b1408c065fe to your computer and use it in GitHub Desktop.
Download ZIP
Raw
page.html
**file**
<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=Inter:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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: {
"surface-container": "#eceeeb",
"inverse-primary": "#a7d1ab",
"outline": "#727971",
"on-tertiary-fixed": "#002108",
"secondary-container": "#acefb7",
"surface-bright": "#f8faf6",
"tertiary-container": "#306138",
"surface-container-lowest": "#ffffff",
"on-background": "#191c1a",
"on-secondary-fixed": "#00210b",
"surface-dim": "#d8dbd7",
"on-primary": "#ffffff",
"on-primary-fixed": "#00210b",
"outline-variant": "#c2c8bf",
"primary-container": "#3a5f41",
"tertiary-fixed": "#b9f0ba",
"inverse-on-surface": "#eff1ed",
"primary": "#23472b",
"on-secondary-fixed-variant": "#0e5228",
"error-container": "#ffdad6",
"error": "#ba1a1a",
"surface": "#f8faf6",
"on-primary-fixed-variant": "#2a4e32",
"surface-container-highest": "#e1e3df",
"surface-container-high": "#e7e9e5",
"on-tertiary-fixed-variant": "#1f5029",
"surface-container-low": "#f2f4f0",
"secondary-fixed": "#aff2ba",
"secondary-fixed-dim": "#94d69f",
"on-surface-variant": "#424941",
"on-secondary": "#ffffff",
"secondary": "#2c6a3e",
"on-surface": "#191c1a",
"background": "#f8faf6",
"on-primary-container": "#aed7b1",
"on-tertiary": "#ffffff",
"surface-tint": "#416748",
"tertiary-fixed-dim": "#9ed4a0",
"on-tertiary-container": "#a4daa6",
"inverse-surface": "#2e312f",
"primary-fixed": "#c3edc6",
"surface-variant": "#e1e3df",
"tertiary": "#174922",
"on-error": "#ffffff",
"primary-fixed-dim": "#a7d1ab",
"on-secondary-container": "#306f42",
"on-error-container": "#93000a"
},
fontFamily: {
"headline": ["Inter"],
"body": ["Inter"],
"label": ["Inter"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "1rem", "xl": "1.5rem", "2xl": "2rem", "full": "9999px"},
},
},
}
</script>
<style>
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.material-symbols-fill { font-variation-settings: 'FILL' 1; }
body { min-height: 100dvh; }
</style>
</head>
<body class="bg-surface font-body text-on-surface antialiased">
<!-- Header -->
<header class="fixed top-0 z-50 w-full bg-surface/80 backdrop-blur-md px-6 py-4 flex justify-between items-center border-b border-outline-variant/10">
<div class="flex items-center gap-4">
<button class="text-primary p-2 hover:bg-primary/10 rounded-full transition-colors">
<span class="material-symbols-outlined">menu</span>
</button>
<h1 class="font-headline font-bold text-xl tracking-tight text-primary">The Arboretum</h1>
</div>
<div class="w-10 h-10 rounded-full overflow-hidden border border-outline-variant/20">
<img alt="Profile" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzJNXYHdriNafFgQQTXXFQKULC8isVdIIh5rQ0OXxMh_LKYR-ysQVFrJmBdPx7MrIdjyHHTySt1EK2bdEqg1MMQZy_JOwxZUCedPTutr_UExM6tqeLgKmQyz4rsF03KfjgvTIUmfz5R-yfuesuI-32uYs4TTEcHSrzkMCR4QtONrlfNzE_wkCZyWj2gVYkWtX62XpvvPUv_PHyOy-zfn5FYLwfXxcfuppBikScFr4RM1s3C8EVReblD1U4yZ7qkpfB-QfXfj9pLnM"/>
</div>
</header>
<main class="max-w-xl mx-auto pt-24 pb-32 px-6 space-y-10">
<!-- Result Summary -->
<section class="flex flex-col items-center text-center">
<div class="relative mb-6">
<div class="w-48 h-48 rounded-3xl overflow-hidden shadow-xl transform rotate-3 hover:rotate-0 transition-transform duration-500">
<img alt="Scanned Leaf" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAuVI9SktZKRt5KlVsAXsntpAQqU9cnOyG-tVvW0_ecfii8yQeevYTbSgadBVFq9lHpGZDljnSdoQ7VxeXFgDPTN6UYvqlA3xjC4dlVn1gs5aG7qlS4Y4SlyESS_7ajMCvpOE3e5zLSdhaxHDDR9qIxw_9XLfa4ZCAwLkWRFiDP1JIIAkf_acDp2E8ZZgZ5FCCuNLOTPE4WgtYFqPsERM4l3BvpC346GvTznb4YLGTITTBxET8pRDJ_vhsdJXC_cpqvovbEj-xXYCQ"/>
</div>
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 bg-tertiary-fixed text-on-tertiary-fixed px-4 py-1.5 rounded-full font-bold text-xs shadow-lg flex items-center gap-1.5 whitespace-nowrap">
<span class="material-symbols-outlined text-sm material-symbols-fill">check_circle</span>
Analysis Complete
</div>
</div>
<h2 class="text-3xl font-headline font-bold text-primary mt-4 mb-2">Identification Results</h2>
<p class="text-on-surface-variant text-sm max-w-xs">We've found 3 potential matches in our botanical database.</p>
</section>
<!-- Main Card -->
<article class="bg-surface-container-lowest rounded-3xl overflow-hidden shadow-sm border border-outline-variant/20">
<div class="relative h-64 overflow-hidden">
<img alt="Monstera Deliciosa" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDbGCIQWHtHt3eXGA_sH3ldK23_yLF0G1H0WNBU3Wihl_cAcmlmhrYZDvaPqlvTfpxfQeLzxPt1VTCFJJgVWv-4PMnD6OQ_2oUCC56VJbwdxTkokn2MGgfBX4fesZiT4OATFO-EvTjn7BV7XRUwerF1osfres_FQzYoGyBoML5XKk6qawbEtoJxivZKyJDLy7hRUgCdElRKxA8g76qCO8wL63QYduxQ3J-jxJRPro83wsxgig58-2SVMjnKZK_TZPs4ac7APlyBdQI"/>
<span class="absolute top-4 left-4 bg-primary text-on-primary px-3 py-1 rounded-full text-[10px] font-bold tracking-widest uppercase">Best Match</span>
</div>
<div class="p-8 space-y-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-2xl font-headline font-bold text-primary">Monstera Deliciosa</h3>
<p class="text-xs font-label uppercase tracking-widest text-on-secondary-fixed-variant italic mt-1">Swiss Cheese Plant</p>
</div>
<div class="text-right">
<span class="block text-3xl font-bold text-secondary">98%</span>
<span class="text-[10px] uppercase tracking-widest font-bold text-on-surface-variant">Confidence</span>
</div>
</div>
<p class="text-on-surface-variant text-sm leading-relaxed line-clamp-2">A species of flowering plant native to tropical forests of southern Mexico, south to Panama.</p>
<button class="w-full bg-primary text-on-primary font-bold py-4 rounded-2xl flex items-center justify-center gap-2 hover:bg-primary-container active:scale-[0.98] transition-all">
View Full Profile
<span class="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</article>
<!-- Match List -->
<div class="space-y-4">
<!-- Item 1 -->
<div class="flex items-center gap-4 bg-surface-container-low/50 p-4 rounded-2xl border border-outline-variant/10 hover:bg-surface-container-high transition-colors cursor-pointer">
<img alt="Thaumatophyllum" class="w-16 h-16 rounded-xl object-cover shrink-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBoMqsEJBkkUio6puW4DcS_0n-LFT3xVNkba5XOKcghMFbqbHdD-HkCYwDrd5QU1sDSe5q90ZCjDKYVvHGQxjKYBeHfxZ1ul77C9V0zYE0STwvaPqfMBfpO29H-H0OKk_iKk7YLDgwprkYqmDmQksba6p4G5J5YpaenRiZt1Ct98HHdGR9uJQXrmXRrDLk5DD3GuA1dKHe3qUyV1_vTyOdS7yyNRAOhUmbpxN6LyO1xE1P_ijTll7ZBwA0BStQrKdIzSuh70fmLlu4"/>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-end mb-1">
<h4 class="font-bold text-primary truncate pr-2 text-sm">Thaumatophyllum</h4>
<span class="text-sm font-bold text-on-surface/70">75%</span>
</div>
<p class="text-[9px] uppercase tracking-widest text-on-surface-variant mb-2">Tree Philodendron</p>
<div class="h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden">
<div class="h-full bg-secondary-fixed-dim" style="width: 75%"></div>
</div>
</div>
<div class="p-2 rounded-full bg-surface-container-highest text-primary">
<span class="material-symbols-outlined text-lg">chevron_right</span>
</div>
</div>
<!-- Item 2 -->
<div class="flex items-center gap-4 bg-surface-container-low/50 p-4 rounded-2xl border border-outline-variant/10 hover:bg-surface-container-high transition-colors cursor-pointer">
<img alt="Epipremnum aureum" class="w-16 h-16 rounded-xl object-cover shrink-0" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBp1v3KzqtmTqrHRUDsMo-Dyfcd1-RyLvVD67gFJaN8ciDYLeJZq3INLJGE0iUgYY2Ce027paDYYRiFBbCFdnwJzNRPI3rPAZtbeI0mlQZoJmULq_DFlfUsvLZnfymptJLBtzQTIiKLCaIxEDgG6k_-ApkmxY0pf3T_ckPGU014OdKmJVKX0FHm7uAbPW8_1AI7A7VPjIyrL7UnriKWjvTEr-8P1nFgLB49H6L0TbYUbwzaej0r6seAWjrbqkWeOmvlv8_s9Z16vRc"/>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-end mb-1">
<h4 class="font-bold text-primary truncate pr-2 text-sm">Epipremnum aureum</h4>
<span class="text-sm font-bold text-on-surface/50">62%</span>
</div>
<p class="text-[9px] uppercase tracking-widest text-on-surface-variant mb-2">Golden Pothos</p>
<div class="h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden">
<div class="h-full bg-outline-variant" style="width: 62%"></div>
</div>
</div>
<div class="p-2 rounded-full bg-surface-container-highest text-primary">
<span class="material-symbols-outlined text-lg">chevron_right</span>
</div>
</div>
</div>
<!-- Feedback Card -->
<section class="p-8 rounded-3xl bg-secondary-container/15 border-2 border-dashed border-secondary-container/40 text-center space-y-4">
<span class="material-symbols-outlined text-4xl text-secondary">psychology</span>
<div>
<h5 class="text-lg font-bold text-primary mb-1">Not seeing a match?</h5>
<p class="text-on-surface-variant text-sm">Try taking another photo from a different angle with clearer lighting.</p>
</div>
<button class="px-8 py-3 bg-surface-container-lowest text-primary font-bold rounded-full shadow-sm hover:shadow-md active:scale-95 transition-all">
Retake Photo
</button>
</section>
</main>
<!-- Navigation -->
<nav class="fixed bottom-0 left-0 w-full z-50 bg-surface/80 backdrop-blur-xl border-t border-outline-variant/10 rounded-t-[2.5rem] shadow-2xl px-4 pt-4 pb-8 flex justify-around items-center">
<button class="flex flex-col items-center gap-1 w-1/4 py-1 text-primary/40 hover:text-primary transition-colors">
<span class="material-symbols-outlined">home</span>
<span class="text-[10px] font-bold uppercase tracking-widest">Home</span>
</button>
<button class="flex flex-col items-center gap-1 w-1/4 bg-tertiary-fixed text-primary py-2.5 rounded-2xl active:scale-95 transition-transform">
<span class="material-symbols-outlined material-symbols-fill">center_focus_weak</span>
<span class="text-[10px] font-bold uppercase tracking-widest">Identify</span>
</button>
<button class="flex flex-col items-center gap-1 w-1/4 py-1 text-primary/40 hover:text-primary transition-colors">
<span class="material-symbols-outlined">medical_services</span>
<span class="text-[10px] font-bold uppercase tracking-widest">Diagnosis</span>
</button>
<button class="flex flex-col items-center gap-1 w-1/4 py-1 text-primary/40 hover:text-primary transition-colors">
<span class="material-symbols-outlined">settings</span>
<span class="text-[10px] font-bold uppercase tracking-widest">Settings</span>
</button>
</nav>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment