GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Generated UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14    font-family: "Roboto", "Segoe UI", Arial, sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #EDEDED;25    font-size: 40px;26    letter-spacing: 0.5px;27    opacity: 0.95;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 24px;33  }34  .status-dot {35    width: 22px;36    height: 22px;37    border-radius: 50%;38    background: #EDEDED;39    opacity: 0.9;40  }41  .battery {42    width: 40px;43    height: 24px;44    border: 3px solid #EDEDED;45    border-radius: 4px;46    position: relative;47  }48  .battery::after {49    content: "";50    position: absolute;51    right: -8px;52    top: 6px;53    width: 6px;54    height: 12px;55    background: #EDEDED;56    border-radius: 2px;57  }58 59  /* Header */60  .header {61    height: 160px;62    display: flex;63    align-items: center;64    padding: 0 40px;65  }66  .back-btn {67    width: 72px;68    height: 72px;69    display: flex;70    align-items: center;71    justify-content: center;72    margin-right: 24px;73  }74  .header-title {75    font-size: 72px;76    font-weight: 500;77    flex: 1;78  }79  .kebab {80    width: 72px;81    height: 72px;82    display: flex;83    align-items: center;84    justify-content: center;85  }86 87  /* Sections & rows */88  .content {89    padding: 10px 60px 0 60px;90  }91  .section-divider {92    height: 2px;93    background: #2A2A2A;94    margin: 30px 0;95  }96  .list-row {97    display: flex;98    align-items: center;99    height: 120px;100    color: #EDEDED;101  }102  .list-row .text {103    font-size: 52px;104    font-weight: 400;105  }106  .dot {107    width: 56px;108    height: 56px;109    border-radius: 50%;110    margin-right: 28px;111    flex-shrink: 0;112  }113  .dot-blue { background: #5C8EF6; }114  .dot-purple { background: #7A78F5; }115  .dot-green { background: #7AC495; }116  .dot-teal { background: #5FA19A; }117 118  .subheader {119    font-size: 40px;120    color: #BDBDBD;121    margin: 24px 0 10px 0;122  }123  .group-title {124    font-size: 44px;125    color: #BDBDBD;126    margin-top: 40px;127    margin-bottom: 10px;128  }129 130  /* Bottom gesture bar */131  .gesture-bar {132    position: absolute;133    bottom: 34px;134    left: 50%;135    transform: translateX(-50%);136    width: 500px;137    height: 14px;138    background: #EDEDED;139    border-radius: 10px;140    opacity: 0.9;141  }142 143  /* Helper for subtle row separation */144  .row-sep {145    height: 18px;146  }147</style>148</head>149<body>150<div id="render-target">151  <!-- Status Bar -->152  <div class="status-bar">153    <div>2:58</div>154    <div class="status-icons">155      <div class="status-dot"></div>156      <div class="status-dot"></div>157      <div class="status-dot"></div>158      <div class="battery"></div>159    </div>160  </div>161 162  <!-- Header -->163  <div class="header">164    <div class="back-btn">165      <svg width="54" height="54" viewBox="0 0 24 24" fill="#EDEDED">166        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>167      </svg>168    </div>169    <div class="header-title">Settings</div>170    <div class="kebab">171      <svg width="34" height="34" viewBox="0 0 24 24" fill="#EDEDED">172        <circle cx="12" cy="5" r="2"></circle>173        <circle cx="12" cy="12" r="2"></circle>174        <circle cx="12" cy="19" r="2"></circle>175      </svg>176    </div>177  </div>178 179  <!-- Content -->180  <div class="content">181    <div class="list-row">182      <div class="text">General</div>183    </div>184    <div class="row-sep"></div>185    <div class="list-row">186      <div class="text">Events from Gmail</div>187    </div>188 189    <div class="section-divider"></div>190 191    <div class="subheader">dbwscratch.test.id8@gmail.com</div>192 193    <div class="list-row">194      <div class="dot dot-blue"></div>195      <div class="text">Events</div>196    </div>197    <div class="list-row">198      <div class="dot dot-purple"></div>199      <div class="text">Tasks</div>200    </div>201 202    <div class="group-title">More</div>203 204    <div class="list-row">205      <div class="dot dot-green"></div>206      <div class="text">Birthdays</div>207    </div>208    <div class="list-row">209      <div class="dot dot-teal"></div>210      <div class="text">Holidays</div>211    </div>212  </div>213 214  <!-- Bottom gesture bar -->215  <div class="gesture-bar"></div>216</div>217</body>218</html>