GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Settings UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #1E1E1E; color: #ECECEC; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12  }13 14  /* Status bar */15  .status-bar {16    height: 100px;17    padding: 0 40px;18    display: flex; align-items: center; justify-content: space-between;19    color: #EDEDED; font-size: 36px;20  }21  .status-right {22    display: flex; align-items: center; gap: 22px;23  }24  .dot { width: 10px; height: 10px; background: #EDEDED; border-radius: 50%; display: inline-block; margin-left: 6px; opacity: 0.8; }25 26  /* Header */27  .top-bar {28    height: 120px; padding: 0 32px;29    display: flex; align-items: center; justify-content: space-between;30  }31  .top-left { display: flex; align-items: center; gap: 24px; }32  .title { font-size: 64px; font-weight: 700; letter-spacing: 0.2px; }33 34  /* List */35  .content { padding: 12px 24px 24px 24px; }36  .item {37    display: flex; align-items: center;38    padding: 30px 12px;39    border-radius: 12px;40  }41  .item + .item { margin-top: 6px; }42  .item-icon {43    width: 72px; height: 72px; border-radius: 16px;44    display: flex; align-items: center; justify-content: center;45    color: #BDBDBD;46  }47  .item-text { flex: 1; }48  .item-title { font-size: 44px; line-height: 54px; }49  .item-sub { font-size: 32px; color: #9E9E9E; margin-top: 6px; }50  .divider {51    height: 1px; background: rgba(255,255,255,0.08);52    margin: 22px 0;53  }54  .section-title {55    color: #FF6D6D; font-size: 36px; margin: 26px 12px 6px 96px;56  }57 58  .pill {59    display: inline-block; margin-left: 16px; padding: 4px 12px;60    border-radius: 12px; font-size: 28px; line-height: 28px; vertical-align: middle;61  }62  .pill.new { background: #0E3D2A; color: #9BE5B6; }63  .pill.pro { background: #8C4F00; color: #FFD27A; }64 65  /* Kebab menu */66  .kebab { width: 40px; height: 80px; display:flex; align-items:center; justify-content:center; }67  .kebab span { width: 10px; height: 10px; background:#D0D0D0; border-radius:50%; display:block; margin:6px 0; }68 69  /* Bottom gesture bar */70  .gesture {71    position: absolute; bottom: 34px; left: 50%;72    transform: translateX(-50%);73    width: 420px; height: 12px; background: #C9C9C9; border-radius: 12px; opacity: 0.6;74  }75 76  /* Icon colors */77  .accent-orange { color: #FFA000; }78  .icon-gray { color: #CFCFCF; }79 80  /* Simple utility */81  .hr-space { margin-top: 6px; }82</style>83</head>84<body>85<div id="render-target">86 87  <!-- Status bar -->88  <div class="status-bar">89    <div>9:02</div>90    <div class="status-right">91      <div>92        <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>93      </div>94      <svg width="42" height="32" viewBox="0 0 42 32" fill="none">95        <path d="M2 26h38c0-14-10-20-19-20S2 12 2 26z" fill="#DADADA"/>96      </svg>97      <svg width="36" height="32" viewBox="0 0 36 32" fill="none">98        <rect x="2" y="6" width="28" height="20" rx="5" stroke="#DADADA" stroke-width="3"/>99        <rect x="24" y="10" width="8" height="12" fill="#DADADA"/>100      </svg>101    </div>102  </div>103 104  <!-- Header -->105  <div class="top-bar">106    <div class="top-left">107      <svg width="56" height="56" viewBox="0 0 56 56">108        <path d="M34 12 L18 28 L34 44" stroke="#EDEDED" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>109      </svg>110      <div class="title">Settings</div>111    </div>112    <div class="kebab">113      <span></span><span></span><span></span>114    </div>115  </div>116 117  <!-- Content -->118  <div class="content">119 120    <!-- Upgrade to Pro -->121    <div class="item">122      <div class="item-icon accent-orange">123        <svg width="64" height="64" viewBox="0 0 64 64">124          <path d="M32 6l8 18 20 2-15 12 5 18-18-10-18 10 5-18-15-12 20-2z" fill="currentColor"/>125        </svg>126      </div>127      <div class="item-text">128        <div class="item-title">Upgrade to Pro</div>129      </div>130    </div>131 132    <!-- Account -->133    <div class="item">134      <div class="item-icon icon-gray">135        <svg width="64" height="64" viewBox="0 0 64 64">136          <circle cx="32" cy="24" r="14" fill="currentColor"/>137          <path d="M10 56c4-12 16-16 22-16s18 4 22 16H10z" fill="currentColor"/>138        </svg>139      </div>140      <div class="item-text">141        <div class="item-title">Account</div>142      </div>143    </div>144 145    <!-- General -->146    <div class="item">147      <div class="item-icon icon-gray">148        <svg width="64" height="64" viewBox="0 0 64 64">149          <circle cx="32" cy="32" r="10" fill="currentColor"/>150          <path d="M32 6v12M32 46v12M6 32h12M46 32h12M14 14l8 8M42 42l8 8M50 14l-8 8M22 42l-8 8"151                stroke="currentColor" stroke-width="4" stroke-linecap="round"/>152        </svg>153      </div>154      <div class="item-text">155        <div class="item-title">General</div>156      </div>157    </div>158 159    <div class="divider"></div>160 161    <div class="section-title">Personalization</div>162 163    <!-- Theme -->164    <div class="item">165      <div class="item-icon icon-gray">166        <svg width="64" height="64" viewBox="0 0 64 64">167          <circle cx="24" cy="24" r="14" fill="currentColor" opacity="0.9"/>168          <rect x="36" y="10" width="16" height="16" rx="4" fill="currentColor" opacity="0.6"/>169          <rect x="36" y="30" width="16" height="16" rx="4" fill="currentColor" opacity="0.4"/>170        </svg>171      </div>172      <div class="item-text">173        <div class="item-title">Theme</div>174        <div class="item-sub">Dark</div>175      </div>176    </div>177 178    <!-- App icon -->179    <div class="item">180      <div class="item-icon icon-gray">181        <svg width="64" height="64" viewBox="0 0 64 64">182          <rect x="12" y="12" width="40" height="40" rx="8" stroke="currentColor" stroke-width="4"/>183          <path d="M22 24h20M22 32h20M22 40h20" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>184        </svg>185      </div>186      <div class="item-text">187        <div class="item-title">App icon</div>188        <div class="item-sub">Todoist</div>189      </div>190    </div>191 192    <!-- Bottom app bar -->193    <div class="item">194      <div class="item-icon icon-gray">195        <svg width="64" height="64" viewBox="0 0 64 64">196          <rect x="10" y="14" width="44" height="36" rx="6" stroke="currentColor" stroke-width="4"/>197          <rect x="14" y="42" width="36" height="6" rx="3" fill="currentColor"/>198        </svg>199      </div>200      <div class="item-text">201        <div class="item-title">Bottom app bar</div>202      </div>203    </div>204 205    <!-- Navigation menu NEW -->206    <div class="item">207      <div class="item-icon icon-gray">208        <svg width="64" height="64" viewBox="0 0 64 64">209          <rect x="12" y="14" width="40" height="36" rx="6" stroke="currentColor" stroke-width="4"/>210          <path d="M22 24h20M22 32h20M22 40h20" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>211        </svg>212      </div>213      <div class="item-text">214        <div class="item-title">Navigation menu <span class="pill new">NEW</span></div>215      </div>216    </div>217 218    <!-- Quick Add NEW -->219    <div class="item">220      <div class="item-icon icon-gray">221        <svg width="64" height="64" viewBox="0 0 64 64">222          <rect x="12" y="12" width="40" height="40" rx="8" stroke="currentColor" stroke-width="4"/>223          <path d="M32 22v20M22 32h20" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>224        </svg>225      </div>226      <div class="item-text">227        <div class="item-title">Quick Add <span class="pill new">NEW</span></div>228      </div>229    </div>230 231    <div class="divider"></div>232 233    <div class="section-title">Productivity</div>234 235    <!-- Productivity -->236    <div class="item">237      <div class="item-icon icon-gray">238        <svg width="64" height="64" viewBox="0 0 64 64">239          <path d="M14 46l12-12 10 8 14-18" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>240          <path d="M44 16h10v10" stroke="currentColor" stroke-width="6" stroke-linecap="round"/>241        </svg>242      </div>243      <div class="item-text">244        <div class="item-title">Productivity</div>245      </div>246    </div>247 248    <!-- Reminders PRO -->249    <div class="item">250      <div class="item-icon icon-gray">251        <svg width="64" height="64" viewBox="0 0 64 64">252          <circle cx="32" cy="34" r="16" stroke="currentColor" stroke-width="4"/>253          <path d="M32 26v10l8 4" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>254          <path d="M22 18l-6-6M42 18l6-6" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>255        </svg>256      </div>257      <div class="item-text">258        <div class="item-title">Reminders <span class="pill pro">PRO</span></div>259      </div>260    </div>261 262    <!-- Notifications -->263    <div class="item">264      <div class="item-icon icon-gray">265        <svg width="64" height="64" viewBox="0 0 64 64">266          <path d="M32 54c4 0 6-3 6-6H26c0 3 2 6 6 6z" fill="currentColor"/>267          <path d="M12 44h40c-6-8-6-14-6-20a14 14 0 0 0-28 0c0 6 0 12-6 20z" fill="currentColor"/>268        </svg>269      </div>270      <div class="item-text">271        <div class="item-title">Notifications</div>272      </div>273    </div>274 275    <div class="divider"></div>276 277    <div class="section-title">More</div>278 279  </div>280 281  <!-- Bottom gesture bar -->282  <div class="gesture"></div>283 284</div>285</body>286</html>