GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Google Account Sheet</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0F1212;13    color: #EDEDED;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 32px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #DADADA;28    font-size: 46px;29  }30  .status-right {31    display: flex;32    gap: 28px;33    align-items: center;34  }35  .dot { width: 14px; height: 14px; background:#CFCFCF; border-radius:50%; display:inline-block; }36 37  /* App bar */38  .app-bar {39    position: absolute;40    top: 120px;41    left: 0;42    width: 1080px;43    height: 140px;44    display: flex;45    align-items: center;46    padding: 0 32px;47    gap: 28px;48    color: #EDEDED;49  }50  .hamburger {51    width: 72px; height: 72px; border-radius: 18px; display:flex; align-items:center; justify-content:center;52  }53  .hamburger svg { width: 56px; height: 56px; fill: none; stroke: #EDEDED; stroke-width: 10; }54  .title {55    font-size: 64px; font-weight: 500;56  }57  .chev { margin-left: 10px; vertical-align: middle; }58  .app-actions { margin-left: auto; display: flex; gap: 36px; align-items: center; }59  .icon-btn svg { width: 64px; height: 64px; fill: none; stroke: #EDEDED; stroke-width: 10; }60  .avatar {61    width: 88px; height: 88px; border-radius: 50%;62    background: #503F36; display: flex; align-items: center; justify-content: center;63    font-weight: 700; font-size: 52px; color: #F2EAE6;64  }65 66  /* Calendar content placeholders */67  .calendar {68    position: absolute;69    top: 260px;70    left: 0;71    width: 1080px;72    height: 2140px;73    padding: 24px 32px 24px 32px;74    box-sizing: border-box;75  }76  .event-bar {77    width: 1016px;78    height: 100px;79    background: #2D5A54;80    border-radius: 28px;81    display: flex; align-items: center; padding: 0 24px;82    font-size: 44px; color: #CFE6DF; margin-bottom: 24px;83  }84  .event-card {85    width: 1016px; height: 280px; background: #203C68; border-radius: 36px;86    margin-bottom: 24px; padding: 24px; box-sizing: border-box; color: #D5E2F6;87  }88  .event-title { font-size: 48px; margin-bottom: 12px; }89  .event-time { font-size: 40px; opacity: 0.8; }90  .month-footer {91    position: absolute; bottom: 160px; left: 32px; font-size: 64px; color: #EDE0C8;92  }93  .plus-btn {94    position: absolute; bottom: 120px; right: 40px; width: 120px; height: 120px; border-radius: 28px;95    background: #1E2521; display: flex; align-items: center; justify-content: center; border: 1px solid #2E3A33;96  }97  .plus-btn svg { width: 72px; height: 72px; stroke: #EDEDED; stroke-width: 12; fill: none; }98 99  /* Overlay sheet */100  .overlay {101    position: absolute;102    left: 40px;103    top: 220px;104    width: 1000px;105    background: #222A24;106    border-radius: 44px;107    padding: 28px 0 24px 0;108    box-shadow: 0 30px 80px rgba(0,0,0,0.7);109    border: 1px solid #2F3B33;110  }111  .overlay-header {112    position: relative;113    text-align: center;114    font-size: 72px;115    font-weight: 700;116    padding-top: 12px;117    color: #F3F3F3;118  }119  .close-btn {120    position: absolute; left: 24px; top: 10px; width: 80px; height: 80px;121    display: flex; align-items: center; justify-content: center;122  }123  .close-btn svg { width: 52px; height: 52px; stroke: #EDEDED; stroke-width: 10; fill: none; }124  .overlay-body {125    margin-top: 12px;126    padding: 20px 28px 10px 28px;127  }128  .account-row {129    display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 24px;130    padding: 20px; border-radius: 28px;131    background: rgba(255,255,255,0.04);132  }133  .account-avatar {134    width: 96px; height: 96px; border-radius: 50%;135    background:#5B4A42; display:flex; align-items:center; justify-content:center;136    font-size: 56px; font-weight: 700; color:#F3ECE7; position: relative;137  }138  .photo-badge {139    position: absolute; right: -6px; bottom: -6px; width: 40px; height: 40px; border-radius: 50%;140    background: #1D2520; border: 2px solid #384439; display:flex; align-items:center; justify-content:center;141  }142  .photo-badge svg { width: 26px; height: 26px; stroke:#C9D1CA; stroke-width: 8; fill: none; }143  .account-name { font-size: 52px; font-weight: 600; }144  .account-email { font-size: 40px; color: #C9CDC9; margin-top: 6px; }145  .manage-btn {146    margin: 24px 20px 16px 20px;147    padding: 26px 28px; text-align: center; border-radius: 24px;148    border: 2px solid #4B5A50; color: #EDEDED; font-size: 46px; font-weight: 500;149    background: rgba(255,255,255,0.02);150  }151  .option {152    display: flex; align-items: center; gap: 24px;153    padding: 26px 24px; font-size: 48px; color: #EDEDED;154    border-top: 1px solid #334037;155  }156  .option:first-of-type { border-top: none; }157  .option svg { width: 56px; height: 56px; stroke: #EDEDED; stroke-width: 10; fill: none; }158  .overlay-footer {159    padding: 22px 32px;160    text-align: center;161    font-size: 40px;162    color: #C7CEC6;163    border-top: 1px solid #334037;164  }165  .bullet { margin: 0 16px; opacity: 0.6; }166 167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div>9:55</div>175    <div class="status-right">176      <span class="dot"></span>177      <span class="dot"></span>178      <span class="dot"></span>179      <span class="dot"></span>180      <svg width="42" height="42" viewBox="0 0 24 24">181        <rect x="2" y="6" width="16" height="12" rx="2" stroke="#DADADA" fill="none" stroke-width="2"></rect>182        <rect x="4" y="8" width="12" height="8" rx="1" fill="#DADADA"></rect>183      </svg>184    </div>185  </div>186 187  <!-- App bar -->188  <div class="app-bar">189    <div class="hamburger">190      <svg viewBox="0 0 24 24">191        <path d="M3 6h18M3 12h18M3 18h18"></path>192      </svg>193    </div>194    <div class="title">September195      <svg class="chev" width="40" height="40" viewBox="0 0 24 24">196        <path d="M6 9l6 6 6-6" stroke="#EDEDED" stroke-width="3" fill="none"></path>197      </svg>198    </div>199    <div class="app-actions">200      <div class="icon-btn">201        <svg viewBox="0 0 24 24">202          <circle cx="11" cy="11" r="7"></circle>203          <path d="M21 21l-4.5-4.5"></path>204        </svg>205      </div>206      <div class="icon-btn">207        <svg viewBox="0 0 24 24">208          <rect x="4" y="3" width="16" height="18" rx="2"></rect>209          <path d="M8 1v4M16 1v4M4 8h16"></path>210        </svg>211      </div>212      <div class="avatar">C</div>213    </div>214  </div>215 216  <!-- Calendar content behind overlay -->217  <div class="calendar">218    <div class="event-bar">Milad un-Nabi/Id-e-Milad</div>219 220    <div class="event-card">221      <div class="event-title">Dinner out</div>222      <div class="event-time">[IMG: Table setting illustration]</div>223    </div>224 225    <div class="event-card" style="background:#213760;">226      <div class="event-title">Meeting</div>227      <div class="event-time">5:30 – 6:30 PM</div>228    </div>229 230    <div class="event-card" style="background:#223253;">231      <div class="event-title">Pet care</div>232      <div class="event-time">7 – 8 PM</div>233    </div>234  </div>235  <div class="month-footer">October 2023</div>236  <div class="plus-btn">237    <svg viewBox="0 0 24 24">238      <path d="M12 5v14M5 12h14"></path>239    </svg>240  </div>241 242  <!-- Overlay sheet -->243  <div class="overlay">244    <div class="overlay-header">245      <div class="close-btn">246        <svg viewBox="0 0 24 24">247          <path d="M5 5l14 14M19 5L5 19"></path>248        </svg>249      </div>250      Google251    </div>252 253    <div class="overlay-body">254      <div class="account-row">255        <div class="account-avatar">256          C257          <div class="photo-badge">258            <svg viewBox="0 0 24 24">259              <path d="M5 7h14v10H5z"></path>260              <circle cx="12" cy="12" r="3"></circle>261            </svg>262          </div>263        </div>264        <div>265          <div class="account-name">Cerebra Research</div>266          <div class="account-email">dbwscratch.test.id2@gmail.com</div>267        </div>268      </div>269 270      <div class="manage-btn">Manage your Google Account</div>271 272      <div class="option">273        <svg viewBox="0 0 24 24">274          <circle cx="9" cy="9" r="4"></circle>275          <path d="M17 7v4h4M3 20c0-4 4-6 6-6s6 2 6 6" stroke-linecap="round"></path>276        </svg>277        <div>Add another account</div>278      </div>279 280      <div class="option">281        <svg viewBox="0 0 24 24">282          <circle cx="9" cy="9" r="4"></circle>283          <path d="M3 20c0-4 4-6 6-6s6 2 6 6" stroke-linecap="round"></path>284          <circle cx="18" cy="18" r="3"></circle>285          <path d="M18 13v2M18 21v2M13 18h2M21 18h2"></path>286        </svg>287        <div>Manage accounts on this device</div>288      </div>289    </div>290 291    <div class="overlay-footer">292      Privacy Policy <span class="bullet">•</span> Terms of Service293    </div>294  </div>295 296</div>297</body>298</html>