GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android - Remove Account Dialog</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: #F7F7F7;13    border-radius: 0;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 100px;23    color: #FFFFFF;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 28px;28    box-sizing: border-box;29    background: rgba(0,0,0,0.05);30  }31  .status-left {32    font-size: 42px;33    font-weight: 500;34    letter-spacing: 1px;35  }36  .status-right {37    display: flex;38    gap: 22px;39    align-items: center;40  }41  .icon {42    width: 44px; height: 44px;43  }44 45  /* App content */46  .app-bar {47    position: absolute;48    top: 120px;49    left: 0;50    width: 1080px;51    height: 140px;52    display: flex;53    align-items: center;54  }55  .back-btn {56    width: 100px; height: 100px; margin-left: 32px;57    display: flex; align-items: center; justify-content: center;58  }59  .title {60    position: absolute;61    top: 280px;62    left: 60px;63    font-size: 110px;64    font-weight: 500;65    color: #212121;66  }67 68  .account-block {69    position: absolute;70    top: 520px;71    left: 90px;72    width: 900px;73    display: flex;74    align-items: center;75    gap: 40px;76  }77  .avatar {78    width: 140px; height: 140px;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    border-radius: 50%;82    display: flex; align-items: center; justify-content: center;83    color: #757575; font-size: 28px;84  }85  .email {86    font-size: 48px;87    color: #202124;88    font-weight: 500;89  }90 91  .big-green-btn {92    position: absolute;93    top: 1280px;94    left: 240px;95    width: 600px;96    height: 110px;97    background: #1B5E20;98    border-radius: 70px;99    display: flex; align-items: center; justify-content: center;100    color: #FFFFFF;101    font-size: 44px;102    font-weight: 700;103  }104 105  /* Overlay and dialog */106  .overlay {107    position: absolute;108    inset: 0;109    background: rgba(0,0,0,0.55);110  }111  .dialog {112    position: absolute;113    left: 90px;114    top: 980px;115    width: 900px;116    background: #FFFFFF;117    border-radius: 52px;118    box-shadow: 0 30px 60px rgba(0,0,0,0.35);119    padding: 60px;120    box-sizing: border-box;121    color: #202124;122  }123  .dialog h2 {124    margin: 0 0 36px 0;125    font-size: 64px;126    font-weight: 700;127  }128  .dialog p {129    margin: 0 0 60px 0;130    font-size: 40px;131    line-height: 1.35;132    color: #3C4043;133  }134  .dialog-actions {135    display: flex;136    justify-content: flex-end;137    gap: 60px;138  }139  .text-btn {140    font-size: 42px;141    font-weight: 700;142    cursor: default;143  }144  .text-btn.cancel { color: #2F4F2F; opacity: 0.85; }145  .text-btn.primary { color: #2E7D32; }146 147  /* Bottom gesture pill */148  .gesture-bar {149    position: absolute;150    bottom: 40px;151    left: 50%;152    transform: translateX(-50%);153    width: 500px;154    height: 14px;155    background: #FFFFFF;156    border-radius: 8px;157    opacity: 0.9;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status bar -->165  <div class="status-bar">166    <div class="status-left">9:57</div>167    <div class="status-right">168      <!-- simple placeholder icons -->169      <svg class="icon" viewBox="0 0 24 24">170        <circle cx="12" cy="12" r="10" fill="#FFFFFF" opacity="0.85"></circle>171      </svg>172      <svg class="icon" viewBox="0 0 24 24">173        <path d="M2 16c4-5 8-7 12-7s8 2 8 7" stroke="#FFFFFF" stroke-width="2" fill="none"/>174        <circle cx="14" cy="16" r="2" fill="#FFFFFF"/>175      </svg>176      <svg class="icon" viewBox="0 0 24 24">177        <rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>178        <rect x="6" y="8" width="12" height="8" fill="#FFFFFF"/>179      </svg>180    </div>181  </div>182 183  <!-- App bar with back -->184  <div class="app-bar">185    <div class="back-btn">186      <svg width="60" height="60" viewBox="0 0 24 24">187        <path d="M15 18l-6-6 6-6" stroke="#000000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>188      </svg>189    </div>190  </div>191 192  <!-- Page title -->193  <div class="title">Google</div>194 195  <!-- Account info -->196  <div class="account-block">197    <div class="avatar">[IMG: Google Avatar]</div>198    <div class="email">dbwscratch.test.id2@gmail.com</div>199  </div>200 201  <!-- Underlying button (seen faintly behind overlay) -->202  <div class="big-green-btn">Remove account</div>203 204  <!-- Dim overlay -->205  <div class="overlay"></div>206 207  <!-- Confirmation dialog -->208  <div class="dialog">209    <h2>Remove account?</h2>210    <p>Removing this account will delete all of its messages, contacts, and other data from the phone!</p>211    <div class="dialog-actions">212      <div class="text-btn cancel">Cancel</div>213      <div class="text-btn primary">Remove account</div>214    </div>215  </div>216 217  <!-- Bottom gesture pill -->218  <div class="gesture-bar"></div>219</div>220</body>221</html>