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: #0d0d0d;15    font-family: Arial, Helvetica, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    padding: 28px 36px;27    box-sizing: border-box;28    color: #fff;29    opacity: 0.9;30  }31  .status-content { display: flex; justify-content: space-between; align-items: center; }32  .time { font-size: 42px; font-weight: 600; letter-spacing: 0.5px; }33  .icons { display: flex; gap: 26px; align-items: center; }34  .icon-dot {35    width: 14px; height: 14px; background: #ddd; border-radius: 50%;36    opacity: 0.9;37  }38  .icon-wifi svg, .icon-battery svg { display: block; }39  .icon-wifi svg { width: 44px; height: 44px; }40  .icon-battery svg { width: 50px; height: 36px; }41 42  /* Back arrow */43  .back {44    position: absolute;45    top: 140px;46    left: 40px;47    width: 64px;48    height: 64px;49    opacity: 0.9;50  }51  .back svg { width: 100%; height: 100%; }52  .back svg path { stroke: #bdbdbd; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }53 54  /* Title and main content */55  .page-title {56    position: absolute;57    top: 220px;58    left: 60px;59    font-size: 96px;60    color: #9e9e9e;61    font-weight: 500;62    letter-spacing: -0.5px;63  }64  .logo {65    position: absolute;66    top: 540px;67    left: 50%;68    transform: translateX(-50%);69    width: 140px;70    height: 140px;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    border-radius: 50%;74    display: flex; justify-content: center; align-items: center;75    color: #757575; font-size: 22px; text-align: center;76  }77  .email {78    position: absolute;79    top: 720px;80    left: 50%;81    transform: translateX(-50%);82    width: 900px;83    text-align: center;84    font-size: 44px;85    color: #cfcfcf;86    font-weight: 600;87  }88 89  /* Underlying button (partially visible under dialog) */90  .under-btn {91    position: absolute;92    top: 1610px;93    left: 50%;94    transform: translateX(-50%);95    width: 560px;96    height: 96px;97    background: #3fa35b;98    color: #0b0b0b;99    border-radius: 48px;100    display: flex; justify-content: center; align-items: center;101    font-size: 40px; font-weight: 700;102    opacity: 0.4;103  }104 105  /* Modal dialog */106  .modal {107    position: absolute;108    left: 50%;109    top: 1420px;110    transform: translateX(-50%);111    width: 960px;112    background: #2f312d;113    border-radius: 40px;114    box-shadow: 0 24px 80px rgba(0,0,0,0.7);115    padding: 54px 56px 42px;116    box-sizing: border-box;117  }118  .modal-title {119    font-size: 56px;120    font-weight: 700;121    color: #ffffff;122    margin-bottom: 26px;123  }124  .modal-text {125    font-size: 36px;126    line-height: 1.45;127    color: #e6e6e6;128    margin-bottom: 38px;129    max-width: 860px;130  }131  .modal-actions {132    display: flex;133    justify-content: space-between;134    align-items: center;135  }136  .btn-ghost {137    font-size: 40px;138    font-weight: 700;139    color: #9be39b;140    background: transparent;141    border: none;142    padding: 16px 12px;143    border-radius: 14px;144  }145 146  /* Bottom home pill */147  .home-pill {148    position: absolute;149    bottom: 32px;150    left: 50%;151    transform: translateX(-50%);152    width: 420px;153    height: 12px;154    border-radius: 6px;155    background: #ffffff;156    opacity: 0.85;157  }158</style>159</head>160<body>161<div id="render-target">162  <div class="status-bar">163    <div class="status-content">164      <div class="time">3:53</div>165      <div class="icons">166        <span class="icon-dot"></span>167        <span class="icon-dot"></span>168        <span class="icon-dot"></span>169        <div class="icon-wifi">170          <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="12" cy="16" r="2" fill="#fff"/></svg>171        </div>172        <div class="icon-battery">173          <svg viewBox="0 0 28 18">174            <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>175            <rect x="24" y="6" width="3" height="6" fill="#fff"/>176          </svg>177        </div>178      </div>179    </div>180  </div>181 182  <div class="back">183    <svg viewBox="0 0 48 48"><path d="M30 10 L16 24 L30 38"/></svg>184  </div>185 186  <div class="page-title">Google</div>187 188  <div class="logo">[IMG: Google Logo]</div>189 190  <div class="email">cole2dbwpersonatest2@gmail.com</div>191 192  <div class="under-btn">Remove account</div>193 194  <div class="modal">195    <div class="modal-title">Remove account?</div>196    <div class="modal-text">197      Removing this account will delete all of its messages, contacts, and other data from the phone!198    </div>199    <div class="modal-actions">200      <button class="btn-ghost">Cancel</button>201      <button class="btn-ghost">Remove account</button>202    </div>203  </div>204 205  <div class="home-pill"></div>206</div>207</body>208</html>