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 - Reminder Sheet</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212;13    font-family: Arial, Helvetica, sans-serif;14    color: rgba(255,255,255,0.92);15  }16  *, *::before, *::after { box-sizing: border-box; }17 18  /* Status bar */19  .statusbar {20    height: 100px; padding: 0 40px;21    display: flex; align-items: center; justify-content: space-between;22    color: #fff; font-weight: 600; font-size: 40px;23  }24  .sb-right { display: flex; align-items: center; gap: 26px; }25  .sb-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3; }26 27  /* App header */28  .appbar {29    padding: 20px 36px 24px 36px;30    color: rgba(255,255,255,0.75);31  }32  .title-row {33    display: flex; align-items: center; gap: 30px;34  }35  .title-row .icon {36    width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center;37  }38  .app-title {39    font-size: 64px; font-weight: 700; letter-spacing: 0.5px; flex: 1;40  }41  .dots { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }42 43  /* Content behind sheet */44  .content {45    padding: 20px 40px 40px 40px;46    color: rgba(255,255,255,0.70);47  }48  .task-line {49    display: flex; align-items: center; gap: 24px; margin-top: 34px;50  }51  .circle {52    width: 44px; height: 44px; border-radius: 50%;53    border: 4px solid rgba(255,255,255,0.45);54  }55  .task-title { font-size: 52px; font-weight: 600; color: rgba(255,255,255,0.85); }56  .task-sub { margin-top: 18px; font-size: 34px; color: rgba(255,255,255,0.55); }57 58  .project-row {59    margin-top: 60px; display: flex; align-items: center; gap: 22px;60    font-size: 40px; color: rgba(255,255,255,0.75);61  }62  .square-icon { width: 60px; height: 60px; background: rgba(255,255,255,0.06); border-radius: 10px; display: flex; align-items: center; justify-content: center; }63  .square-icon svg { width: 40px; height: 40px; fill: none; stroke: rgba(255,255,255,0.75); stroke-width: 5; }64 65  .date-time-row { margin-top: 48px; display: flex; align-items: center; gap: 26px; }66  .calendar-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; }67  .calendar-icon svg { width: 52px; height: 52px; fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 4; }68  .chip {69    display: inline-flex; align-items: center; gap: 18px;70    background: #2A2A2A; color: rgba(255,255,255,0.85);71    padding: 22px 28px; border-radius: 18px; font-size: 36px;72  }73  .chip .close {74    width: 36px; height: 36px; border-radius: 12px;75    display: inline-flex; align-items: center; justify-content: center;76    background: rgba(255,255,255,0.12);77  }78  .chip .close svg { width: 26px; height: 26px; stroke: rgba(255,255,255,0.85); stroke-width: 4; }79 80  /* Bottom sheet */81  .sheet {82    position: absolute; left: 0; right: 0; bottom: 0;83    width: 1080px; height: 1500px;84    background: #1E1E22; border-top-left-radius: 32px; border-top-right-radius: 32px;85    box-shadow: 0 -20px 40px rgba(0,0,0,0.6);86    padding: 20px 40px 140px;87  }88  .drag-handle {89    width: 160px; height: 10px; border-radius: 6px;90    background: rgba(255,255,255,0.3); margin: 22px auto 24px;91  }92  .sheet h2 {93    margin: 6px 0 30px; font-size: 58px; font-weight: 700; color: #e6e6e6;94  }95  .list { margin-top: 10px; }96  .list-item {97    padding: 28px 4px; font-size: 42px; color: #d9d9d9;98    border-bottom: 1px solid rgba(255,255,255,0.06);99  }100  .list-item.muted { color: rgba(255,255,255,0.85); }101  .more-row {102    display: flex; align-items: center; gap: 26px; padding: 36px 4px; font-size: 42px; color: #d9d9d9;103  }104  .ellipsis-ic { width: 40px; height: 40px; display: inline-flex; }105  .picker-row {106    display: flex; align-items: center; gap: 24px; padding: 20px 4px;107    font-size: 42px; color: #eaeaea; margin-top: 6px;108  }109  .picker-ic { width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; }110  .picker-ic svg { width: 54px; height: 54px; fill: none; stroke: #eaeaea; stroke-width: 4; }111 112  /* Bottom navigation pill */113  .nav-pill {114    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);115    width: 220px; height: 12px; border-radius: 8px; background: rgba(255,255,255,0.85);116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status Bar -->123  <div class="statusbar">124    <div class="sb-left">1:34</div>125    <div class="sb-right">126      <div class="sb-icon">127        <!-- Signal bars -->128        <svg viewBox="0 0 24 24">129          <path d="M3 21h2v-4H3zM7 21h2v-7H7zM11 21h2v-10h-2zM15 21h2v-13h-2zM19 21h2V5h-2z"/>130        </svg>131      </div>132      <div class="sb-icon">133        <!-- WiFi -->134        <svg viewBox="0 0 24 24">135          <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0"/>136          <circle cx="12" cy="19" r="1.8" fill="#fff" stroke="none"/>137        </svg>138      </div>139      <div class="sb-icon">140        <!-- Battery -->141        <svg viewBox="0 0 28 24">142          <rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff"/>143          <rect x="4" y="8" width="14" height="8" fill="#fff" stroke="none"/>144          <rect x="22" y="9" width="4" height="6" rx="1" stroke="#fff"/>145        </svg>146      </div>147    </div>148  </div>149 150  <!-- App Header -->151  <div class="appbar">152    <div class="title-row">153      <div class="icon">154        <!-- Back arrow -->155        <svg viewBox="0 0 24 24">156          <path d="M15 5L6 12l9 7" stroke="#ccc" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>157        </svg>158      </div>159      <div class="icon">160        <!-- Checkbox -->161        <svg viewBox="0 0 24 24">162          <rect x="3" y="3" width="18" height="18" rx="3" stroke="#ccc" stroke-width="3" fill="none"/>163          <path d="M7 12l4 4 6-8" stroke="#ccc" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>164        </svg>165      </div>166      <div class="app-title">Task details</div>167      <div class="dots">168        <!-- Vertical ellipsis -->169        <svg viewBox="0 0 24 24">170          <circle cx="12" cy="5" r="2.2" fill="#bdbdbd"/>171          <circle cx="12" cy="12" r="2.2" fill="#bdbdbd"/>172          <circle cx="12" cy="19" r="2.2" fill="#bdbdbd"/>173        </svg>174      </div>175    </div>176  </div>177 178  <!-- Page content behind sheet -->179  <div class="content">180    <div class="task-line">181      <div class="circle"></div>182      <div class="task-title">Driving licence</div>183    </div>184    <div class="task-sub">Would you like to add more details?</div>185 186    <div class="project-row">187      <div class="square-icon">188        <svg viewBox="0 0 24 24">189          <rect x="3" y="3" width="7" height="7"/>190          <rect x="14" y="3" width="7" height="7"/>191          <rect x="3" y="14" width="7" height="7"/>192          <rect x="14" y="14" width="7" height="7"/>193        </svg>194      </div>195      <div>Select project</div>196    </div>197 198    <div class="date-time-row">199      <div class="calendar-icon">200        <!-- Calendar icon -->201        <svg viewBox="0 0 24 24">202          <rect x="3" y="5" width="18" height="16" rx="2"/>203          <line x1="3" y1="10" x2="21" y2="10"/>204          <line x1="7" y1="2" x2="7" y2="6"/>205          <line x1="17" y1="2" x2="17" y2="6"/>206        </svg>207      </div>208      <div class="chip">209        <span>Sun, Jul 30</span>210        <span class="close">211          <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none"/></svg>212        </span>213      </div>214      <div class="chip">215        <span>9:00 AM</span>216        <span class="close">217          <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" fill="none"/></svg>218        </span>219      </div>220      <div style="margin-left: auto; color: rgba(255,255,255,0.65); font-size: 48px;">×</div>221    </div>222  </div>223 224  <!-- Bottom sheet -->225  <div class="sheet">226    <div class="drag-handle"></div>227    <h2>Set a reminder</h2>228    <div class="list">229      <div class="list-item">Scheduled time (9:00 AM)</div>230      <div class="list-item">5 mins before (8:55 AM)</div>231      <div class="list-item">10 mins before (8:50 AM)</div>232      <div class="list-item">15 mins before (8:45 AM)</div>233      <div class="list-item">1 hour before (8:00 AM)</div>234      <div class="list-item">9:00 AM (Jul 30)</div>235      <div class="list-item">1:00 PM (Jul 30)</div>236      <div class="list-item">4:00 PM (Jul 30)</div>237    </div>238    <div class="more-row">239      <div class="ellipsis-ic">240        <svg viewBox="0 0 24 24">241          <circle cx="5" cy="12" r="2" fill="#d9d9d9"/>242          <circle cx="12" cy="12" r="2" fill="#d9d9d9"/>243          <circle cx="19" cy="12" r="2" fill="#d9d9d9"/>244        </svg>245      </div>246      <div>More options</div>247    </div>248    <div class="picker-row">249      <div class="picker-ic">250        <!-- Calendar with clock -->251        <svg viewBox="0 0 24 24">252          <rect x="3" y="4" width="11" height="10" rx="2"/>253          <line x1="3" y1="8" x2="14" y2="8"/>254          <circle cx="18" cy="15.5" r="4.5"/>255          <path d="M18 13v3l2 1" />256        </svg>257      </div>258      <div>Pick a date and time (custom)</div>259    </div>260  </div>261 262  <div class="nav-pill"></div>263</div>264</body>265</html>