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>Grocery List UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #1F6773; /* deep teal */20    color: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 120px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 36px;34    color: rgba(255,255,255,0.95);35    font-size: 40px;36    letter-spacing: 0.5px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .status-icon svg {44    width: 44px;45    height: 44px;46    fill: none;47    stroke: #FFFFFF;48    stroke-width: 5;49    opacity: 0.95;50  }51 52  /* Back button */53  .back-btn {54    position: absolute;55    top: 160px;56    left: 36px;57    width: 80px;58    height: 80px;59    display: flex;60    align-items: center;61    justify-content: center;62    opacity: 0.95;63  }64  .back-btn svg {65    width: 64px;66    height: 64px;67    fill: none;68    stroke: #FFFFFF;69    stroke-width: 8;70    stroke-linecap: round;71    stroke-linejoin: round;72  }73 74  /* Top actions */75  .top-actions {76    position: absolute;77    top: 180px;78    right: 40px;79    display: flex;80    gap: 48px;81  }82  .icon-btn {83    width: 72px;84    height: 72px;85    display: flex;86    align-items: center;87    justify-content: center;88    opacity: 0.95;89  }90  .icon-btn svg {91    width: 64px;92    height: 64px;93    fill: none;94    stroke: #FFFFFF;95    stroke-width: 6;96    stroke-linecap: round;97    stroke-linejoin: round;98  }99 100  /* Title & note content */101  .content {102    position: absolute;103    left: 60px;104    top: 320px;105    width: 960px;106  }107  .title {108    font-size: 84px;109    font-weight: 500;110    margin: 0 0 28px 0;111    letter-spacing: 0.4px;112  }113  .note-text {114    font-size: 42px;115    line-height: 1.45;116    color: rgba(255,255,255,0.88);117    max-width: 900px;118  }119 120  /* Bottom toolbar */121  .bottom-toolbar {122    position: absolute;123    left: 0;124    bottom: 160px;125    width: 100%;126    height: 120px;127    display: flex;128    align-items: center;129    padding: 0 36px;130    color: rgba(255,255,255,0.85);131  }132  .bt-left {133    display: flex;134    gap: 40px;135    align-items: center;136  }137  .bt-icon {138    width: 80px;139    height: 80px;140    display: flex;141    align-items: center;142    justify-content: center;143    opacity: 0.85;144  }145  .bt-icon svg {146    width: 64px;147    height: 64px;148    fill: none;149    stroke: rgba(255,255,255,0.95);150    stroke-width: 6;151    stroke-linecap: round;152    stroke-linejoin: round;153  }154  .bt-mid {155    margin-left: auto;156    margin-right: auto;157    font-size: 36px;158    opacity: 0.9;159  }160  .bt-right {161    margin-left: auto;162    width: 80px;163    display: flex;164    align-items: center;165    justify-content: center;166  }167  .dots {168    display: flex;169    flex-direction: column;170    gap: 12px;171  }172  .dots span {173    width: 12px;174    height: 12px;175    background: rgba(255,255,255,0.95);176    border-radius: 50%;177    display: block;178  }179 180  /* Home indicator */181  .home-indicator {182    position: absolute;183    left: 50%;184    transform: translateX(-50%);185    bottom: 60px;186    width: 440px;187    height: 16px;188    background: rgba(255,255,255,0.85);189    border-radius: 10px;190  }191</style>192</head>193<body>194<div id="render-target">195  <!-- Status Bar -->196  <div class="status-bar">197    <div>6:31</div>198    <div class="status-right">199      <div class="status-icon">200        <!-- simple cellular dots -->201        <svg viewBox="0 0 64 64">202          <circle cx="10" cy="46" r="4" fill="#FFFFFF"></circle>203          <circle cx="26" cy="38" r="4" fill="#FFFFFF"></circle>204          <circle cx="42" cy="30" r="4" fill="#FFFFFF"></circle>205          <circle cx="58" cy="22" r="4" fill="#FFFFFF"></circle>206        </svg>207      </div>208      <div class="status-icon">209        <!-- WiFi -->210        <svg viewBox="0 0 64 64">211          <path d="M8 22 C24 10,40 10,56 22" />212          <path d="M16 32 C28 24,36 24,48 32" />213          <path d="M24 42 C30 38,34 38,40 42" />214          <circle cx="32" cy="48" r="4" fill="#FFFFFF" stroke="none"></circle>215        </svg>216      </div>217      <div class="status-icon">218        <!-- Battery -->219        <svg viewBox="0 0 64 64">220          <rect x="6" y="16" width="46" height="32" rx="4"></rect>221          <rect x="54" y="24" width="6" height="16" rx="2"></rect>222          <rect x="10" y="20" width="38" height="24" fill="#FFFFFF" stroke="none" opacity="0.3"></rect>223        </svg>224      </div>225    </div>226  </div>227 228  <!-- Back button -->229  <div class="back-btn">230    <svg viewBox="0 0 72 72">231      <path d="M48 14 L24 36 L48 58"></path>232    </svg>233  </div>234 235  <!-- Top actions -->236  <div class="top-actions">237    <!-- Bell -->238    <div class="icon-btn">239      <svg viewBox="0 0 64 64">240        <path d="M32 10 C24 10,22 18,22 24 V34 L16 40 H48 L42 34 V24 C42 18,40 10,32 10"></path>241        <circle cx="32" cy="50" r="5" fill="#FFFFFF" stroke="none"></circle>242      </svg>243    </div>244    <!-- Lock -->245    <div class="icon-btn">246      <svg viewBox="0 0 64 64">247        <rect x="16" y="26" width="32" height="24" rx="4"></rect>248        <path d="M22 26 V20 C22 14,28 12,32 12 C36 12,42 14,42 20 V26"></path>249      </svg>250    </div>251    <!-- Download -->252    <div class="icon-btn">253      <svg viewBox="0 0 64 64">254        <rect x="14" y="10" width="36" height="12" rx="3"></rect>255        <path d="M32 18 V42"></path>256        <path d="M24 34 L32 42 L40 34"></path>257        <rect x="14" y="44" width="36" height="10" rx="2"></rect>258      </svg>259    </div>260  </div>261 262  <!-- Content -->263  <div class="content">264    <h1 class="title">Grocery List</h1>265    <div class="note-text">266      Quinoa,dairy products, fruits and vegetables, and267      lean meatsn268    </div>269  </div>270 271  <!-- Bottom toolbar -->272  <div class="bottom-toolbar">273    <div class="bt-left">274      <!-- Plus in square -->275      <div class="bt-icon">276        <svg viewBox="0 0 64 64">277          <rect x="8" y="8" width="48" height="48" rx="6"></rect>278          <path d="M32 18 V46"></path>279          <path d="M18 32 H46"></path>280        </svg>281      </div>282      <!-- Palette -->283      <div class="bt-icon">284        <svg viewBox="0 0 64 64">285          <circle cx="32" cy="32" r="22"></circle>286          <circle cx="22" cy="28" r="4" fill="#FFFFFF" stroke="none"></circle>287          <circle cx="30" cy="22" r="4" fill="#FFFFFF" stroke="none"></circle>288          <circle cx="40" cy="26" r="4" fill="#FFFFFF" stroke="none"></circle>289          <circle cx="38" cy="38" r="4" fill="#FFFFFF" stroke="none"></circle>290        </svg>291      </div>292      <!-- Text style "A" -->293      <div class="bt-icon">294        <svg viewBox="0 0 64 64">295          <path d="M16 50 L32 14 L48 50"></path>296          <path d="M24 40 H40"></path>297        </svg>298      </div>299    </div>300 301    <div class="bt-mid">Edited 6:05 PM</div>302 303    <div class="bt-right">304      <div class="dots">305        <span></span>306        <span></span>307        <span></span>308      </div>309    </div>310  </div>311 312  <!-- Home indicator -->313  <div class="home-indicator"></div>314</div>315</body>316</html>