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>Google Account Settings Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #111313; /* dark theme */13    font-family: "Roboto", "Segoe UI", Arial, sans-serif;14    color: #E9ECEC;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0;21    width: 100%; height: 90px;22    display: flex; align-items: center; justify-content: space-between;23    padding: 0 34px;24    color: #EAEAEA;25    font-size: 38px; font-weight: 500;26    letter-spacing: 0.5px;27  }28  .status-icons {29    display: flex; align-items: center; gap: 20px;30  }31  .status-dot { width: 10px; height: 10px; background: #BDBDBD; border-radius: 50%; }32 33  /* Top navigation */34  .back-btn {35    position: absolute;36    top: 140px; left: 40px;37    width: 64px; height: 64px;38  }39  .back-btn svg { width: 64px; height: 64px; }40  .back-btn path { stroke: #EDEDED; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }41 42  .title {43    position: absolute;44    top: 270px; left: 48px;45    font-size: 94px; font-weight: 500; color: #F1F3F4;46  }47 48  /* Center avatar and email */49  .avatar {50    position: absolute; left: 50%; top: 430px;51    transform: translateX(-50%);52    width: 160px; height: 160px; border-radius: 50%;53    background: #E0E0E0; border: 1px solid #BDBDBD;54    display: flex; align-items: center; justify-content: center;55    color: #757575; font-size: 28px; text-align: center; padding: 10px;56  }57  .email {58    position: absolute; left: 50%; top: 630px;59    transform: translateX(-50%);60    font-size: 46px; font-weight: 500; color: #F2F2F2;61    text-align: center;62  }63 64  /* Sections */65  .section {66    position: absolute; left: 48px; right: 48px;67    top: 770px;68  }69  .item {70    padding: 34px 0;71    display: flex; align-items: flex-start; gap: 28px;72  }73  .item-title {74    font-size: 56px; font-weight: 500; color: #F2F4F5;75  }76  .item-sub {77    font-size: 34px; color: #9AA0A6; margin-top: 12px;78  }79  .sync-icon {80    width: 60px; height: 60px; margin-top: 6px;81  }82  .sync-icon svg { width: 60px; height: 60px; }83  .sync-icon path { stroke: #CFD8DC; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }84  .divider {85    height: 1px; background: #2A2D2D; margin: 30px -48px 0 -48px;86  }87 88  /* Remove account button */89  .remove-wrap {90    position: absolute; left: 0; right: 0; top: 1280px;91    display: flex; justify-content: center;92  }93  .remove-btn {94    background: #BDF4C8;95    color: #0D2013;96    font-size: 42px; font-weight: 600;97    padding: 28px 44px;98    border-radius: 48px;99    box-shadow: 0 8px 20px rgba(0,0,0,0.35);100  }101 102  /* Gesture bar */103  .gesture {104    position: absolute; left: 50%; bottom: 46px;105    transform: translateX(-50%);106    width: 360px; height: 20px; border-radius: 12px;107    background: #FFFFFF; opacity: 0.95;108  }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Status bar -->115  <div class="status-bar">116    <div>3:52</div>117    <div class="status-icons">118      <!-- muted bell -->119      <svg width="36" height="36" viewBox="0 0 24 24">120        <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2Zm7-6c-2-2-3-3-3-7a5 5 0 0 0-10 0c0 4-1 5-3 7h16Z" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>121        <path d="M5 5l14 14" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>122      </svg>123      <!-- wifi -->124      <svg width="36" height="36" viewBox="0 0 24 24">125        <path d="M2 8c5-5 15-5 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18l0 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>126        <circle cx="12" cy="18" r="1.5" fill="#EDEDED"/>127      </svg>128      <!-- battery -->129      <svg width="40" height="36" viewBox="0 0 28 18">130        <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#EDEDED" fill="none" stroke-width="2"/>131        <rect x="3" y="5" width="18" height="8" rx="1" fill="#EDEDED"/>132        <rect x="23" y="6" width="3" height="6" rx="1" fill="#EDEDED"/>133      </svg>134    </div>135  </div>136 137  <!-- Back button -->138  <div class="back-btn">139    <svg viewBox="0 0 48 48">140      <path d="M32 8L16 24l16 16"/>141    </svg>142  </div>143 144  <!-- Page title -->145  <div class="title">Google</div>146 147  <!-- Avatar -->148  <div class="avatar">[IMG: Google "G" logo]</div>149 150  <!-- Email -->151  <div class="email">cole2dbwpersonatest2@gmail.com</div>152 153  <!-- Sections -->154  <div class="section">155    <div class="item">156      <div style="width:60px;"></div>157      <div>158        <div class="item-title">Google Account</div>159        <div class="item-sub">Info, security & personalization</div>160      </div>161    </div>162 163    <div class="item" style="margin-top: 40px;">164      <div class="sync-icon">165        <svg viewBox="0 0 48 48">166          <path d="M34 14c-3-3-8-4-12-2M14 34c3 3 8 4 12 2"/>167          <path d="M34 14l0 8M14 34l0-8"/>168        </svg>169      </div>170      <div>171        <div class="item-title">Account sync</div>172        <div class="item-sub">Sync on for 9 of 10 items</div>173      </div>174    </div>175 176    <div class="divider"></div>177  </div>178 179  <!-- Remove account button -->180  <div class="remove-wrap">181    <div class="remove-btn">Remove account</div>182  </div>183 184  <!-- Bottom gesture bar -->185  <div class="gesture"></div>186 187</div>188</body>189</html>