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>Planting & Care</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #222;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Generic spacing */24  .page {25    position: absolute;26    inset: 0;27    overflow: hidden;28  }29  .content {30    position: absolute;31    left: 60px;32    right: 60px;33    top: 60px;34    bottom: 140px; /* leave room for home indicator */35    overflow-y: auto;36    -webkit-overflow-scrolling: touch;37  }38 39  /* Top card with button (cropped in screenshot) */40  .top-card {41    width: 960px;42    background: #F1F4F7;43    border-radius: 36px;44    padding: 28px 32px 40px;45    box-sizing: border-box;46    margin-bottom: 36px;47  }48  .check-button {49    margin-top: 24px;50    background: #10C7A6;51    color: #FFF;52    text-align: center;53    font-weight: 700;54    font-size: 44px;55    padding: 32px 24px;56    border-radius: 44px;57  }58 59  /* Heading */60  h1 {61    font-size: 70px;62    line-height: 1.2;63    margin: 24px 0 24px;64    font-weight: 800;65    letter-spacing: -0.5px;66  }67 68  /* Segmented control */69  .segment {70    width: 960px;71    height: 120px;72    background: #E7F6F2;73    border-radius: 60px;74    position: relative;75    display: flex;76    align-items: stretch;77    overflow: hidden;78    margin: 8px 0 36px;79  }80  .segment .tab {81    flex: 1;82    display: flex;83    align-items: center;84    justify-content: center;85    font-size: 42px;86    font-weight: 700;87    color: #26A18E;88  }89  .segment .tab.selected {90    background: #10C7A6;91    color: #FFFFFF;92  }93  .segment .tab:first-child.selected {94    border-top-left-radius: 60px;95    border-bottom-left-radius: 60px;96  }97  .segment .tab:last-child.selected {98    border-top-right-radius: 60px;99    border-bottom-right-radius: 60px;100  }101 102  /* Care sections */103  .care-item {104    display: flex;105    align-items: flex-start;106    gap: 28px;107    margin: 36px 0 18px;108  }109  .icon {110    width: 84px;111    height: 84px;112    border-radius: 22px;113    display: flex;114    align-items: center;115    justify-content: center;116    flex: 0 0 84px;117  }118  .icon.water { background: #E6F8FB; }119  .icon.soil { background: #EAF6EA; }120  .icon.fertilizer { background: #EAF6EE; }121  .icon.mulch { background: #EEF5F0; }122 123  .care-title {124    font-size: 44px;125    font-weight: 800;126    margin: 0 0 8px;127  }128  .care-text {129    font-size: 34px;130    line-height: 50px;131    color: #343434;132    margin: 0;133  }134 135  /* Bottom area to mimic system bar */136  .system-bar {137    position: absolute;138    left: 0;139    right: 0;140    bottom: 0;141    height: 120px;142    background: #000000;143    display: flex;144    align-items: center;145    justify-content: center;146  }147  .home-indicator {148    width: 240px;149    height: 10px;150    background: #FFFFFF;151    opacity: 0.9;152    border-radius: 6px;153  }154 155  /* Image placeholder style (if needed elsewhere) */156  .img-ph {157    background: #E0E0E0;158    border: 1px solid #BDBDBD;159    color: #757575;160    display: flex;161    align-items: center;162    justify-content: center;163  }164 165  /* Thin scrollbar for better look in rendering engines */166  .content::-webkit-scrollbar { width: 8px; }167  .content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 6px; }168</style>169</head>170<body>171<div id="render-target">172  <div class="page">173    <div class="content">174      <!-- Cropped top card with big "Check Up" button -->175      <div class="top-card">176        <div class="check-button">Check Up</div>177      </div>178 179      <h1>Planting &amp; Care</h1>180 181      <!-- Segmented tab -->182      <div class="segment">183        <div class="tab">Indoor</div>184        <div class="tab selected">Outdoor</div>185      </div>186 187      <!-- Water -->188      <div class="care-item">189        <div class="icon water" aria-hidden="true">190          <!-- Simple water droplets -->191          <svg width="54" height="54" viewBox="0 0 54 54">192            <circle cx="18" cy="22" r="10" fill="#61C7DF"></circle>193            <circle cx="34" cy="30" r="8" fill="#7DD9EA"></circle>194            <circle cx="28" cy="14" r="6" fill="#93E4F2"></circle>195          </svg>196        </div>197        <div>198          <div class="care-title">Water</div>199          <p class="care-text">200            Water Wild Pansy deeply and regularly, especially during hot, dry periods. Provide 1 inch (2.5 cm) of water per week during the growing season. Reduce watering in winter to prevent root rot. Adjust watering according to weather conditions and the plant's moisture requirements.201          </p>202        </div>203      </div>204 205      <!-- Soil -->206      <div class="care-item">207        <div class="icon soil" aria-hidden="true">208          <!-- Simple sprout/soil -->209          <svg width="54" height="54" viewBox="0 0 54 54">210            <rect x="6" y="34" width="42" height="10" rx="4" fill="#CFA07A"></rect>211            <path d="M27 34c0-8 6-12 12-12-2 6-6 8-12 8z" fill="#78C899"></path>212            <path d="M27 34c0-8-6-12-12-12 2 6 6 8 12 8z" fill="#88D1A3"></path>213            <rect x="25" y="26" width="4" height="8" fill="#5E8E6F"></rect>214          </svg>215        </div>216        <div>217          <div class="care-title">Soil</div>218          <p class="care-text">219            Wild Pansy thrives in well-drained soil. Use a sandy loam or clay loam with a pH of 6–7. Amend heavy clay or sandy soils with organic matter to improve drainage and fertility.220          </p>221        </div>222      </div>223 224      <!-- Fertilizer -->225      <div class="care-item">226        <div class="icon fertilizer" aria-hidden="true">227          <!-- Simple bag icon -->228          <svg width="54" height="54" viewBox="0 0 54 54">229            <rect x="10" y="12" width="34" height="30" rx="6" fill="#76D39E"></rect>230            <rect x="14" y="16" width="26" height="8" rx="4" fill="#5BC18A"></rect>231            <circle cx="27" cy="32" r="7" fill="#F4C27A"></circle>232          </svg>233        </div>234        <div>235          <div class="care-title">Fertilizer</div>236          <p class="care-text">237            Feed Wild Pansy in early spring with a balanced slow-release fertilizer. Use a formula with equal amounts of nitrogen, phosphorus and potassium. Repeat every 6–8 weeks during the growing season. Avoid over‑fertilizing to prevent excessive growth and weak branches.238          </p>239        </div>240      </div>241 242      <!-- Mulching -->243      <div class="care-item" style="margin-bottom: 120px;">244        <div class="icon mulch" aria-hidden="true">245          <!-- Simple mulch/grass -->246          <svg width="54" height="54" viewBox="0 0 54 54">247            <rect x="8" y="36" width="38" height="8" rx="3" fill="#8D7B6B"></rect>248            <path d="M14 36l4-8 4 8M26 36l4-8 4 8M34 36l3-6 3 6" stroke="#6CC49B" stroke-width="3" fill="none" stroke-linecap="round"></path>249          </svg>250        </div>251        <div>252          <div class="care-title">Mulching</div>253          <p class="care-text">254            Apply a 2–3 inch (5–7.5 cm) layer of organic mulch, such as wood chips or straw, around the base of the plant. Mulching helps conserve moisture, suppress weeds, and regulate soil temperature. Avoid piling mulch against the stem to prevent rot.255          </p>256        </div>257      </div>258    </div>259 260    <!-- System home indicator -->261    <div class="system-bar">262      <div class="home-indicator"></div>263    </div>264  </div>265</div>266</body>267</html>