GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Rendered UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: linear-gradient(#0d3f5e 0%, #0a3c59 45%, #093957 100%);14    font-family: "Segoe UI", Arial, sans-serif;15    color: #ffffff;16  }17 18  /* Status bar */19  .status {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 92px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 32px;29    font-size: 34px;30    color: #d7e9f6;31    opacity: 0.95;32  }33  .status .icons { display: flex; align-items: center; gap: 22px; }34  .status .dot { width: 10px; height: 10px; background: #cfe2f1; border-radius: 50%; opacity: 0.8; }35  .status .signal {36    width: 26px; height: 26px; border: 2px solid #cfe2f1; border-radius: 4px; position: relative;37  }38  .status .battery {39    width: 32px; height: 18px; border: 2px solid #cfe2f1; border-radius: 3px; position: relative;40  }41  .status .battery::after {42    content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 6px; background: #cfe2f1; border-radius: 1px;43  }44 45  /* App bar */46  .appbar {47    position: absolute;48    top: 92px;49    left: 0;50    width: 1080px;51    height: 160px;52    display: flex;53    align-items: center;54    justify-content: space-between;55    padding: 0 32px;56    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);57  }58  .app-left { display: flex; align-items: center; gap: 24px; }59  .app-title {60    font-size: 56px;61    font-weight: 700;62    letter-spacing: 0.2px;63  }64  .dropdown {65    width: 30px; height: 30px;66    display: inline-flex; align-items: center; justify-content: center;67    margin-left: 10px;68  }69  .app-right { display: flex; align-items: center; gap: 36px; }70 71  /* Section header */72  .section {73    position: absolute;74    top: 270px;75    left: 40px;76    font-size: 40px;77    font-weight: 700;78    color: #a8c6d9;79  }80 81  /* Task card */82  .task-card {83    position: absolute;84    top: 350px;85    left: 40px;86    width: 1000px;87    min-height: 170px;88    background: rgba(255,255,255,0.07);89    border: 1px solid rgba(255,255,255,0.18);90    border-radius: 36px;91    display: flex;92    align-items: center;93    padding: 28px;94    box-shadow: 0 12px 24px rgba(0,0,0,0.25);95  }96  .checkbox {97    width: 72px; height: 72px;98    border: 4px solid #9cc2d7;99    border-radius: 12px;100    margin-right: 28px;101    box-sizing: border-box;102  }103  .task-content { display: flex; flex-direction: column; }104  .task-title {105    font-size: 44px;106    font-weight: 600;107    color: #e7f5ff;108    line-height: 1.2;109  }110  .task-sub {111    margin-top: 8px;112    font-size: 32px;113    color: #90b7cb;114  }115 116  /* Floating Action Button */117  .fab {118    position: absolute;119    right: 40px;120    bottom: 520px;121    width: 120px; height: 120px;122    background: #ffffff;123    border-radius: 60px;124    box-shadow: 0 10px 24px rgba(0,0,0,0.35);125    display: flex; align-items: center; justify-content: center;126  }127 128  /* Quick input bar */129  #quick-input {130    position: absolute;131    left: 0;132    bottom: 180px;133    width: 1080px;134    height: 120px;135    background: #0e5f89;136    border-top: 1px solid rgba(255,255,255,0.15);137    display: flex;138    align-items: center;139    padding: 0 36px;140    box-sizing: border-box;141  }142  #quick-input .mic { margin-right: 22px; }143  #quick-input .placeholder {144    font-size: 40px;145    color: #b8d3e2;146    flex: 1;147    position: relative;148    padding-bottom: 12px;149  }150  #quick-input .placeholder::after {151    content: "";152    position: absolute; left: 0; right: 0; bottom: 0;153    height: 2px; background: rgba(255,255,255,0.5);154  }155 156  /* Ad banner */157  #ad-banner {158    position: absolute;159    left: 0; bottom: 0;160    width: 1080px; height: 180px;161    background: #ffffff;162    border-top: 1px solid #e5e5e5;163    display: flex; align-items: center; justify-content: space-between;164    padding: 0 36px;165    box-sizing: border-box;166    color: #1b1b1b;167  }168  .ad-left { display: flex; align-items: center; gap: 26px; }169  .ad-btn {170    background: #1ea66a;171    color: #ffffff;172    border: none;173    border-radius: 60px;174    padding: 22px 46px;175    font-size: 38px;176    font-weight: 700;177  }178  .ad-right {179    display: flex; align-items: center; gap: 22px;180    font-size: 40px;181  }182  .ad-sub { font-size: 32px; color: #2f7e3a; margin-left: 8px; }183  .ad-logo {184    width: 110px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;185    display: flex; justify-content: center; align-items: center; color: #757575;186    border-radius: 18px;187  }188 189  /* Home indicator */190  .home-indicator {191    position: absolute;192    bottom: 6px; left: 50%;193    transform: translateX(-50%);194    width: 220px; height: 10px;195    background: #d0d0d0;196    border-radius: 8px;197    opacity: 0.8;198  }199</style>200</head>201<body>202<div id="render-target">203 204  <!-- Status Bar -->205  <div class="status">206    <div>9:25</div>207    <div class="icons">208      <div class="signal"></div>209      <div class="dot"></div>210      <div class="dot"></div>211      <div class="battery"></div>212    </div>213  </div>214 215  <!-- App Bar -->216  <div class="appbar">217    <div class="app-left">218      <!-- Circle check icon -->219      <svg width="72" height="72" viewBox="0 0 24 24" aria-label="check" style="filter: drop-shadow(0 1px 0 rgba(0,0,0,0.2));">220        <circle cx="12" cy="12" r="11" fill="none" stroke="#ffffff" stroke-width="2"></circle>221        <path d="M7 12.5l3 3 7-8" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>222      </svg>223      <div class="app-title">All Lists</div>224      <div class="dropdown">225        <svg width="30" height="30" viewBox="0 0 24 24" aria-label="dropdown">226          <path d="M6 9l6 6 6-6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>227        </svg>228      </div>229    </div>230 231    <div class="app-right">232      <!-- Search icon -->233      <svg width="50" height="50" viewBox="0 0 24 24" aria-label="search">234        <circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="#ffffff" stroke-width="2"></circle>235        <path d="M16 16l5 5" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>236      </svg>237      <!-- More (vertical) icon -->238      <svg width="50" height="50" viewBox="0 0 24 24" aria-label="more">239        <circle cx="12" cy="5" r="2" fill="#ffffff"></circle>240        <circle cx="12" cy="12" r="2" fill="#ffffff"></circle>241        <circle cx="12" cy="19" r="2" fill="#ffffff"></circle>242      </svg>243    </div>244  </div>245 246  <!-- Section -->247  <div class="section">Tomorrow</div>248 249  <!-- Task card -->250  <div class="task-card">251    <div class="checkbox"></div>252    <div class="task-content">253      <div class="task-title">Buying New Balance Hiking shoes</div>254      <div class="task-sub">Tomorrow, 2:00 PM</div>255    </div>256  </div>257 258  <!-- Floating Action Button -->259  <div class="fab" aria-label="add">260    <svg width="64" height="64" viewBox="0 0 24 24">261      <path d="M12 5v14M5 12h14" stroke="#0f5f89" stroke-width="2" stroke-linecap="round"></path>262    </svg>263  </div>264 265  <!-- Quick input -->266  <div id="quick-input">267    <div class="mic">268      <svg width="46" height="46" viewBox="0 0 24 24" aria-label="mic">269        <rect x="9" y="4" width="6" height="10" rx="3" fill="none" stroke="#ffffff" stroke-width="2"></rect>270        <path d="M6 11c0 3.3 2.7 6 6 6s6-2.7 6-6M12 17v3M9 20h6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>271      </svg>272    </div>273    <div class="placeholder">Enter Quick Task Here</div>274  </div>275 276  <!-- Ad banner -->277  <div id="ad-banner">278    <div class="ad-left">279      <button class="ad-btn">Open</button>280    </div>281    <div class="ad-right">282      <div style="display:flex; flex-direction:column;">283        <div style="font-size:44px; font-weight:700;">Booking.com</div>284        <div class="ad-sub">Installed ✓</div>285      </div>286      <div class="ad-logo">[IMG: Booking logo]</div>287    </div>288  </div>289 290  <!-- Home indicator -->291  <div class="home-indicator"></div>292</div>293</body>294</html>