comunes/tane
1
0
Fork 0
Code Issues Pull requests Projects Releases 7 Packages Wiki Activity Actions

feat(ui): Material 3 redesign, cover-photo viewer, About screen

Browse source 
Apply a Material 3 seed-green palette and rounded components across the
home, inventory, quick-add, quantity picker and variety-detail screens.
The full-screen photo viewer can now set any photo as the cover (via
attachment sort order) and delete after confirmation. Lot forms and
packaging surface as choice chips.

Extract About out of Settings into its own screen (app version via
package_info_plus, website link). Add es/en strings for the new lot
types, presentation, home tagline and About. Update Seedees v2 mockups.
This commit is contained in:
vjrj 2026-07-09 11:51:59 +02:00
parent f5c36f2369
commit 42c16c0e3f
24 changed files with 1960 additions and 416 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/mockups/index.html
View file

File diff suppressed because one or more lines are too long

254
docs/mockups/seedees_material3.html Normal file
View file

@ -0,0 +1,254 @@
<!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>Tanemaki — 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="Tanemaki" style="height:52px;width:auto;display:block">
<div>
<div style="font:700 30px Roboto;color:#1a2a13;letter-spacing:-.01em">Tanemaki · 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">Tanemaki</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="Tanemaki" style="height:84px;width:auto;display:block"></div>
<div style="font:500 26px Roboto;color:#1a2a13;letter-spacing:-.01em">Tanemaki</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">Tanemaki</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>

BIN
docs/mockups/seedees_material3_assets/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/mockups/seedees_material3_assets/seedks.ttf Normal file
View file

Binary file not shown.