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>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111213;15    font-family: Arial, Helvetica, sans-serif;16    color: #D7D7D7;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    color: #FFFFFF;31    font-size: 42px;32    letter-spacing: 1px;33  }34  .status-left { display: flex; align-items: center; gap: 18px; }35  .notif-dots { display: flex; gap: 14px; margin-left: 14px; }36  .notif-dots span {37    width: 18px; height: 18px; background: #FFFFFF; border-radius: 50%;38    display: inline-block; opacity: 0.9;39  }40  .status-right { display: flex; align-items: center; gap: 24px; }41  .status-icon svg { width: 40px; height: 40px; fill: #FFFFFF; }42 43  /* Header / back */44  .back-arrow {45    position: absolute;46    top: 160px;47    left: 36px;48    width: 72px;49    height: 72px;50    border-radius: 36px;51    display: flex;52    align-items: center;53    justify-content: center;54  }55  .back-arrow svg { width: 40px; height: 40px; fill: #D0D0D0; }56 57  .title {58    position: absolute;59    top: 310px;60    left: 60px;61    font-size: 120px;62    font-weight: 500;63    color: #9E9E9E;64    letter-spacing: 0.5px;65  }66 67  /* Center content */68  .avatar {69    position: absolute;70    top: 680px;71    left: 50%;72    transform: translateX(-50%);73    width: 140px;74    height: 140px;75    border-radius: 50%;76    background: #E0E0E0;77    border: 1px solid #BDBDBD;78    display: flex;79    align-items: center;80    justify-content: center;81    color: #757575;82    font-size: 26px;83    text-align: center;84  }85  .email {86    position: absolute;87    top: 860px;88    width: 100%;89    text-align: center;90    font-size: 48px;91    color: #CFCFCF;92    font-weight: 600;93    letter-spacing: 0.3px;94  }95 96  /* Underlying button (behind dialog) */97  .under-btn {98    position: absolute;99    top: 1650px;100    left: 50%;101    transform: translateX(-50%);102    padding: 26px 44px;103    border-radius: 36px;104    background: #2A2A2A;105    color: #BCC6D6;106    font-size: 42px;107    box-shadow: inset 0 0 0 2px #3A3A3A;108  }109 110  /* Dialog */111  .dialog {112    position: absolute;113    left: 40px;114    width: 1000px;115    top: 1320px;116    background: #2E3236;117    color: #FFFFFF;118    border-radius: 40px;119    box-shadow: 0 20px 40px rgba(0,0,0,0.55);120    padding: 52px 48px 44px;121    z-index: 3;122  }123  .dialog h2 {124    margin: 0 0 26px 0;125    font-size: 60px;126    font-weight: 700;127    letter-spacing: 0.3px;128  }129  .dialog p {130    margin: 0 0 40px 0;131    font-size: 38px;132    line-height: 1.45;133    color: #DDE1E6;134  }135  .dialog-actions {136    display: flex;137    justify-content: flex-end;138    gap: 60px;139  }140  .dialog-actions .btn {141    font-size: 40px;142    color: #9CC3FF;143    font-weight: 600;144  }145 146  /* Bottom gesture pill */147  .gesture {148    position: absolute;149    bottom: 40px;150    left: 50%;151    transform: translateX(-50%);152    width: 240px;153    height: 12px;154    background: #F1F1F1;155    border-radius: 8px;156    opacity: 0.9;157  }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Status Bar -->164  <div class="status-bar">165    <div class="status-left">166      <div>9:13</div>167      <div class="notif-dots">168        <span></span><span></span><span></span><span></span><span></span>169      </div>170      <div style="width: 10px; height: 10px; background:#FFFFFF; border-radius:50%; margin-left: 8px;"></div>171    </div>172    <div class="status-right">173      <div class="status-icon" title="Wi-Fi">174        <svg viewBox="0 0 24 24">175          <path d="M12 20l-2-2 2-2 2 2-2 2zm8-8c-4.4-4.4-11.6-4.4-16 0l-1.4-1.4c5.1-5.1 13.7-5.1 18.8 0L20 12zm-4 4c-2.2-2.2-5.8-2.2-8 0l-1.4-1.4c3.1-3.1 7.7-3.1 10.8 0L16 16z"/>176        </svg>177      </div>178      <div class="status-icon" title="Battery">179        <svg viewBox="0 0 24 24">180          <path d="M16 6h2v2h1c.6 0 1 .4 1 1v6c0 .6-.4 1-1 1h-1v2h-2V6zM4 7c0-.6.4-1 1-1h9c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1V7zm2 2v6h7V9H6z"/>181        </svg>182      </div>183    </div>184  </div>185 186  <!-- Back arrow -->187  <div class="back-arrow">188    <svg viewBox="0 0 24 24">189      <path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12l8.5-8.5L15.5 5z"/>190    </svg>191  </div>192 193  <!-- Title -->194  <div class="title">Google</div>195 196  <!-- Avatar -->197  <div class="avatar">[IMG: Google logo]</div>198 199  <!-- Email -->200  <div class="email">miller.william197305@gmail.com</div>201 202  <!-- Underlying remove account button (dimmed behind dialog) -->203  <div class="under-btn">Remove account</div>204 205  <!-- Dialog -->206  <div class="dialog">207    <h2>Remove account?</h2>208    <p>Removing this account will delete all of its messages, contacts, and other data from the phone!</p>209    <div class="dialog-actions">210      <div class="btn">Cancel</div>211      <div class="btn">Remove account</div>212    </div>213  </div>214 215  <!-- Bottom gesture pill -->216  <div class="gesture"></div>217</div>218</body>219</html>