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>Task Detail - Dark Bottom Sheet</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #EDEDED;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 84px;25    width: 100%;26    padding: 0 36px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #FFFFFF;32    font-size: 36px;33    letter-spacing: 1px;34  }35  .status-icons { display: flex; gap: 24px; align-items: center; }36  .status-dot { width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; opacity: 0.9; }37 38  /* Header */39  .header {40    position: absolute;41    top: 104px;42    left: 24px;43    right: 24px;44    display: flex;45    align-items: center;46    gap: 24px;47  }48  .hdr-title {49    font-weight: 700;50    font-size: 56px;51    color: #FFFFFF;52    display: flex;53    align-items: center;54    gap: 10px;55  }56  .hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }57 58  .icon {59    width: 60px;60    height: 60px;61  }62  .icon.small { width: 44px; height: 44px; }63  svg { display: block; }64 65  /* Task meta */66  .meta-row {67    position: absolute;68    top: 220px;69    left: 36px;70    right: 36px;71    display: flex;72    align-items: center;73    gap: 24px;74  }75  .checkbox {76    width: 52px;77    height: 52px;78    border: 3px solid #5A5A5A;79    border-radius: 8px;80    box-sizing: border-box;81    opacity: 0.9;82  }83  .meta-text {84    font-size: 44px;85    color: #3151A8; /* bluish for date */86    font-weight: 600;87  }88  .meta-sub {89    position: absolute;90    top: 290px;91    left: 112px;92    color: #9E9E9E;93    font-size: 32px;94  }95  .flag-right {96    position: absolute;97    top: 230px;98    right: 36px;99  }100 101  /* Title & description */102  .task-title {103    position: absolute;104    top: 380px;105    left: 36px;106    right: 36px;107    font-size: 72px;108    font-weight: 800;109    color: #FFFFFF;110  }111  .task-desc {112    position: absolute;113    top: 500px;114    left: 36px;115    right: 36px;116    font-size: 40px;117    color: #7E7E7E;118  }119 120  /* Bottom sheet */121  .sheet {122    position: absolute;123    left: 0;124    right: 0;125    bottom: 160px;126    background: #222222;127    border-top-left-radius: 36px;128    border-top-right-radius: 36px;129    box-shadow: 0 -16px 40px rgba(0,0,0,0.6);130    padding: 24px 24px 40px;131  }132  .sheet .handle {133    width: 160px;134    height: 16px;135    background: #616161;136    border-radius: 12px;137    margin: 16px auto 24px;138    opacity: 0.6;139  }140 141  .quick-actions {142    display: grid;143    grid-template-columns: repeat(4, 1fr);144    gap: 28px;145    padding: 0 12px;146    margin-bottom: 28px;147  }148  .qa-item {149    background: #2A2A2A;150    border-radius: 24px;151    height: 180px;152    display: flex;153    flex-direction: column;154    align-items: center;155    justify-content: center;156    gap: 18px;157    color: #EDEDED;158    font-size: 40px;159    font-weight: 600;160  }161 162  .card {163    background: #2F2F2F;164    border-radius: 24px;165    margin: 16px 12px;166    padding: 18px 24px;167  }168  .list {169    display: flex;170    flex-direction: column;171    gap: 8px;172  }173  .list-item {174    display: flex;175    align-items: center;176    gap: 24px;177    padding: 24px 8px;178    color: #EDEDED;179    font-size: 40px;180    border-radius: 16px;181  }182  .list-item + .list-item {183    border-top: 1px solid #3A3A3A;184  }185  .li-icon {186    width: 50px;187    height: 50px;188    opacity: 0.9;189  }190 191  /* Navigation pill */192  .nav-pill {193    position: absolute;194    left: 50%;195    transform: translateX(-50%);196    bottom: 64px;197    width: 260px;198    height: 16px;199    background: #D6D6D6;200    border-radius: 12px;201    opacity: 0.7;202  }203</style>204</head>205<body>206<div id="render-target">207 208  <div class="status-bar">209    <div>10:02</div>210    <div class="status-icons">211      <div class="status-dot"></div>212      <div class="status-dot" style="opacity:0.7;"></div>213      <div class="status-dot" style="opacity:0.5;"></div>214      <div class="status-dot" style="opacity:0.3;"></div>215    </div>216  </div>217 218  <div class="header">219    <svg class="icon" viewBox="0 0 24 24">220      <path d="M15 6l-6 6 6 6" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221    </svg>222    <div class="hdr-title">223      Inbox224      <svg class="icon small" viewBox="0 0 24 24">225        <path d="M6 9l6 6 6-6" stroke="#FFFFFF" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>226      </svg>227    </div>228    <div class="hdr-actions">229      <svg class="icon small" viewBox="0 0 24 24">230        <circle cx="12" cy="5" r="2" fill="#BDBDBD"/>231        <circle cx="12" cy="12" r="2" fill="#BDBDBD"/>232        <circle cx="12" cy="19" r="2" fill="#BDBDBD"/>233      </svg>234    </div>235  </div>236 237  <div class="meta-row">238    <div class="checkbox"></div>239    <svg class="icon small" viewBox="0 0 24 24">240      <circle cx="12" cy="12" r="9" stroke="#3151A8" stroke-width="2.5" fill="none"/>241      <path d="M12 7v6l4 2" stroke="#3151A8" stroke-width="2.5" fill="none" stroke-linecap="round"/>242    </svg>243    <div class="meta-text">Aug 20, 09:00AM, 9d left</div>244  </div>245  <div class="meta-sub">Daily</div>246  <div class="flag-right">247    <svg class="icon small" viewBox="0 0 24 24">248      <path d="M6 4v16M6 4h10l-2 3h-8" stroke="#7E7E7E" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249    </svg>250  </div>251 252  <div class="task-title">Shimla tour</div>253  <div class="task-desc">Description</div>254 255  <div class="sheet">256    <div class="handle"></div>257 258    <div class="quick-actions">259      <div class="qa-item">260        <svg class="icon small" viewBox="0 0 24 24">261          <path d="M12 4v10M12 14l-5-5M12 14l5-5" stroke="#FFC107" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>262          <path d="M6 20h12" stroke="#FFC107" stroke-width="2.5" stroke-linecap="round"/>263        </svg>264        <div style="color:#FFC107">Pin</div>265      </div>266      <div class="qa-item">267        <svg class="icon small" viewBox="0 0 24 24">268          <path d="M4 12h9M13 5l6 7-6 7" stroke="#32D37A" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>269        </svg>270        <div style="color:#32D37A">Share</div>271      </div>272      <div class="qa-item">273        <svg class="icon small" viewBox="0 0 24 24">274          <rect x="4" y="4" width="16" height="16" rx="3" ry="3" stroke="#5C78FF" stroke-width="2.5" fill="none"/>275          <path d="M8 8l8 8M16 8l-8 8" stroke="#5C78FF" stroke-width="2.5" stroke-linecap="round"/>276        </svg>277        <div style="color:#5C78FF">Won't Do</div>278      </div>279      <div class="qa-item">280        <svg class="icon small" viewBox="0 0 24 24">281          <path d="M6 7h12M9 7V5h6v2M7 9h10v10H7z" stroke="#EF5350" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>282        </svg>283        <div style="color:#EF5350">Delete</div>284      </div>285    </div>286 287    <div class="card">288      <div class="list">289        <div class="list-item">290          <svg class="li-icon" viewBox="0 0 24 24">291            <path d="M4 6h8M12 6v6M12 12h8" stroke="#BDBDBD" stroke-width="2.2" fill="none" stroke-linecap="round"/>292          </svg>293          <div>Add Subtask</div>294        </div>295        <div class="list-item">296          <svg class="li-icon" viewBox="0 0 24 24">297            <path d="M4 6h16v10l-5-3H4z" stroke="#BDBDBD" stroke-width="2.2" fill="none" stroke-linejoin="round"/>298          </svg>299          <div>Comment</div>300        </div>301        <div class="list-item">302          <svg class="li-icon" viewBox="0 0 24 24">303            <path d="M7 7a5 5 0 019 4v7a4 4 0 01-8 0V9a3 3 0 016 0v9" stroke="#BDBDBD" stroke-width="2.2" fill="none" stroke-linecap="round"/>304          </svg>305          <div>Attachment</div>306        </div>307        <div class="list-item">308          <svg class="li-icon" viewBox="0 0 24 24">309            <path d="M7 4h9l4 4-8 8-5-5zM7 4v7" stroke="#BDBDBD" stroke-width="2.2" fill="none" stroke-linejoin="round"/>310          </svg>311          <div>Tags</div>312        </div>313        <div class="list-item">314          <svg class="li-icon" viewBox="0 0 24 24">315            <path d="M12 4a6 6 0 016 6c0 4.5-6 10-6 10s-6-5.5-6-10a6 6 0 016-6z" stroke="#BDBDBD" stroke-width="2.2" fill="none"/>316            <circle cx="12" cy="10" r="2.5" fill="#BDBDBD"/>317          </svg>318          <div>Location</div>319        </div>320      </div>321    </div>322 323    <div class="card">324      <div class="list-item" style="border-top: none;">325        <svg class="li-icon" viewBox="0 0 24 24">326          <path d="M7 7l10 10M17 7l-10 10" stroke="#BDBDBD" stroke-width="2.2" fill="none" stroke-linecap="round"/>327        </svg>328        <div>Copy Link</div>329      </div>330    </div>331  </div>332 333  <div class="nav-pill"></div>334</div>335</body>336</html>