341 lines
13 KiB
HTML
341 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport"/>
|
|
<title>GreenLens - Login</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;600;700&family=JetBrains+Mono:wght@500&family=Manrope:wght@400&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": {
|
|
"on-primary-fixed-variant": "#2e4f00",
|
|
"inverse-primary": "#41690c",
|
|
"surface": "#0c160d",
|
|
"on-tertiary-fixed": "#171d15",
|
|
"primary-container": "#a6d66f",
|
|
"on-error-container": "#ffdad6",
|
|
"surface-dim": "#0c160d",
|
|
"surface-container-lowest": "#071008",
|
|
"secondary-fixed-dim": "#b7ccb5",
|
|
"secondary": "#b7ccb5",
|
|
"secondary-container": "#394b39",
|
|
"on-surface": "#dae6d6",
|
|
"primary-fixed": "#c0f287",
|
|
"primary": "#c1f388",
|
|
"on-primary": "#1e3700",
|
|
"surface-bright": "#313c31",
|
|
"tertiary-fixed": "#dee5d6",
|
|
"error-container": "#93000a",
|
|
"background": "#0c160d",
|
|
"on-tertiary-fixed-variant": "#42493e",
|
|
"on-tertiary": "#2c3229",
|
|
"on-surface-variant": "#c3c9b6",
|
|
"inverse-surface": "#dae6d6",
|
|
"on-secondary": "#233424",
|
|
"on-primary-container": "#365d00",
|
|
"inverse-on-surface": "#283328",
|
|
"surface-variant": "#2d372d",
|
|
"surface-container-low": "#141e14",
|
|
"surface-container-highest": "#2d372d",
|
|
"surface-container-high": "#222d22",
|
|
"tertiary-fixed-dim": "#c2c9bb",
|
|
"tertiary-container": "#c3cabc",
|
|
"outline": "#8d9382",
|
|
"on-background": "#dae6d6",
|
|
"on-secondary-fixed": "#0f1f10",
|
|
"on-error": "#690005",
|
|
"secondary-fixed": "#d3e8d0",
|
|
"outline-variant": "#43493a",
|
|
"error": "#ffb4ab",
|
|
"on-secondary-fixed-variant": "#394b39",
|
|
"on-tertiary-container": "#4e554a",
|
|
"surface-tint": "#a5d56e",
|
|
"tertiary": "#dfe6d8",
|
|
"surface-container": "#182218",
|
|
"on-secondary-container": "#a6bba4",
|
|
"primary-fixed-dim": "#a5d56e",
|
|
"on-primary-fixed": "#0f2000"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"unit": "8px",
|
|
"gutter": "24px",
|
|
"margin-mobile": "16px",
|
|
"margin-desktop": "64px",
|
|
"container-max": "1280px"
|
|
},
|
|
"fontFamily": {
|
|
"display": [
|
|
"Epilogue"
|
|
],
|
|
"headline-md": [
|
|
"Epilogue"
|
|
],
|
|
"body-lg": [
|
|
"Manrope"
|
|
],
|
|
"headline-lg": [
|
|
"Epilogue"
|
|
],
|
|
"label-sm": [
|
|
"JetBrains Mono"
|
|
],
|
|
"headline-lg-mobile": [
|
|
"Epilogue"
|
|
],
|
|
"body-md": [
|
|
"Manrope"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"display": [
|
|
"64px",
|
|
{
|
|
"lineHeight": "1.1",
|
|
"letterSpacing": "-0.02em",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"headline-md": [
|
|
"28px",
|
|
{
|
|
"lineHeight": "1.3",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"body-lg": [
|
|
"18px",
|
|
{
|
|
"lineHeight": "1.6",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"headline-lg": [
|
|
"40px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"letterSpacing": "-0.01em",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"label-sm": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.0",
|
|
"letterSpacing": "0.05em",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"headline-lg-mobile": [
|
|
"32px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"body-md": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "1.6",
|
|
"fontWeight": "400"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
-webkit-tap-highlight-color: transparent;
|
|
background-color: #000; /* For framing */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
}
|
|
.iphone-frame {
|
|
width: 100%;
|
|
max-width: 393px; /* iPhone 15 width */
|
|
height: 100vh;
|
|
max-height: 852px; /* iPhone 15 height */
|
|
background-color: #0c160d; /* surface */
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-col;
|
|
}
|
|
@media (min-width: 400px) {
|
|
.iphone-frame {
|
|
height: 852px;
|
|
border-radius: 54px;
|
|
box-shadow: 0 0 0 10px #000, 0 20px 40px rgba(0,0,0,0.5);
|
|
margin: 20px;
|
|
}
|
|
}
|
|
.hero-section {
|
|
height: 35%;
|
|
position: relative;
|
|
}
|
|
.hero-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.hero-gradient {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(12,22,13,0) 50%, #0c160d 100%);
|
|
}
|
|
.form-sheet {
|
|
height: 65%;
|
|
background-color: #0c160d;
|
|
border-top-left-radius: 24px;
|
|
border-top-right-radius: 24px;
|
|
margin-top: -24px; /* Pull up to overlap hero */
|
|
position: relative;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 24px 20px;
|
|
}
|
|
|
|
/* Custom Input Styling matching guidelines */
|
|
.input-field {
|
|
height: 56px;
|
|
background-color: #141e14;
|
|
border-radius: 14px;
|
|
border: 1px solid #43493a;
|
|
padding: 0 16px;
|
|
font-family: 'Manrope', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #dae6d6;
|
|
width: 100%;
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.input-field:focus {
|
|
border-color: #c1f388;
|
|
box-shadow: 0 0 0 2px rgba(193, 243, 136, 0.2);
|
|
}
|
|
.input-field::placeholder {
|
|
color: #8d9382;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Button Styling */
|
|
.btn-primary {
|
|
height: 56px;
|
|
background-color: #a6d66f;
|
|
border-radius: 14px;
|
|
color: #365d00;
|
|
font-family: 'Manrope', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: transform 0.1s, opacity 0.2s;
|
|
}
|
|
.btn-primary:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.btn-apple {
|
|
height: 56px;
|
|
background-color: #dae6d6;
|
|
border-radius: 14px;
|
|
color: #0c160d;
|
|
font-family: 'Manrope', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
border: none;
|
|
cursor: pointer;
|
|
gap: 8px;
|
|
transition: transform 0.1s;
|
|
}
|
|
.btn-apple:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.divider-line {
|
|
height: 1px;
|
|
background-color: #2d372d;
|
|
flex-grow: 1;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 dark:bg-black">
|
|
<div class="iphone-frame flex flex-col relative">
|
|
<!-- Hero Image Area (35%) -->
|
|
<div class="hero-section">
|
|
<img alt="Botanical hero image" class="hero-image" data-alt="A lush, high-resolution close-up of a Monstera Deliciosa leaf, softly backlit by warm morning sunlight. The botanical photography is premium, airy, and calming, featuring rich vibrant greens against a slightly blurred, clean background. The aesthetic is modern minimalist with a tactile organic feel, perfectly suited for a high-end plant care app." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZ52RoNjzx9-A72eQKmdGgnrltylpxouotb1w9T0WHGj_3lAW7G9L6cV6MgKptlxFZiiYT6AobZ5G7R3rvT86jhDTo5J87nsGwWrcqHnBgUOQ4enGmQ7WSStk2vV4zdWdSHCBfPSndpOUj_DRF3od8ASsFMDcA6VS02INwlqEmewyvYC1lpHPrr1ZrsHut8BAc0tWBa3GB8MKSNcQo03Da-KD06wwLK6kNBFyEHQqt77xxescSLi2CZgi_Zq5c2hNhs9Qd993DV-o"/>
|
|
<div class="hero-gradient"></div>
|
|
<div class="absolute bottom-10 left-5">
|
|
<h1 class="font-display text-display text-on-surface">Welcome back!</h1>
|
|
</div>
|
|
</div>
|
|
<!-- Form Sheet Area (65%) -->
|
|
<div class="form-sheet">
|
|
<!-- Apple Login -->
|
|
<button class="btn-apple mb-6">
|
|
<svg fill="currentColor" height="20" viewbox="0 0 24 24" width="20">
|
|
<path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.62-1.496 3.603-2.998 1.156-1.682 1.633-3.314 1.655-3.398-.035-.015-3.182-1.22-3.216-4.858-.026-3.04 2.484-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.693.792-1.353 2.235-1.169 3.603 1.343.104 2.61-.715 3.456-1.59z"></path>
|
|
</svg>
|
|
Continue with Apple
|
|
</button>
|
|
<!-- Divider -->
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="divider-line"></div>
|
|
<span class="font-label-sm text-label-sm text-outline">OR</span>
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
<!-- Inputs -->
|
|
<div class="flex flex-col gap-4 mb-4">
|
|
<input autocomplete="email" class="input-field" placeholder="Email address" type="email"/>
|
|
<input autocomplete="current-password" class="input-field" placeholder="Password" type="password"/>
|
|
</div>
|
|
<!-- Forgot Password -->
|
|
<div class="flex justify-end mb-6">
|
|
<a class="font-body-md text-body-md text-primary-container font-semibold hover:opacity-80 transition-opacity" href="#">Forgot password?</a>
|
|
</div>
|
|
<!-- Submit Button -->
|
|
<button class="btn-primary mb-6">
|
|
Log in
|
|
</button>
|
|
<!-- Spacer -->
|
|
<div class="flex-grow"></div>
|
|
<!-- Sign Up Link -->
|
|
<div class="text-center pb-8">
|
|
<span class="font-body-md text-body-md text-on-surface-variant">New here? </span>
|
|
<a class="font-body-md text-body-md text-primary-container font-bold hover:opacity-80 transition-opacity" href="#">Create account</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body></html> |