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>Edit Profile UI</title>7<style>8  body { margin:0; padding:0; background: transparent; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#F7F6EE; /* page background */12    font-family: Arial, Helvetica, sans-serif; color:#2f3e4b;13  }14 15  /* Top bars */16  .status-bar {17    position:absolute; top:0; left:0; width:100%; height:100px;18    background:#2e3a48; color:#e8edf3; display:flex; align-items:center;19    padding:0 36px; box-sizing:border-box; font-weight:600; font-size:38px;20  }21  .status-right { margin-left:auto; display:flex; align-items:center; gap:28px; }22  .app-bar {23    position:absolute; top:100px; left:0; width:100%; height:140px;24    background:#2e3a48; color:#ffffff; display:flex; align-items:center;25    padding:0 36px; box-sizing:border-box;26  }27  .app-title { font-size:56px; font-weight:700; margin-left:26px; }28  .app-actions { margin-left:auto; display:flex; align-items:center; }29 30  /* Icons */31  .icon { width:60px; height:60px; }32  .icon.stroke svg { stroke:#ffffff; fill:none; stroke-width:6; }33  .icon.fill svg { fill:#ffffff; }34 35  /* Cover image placeholder */36  .cover {37    position:absolute; top:240px; left:0; width:100%; height:420px;38    background:#E0E0E0; border-bottom:1px solid #BDBDBD; border-top:1px solid #BDBDBD;39    display:flex; align-items:center; justify-content:center;40    color:#757575; font-size:40px; letter-spacing:0.5px;41  }42 43  /* Avatar */44  .avatar-wrap {45    position:absolute; top:540px; left:50%; transform:translateX(-50%);46    width:190px; height:190px; border-radius:50%;47    box-shadow:0 0 0 10px #ffffff; /* white ring to mimic */48    background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;49    color:#757575; font-size:32px;50  }51  .edit-fab {52    position:absolute; top:540px; left:50%; transform:translateX(70px);53    width:74px; height:74px; border-radius:50%; background:#E84D8A;54    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 12px rgba(0,0,0,0.2);55  }56  .edit-fab svg { width:36px; height:36px; fill:#ffffff; }57 58  /* Content area */59  .content {60    position:absolute; top:660px; left:0; width:100%; bottom:120px;61    padding:36px 60px 0 60px; box-sizing:border-box;62    background:#F7F6EE;63  }64  .section-title {65    font-size:44px; font-weight:800; text-transform:uppercase;66    margin:24px 0 40px; color:#2f3e4b;67  }68 69  .field { margin-bottom:60px; }70  .field label {71    display:block; font-size:36px; color:#3a4050; margin-bottom:16px;72  }73  .field .value {74    display:block; font-size:48px; color:#1e2530;75    padding:10px 0 18px; border-bottom:4px solid #2f3e4b;76  }77  .field .line {78    height:0; border-bottom:4px solid #2f3e4b; margin-top:22px;79  }80 81  /* Bottom gesture / nav bar */82  .bottom-bar {83    position:absolute; bottom:0; left:0; width:100%; height:120px; background:#000000;84    display:flex; align-items:center; justify-content:center;85  }86  .pill {87    width:200px; height:14px; border-radius:10px; background:#e6e6e6;88  }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status bar -->95  <div class="status-bar">96    <div>1:42</div>97    <div class="status-right">98      <!-- Simple dot icons to hint other status items -->99      <svg width="16" height="16"><circle cx="8" cy="8" r="6" fill="#c9d2dc"></circle></svg>100      <!-- WiFi icon -->101      <div class="icon fill">102        <svg viewBox="0 0 24 24">103          <path d="M12 20a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 20zm-6.5-6.5a10 10 0 0 1 13 0l-1.5 1.5a8 8 0 0 0-10 0l-1.5-1.5zm-3-3a15 15 0 0 1 19 0l-1.5 1.5a13 13 0 0 0-16 0L2.5 10.5z"></path>104        </svg>105      </div>106      <!-- Battery icon -->107      <div class="icon fill">108        <svg viewBox="0 0 24 24">109          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#ffffff"></rect>110          <rect x="20" y="10" width="2" height="4" fill="#ffffff"></rect>111          <rect x="4" y="8" width="14" height="8" fill="#2e3a48"></rect>112        </svg>113      </div>114    </div>115  </div>116 117  <!-- App bar -->118  <div class="app-bar">119    <!-- Back arrow -->120    <div class="icon stroke">121      <svg viewBox="0 0 24 24">122        <path d="M15 6l-6 6 6 6"></path>123      </svg>124    </div>125    <div class="app-title">Edit profile</div>126    <div class="app-actions">127      <!-- Check icon -->128      <div class="icon stroke">129        <svg viewBox="0 0 24 24">130          <path d="M4 12l5 5 11-11"></path>131        </svg>132      </div>133    </div>134  </div>135 136  <!-- Cover image placeholder -->137  <div class="cover">[IMG: Profile cover]</div>138 139  <!-- Avatar and edit pencil -->140  <div class="avatar-wrap">[IMG: Avatar]</div>141  <div class="edit-fab">142    <svg viewBox="0 0 24 24">143      <path d="M15.5 4.5l4 4-10 10H5.5v-4z"></path>144    </svg>145  </div>146 147  <!-- Content -->148  <div class="content">149    <div class="section-title">PROFILE DETAILS</div>150 151    <div class="field">152      <label>Username</label>153      <div class="value">Cerebra2024</div>154    </div>155 156    <div class="field">157      <label>Email</label>158      <div class="value">dbwscratch.test.id2@gmail.com</div>159    </div>160 161    <div class="field">162      <label>Old Password</label>163      <div class="line"></div>164    </div>165 166    <div class="field">167      <label>New Password</label>168      <div class="line"></div>169    </div>170 171    <div class="field">172      <label>Confirm new password</label>173      <div class="line"></div>174    </div>175  </div>176 177  <!-- Bottom nav pill -->178  <div class="bottom-bar">179    <div class="pill"></div>180  </div>181 182</div>183</body>184</html>