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: "Inter", Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f2b35; /* deep teal */13    color: #eaf5f5;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    padding: 0 40px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #fff;29    font-weight: 600;30    letter-spacing: 0.5px;31  }32  .status-left { display: flex; align-items: center; gap: 24px; }33  .status-time { font-size: 40px; }34  .status-dots { display: flex; gap: 16px; }35  .dot {36    width: 34px; height: 34px; background: #e9f1f1; border-radius: 50%;37  }38  .status-right { display: flex; align-items: center; gap: 24px; }39  .icon-circle { width: 44px; height: 44px; border-radius: 50%; background: #e9f1f1; }40 41  /* Back button */42  .back-wrap {43    position: absolute;44    top: 140px;45    left: 48px;46    width: 108px; height: 108px;47    border-radius: 54px;48    background: #14373f;49    display: flex; align-items: center; justify-content: center;50  }51  .back-wrap svg { width: 52px; height: 52px; stroke: #cfe6e3; stroke-width: 8; fill: none; }52 53  /* Headline */54  .content {55    position: absolute;56    top: 240px;57    left: 48px;58    right: 48px;59  }60  .title {61    font-size: 86px;62    font-weight: 800;63    line-height: 1.15;64    margin-bottom: 22px;65  }66  .title .accent { color: #2ecc71; }67  .subtitle {68    font-size: 38px;69    color: #c9d9d7;70    line-height: 1.5;71    margin-bottom: 12px;72  }73  .note {74    font-size: 28px;75    color: #8fb1ac;76    margin-top: 8px;77  }78 79  /* Image container */80  .image-card {81    width: 520px;82    height: 520px;83    border-radius: 56px;84    background: #ffffff;85    margin: 56px auto 24px auto;86    position: relative;87    box-shadow: 0 10px 24px rgba(0,0,0,0.35);88    display: flex; align-items: center; justify-content: center;89  }90  .image-card .img-placeholder {91    width: 86%;92    height: 86%;93    background: #E0E0E0;94    border: 1px solid #BDBDBD;95    display: flex; align-items: center; justify-content: center;96    color: #757575;97    font-size: 34px;98    text-align: center;99    border-radius: 12px;100  }101  .close-chip {102    position: absolute;103    top: 24px;104    right: 24px;105    width: 86px; height: 86px;106    border-radius: 50%;107    background: #e6eef0;108    display: flex; align-items: center; justify-content: center;109    box-shadow: 0 6px 14px rgba(0,0,0,0.25);110  }111  .close-chip svg { width: 40px; height: 40px; fill: none; stroke: #495a5a; stroke-width: 8; }112 113  /* Plus button */114  .plus-btn {115    width: 110px; height: 110px;116    border-radius: 55px;117    margin: 24px auto 36px auto;118    background: linear-gradient(135deg, #44c56b, #5cc0a8);119    display: flex; align-items: center; justify-content: center;120    box-shadow: 0 8px 18px rgba(0,0,0,0.35);121  }122  .plus-btn svg { width: 52px; height: 52px; stroke: #fff; stroke-width: 8; fill: none; }123 124  /* Input field */125  .input {126    width: 984px;127    height: 126px;128    border-radius: 64px;129    margin: 12px auto;130    background: #0e3440;131    border: 2px solid rgba(255,255,255,0.08);132    display: flex; align-items: center;133    padding: 0 40px;134    box-sizing: border-box;135    font-size: 44px; color: #eaf5f5;136  }137 138  /* Randomize button */139  .randomize {140    width: 640px;141    height: 120px;142    margin: 46px auto 0 auto;143    border-radius: 60px;144    background: #2e8f5a;145    background: linear-gradient(135deg, #2e8f5a, #3db870);146    color: #eaf5f5;147    font-size: 46px; font-weight: 700;148    display: flex; align-items: center; justify-content: center;149    gap: 26px;150    box-shadow: 0 10px 20px rgba(0,0,0,0.35);151  }152  .dice {153    width: 46px; height: 46px;154    background: #ffd2c8;155    border-radius: 10px;156    position: relative;157  }158  .dice::before, .dice::after {159    content: "";160    position: absolute;161    width: 10px; height: 10px; background: #b0564d; border-radius: 50%;162  }163  .dice::before { top: 10px; left: 10px; }164  .dice::after { bottom: 10px; right: 10px; }165 166  .helper {167    text-align: center;168    margin-top: 32px;169    color: #a8c3bf;170    font-size: 34px;171  }172  .helper .or { display: block; margin: 10px 0; }173  .plant-name-link {174    color: #2ecc71;175    font-weight: 700;176    font-size: 38px;177  }178 179  /* Primary button */180  .primary {181    position: absolute;182    left: 48px;183    right: 48px;184    bottom: 220px;185    height: 140px;186    border-radius: 80px;187    background: linear-gradient(90deg, #9de360, #5bc2df);188    color: #09302e;189    font-size: 54px; font-weight: 800;190    display: flex; align-items: center; justify-content: center;191    box-shadow: 0 14px 26px rgba(0,0,0,0.35);192  }193 194  /* Bottom gesture bar */195  .gesture {196    position: absolute;197    bottom: 90px;198    left: 50%;199    transform: translateX(-50%);200    width: 280px;201    height: 16px;202    background: #dbe6e5;203    border-radius: 8px;204    opacity: 0.8;205  }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Status Bar -->212  <div class="status-bar">213    <div class="status-left">214      <div class="status-time">1:36</div>215      <div class="status-dots">216        <div class="dot"></div>217        <div class="dot"></div>218        <div class="dot"></div>219      </div>220    </div>221    <div class="status-right">222      <!-- WiFi icon -->223      <svg width="54" height="54" viewBox="0 0 54 54">224        <path d="M7 20c9-7 31-7 40 0" stroke="#e9f1f1" stroke-width="4" fill="none" />225        <path d="M13 27c6-5 22-5 28 0" stroke="#e9f1f1" stroke-width="4" fill="none" />226        <path d="M20 34c4-3 10-3 14 0" stroke="#e9f1f1" stroke-width="4" fill="none" />227        <circle cx="27" cy="40" r="3.5" fill="#e9f1f1"></circle>228      </svg>229      <!-- Battery icon -->230      <svg width="64" height="54" viewBox="0 0 64 54">231        <rect x="6" y="12" width="44" height="30" rx="6" stroke="#e9f1f1" stroke-width="4" fill="none"></rect>232        <rect x="10" y="16" width="32" height="22" rx="4" fill="#e9f1f1"></rect>233        <rect x="52" y="20" width="6" height="14" rx="2" fill="#e9f1f1"></rect>234      </svg>235    </div>236  </div>237 238  <!-- Back Button -->239  <div class="back-wrap">240    <svg viewBox="0 0 24 24">241      <path d="M15 5l-8 7 8 7" />242    </svg>243  </div>244 245  <!-- Main Content -->246  <div class="content">247    <div class="title">Let’s add <span class="accent">a plant!</span></div>248    <div class="subtitle">Add a picture so we can customize your tips<br>and share it in the community garden:</div>249    <div class="note">*You can add up to 5 images</div>250 251    <div class="image-card">252      <div class="img-placeholder">[IMG: Rosemary plant in black pot]</div>253      <div class="close-chip">254        <svg viewBox="0 0 24 24">255          <path d="M5 5l14 14M19 5L5 19"></path>256        </svg>257      </div>258    </div>259 260    <div class="plus-btn">261      <svg viewBox="0 0 24 24">262        <path d="M12 5v14M5 12h14"></path>263      </svg>264    </div>265 266    <div class="input">Rosemary</div>267 268    <div class="randomize">269      <span>Randomize</span>270      <div class="dice"></div>271    </div>272 273    <div class="helper">274      You can change name later! 275      <span class="or">or</span>276      <span class="plant-name-link">Use the Plant Name</span>277    </div>278  </div>279 280  <div class="primary">Add Plant</div>281 282  <div class="gesture"></div>283</div>284</body>285</html>