GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Google Account Settings UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #F7F7F2;13    color: #222;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    padding: 0 40px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #222;29    font-size: 42px;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 20px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .tiny-dot { width: 14px; height: 14px; background:#555; border-radius:50%; display:inline-block; }42 43  /* Top nav */44  .top-nav {45    position: absolute;46    top: 140px;47    left: 40px;48    right: 40px;49    height: 140px;50    display: flex;51    align-items: center;52    gap: 28px;53  }54  .title {55    font-size: 112px;56    font-weight: 600;57    letter-spacing: -1px;58  }59 60  /* Center avatar and email */61  .center-block {62    position: absolute;63    top: 460px;64    left: 0;65    width: 100%;66    display: flex;67    align-items: center;68    flex-direction: column;69    gap: 36px;70  }71  .avatar {72    width: 160px;73    height: 160px;74    border-radius: 50%;75    background: #E0E0E0;76    border: 1px solid #BDBDBD;77    display: flex;78    align-items: center;79    justify-content: center;80    color: #757575;81    font-size: 28px;82  }83  .email {84    font-size: 48px;85    font-weight: 600;86    text-align: center;87  }88 89  /* Sections */90  .section-list {91    position: absolute;92    top: 770px;93    left: 40px;94    right: 40px;95    border-top: 1px solid #E5E5E5;96  }97  .section {98    padding: 48px 0;99    border-bottom: 1px solid #EAEAEA;100    display: flex;101    align-items: center;102  }103  .section .icon {104    width: 88px;105    height: 88px;106    display: flex;107    align-items: center;108    justify-content: center;109    margin-right: 32px;110  }111  .section .text {112    display: flex;113    flex-direction: column;114    gap: 12px;115  }116  .section .title-text {117    font-size: 54px;118    font-weight: 600;119  }120  .section .sub-text {121    font-size: 36px;122    color: #666;123  }124 125  /* Remove account button */126  .remove-wrap {127    position: absolute;128    top: 1180px;129    left: 0;130    width: 100%;131    display: flex;132    justify-content: center;133  }134  .remove-btn {135    background: #2E6D3E;136    color: #fff;137    font-size: 46px;138    font-weight: 700;139    padding: 34px 60px;140    border-radius: 90px;141    box-shadow: 0 4px 10px rgba(0,0,0,0.06);142  }143 144  /* Bottom gesture bar */145  .gesture-bar {146    position: absolute;147    bottom: 50px;148    left: 50%;149    transform: translateX(-50%);150    width: 500px;151    height: 14px;152    background: #8B8B8B;153    border-radius: 8px;154    opacity: 0.8;155  }156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Status Bar -->162  <div class="status-bar">163    <div class="status-left">164      <span>9:57</span>165      <span class="tiny-dot"></span>166    </div>167    <div class="status-right">168      <!-- Simple status icons -->169      <svg width="40" height="40" viewBox="0 0 24 24">170        <path d="M2 16l6-6 4 4 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>171      </svg>172      <svg width="40" height="40" viewBox="0 0 24 24">173        <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"></rect>174        <rect x="5" y="8" width="14" height="8" fill="#333"></rect>175      </svg>176    </div>177  </div>178 179  <!-- Top Navigation -->180  <div class="top-nav">181    <svg width="72" height="72" viewBox="0 0 48 48">182      <path d="M30 10 L16 24 L30 38" stroke="#222" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>183    </svg>184    <div class="title">Google</div>185  </div>186 187  <!-- Center Avatar & Email -->188  <div class="center-block">189    <div class="avatar">[IMG: Google Avatar]</div>190    <div class="email">dbwscratch.test.id2@gmail.com</div>191  </div>192 193  <!-- Section List -->194  <div class="section-list">195    <div class="section">196      <div class="icon"></div>197      <div class="text">198        <div class="title-text">Google Account</div>199        <div class="sub-text">Info, security & personalization</div>200      </div>201    </div>202    <div class="section">203      <div class="icon">204        <!-- Sync circular arrows -->205        <svg width="88" height="88" viewBox="0 0 48 48">206          <path d="M12 16c3-7 12-9 18-4l-4 4h10V6l-4 4C27 6 19 6 14 12c-3 3-4 6-4 10h6z" fill="#4A4A4A"></path>207          <path d="M36 32c-3 7-12 9-18 4l4-4H12v10l4-4c5 4 13 4 18-2 3-3 4-6 4-10h-6z" fill="#4A4A4A"></path>208        </svg>209      </div>210      <div class="text">211        <div class="title-text">Account sync</div>212        <div class="sub-text">Sync on for all items</div>213      </div>214    </div>215  </div>216 217  <!-- Remove account -->218  <div class="remove-wrap">219    <div class="remove-btn">Remove account</div>220  </div>221 222  <!-- Bottom gesture bar -->223  <div class="gesture-bar"></div>224 225</div>226</body>227</html>