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>Tasks UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0B0B0B;15    border-radius: 30px;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    color: #EDEDED;26    font-size: 42px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 40px;31    box-sizing: border-box;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .status-icons svg { fill: none; stroke: #EDEDED; stroke-width: 3; }39 40  /* Header */41  .header {42    position: absolute;43    top: 130px;44    left: 30px;45    right: 30px;46    height: 160px;47    display: flex;48    align-items: center;49    gap: 20px;50  }51  .back-btn {52    width: 60px; height: 60px; border-radius: 30px;53    display: flex; align-items: center; justify-content: center;54    color: #AAB0FF;55  }56  .title {57    font-size: 110px;58    font-weight: 700;59    color: #8EA2FF;60  }61 62  /* Task card */63  .task-card {64    position: absolute;65    top: 330px;66    left: 60px;67    width: 860px;68    height: 160px;69    background: #1B1B1B;70    border-radius: 18px;71    box-shadow: 0 2px 0 #161616 inset;72    display: flex;73    align-items: center;74    padding: 0 30px;75    box-sizing: border-box;76    color: #F2F2F2;77    gap: 28px;78  }79  .checkbox {80    width: 72px;81    height: 72px;82    border-radius: 50%;83    border: 3px solid #7C7C7C;84    box-sizing: border-box;85  }86  .task-text { display: flex; flex-direction: column; }87  .task-title { font-size: 48px; margin-bottom: 8px; }88  .task-date { font-size: 30px; color: #F46A6A; display: flex; align-items: center; gap: 10px; }89  .task-date .dot { width: 14px; height: 14px; border-radius: 50%; background: #F46A6A; display: inline-block; }90 91  /* List dividers */92  .divider {93    position: absolute;94    left: 30px;95    right: 30px;96    height: 1px;97    background: #202020;98  }99 100  /* Floating Action Button */101  .fab {102    position: absolute;103    right: 60px;104    bottom: 240px;105    width: 150px;106    height: 150px;107    border-radius: 50%;108    background: #7F8CF5;109    box-shadow: 0 8px 24px rgba(0,0,0,0.6);110    display: flex;111    align-items: center;112    justify-content: center;113  }114  .fab svg { stroke: #0B0B0B; stroke-width: 10; }115 116  /* Gesture bar */117  .gesture {118    position: absolute;119    bottom: 80px;120    left: 50%;121    transform: translateX(-50%);122    width: 420px;123    height: 18px;124    background: #E0E0E0;125    border-radius: 12px;126    opacity: 0.9;127  }128 129  /* Menu panel */130  .menu-panel {131    position: absolute;132    top: 280px;133    right: 80px;134    width: 650px;135    background: #2E2E2E;136    color: #FFFFFF;137    border-radius: 18px;138    box-shadow: 0 10px 30px rgba(0,0,0,0.6);139    overflow: hidden;140  }141  .menu-item {142    display: flex;143    align-items: center;144    gap: 28px;145    padding: 30px 34px;146    border-bottom: 1px solid rgba(255,255,255,0.06);147    font-size: 40px;148  }149  .menu-item:last-child { border-bottom: none; }150  .menu-icon {151    width: 56px; height: 56px;152    display: flex; align-items: center; justify-content: center;153  }154  .menu-icon svg { width: 56px; height: 56px; fill: none; stroke: #DADADA; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status bar -->161  <div class="status-bar">162    <div class="time">8:19</div>163    <div class="status-icons">164      <!-- Cellular bars (simplified) -->165      <svg width="46" height="32" viewBox="0 0 46 32">166        <path d="M6 26v-6M14 26v-10M22 26v-14M30 26v-18M38 26v-22" />167      </svg>168      <!-- Wi‑Fi -->169      <svg width="46" height="32" viewBox="0 0 46 32">170        <path d="M4 10c9-6 29-6 38 0M10 16c6-4 20-4 26 0M18 22c3-2 7-2 10 0M23 26l0.01 0" />171      </svg>172      <!-- Battery -->173      <svg width="56" height="32" viewBox="0 0 56 32">174        <rect x="4" y="6" width="44" height="20" rx="3" />175        <rect x="50" y="12" width="6" height="8" rx="2" />176        <rect x="8" y="10" width="34" height="12" rx="2" fill="#EDEDED" stroke="none" />177      </svg>178    </div>179  </div>180 181  <!-- Header -->182  <div class="header">183    <div class="back-btn">184      <svg width="60" height="60" viewBox="0 0 60 60">185        <path d="M36 12 L18 30 L36 48" stroke="#8EA2FF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>186      </svg>187    </div>188    <div class="title">Tasks</div>189  </div>190 191  <!-- Task card -->192  <div class="task-card">193    <div class="checkbox"></div>194    <div class="task-text">195      <div class="task-title">Fun time</div>196      <div class="task-date"><span class="dot"></span>Yesterday</div>197    </div>198  </div>199 200  <!-- Menu panel -->201  <div class="menu-panel">202    <div class="menu-item">203      <div class="menu-icon">204        <!-- Sort by -->205        <svg viewBox="0 0 56 56">206          <path d="M10 14h36M10 26h30M10 38h24" />207        </svg>208      </div>209      <div>Sort by</div>210    </div>211    <div class="menu-item">212      <div class="menu-icon">213        <!-- Add shortcut to homescreen -->214        <svg viewBox="0 0 56 56">215          <path d="M14 14h28v20h-28z" />216          <path d="M28 8v12M22 12h12" />217          <path d="M20 40h16" />218        </svg>219      </div>220      <div>Add shortcut to homescreen</div>221    </div>222    <div class="menu-item">223      <div class="menu-icon">224        <!-- Change theme (palette) -->225        <svg viewBox="0 0 56 56">226          <circle cx="28" cy="28" r="18" />227          <circle cx="20" cy="24" r="3" />228          <circle cx="28" cy="22" r="3" />229          <circle cx="36" cy="26" r="3" />230          <path d="M26 36c4 0 6-2 6-4" />231        </svg>232      </div>233      <div>Change theme</div>234    </div>235    <div class="menu-item">236      <div class="menu-icon">237        <!-- Send a copy (share) -->238        <svg viewBox="0 0 56 56">239          <circle cx="16" cy="36" r="5" />240          <circle cx="40" cy="20" r="5" />241          <circle cx="40" cy="40" r="5" />242          <path d="M20 34l16-10M20 38l16 2" />243        </svg>244      </div>245      <div>Send a copy</div>246    </div>247    <div class="menu-item">248      <div class="menu-icon">249        <!-- Duplicate list -->250        <svg viewBox="0 0 56 56">251          <rect x="14" y="12" width="24" height="28" rx="3" />252          <rect x="22" y="18" width="24" height="28" rx="3" />253        </svg>254      </div>255      <div>Duplicate list</div>256    </div>257    <div class="menu-item">258      <div class="menu-icon">259        <!-- Print list -->260        <svg viewBox="0 0 56 56">261          <rect x="16" y="10" width="24" height="12" rx="2" />262          <rect x="12" y="24" width="32" height="16" rx="3" />263          <rect x="18" y="36" width="20" height="10" rx="2" />264        </svg>265      </div>266      <div>Print list</div>267    </div>268    <div class="menu-item">269      <div class="menu-icon">270        <!-- Light bulb -->271        <svg viewBox="0 0 56 56">272          <path d="M28 12c8 0 14 6 14 13 0 6-4 9-6 12H20c-2-3-6-6-6-12 0-7 6-13 14-13z" />273          <path d="M22 44h12M22 48h12" />274        </svg>275      </div>276      <div>Turn on suggestions</div>277    </div>278  </div>279 280  <!-- List dividers to fill screen -->281  <div class="divider" style="top: 540px;"></div>282  <div class="divider" style="top: 760px;"></div>283  <div class="divider" style="top: 980px;"></div>284  <div class="divider" style="top: 1200px;"></div>285  <div class="divider" style="top: 1420px;"></div>286  <div class="divider" style="top: 1640px;"></div>287  <div class="divider" style="top: 1860px;"></div>288  <div class="divider" style="top: 2080px;"></div>289 290  <!-- Floating action button -->291  <div class="fab">292    <svg viewBox="0 0 100 100">293      <path d="M50 20v60M20 50h60" />294    </svg>295  </div>296 297  <!-- Gesture bar -->298  <div class="gesture"></div>299 300</div>301</body>302</html>