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>Create contact - Mock</title>7<style>8  :root{9    --bg:#0f1714;10    --text:#e7efe9;11    --muted:#9fb1a8;12    --line:#6f8078;13    --chip:#2d3a35;14    --pink:#f4b5be;15    --kbd-bg:#121c18;16    --key:#1b2622;17    --key-text:#e6efe9;18  }19  body{ margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }20  #render-target{21    width:1080px; height:2400px;22    position:relative; overflow:hidden;23    background:var(--bg); color:var(--text);24  }25 26  /* Status bar */27  .status-bar{28    position:absolute; left:0; top:0; width:100%; height:96px;29    padding:0 32px; box-sizing:border-box;30    display:flex; align-items:center; justify-content:space-between;31    color:#fff; font-size:36px; letter-spacing:0.5px;32  }33  .status-right{ display:flex; align-items:center; gap:22px; }34  .icon-s{ width:38px; height:38px; fill:#ffffff; opacity:0.95; }35 36  /* App bar */37  .app-bar{38    position:absolute; top:96px; left:0; width:100%; height:160px;39    display:flex; align-items:center; box-sizing:border-box;40    padding:0 36px; gap:24px;41  }42  .app-title{43    font-size:64px; font-weight:600; color:#e9f3ee; flex:1;44  }45  .icon-btn{46    width:96px; height:96px; display:flex; align-items:center; justify-content:center;47    border-radius:48px;48  }49  .save-btn{50    background:var(--pink); color:#222; border-radius:999px;51    padding:0 42px; height:96px; display:flex; align-items:center; font-size:40px; font-weight:600;52  }53 54  /* Save-to row */55  .save-to{56    position:absolute; top:256px; left:28px; right:28px;57    color:var(--muted); font-size:34px;58  }59  .account-row{60    margin-top:18px; background:#2a3631; border:2px solid #3f4c46;61    height:100px; border-radius:24px; display:flex; align-items:center; padding:0 24px; gap:18px; box-sizing:border-box;62  }63  .chip{64    width:72px; height:72px; border-radius:50%;65    background:#5c7cff; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;66  }67  .acct-text{ color:#d7e6df; font-size:38px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }68 69  /* Avatar placeholder */70  .avatar-wrap{71    position:absolute; top:420px; left:50%; transform:translateX(-50%);72    display:flex; flex-direction:column; align-items:center;73  }74  .avatar{75    width:300px; height:300px; border-radius:50%;76    background:#E0E0E0; border:1px solid #BDBDBD;77    display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; text-align:center; padding:20px; box-sizing:border-box;78  }79  .add-pic{80    margin-top:26px; color:var(--pink); font-size:44px;81  }82 83  /* Fields */84  .form{85    position:absolute; left:48px; right:48px; top:900px;86  }87  .row{88    position:relative; margin-bottom:48px; padding-left:96px;89  }90  .row .lead-icon{91    position:absolute; left:0; top:50%; transform:translateY(-50%); width:64px; height:64px; opacity:0.8;92  }93  .field{94    border:2px solid var(--line); border-radius:22px;95    padding:26px 110px 30px 26px; min-height:140px; box-sizing:border-box;96    display:flex; flex-direction:column; justify-content:center;97    background:transparent;98  }99  .field .label{ color:var(--muted); font-size:36px; margin-bottom:14px; }100  .field .value{ color:#f0faf5; font-size:56px; font-weight:500; }101  .field .chev{102    position:absolute; right:24px; top:50%; transform:translateY(-50%); width:56px; height:56px; opacity:0.8;103  }104  .field.pink{ border-color:var(--pink); }105  .hint{ color:#b7c6bf; font-size:36px; }106 107  /* Keyboard (stylized) */108  .keyboard{109    position:absolute; left:0; right:0; bottom:84px; height:880px;110    background:var(--kbd-bg); border-top:2px solid #1e2a25;111    box-sizing:border-box; padding:20px 24px;112  }113  .kbd-top-icons{ display:flex; gap:28px; padding:12px 8px 18px; }114  .kbd-top-icons .c{ width:84px; height:84px; background:#1a2521; border-radius:22px; }115  .keys{116    display:grid; gap:18px; margin-top:4px;117  }118  .row-keys{ display:flex; gap:12px; justify-content:center; }119  .key{120    background:var(--key); color:var(--key-text);121    height:120px; min-width:84px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-size:46px; box-shadow:inset 0 -2px 0 #0e1713;122  }123  .key.wide{ width:140px; }124  .key.space{ flex:1 1 auto; }125  .key.special{ background:#2a3a34; color:#dbe7e1; }126  .enter{127    width:140px; height:120px; background:var(--pink); color:#1a1a1a; border-radius:24px; display:flex; align-items:center; justify-content:center; font-weight:700;128  }129 130  .home-handle{131    position:absolute; left:50%; transform:translateX(-50%); bottom:24px;132    width:320px; height:14px; background:#e6e6e6; border-radius:8px; opacity:0.85;133  }134 135  /* Simple resets for svg */136  svg{ display:block; }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status bar -->143  <div class="status-bar">144    <div>12:19</div>145    <div class="status-right">146      <svg class="icon-s" viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0-5 5v2H5v11h14V9h-2V7a5 5 0 0 0-5-5zm-3 7V7a3 3 0 0 1 6 0v2H9z"/></svg>147      <svg class="icon-s" viewBox="0 0 24 24"><path d="M12 3C7 3 2.73 6.11 1 10.5L3 11c1.5-3.5 5-6 9-6s7.5 2.5 9 6l2-.5C21.27 6.11 17 3 12 3zm0 6a6 6 0 0 0-6 6h2a4 4 0 1 1 8 0h2a6 6 0 0 0-6-6z"/></svg>148      <svg class="icon-s" viewBox="0 0 24 24"><path d="M16 4h-1V2H9v2H8a2 2 0 0 0-2 2v16h12V6a2 2 0 0 0-2-2zm-1 16H9V8h6v12z"/></svg>149      <div style="font-size:34px;">100%</div>150    </div>151  </div>152 153  <!-- App bar -->154  <div class="app-bar">155    <div class="icon-btn">156      <svg width="48" height="48" viewBox="0 0 24 24" fill="#e9f3ee"><path d="M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.3l6.29 6.29 6.29-6.29z"/></svg>157    </div>158    <div class="app-title">Create contact</div>159    <div class="save-btn">Save</div>160    <div class="icon-btn">161      <svg width="48" height="48" viewBox="0 0 24 24" fill="#e9f3ee"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>162    </div>163  </div>164 165  <!-- Save to account -->166  <div class="save-to">167    <div>Save to</div>168    <div class="account-row">169      <div class="chip">C</div>170      <div class="acct-text">dbwscratch.test.id1@gmail.com</div>171      <svg class="chev" viewBox="0 0 24 24" width="56" height="56" fill="#cfe0d9"><path d="M7 10l5 5 5-5z"/></svg>172    </div>173  </div>174 175  <!-- Avatar placeholder -->176  <div class="avatar-wrap">177    <div class="avatar">[IMG: Contact Photo]</div>178    <div class="add-pic">Add picture</div>179  </div>180 181  <!-- Form fields -->182  <div class="form">183    <div class="row">184      <svg class="lead-icon" viewBox="0 0 24 24" fill="#b7c9c1"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z"/></svg>185      <div class="field">186        <div class="label">First name</div>187        <div class="value">Rahul</div>188        <svg class="chev" viewBox="0 0 24 24" fill="#cfe0d9"><path d="M7 10l5 5 5-5z"/></svg>189      </div>190    </div>191 192    <div class="row">193      <svg class="lead-icon" viewBox="0 0 24 24" fill="#b7c9c1"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z"/></svg>194      <div class="field pink">195        <div class="label" style="color:var(--pink);">Last name</div>196        <div class="hint">&nbsp;</div>197      </div>198    </div>199  </div>200 201  <!-- Keyboard -->202  <div class="keyboard">203    <div class="kbd-top-icons">204      <div class="c"></div>205      <div class="c"></div>206      <div class="c"></div>207      <div class="c"></div>208      <