GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Fresh Produce UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top mint header */17  .header {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 240px;23    background: #d7efe7;24  }25  .status-row {26    display: flex;27    justify-content: space-between;28    align-items: center;29    padding: 28px 48px 0 48px;30    color: #2b2b2b;31    font-size: 34px;32  }33  .status-icons {34    display: flex;35    gap: 24px;36    align-items: center;37  }38  /* Search */39  .search-wrap {40    margin: 28px 40px 0 40px;41    height: 100px;42    background: #ffffff;43    border-radius: 50px;44    border: 1px solid #e6e6e6;45    box-shadow: 0 6px 10px rgba(0,0,0,0.06);46    display: flex;47    align-items: center;48    padding: 0 28px;49    gap: 22px;50  }51  .search-placeholder {52    color: #9e9e9e;53    font-size: 40px;54    letter-spacing: 0.2px;55  }56 57  /* Main content */58  .content {59    position: absolute;60    top: 280px;61    left: 0;62    right: 0;63    padding: 0 60px;64  }65  .section-title {66    font-weight: 800;67    font-size: 48px;68    color: #1c1c1c;69    margin-bottom: 36px;70  }71  .categories {72    display: flex;73    gap: 48px;74  }75  .cat {76    width: 210px;77    text-align: center;78  }79  .cat .circle {80    width: 210px;81    height: 210px;82    border-radius: 50%;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    display: flex;86    justify-content: center;87    align-items: center;88    color: #757575;89    font-size: 28px;90    box-shadow: 0 6px 12px rgba(0,0,0,0.08);91  }92  .cat label {93    display: block;94    margin-top: 22px;95    font-size: 36px;96    color: #222222;97    letter-spacing: 0.3px;98  }99 100  /* CTA button */101  .cta-area {102    position: absolute;103    bottom: 240px;104    left: 0;105    width: 100%;106    display: flex;107    justify-content: center;108  }109  .cta-btn {110    width: 760px;111    height: 120px;112    border-radius: 60px;113    background: #8b6ff5;114    color: #ffffff;115    display: flex;116    align-items: center;117    justify-content: center;118    gap: 22px;119    font-size: 40px;120    font-weight: 800;121    box-shadow: 0 24px 30px rgba(83,66,162,0.28);122  }123 124  /* Bottom banner and nav bar */125  .banner {126    position: absolute;127    bottom: 120px;128    left: 0;129    width: 100%;130    height: 110px;131    background: #4a82e6;132    border-top-left-radius: 32px;133    border-top-right-radius: 32px;134    color: #ffffff;135    display: flex;136    align-items: center;137    justify-content: center;138    font-size: 36px;139    font-weight: 600;140    letter-spacing: 0.3px;141  }142  .banner span {143    font-weight: 900;144  }145  .nav-bar {146    position: absolute;147    bottom: 0;148    left: 0;149    width: 100%;150    height: 120px;151    background: #000000;152    display: flex;153    align-items: center;154    justify-content: center;155  }156  .home-indicator {157    width: 220px;158    height: 12px;159    background: #eaeaea;160    border-radius: 6px;161  }162</style>163</head>164<body>165<div id="render-target">166  <!-- Top header with status and search -->167  <div class="header">168    <div class="status-row">169      <div>11:45</div>170      <div class="status-icons">171        <!-- Simple WiFi icon -->172        <svg width="40" height="28" viewBox="0 0 40 28">173          <path d="M4 6c8-6 24-6 32 0" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"/>174          <path d="M8 12c6-5 18-5 24 0" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"/>175          <path d="M14 18c4-3 8-3 12 0" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"/>176          <circle cx="20" cy="24" r="2.8" fill="#333"/>177        </svg>178        <!-- Battery icon -->179        <svg width="44" height="22" viewBox="0 0 44 22">180          <rect x="1" y="3" width="36" height="16" rx="3" ry="3" stroke="#333" stroke-width="2" fill="none"/>181          <rect x="4" y="6" width="30" height="10" fill="#333"/>182          <rect x="38" y="8" width="5" height="6" rx="1" fill="#333"/>183        </svg>184      </div>185    </div>186    <div class="search-wrap">187      <!-- Back arrow -->188      <svg width="44" height="44" viewBox="0 0 24 24">189        <path d="M14 5l-7 7 7 7" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>190      </svg>191      <div class="search-placeholder">Search for Fresh Produce</div>192    </div>193  </div>194 195  <!-- Content -->196  <div class="content">197    <div class="section-title">Explore by Categories</div>198    <div class="categories">199      <div class="cat">200        <div class="circle">[IMG: Vegetables]</div>201        <label>Vegetables</label>202      </div>203      <div class="cat">204        <div class="circle">[IMG: Fruits]</div>205        <label>Fruits</label>206      </div>207      <div class="cat">208        <div class="circle">[IMG: New Plucks]</div>209        <label>New Plucks</label>210      </div>211      <div class="cat">212        <div class="circle">[IMG: Combos]</div>213        <label>Combos</label>214      </div>215    </div>216  </div>217 218  <!-- CTA Button -->219  <div class="cta-area">220    <div class="cta-btn">221      <svg width="40" height="40" viewBox="0 0 24 24">222        <path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z" fill="#ffffff"/>223      </svg>224      Add Fresh Arrivals225    </div>226  </div>227 228  <!-- Bottom banner -->229  <div class="banner">YAY! You get <span>FREE Delivery</span></div>230 231  <!-- Navigation bar -->232  <div class="nav-bar">233    <div class="home-indicator"></div>234  </div>235</div>236</body>237</html>