GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Plant Editor UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#0b2631; color:#eaf6fb;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute; left:0; top:0; width:100%; height:110px; padding:0 36px;16    display:flex; align-items:center; justify-content:space-between;17    color:#ffffff;18  }19  .status-left{display:flex; align-items:center; gap:16px; font-size:38px; opacity:0.95;}20  .dots{display:flex; gap:12px;}21  .dot{width:16px; height:16px; background:#d7f1ff; border-radius:50%;}22  .square{width:22px; height:22px; background:#d7f1ff; border-radius:4px;}23 24  .icons{display:flex; align-items:center; gap:22px;}25  .icon{width:44px; height:44px; opacity:0.9;}26  .battery{width:64px; height:28px; border:3px solid #eaf6fb; border-radius:6px; position:relative;}27  .battery:after{content:""; position:absolute; right:-10px; top:6px; width:8px; height:14px; background:#eaf6fb; border-radius:2px;}28  .battery .level{position:absolute; left:3px; top:3px; bottom:3px; width:36px; background:#eaf6fb; border-radius:2px;}29 30  /* Back button */31  .back-btn{32    position:absolute; left:60px; top:140px; width:110px; height:110px; border-radius:55px;33    background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center;34  }35  .back-btn svg{width:40px; height:40px; fill:#eaf6fb;}36 37  /* Update button */38  .update-btn{39    position:absolute; right:52px; top:132px; width:360px; height:126px;40    background:linear-gradient(90deg, #7ae06a, #63c6c5);41    border-radius:70px; box-shadow:0 10px 18px rgba(0,0,0,0.25);42    display:flex; align-items:center; justify-content:center;43    font-size:52px; font-weight:700; color:#ffffff;44  }45 46  /* Main content */47  .content{ position:absolute; top:320px; left:0; width:100%; }48  .image-card{49    width:560px; height:560px; margin:0 auto; border-radius:40px;50    background:#133743; display:flex; align-items:center; justify-content:center; position:relative;51  }52  .image-placeholder{53    width:480px; height:480px; background:#E0E0E0; border:1px solid #BDBDBD;54    display:flex; align-items:center; justify-content:center; color:#757575; border-radius:16px;55    text-align:center; padding:12px; font-size:34px;56  }57  .close-mini{58    position:absolute; right:24px; top:24px; width:70px; height:70px; border-radius:35px;59    background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center;60    color:#fff; font-size:38px;61  }62 63  .plus-circle{64    width:120px; height:120px; border-radius:60px; background:linear-gradient(135deg,#7ae06a,#63c6c5);65    margin:34px auto 14px; position:relative;66  }67  .plus-circle:before, .plus-circle:after{68    content:""; position:absolute; background:#ffffff; left:50%; top:50%; transform:translate(-50%,-50%);69  }70  .plus-circle:before{width:60px; height:12px; border-radius:6px;}71  .plus-circle:after{width:12px; height:60px; border-radius:6px;}72  .hint{ text-align:center; color:#a9c7d1; font-size:38px; margin-bottom:28px; }73 74  .section{ padding:0 56px; margin-top:36px; }75  .label{ font-size:42px; color:#a9c7d1; margin:36px 6px 16px; }76  .field{77    height:120px; background:#0f2f3a; border-radius:28px; display:flex; align-items:center; justify-content:space-between;78    padding:0 36px; font-size:48px; color:#ffffff;79  }80  .field .value{ opacity:1; }81  .field .chev{ width:40px; height:40px; margin-left:18px; opacity:0.8; }82 83  .row-between{ display:flex; align-items:center; justify-content:space-between; padding:0 56px; margin-top:56px; }84  .date-pill{85    background:#2a5461; color:#d5eef5; border-radius:24px; padding:22px 30px; font-size:44px;86  }87 88  /* Home indicator */89  .home-indicator{90    position:absolute; left:50%; transform:translateX(-50%);91    bottom:38px; width:480px; height:14px; background:#dfe7ea; border-radius:8px; opacity:0.7;92  }93</style>94</head>95<body>96<div id="render-target">97  <!-- Status Bar -->98  <div class="status-bar">99    <div class="status-left">100      <div>1:40</div>101      <div class="dots">102        <div class="dot"></div>103        <div class="square"></div>104        <div class="dot"></div>105        <div class="dot"></div>106      </div>107    </div>108    <div class="icons">109      <!-- Wifi icon -->110      <svg class="icon" viewBox="0 0 24 24">111        <path fill="#eaf6fb" d="M12 20c-.8 0-1.5-.7-1.5-1.5S11.2 17 12 17s1.5.7 1.5 1.5S12.8 20 12 20zm6-5l-1.4-1.4a7 7 0 0 0-9.2 0L6 15a9 9 0 0 1 12 0zm3-3l-1.5-1.5a12 12 0 0 0-16.9 0L1 12a14 14 0 0 1 20 0z"/>112      </svg>113      <div class="battery"><div class="level"></div></div>114    </div>115  </div>116 117  <!-- Back button -->118  <div class="back-btn">119    <svg viewBox="0 0 24 24">120      <path d="M15.5 19.5L8 12l7.5-7.5 1.4 1.4L10.8 12l6.1 6.1-1.4 1.4z"/>121    </svg>122  </div>123 124  <!-- Update button -->125  <div class="update-btn">Update</div>126 127  <!-- Content -->128  <div class="content">129    <div class="image-card">130      <div class="image-placeholder">[IMG: Rosemary plant in black pot]</div>131      <div class="close-mini">✕</div>132    </div>133 134    <div class="plus-circle"></div>135    <div class="hint">You can upload a pic later!</div>136 137    <div class="section">138      <div class="label">Plant nickname</div>139      <div class="field"><div class="value">Ceecee</div></div>140 141      <div class="label">Scientific name</div>142      <div class="field"><div class="value">Salvia rosmarinus</div></div>143    </div>144 145    <div class="row-between">146      <div class="label" style="margin:0; font-size:46px;">Last watered:</div>147      <div class="date-pill">23 Nov 2023</div>148    </div>149 150    <div class="section">151      <div class="label">Watering schedule</div>152      <div class="field">153        <div class="value">Every 7 days</div>154        <svg class="chev" viewBox="0 0 24 24">155          <path fill="#cde5ed" d="M9 6l6 6-6 6z"/>156        </svg>157      </div>158 159      <div class="label">Pot size</div>160      <div class="field">161        <div class="value">Small (3–6 in)</div>162        <svg class="chev" viewBox="0 0 24 24">163          <path fill="#cde5ed" d="M9 6l6 6-6 6z"/>164        </svg>165      </div>166    </div>167  </div>168 169  <div class="home-indicator"></div>170</div>171</body>172</html>