GD-ML/AndroidCode

1<html lang="en">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, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0e2230; /* deep navy app background */13    color: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 0 36px;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 {33    display: flex;34    align-items: center;35    gap: 18px;36    font-size: 38px;37    opacity: 0.95;38  }39  .status-dots {40    display: flex;41    gap: 14px;42    align-items: center;43  }44  .status-dots span {45    width: 28px;46    height: 28px;47    background: #f5f5f5;48    border-radius: 50%;49    display: inline-block;50  }51  .status-right {52    display: flex;53    align-items: center;54    gap: 26px;55  }56  .icon-wifi, .icon-battery {57    width: 48px; height: 48px;58    display: inline-flex;59    align-items: center; justify-content: center;60  }61  /* Back button */62  .back-btn {63    position: absolute;64    top: 138px;65    left: 64px;66    width: 96px;67    height: 96px;68    background: #28343c;69    border-radius: 50%;70    display: flex;71    align-items: center;72    justify-content: center;73  }74  .back-btn svg { width: 40px; height: 40px; fill: none; stroke: #cfd8dc; stroke-width: 6px; }75 76  /* Header text */77  .header {78    position: absolute;79    top: 210px;80    left: 64px;81    right: 64px;82  }83  .header h1 {84    margin: 0;85    font-size: 68px;86    font-weight: 800;87    line-height: 1.2;88    letter-spacing: -0.5px;89  }90  .header h1 .green { color: #36c36d; }91  .subtext {92    margin-top: 36px;93    font-size: 34px;94    color: #b4c6d3;95    line-height: 1.5;96    max-width: 960px;97  }98  .note {99    margin-top: 16px;100    font-size: 30px;101    color: #89a0af;102  }103 104  /* Image card */105  .image-card {106    position: absolute;107    top: 740px;108    left: 270px;109    width: 540px;110    height: 540px;111    background: #cfd3d6;112    border: 1px solid #bdbdbd;113    border-radius: 48px;114    display: flex;115    align-items: center;116    justify-content: center;117    color: #5f6a72;118    font-size: 30px;119    text-align: center;120  }121  .image-card .close {122    position: absolute;123    top: 22px;124    right: 22px;125    width: 80px;126    height: 80px;127    border-radius: 50%;128    background: #6b7680;129    display: flex;130    align-items: center;131    justify-content: center;132  }133  .image-card .close svg { width: 36px; height: 36px; stroke: #e6edf2; stroke-width: 6px; fill: none; }134 135  /* Plus button */136  .plus-btn {137    position: absolute;138    top: 1320px;139    left: 480px;140    width: 120px;141    height: 120px;142    border-radius: 50%;143    background: linear-gradient(135deg, #8be260, #4fc7c6);144    display: flex;145    align-items: center;146    justify-content: center;147    box-shadow: 0 10px 24px rgba(0,0,0,0.35);148  }149  .plus-btn svg { width: 56px; height: 56px; fill: none; stroke: #0f2933; stroke-width: 8px; }150 151  /* Bottom sheet */152  .sheet {153    position: absolute;154    left: 0;155    bottom: 0;156    width: 1080px;157    height: 980px;158    background: #112a39;159    border-top-left-radius: 36px;160    border-top-right-radius: 36px;161    box-shadow: 0 -12px 40px rgba(0,0,0,0.45);162    padding: 48px 64px;163    box-sizing: border-box;164  }165  .sheet .sheet-title {166    font-size: 56px;167    font-weight: 700;168  }169  .sheet .sheet-close {170    position: absolute;171    right: 40px;172    top: 36px;173    width: 76px;174    height: 76px;175    border-radius: 50%;176    background: #243946;177    display: flex;178    align-items: center;179    justify-content: center;180  }181  .sheet .sheet-close svg { width: 34px; height: 34px; fill: none; stroke: #cfd8dc; stroke-width: 6px; }182  .choose-label {183    margin-top: 42px;184    font-size: 44px;185    color: #c7d6e0;186  }187 188  .options {189    margin-top: 36px;190    display: flex;191    gap: 40px;192  }193  .card {194    width: 440px;195    height: 360px;196    border-radius: 36px;197    padding: 38px;198    box-sizing: border-box;199    position: relative;200  }201  .card.quick {202    background: #4a3e47;203    border: 4px solid #56d1d8;204  }205  .card.normal {206    background: #3f463b;207  }208  .card .icon-box {209    width: 160px; height: 160px;210    border-radius: 28px;211    background: #eabfb7;212    display: flex;213    align-items: center; justify-content: center;214    margin-bottom: 28px;215  }216  .card.quick .icon-box { background: #eabfb7; }217  .card.normal .icon-box { background: #f2d7b8; }218  .card .label {219    font-size: 44px;220    color: #ffffff;221  }222  .icon-hourglass svg, .icon-leaf svg { width: 76px; height: 76px; fill: #1f3440; }223 224  /* Primary button */225  .primary-btn {226    position: absolute;227    left: 64px;228    bottom: 120px;229    width: 952px;230    height: 120px;231    border-radius: 60px;232    background: linear-gradient(90deg, #8be260, #49c7c8);233    display: flex;234    align-items: center;235    justify-content: center;236    font-size: 46px;237    font-weight: 700;238    color: #0f2933;239    letter-spacing: 0.3px;240  }241 242  /* Home indicator */243  .home-indicator {244    position: absolute;245    bottom: 32px;246    left: 50%;247    transform: translateX(-50%);248    width: 480px;249    height: 12px;250    background: #e6e6e6;251    border-radius: 6px;252    opacity: 0.9;253  }254</style>255</head>256<body>257<div id="render-target">258 259  <!-- Status bar -->260  <div class="status-bar">261    <div class="status-left">262      <div>1:36</div>263      <div class="status-dots">264        <span></span><span></span><span></span>265      </div>266      <div style="font-size:34px; opacity:0.9;">ib</div>267      <div style="width:14px;height:14px;background:#ffffff;border-radius:50%;"></div>268    </div>269    <div class="status-right">270      <div class="icon-wifi">271        <svg viewBox="0 0 24 24">272          <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>273          <path d="M5 12c4-4 10-4 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>274          <circle cx="12" cy="16" r="2" fill="#fff"/>275        </svg>276      </div>277      <div class="icon-battery">278        <svg viewBox="0 0 32 24">279          <rect x="1" y="4" width="24" height="16" rx="3" ry="3" stroke="#fff" stroke-width="2" fill="none"/>280          <rect x="4" y="7" width="18" height="10" fill="#fff"/>281          <rect x="26" y="9" width="4" height="6" rx="1" fill="#fff"/>282        </svg>283      </div>284    </div>285  </div>286 287  <!-- Back button -->288  <div class="back-btn">289    <svg viewBox="0 0 24 24">290      <path d="M15 6l-6 6 6 6"/>291    </svg>292  </div>293 294  <!-- Header -->295  <div class="header">296    <h1>Let’s add <span class="green">a plant!</span></h1>297    <div class="subtext">298      Add a picture so we can customize your tips and share it in the community garden:299    </div>300    <div class="note">301      *You can add up to 5 images302    </div>303  </div>304 305  <!-- Image card -->306  <div class="image-card">307    <div>[IMG: Rosemary plant in pot]</div>308    <div class="close">309      <svg viewBox="0 0 24 24">310        <path d="M6 6l12 12M18 6L6 18"/>311      </svg>312    </div>313  </div>314 315  <!-- Plus button -->316  <div class="plus-btn">317    <svg viewBox="0 0 24 24">318      <path d="M12 5v14M5 12h14"/>319    </svg>320  </div>321 322  <!-- Bottom sheet -->323  <div class="sheet">324    <div class="sheet-title">Add plant</div>325    <div class="sheet-close">326      <svg viewBox="0 0 24 24">327        <path d="M6 6l12 12M18 6L6 18"/>328      </svg>329    </div>330    <div class="choose-label">Choose way</div>331 332    <div class="options">333      <!-- Quick add -->334      <div class="card quick">335        <div class="icon-box icon-hourglass">336          <svg viewBox="0 0 24 24">337            <path d="M7 3h10v4c0 2.5-5 4-5 5s5 2.5 5 5v4H7v-4c0-2.5 5-4 5-5s-5-2.5-5-5V3z"/>338          </svg>339        </div>340        <div class="label">Quick add</div>341      </div>342 343      <!-- Normal add -->344      <div class="card normal">345        <div class="icon-box icon-leaf">346          <svg viewBox="0 0 24 24">347            <path d="M6 18c7 0 12-6 12-12 0 0-6 1-9 4s-3 8-3 8z"/>348            <path d="M6 18c3-5 8-8 12-12" stroke="#1f3440" stroke-width="2" fill="none"/>349          </svg>350        </div>351        <div class="label">Normal add</div>352      </div>353    </div>354 355    <div class="primary-btn">Add Plant</div>356  </div>357 358  <!-- Home indicator -->359  <div class="home-indicator"></div>360 361</div>362</body>363</html>