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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0b0b0b;13    border-radius: 36px;14    box-shadow: 0 10px 30px rgba(0,0,0,0.35);15    color: #fff;16  }17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 96px; padding: 22px 36px 0 36px;20    display: flex; align-items: center; justify-content: space-between;21    color: #ffffffcc; font-size: 30px; letter-spacing: 0.2px;22  }23  .status-icons { display: flex; align-items: center; gap: 20px; }24  .header {25    position: absolute; left: 36px; top: 140px; right: 36px;26  }27  .back-row { display: flex; align-items: center; gap: 18px; }28  .back-row svg { width: 38px; height: 38px; fill: none; stroke: #8b90d9; stroke-width: 6; }29  .title {30    margin-top: 12px;31    font-size: 96px; font-weight: 700; color: #7f8bd4;32    letter-spacing: 0.5px;33  }34  .kebab {35    position: absolute; right: 18px; top: 8px;36    width: 14px; height: 56px; display: flex; align-items: center; justify-content: center;37  }38  .kebab svg { fill: #6f6f7a; width: 14px; height: 56px; }39  .task-card {40    position: absolute; left: 36px; right: 36px; top: 370px;41    background: #151515; border-radius: 26px;42    padding: 32px 28px; display: flex; align-items: center; justify-content: space-between;43    box-shadow: inset 0 0 0 1px #1e1e1e;44  }45  .task-left { display: flex; align-items: center; gap: 26px; }46  .check-circle {47    width: 60px; height: 60px; border-radius: 50%;48    border: 3px solid #5b5b60; box-sizing: border-box;49  }50  .task-texts { display: flex; flex-direction: column; gap: 8px; }51  .task-title { font-size: 42px; font-weight: 600; color: #eaeaf1; }52  .task-sub { display: flex; align-items: center; gap: 14px; font-size: 34px; color: #c95050; }53  .task-sub .icon-square {54    width: 26px; height: 26px; border-radius: 6px; background: #c95050;55  }56  .star {57    width: 48px; height: 48px;58  }59  .divider {60    position: absolute; left: 36px; right: 36px; top: 540px;61    height: 2px; background: #1a1a1a;62  }63  /* Bottom sheet */64  .sheet {65    position: absolute; left: 0; right: 0; bottom: 0;66    height: 1500px; background: #1f1f1f;67    border-top-left-radius: 34px; border-top-right-radius: 34px;68    box-shadow: 0 -20px 40px rgba(0,0,0,0.55);69  }70  .sheet .handle {71    width: 120px; height: 14px; background: #606064;72    border-radius: 8px; margin: 18px auto 34px auto;73  }74  .sheet-title {75    text-align: center; font-size: 54px; font-weight: 700; color: #ffffff;76  }77  .illustration {78    width: 900px; height: 560px; margin: 38px auto 40px auto;79    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 40px;80    display: flex; align-items: center; justify-content: center;81    color: #757575; font-size: 36px; text-align: center; padding: 20px;82  }83  .blue-headline {84    text-align: center; font-size: 64px; font-weight: 800; color: #7ea7ff;85    padding: 0 60px; line-height: 1.15;86  }87  .sheet-desc {88    margin: 22px auto 0 auto; width: 900px; text-align: center;89    font-size: 34px; line-height: 1.55; color: #b4b4b4;90  }91  .sheet-footer {92    position: absolute; left: 0; right: 0; bottom: 100px;93    display: flex; align-items: center; justify-content: space-between;94    padding: 0 36px;95    color: #cfcfcf; font-size: 36px;96  }97  .dots { display: flex; gap: 16px; align-items: center; }98  .dot {99    width: 16px; height: 16px; border-radius: 50%; background: #8a8a8a;100    opacity: 0.6;101  }102  .dot.active { background: #e6e6e6; opacity: 1; width: 18px; height: 18px; }103  .arrow-btn svg { width: 44px; height: 44px; stroke: #cfcfcf; stroke-width: 6; fill: none; }104  .home-indicator {105    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);106    width: 280px; height: 10px; border-radius: 6px; background: #bdbdbd5a;107  }108  /* Simple icons */109  .wifi-icon, .battery-icon { width: 34px; height: 34px; }110  .wifi-icon path, .battery-icon path { fill: #ffffffcc; }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="status-bar">118    <div class="time">8:17</div>119    <div class="status-icons">120      <!-- Wifi -->121      <svg class="wifi-icon" viewBox="0 0 24 24"><path d="M12 18.5a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6Zm-6.5-6a12 12 0 0 1 13 0l-1.6 1.6a9.5 9.5 0 0 0-9.8 0L5.5 12.5Zm-3-3a17 17 0 0 1 19 0l-1.6 1.6a14.3 14.3 0 0 0-15.9 0L2.5 9.5Z"/></svg>122      <!-- Battery -->123      <svg class="battery-icon" viewBox="0 0 24 24"><path d="M18 7h2v10h-2v2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h14v0Zm-2 2H4v8h12V9Z"/></svg>124    </div>125  </div>126 127  <!-- Header -->128  <div class="header">129    <div class="back-row">130      <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>131    </div>132    <div class="title">Tasks</div>133    <div class="kebab">134      <svg viewBox="0 0 6 24">135        <circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/>136      </svg>137    </div>138  </div>139 140  <!-- Task card -->141  <div class="task-card">142    <div class="task-left">143      <div class="check-circle"></div>144      <div class="task-texts">145        <div class="task-title">Fun time</div>146        <div class="task-sub">147          <div class="icon-square"></div>148          <span>Yesterday</span>149        </div>150      </div>151    </div>152    <!-- star icon -->153    <svg class="star" viewBox="0 0 24 24">154      <path d="M12 2l3.2 6.5 7.1 1-5.1 5 1.2 7.1L12 18l-6.4 3.6 1.2-7.1-5.1-5 7.1-1L12 2Z" fill="none" stroke="#6b6b73" stroke-width="2"/>155    </svg>156  </div>157  <div class="divider"></div>158 159  <!-- Bottom sheet -->160  <div class="sheet">161    <div class="handle"></div>162    <div class="sheet-title">What's New</div>163 164    <div class="illustration">[IMG: Phone illustration showing "Change Theme"]</div>165 166    <div class="blue-headline">Customised background for lists</div>167 168    <div class="sheet-desc">169      Set your own photo from your gallery as the background of your list. Go to List Settings, tap on Change Theme, select Customised, and pick a photo from your gallery to set as the background.170    </div>171 172    <div class="sheet-footer">173      <div class="skip">Skip</div>174      <div class="dots">175        <div class="dot"></div>176        <div class="dot"></div>177        <div class="dot active"></div>178        <div class="dot"></div>179        <div class="dot"></div>180      </div>181      <div class="arrow-btn">182        <svg viewBox="0 0 24 24"><path d="M7 4l10 8-10 8" /></svg>183      </div>184    </div>185 186    <div class="home-indicator"></div>187  </div>188 189</div>190</body>191</html>