GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Reminder UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #E6ECF3;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    background: #3E516E;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    font-size: 36px;29    letter-spacing: 0.5px;30  }31  .status-left { flex: 1; display: flex; align-items: center; gap: 16px; }32  .status-right { display: flex; align-items: center; gap: 24px; }33  .icon-small svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 3; }34 35  /* App bar */36  .app-bar {37    position: absolute;38    top: 120px;39    left: 0;40    width: 1080px;41    height: 140px;42    background: #3E516E;43    color: #fff;44    display: flex;45    align-items: center;46    box-sizing: border-box;47    padding: 0 28px;48  }49  .app-title {50    font-size: 60px;51    font-weight: 600;52    margin-left: 24px;53  }54  .app-actions {55    margin-left: auto;56    display: flex;57    align-items: center;58    gap: 36px;59  }60  .icon-btn svg { width: 56px; height: 56px; stroke: #fff; fill: none; stroke-width: 6; }61 62  /* Ad banner */63  .ad-banner {64    position: absolute;65    top: 260px;66    left: 0;67    width: 1080px;68    height: 160px;69    background: #E0E0E0;70    border-top: 1px solid #BDBDBD;71    border-bottom: 1px solid #BDBDBD;72    display: flex;73    align-items: center;74    justify-content: center;75    color: #757575;76    font-size: 34px;77  }78 79  /* List */80  .list {81    position: absolute;82    top: 420px;83    left: 0;84    right: 0;85    bottom: 220px;86    overflow: hidden;87  }88  .list-item {89    display: flex;90    padding: 30px 32px;91    box-sizing: border-box;92    border-bottom: 2px solid rgba(0,0,0,0.08);93    background: rgba(255,255,255,0.18);94  }95  .li-left { flex: 1; }96  .li-title {97    font-size: 52px;98    color: #222;99    margin-bottom: 14px;100    letter-spacing: 0.2px;101  }102  .li-sub {103    font-size: 34px;104    color: #6c7a89;105    margin-bottom: 10px;106  }107  .li-tag {108    font-size: 32px;109    color: #7a8796;110  }111  .li-right {112    width: 280px;113    text-align: right;114    position: relative;115  }116  .li-right .when {117    font-size: 36px;118    color: #637387;119    margin-top: 6px;120  }121  .star {122    position: absolute;123    right: 26px;124    top: 68px;125  }126  .star svg { width: 54px; height: 54px; fill: #2DB34D; stroke: #1f8c37; stroke-width: 2; }127 128  /* Bottom tabs */129  .tabs {130    position: absolute;131    bottom: 110px;132    left: 0;133    width: 1080px;134    height: 120px;135    background: rgba(255,255,255,0.7);136    display: flex;137    align-items: center;138    justify-content: space-between;139    padding: 0 60px;140    box-sizing: border-box;141    border-top: 2px solid rgba(0,0,0,0.08);142  }143  .tab {144    font-size: 44px;145    color: #5b6776;146  }147  .tab.active {148    color: #1d2530;149    font-weight: 700;150    letter-spacing: 1px;151  }152 153  /* Gesture bar */154  .gesture {155    position: absolute;156    bottom: 40px;157    left: 50%;158    transform: translateX(-50%);159    width: 420px;160    height: 16px;161    background: #B0B7C4;162    border-radius: 10px;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status Bar -->170  <div class="status-bar">171    <div class="status-left">11:15172      <div class="icon-small">173        <!-- simple dot indicator -->174        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" /></svg>175      </div>176    </div>177    <div class="status-right">178      <div class="icon-small">179        <!-- WiFi -->180        <svg viewBox="0 0 24 24">181          <path d="M2 8c5-4 15-4 20 0" />182          <path d="M5 12c4-3 10-3 14 0" />183          <path d="M8 16c3-2 5-2 8 0" />184          <circle cx="12" cy="19" r="1.6" fill="#fff" />185        </svg>186      </div>187      <div class="icon-small">188        <!-- Battery -->189        <svg viewBox="0 0 28 24">190          <rect x="2" y="6" width="20" height="12" rx="2" />191          <rect x="22.5" y="9" width="3" height="6" rx="1" />192          <rect x="4" y="8" width="12" height="8" fill="#fff" stroke="none"/>193        </svg>194      </div>195    </div>196  </div>197 198  <!-- App Bar -->199  <div class="app-bar">200    <div class="icon-btn">201      <!-- Hamburger -->202      <svg viewBox="0 0 24 24">203        <path d="M3 6h18M3 12h18M3 18h18" />204      </svg>205    </div>206    <div class="app-title">Reminder</div>207    <div class="app-actions">208      <div class="icon-btn">209        <!-- Search -->210        <svg viewBox="0 0 24 24">211          <circle cx="10" cy="10" r="7" />212          <path d="M15 15l6 6" />213        </svg>214      </div>215      <div class="icon-btn">216        <!-- Filter/Funnel -->217        <svg viewBox="0 0 24 24">218          <path d="M3 6h18M7 12h10M10 18h4" />219        </svg>220      </div>221    </div>222  </div>223 224  <!-- Ad Banner -->225  <div class="ad-banner">226    [IMG: Ad banner - In-Store Tour & Assistance]227  </div>228 229  <!-- List -->230  <div class="list">231    <div class="list-item">232      <div class="li-left">233        <div class="li-title">My favourite cusines</div>234        <div class="li-sub">27/09/2023  10:17 pm</div>235        <div class="li-tag">One Time</div>236      </div>237      <div class="li-right">238        <div class="when">Tomorrow</div>239      </div>240    </div>241 242    <div class="list-item">243      <div class="li-left">244        <div class="li-title">Carlos Birthday</div>245        <div class="li-sub">27/09/2023  10:52 pm</div>246        <div class="li-tag">Every Day</div>247      </div>248      <div class="li-right">249        <div class="when">Tomorrow</div>250        <div class="star">251          <svg viewBox="0 0 24 24">252            <path d="M12 2l3.2 6.5L22 9.3l-5 4.9 1.2 7.8L12 18l-6.2 4 1.2-7.8-5-4.9 6.8-0.8L12 2z"/>253          </svg>254        </div>255      </div>256    </div>257 258    <div class="list-item">259      <div class="li-left">260        <div class="li-title">Favourite movies</div>261        <div class="li-sub">28/09/2023  10:14 pm</div>262        <div class="li-tag">One Time</div>263      </div>264      <div class="li-right">265        <div class="when">in 2 days</div>266      </div>267    </div>268 269    <div class="list-item">270      <div class="li-left">271        <div class="li-title">Favourite restaurant</div>272        <div class="li-sub">28/09/2023  10:16 pm</div>273        <div class="li-tag">One Time</div>274      </div>275      <div class="li-right">276        <div class="when">in 2 days</div>277      </div>278    </div>279 280    <div class="list-item">281      <div class="li-left">282        <div class="li-title">My shopping list</div>283        <div class="li-sub">29/09/2023  10:05 pm</div>284        <div class="li-tag">One Time</div>285      </div>286      <div class="li-right">287        <div class="when">in 3 days</div>288      </div>289    </div>290 291    <div class="list-item">292      <div class="li-left">293        <div class="li-title">Clothing sizes</div>294        <div class="li-sub">29/09/2023  10:08 pm</div>295        <div class="li-tag">One Time</div>296      </div>297      <div class="li-right">298        <div class="when">in 3 days</div>299      </div>300    </div>301 302    <div class="list-item">303      <div class="li-left">304        <div class="li-title">Travel places</div>305        <div class="li-sub">30/09/2023  10:06 pm</div>306        <div class="li-tag">One Time</div>307      </div>308      <div class="li-right">309        <div class="when">in 4 days</div>310      </div>311    </div>312 313    <div class="list-item">314      <div class="li-left">315        <div class="li-title">Next month plans</div>316        <div class="li-sub">30/09/2023  10:07 pm</div>317        <div class="li-tag">One Time</div>318      </div>319      <div class="li-right">320        <div class="when">in 4 days</div>321      </div>322    </div>323 324    <div class="list-item">325      <div class="li-left">326        <div class="li-title">Dream Locations</div>327        <div class="li-sub">30/09/2023  10:09 pm</div>328        <div class="li-tag">One Time</div>329      </div>330      <div class="li-right">331        <div class="when">in 4 days</div>332      </div>333    </div>334  </div>335 336  <!-- Tabs -->337  <div class="tabs">338    <div class="tab active">ACTIVE</div>339    <div class="tab">COMPLETED</div>340  </div>341 342  <!-- Gesture bar -->343  <div class="gesture"></div>344</div>345</body>346</html>