GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Chocolate Cake Search 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: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    background: #3f3f3f;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 40px;27    box-sizing: border-box;28    font-size: 36px;29    letter-spacing: 0.5px;30  }31  .status-bar .right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 4; }38 39  /* Search bar */40  .search-bar {41    height: 160px;42    background: #ffffff;43    display: flex;44    align-items: center;45    padding: 0 40px;46    box-sizing: border-box;47    border-bottom: 1px solid #eee;48  }49  .search-icon svg { width: 60px; height: 60px; stroke: #b0b0b0; stroke-width: 6; fill: none; }50  .search-text {51    margin-left: 24px;52    font-size: 54px;53    color: #9b9b9b;54    font-weight: 600;55  }56 57  /* Filter strip */58  .filter-strip {59    height: 90px;60    background: #000000;61    color: #fff;62    display: flex;63    align-items: center;64    padding: 0 40px;65    box-sizing: border-box;66    font-size: 30px;67  }68  .filter-left {69    display: flex;70    align-items: center;71    gap: 24px;72    color: #bdbdbd;73    font-weight: 600;74  }75  .filter-left .orange { color: #ff8a00; font-weight: 700; }76  .filter-right {77    margin-left: auto;78    display: flex;79    align-items: center;80    gap: 18px;81    font-weight: 700;82  }83  .lock-icon svg { width: 36px; height: 36px; stroke: #ffffff; stroke-width: 4; fill: none; }84 85  /* Hero card */86  .hero-card {87    position: relative;88    width: 1080px;89    height: 900px;90  }91  .img-placeholder {92    width: 100%;93    height: 100%;94    background: #E0E0E0;95    border: 1px solid #BDBDBD;96    display: flex;97    justify-content: center;98    align-items: center;99    color: #757575;100    font-size: 34px;101    text-align: center;102  }103  .hero-overlay {104    position: absolute;105    left: 0; right: 0; bottom: 0;106    padding: 40px;107    box-sizing: border-box;108    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.3), rgba(0,0,0,0));109    color: #fff;110  }111  .hero-title {112    font-size: 72px;113    font-weight: 800;114    letter-spacing: 0.5px;115    margin-bottom: 18px;116  }117  .hero-sub {118    font-size: 30px;119    color: #cfcfcf;120    letter-spacing: 1px;121    font-weight: 700;122    margin-bottom: 26px;123  }124  .save-row {125    display: flex;126    align-items: center;127    gap: 16px;128    font-size: 30px;129    color: #ffffff;130    font-weight: 700;131  }132  .bookmark-icon svg { width: 34px; height: 34px; fill: none; stroke: #ffffff; stroke-width: 4; }133  .fab {134    position: absolute;135    right: 40px;136    bottom: 120px;137    width: 92px;138    height: 92px;139    border-radius: 50%;140    background: #58b7b0;141    display: flex;142    align-items: center;143    justify-content: center;144    box-shadow: 0 6px 12px rgba(0,0,0,0.25);145  }146  .fab svg { width: 44px; height: 44px; stroke: #ffffff; stroke-width: 6; fill: none; }147 148  /* Secondary image */149  .secondary-img {150    width: 1080px;151    height: 900px;152    position: relative;153  }154  .secondary-img .img-placeholder {155    font-size: 32px;156  }157 158  /* Bottom navigation */159  .bottom-nav {160    position: absolute;161    bottom: 80px;162    left: 0;163    width: 1080px;164    height: 180px;165    background: #ffffff;166    border-top: 1px solid #e6e6e6;167    display: flex;168    align-items: center;169    justify-content: space-around;170    box-sizing: border-box;171    padding: 0 40px;172  }173  .nav-icon svg {174    width: 72px; height: 72px;175    fill: none; stroke: #333; stroke-width: 6;176  }177  .nav-icon.search svg { stroke: #2bb6a6; }178  /* Gesture bar */179  .gesture {180    position: absolute;181    bottom: 24px;182    left: 50%;183    transform: translateX(-50%);184    width: 320px;185    height: 14px;186    background: #bdbdbd;187    border-radius: 8px;188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Status bar -->195  <div class="status-bar">196    <div>8:36</div>197    <div class="right">198      <div class="status-icon">199        <!-- Envelope/Messages icon (simple) -->200        <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/></svg>201      </div>202      <div class="status-icon">203        <!-- Gear icon -->204        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.5 4.5l2.8 2.8M16.7 16.7l2.8 2.8M19.5 4.5l-2.8 2.8M7.3 16.7l-2.8 2.8"/></svg>205      </div>206      <div class="status-icon">207        <!-- WiFi -->208        <svg viewBox="0 0 24 24"><path d="M3 9c4.5-4 13.5-4 18 0"/><path d="M6 12c3-2.5 9-2.5 12 0"/><path d="M9 15c1.5-1 4.5-1 6 0"/><circle cx="12" cy="18" r="1.5"/></svg>209      </div>210      <div class="status-icon">211        <!-- Battery -->212        <svg viewBox="0 0 28 24"><rect x="2" y="6" width="22" height="12" rx="2"/><rect x="24" y="9" width="2" height="6"/></svg>213      </div>214    </div>215  </div>216 217  <!-- Search bar -->218  <div class="search-bar">219    <div class="search-icon">220      <svg viewBox="0 0 24 24">221        <circle cx="10" cy="10" r="7"></circle>222        <line x1="15" y1="15" x2="22" y2="22"></line>223      </svg>224    </div>225    <div class="search-text">chocolate cake</div>226  </div>227 228  <!-- Filter strip -->229  <div class="filter-strip">230    <div class="filter-left">231      <span>156K+ RESULTS</span>232      <span class="orange">0 FILTERS</span>233    </div>234    <div class="filter-right">235      <span>FILTER</span>236      <span class="lock-icon">237        <svg viewBox="0 0 24 24">238          <rect x="5" y="10" width="14" height="10" rx="2"></rect>239          <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>240        </svg>241      </span>242    </div>243  </div>244 245  <!-- Hero card image -->246  <div class="hero-card">247    <div class="img-placeholder">[IMG: Chocolate cake slice on plate]</div>248    <div class="hero-overlay">249      <div class="hero-title">Midnight Chocolate Cake</div>250      <div class="hero-sub">COOKISTRY</div>251      <div class="save-row">252        <span class="bookmark-icon">253          <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4z"></path></svg>254        </span>255        <span>1.7K SAVES</span>256      </div>257    </div>258    <div class="fab">259      <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>260    </div>261  </div>262 263  <!-- Secondary image -->264  <div class="secondary-img">265    <div class="img-placeholder">[IMG: Whole chocolate cake with strawberry]</div>266  </div>267 268  <!-- Bottom navigation -->269  <div class="bottom-nav">270    <div class="nav-icon">271      <!-- Home -->272      <svg viewBox="0 0 24 24"><path d="M3 12l9-7 9 7"></path><path d="M5 12v8h14v-8"></path></svg>273    </div>274    <div class="nav-icon search">275      <!-- Search -->276      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><line x1="15" y1="15" x2="22" y2="22"></line></svg>277    </div>278    <div class="nav-icon">279      <!-- User -->280      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c2-4 14-4 16 0"></path></svg>281    </div>282    <div class="nav-icon">283      <!-- Calendar -->284      <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="8" y1="3" x2="8" y2="7"></line><line x1="16" y1="3" x2="16" y2="7"></line></svg>285    </div>286    <div class="nav-icon">287      <!-- Sliders -->288      <svg viewBox="0 0 24 24"><line x1="5" y1="6" x2="21" y2="6"></line><circle cx="8" cy="6" r="2"></circle><line x1="3" y1="12" x2="19" y2="12"></line><circle cx="14" cy="12" r="2"></circle><line x1="5" y1="18" x2="21" y2="18"></line><circle cx="11" cy="18" r="2"></circle></svg>289    </div>290    <div class="nav-icon">291      <!-- Paperclip -->292      <svg viewBox="0 0 24 24"><path d="M7 13l7-7a4 4 0 1 1 6 6l-8 8a6 6 0 0 1-9-9l8-8"></path></svg>293    </div>294  </div>295 296  <!-- Gesture bar -->297  <div class="gesture"></div>298 299</div>300</body>301</html>