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>Mobile UI - Task Detail</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #000000;15    color: #E0E0E0;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 100px;25    display: flex;26    align-items: center;27    padding: 0 32px;28    color: #BDBDBD;29    font-size: 34px;30    letter-spacing: 0.5px;31  }32  .status-bar .right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .status-icon {39    width: 36px; height: 36px;40  }41 42  /* Header / navigation */43  .header {44    position: absolute;45    top: 120px;46    left: 24px;47    right: 24px;48    height: 80px;49    display: flex;50    align-items: center;51    gap: 24px;52    color: #D0D0D0;53  }54  .icon-btn {55    width: 60px; height: 60px; border-radius: 30px;56    display: flex; align-items: center; justify-content: center;57  }58  .header-title {59    font-size: 44px; font-weight: 700;60    display: flex; align-items: center; gap: 14px;61  }62  .caret {63    width: 20px; height: 20px;64  }65  .more {66    margin-left: auto;67  }68 69  /* Date row */70  .date-row {71    position: absolute;72    top: 210px;73    left: 24px; right: 24px;74    display: flex; align-items: center;75  }76  .checkbox {77    width: 40px; height: 40px;78    border: 2px solid #777;79    border-radius: 6px;80    margin-right: 18px;81    box-sizing: border-box;82  }83  .date-text {84    font-size: 38px;85    color: #c65a5a;86    letter-spacing: 0.2px;87  }88  .flag {89    margin-left: auto;90    width: 44px; height: 44px;91  }92 93  /* Content */94  .title {95    position: absolute;96    top: 310px; left: 24px; right: 24px;97    font-size: 64px; font-weight: 800; color: #BDBDBD;98  }99  .description {100    position: absolute;101    top: 410px; left: 24px; right: 24px;102    font-size: 40px; color: #757575;103  }104 105  /* Bottom sheet */106  .bottom-sheet {107    position: absolute;108    left: 0; right: 0; bottom: 0;109    height: 1060px;110    background: #1F1F1F;111    border-top-left-radius: 28px;112    border-top-right-radius: 28px;113    box-shadow: 0 -8px 24px rgba(0,0,0,0.6);114  }115  .sheet-handle {116    position: absolute;117    top: 20px; left: 50%;118    transform: translateX(-50%);119    width: 120px; height: 12px; border-radius: 6px;120    background: #5E5E5E;121  }122 123  .quick-actions {124    position: absolute;125    top: 90px; left: 24px; right: 24px;126    display: grid;127    grid-template-columns: repeat(4, 1fr);128    gap: 24px;129  }130  .action {131    background: #2A2A2A;132    border-radius: 22px;133    height: 180px;134    display: flex; flex-direction: column;135    align-items: center; justify-content: center;136    gap: 16px;137    box-shadow: inset 0 0 0 1px #3A3A3A;138  }139  .action-label {140    font-size: 34px; color: #CFCFCF;141  }142 143  .card {144    position: absolute;145    top: 310px; left: 24px; right: 24px;146    background: #2B2B2B;147    border-radius: 24px;148    padding: 24px 24px;149    box-shadow: inset 0 0 0 1px #3A3A3A;150  }151  .list-item {152    display: flex; align-items: center;153    height: 112px;154    border-bottom: 1px solid #3A3A3A;155    padding: 0 12px;156    gap: 24px;157  }158  .list-item:last-child { border-bottom: none; }159  .list-icon {160    width: 48px; height: 48px;161    color: #BDBDBD;162  }163  .list-text {164    font-size: 38px; color: #DDDDDD;165  }166 167  .card-secondary {168    position: absolute;169    top: 760px; left: 24px; right: 24px;170    background: #2B2B2B;171    border-radius: 24px;172    padding: 24px;173    box-shadow: inset 0 0 0 1px #3A3A3A;174  }175 176  /* Gesture bar */177  .gesture-bar {178    position: absolute;179    bottom: 20px; left: 50%;180    transform: translateX(-50%);181    width: 240px; height: 14px; border-radius: 7px;182    background: #DCDCDC;183    opacity: 0.9;184  }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Status bar -->191  <div class="status-bar">192    <div>8:03</div>193    <div class="right">194      <!-- simple status placeholders -->195      <svg class="status-icon" viewBox="0 0 24 24">196        <circle cx="12" cy="12" r="10" fill="#A0A0A0"></circle>197      </svg>198      <svg class="status-icon" viewBox="0 0 24 24">199        <rect x="4" y="6" width="16" height="12" rx="2" fill="#A0A0A0"></rect>200      </svg>201      <svg class="status-icon" viewBox="0 0 24 24">202        <path d="M3 18h18M3 12h18M3 6h18" stroke="#A0A0A0" stroke-width="2"></path>203      </svg>204      <svg class="status-icon" viewBox="0 0 24 24">205        <path d="M3 6h18l-2 14H5L3 6z" fill="#A0A0A0"></path>206      </svg>207    </div>208  </div>209 210  <!-- Header -->211  <div class="header">212    <div class="icon-btn">213      <svg width="36" height="36" viewBox="0 0 24 24">214        <path d="M15 18l-6-6 6-6" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>215      </svg>216    </div>217    <div class="header-title">218      <span>Inbox</span>219      <svg class="caret" viewBox="0 0 24 24">220        <path d="M6 9l6 6 6-6" fill="#D0D0D0"></path>221      </svg>222    </div>223    <div class="more icon-btn" style="opacity:0.9;">224      <svg width="8" height="40" viewBox="0 0 8 40">225        <circle cx="4" cy="8" r="4" fill="#BDBDBD"></circle>226        <circle cx="4" cy="20" r="4" fill="#BDBDBD"></circle>227        <circle cx="4" cy="32" r="4" fill="#BDBDBD"></circle>228      </svg>229    </div>230  </div>231 232  <!-- Date row -->233  <div class="date-row">234    <div class="checkbox"></div>235    <div class="date-text">Last Wed, Jul 19, 12:30pm</div>236    <svg class="flag" viewBox="0 0 24 24">237      <path d="M6 3v18M6 3h10l-2 4 2 4H6" stroke="#777" stroke-width="2" fill="none" stroke-linejoin="round" />238    </svg>239  </div>240 241  <!-- Title and description -->242  <div class="title">Weeding plan</div>243  <div class="description">Description</div>244 245  <!-- Bottom sheet -->246  <div class="bottom-sheet">247    <div class="sheet-handle"></div>248 249    <!-- Quick actions -->250    <div class="quick-actions">251      <div class="action">252        <svg width="64" height="64" viewBox="0 0 24 24">253          <path d="M12 4l4 4h-3v8h-2V8H8l4-4z" fill="#FFC107"></path>254        </svg>255        <div class="action-label" style="color:#FFD54F;">Pin</div>256      </div>257      <div class="action">258        <svg width="64" height="64" viewBox="0 0 24 24">259          <path d="M14 3h7v7h-2V6.41l-9.3 9.3-1.4-1.41 9.3-9.3H14V3z" fill="#4CAF50"></path>260        </svg>261        <div class="action-label" style="color:#8EE3A0;">Share</div>262      </div>263      <div class="action">264        <svg width="64" height="64" viewBox="0 0 24 24">265          <path d="M6 6l12 12M18 6L6 18" stroke="#5C7CFA" stroke-width="3" stroke-linecap="round"></path>266        </svg>267        <div class="action-label" style="color:#9BB3FF;">Won't Do</div>268      </div>269      <div class="action">270        <svg width="64" height="64" viewBox="0 0 24 24">271          <path d="M9 3h6l1 2h4v2H4V5h4l1-2zm1 6h4v10H10V9z" fill="#F44336"></path>272        </svg>273        <div class="action-label" style="color:#FF9E9E;">Delete</div>274      </div>275    </div>276 277    <!-- Options list card -->278    <div class="card">279      <div class="list-item">280        <svg class="list-icon" viewBox="0 0 24 24">281          <path d="M4 4h8v4H4V4zm0 6h14v4H4v-4zm0 6h10v4H4v-4z" fill="#BDBDBD"></path>282        </svg>283        <div class="list-text">Add Subtask</div>284      </div>285      <div class="list-item">286        <svg class="list-icon" viewBox="0 0 24 24">287          <path d="M4 4h16v10H8l-4 4V4z" fill="#BDBDBD"></path>288        </svg>289        <div class="list-text">Comment</div>290      </div>291      <div class="list-item">292        <svg class="list-icon" viewBox="0 0 24 24">293          <path d="M7 6c3-3 7-3 10 0s3 7 0 10-7 3-10 0-3-7 0-10zm2 2l6 6" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round"></path>294        </svg>295        <div class="list-text">Attachment</div>296      </div>297      <div class="list-item">298        <svg class="list-icon" viewBox="0 0 24 24">299          <path d="M14 3l7 7-8 8H6V11l8-8zM7 13l4 4" stroke="#BDBDBD" stroke-width="2" fill="none"></path>300        </svg>301        <div class="list-text">Tags</div>302      </div>303      <div class="list-item">304        <svg class="list-icon" viewBox="0 0 24 24">305          <path d="M12 3a7 7 0 0 1 7 7c0 5-7 11-7 11s-7-6-7-11a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" fill="#BDBDBD"></path>306        </svg>307        <div class="list-text">Location</div>308      </div>309    </div>310 311    <!-- Copy Link card -->312    <div class="card-secondary">313      <div class="list-item" style="border-bottom:none;">314        <svg class="list-icon" viewBox="0 0 24 24">315          <path d="M10 7a5 5 0 0 1 7 7l-2 2M14 17a5 5 0 0 1-7-7l2-2" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round"></path>316        </svg>317        <div class="list-text">Copy Link</div>318      </div>319    </div>320  </div>321 322  <!-- Gesture bar -->323  <div class="gesture-bar"></div>324 325</div>326</body>327</html>