GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Tasks UI</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#F7F8FA;12    border-radius:24px;13  }14 15  /* Status bar */16  .status-bar {17    height:120px;18    background:#ffffff;19    display:flex;20    align-items:center;21    padding:0 32px;22    color:#30343A;23    font-weight:500;24    font-size:40px;25    box-shadow: 0 1px 0 rgba(0,0,0,0.06);26  }27  .status-left { display:flex; align-items:center; gap:18px; }28  .status-right { margin-left:auto; display:flex; align-items:center; gap:26px; }29  .icon-wifi, .icon-battery {30    width:44px; height:28px;31  }32 33  /* Search header */34  .search-header {35    background:#ffffff;36    padding:22px 32px 28px 32px;37    position:relative;38  }39  .search-row {40    display:flex; align-items:center; gap:28px;41    padding-top:12px;42  }43  .search-text {44    color:#6A6D72; font-size:64px; font-weight:500;45  }46  .back-icon { width:52px; height:52px; }47  .search-underline {48    position:absolute; left:32px; right:32px; bottom:0;49    height:4px; background:#E6E7EA;50  }51 52  /* Content sections */53  .content { padding:28px 24px 0 24px; }54  .section { margin-top:26px; }55  .section-title {56    display:flex; align-items:center; gap:12px;57    color:#3A3D42; font-size:48px; font-weight:700;58    padding:8px 14px;59  }60  .caret-up {61    width:0; height:0;62    border-left:16px solid transparent;63    border-right:16px solid transparent;64    border-bottom:22px solid #8A8E96;65    margin-left:8px;66  }67 68  .card {69    margin:22px 8px 10px 8px;70    background:#FFFFFF;71    border-radius:28px;72    box-shadow: 0 2px 0 rgba(0,0,0,0.06);73    padding:28px 28px;74  }75  .card-row {76    display:flex; align-items:center;77  }78  .check-circle {79    width:64px; height:64px;80    border:4px solid #C9CDD3; border-radius:50%;81    margin-right:26px;82  }83  .task-title {84    font-size:52px; color:#1F2328; flex:1;85  }86  .flag-icon { width:48px; height:48px; }87  .date-row {88    margin-left:94px; margin-top:18px;89    color:#9AA0A6; font-size:38px; display:flex; align-items:center; gap:14px;90  }91  .date-red { color:#D54B4B; }92  .bell-icon { width:40px; height:40px; }93 94  /* Keyboard */95  .keyboard {96    position:absolute; left:0; right:0; bottom:0;97    height:900px;98    background:#121212;99    border-top-left-radius:24px; border-top-right-radius:24px;100    padding:40px 36px 30px 36px;101    color:#EDE7DB;102  }103  .kb-tools { display:flex; gap:34px; margin-bottom:24px; }104  .tool-btn {105    width:72px; height:72px; background:#1F1F1F;106    border-radius:18px; display:flex; align-items:center; justify-content:center;107    color:#F0E6D2; font-size:36px;108  }109 110  .kb-row { display:flex; gap:10px; justify-content:center; margin-top:22px; }111  .key {112    width:84px; height:120px; border-radius:16px;113    background:#262626; display:flex; align-items:center; justify-content:center;114    font-size:46px; color:#EFE7D5;115  }116  .kb-bottom {117    display:flex; align-items:center; gap:14px; margin-top:32px;118  }119  .bottom-left { display:flex; gap:16px; }120  .wide-key { flex:1; height:120px; border-radius:18px; background:#262626; display:flex; align-items:center; justify-content:center; font-size:42px; color:#EFE7D5; }121  .circle-btn {122    width:132px; height:132px; border-radius:66px;123    background:#FFDFA0; display:flex; align-items:center; justify-content:center;124    position:absolute; right:36px; bottom:36px;125  }126</style>127</head>128<body>129<div id="render-target">130 131  <!-- Status Bar -->132  <div class="status-bar">133    <div class="status-left">134      <span>9:24</span>135      <span style="color:#888;">•</span>136      <span style="color:#888;">88°</span>137      <span style="color:#888;">•</span>138    </div>139    <div class="status-right">140      <!-- WiFi -->141      <svg class="icon-wifi" viewBox="0 0 48 28">142        <path d="M4 10c8-8 28-8 36 0" stroke="#4A4D52" stroke-width="3" fill="none" stroke-linecap="round"/>143        <path d="M10 16c6-6 18-6 26 0" stroke="#4A4D52" stroke-width="3" fill="none" stroke-linecap="round"/>144        <circle cx="24" cy="22" r="3" fill="#4A4D52"/>145      </svg>146      <!-- Battery -->147      <svg class="icon-battery" viewBox="0 0 48 28">148        <rect x="2" y="6" width="38" height="16" rx="3" stroke="#4A4D52" stroke-width="3" fill="none"/>149        <rect x="6" y="9" width="26" height="10" rx="2" fill="#4A4D52"/>150        <rect x="41" y="10" width="5" height="8" rx="1" fill="#4A4D52"/>151      </svg>152    </div>153  </div>154 155  <!-- Search Header -->156  <div class="search-header">157    <div class="search-row">158      <svg class="back-icon" viewBox="0 0 48 48">159        <path d="M28 8 L12 24 L28 40" stroke="#43464B" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160      </svg>161      <div class="search-text">Search...</div>162    </div>163    <div class="search-underline"></div>164  </div>165 166  <!-- Content -->167  <div class="content">168 169    <!-- Previous -->170    <div class="section">171      <div class="section-title">Previous <div class="caret-up"></div></div>172      <div class="card">173        <div class="card-row">174          <div class="check-circle"></div>175          <div class="task-title">Buy groceries</div>176          <svg class="flag-icon" viewBox="0 0 48 48">177            <path d="M10 8v32M12 10l20 4v14l-20-4" stroke="#969AA2" stroke-width="4" fill="none" stroke-linejoin="round"/>178          </svg>179        </div>180        <div class="date-row"><span class="date-red">12-21</span></div>181      </div>182    </div>183 184    <!-- Today -->185    <div class="section">186      <div class="section-title">Today <div class="caret-up"></div></div>187      <div class="card">188        <div class="card-row">189          <div class="check-circle"></div>190          <div class="task-title">Buy Milk and Chicken</div>191          <svg class="flag-icon" viewBox="0 0 48 48">192            <path d="M10 8v32M12 10l20 4v14l-20-4" stroke="#969AA2" stroke-width="4" fill="none" stroke-linejoin="round"/>193          </svg>194        </div>195      </div>196    </div>197 198    <!-- Future -->199    <div class="section">200      <div class="section-title">Future <div class="caret-up"></div></div>201      <div class="card">202        <div class="card-row">203          <div class="check-circle"></div>204          <div class="task-title">Buy New Balance Hiking shoes</div>205          <svg class="flag-icon" viewBox="0 0 48 48">206            <path d="M10 8v32M12 10l20 4v14l-20-4" stroke="#969AA2" stroke-width="4" fill="none" stroke-linejoin="round"/>207          </svg>208        </div>209        <div class="date-row">210          <span>12-23 07:00 AM</span>211          <svg class="bell-icon" viewBox="0 0 48 48">212            <path d="M24 40c3 0 6-2 6-4H18c0 2 3 4 6 4Z" fill="#8F949B"/>213            <path d="M10 30h28c-3-3-4-8-4-12 0-6-4-10-10-10s-10 4-10 10c0 4-1 9-4 12Z" fill="none" stroke="#8F949B" stroke-width="3" />214          </svg>215        </div>216      </div>217    </div>218 219  </div>220 221  <!-- Keyboard -->222  <div class="keyboard">223    <div class="kb-tools">224      <div class="tool-btn">⌂</div>225      <div class="tool-btn">🙂</div>226      <div class="tool-btn">GIF</div>227      <div class="tool-btn">⚙️</div>228      <div class="tool-btn">🈯</div>229      <div class="tool-btn">🎨</div>230      <div class="tool-btn">🎤</div>231    </div>232 233    <div class="kb-row">234      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>235    </div>236    <div class="kb-row" style="padding:0 40px;">237      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>238    </div>239    <div class="kb-row" style="padding:0 120px;">240      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>241    </div>242 243    <div class="kb-bottom">244      <div class="bottom-left" style="width:100%;">245        <div class="key" style="width:160px;">?123</div>246        <div class="key" style="width:120px;">,</div>247        <div class="wide-key">space</div>248        <div class="key" style="width:120px;">.</div>249      </div>250    </div>251 252    <div class="circle-btn">253      <!-- Search icon -->254      <svg viewBox="0 0 48 48" width="64" height="64">255        <circle cx="20" cy="20" r="14" stroke="#3D3D3D" stroke-width="4" fill="none"/>256        <line x1="32" y1="32" x2="44" y2="44" stroke="#3D3D3D" stroke-width="4" stroke-linecap="round"/>257      </svg>258    </div>259  </div>260 261</div>262</body>263</html>