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 - Dark</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: #0B0B0B;15    color: #EDEDED;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar (mock) */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 72px;25    width: 100%;26    padding: 0 36px;27    box-sizing: border-box;28    color: #DCDCDC;29    display: flex;30    align-items: center;31    justify-content: space-between;32    font-size: 28px;33    letter-spacing: 1px;34    opacity: 0.9;35  }36  .status-icons {37    display: flex;38    gap: 18px;39    align-items: center;40  }41  .dot { width: 8px; height: 8px; background: #DCDCDC; border-radius: 50%; opacity: .8; }42 43  /* Header */44  .header {45    position: absolute;46    top: 96px;47    left: 36px;48    right: 36px;49  }50  .header-row {51    position: relative;52    height: 72px;53  }54  .back-btn {55    position: absolute;56    left: 4px;57    top: 8px;58    width: 56px;59    height: 56px;60  }61  .more-btn {62    position: absolute;63    right: 8px;64    top: 8px;65    width: 44px;66    height: 56px;67    display: flex;68    align-items: center;69    justify-content: center;70  }71  .more-btn .v-dot {72    width: 8px; height: 8px; background: #8A90F2; border-radius: 50%; margin: 4px 0;73  }74  .title {75    margin-top: 28px;76    font-size: 96px;77    font-weight: 800;78    color: #8A90F2;79    letter-spacing: 0.5px;80  }81 82  /* Task card */83  .task-card {84    position: absolute;85    left: 36px;86    right: 36px;87    top: 360px;88    background: #1D1D1F;89    border-radius: 20px;90    height: 176px;91    box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset, 0 1px 0 rgba(0,0,0,0.5);92    display: flex;93    align-items: center;94    padding: 28px 32px;95    box-sizing: border-box;96  }97  .check-circle {98    width: 64px; height: 64px; border: 4px solid #7A7A7A; border-radius: 50%;99    margin-right: 28px; opacity: 0.9;100  }101  .task-content {102    flex: 1;103    display: flex;104    flex-direction: column;105    justify-content: center;106  }107  .task-title {108    font-size: 44px;109    font-weight: 600;110    color: #F2F2F2;111    margin-bottom: 8px;112  }113  .sub-row {114    display: flex;115    align-items: center;116    gap: 14px;117  }118  .cal-icn {119    width: 28px; height: 28px;120    border-radius: 6px;121    border: 2px solid #E06060;122    position: relative;123  }124  .cal-icn::before {125    content: "";126    position: absolute;127    top: -6px; left: 4px; right: 4px; height: 6px; background: #E06060; border-radius: 2px 2px 0 0;128  }129  .subtext {130    font-size: 32px;131    color: #E06060;132  }133  .star-btn {134    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;135  }136 137  /* Divider lines */138  .lines {139    position: absolute;140    top: 580px;141    left: 36px;142    right: 36px;143  }144  .line {145    height: 1px;146    background: #222;147    margin: 110px 0;148  }149 150  /* Floating action button */151  .fab {152    position: absolute;153    right: 48px;154    bottom: 220px;155    width: 168px;156    height: 168px;157    border-radius: 50%;158    background: #8A90F2;159    box-shadow: 0 8px 24px rgba(0,0,0,0.45);160    display: flex;161    align-items: center;162    justify-content: center;163  }164  .fab svg { width: 72px; height: 72px; }165 166  /* Home indicator */167  .home-indicator {168    position: absolute;169    bottom: 120px;170    left: 50%;171    transform: translateX(-50%);172    width: 320px;173    height: 14px;174    background: #D0D0D0;175    border-radius: 10px;176    opacity: 0.85;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Mock status bar -->184  <div class="status-bar">185    <div>8:18</div>186    <div class="status-icons">187      <div class="dot"></div>188      <div class="dot"></div>189      <div class="dot"></div>190    </div>191  </div>192 193  <!-- Header -->194  <div class="header">195    <div class="header-row">196      <svg class="back-btn" viewBox="0 0 24 24">197        <path d="M15 4 L7 12 L15 20" fill="none" stroke="#8A90F2" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>198      </svg>199      <div class="more-btn" aria-label="More options">200        <div class="v-dot"></div>201        <div class="v-dot"></div>202        <div class="v-dot"></div>203      </div>204    </div>205    <div class="title">Tasks</div>206  </div>207 208  <!-- Task Card -->209  <div class="task-card">210    <div class="check-circle"></div>211    <div class="task-content">212      <div class="task-title">Fun time</div>213      <div class="sub-row">214        <div class="cal-icn"></div>215        <div class="subtext">Yesterday</div>216      </div>217    </div>218    <div class="star-btn">219      <svg viewBox="0 0 24 24">220        <path d="M12 3l2.9 5.9 6.1.9-4.4 4.3 1 6-5.6-3-5.6 3 1-6L3 9.8l6.1-.9L12 3z" fill="none" stroke="#9A9A9A" stroke-width="1.8" stroke-linejoin="round"/>221      </svg>222    </div>223  </div>224 225  <!-- Divider lines -->226  <div class="lines">227    <div class="line"></div>228    <div class="line"></div>229    <div class="line"></div>230    <div class="line"></div>231    <div class="line"></div>232    <div class="line"></div>233    <div class="line"></div>234  </div>235 236  <!-- Floating Action Button -->237  <div class="fab" aria-label="Add">238    <svg viewBox="0 0 24 24">239      <path d="M12 5v14M5 12h14" stroke="#0B0B0B" stroke-width="2.6" stroke-linecap="round"/>240    </svg>241  </div>242 243  <!-- Home indicator -->244  <div class="home-indicator"></div>245</div>246</body>247</html>