GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Travelers palm - Detail</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background:15      radial-gradient(1400px 900px at 20% -10%, #dfe9f5 0%, #eaf1f7 40%, #eef5fb 75%),16      radial-gradient(1200px 700px at 90% 20%, #e6eff9 0%, #f4f7fc 70%);17    color: #1e2b3a;18  }19 20  /* Status bar (mock) */21  .status-bar {22    height: 84px;23    padding: 0 32px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #ffffff;28    mix-blend-mode: normal;29  }30  .status-left { font-weight: 600; letter-spacing: 1px; }31  .status-right { display: flex; gap: 24px; align-items: center; }32  .status-dot { width: 10px; height: 10px; background: #ffffffaa; border-radius: 50%; }33 34  /* Toolbar */35  .toolbar {36    display: flex;37    align-items: center;38    justify-content: space-between;39    padding: 12px 32px 0 32px;40    height: 72px;41  }42  .icon-btn {43    width: 64px;44    height: 64px;45    display: grid;46    place-items: center;47    color: #1f2a44;48  }49  .icon-btn svg { width: 40px; height: 40px; }50 51  /* Title area */52  .title-wrap {53    padding: 8px 40px 0 40px;54  }55  .title {56    font-size: 72px;57    font-weight: 800;58    margin: 12px 0 8px;59    letter-spacing: 0.5px;60    color: #1f2a44;61  }62  .subtitle {63    font-size: 38px;64    color: #6e7f93;65    font-style: italic;66    margin-bottom: 24px;67  }68 69  /* Hero image placeholder */70  .hero-img {71    width: 1000px;72    height: 580px;73    margin: 0 40px;74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    border-radius: 28px;77    display: flex;78    align-items: center;79    justify-content: center;80    color: #757575;81    font-size: 36px;82    text-align: center;83  }84 85  /* Info cards */86  .info-row {87    display: flex;88    gap: 28px;89    padding: 28px 40px 0 40px;90  }91  .info-card {92    flex: 1;93    background: rgba(213, 217, 247, 0.35);94    border-radius: 28px;95    padding: 28px;96    border: 1px solid rgba(180, 185, 220, 0.4);97  }98  .info-card .label {99    font-size: 34px;100    font-weight: 700;101    color: #223049;102    margin-bottom: 8px;103  }104  .info-card .value {105    font-size: 36px;106    color: #6e7f93;107    font-style: italic;108  }109  .info-full {110    margin: 24px 40px 0 40px;111  }112 113  /* Section heading */114  .section-title {115    padding: 40px;116    font-size: 54px;117    font-weight: 800;118    color: #1f2a44;119  }120 121  /* General information grid */122  .gi-grid {123    padding: 0 40px 180px;124    display: grid;125    grid-template-columns: repeat(3, 1fr);126    gap: 40px 24px;127  }128  .gi-item {129    text-align: center;130  }131  .gi-icon {132    width: 140px;133    height: 140px;134    margin: 0 auto 16px;135    background: #E0E0E0;136    border: 1px solid #BDBDBD;137    border-radius: 24px;138    display: flex;139    align-items: center;140    justify-content: center;141    color: #757575;142    font-size: 28px;143  }144  .gi-label {145    font-size: 38px;146    color: #2b3a52;147  }148 149  /* Floating action button */150  .fab {151    position: absolute;152    left: 40px;153    bottom: 190px;154    width: 1000px;155    height: 132px;156    border-radius: 80px;157    background: linear-gradient(90deg, #b88cff 0%, #b9a6ff 100%);158    box-shadow: 0 18px 30px rgba(93, 71, 181, 0.35);159    display: flex;160    align-items: center;161    justify-content: center;162    gap: 18px;163    color: #ffffff;164    font-size: 44px;165    font-weight: 700;166    letter-spacing: 0.3px;167  }168  .fab svg { width: 48px; height: 48px; fill: #fff; }169 170  /* Bottom safe area bar */171  .bottom-bar {172    position: absolute;173    left: 0;174    bottom: 0;175    width: 1080px;176    height: 150px;177    background: #172034;178  }179  .home-indicator {180    position: absolute;181    left: 50%;182    transform: translateX(-50%);183    bottom: 28px;184    width: 240px;185    height: 12px;186    background: #cfd6df;187    border-radius: 12px;188    opacity: 0.75;189  }190</style>191</head>192<body>193<div id="render-target">194  <!-- Status bar mock -->195  <div class="status-bar">196    <div class="status-left">1:41</div>197    <div class="status-right">198      <div class="status-dot"></div>199      <div class="status-dot"></div>200      <div class="status-dot"></div>201      <span style="display:flex;align-items:center;gap:6px;">202        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M3 7h18M6 3h12M4 11h16M5 15h14M6 19h12"/></svg>203        <span>96%</span>204      </span>205    </div>206  </div>207 208  <!-- Toolbar with navigation icons -->209  <div class="toolbar">210    <div class="icon-btn" aria-label="Back">211      <svg viewBox="0 0 24 24" stroke="#1f2a44" stroke-width="2" fill="none">212        <path d="M15 6l-6 6 6 6"/>213      </svg>214    </div>215    <div style="display:flex; gap:20px;">216      <div class="icon-btn" aria-label="Favorite">217        <svg viewBox="0 0 24 24" stroke="#1f2a44" stroke-width="2" fill="none">218          <path d="M12 21s-6-4.35-8.5-7.2C1 11.5 2.5 8 5.7 8c2 0 3.3 1.2 4.3 2.6C11 9.2 12.3 8 14.3 8 17.5 8 19 11.5 16.5 13.8 14 16.65 12 21 12 21z"/>219        </svg>220      </div>221      <div class="icon-btn" aria-label="Share">222        <svg viewBox="0 0 24 24" stroke="#1f2a44" stroke-width="2" fill="none">223          <circle cx="6" cy="12" r="2"></circle>224          <circle cx="18" cy="6" r="2"></circle>225          <circle cx="18" cy="18" r="2"></circle>226          <path d="M8 12l8-6M8 12l8 6"></path>227        </svg>228      </div>229    </div>230  </div>231 232  <!-- Title -->233  <div class="title-wrap">234    <div class="title">Travelers palm</div>235    <div class="subtitle">Ravenala madagascariensis</div>236  </div>237 238  <!-- Image Placeholder -->239  <div class="hero-img">[IMG: Travelers palm photo]</div>240 241  <!-- Info cards -->242  <div class="info-row">243    <div class="info-card">244      <div class="label">Category:</div>245      <div class="value">Trees</div>246    </div>247    <div class="info-card">248      <div class="label">Family:</div>249      <div class="value">Strelitziaceae</div>250    </div>251  </div>252 253  <div class="info-card info-full">254    <div class="label">Common Names:</div>255    <div class="value">Madagascar tree, EastWest palm, Travelers tree, Travelers palm, Palmiste</div>256  </div>257 258  <!-- General Information -->259  <div class="section-title">General Information</div>260  <div class="gi-grid">261    <div class="gi-item">262      <div class="gi-icon">[IMG: Sun]</div>263      <div class="gi-label">Full Sun</div>264    </div>265    <div class="gi-item">266      <div class="gi-icon">[IMG: Hand Planting]</div>267      <div class="gi-label">Easy</div>268    </div>269    <div class="gi-item">270      <div class="gi-icon">[IMG: Evergreen Tree]</div>271      <div class="gi-label">Evergreen</div>272    </div>273    <div class="gi-item">274      <div class="gi-icon">[IMG: Tall Plant]</div>275      <div class="gi-label">Tall</div>276    </div>277    <div class="gi-item">278      <div class="gi-icon">[IMG: Cat + Check]</div>279      <div class="gi-label">Pet Safe</div>280    </div>281    <div class="gi-item">282      <div class="gi-icon">[IMG: Flower]</div>283      <div class="gi-label">Flowering</div>284    </div>285  </div>286 287  <!-- Floating Add Plant button -->288  <div class="fab">289    <span>Add Plant</span>290    <svg viewBox="0 0 24 24">291      <path d="M5 18h14v2H5z"></path>292      <path d="M12 6c-2 0-3.5 1.5-3.5 3.5S10 13 12 13s3.5-1.5 3.5-3.5S14 6 12 6zm-6 5h3m9 0h3" fill="none" stroke="#fff" stroke-width="2"></path>293      <path d="M8 16h8v-2c0-1.1-1.3-2-2.8-2H10.8C9.3 12 8 12.9 8 14v2z"></path>294    </svg>295  </div>296 297  <!-- Bottom bar / home indicator -->298  <div class="bottom-bar"></div>299  <div class="home-indicator"></div>300</div>301</body>302</html>