GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Tasks - Add Reminder</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111314;15    border-radius: 0;16  }17 18  /* Status bar and app bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 100px;25    background: #0f4d7a;26    color: #e4f0f6;27    font-size: 36px;28    letter-spacing: 1px;29  }30  .status-left { position: absolute; left: 36px; top: 28px; }31  .status-right { position: absolute; right: 36px; top: 28px; }32 33  .app-bar {34    position: absolute;35    top: 100px;36    left: 0;37    width: 1080px;38    height: 140px;39    background: #0f4d7a;40    color: #dce7ee;41    display: flex;42    align-items: center;43    padding: 0 36px;44    box-sizing: border-box;45  }46  .app-title {47    font-size: 56px;48    font-weight: 600;49    margin-left: 28px;50    flex: 1;51  }52  .app-actions svg { margin-left: 36px; }53 54  /* Warning bar */55  .warning {56    position: absolute;57    top: 240px;58    left: 0;59    width: 1080px;60    padding: 20px 36px;61    box-sizing: border-box;62    color: #d84a4a;63    font-size: 36px;64    display: flex;65    align-items: center;66    gap: 20px;67  }68  .warning .enable-btn {69    margin-left: auto;70    background: #2b79ff;71    color: #eaf2ff;72    border: 1px solid rgba(255,255,255,0.2);73    padding: 16px 30px;74    border-radius: 10px;75    font-weight: 600;76    box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;77    font-size: 36px;78  }79 80  /* Card (Add Reminder) */81  .card {82    position: absolute;83    left: 30px;84    top: 480px;85    width: 1020px;86    background: #303336;87    border-radius: 12px;88    box-shadow: 0 20px 40px rgba(0,0,0,0.45);89    overflow: hidden;90    color: #eaeff3;91  }92  .card-header {93    background: #1da1ff;94    height: 120px;95    display: flex;96    align-items: center;97    padding: 0 26px;98    box-sizing: border-box;99  }100  .card-header .title {101    font-size: 48px;102    font-weight: 600;103    margin-left: 18px;104  }105  .save-chip {106    margin-left: auto;107    background: #f5fbff;108    color: #1b6acd;109    border-radius: 14px;110    padding: 18px 28px;111    font-weight: 700;112    border: 1px solid rgba(0,0,0,0.08);113    font-size: 34px;114  }115 116  .field {117    display: flex;118    align-items: center;119    height: 132px;120    border-top: 1px solid rgba(255,255,255,0.08);121    padding: 0 26px;122    box-sizing: border-box;123    font-size: 44px;124    color: #f1f5f8;125  }126  .field.placeholder { color: #b6bcc1; }127  .field .left-ico { width: 72px; display: flex; justify-content: center; margin-right: 22px; opacity: 0.9; }128  .field .right-ico { margin-left: auto; opacity: 0.6; }129  .field .inline-link { color: #2d87ff; font-size: 34px; margin-left: 18px; }130  .spacer { height: 18px; }131 132  /* Bottom ad placeholder */133  .ad {134    position: absolute;135    left: 0;136    bottom: 120px;137    width: 1080px;138    height: 170px;139    background: #E0E0E0;140    border-top: 1px solid #BDBDBD;141    border-bottom: 1px solid #BDBDBD;142    display: flex;143    justify-content: center;144    align-items: center;145    color: #757575;146    font-size: 36px;147  }148 149  /* Home indicator */150  .home-indicator {151    position: absolute;152    bottom: 40px;153    left: 50%;154    transform: translateX(-50%);155    width: 320px;156    height: 12px;157    border-radius: 8px;158    background: #e6e6e6;159    opacity: 0.9;160  }161 162  /* Simple icon styling */163  svg { fill: none; stroke: currentColor; stroke-width: 6; }164  .solid svg { fill: currentColor; stroke: none; }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="status-bar">172    <div class="status-left">6:19  ◯ ◯ ◯ ⚽ •</div>173    <div class="status-right">📶 🔋</div>174  </div>175 176  <!-- App bar -->177  <div class="app-bar">178    <!-- Hamburger -->179    <div class="solid" style="color:#cde6f5;">180      <svg width="64" height="64" viewBox="0 0 24 24">181        <rect x="3" y="5" width="18" height="2"></rect>182        <rect x="3" y="11" width="18" height="2"></rect>183        <rect x="3" y="17" width="18" height="2"></rect>184      </svg>185    </div>186    <div class="app-title">Tasks</div>187    <div class="app-actions" style="color:#cde6f5; display:flex; align-items:center;">188      <!-- Add -->189      <svg width="64" height="64" viewBox="0 0 24 24">190        <circle cx="12" cy="12" r="9"></circle>191        <path d="M12 8v8M8 12h8"></path>192      </svg>193      <!-- Check -->194      <svg width="64" height="64" viewBox="0 0 24 24">195        <circle cx="12" cy="12" r="9"></circle>196        <path d="M7 12l3 3 7-7"></path>197      </svg>198      <!-- Search -->199      <svg width="64" height="64" viewBox="0 0 24 24">200        <circle cx="11" cy="11" r="7"></circle>201        <path d="M20 20l-4-4"></path>202      </svg>203    </div>204  </div>205 206  <!-- Warning -->207  <div class="warning">208    <div style="font-size:44px; margin-right:12px;">❗</div>209    <div>Please allow app to send you notification</div>210    <div class="enable-btn">Enable</div>211  </div>212 213  <!-- Add Reminder card -->214  <div class="card">215    <div class="card-header">216      <!-- Close icon -->217      <div style="color:#0b2946;">218        <svg width="58" height="58" viewBox="0 0 24 24">219          <path d="M5 5l14 14M19 5L5 19"></path>220        </svg>221      </div>222      <div class="title">Add Reminder</div>223      <div class="save-chip">SAVE</div>224    </div>225 226    <div class="field">227      <div class="left-ico solid" style="color:#9aa3aa;">228        <svg width="44" height="44" viewBox="0 0 24 24">229          <circle cx="12" cy="12" r="0"></circle>230        </svg>231      </div>232      <div>Roslyn Flower Show</div>233      <div class="right-ico">234        <svg width="46" height="46" viewBox="0 0 24 24">235          <path d="M12 3v10"></path>236          <path d="M8 13a4 4 0 0 0 8 0"></path>237          <path d="M10 21h4"></path>238        </svg>239      </div>240    </div>241 242    <div class="field placeholder">243      <div class="left-ico"></div>244      <div>Write short note</div>245      <div class="right-ico">246        <svg width="46" height="46" viewBox="0 0 24 24">247          <path d="M12 3v10"></path>248          <path d="M8 13a4 4 0 0 0 8 0"></path>249          <path d="M10 21h4"></path>250        </svg>251      </div>252    </div>253 254    <div class="field">255      <div class="left-ico">256        <svg width="46" height="46" viewBox="0 0 24 24">257          <rect x="3" y="5" width="18" height="16" rx="2"></rect>258          <path d="M3 9h18"></path>259          <path d="M7 3v4M17 3v4"></path>260        </svg>261      </div>262      <div>Sat, Oct 14, 2023</div>263      <div class="right-ico">264        <svg width="42" height="42" viewBox="0 0 24 24">265          <path d="M6 6l12 12M18 6L6 18"></path>266        </svg>267      </div>268    </div>269 270    <div class="field">271      <div class="left-ico">272        <svg width="46" height="46" viewBox="0 0 24 24">273          <circle cx="12" cy="13" r="8"></circle>274          <path d="M12 9v4l3 2"></path>275          <path d="M12 3v2"></path>276        </svg>277      </div>278      <div>01:30 PM</div>279      <div class="inline-link">+Add more time</div>280      <div class="right-ico">281        <svg width="42" height="42" viewBox="0 0 24 24">282          <path d="M6 6l12 12M18 6L6 18"></path>283        </svg>284      </div>285    </div>286 287    <div class="field">288      <div class="left-ico">289        <svg width="46" height="46" viewBox="0 0 24 24">290          <circle cx="12" cy="13" r="8"></circle>291          <path d="M12 7v6l4 2"></path>292        </svg>293      </div>294      <div>Remind me before</div>295      <div class="right-ico">296        <svg width="36" height="36" viewBox="0 0 24 24">297          <path d="M9 6l6 6-6 6"></path>298        </svg>299      </div>300    </div>301 302    <div class="field">303      <div class="left-ico">304        <svg width="46" height="46" viewBox="0 0 24 24">305          <path d="M4 13h6v7H4zM14 4h6v16h-6z"></path>306          <path d="M7 13V7M17 4v6"></path>307        </svg>308      </div>309      <div>Repeat: No repeat</div>310      <div class="right-ico">311        <svg width="36" height="36" viewBox="0 0 24 24">312          <path d="M9 6l6 6-6 6"></path>313        </svg>314      </div>315    </div>316    <div class="spacer"></div>317  </div>318 319  <!-- Ad placeholder -->320  <div class="ad">[IMG: Advertisement Banner]</div>321 322  <!-- Home indicator -->323  <div class="home-indicator"></div>324</div>325</body>326</html>