GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Cuban Oregano - UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8  :root{9    --bg: #E9F5EF;10    --card: #FFFFFF;11    --mint: #E7F3EE;12    --mint-strong: #DCEFE8;13    --primary: #6CAE8A;14    --primary-dark: #2F6B5A;15    --text: #2E5F53;16    --muted: #79958A;17    --shadow: 0 12px 26px rgba(0,0,0,0.12);18    --shadow-soft: 0 6px 18px rgba(0,0,0,0.12);19    --radius-xl: 40px;20    --radius-lg: 28px;21    --radius-md: 22px;22    --radius-sm: 16px;23  }24  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); }25  #render-target{26    position: relative;27    overflow: hidden;28    width: 1080px;29    height: 2400px;30    background: linear-gradient(180deg, #f7fbf9 0%, var(--bg) 14%, var(--bg) 100%);31  }32 33  /* Status bar */34  .status-bar{35    position:absolute; top:0; left:0; width:100%; height:96px; color:#fff;36    display:flex; align-items:center; justify-content:space-between;37    padding: 0 40px;38    z-index:5;39    pointer-events:none;40  }41  .status-bar .time{ font-weight:600; font-size:38px; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }42  .status-icons{ display:flex; gap:26px; align-items:center; }43  .status-dot{ width:18px; height:18px; border-radius:50%; background:#fff; opacity:0.9; }44  .status-indicator{45    width:40px; height:24px; border-radius:10px; border:3px solid #fff; position:relative;46  }47  .status-indicator::after{ content:""; position:absolute; right:-10px; top:50%; transform:translateY(-50%); width:6px; height:12px; background:#fff; border-radius:2px; }48 49  /* Hero image */50  .hero{51    position:absolute; left:0; top:0; width:100%; height:480px;52  }53  .hero .img{54    position:absolute; left:0; top:0; width:100%; height:100%;55    background:#E0E0E0; border-bottom:1px solid #BDBDBD;56    display:flex; align-items:flex-end; justify-content:center; color:#757575; font-weight:600; font-size:36px;57  }58  .hero .gradient{59    position:absolute; inset:0;60    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.18) 18%, rgba(0,0,0,0.0) 52%);61    pointer-events:none;62  }63  /* Back button */64  .back-btn{65    position:absolute; top:120px; left:32px; width:88px; height:88px; border-radius:44px;66    background:rgba(255,255,255,0.9); box-shadow: var(--shadow-soft);67    display:flex; align-items:center; justify-content:center;68    z-index:6;69  }70  .back-btn svg{ width:38px; height:38px; fill:none; stroke:#2F6B5A; stroke-width:6; }71 72  /* Main white card */73  .main-card{74    position:absolute; left:36px; top:380px; width:1008px;75    background:var(--card); border-radius: var(--radius-xl);76    box-shadow: 0 18px 36px rgba(0,0,0,0.15);77    padding: 48px 44px 56px 44px;78  }79  .title{80    font-size:64px; font-weight:800; letter-spacing:0.5px; color: var(--text); margin-bottom:34px;81  }82  .info-row{ display:flex; align-items:flex-start; gap:36px; margin-bottom:32px; }83  .label{ width:380px; font-size:36px; color: var(--muted); }84  .value{ flex:1; font-size:36px; color: var(--text); font-weight:700; line-height:1.35; }85  .value.box{86    background: var(--mint);87    padding:28px; border-radius: 28px; font-weight:700;88  }89 90  /* Add button */91  .cta{92    position:absolute; left:80px; top:780px; width:920px; height:120px;93    background: var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;94    border-radius: 60px; box-shadow: var(--shadow);95    font-size:42px; font-weight:800; letter-spacing:0.4px;96  }97 98  /* Feature tiles */99  .features{100    position:absolute; left:36px; top:950px; width:1008px;101    display:flex; gap:40px;102  }103  .tile{104    width:304px; height:300px; background:#fff; border-radius:32px; box-shadow: var(--shadow-soft);105    padding: 28px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;106  }107  .tile svg{ width:90px; height:90px; stroke: var(--primary); fill:none; stroke-width:6; margin-top:6px; }108  .tile .t-title{ margin-top:20px; font-size:40px; font-weight:800; color: var(--text); }109  .chip{110    margin-top:18px; background: var(--mint); color: var(--muted); font-weight:700;111    padding:18px 26px; border-radius: 18px; font-size:30px; width: 90%; text-align:center;112  }113 114  /* Light meter pill */115  .light-meter{116    position:absolute; left:36px; top:1290px; width:1008px; height:110px;117    background:#fff; border-radius:60px; box-shadow: var(--shadow-soft);118    display:flex; align-items:center; justify-content:center; color: var(--muted); font-weight:800; font-size:40px;119  }120 121  /* Attribute list */122  .attributes{123    position:absolute; left:36px; top:1450px; width:1008px; padding: 0 6px;124  }125  .attr-row{ display:flex; gap:36px; padding:28px 26px; align-items:center; }126  .attr-row .a-label{ width:380px; font-size:36px; color: var(--muted); }127  .attr-row .a-value{ flex:1; background: var(--mint-strong); border-radius: 24px; padding:26px; font-size:36px; font-weight:800; color: var(--text); }128 129  /* Decorative slanted background fold near left side to mimic screenshot */130  .fold{131    position:absolute; left:-140px; top:560px; width:800px; height:380px; background:rgba(255,255,255,0.5);132    transform: rotate(-14deg); border-radius:80px;133    filter: blur(1px);134  }135 136  /* Image placeholder generic style (requirement) */137  .img-label{138    color:#757575; display:flex; align-items:center; justify-content:center; text-align:center;139  }140  .img-border{ border:1px solid #BDBDBD; }141</style>142</head>143<body>144<div id="render-target">145  <div class="hero">146    <div class="img img-border img-label">[IMG: Cuban Oregano plant in wicker pot]</div>147    <div class="gradient"></div>148  </div>149 150  <div class="status-bar">151    <div class="time">2:25</div>152    <div class="status-icons">153      <div class="status-dot"></div>154      <div class="status-dot"></div>155      <div class="status-dot"></div>156      <div class="status-indicator"></div>157    </div>158  </div>159 160  <div class="back-btn">161    <svg viewBox="0 0 24 24">162      <path d="M15 5 L8 12 L15 19"/>163    </svg>164  </div>165 166  <div class="main-card">167    <div class="title">Cuban Oregano</div>168 169    <div class="info-row">170      <div class="label">Botanical name:</div>171      <div class="value box">Coleus amboinicus,<br>Plectranthus amboinicus</div>172    </div>173 174    <div class="info-row" style="margin-bottom:6px;">175      <div class="label">Common name:</div>176      <div class="value">Mother of Herbs,<br>Mexican Mint,<br>Spanish Thyme,<br>Cuban Oregano</div>177    </div>178  </div>179 180  <div class="cta">Add to My garden</div>181 182  <div class="features">183    <!-- Care -->184    <div class="tile">185      <svg viewBox="0 0 100 100">186        <!-- fork -->187        <path d="M22 18 V52 M14 18 V28 M30 18 V28" />188        <path d="M18 28 H26 V52" />189        <!-- trowel -->190        <path d="M62 20 L78 36 L66 48 L50 32 Z" />191        <path d="M50 32 L40 42 V70" />192      </svg>193      <div class="t-title">Care</div>194      <div class="chip">Easy</div>195    </div>196 197    <!-- Water -->198    <div class="tile">199      <svg viewBox="0 0 100 100">200        <!-- can body -->201        <path d="M20 60 H58 V40 H40" />202        <path d="M58 40 L76 30" />203        <!-- drop -->204        <path d="M80 48 C88 40 88 36 80 30" />205        <!-- sprout -->206        <path d="M35 60 V80" />207        <path d="M35 66 C26 62 26 52 35 50" />208        <path d="M35 68 C44 64 44 54 35 52" />209      </svg>210      <div class="t-title">Water</div>211      <div class="chip">Every 3-7 days</div>212    </div>213 214    <!-- Sun -->215    <div class="tile">216      <svg viewBox="0 0 100 100">217        <circle cx="50" cy="50" r="16" />218        <path d="M50 18 V6 M50 94 V82 M82 50 H94 M6 50 H18 M72 28 L82 18 M18 82 L28 72 M28 28 L18 18 M82 82 L72 72"/>219      </svg>220      <div class="t-title">Sun</div>221      <div class="chip">Part sun</div>222    </div>223  </div>224 225  <div class="light-meter">Light meter</div>226 227  <div class="attributes">228    <div class="attr-row">229      <div class="a-label">Plant type:</div>230      <div class="a-value">Semi-succulent perennial</div>231    </div>232    <div class="attr-row">233      <div class="a-label">Mature size:</div>234      <div class="a-value">Up to 3.3 ft tall and a spread of 2.3 ft</div>235    </div>236    <div class="attr-row">237      <div class="a-label">Sun exposure:</div>238      <div class="a-value">Partial sun</div>239    </div>240    <div class="attr-row">241      <div class="a-label">Soil type:</div>242      <div class="a-value">Loamy, sandy</div>243    </div>244  </div>245 246  <div class="fold"></div>247</div>248</body>249</html>