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>Task Details - Add Reminder</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: #14161b;15    color: #e6e6ea;16  }17 18  /* Status bar */19  .status-bar {20    height: 90px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #e9e9ef;26    font-size: 36px;27    letter-spacing: 0.5px;28  }29  .status-icons { display: flex; align-items: center; gap: 22px; }30  .dot { width: 10px; height: 10px; background: #d8d8de; border-radius: 50%; display: inline-block; }31 32  /* Header */33  .header {34    padding: 18px 36px 8px 24px;35    display: flex;36    align-items: center;37    gap: 22px;38    color: #dfe1e6;39  }40  .header .title {41    font-size: 54px;42    font-weight: 700;43    letter-spacing: 0.2px;44  }45  .kebab { margin-left: auto; opacity: 0.9; }46 47  /* Icons (simple) */48  .icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }49  .icon svg { fill: none; stroke: #e6e6ea; stroke-width: 42; stroke-linecap: round; stroke-linejoin: round; width: 48px; height: 48px; }50 51  /* Content */52  .content { padding: 10px 36px 180px 36px; }53  .task-title {54    display: flex; align-items: center; gap: 20px;55    margin: 24px 0 10px 0;56  }57  .circle {58    width: 58px; height: 58px; border-radius: 50%;59    border: 4px solid #58617a; box-sizing: border-box;60  }61  .task-title h1 {62    font-size: 64px; font-weight: 600; margin: 0; color: #dfe1f5;63  }64  .helper-text {65    margin: 18px 0 38px 78px;66    font-size: 34px; color: #8d93a5;67  }68 69  .row {70    display: flex; align-items: center; gap: 26px;71    margin: 26px 0;72  }73  .row .left-icon {74    width: 78px; height: 78px; border-radius: 18px;75    background: #23262e; display: flex; align-items: center; justify-content: center;76  }77  .row .label { font-size: 40px; color: #cdd1dc; }78 79  .chips { display: flex; align-items: center; gap: 26px; margin-left: 6px; }80  .chip {81    background: #2a2e36; color: #cfd5e6;82    padding: 20px 28px; border-radius: 28px; font-size: 36px;83    display: inline-flex; align-items: center; gap: 16px;84  }85  .chip .x { font-size: 40px; opacity: 0.6; }86 87  .warn {88    color: #cf7d73;89    margin: 32px 0 18px 102px;90    font-size: 40px;91    display: flex; align-items: center; gap: 16px;92  }93  .add-link {94    margin-left: 102px; color: #8ab4f8; font-size: 40px;95    display: flex; align-items: center; gap: 18px;96  }97 98  /* Bottom sheet */99  .sheet {100    position: absolute;101    left: 0;102    right: 0;103    bottom: 0;104    height: 1240px;105    background: #1b1e25;106    border-top-left-radius: 40px; border-top-right-radius: 40px;107    box-shadow: 0 -8px 30px rgba(0,0,0,0.45);108    padding: 18px 36px 40px 36px;109  }110  .sheet .handle {111    width: 180px; height: 12px; background: #3b3f48; border-radius: 8px; margin: 8px auto 14px auto;112  }113  .sheet h2 {114    margin: 18px 0 24px 0; font-size: 54px; font-weight: 700; color: #e8ebf5;115  }116 117  .segment {118    background: #2a2e36;119    border-radius: 54px;120    padding: 8px;121    display: flex;122    gap: 8px;123    margin: 8px 0 30px 0;124  }125  .segment .seg {126    flex: 1; text-align: center; padding: 28px 0;127    border-radius: 46px; font-size: 40px; font-weight: 700;128    color: #cbd1dd;129  }130  .segment .active {131    background: #1b1e25;132    color: #e8ebf8;133    box-shadow: inset 0 0 0 2px #3a3f47;134  }135 136  .picker {137    display: flex; align-items: center; justify-content: space-between;138    margin: 22px 0 22px 0;139    padding: 0 14px;140  }141  .col {142    width: 280px; text-align: center; position: relative;143  }144  .col .unit {145    position: absolute; top: 120px; left: 50%;146    transform: translateX(-50%);147    font-size: 38px; color: #86a4ff; font-weight: 700;148  }149  .num {150    font-size: 80px; color: #4f5664; margin: 20px 0;151  }152  .num.sel { color: #9fb6ff; font-weight: 700; }153  .num.fade { color: #2f3440; }154 155  .summary {156    margin-top: 24px;157    font-size: 38px; color: #8ab4f8;158  }159 160  .btn {161    margin-top: 26px;162    width: 640px; height: 120px;163    background: #b6c7ff;164    color: #0e1a3a; font-weight: 700; font-size: 44px;165    border: none; border-radius: 60px;166    display: flex; align-items: center; justify-content: center;167  }168 169  /* Gesture pill */170  .gesture-pill {171    position: absolute; bottom: 18px; left: 50%;172    transform: translateX(-50%);173    width: 380px; height: 12px; background: #9aa0a6; border-radius: 8px; opacity: 0.7;174  }175</style>176</head>177<body>178<div id="render-target">179  <!-- Status bar -->180  <div class="status-bar">181    <div class="left">182      1:36183    </div>184    <div class="status-icons">185      <span>🔔</span>186      <span>🔔</span>187      <span class="dot"></span>188      <span style="font-size:30px;">📶</span>189      <span style="font-size:30px;">📡</span>190      <span style="font-size:30px;">🔋</span>191    </div>192  </div>193 194  <!-- Header -->195  <div class="header">196    <div class="icon" aria-label="Back">197      <svg viewBox="0 0 512 512"><path d="M320 96 160 256 320 416"/></svg>198    </div>199    <div class="icon" aria-label="Checkbox">200      <svg viewBox="0 0 512 512">201        <rect x="64" y="64" width="384" height="384" rx="64" ry="64" stroke="#e6e6ea"></rect>202        <path d="M160 272l64 64 128-160" stroke="#e6e6ea"></path>203      </svg>204    </div>205    <div class="title">Task details</div>206    <div class="kebab icon" aria-label="Menu">207      <svg viewBox="0 0 512 512">208        <circle cx="256" cy="128" r="40" stroke="#e6e6ea"></circle>209        <circle cx="256" cy="256" r="40" stroke="#e6e6ea"></circle>210        <circle cx="256" cy="384" r="40" stroke="#e6e6ea"></circle>211      </svg>212    </div>213  </div>214 215  <!-- Content area -->216  <div class="content">217    <div class="task-title">218      <div class="circle"></div>219      <h1>Driving licence</h1>220    </div>221    <div class="helper-text">Would you like to add more details?</div>222 223    <div class="row">224      <div class="left-icon">225        <!-- Grid icon -->226        <svg width="48" height="48" viewBox="0 0 24 24" stroke="#cfd5e6" fill="none" stroke-width="1.8">227          <rect x="3" y="3" width="7" height="7"></rect>228          <rect x="14" y="3" width="7" height="7"></rect>229          <rect x="3" y="14" width="7" height="7"></rect>230          <rect x="14" y="14" width="7" height="7"></rect>231        </svg>232      </div>233      <div class="label">Select project</div>234    </div>235 236    <div class="row">237      <div class="left-icon">238        <!-- Calendar icon -->239        <svg width="48" height="48" viewBox="0 0 24 24" stroke="#cfd5e6" fill="none" stroke-width="1.8">240          <rect x="3" y="4" width="18" height="17" rx="2"></rect>241          <line x1="8" y1="2" x2="8" y2="6"></line>242          <line x1="16" y1="2" x2="16" y2="6"></line>243          <line x1="3" y1="10" x2="21" y2="10"></line>244        </svg>245      </div>246      <div class="chips">247        <div class="chip">Sun, Jul 30 <span class="x">✕</span></div>248        <div class="chip">9:00 AM <span class="x">✕</span></div>249      </div>250    </div>251 252    <div class="row">253      <div class="left-icon">254        <!-- Bell icon -->255        <svg width="48" height="48" viewBox="0 0 24 24" stroke="#cfd5e6" fill="none" stroke-width="1.8">256          <path d="M12 22a2.5 2.5 0 0 0 2.4-2H9.6A2.5 2.5 0 0 0 12 22z"></path>257          <path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 7h18s-3 0-3-7z"></path>258        </svg>259      </div>260      <div class="chips">261        <div class="chip">1 hour before <span class="x">✕</span></div>262      </div>263    </div>264 265    <div class="warn">266      <span>⚠️</span>267      <span>Notifications are disabled</span>268    </div>269 270    <div class="add-link">271      <span style="font-size:46px;">+</span>272      <span>Add reminder</span>273    </div>274  </div>275 276  <!-- Bottom sheet -->277  <div class="sheet">278    <div class="handle"></div>279    <h2>Add reminder</h2>280 281    <div class="segment">282      <div class="seg active">Before</div>283      <div class="seg">On the day</div>284    </div>285 286    <!-- Picker columns -->287    <div class="picker">288      <div class="col">289        <div class="num fade">02</div>290        <div class="num sel">0</div>291        <div class="unit">D</div>292        <div class="num fade">1</div>293      </div>294      <div class="col">295        <div class="num fade">02</div>296        <div class="num sel">03</div>297        <div class="unit">H</div>298        <div class="num fade">04</div>299      </div>300      <div class="col">301        <div class="num fade">10</div>302        <div class="num sel">15</div>303        <div class="unit">M</div>304        <div class="num fade">20</div>305      </div>306    </div>307 308    <div class="summary">309      Reminder<br>310      <span style="font-size:44px; font-weight:700;">3 hours, 15 mins before</span>311    </div>312 313    <button class="btn">Done</button>314  </div>315 316  <div class="gesture-pill"></div>317</div>318</body>319</html>