GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Plant Identification UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Top photo */16  .top-photo {17    position: absolute;18    left: 0;19    top: 0;20    width: 1080px;21    height: 980px;22    background: #E0E0E0;23    border-bottom: 1px solid #BDBDBD;24    display: flex;25    align-items: flex-end;26    justify-content: flex-start;27    color: #555;28  }29  .top-photo span {30    padding: 12px 16px;31    margin: 16px;32    background: rgba(255,255,255,0.65);33    border: 1px solid #BDBDBD;34    border-radius: 6px;35    font-size: 26px;36  }37  .top-gradient {38    position: absolute;39    left: 0; top: 0; right: 0; height: 160px;40    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);41  }42 43  /* Status bar */44  .statusbar {45    position: absolute;46    top: 24px;47    left: 24px;48    right: 24px;49    height: 44px;50    display: flex;51    align-items: center;52    justify-content: space-between;53    color: #fff;54    font-size: 30px;55    letter-spacing: 0.5px;56  }57  .status-left {58    display: flex;59    align-items: center;60    gap: 16px;61  }62  .status-right {63    display: flex;64    align-items: center;65    gap: 18px;66  }67  .icon {68    width: 28px;69    height: 28px;70  }71 72  /* Floating buttons */73  .circle-btn {74    position: absolute;75    top: 120px;76    width: 92px;77    height: 92px;78    border-radius: 46px;79    background: rgba(0,0,0,0.35);80    display: flex;81    align-items: center;82    justify-content: center;83    backdrop-filter: blur(2px);84  }85  .circle-btn svg { width: 44px; height: 44px; }86  .btn-back { left: 40px; }87  .btn-close { right: 40px; }88 89  /* Content sections */90  .content {91    position: absolute;92    top: 980px;93    left: 0;94    right: 0;95    bottom: 0;96    padding: 32px;97    overflow-y: auto;98  }99 100  .card {101    background: #ffffff;102    border-radius: 8px;103    box-shadow: 0 1px 0 rgba(0,0,0,0.06);104    padding: 24px;105    margin-bottom: 36px;106    border-top: 1px solid #f1f1f1;107  }108  .title {109    font-size: 56px;110    font-weight: 600;111    color: #222222;112    margin-bottom: 18px;113    line-height: 1.2;114  }115  .subtitle {116    font-size: 34px;117    color: #6d6d6d;118    line-height: 1.45;119    margin-bottom: 20px;120  }121  .botanical {122    font-size: 34px;123    color: #6d6d6d;124    margin-bottom: 16px;125  }126  .species {127    font-size: 42px;128    color: #1b1b1b;129    font-weight: 600;130    margin-bottom: 20px;131  }132  .thumbs {133    display: flex;134    gap: 24px;135    padding: 8px 0 8px;136  }137  .thumb {138    width: 234px;139    height: 220px;140    background: #E0E0E0;141    border: 1px solid #BDBDBD;142    display: flex;143    align-items: center;144    justify-content: center;145    color: #757575;146    font-size: 26px;147    border-radius: 6px;148  }149 150  /* Home indicator */151  .home-indicator {152    position: absolute;153    bottom: 28px;154    left: 50%;155    transform: translateX(-50%);156    width: 420px;157    height: 14px;158    background: #000000;159    opacity: 0.12;160    border-radius: 7px;161  }162</style>163</head>164<body>165<div id="render-target">166 167  <div class="top-photo">168    <span>[IMG: Potted schefflera plant photo]</span>169    <div class="top-gradient"></div>170  </div>171 172  <div class="statusbar">173    <div class="status-left">174      <div>9:26</div>175      <!-- Cloud icon -->176      <svg class="icon" viewBox="0 0 24 24">177        <path fill="#ffffff" d="M9 18h6a5 5 0 0 0 0-10c-.7-3-3-5-6-5a6 6 0 0 0-6 6 5 5 0 0 0 6 9z"/>178      </svg>179    </div>180    <div class="status-right">181      <!-- WiFi icon -->182      <svg class="icon" viewBox="0 0 24 24">183        <path fill="#ffffff" d="M12 18.5l1.6 1.6-1.6 1.6-1.6-1.6z"/>184        <path fill="#ffffff" d="M2.5 10.5a13 13 0 0 1 19 0l-1.6 1.6a10.6 10.6 0 0 0-15.8 0z"/>185        <path fill="#ffffff" d="M5.3 13.3a9 9 0 0 1 13.4 0l-1.6 1.6a7 7 0 0 0-10.2 0z"/>186        <path fill="#ffffff" d="M8.1 16.1a5 5 0 0 1 7.8 0l-1.6 1.6a3 3 0 0 0-4.6 0z"/>187      </svg>188      <!-- Small lock icon -->189      <svg class="icon" viewBox="0 0 24 24">190        <path fill="#ffffff" d="M12 3a4 4 0 0 0-4 4v3H6v11h12V10h-2V7a4 4 0 0 0-4-4zm-2 7V7a2 2 0 0 1 4 0v3z"/>191      </svg>192    </div>193  </div>194 195  <!-- Back button -->196  <div class="circle-btn btn-back">197    <svg viewBox="0 0 24 24">198      <path fill="#ffffff" d="M15.5 19l-7-7 7-7 1.5 1.5-5.5 5.5 5.5 5.5z"/>199    </svg>200  </div>201 202  <!-- Close button -->203  <div class="circle-btn btn-close">204    <svg viewBox="0 0 24 24">205      <path fill="#ffffff" d="M18.3 5.7L12 12l6.3 6.3-1.3 1.3L10.7 13.3 4.4 19.6 3.1 18.3 9.4 12 3.1 5.7 4.4 4.4l6.3 6.3 6.3-6.3z"/>206    </svg>207  </div>208 209  <div class="content">210    <!-- Card 1 -->211    <div class="card">212      <div class="title">Dwarf umbrella-tree</div>213      <div class="subtitle">Also known as شفلرا, Hawaiian-elf, Miniature schefflera, Parasol-plant, Dwarf scheffler...</div>214      <div class="botanical">Botanical name</div>215      <div class="species">Schefflera arboricola</div>216      <div class="thumbs">217        <div class="thumb">[IMG: Leaf close-up]</div>218        <div class="thumb">[IMG: Young plant]</div>219        <div class="thumb">[IMG: Potted plant]</div>220        <div class="thumb">[IMG: Foliage cluster]</div>221      </div>222    </div>223 224    <!-- Card 2 -->225    <div class="card">226      <div class="title">Umbrella tree</div>227      <div class="subtitle">Also known as Australian cabbagetree, Australian umbrella-tree, Queensland umbrella...</div>228      <div class="botanical">Botanical name</div>229      <div class="species">Schefflera actinophylla</div>230      <div class="thumbs">231        <div class="thumb">[IMG: Indoor umbrella tree]</div>232        <div class="thumb">[IMG: Patio plant]</div>233        <div class="thumb">[IMG: Large leaves]</div>234        <div class="thumb">[IMG: Silvery foliage]</div>235      </div>236    </div>237 238    <!-- Card 3 (partially visible in screenshot) -->239    <div class="card">240      <div class="title">Schefflera abyssinica</div>241      <div class="subtitle">Related species and cultivars</div>242      <div class="thumbs">243        <div class="thumb">[IMG: Species photo]</div>244        <div class="thumb">[IMG: Species photo]</div>245        <div class="thumb">[IMG: Species photo]</div>246        <div class="thumb">[IMG: Species photo]</div>247      </div>248    </div>249  </div>250 251  <div class="home-indicator"></div>252 253</div>254</body>255</html>