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>Golden pothos - Care</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Arial, sans-serif; color:#1b1b1b; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff;12  }13  /* Top gradient chrome */14  .status-bar {15    position:absolute; top:0; left:0; right:0; height:118px;16    background:linear-gradient(135deg,#0d7a4e 0%, #1fc277 100%);17    color:#fff; font-weight:600; font-size:36px;18    display:flex; align-items:center; padding:0 40px; letter-spacing:0.5px;19  }20  .status-icons { margin-left:auto; display:flex; gap:22px; align-items:center; }21  .icon-dot { width:18px; height:18px; background:#ffffff; opacity:0.9; border-radius:50%; }22  .icon-rect { width:32px; height:22px; border:3px solid #fff; border-radius:4px; }23  .icon-battery { width:42px; height:22px; border:3px solid #fff; border-radius:4px; position:relative; }24  .icon-battery:after { content:""; position:absolute; right:-6px; top:6px; width:6px; height:10px; background:#fff; border-radius:1px; }25  /* App bar */26  .app-bar {27    position:absolute; top:118px; left:0; right:0; height:170px;28    background:linear-gradient(135deg,#11905a 0%, #27d183 100%);29    display:flex; align-items:center; padding:0 40px; color:#fff;30  }31  .app-title { flex:1; text-align:center; font-size:56px; font-weight:700; letter-spacing:0.2px; }32  .app-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }33  .app-btn svg { width:54px; height:54px; fill:#fff; }34 35  /* Light green info card */36  .info-card {37    position:absolute; top:270px; left:60px; width:960px;38    background:#e6f7d9; border-radius:26px; padding:36px 40px;39    box-shadow:0 6px 16px rgba(0,0,0,0.06);40    color:#176c47;41  }42  .row { display:flex; align-items:center; justify-content:space-between; padding:30px 0; }43  .row + .row { border-top:3px dotted rgba(23,108,71,0.45); }44  .label { font-weight:800; font-size:44px; }45  .value { font-size:44px; color:#1e4b36; }46 47  .divider {48    position:absolute; top:560px; left:0; right:0; height:24px; background:#f1f1f1;49  }50 51  /* Section */52  .section {53    position:absolute; top:630px; left:60px; right:60px;54  }55  .section h2 { font-size:64px; margin:0 0 30px 0; }56 57  .card {58    background:#ffffff; border-radius:34px; padding:44px;59    box-shadow:0 14px 30px rgba(0,0,0,0.08);60  }61  .card-header { display:flex; align-items:center; gap:26px; }62  .circle {63    width:110px; height:110px; border-radius:50%;64    background:linear-gradient(135deg,#dff1ff 0%, #f1f9ff 100%);65    display:flex; align-items:center; justify-content:center;66  }67  .card-title { font-size:52px; font-weight:700; color:#243834; }68  .chev {69    margin-left:auto; width:70px; height:70px; border-radius:50%;70    background:#f0f0f0; display:flex; align-items:center; justify-content:center;71  }72  .tip {73    margin-top:36px; background:#f6e598; color:#2b2b2b; border-radius:26px;74    padding:36px; text-align:center;75  }76  .tip .small { font-size:42px; }77  .tip .big { font-size:54px; font-weight:800; margin-top:8px; }78  .card p {79    margin-top:34px; font-size:42px; line-height:1.55; color:#2e2e2e;80  }81 82  /* Bottom actions */83  .fab {84    position:absolute; left:60px; bottom:230px;85    width:140px; height:140px; border-radius:50%;86    background:#ffd11a; display:flex; align-items:center; justify-content:center;87    box-shadow:0 12px 24px rgba(0,0,0,0.18);88  }89  .add-btn {90    position:absolute; right:60px; left:240px; bottom:230px;91    height:140px; border:none; border-radius:80px;92    background:linear-gradient(135deg,#21cc7a 0%, #14a966 100%);93    color:#fff; font-size:54px; font-weight:800;94    box-shadow:0 14px 28px rgba(27,164,109,0.35);95  }96 97  /* Bottom system bar */98  .nav-bar {99    position:absolute; left:0; right:0; bottom:0; height:120px; background:#000;100  }101  .home-pill {102    position:absolute; left:50%; transform:translateX(-50%);103    bottom:38px; width:250px; height:10px; background:#e6e6e6; border-radius:6px; opacity:0.9;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status bar -->111  <div class="status-bar">112    11:33113    <div class="status-icons">114      <div class="icon-dot"></div>115      <div class="icon-rect"></div>116      <div class="icon-dot" style="width:10px;height:10px; opacity:0.7;"></div>117      <div class="icon-dot" style="width:26px;height:18px; border-radius:4px;"></div>118      <div class="icon-battery"></div>119    </div>120  </div>121 122  <!-- App bar -->123  <div class="app-bar">124    <div class="app-btn" aria-label="Back">125      <svg viewBox="0 0 48 48"><path d="M30 6L12 24l18 18" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>126    </div>127    <div class="app-title">Golden pothos</div>128    <div class="app-btn" aria-label="Close">129      <svg viewBox="0 0 48 48"><path d="M10 10L38 38M38 10L10 38" stroke="#fff" stroke-width="6" stroke-linecap="round"/></svg>130    </div>131  </div>132 133  <!-- Light green info card -->134  <div class="info-card">135    <div class="row">136      <div class="label">Zones</div>137      <div class="value">—</div>138    </div>139    <div class="row">140      <div class="label">Native Area</div>141      <div class="value">Solomon Islands</div>142    </div>143    <div class="row">144      <div class="label">Planting time</div>145      <div class="value">All year around</div>146    </div>147  </div>148 149  <div class="divider"></div>150 151  <!-- Care section -->152  <div class="section">153    <h2>Care</h2>154 155    <div class="card">156      <div class="card-header">157        <div class="circle" aria-hidden="true">158          <!-- Water drop icon -->159          <svg viewBox="0 0 64 64" width="64" height="64">160            <path d="M32 8C22 22 16 30 16 38a16 16 0 1032 0c0-8-6-16-16-30z" fill="#32a4ff"/>161            <circle cx="20" cy="20" r="6" fill="#7cc7ff"/>162          </svg>163        </div>164        <div class="card-title">Water</div>165        <div class="chev">166          <svg viewBox="0 0 24 24" width="34" height="34"><path d="M6 14l6-6 6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>167        </div>168      </div>169 170      <div class="tip">171        <div class="small">Suggested fertilizing frequency</div>172        <div class="big">Every week</div>173      </div>174 175      <p>176        Your pothos plants will most likely tell you when they need watering.177        Water immediately when they start to droop. If you wait too long, their leaves shrivel,178        develop dry, brown edges, or fall off entirely. You can water them every 1–2 weeks,179        allowing the soil to dry out completely in between waterings. Don’t leave them in damp soil,180        or their roots will rot.181      </p>182    </div>183  </div>184 185  <!-- Floating action button -->186  <div class="fab" title="Quick action">187    <svg viewBox="0 0 48 48" width="62" height="62">188      <path d="M24 8c6 8 6 14 0 20-6 6-14 4-14-2s10-6 14-18z" fill="#fff"/>189    </svg>190  </div>191 192  <!-- Add to Collection button -->193  <button class="add-btn">Add to Collection</button>194 195  <!-- System navigation bar -->196  <div class="nav-bar">197    <div class="home-pill"></div>198  </div>199 200</div>201</body>202</html>