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>Plant Care - UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14 15  #render-target {16    position: relative;17    overflow: hidden;18    width: 1080px;19    height: 2400px;20    background: #ffffff;21  }22 23  /* Header */24  .header {25    position: relative;26    width: 100%;27    height: 200px;28    background: #17b284;29    border-bottom-left-radius: 60px;30    border-bottom-right-radius: 60px;31    display: flex;32    align-items: center;33    justify-content: center;34    color: #fff;35  }36  .header .title {37    font-size: 54px;38    font-weight: 700;39    letter-spacing: 0.5px;40  }41  .fav-btn {42    position: absolute;43    right: 36px;44    top: 36px;45    width: 96px;46    height: 96px;47    background: #ffffff;48    border: 4px dashed #ef6f6c;49    border-radius: 50%;50    display: flex;51    align-items: center;52    justify-content: center;53  }54  .fav-btn svg {55    width: 44px;56    height: 44px;57    fill: #ef6f6c;58  }59 60  /* Content */61  .content {62    padding: 40px 60px 0 60px;63  }64  .intro {65    margin-top: 20px;66    font-size: 36px;67    line-height: 1.7;68    color: #3d3d3d;69  }70 71  .section-title {72    margin-top: 60px;73    font-size: 58px;74    font-weight: 800;75    color: #212121;76  }77  .section-sub {78    margin-top: 12px;79    font-size: 34px;80    color: #a7b2c8;81  }82 83  /* Cards row */84  .cards {85    display: flex;86    gap: 36px;87    margin-top: 36px;88    overflow: hidden;89  }90  .card {91    flex: 0 0 300px;92    background: #eeeeef;93    border-radius: 36px;94    padding: 28px;95    box-sizing: border-box;96  }97  .icon-ph {98    width: 120px;99    height: 120px;100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    border-radius: 26px;103    display: flex;104    align-items: center;105    justify-content: center;106    color: #757575;107    font-size: 26px;108    text-align: center;109  }110  .card-title {111    margin-top: 28px;112    font-size: 46px;113    font-weight: 700;114    color: #1d1d1d;115  }116  .card-sub {117    font-size: 32px;118    margin-top: 6px;119    color: #9aa9c8;120  }121 122  /* Popularity */123  .popularity {124    margin-top: 60px;125  }126  .pop-row {127    display: flex;128    align-items: center;129    gap: 16px;130  }131  .pop-row .emoji {132    font-size: 50px;133  }134  .pop-title {135    font-size: 54px;136    font-weight: 800;137    color: #222;138  }139  .pop-text {140    margin-top: 12px;141    font-size: 36px;142    line-height: 1.6;143    color: #3f3f3f;144  }145 146  /* Light meter card */147  .meter {148    margin-top: 52px;149  }150  .meter-title {151    font-size: 56px;152    font-weight: 800;153    color: #1f1f1f;154    margin-bottom: 20px;155  }156  .meter-card {157    background: #eef1f6;158    border-radius: 42px;159    padding: 28px 28px 40px 28px;160  }161  .meter-row {162    display: flex;163    align-items: center;164    gap: 24px;165    padding: 8px 8px 24px 8px;166  }167  .meter-icon {168    width: 120px;169    height: 120px;170    background: #E0E0E0;171    border: 1px solid #BDBDBD;172    border-radius: 26px;173    display: flex;174    align-items: center;175    justify-content: center;176    color: #757575;177    font-size: 26px;178  }179  .meter-text {180    font-size: 36px;181    color: #92a4c2;182  }183  .cta {184    margin-top: 12px;185    background: #16c092;186    color: #ffffff;187    text-align: center;188    font-weight: 700;189    font-size: 42px;190    padding: 34px 24px;191    border-radius: 36px;192  }193 194  /* Bottom area (system bar) */195  .system-bar {196    position: absolute;197    left: 0;198    right: 0;199    bottom: 0;200    height: 120px;201    background: #000000;202  }203  .home-indicator {204    position: absolute;205    left: 50%;206    transform: translateX(-50%);207    bottom: 36px;208    width: 260px;209    height: 12px;210    background: #e5e5e5;211    border-radius: 10px;212    opacity: 0.9;213  }214</style>215</head>216<body>217<div id="render-target">218  <div class="header">219    <div class="title">Get care plan</div>220    <div class="fav-btn" aria-label="favorite">221      <svg viewBox="0 0 24 24">222        <path d="M12 21s-6.7-4.3-9.3-7.9C.8 9.9 2.5 6 6 6c2 0 3.3 1.2 4 2.3C10.7 7.2 12 6 14 6c3.5 0 5.2 3.9 3.3 7.1C18.7 16.7 12 21 12 21z"></path>223      </svg>224    </div>225  </div>226 227  <div class="content">228    <div class="intro">229      There are over 500 different species of violas and they are easy to care for. Most of the violas cultivated in gardens are grown as annuals or short-lived perennials. Many will self-seed and give you years of delight. Violas are primarily cool-season bloomers; they are perfect for starting and ending the season in colder climates and for bridging the seasons in warmer zones, where they can remain in bloom throughout the winter. Viola flowers are edible and make unexpected garnishes and salad ingredients. They can also be candied for a frosted effect or used to decorate cakes or other confections.230    </div>231 232    <div class="section-title">Plant requirements</div>233    <div class="section-sub">The care schedule will be based on these requirements</div>234 235    <div class="cards">236      <div class="card">237        <div class="icon-ph">[IMG: Globe Icon]</div>238        <div class="card-title">North</div>239        <div class="card-sub">Hemisphere</div>240      </div>241      <div class="card">242        <div class="icon-ph">[IMG: Gauge Icon]</div>243        <div class="card-title">Easy</div>244        <div class="card-sub">Difficulty</div>245      </div>246      <div class="card">247        <div class="icon-ph">[IMG: Sleep Plant]</div>248        <div class="card-title">Cold</div>249        <div class="card-sub">Hibernation</div>250      </div>251    </div>252 253    <div class="popularity">254      <div class="pop-row">255        <div class="emoji">🔥💖</div>256        <div class="pop-title">Popularity</div>257      </div>258      <div class="pop-text">259        6,744 people already have this plant<br>260        1,393 people have added this plant to their wishlists261      </div>262    </div>263 264    <div class="meter">265      <div class="meter-title">Light meter</div>266      <div class="meter-card">267        <div class="meter-row">268          <div class="meter-icon">[IMG: Light Icon]</div>269          <div class="meter-text">Measure the amount of light your plant receives.</div>270        </div>271        <div class="cta">Check Up</div>272      </div>273    </div>274  </div>275 276  <div class="system-bar">277    <div class="home-indicator"></div>278  </div>279</div>280</body>281</html>