GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Add Plant UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #0E2430; /* deep dark teal */13    color: #DDE7EA;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 24px;20    left: 40px;21    right: 40px;22    height: 72px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #ffffff;27    font-weight: 600;28    font-size: 34px;29    opacity: 0.95;30  }31  .status-icons {32    display: flex;33    gap: 28px;34    align-items: center;35  }36  .dot {37    width: 26px;38    height: 26px;39    background: #ffffff;40    border-radius: 50%;41    opacity: 0.9;42  }43  .signal {44    width: 30px; height: 30px; border-radius: 4px; background:#ffffff;45  }46  .battery {47    width: 24px; height: 36px; border: 3px solid #fff; border-radius: 4px; position: relative;48  }49  .battery:after {50    content: ""; position: absolute; top:-6px; left:8px; width:8px; height:6px; background:#fff; border-radius:2px;51  }52 53  /* Back button */54  .back-btn {55    position: absolute;56    top: 110px;57    left: 60px;58    width: 96px;59    height: 96px;60    background: #183846;61    border-radius: 50%;62    display:flex; align-items:center; justify-content:center;63  }64  .back-btn svg { width: 42px; height: 42px; fill:#9EC3B1; }65 66  /* Title and description */67  .title {68    position: absolute;69    top: 200px;70    left: 60px;71    right: 60px;72    line-height: 1.2;73    font-weight: 800;74    font-size: 76px;75    color: #DDE7EA;76  }77  .title .accent { color: #2DC26E; }78  .subtitle {79    position: absolute;80    top: 380px;81    left: 60px;82    right: 60px;83    font-size: 36px;84    color: #A8B9C1;85    line-height: 1.45;86  }87  .footnote {88    position: absolute;89    top: 520px;90    left: 60px;91    right: 60px;92    font-size: 30px;93    color: #8FA3AA;94  }95 96  /* Image placeholder card */97  .image-card {98    position: absolute;99    top: 680px;100    left: 240px;101    width: 600px;102    height: 600px;103    background: #E0E0E0;104    border: 1px solid #BDBDBD;105    border-radius: 48px;106    display:flex; align-items:center; justify-content:center;107    color:#757575; font-size: 32px; font-weight: 600;108  }109  .img-close {110    position: absolute;111    top: 708px;112    left: 780px;113    width: 88px;114    height: 88px;115    background: #8FA3AA;116    border-radius: 50%;117    display:flex; align-items:center; justify-content:center;118  }119  .img-close svg { width: 40px; height: 40px; fill:#0E2430; opacity:0.9; }120 121  /* Floating add button */122  .add-circle {123    position: absolute;124    top: 1320px;125    left: 460px;126    width: 160px;127    height: 160px;128    border-radius: 50%;129    background: radial-gradient(circle at 30% 30%, #58D391, #2B7B5B);130    display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 28px rgba(0,0,0,0.35);131  }132  .add-circle svg { width: 80px; height: 80px; fill:#EAF7EF; }133 134  /* Bottom sheet */135  .sheet {136    position: absolute;137    left: 0;138    right: 0;139    bottom: 0;140    height: 980px;141    background: #0F2C38;142    border-top-left-radius: 64px;143    border-top-right-radius: 64px;144    box-shadow: 0 -18px 40px rgba(0,0,0,0.45);145  }146  .sheet-header {147    position: absolute;148    top: 40px;149    left: 60px;150    right: 120px;151    font-size: 56px;152    font-weight: 800;153    color:#DDE7EA;154  }155  .sheet-close {156    position: absolute;157    top: 40px;158    right: 40px;159    width: 80px; height: 80px; border-radius: 50%; background:#173945;160    display:flex; align-items:center; justify-content:center;161  }162  .sheet-close svg { width: 34px; height: 34px; fill:#9EC3B1; }163 164  .choose-label {165    position: absolute;166    top: 160px;167    left: 80px;168    font-size: 48px;169    font-weight: 700;170    color:#DDE7EA;171  }172 173  .cards {174    position: absolute;175    top: 240px;176    left: 60px;177    right: 60px;178    display: flex;179    gap: 40px;180  }181  .card {182    flex: 1;183    height: 420px;184    border-radius: 40px;185    padding: 60px 50px;186    display:flex;187    flex-direction: column;188    align-items: flex-start;189    justify-content: flex-start;190    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);191  }192  .card.purple { background:#433843; }193  .card.olive { background:#464C3B; }194  .card-icon {195    width: 160px; height: 160px; border-radius: 32px; background:#F2D1C2;196    display:flex; align-items:center; justify-content:center;197    box-shadow: 0 6px 12px rgba(0,0,0,0.25);198  }199  .card.olive .card-icon { background:#F0D9BD; }200  .card-title {201    margin-top: 40px;202    font-size: 54px;203    font-weight: 700;204    color: #FFFFFF;205  }206 207  .primary-btn {208    position: absolute;209    left: 60px;210    right: 60px;211    bottom: 60px;212    height: 120px;213    border-radius: 32px;214    background:#203D48;215    display:flex; align-items:center; justify-content:center;216    color:#FFFFFF; font-size: 48px; font-weight: 800;217    letter-spacing: 0.5px;218  }219</style>220</head>221<body>222<div id="render-target">223 224  <div class="status-bar">225    <div>1:35</div>226    <div class="status-icons">227      <div class="dot"></div>228      <div class="dot"></div>229      <div class="dot"></div>230      <div class="signal"></div>231      <div class="battery"></div>232    </div>233  </div>234 235  <div class="back-btn">236    <svg viewBox="0 0 24 24">237      <path d="M15.5 4l-9 8 9 8v-4.5L9.7 12 15.5 8.5V4z"></path>238    </svg>239  </div>240 241  <div class="title">242    Let’s add <span class="accent">a plant!</span>243  </div>244 245  <div class="subtitle">246    Add a picture so we can customize your tips and<br>247    share it in the community garden:248  </div>249  <div class="footnote">*You can add up to 5 images</div>250 251  <div class="image-card">[IMG: Plant in pot]</div>252  <div class="img-close">253    <svg viewBox="0 0 24 24">254      <path d="M18 6L6 18M6 6l12 12" stroke="#0E2430" stroke-width="2" fill="none" stroke-linecap="round"></path>255    </svg>256  </div>257 258  <div class="add-circle">259    <svg viewBox="0 0 24 24">260      <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"></path>261    </svg>262  </div>263 264  <!-- Bottom sheet -->265  <div class="sheet">266    <div class="sheet-header">Add plant</div>267    <div class="sheet-close">268      <svg viewBox="0 0 24 24">269        <path d="M18 6L6 18M6 6l12 12" stroke="#9EC3B1" stroke-width="2" fill="none" stroke-linecap="round"></path>270      </svg>271    </div>272 273    <div class="choose-label">Choose way</div>274 275    <div class="cards">276      <div class="card purple">277        <div class="card-icon">278          <svg viewBox="0 0 24 24">279            <path d="M8 3h8v4l-3 4 3 4v4H8v-4l3-4-3-4V3z" fill="#274751"></path>280          </svg>281        </div>282        <div class="card-title">Quick add</div>283      </div>284      <div class="card olive">285        <div class="card-icon">286          <svg viewBox="0 0 24 24">287            <path d="M12 21c-2.5-4-2.5-7.5 0-11 2.5 3.5 2.5 7 0 11z" fill="#274751"></path>288            <path d="M12 13c-3.5-1-5.5-3.2-6-6 3 .5 5.2 2.5 6 6z" fill="#274751"></path>289            <path d="M12 13c3.5-1 5.5-3.2 6-6-3 .5-5.2 2.5-6 6z" fill="#274751"></path>290            <rect x="11" y="4" width="2" height="6" fill="#274751"></rect>291            <rect x="11" y="13" width="2" height="8" fill="#274751"></rect>292            <circle cx="15.5" cy="8" r="2" fill="#274751"></circle>293          </svg>294        </div>295        <div class="card-title">Normal add</div>296      </div>297    </div>298 299    <div class="primary-btn">Add Plant</div>300  </div>301</div>302</body>303</html>