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 Mock</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: #2f2f2f;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    background: #3F7FE7;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #fff;27    font-size: 40px;28    letter-spacing: 0.5px;29  }30  .status-left { display: flex; align-items: center; gap: 24px; }31  .status-right { display: flex; align-items: center; gap: 28px; }32 33  /* Top app bar */34  .app-bar {35    height: 176px;36    background: #4A86E8;37    display: flex;38    align-items: center;39    padding: 0 28px;40    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.08);41  }42  .app-left { display: flex; align-items: center; gap: 28px; }43  .title { font-size: 72px; font-weight: 600; }44  .app-right { margin-left: auto; display: flex; align-items: center; gap: 40px; }45 46  /* Alert banner */47  .alert {48    height: 120px;49    background: #4a4a4a;50    display: flex;51    align-items: center;52    padding: 0 28px;53    gap: 24px;54    color: #F0625D;55    font-size: 44px;56  }57  .alert .secondary {58    color: #F0625D;59    font-weight: 600;60  }61  .alert .how-btn {62    margin-left: auto;63    background: #5a6370;64    color: #BBD3FF;65    padding: 18px 32px;66    border-radius: 8px;67    font-size: 40px;68  }69 70  /* Section header */71  .section {72    height: 96px;73    display: flex;74    align-items: center;75    padding: 0 28px;76    color: #6EB2FF;77    font-size: 56px;78    font-weight: 600;79    background: rgba(255,255,255,0.02);80  }81 82  /* Task card */83  .task-card {84    padding: 24px 28px 0;85    color: #eaeaea;86  }87  .task-title {88    font-size: 64px;89    font-weight: 600;90    margin: 12px 0 18px;91    line-height: 1.2;92  }93  .task-meta {94    display: flex;95    flex-direction: column;96    gap: 18px;97    color: #cfcfcf;98    font-size: 44px;99  }100  .meta-row {101    display: flex;102    align-items: center;103    gap: 16px;104  }105  .task-top {106    display: flex;107    align-items: flex-start;108  }109  .task-top .chevron {110    margin-left: auto;111    margin-top: 18px;112    opacity: 0.85;113  }114 115  /* Action bar */116  .action-bar {117    margin-top: 20px;118    height: 116px;119    background: #4589F1;120    display: flex;121    align-items: center;122    justify-content: space-around;123    color: #fff;124    font-size: 48px;125    font-weight: 600;126  }127 128  /* Floating action button */129  .fab {130    position: absolute;131    right: 40px;132    bottom: 280px;133    width: 140px;134    height: 140px;135    border-radius: 50%;136    background: #4A86E8;137    display: flex;138    align-items: center;139    justify-content: center;140    box-shadow: 0 8px 18px rgba(0,0,0,0.35);141  }142 143  /* Bottom ad banner */144  .ad-banner {145    position: absolute;146    left: 0;147    bottom: 96px;148    width: 100%;149    height: 168px;150    background: #ffffff;151    color: #2b2b2b;152    display: flex;153    align-items: center;154    padding: 0 28px;155    box-shadow: 0 -2px 0 rgba(0,0,0,0.1);156  }157  .ad-icon {158    width: 120px;159    height: 120px;160    background: #9DE1DA;161    border-radius: 16px;162    display: flex;163    align-items: center;164    justify-content: center;165    margin-right: 24px;166  }167  .ad-text {168    display: flex;169    flex-direction: column;170  }171  .ad-title {172    font-size: 54px;173    color: #3CB6B0;174    font-weight: 700;175    line-height: 1;176  }177  .ad-sub {178    font-size: 40px;179    color: #333;180    margin-top: 8px;181  }182  .ad-avatars {183    margin-left: auto;184    display: flex;185    align-items: center;186    gap: 24px;187  }188  .avatar {189    width: 96px;190    height: 96px;191    border-radius: 50%;192    background: #E0E0E0;193    border: 1px solid #BDBDBD;194    display: flex;195    align-items: center;196    justify-content: center;197    color: #757575;198    font-size: 24px;199  }200  .avatar-wrap {201    display: flex;202    flex-direction: column;203    align-items: center;204    gap: 8px;205    color: #666;206    font-size: 28px;207  }208 209  /* Home indicator */210  .home-indicator {211    position: absolute;212    bottom: 24px;213    left: 50%;214    transform: translateX(-50%);215    width: 360px;216    height: 16px;217    background: #000;218    opacity: 0.12;219    border-radius: 10px;220  }221 222  /* Simple icon styling */223  svg { display: block; }224  .icon-32 { width: 48px; height: 48px; }225  .icon-40 { width: 56px; height: 56px; }226  .icon-60 { width: 72px; height: 72px; }227  .icon-80 { width: 96px; height: 96px; }228 229</style>230</head>231<body>232<div id="render-target">233 234  <!-- Status Bar -->235  <div class="status-bar">236    <div class="status-left">237      <div>12:26</div>238      <d