tane/docs/mockups/seedees_material3.html
vjrj 51e6bf019d docs(store): rename Tanemaki → Tane in Play Store metadata and mockups
Fastlane title.txt + full_description.txt (en-US, es-ES) now lead with
Tane and keep tanemaki (種まき) as etymology; CI comment and the Material
mockups updated too.
2026-07-12 13:16:53 +02:00

254 lines
46 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<title>Tane — Material mockups (v3)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Roboto+Mono:wght@400;500&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0" rel="stylesheet">
<style>
* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
a { color: #2f7d34; text-decoration: none; }
a:hover { color: #216023; }
.ms { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; }
.fill { font-variation-settings: 'FILL' 1; }
@font-face { font-family: 'seedks'; src: url('seedees_material3_assets/seedks.ttf'); }
.sk { font-family: 'seedks'; line-height: 1; display: inline-block; }
</style>
</head>
<body>
<div style="min-height:100vh;background:#CFE0C4;padding:48px 40px 72px;font-family:Roboto">
<header style="max-width:1200px;margin:0 auto 44px">
<div style="display:flex;align-items:center;gap:16px">
<img src="seedees_material3_assets/logo.png" alt="Tane" style="height:52px;width:auto;display:block">
<div>
<div style="font:700 30px Roboto;color:#1a2a13;letter-spacing:-.01em">Tane · Material mockups</div>
<div style="font:400 15px Roboto;color:#38492e;margin-top:2px">Aligned with the real app — green app bars, botanical content, search, batches and action sheets.</div>
</div>
</div>
</header>
<div style="display:flex;flex-wrap:wrap;gap:44px;justify-content:center;align-items:flex-start;max-width:1720px;margin:0 auto">
<!-- ============ 00 HOME ============ -->
<figure data-screen-label="00 Home" style="margin:0;width:360px">
<div style="width:360px;height:740px;border-radius:34px;overflow:hidden;background:#E7F1E0;box-shadow:0 22px 55px -14px rgba(20,45,15,.4);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column">
<div style="height:26px;background:#2E6E28;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#fff;font:500 12px Roboto"><span>9:41</span><span style="display:flex;gap:5px;align-items:center"><span class="ms" style="font-size:15px">network_wifi</span><span class="ms" style="font-size:15px">signal_cellular_alt</span><span class="ms fill" style="font-size:15px">battery_full</span></span></div>
<header style="height:60px;background:#3E8C38;display:flex;align-items:center;gap:6px;padding:0 8px;color:#fff"><span class="ms" style="font-size:24px;color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center">menu</span><span style="flex:1;font:500 20px Roboto;color:#fff;margin-left:6px">Tane</span><span class="ms" style="font-size:23px;color:#fff;width:42px;height:42px;display:flex;align-items:center;justify-content:center">search</span></header>
<div style="flex:1;overflow:hidden;position:relative;display:flex;flex-direction:column">
<div style="position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.5">
<span class="sk" style="position:absolute;left:16px;bottom:74px;font-size:56px;color:#C3D9B2">a</span>
<span class="sk" style="position:absolute;left:122px;bottom:28px;font-size:48px;color:#C3D9B2">j</span>
<span class="sk" style="position:absolute;right:22px;bottom:66px;font-size:60px;color:#C3D9B2">e</span>
<span class="sk" style="position:absolute;right:124px;bottom:122px;font-size:44px;color:#C3D9B2">b</span>
</div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 28px;position:relative;z-index:1">
<div style="width:128px;height:128px;border-radius:50%;background:#DDF3CE;display:flex;align-items:center;justify-content:center;margin-bottom:10px"><img src="seedees_material3_assets/logo.png" alt="Tane" style="height:84px;width:auto;display:block"></div>
<div style="font:500 26px Roboto;color:#1a2a13;letter-spacing:-.01em">Tane</div>
<div style="font:400 14px Roboto;color:#55624a;margin-bottom:34px">Share and grow local seeds</div>
<button style="width:100%;border:none;cursor:pointer;background:#2f7d34;color:#fff;border-radius:18px;padding:19px 22px;display:flex;align-items:center;gap:16px;box-shadow:0 4px 12px rgba(47,125,52,.28);margin-bottom:16px;text-align:left"><span style="width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center"><span class="ms" style="font-size:26px">inventory_2</span></span><span style="flex:1"><span style="display:block;font:500 19px Roboto">Your inventory</span><span style="display:block;font:400 13px Roboto;opacity:.85">Manage your seeds</span></span></button>
<button style="width:100%;border:1px solid #B8C4AC;cursor:pointer;background:#fff;color:#1b2416;border-radius:18px;padding:19px 22px;display:flex;align-items:center;gap:16px;text-align:left"><span style="width:44px;height:44px;border-radius:50%;background:#DDF3CE;display:flex;align-items:center;justify-content:center"><span class="ms" style="font-size:26px;color:#2f7d34">storefront</span></span><span style="flex:1"><span style="display:block;font:500 19px Roboto">Open market</span><span style="display:block;font:400 13px Roboto;color:#7b8a70">Browse and exchange</span></span><span style="font:500 11px Roboto;color:#b3bda8;letter-spacing:.05em">SOON</span></button>
</div>
</div>
</div>
<figcaption style="margin-top:14px;font:400 13px Roboto;color:#22301b;text-align:center">00 · Home</figcaption>
</figure>
<!-- ============ 01 INVENTARIO ============ -->
<figure data-screen-label="01 Inventory" style="margin:0;width:360px">
<div style="width:360px;height:740px;border-radius:34px;overflow:hidden;background:#E7F1E0;box-shadow:0 22px 55px -14px rgba(20,45,15,.4);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column">
<div style="height:26px;background:#2E6E28;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#fff;font:500 12px Roboto"><span>9:41</span><span style="display:flex;gap:5px;align-items:center"><span class="ms" style="font-size:15px">network_wifi</span><span class="ms" style="font-size:15px">signal_cellular_alt</span><span class="ms fill" style="font-size:15px">battery_full</span></span></div>
<header style="height:60px;background:#3E8C38;display:flex;align-items:center;gap:6px;padding:0 8px;color:#fff"><span class="ms" style="font-size:24px;color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center">menu</span><span style="flex:1;font:500 20px Roboto;color:#fff;margin-left:6px">Inventory</span></header>
<div style="flex:1;overflow:hidden;position:relative">
<div style="display:flex;align-items:center;gap:12px;background:#fff;border-radius:28px;box-shadow:0 1px 3px rgba(0,0,0,.14);padding:12px 18px;margin:16px 16px 8px"><span class="ms" style="font-size:22px;color:#7b8a70">search</span><span style="font:400 15px Roboto;color:#8a9880">Search seeds</span></div>
<div style="font:500 16px Roboto;color:#2f7d34;padding:12px 18px 4px">Poaceae</div>
<div style="display:flex;align-items:center;gap:14px;padding:11px 18px"><span style="width:46px;height:46px;border-radius:50%;background:#CFE7C3;display:flex;align-items:center;justify-content:center;font:500 17px Roboto;color:#3b7a34">M</span><div style="flex:1"><div style="font:500 15px Roboto;color:#1b2416">Golden Bantam Corn</div><div style="font:italic 400 14px Roboto;color:#5c6b52">Zea mays</div></div><span class="ms" style="font-size:21px;color:#8a9880">edit</span></div>
<div style="font:500 16px Roboto;color:#2f7d34;padding:18px 18px 4px">Solanaceae</div>
<div style="display:flex;align-items:center;gap:14px;padding:11px 18px"><span style="width:46px;height:46px;border-radius:50%;background:#CFE7C3;display:flex;align-items:center;justify-content:center;font:500 17px Roboto;color:#3b7a34">T</span><div style="flex:1"><div style="font:500 15px Roboto;color:#1b2416">Chestnut Tomato</div><div style="font:italic 400 14px Roboto;color:#5c6b52">Solanum lycopersicum</div></div><span class="ms" style="font-size:21px;color:#8a9880">edit</span></div>
<div style="position:absolute;right:18px;bottom:18px;width:60px;height:60px;border-radius:20px;background:#2f7d34;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(47,125,52,.42)"><span class="ms" style="font-size:30px;color:#fff">add</span></div>
</div>
</div>
<figcaption style="margin-top:14px;font:400 13px Roboto;color:#22301b;text-align:center">01 · Inventory</figcaption>
</figure>
<!-- ============ 02 DETALLE SEMILLA ============ -->
<figure data-screen-label="02 Detail" style="margin:0;width:360px">
<div style="width:360px;height:740px;border-radius:34px;overflow:hidden;background:#E7F1E0;box-shadow:0 22px 55px -14px rgba(20,45,15,.4);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column">
<div style="height:26px;background:#2E6E28;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#fff;font:500 12px Roboto"><span>9:41</span><span style="display:flex;gap:5px;align-items:center"><span class="ms" style="font-size:15px">network_wifi</span><span class="ms" style="font-size:15px">signal_cellular_alt</span><span class="ms fill" style="font-size:15px">battery_full</span></span></div>
<header style="height:60px;background:#3E8C38;display:flex;align-items:center;gap:2px;padding:0 6px;color:#fff"><span class="ms" style="font-size:24px;color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center">arrow_back</span><span style="flex:1;font:500 20px Roboto;color:#fff;margin-left:4px">Chestnut Tomato</span><span class="ms" style="font-size:22px;color:#fff;width:42px;height:42px;display:flex;align-items:center;justify-content:center">edit</span><span class="ms" style="font-size:22px;color:#fff;width:42px;height:42px;display:flex;align-items:center;justify-content:center">delete</span></header>
<div style="flex:1;overflow:hidden;padding:18px 18px">
<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px">
<div><div style="font:500 16px Roboto;color:#2f7d34">Solanaceae</div><div style="font:italic 400 15px Roboto;color:#5c6b52;margin-top:2px">Solanum lycopersicum</div></div>
<div style="width:118px;height:118px;border-radius:50%;border:1.5px dashed #9aa88f;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#3b7a34;gap:4px"><span class="ms" style="font-size:26px">add_a_photo</span><span style="font:400 13px Roboto">Add photo</span></div>
</div>
<div style="font:500 16px Roboto;color:#2f7d34;margin-bottom:10px">Also known as</div>
<button style="border:1px solid #C3CBB6;background:#F3F7EE;border-radius:12px;padding:11px 18px;display:inline-flex;align-items:center;gap:10px;font:400 15px Roboto;color:#1b2416;cursor:pointer;margin-bottom:24px"><span class="ms" style="font-size:20px;color:#2f7d34">add</span>Add name</button>
<div style="font:500 16px Roboto;color:#2f7d34;margin-bottom:10px">Links</div>
<button style="border:1px solid #C3CBB6;background:#F3F7EE;border-radius:12px;padding:11px 18px;display:inline-flex;align-items:center;gap:10px;font:400 15px Roboto;color:#1b2416;cursor:pointer;margin-bottom:24px"><span class="ms" style="font-size:20px;color:#2f7d34">add</span>Add link</button>
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px"><span style="font:500 16px Roboto;color:#2f7d34">Batches</span><span style="display:inline-flex;align-items:center;gap:6px;font:400 14px Roboto;color:#2f7d34"><span class="ms" style="font-size:19px">add</span>Add batch</span></div>
<div style="display:flex;align-items:center;gap:12px;padding:8px 0"><span class="sk" style="font-size:22px;color:#7b8a70">k</span><span style="display:inline-flex;align-items:center;gap:6px;background:#D3E8C8;border-radius:999px;padding:5px 12px;font:400 13px Roboto;color:#2f6d2a"><span class="sk" style="font-size:17px">b</span>Seeds</span><div style="flex:1;font:400 15px Roboto;color:#1b2416;line-height:1.35">Unknown year · a few</div><span class="ms" style="font-size:22px;color:#3b7a34">grass</span></div>
</div>
</div>
<figcaption style="margin-top:14px;font:400 13px Roboto;color:#22301b;text-align:center">02 · Seed detail</figcaption>
</figure>
<!-- ============ 03 AÑADIR LOTE ============ -->
<figure data-screen-label="03 Add batch" style="margin:0;width:360px">
<div style="width:360px;height:740px;border-radius:34px;overflow:hidden;background:#E7F1E0;box-shadow:0 22px 55px -14px rgba(20,45,15,.4);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;position:relative">
<div style="height:26px;background:#22521e;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#fff;font:500 12px Roboto"><span>9:41</span><span style="display:flex;gap:5px;align-items:center"><span class="ms" style="font-size:15px">network_wifi</span><span class="ms" style="font-size:15px">signal_cellular_alt</span><span class="ms fill" style="font-size:15px">battery_full</span></span></div>
<header style="height:60px;background:#2f6a2b;display:flex;align-items:center;gap:2px;padding:0 6px;color:rgba(255,255,255,.55)"><span class="ms" style="font-size:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center">arrow_back</span><span style="flex:1;font:500 20px Roboto;margin-left:4px">Chestnut Tomato</span></header>
<div style="flex:1;position:relative;overflow:hidden">
<div style="position:absolute;inset:0;background:rgba(20,35,12,.42)"></div>
<div style="position:absolute;left:0;right:0;bottom:0;background:#EAF3E3;border-radius:26px 26px 0 0;padding:22px 20px 18px;box-shadow:0 -8px 24px rgba(0,0,0,.2)">
<div style="font:400 24px Roboto;color:#1b2416;margin-bottom:18px">Add batch</div>
<div style="display:flex;border:1px solid #B8C4AC;border-radius:999px;overflow:hidden;margin-bottom:20px">
<div style="flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:#D3E8C8;padding:12px;font:500 14px Roboto;color:#2f6d2a"><span class="sk" style="font-size:19px">b</span>Seeds</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;font:400 14px Roboto;color:#4b5a41"><span class="ms" style="font-size:19px">potted_plant</span>Seedling</div>
</div>
<div style="font:500 15px Roboto;color:#1b2416;margin-bottom:8px">Harvest date</div>
<div style="display:flex;align-items:center;gap:12px;border:1px solid #B8C4AC;border-radius:12px;padding:13px 16px;margin-bottom:20px"><span class="ms" style="font-size:20px;color:#2f7d34">calendar_month</span><span style="font:400 15px Roboto;color:#1b2416">Year 2026</span></div>
<div style="font:500 15px Roboto;color:#1b2416;margin-bottom:12px">How much?</div>
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px 4px;margin-bottom:20px">
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="sk" style="font-size:24px;color:#3b7a34">k</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">a few</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="sk" style="font-size:24px;color:#3b7a34">f</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">teaspoon</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="sk" style="font-size:24px;color:#3b7a34">g</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">spoon</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="sk" style="font-size:24px;color:#3b7a34">i</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">packet</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="sk" style="font-size:24px;color:#3b7a34">h</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">cup</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="sk" style="font-size:24px;color:#3b7a34">a</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">jar</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="sk" style="font-size:24px;color:#3b7a34">e</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">sack</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="ms" style="font-size:24px;color:#3b7a34">grass</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">cob</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="ms" style="font-size:24px;color:#3b7a34">eco</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">pod</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="ms" style="font-size:24px;color:#3b7a34">grass</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">spike</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="ms" style="font-size:24px;color:#3b7a34">local_florist</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">flower head</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="ms fill" style="font-size:24px;color:#3b7a34">local_florist</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">fruit</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="ms" style="font-size:24px;color:#3b7a34">spa</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">bulb</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="ms" style="font-size:24px;color:#3b7a34">spa</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">tuber</span></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:5px"><span class="ms" style="font-size:24px;color:#3b7a34">grass</span><span style="font:400 10px Roboto;color:#4b5a41;text-align:center">bunch</span></div>
</div>
<div style="display:flex;align-items:center;justify-content:space-between"><span style="font:500 15px Roboto;color:#2f7d34;padding:8px 4px">Cancel</span><button style="border:none;cursor:pointer;background:#2f7d34;color:#fff;border-radius:999px;padding:13px 30px;font:500 15px Roboto">Save</button></div>
</div>
</div>
</div>
<figcaption style="margin-top:14px;font:400 13px Roboto;color:#22301b;text-align:center">03 · Add batch</figcaption>
</figure>
<!-- ============ 04 EDITAR SEMILLA ============ -->
<figure data-screen-label="04 Edit seed" style="margin:0;width:360px">
<div style="width:360px;height:740px;border-radius:34px;overflow:hidden;background:#E7F1E0;box-shadow:0 22px 55px -14px rgba(20,45,15,.4);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;position:relative">
<div style="height:26px;background:#22521e;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#fff;font:500 12px Roboto"><span>9:41</span><span style="display:flex;gap:5px;align-items:center"><span class="ms" style="font-size:15px">network_wifi</span><span class="ms" style="font-size:15px">signal_cellular_alt</span><span class="ms fill" style="font-size:15px">battery_full</span></span></div>
<header style="height:60px;background:#2f6a2b;display:flex;align-items:center;gap:2px;padding:0 6px;color:rgba(255,255,255,.55)"><span class="ms" style="font-size:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center">arrow_back</span><span style="flex:1;font:500 20px Roboto;margin-left:4px">Chestnut Tomato</span><span class="ms" style="font-size:22px;width:42px;height:42px;display:flex;align-items:center;justify-content:center">edit</span></header>
<div style="flex:1;position:relative;overflow:hidden">
<div style="position:absolute;inset:0;background:rgba(20,35,12,.42)"></div>
<div style="position:absolute;left:0;right:0;bottom:0;background:#EAF3E3;border-radius:26px 26px 0 0;padding:24px 20px 20px;box-shadow:0 -8px 24px rgba(0,0,0,.2)">
<div style="font:400 24px Roboto;color:#1b2416;margin-bottom:22px">Edit seed</div>
<div style="position:relative;border:1px solid #7b8a70;border-radius:8px;padding:16px 14px 10px;margin-bottom:20px"><span style="position:absolute;top:-9px;left:12px;background:#EAF3E3;padding:0 5px;font:400 12px Roboto;color:#5c6b52">Name</span><span style="font:400 16px Roboto;color:#1b2416">Chestnut Tomato</span></div>
<div style="position:relative;border:1px solid #7b8a70;border-radius:8px;padding:16px 14px 10px;margin-bottom:20px;display:flex;align-items:center;gap:10px"><span style="position:absolute;top:-9px;left:12px;background:#EAF3E3;padding:0 5px;font:400 12px Roboto;color:#5c6b52">Species (from catalog)</span><span class="ms" style="font-size:20px;color:#5c6b52">eco</span><span style="font:400 16px Roboto;color:#1b2416">Solanum lycopersicum</span></div>
<div style="position:relative;border:1px solid #7b8a70;border-radius:8px;padding:16px 14px 10px;margin-bottom:20px"><span style="position:absolute;top:-9px;left:12px;background:#EAF3E3;padding:0 5px;font:400 12px Roboto;color:#5c6b52">Category</span><span style="font:400 16px Roboto;color:#1b2416">Solanaceae</span></div>
<div style="position:relative;border:1px solid #B8C4AC;border-radius:8px;padding:16px 14px;height:96px;margin-bottom:26px"><span style="font:400 16px Roboto;color:#8a9880">Notes</span></div>
<div style="display:flex;align-items:center;justify-content:space-between"><span style="font:500 15px Roboto;color:#2f7d34;padding:8px 4px">Cancel</span><button style="border:none;cursor:pointer;background:#2f7d34;color:#fff;border-radius:999px;padding:13px 34px;font:500 15px Roboto">Save</button></div>
</div>
</div>
</div>
<figcaption style="margin-top:14px;font:400 13px Roboto;color:#22301b;text-align:center">04 · Edit seed</figcaption>
</figure>
<!-- ============ 05 MENÚ LATERAL ============ -->
<figure data-screen-label="05 Drawer" style="margin:0;width:360px">
<div style="width:360px;height:740px;border-radius:34px;overflow:hidden;background:#E7F1E0;box-shadow:0 22px 55px -14px rgba(20,45,15,.4);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;position:relative">
<div style="height:26px;background:#2E6E28;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#fff;font:500 12px Roboto"><span>9:41</span><span style="display:flex;gap:5px;align-items:center"><span class="ms" style="font-size:15px">network_wifi</span><span class="ms" style="font-size:15px">signal_cellular_alt</span><span class="ms fill" style="font-size:15px">battery_full</span></span></div>
<div style="flex:1;position:relative;overflow:hidden">
<div style="position:absolute;inset:0;background:rgba(20,35,12,.4)"></div>
<div style="position:absolute;top:0;left:0;bottom:0;width:300px;background:#fff;box-shadow:2px 0 24px rgba(0,0,0,.2);display:flex;flex-direction:column">
<div style="display:flex;align-items:center;gap:12px;padding:18px 22px 16px;border-bottom:1px solid #E4E9DD"><img src="seedees_material3_assets/logo.png" alt="" style="height:34px;width:auto"><span style="font:700 22px Roboto;color:#2f7d34;letter-spacing:-.01em">Tane</span></div>
<nav style="flex:1;padding:8px 0">
<div style="display:flex;align-items:center;gap:18px;height:52px;padding:0 22px;color:#1b2416"><span class="sk" style="font-size:23px;color:#2f7d34">b</span><span style="font:500 15px Roboto">Inventory</span></div>
<div style="display:flex;align-items:center;gap:18px;height:52px;padding:0 22px;color:#9aa88f;border-bottom:1px solid #E4E9DD"><span class="ms" style="font-size:23px">storefront</span><span style="font:400 15px Roboto;flex:1">Market</span><span style="font:500 11px Roboto;color:#b3bda8;letter-spacing:.05em">SOON</span></div>
<div style="display:flex;align-items:center;gap:18px;height:52px;padding:0 22px;color:#9aa88f"><span class="ms" style="font-size:23px">person</span><span style="font:400 15px Roboto;flex:1">Your profile</span><span style="font:500 11px Roboto;color:#b3bda8;letter-spacing:.05em">SOON</span></div>
<div style="display:flex;align-items:center;gap:18px;height:52px;padding:0 22px;color:#9aa88f"><span class="ms" style="font-size:23px">chat_bubble</span><span style="font:400 15px Roboto;flex:1">Chat</span><span style="font:500 11px Roboto;color:#b3bda8;letter-spacing:.05em">SOON</span></div>
<div style="display:flex;align-items:center;gap:18px;height:52px;padding:0 22px;color:#9aa88f"><span class="ms" style="font-size:23px">favorite</span><span style="font:400 15px Roboto;flex:1">Wishlist</span><span style="font:500 11px Roboto;color:#b3bda8;letter-spacing:.05em">SOON</span></div>
<div style="display:flex;align-items:center;gap:18px;height:52px;padding:0 22px;color:#9aa88f"><span class="ms" style="font-size:23px">group</span><span style="font:400 15px Roboto;flex:1">Following</span><span style="font:500 11px Roboto;color:#b3bda8;letter-spacing:.05em">SOON</span></div>
</nav>
<div style="display:flex;align-items:center;gap:18px;height:56px;padding:0 22px;color:#1b2416;border-top:1px solid #E4E9DD"><span class="ms" style="font-size:23px;color:#4b5a41">settings</span><span style="font:400 15px Roboto">Settings</span></div>
</div>
</div>
</div>
<figcaption style="margin-top:14px;font:400 13px Roboto;color:#22301b;text-align:center">05 · Side menu</figcaption>
</figure>
<!-- ============ 06 MERCADO ============ -->
<figure data-screen-label="06 Market" style="margin:0;width:360px">
<div style="width:360px;height:740px;border-radius:34px;overflow:hidden;background:#E7F1E0;box-shadow:0 22px 55px -14px rgba(20,45,15,.4);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column">
<div style="height:26px;background:#2E6E28;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#fff;font:500 12px Roboto"><span>9:41</span><span style="display:flex;gap:5px;align-items:center"><span class="ms" style="font-size:15px">network_wifi</span><span class="ms" style="font-size:15px">signal_cellular_alt</span><span class="ms fill" style="font-size:15px">battery_full</span></span></div>
<header style="height:60px;background:#3E8C38;display:flex;align-items:center;gap:4px;padding:0 8px;color:#fff"><span class="ms" style="font-size:24px;color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center">menu</span><span style="flex:1;font:500 20px Roboto;color:#fff;margin-left:6px">Market</span><span class="ms" style="font-size:23px;color:#fff;width:42px;height:42px;display:flex;align-items:center;justify-content:center">near_me</span><span class="ms" style="font-size:23px;color:#fff;width:42px;height:42px;display:flex;align-items:center;justify-content:center">search</span></header>
<div style="flex:1;overflow:hidden">
<div style="padding:12px 14px 6px;display:flex;gap:8px"><div style="display:flex;align-items:center;gap:6px;background:#2f7d34;color:#fff;border-radius:999px;padding:7px 14px;font:500 13px Roboto"><span class="ms" style="font-size:16px">near_me</span>Nearby</div><div style="background:#fff;color:#3d4c33;border:1px solid #C3CBB6;border-radius:999px;padding:7px 14px;font:400 13px Roboto">Exchange</div><div style="background:#fff;color:#3d4c33;border:1px solid #C3CBB6;border-radius:999px;padding:7px 14px;font:400 13px Roboto">Family</div></div>
<div style="padding:8px 14px 0;column-count:2;column-gap:12px">
<div style="break-inside:avoid;margin-bottom:12px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.12)"><div style="height:112px;background:repeating-linear-gradient(45deg,#DCE6D0,#DCE6D0 8px,#D2DDC4 8px,#D2DDC4 16px);display:flex;align-items:center;justify-content:center;color:#6E7566;font:500 10px 'Roboto Mono'">tomate.jpg</div><div style="padding:10px 12px"><div style="font:500 15px Roboto;color:#1b2416">Chestnut Tomato</div><div style="font:italic 400 12px Roboto;color:#5c6b52;margin:1px 0 6px">Solanum lycopersicum</div><div style="display:flex;align-items:center;justify-content:space-between"><span style="display:inline-flex;align-items:center;gap:5px;background:#D3E8C8;color:#2f6d2a;border-radius:999px;padding:3px 9px;font:400 11px Roboto"><span class="ms" style="font-size:14px">swap_horiz</span>Barter</span><span class="sk" style="font-size:20px;color:#2f7d34">b</span></div><div style="display:flex;align-items:center;gap:5px;margin-top:8px;font:400 11px Roboto;color:#5c6b52"><span class="ms" style="font-size:15px;color:#2f7d34">location_on</span>2 km</div></div></div>
<div style="break-inside:avoid;margin-bottom:12px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.12)"><div style="height:84px;background:repeating-linear-gradient(45deg,#DCE6D0,#DCE6D0 8px,#D2DDC4 8px,#D2DDC4 16px);display:flex;align-items:center;justify-content:center;color:#6E7566;font:500 10px 'Roboto Mono'">maíz.jpg</div><div style="padding:10px 12px"><div style="font:500 15px Roboto;color:#1b2416">Golden Bantam Corn</div><div style="font:italic 400 12px Roboto;color:#5c6b52;margin:1px 0 6px">Zea mays</div><div style="display:flex;align-items:center;justify-content:space-between"><span style="font:500 15px Roboto;color:#2f7d34">1.20 €</span><span class="ms" style="font-size:19px;color:#2f7d34">grass</span></div><div style="display:flex;align-items:center;gap:5px;margin-top:8px;font:400 11px Roboto;color:#5c6b52"><span class="ms" style="font-size:15px;color:#2f7d34">location_on</span>5 km</div></div></div>
<div style="break-inside:avoid;margin-bottom:12px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.12)"><div style="height:100px;background:repeating-linear-gradient(45deg,#DCE6D0,#DCE6D0 8px,#D2DDC4 8px,#D2DDC4 16px);display:flex;align-items:center;justify-content:center;color:#6E7566;font:500 10px 'Roboto Mono'">girasol</div><div style="padding:10px 12px"><div style="font:500 15px Roboto;color:#1b2416">Sunflower</div><div style="font:italic 400 12px Roboto;color:#5c6b52;margin:1px 0 6px">Helianthus annuus</div><div style="display:flex;align-items:center;justify-content:space-between"><span style="font:500 15px Roboto;color:#2f7d34">0.40 €</span><span class="sk" style="font-size:20px;color:#2f7d34">a</span></div><div style="display:flex;align-items:center;gap:5px;margin-top:8px;font:400 11px Roboto;color:#5c6b52"><span class="ms" style="font-size:15px;color:#2f7d34">location_on</span>800 m</div></div></div>
<div style="break-inside:avoid;margin-bottom:12px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.12)"><div style="height:120px;background:repeating-linear-gradient(45deg,#DCE6D0,#DCE6D0 8px,#D2DDC4 8px,#D2DDC4 16px);display:flex;align-items:center;justify-content:center;color:#6E7566;font:500 10px 'Roboto Mono'">calabaza</div><div style="padding:10px 12px"><div style="font:500 15px Roboto;color:#1b2416">Squash</div><div style="font:italic 400 12px Roboto;color:#5c6b52;margin:1px 0 6px">Cucurbita maxima</div><div style="display:flex;align-items:center;justify-content:space-between"><span style="display:inline-flex;align-items:center;gap:5px;background:#D3E8C8;color:#2f6d2a;border-radius:999px;padding:3px 9px;font:400 11px Roboto"><span class="ms" style="font-size:14px">swap_horiz</span>Barter</span><span class="sk" style="font-size:20px;color:#2f7d34">i</span></div><div style="display:flex;align-items:center;gap:5px;margin-top:8px;font:400 11px Roboto;color:#5c6b52"><span class="ms" style="font-size:15px;color:#2f7d34">location_on</span>3 km</div></div></div>
</div>
</div>
</div>
<figcaption style="margin-top:14px;font:400 13px Roboto;color:#22301b;text-align:center">06 · Market <span style="color:#7b8a70">(coming soon)</span></figcaption>
</figure>
<!-- ============ 07 DETALLE INTERCAMBIO ============ -->
<figure data-screen-label="07 Exchange" style="margin:0;width:360px">
<div style="width:360px;height:740px;border-radius:34px;overflow:hidden;background:#E7F1E0;box-shadow:0 22px 55px -14px rgba(20,45,15,.4);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column">
<div style="height:26px;background:#2E6E28;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#fff;font:500 12px Roboto"><span>9:41</span><span style="display:flex;gap:5px;align-items:center"><span class="ms" style="font-size:15px">network_wifi</span><span class="ms" style="font-size:15px">signal_cellular_alt</span><span class="ms fill" style="font-size:15px">battery_full</span></span></div>
<header style="height:60px;background:#3E8C38;display:flex;align-items:center;gap:2px;padding:0 6px;color:#fff"><span class="ms" style="font-size:24px;color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center">arrow_back</span><span style="flex:1;font:500 20px Roboto;color:#fff;margin-left:4px">Chestnut Tomato</span><span class="ms" style="font-size:22px;color:#fff;width:42px;height:42px;display:flex;align-items:center;justify-content:center">share</span><span class="ms fill" style="font-size:23px;color:#fff;width:42px;height:42px;display:flex;align-items:center;justify-content:center">favorite</span></header>
<div style="flex:1;overflow:hidden">
<div style="height:210px;position:relative;background:repeating-linear-gradient(45deg,#D6E1C9,#D6E1C9 10px,#CCD8BE 10px,#CCD8BE 20px);display:flex;align-items:center;justify-content:center;color:#6E7566;font:500 12px 'Roboto Mono'">tomate_castañal.jpg<div style="position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px"><span style="width:7px;height:7px;border-radius:50%;background:#2f7d34"></span><span style="width:7px;height:7px;border-radius:50%;background:rgba(47,125,52,.35)"></span><span style="width:7px;height:7px;border-radius:50%;background:rgba(47,125,52,.35)"></span></div><div style="position:absolute;right:14px;bottom:-24px;width:52px;height:52px;border-radius:50%;background:#C9B18f;border:3px solid #E7F1E0;display:flex;align-items:center;justify-content:center;font:400 9px 'Roboto Mono';color:#5b4a30">avatar</div></div>
<div style="padding:18px 18px 0">
<div style="font:500 22px Roboto;color:#1b2416">Chestnut Tomato</div>
<div style="font:italic 400 14px Roboto;color:#5c6b52;margin:2px 0 12px">Solanum lycopersicum · Solanaceae</div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:14px"><span style="display:inline-flex;align-items:center;gap:6px;background:#D3E8C8;color:#2f6d2a;border-radius:999px;padding:5px 12px;font:500 13px Roboto"><span class="ms" style="font-size:16px">swap_horiz</span>Exchange</span><span style="display:inline-flex;align-items:center;gap:5px;font:400 13px Roboto;color:#5c6b52"><span class="ms" style="font-size:17px;color:#2f7d34">location_on</span>2 km</span><span style="display:flex;align-items:center;gap:2px;color:#E8A200"><span class="ms fill" style="font-size:16px">star</span><span style="font:400 13px Roboto;color:#5c6b52">5.0</span></span></div>
<p style="font:400 14px/1.55 Roboto;color:#44483E;margin:0 0 16px">Local seasonal tomato variety. Open-pollinated seeds, 2025 harvest. Looking to trade for legumes or herbs.</p>
<button style="width:100%;border:none;cursor:pointer;background:#2f7d34;color:#fff;border-radius:14px;padding:14px;display:flex;align-items:center;justify-content:center;gap:10px;font:500 15px Roboto;margin-bottom:20px"><span class="ms" style="font-size:20px">chat_bubble</span>Chat with the grower</button>
<div style="font:500 16px Roboto;color:#1b2416;margin-bottom:10px">Similar</div>
<div style="display:flex;gap:10px"><div style="width:104px;height:74px;flex:none;border-radius:12px;background:repeating-linear-gradient(45deg,#DCE6D0,#DCE6D0 7px,#D2DDC4 7px,#D2DDC4 14px)"></div><div style="width:104px;height:74px;flex:none;border-radius:12px;background:repeating-linear-gradient(45deg,#DCE6D0,#DCE6D0 7px,#D2DDC4 7px,#D2DDC4 14px)"></div><div style="width:104px;height:74px;flex:none;border-radius:12px;background:repeating-linear-gradient(45deg,#DCE6D0,#DCE6D0 7px,#D2DDC4 7px,#D2DDC4 14px)"></div></div>
</div>
</div>
</div>
<figcaption style="margin-top:14px;font:400 13px Roboto;color:#22301b;text-align:center">07 · Exchange detail <span style="color:#7b8a70">(coming soon)</span></figcaption>
</figure>
<!-- ============ 08 PERFIL ============ -->
<figure data-screen-label="08 Profile" style="margin:0;width:360px">
<div style="width:360px;height:740px;border-radius:34px;overflow:hidden;background:#E7F1E0;box-shadow:0 22px 55px -14px rgba(20,45,15,.4);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column">
<div style="height:26px;background:#2E6E28;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#fff;font:500 12px Roboto"><span>9:41</span><span style="display:flex;gap:5px;align-items:center"><span class="ms" style="font-size:15px">network_wifi</span><span class="ms" style="font-size:15px">signal_cellular_alt</span><span class="ms fill" style="font-size:15px">battery_full</span></span></div>
<header style="height:60px;background:#3E8C38;display:flex;align-items:center;gap:2px;padding:0 6px;color:#fff"><span class="ms" style="font-size:24px;color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center">arrow_back</span><span style="flex:1;font:500 20px Roboto;color:#fff;margin-left:4px">Your profile</span><span class="ms" style="font-size:22px;color:#fff;width:42px;height:42px;display:flex;align-items:center;justify-content:center">edit</span></header>
<div style="flex:1;overflow:hidden;padding:20px 18px">
<div style="display:flex;align-items:center;gap:16px;margin-bottom:22px">
<div style="width:76px;height:76px;flex:none;border-radius:50%;background:#C9B18f;display:flex;align-items:center;justify-content:center;font:400 10px 'Roboto Mono';color:#5b4a30">avatar</div>
<div><div style="font:500 20px Roboto;color:#1b2416">Orto del Sole</div><div style="font:400 13px Roboto;color:#5c6b52;margin-top:2px">Perugia, Italy</div><div style="display:flex;align-items:center;gap:2px;margin-top:6px;color:#E8A200"><span class="ms fill" style="font-size:16px">star</span><span class="ms fill" style="font-size:16px">star</span><span class="ms fill" style="font-size:16px">star</span><span class="ms fill" style="font-size:16px">star</span><span class="ms fill" style="font-size:16px">star</span><span style="font:400 12px Roboto;color:#5c6b52;margin-left:5px">5.0 · 5 reviews</span></div></div>
</div>
<div style="display:flex;gap:10px;margin-bottom:22px"><div style="flex:1;background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.1)"><div style="font:500 22px Roboto;color:#2f7d34">12</div><div style="font:400 12px Roboto;color:#5c6b52">seeds</div></div><div style="flex:1;background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.1)"><div style="font:500 22px Roboto;color:#2f7d34">34</div><div style="font:400 12px Roboto;color:#5c6b52">exchanges</div></div><div style="flex:1;background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.1)"><div style="font:500 22px Roboto;color:#2f7d34">8</div><div style="font:400 12px Roboto;color:#5c6b52">following</div></div></div>
<div style="height:160px;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(45deg,#D6E1C9,#D6E1C9 12px,#CCD8BE 12px,#CCD8BE 24px);display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:20px"><span style="font:500 11px 'Roboto Mono';color:#6E7566">map · approx. location</span><span class="ms fill" style="position:absolute;font-size:38px;color:#2f7d34">location_on</span></div>
<div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #DBE3D1"><span class="ms" style="font-size:20px;color:#5c6b52">mail</span><span style="font:400 15px Roboto;color:#1b2416">huerta@ejemplo.com</span></div>
<div style="display:flex;align-items:center;gap:12px;padding:12px 0"><span class="ms" style="font-size:20px;color:#5c6b52">verified_user</span><span style="font:400 15px Roboto;color:#1b2416">Verified member since 2024</span></div>
</div>
</div>
<figcaption style="margin-top:14px;font:400 13px Roboto;color:#22301b;text-align:center">08 · Profile <span style="color:#7b8a70">(coming soon)</span></figcaption>
</figure>
<!-- ============ 09 CHAT ============ -->
<figure data-screen-label="09 Chat" style="margin:0;width:360px">
<div style="width:360px;height:740px;border-radius:34px;overflow:hidden;background:#E7F1E0;box-shadow:0 22px 55px -14px rgba(20,45,15,.4);border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column">
<div style="height:26px;background:#2E6E28;display:flex;justify-content:space-between;align-items:center;padding:0 16px;color:#fff;font:500 12px Roboto"><span>9:41</span><span style="display:flex;gap:5px;align-items:center"><span class="ms" style="font-size:15px">network_wifi</span><span class="ms" style="font-size:15px">signal_cellular_alt</span><span class="ms fill" style="font-size:15px">battery_full</span></span></div>
<header style="height:60px;background:#3E8C38;display:flex;align-items:center;gap:8px;padding:0 8px;color:#fff"><span class="ms" style="font-size:24px;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center">arrow_back</span><span style="width:38px;height:38px;flex:none;border-radius:50%;background:#C9B18f;display:flex;align-items:center;justify-content:center;font:400 8px 'Roboto Mono';color:#5b4a30">hort</span><div style="flex:1;min-width:0"><div style="font:500 16px Roboto;color:#fff">Orto del Sole</div><div style="display:flex;align-items:center;gap:5px;font:400 12px Roboto;color:rgba(255,255,255,.85)"><span style="width:7px;height:7px;border-radius:50%;background:#b6f09a"></span>online</div></div><span class="ms" style="font-size:22px;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center">search</span></header>
<div style="flex:1;overflow:hidden;padding:16px 16px;display:flex;flex-direction:column;gap:12px">
<div style="text-align:center;font:400 11px Roboto;color:#8a9080">Apr 4</div>
<div style="display:flex;gap:8px;align-items:flex-end;max-width:82%"><span style="width:28px;height:28px;flex:none;border-radius:50%;background:#C9B18f"></span><div style="background:#fff;border-radius:16px 16px 16px 4px;padding:10px 14px;box-shadow:0 1px 2px rgba(0,0,0,.08)"><div style="font:400 14px/1.4 Roboto;color:#1b2416">Glad you're interested in these tomato seeds!</div><div style="font:400 10px Roboto;color:#9aa08f;text-align:right;margin-top:3px">17:22</div></div></div>
<div style="align-self:flex-end;max-width:82%"><div style="background:#D3E8C8;border-radius:16px 16px 4px 16px;padding:10px 14px"><div style="font:400 14px/1.4 Roboto;color:#173d0e">Can we meet this Saturday at your garden?</div><div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px"><span style="font:400 10px Roboto;color:#3d6b2a">17:24</span><span class="ms" style="font-size:13px;color:#2f7d34">done_all</span></div></div></div>
<div style="display:flex;gap:8px;align-items:flex-end;max-width:82%"><span style="width:28px;height:28px;flex:none;border-radius:50%;background:#C9B18f"></span><div style="background:#fff;border-radius:16px 16px 16px 4px;padding:10px 14px;box-shadow:0 1px 2px rgba(0,0,0,.08)"><div style="font:400 14px/1.4 Roboto;color:#1b2416">Sure! I'll bring a few packets.</div><div style="font:400 10px Roboto;color:#9aa08f;text-align:right;margin-top:3px">17:25</div></div></div>
<div style="display:flex;align-items:center;justify-content:center;gap:5px;margin-top:auto;font:400 11px Roboto;color:#8a9080"><span class="ms" style="font-size:13px">lock</span>End-to-end encrypted conversation</div>
</div>
<div style="padding:10px 12px;display:flex;align-items:center;gap:8px"><div style="flex:1;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:10px 16px;box-shadow:0 1px 3px rgba(0,0,0,.1)"><span class="ms" style="font-size:20px;color:#7b8a70">mood</span><span style="flex:1;font:400 14px Roboto;color:#9aa08f">Write a message</span><span class="ms" style="font-size:20px;color:#7b8a70">attach_file</span></div><div style="width:46px;height:46px;flex:none;border-radius:50%;background:#2f7d34;display:flex;align-items:center;justify-content:center"><span class="ms fill" style="font-size:22px;color:#fff">send</span></div></div>
</div>
<figcaption style="margin-top:14px;font:400 13px Roboto;color:#22301b;text-align:center">09 · Chat <span style="color:#7b8a70">(coming soon)</span></figcaption>
</figure>
<!--SCREENS_END-->
</div>
</div>
</body>
</html>