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 Identification UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: system-ui, -apple-system, Roboto, Arial, sans-serif;16    color: #212121;17  }18 19  /* Top green bars */20  .top-area { background: #4CAF50; }21  .status-bar {22    height: 90px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 32px;27    color: #fff;28    font-weight: 600;29  }30  .status-left { display: flex; align-items: center; gap: 18px; }31  .status-right { display: flex; align-items: center; gap: 22px; }32  .dot { width: 10px; height: 10px; background: rgba(255,255,255,0.8); border-radius: 50%; display: inline-block; }33 34  .app-bar {35    height: 160px;36    display: flex;37    align-items: center;38    padding: 0 28px;39    position: relative;40  }41  .menu-btn, .crown {42    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;43  }44  .segmented {45    position: absolute;46    left: 50%;47    transform: translateX(-50%);48    top: 40px;49    width: 600px;50    height: 88px;51    border-radius: 44px;52    border: 4px solid #ffffff;53    overflow: hidden;54    display: flex;55    box-shadow: 0 2px 0 rgba(255,255,255,0.6) inset;56  }57  .seg-btn {58    flex: 1;59    display: flex; align-items: center; justify-content: center;60    font-size: 40px;61    font-weight: 600;62    color: #e8f5e9;63    background: rgba(255,255,255,0.1);64  }65  .seg-btn.active {66    background: #ffffff;67    color: #2d7c3b;68    box-shadow: 0 3px 10px rgba(0,0,0,0.08);69  }70 71  /* List */72  .list {73    background: #fff;74    box-shadow: 0 -2px 0 rgba(0,0,0,0.06) inset;75  }76  .item {77    display: flex;78    gap: 28px;79    padding: 28px;80    border-bottom: 1px solid #eee;81  }82  .thumb {83    width: 300px; height: 190px;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    display: flex; align-items: center; justify-content: center;87    color: #757575; font-size: 28px; text-align: center;88  }89  .item-content { flex: 1; position: relative; }90  .title {91    font-size: 54px; font-weight: 700; margin-top: 8px; margin-bottom: 10px; color: #212121;92  }93  .subtitle { font-size: 36px; color: #616161; line-height: 1.3; }94  .time {95    position: absolute; right: 18px; bottom: 10px;96    font-size: 32px; color: #9E9E9E;97  }98 99  /* Floating camera button */100  .fab {101    position: absolute;102    right: 48px;103    bottom: 360px;104    width: 120px; height: 120px;105    background: #4CAF50;106    border-radius: 60px;107    box-shadow: 0 8px 18px rgba(0,0,0,0.25);108    display: flex; align-items: center; justify-content: center;109  }110 111  /* Bottom ad tray */112  .ad-tray {113    position: absolute;114    left: 0; right: 0; bottom: 110px;115    height: 230px;116    padding: 16px 24px;117    background: #ffffff;118    border-top: 1px solid #E0E0E0;119    box-shadow: 0 -6px 18px rgba(0,0,0,0.08);120    display: flex; align-items: center;121    gap: 18px;122  }123  .ad-scroll {124    display: flex; gap: 18px; overflow: hidden; flex: 1;125  }126  .ad-item {127    width: 220px; height: 180px;128    border: 1px solid #D6D6D6; border-radius: 8px;129    overflow: hidden; background: #fff;130    position: relative;131  }132  .ad-img {133    width: 100%; height: 100%;134    background: #E0E0E0; border-top: 1px solid #BDBDBD;135    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;136  }137  .tag {138    position: absolute; top: 8px; left: 8px;139    background: #ff5252; color: #fff; font-weight: 700;140    padding: 6px 12px; border-radius: 8px; font-size: 26px;141    border: 2px solid #ffffff;142  }143  .ad-actions {144    display: flex; align-items: center; gap: 16px; margin-left: 12px;145  }146  .action {147    width: 48px; height: 48px; border-radius: 24px;148    display: flex; align-items: center; justify-content: center;149    color: #41a3ff; border: 2px solid #41a3ff; font-weight: 700;150  }151  .brand {152    margin-left: 10px; font-size: 28px; color: #000; font-weight: 700;153  }154 155  /* Home indicator */156  .home-indicator {157    position: absolute; left: 50%; transform: translateX(-50%);158    bottom: 30px; width: 220px; height: 12px; background: rgba(0,0,0,0.2); border-radius: 8px;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status and App bar -->166  <div class="top-area">167    <div class="status-bar">168      <div class="status-left">169        <div style="font-size:38px;">2:25</div>170        <span style="font-size:28px; opacity:0.85;">ib</span>171        <span style="font-size:30px;">N</span>172        <span style="font-size:30px;">M</span>173        <span style="font-size:30px;">M</span>174        <span class="dot"></span>175      </div>176      <div class="status-right">177        <!-- Wifi icon -->178        <svg width="36" height="36" viewBox="0 0 24 24" fill="none">179          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>180          <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>181          <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>182          <circle cx="12" cy="17.5" r="1.5" fill="#fff"/>183        </svg>184        <!-- Battery icon -->185        <svg width="36" height="36" viewBox="0 0 26 26" fill="none">186          <rect x="2" y="7" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/>187          <rect x="4" y="9" width="12" height="8" rx="1" fill="#fff"/>188          <rect x="20.5" y="10" width="3" height="6" rx="1" fill="#fff"/>189        </svg>190      </div>191    </div>192 193    <div class="app-bar">194      <div class="menu-btn">195        <!-- Hamburger -->196        <svg width="52" height="52" viewBox="0 0 24 24">197          <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>198        </svg>199      </div>200 201      <div class="segmented">202        <div class="seg-btn active">Plant</div>203        <div class="seg-btn">Disease</div>204      </div>205 206      <div class="crown" style="margin-left:auto;">207        <!-- Simple crown icon -->208        <svg width="52" height="52" viewBox="0 0 24 24">209          <path d="M3 17l2-7 5 4 4-6 5 9" stroke="#FFD54F" stroke-width="2" fill="none" stroke-linejoin="round"/>210          <rect x="3" y="17" width="18" height="3" fill="#FFD54F"/>211        </svg>212      </div>213    </div>214  </div>215 216  <!-- List content -->217  <div class="list">218    <div class="item">219      <div class="thumb">[IMG: Coleus leaves photo]</div>220      <div class="item-content">221        <div class="title">Coleus amboinicus</div>222        <div class="subtitle">Indian Borage, Mexican mint, Cuban oregano, Soup Mint</div>223        <div class="time">4 minutes ago</div>224      </div>225    </div>226    <div class="item">227      <div class="thumb">[IMG: Coleus leaves photo]</div>228      <div class="item-content">229        <div class="title">Coleus amboinicus</div>230        <div class="subtitle">Indian Borage, Mexican mint, Cuban oregano, Soup Mint</div>231        <div class="time">5 minutes ago</div>232      </div>233    </div>234  </div>235 236  <!-- Floating camera button -->237  <div class="fab">238    <!-- Camera icon -->239    <svg width="56" height="56" viewBox="0 0 24 24">240      <path d="M4 7h4l2-2h4l2 2h4v12H4V7z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>241      <circle cx="12" cy="13" r="4" fill="none" stroke="#fff" stroke-width="2"/>242    </svg>243  </div>244 245  <!-- Bottom ad tray -->246  <div class="ad-tray">247    <div class="ad-scroll">248      <div class="ad-item">249        <div class="tag">-60%</div>250        <div class="ad-img">[IMG: Shoe Product]</div>251      </div>252      <div class="ad-item">253        <div class="tag">-25%</div>254        <div class="ad-img">[IMG: Shoe Product]</div>255      </div>256      <div class="ad-item">257        <div class="ad-img">[IMG: Shoe Product]</div>258      </div>259      <div class="ad-item">260        <div class="ad-img">[IMG: Shoe Product]</div>261      </div>262      <div class="ad-item">263        <div class="tag">-70%</div>264        <div class="ad-img">[IMG: Shoe Product]</div>265      </div>266    </div>267    <div class="ad-actions">268      <div class="action">×</div>269      <div class="action">i</div>270      <div class="brand">NYKAA FASHION</div>271    </div>272  </div>273 274  <!-- Home indicator -->275  <div class="home-indicator"></div>276</div>277</body>278</html>