GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Rendering</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #FFFFFF;18  }19 20  /* Top status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    padding: 0 36px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #616161;32    font-size: 40px;33  }34  .status-right {35    display: flex;36    gap: 26px;37    align-items: center;38  }39  .status-icon {40    width: 40px;41    height: 40px;42    border-radius: 6px;43    background: #e0e0e0;44  }45 46  /* Search header row */47  .search-row {48    position: absolute;49    top: 120px;50    left: 0;51    width: 1080px;52    padding: 20px 40px 24px 40px;53    display: flex;54    align-items: center;55    gap: 26px;56    border-bottom: 2px solid #eeeeee;57  }58  .back-icon {59    width: 60px;60    height: 60px;61  }62  .search-text {63    flex: 1;64    font-size: 60px;65    color: #9e9e9e;66  }67 68  /* Sections */69  .section {70    position: absolute;71    left: 40px;72    width: 1000px;73    color: #424242;74    font-weight: 700;75    display: flex;76    align-items: center;77    gap: 16px;78  }79  .section svg {80    width: 30px;81    height: 30px;82    fill: #757575;83  }84 85  .section.previous { top: 260px; font-size: 46px; }86  .section.today    { top: 670px; font-size: 46px; }87  .section.future   { top: 1050px; font-size: 46px; }88 89  /* Task cards */90  .card {91    position: absolute;92    left: 40px;93    width: 1000px;94    background: #F4F6F8;95    border-radius: 36px;96    box-shadow: 0 0 0 1px #E6E8EA inset;97    padding: 36px 40px;98    display: flex;99    align-items: flex-start;100    justify-content: space-between;101  }102  .card .left {103    display: flex;104    gap: 26px;105    align-items: center;106    flex: 1;107  }108  .checkbox {109    width: 60px;110    height: 60px;111    border-radius: 50%;112    border: 3px solid #B0BEC5;113    flex-shrink: 0;114    background: #FFFFFF;115  }116  .task-content {117    display: flex;118    flex-direction: column;119    gap: 18px;120  }121  .task-title {122    font-size: 50px;123    color: #212121;124  }125  .task-meta {126    font-size: 38px;127    color: #9e9e9e;128    display: flex;129    align-items: center;130    gap: 20px;131  }132  .task-meta .red {133    color: #d84343;134  }135 136  .flag-btn {137    width: 60px;138    height: 60px;139  }140 141  /* Cards positions */142  .card.prev { top: 330px; }143  .card.today { top: 740px; }144  .card.future { top: 1120px; }145 146  /* Bottom keyboard placeholder */147  .keyboard {148    position: absolute;149    left: 0;150    bottom: 0;151    width: 1080px;152    height: 980px;153    background: #171717;154    padding: 40px 30px 60px;155    box-sizing: border-box;156  }157  .kbd-row {158    display: flex;159    gap: 24px;160    justify-content: center;161    margin-bottom: 34px;162  }163  .key {164    width: 84px;165    height: 120px;166    border-radius: 22px;167    background: #2A2A2A;168    color: #E8E6E3;169    display: flex;170    align-items: center;171    justify-content: center;172    font-size: 42px;173  }174  .key.wide { width: 180px; }175  .key.search {176    background: #F3D7A2;177    color: #5a4a2a;178    width: 140px;179  }180  .key.space { width: 520px; background: #2A2A2A; }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status bar -->187  <div class="status-bar">188    <div>9:24</div>189    <div class="status-right">190      <div class="status-icon"></div>191      <div class="status-icon"></div>192      <div class="status-icon"></div>193    </div>194  </div>195 196  <!-- Search header -->197  <div class="search-row">198    <svg class="back-icon" viewBox="0 0 48 48">199      <path d="M30 8 L14 24 L30 40" stroke="#424242" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200    </svg>201    <div class="search-text">Search...</div>202  </div>203 204  <!-- Sections -->205  <div class="section previous">206    <div>Previous</div>207    <svg viewBox="0 0 24 24"><path d="M6 14 L12 8 L18 14" /></svg>208  </div>209 210  <div class="card prev">211    <div class="left">212      <div class="checkbox"></div>213      <div class="task-content">214        <div class="task-title">Buy groceries</div>215        <div class="task-meta"><span class="red">12-21</span></div>216      </div>217    </div>218    <svg class="flag-btn" viewBox="0 0 48 48">219      <path d="M12 44 V8 H34 L30 16 H36 L34 24 H12" stroke="#9e9e9e" stroke-width="4" fill="none" stroke-linejoin="round"/>220    </svg>221  </div>222 223  <div class="section today">224    <div>Today</div>225    <svg viewBox="0 0 24 24"><path d="M6 14 L12 8 L18 14" /></svg>226  </div>227 228  <div class="card today">229    <div class="left">230      <div class="checkbox"></div>231      <div class="task-content">232        <div class="task-title">Buy Milk and Chicken</div>233      </div>234    </div>235    <svg class="flag-btn" viewBox="0 0 48 48">236      <path d="M12 44 V8 H34 L30 16 H36 L34 24 H12" stroke="#9e9e9e" stroke-width="4" fill="none" stroke-linejoin="round"/>237    </svg>238  </div>239 240  <div class="section future">241    <div>Future</div>242    <svg viewBox="0 0 24 24"><path d="M6 14 L12 8 L18 14" /></svg>243  </div>244 245  <div class="card future">246    <div class="left">247      <div class="checkbox"></div>248      <div class="task-content">249        <div class="task-title">Buy New Balance Hiking shoes</div>250        <div class="task-meta">251          <span>12-23 07:00 AM</span>252          <svg viewBox="0 0 24 24" width="34" height="34">253            <path d="M12 2 L12 6 M6 12 A6 6 0 1 0 18 12 A6 6 0 1 0 6 12 M12 12 L16 14" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"/>254          </svg>255        </div>256      </div>257    </div>258    <svg class="flag-btn" viewBox="0 0 48 48">259      <path d="M12 44 V8 H34 L30 16 H36 L34 24 H12" stroke="#9e9e9e" stroke-width="4" fill="none" stroke-linejoin="round"/>260    </svg>261  </div>262 263  <!-- Keyboard (simplified) -->264  <div class="keyboard">265    <div class="kbd-row">266      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>267    </div>268    <div class="kbd-row">269      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>270    </div>271    <div class="kbd-row">272      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>273      <div class="key wide">⌫</div>274    </div>275    <div class="kbd-row">276      <div class="key wide">?123</div>277      <div class="key">,</div>278      <div class="key space"></div>279      <div class="key">.</div>280      <div class="key search">🔍</div>281    </div>282  </div>283 284</div>285</body>286</html>