GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Tasks UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F7FAFC;14    color: #1f2937;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    padding: 24px 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #111827;25    font-weight: 600;26    font-size: 40px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 26px;32    color: #6b7280;33    font-size: 32px;34  }35  .dot { width: 12px; height: 12px; background: #6b7280; border-radius: 50%; display: inline-block; }36  .wifi {37    width: 40px; height: 40px;38    position: relative;39  }40  .wifi::before, .wifi::after {41    content: "";42    position: absolute;43    border: 3px solid #374151;44    border-radius: 50%;45  }46  .wifi::before {47    width: 36px; height: 36px; left: 2px; top: 2px; border-color: #374151 transparent transparent transparent; transform: rotate(45deg);48  }49  .wifi::after {50    width: 22px; height: 22px; left: 9px; top: 9px; border-color: #374151 transparent transparent transparent; transform: rotate(45deg);51  }52  .battery {53    width: 56px; height: 28px; border: 4px solid #374151; border-radius: 6px; position: relative;54  }55  .battery::after {56    content: "";57    position: absolute;58    right: -10px; top: 7px;59    width: 10px; height: 14px; background: #374151; border-radius: 2px;60  }61  .battery .level {62    width: 32px; height: 18px; background: #16a34a; position: absolute; left: 6px; top: 4px; border-radius: 2px;63  }64 65  /* Header with back + search */66  .header {67    padding: 10px 32px 24px 32px;68    border-bottom: 1px solid #e5e7eb;69  }70  .header-row {71    display: flex;72    align-items: center;73    gap: 20px;74  }75  .back-btn {76    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; color: #374151;77  }78  .search-title {79    font-size: 60px;80    color: #374151;81    font-weight: 600;82    letter-spacing: 0.3px;83  }84 85  /* Section title */86  .section-title {87    display: flex;88    align-items: center;89    gap: 14px;90    font-size: 52px;91    font-weight: 700;92    color: #374151;93    padding: 36px 32px 16px 32px;94  }95  .chev-up {96    width: 32px; height: 32px;97  }98 99  /* Task card */100  .task-card {101    margin: 16px 32px 24px 32px;102    background: #F1F5F9;103    border-radius: 28px;104    box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;105    padding: 36px 32px;106    display: flex;107    align-items: center;108    justify-content: space-between;109  }110  .task-left {111    display: flex;112    align-items: center;113    gap: 28px;114  }115  .check-circle {116    width: 60px; height: 60px; border: 4px solid #cbd5e1; border-radius: 50%;117    background: #fff;118  }119  .task-content {120    display: flex;121    flex-direction: column;122    gap: 18px;123  }124  .task-title {125    font-size: 48px;126    color: #111827;127    font-weight: 600;128  }129  .task-meta {130    font-size: 34px;131    color: #6b7280;132    display: flex;133    align-items: center;134    gap: 16px;135  }136  .task-meta.red { color: #ef4444; }137  .task-right {138    display: flex;139    align-items: center;140    gap: 18px;141    color: #9ca3af;142  }143  .flag-icon, .bell-icon {144    width: 44px; height: 44px;145  }146 147  /* Floating Action Button */148  .fab {149    position: absolute;150    right: 64px;151    bottom: 360px;152    width: 180px;153    height: 180px;154    border-radius: 50%;155    background: #78A5FF;156    box-shadow: 0 18px 30px rgba(0,0,0,0.15);157    display: flex;158    align-items: center;159    justify-content: center;160  }161  .fab svg { width: 84px; height: 84px; color: #fff; }162 163  /* Bottom navigation */164  .bottom-nav {165    position: absolute;166    left: 0; right: 0; bottom: 0;167    height: 220px;168    background: #ffffff;169    border-top: 1px solid #e5e7eb;170    display: flex;171    align-items: center;172    justify-content: space-around;173  }174  .nav-item {175    display: flex;176    flex-direction: column;177    align-items: center;178    gap: 14px;179    color: #6b7280;180    font-size: 36px;181  }182  .nav-item.active { color: #2563eb; }183  .nav-icon {184    width: 72px; height: 72px;185  }186  .red-dot {187    position: absolute;188    left: 86px;189    bottom: 210px;190    width: 18px; height: 18px; background: #ef4444; border-radius: 50%;191    box-shadow: 0 0 0 4px #fff;192  }193 194  /* Home indicator */195  .home-indicator {196    position: absolute;197    left: 50%;198    bottom: 20px;199    transform: translateX(-50%);200    width: 480px; height: 14px; background: #111827; opacity: 0.3; border-radius: 8px;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status bar -->208  <div class="status-bar">209    <div style="display:flex;align-items:center;gap:18px;">210      <span>9:23</span>211      <span style="font-size:34px;color:#6b7280;">✔︎</span>212      <span style="font-size:34px;color:#6b7280;">88°</span>213      <span style="font-size:34px;color:#6b7280;">▦</span>214      <span class="dot"></span>215    </div>216    <div class="status-right">217      <div class="wifi"></div>218      <div class="battery"><div class="level"></div></div>219    </div>220  </div>221 222  <!-- Header -->223  <div class="header">224    <div class="header-row">225      <div class="back-btn">226        <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">227          <path d="M15 18l-6-6 6-6"/>228        </svg>229      </div>230      <div class="search-title">Search...</div>231    </div>232  </div>233 234  <!-- Previous section -->235  <div class="section-title">236    <div>Previous</div>237    <svg class="chev-up" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><path d="M6 14l6-6 6 6"/></svg>238  </div>239 240  <div class="task-card">241    <div class="task-left">242      <div class="check-circle"></div>243      <div class="task-content">244        <div class="task-title">Buy groceries</div>245        <div class="task-meta red">12-21</div>246      </div>247    </div>248    <div class="task-right">249      <svg class="flag-icon" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2">250        <path d="M6 3v18M6 3h10l-2 4 2 4H6"/>251      </svg>252    </div>253  </div>254 255  <!-- Today section -->256  <div class="section-title" style="padding-top:26px;">257    <div>Today</div>258    <svg class="chev-up" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><path d="M6 14l6-6 6 6"/></svg>259  </div>260 261  <div class="task-card">262    <div class="task-left">263      <div class="check-circle"></div>264      <div class="task-content">265        <div class="task-title">Buy Milk and Chicken</div>266      </div>267    </div>268    <div class="task-right">269      <svg class="flag-icon" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2">270        <path d="M6 3v18M6 3h10l-2 4 2 4H6"/>271      </svg>272    </div>273  </div>274 275  <!-- Future section -->276  <div class="section-title">277    <div>Future</div>278    <svg class="chev-up" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><path d="M6 14l6-6 6 6"/></svg>279  </div>280 281  <div class="task-card">282    <div class="task-left">283      <div class="check-circle"></div>284      <div class="task-content">285        <div class="task-title">Buy New Balance Hiking shoes</div>286        <div class="task-meta">287          <span>12-23 07:00 AM</span>288          <svg class="bell-icon" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2">289            <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5l-2 2h16l-2-2z"/>290          </svg>291        </div>292      </div>293    </div>294    <div class="task-right">295      <svg class="flag-icon" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2">296        <path d="M6 3v18M6 3h10l-2 4 2 4H6"/>297      </svg>298    </div>299  </div>300 301  <!-- Floating Add Button -->302  <div class="fab">303    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">304      <path d="M12 5v14M5 12h14"/>305    </svg>306  </div>307 308  <!-- Bottom navigation -->309  <div class="bottom-nav">310    <div class="nav-item">311      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2">312        <path d="M4 6h16M4 12h16M4 18h16"/>313      </svg>314      <div>Tasks</div>315    </div>316    <div class="nav-item active">317      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2">318        <path d="M4 4h16v16H4z"/>319        <path d="M8 2v6M16 2v6"/>320      </svg>321      <div>Tasks</div>322    </div>323    <div class="nav-item">324      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2">325        <circle cx="12" cy="9" r="4"/>326        <path d="M4 22a8 8 0 0 1 16 0"/>327      </svg>328      <div>Mine</div>329    </div>330  </div>331  <div class="red-dot"></div>332 333  <!-- Home indicator -->334  <div class="home-indicator"></div>335</div>336</body>337</html>