343 lines
13 KiB
HTML
343 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" 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=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": {
|
|
"tertiary": "#375d00",
|
|
"on-surface": "#191d16",
|
|
"on-secondary-fixed": "#012104",
|
|
"on-secondary-fixed-variant": "#2d4e2b",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container-low": "#f2f5e9",
|
|
"error-container": "#ffdad6",
|
|
"secondary": "#446741",
|
|
"outline": "#72796a",
|
|
"on-secondary": "#ffffff",
|
|
"surface-container": "#ecefe4",
|
|
"on-error": "#ffffff",
|
|
"on-surface-variant": "#42493c",
|
|
"background": "#f8fbef",
|
|
"error": "#ba1a1a",
|
|
"outline-variant": "#c2c9b7",
|
|
"on-secondary-container": "#486b45",
|
|
"secondary-fixed": "#c5edbd",
|
|
"on-tertiary": "#ffffff",
|
|
"primary": "#2b5f0b",
|
|
"surface-dim": "#d8dbd0",
|
|
"primary-container": "#437824",
|
|
"tertiary-fixed-dim": "#a5d56e",
|
|
"inverse-on-surface": "#eff2e7",
|
|
"surface-container-high": "#e7e9de",
|
|
"surface-bright": "#f8fbef",
|
|
"inverse-surface": "#2e322a",
|
|
"on-background": "#191d16",
|
|
"on-primary-fixed": "#092100",
|
|
"secondary-container": "#c2eaba",
|
|
"on-tertiary-container": "#cbfd91",
|
|
"primary-fixed": "#b6f390",
|
|
"tertiary-container": "#4d771b",
|
|
"primary-fixed-dim": "#9bd776",
|
|
"tertiary-fixed": "#c0f287",
|
|
"surface-tint": "#366a17",
|
|
"secondary-fixed-dim": "#aad1a2",
|
|
"surface-variant": "#e1e4d9",
|
|
"on-error-container": "#93000a",
|
|
"on-tertiary-fixed-variant": "#2e4f00",
|
|
"on-primary": "#ffffff",
|
|
"on-primary-container": "#c1ff99",
|
|
"surface-container-highest": "#e1e4d9",
|
|
"on-tertiary-fixed": "#0f2000",
|
|
"on-primary-fixed-variant": "#205100",
|
|
"inverse-primary": "#9bd776",
|
|
"surface": "#f8fbef"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xs": "8px",
|
|
"xl": "32px",
|
|
"base": "4px",
|
|
"sm": "12px",
|
|
"gutter": "16px",
|
|
"md": "16px",
|
|
"lg": "24px",
|
|
"container-margin": "20px"
|
|
},
|
|
"fontFamily": {
|
|
"label-md": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"body-lg": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"label-lg": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"body-md": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"headline-lg": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"display": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"headline-md": [
|
|
"Plus Jakarta Sans"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"label-md": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "16px",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"body-lg": [
|
|
"17px",
|
|
{
|
|
"lineHeight": "26px",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"label-lg": [
|
|
"13px",
|
|
{
|
|
"lineHeight": "18px",
|
|
"letterSpacing": "0.05em",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"body-md": [
|
|
"15px",
|
|
{
|
|
"lineHeight": "22px",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"headline-lg": [
|
|
"28px",
|
|
{
|
|
"lineHeight": "36px",
|
|
"letterSpacing": "-0.01em",
|
|
"fontWeight": "800"
|
|
}
|
|
],
|
|
"display": [
|
|
"34px",
|
|
{
|
|
"lineHeight": "42px",
|
|
"letterSpacing": "-0.02em",
|
|
"fontWeight": "800"
|
|
}
|
|
],
|
|
"headline-md": [
|
|
"22px",
|
|
{
|
|
"lineHeight": "28px",
|
|
"fontWeight": "700"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</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: #FBFAF3; /* 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(251,250,243,0) 50%, #FBFAF3 100%);
|
|
}
|
|
.form-sheet {
|
|
height: 65%;
|
|
background-color: #FBFAF3;
|
|
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: #FFFFFF;
|
|
border-radius: 14px;
|
|
border: 1px solid #D1D4CC;
|
|
padding: 0 16px;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #191d16;
|
|
width: 100%;
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
.input-field:focus {
|
|
border-color: #437824;
|
|
box-shadow: 0 0 0 2px rgba(67, 120, 36, 0.2);
|
|
}
|
|
.input-field::placeholder {
|
|
color: #72796a;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* Button Styling */
|
|
.btn-primary {
|
|
height: 56px;
|
|
background-color: #437824;
|
|
border-radius: 14px;
|
|
color: #FFFFFF;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
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: #000000;
|
|
border-radius: 14px;
|
|
color: #FFFFFF;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 15px;
|
|
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: #e1e4d9;
|
|
flex-grow: 1;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<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-lg">
|
|
<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-lg">
|
|
<div class="divider-line"></div>
|
|
<span class="font-label-md text-label-md text-outline">OR</span>
|
|
<div class="divider-line"></div>
|
|
</div>
|
|
<!-- Inputs -->
|
|
<div class="flex flex-col gap-sm mb-md">
|
|
<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-lg">
|
|
<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-lg">
|
|
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> |