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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #3f3f3f;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 150px;24    background: #1E88E5;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-size: 46px;31    letter-spacing: 0.5px;32  }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .status-icon {40    display: inline-flex;41    align-items: center;42    justify-content: center;43  }44 45  /* App toolbar */46  .toolbar {47    position: absolute;48    top: 150px;49    left: 0;50    width: 1080px;51    height: 170px;52    background: #42A5F5;53    color: #fff;54    display: flex;55    align-items: center;56    padding: 0 40px;57    box-sizing: border-box;58  }59  .toolbar-title {60    font-size: 80px;61    font-weight: 500;62    margin-left: 26px;63  }64  .toolbar-actions {65    margin-left: auto;66    display: flex;67    align-items: center;68    gap: 42px;69  }70 71  /* Notification banner */72  .notify-bar {73    position: absolute;74    top: 320px;75    left: 0;76    width: 1080px;77    height: 120px;78    display: flex;79    align-items: center;80    box-sizing: border-box;81    padding: 0 40px;82    color: #E53935;83    gap: 24px;84    border-top: 1px solid #424242;85    border-bottom: 1px solid #424242;86  }87  .alert-dot {88    width: 54px;89    height: 54px;90    border-radius: 50%;91    background: #fff;92    border: 3px solid #E53935;93    color: #E53935;94    display: flex;95    align-items: center;96    justify-content: center;97    font-weight: 700;98    font-size: 40px;99    line-height: 40px;100  }101  .notify-text {102    font-size: 40px;103    flex: 1;104  }105  .btn-enable {106    background: #2196F3;107    color: #fff;108    border: none;109    border-radius: 8px;110    padding: 18px 28px;111    font-size: 40px;112    box-shadow: 0 4px 0 rgba(0,0,0,0.35);113    cursor: default;114  }115 116  /* Content */117  .content {118    position: absolute;119    top: 500px;120    left: 0;121    width: 1080px;122    text-align: center;123    color: #BDBDBD;124  }125  .image-placeholder {126    width: 440px;127    height: 440px;128    margin: 0 auto 40px;129    background: #E0E0E0;130    border: 1px solid #BDBDBD;131    display: flex;132    align-items: center;133    justify-content: center;134    color: #757575;135    font-size: 34px;136  }137  .headline {138    font-size: 64px;139    line-height: 1.2;140    margin: 40px 80px;141  }142  .btn {143    background: #2196F3;144    color: #fff;145    border: none;146    border-radius: 8px;147    font-size: 44px;148    padding: 26px 30px;149    box-shadow: 0 6px 0 rgba(0,0,0,0.35);150    display: inline-block;151  }152  .btn.small { width: 420px; }153  .btn.wide { width: 760px; }154  .btn + .btn { margin-top: 34px; }155  .link {156    color: #64B5F6;157    font-size: 44px;158    margin-top: 40px;159    display: inline-block;160    text-decoration: underline;161  }162 163  /* Bottom ad banner */164  .bottom-ad {165    position: absolute;166    bottom: 110px;167    left: 0;168    width: 1080px;169    height: 200px;170    background: #E0E0E0;171    border-top: 1px solid #BDBDBD;172    border-bottom: 1px solid #BDBDBD;173    display: flex;174    align-items: center;175    justify-content: center;176    color: #757575;177    font-size: 40px;178  }179 180  /* Gesture bar */181  .gesture {182    position: absolute;183    bottom: 40px;184    left: 50%;185    transform: translateX(-50%);186    width: 360px;187    height: 16px;188    background: #E0E0E0;189    border-radius: 10px;190    opacity: 0.9;191  }192 193  /* Simple SVG helpers */194  .icon {195    width: 72px; height: 72px;196  }197  .icon.medium { width: 64px; height: 64px; }198  .icon.small { width: 52px; height: 52px; }199  .icon path, .icon circle, .icon line {200    stroke: #fff;201    fill: none;202    stroke-width: 3;203    stroke-linecap: round;204    stroke-linejoin: round;205  }206</style>207</head>208<body>209<div id="render-target">210  <!-- Status bar -->211  <div class="status-bar">212    <div>6:04</div>213    <div class="status-right">214      <!-- Minimal status icons -->215      <div class="status-icon">216        <svg class="icon small" viewBox="0 0 24 24">217          <path d="M3 12c4-4 14-4 18 0" />218          <path d="M7 12c3-3 7-3 10 0" />219          <circle cx="12" cy="17" r="2" />220        </svg>221      </div>222      <div class="status-icon">223        <svg class="icon small" viewBox="0 0 24 24">224          <rect x="3" y="6" width="14" height="12" rx="2" />225          <rect x="19" y="9" width="2" height="6" />226        </svg>227      </div>228    </div>229  </div>230 231  <!-- Toolbar -->232  <div class="toolbar">233    <!-- Hamburger -->234    <svg class="icon" viewBox="0 0 24 24">235      <path d="M3 6h18M3 12h18M3 18h18"></path>236    </svg>237    <div class="toolbar-title">Tasks</div>238    <div class="toolbar-actions">239      <!-- Alarm + icon -->240      <svg class="icon medium" viewBox="0 0 24 24">241        <circle cx="12" cy="12" r="7"></circle>242        <line x1="12" y1="9" x2="12" y2="15"></line>243        <line x1="9" y1="12" x2="15" y2="12"></line>244      </svg>245      <!-- Check circle -->246      <svg class="icon medium" viewBox="0 0 24 24">247        <circle cx="12" cy="12" r="7"></circle>248        <path d="M8 12l3 3 5-5"></path>249      </svg>250      <!-- Search -->251      <svg class="icon medium" viewBox="0 0 24 24">252        <circle cx="10" cy="10" r="6"></circle>253        <line x1="15" y1="15" x2="21" y2="21"></line>254      </svg>255    </div>256  </div>257 258  <!-- Notification permission banner -->259  <div class="notify-bar">260    <div class="alert-dot">!</div>261    <div class="notify-text">Please allow app to send you notification</div>262    <button class="btn-enable">Enable</button>263  </div>264 265  <!-- Main content -->266  <div class="content">267    <div class="image-placeholder">[IMG: Alarm Clock Illustration]</div>268    <div class="headline">Anything you want me to remind you?<br>easy.!!</div>269    <div>270      <button class="btn small">Add Reminder</button>271    </div>272    <div>273      <button class="btn wide" style="margin-top:34px;">Restore backup from Google drive</button>274    </div>275    <a class="link" href="#">User Guide(FAQ)</a>276  </div>277 278  <!-- Bottom ad -->279  <div class="bottom-ad">[IMG: Promotional Banner Ad - Flash Deal]</div>280 281  <!-- Gesture bar -->282  <div class="gesture"></div>283</div>284</body>285</html>