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  body { margin:0; padding:0; background: transparent; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#0f1713; color:#e9efe8; font-family: Roboto, Arial, sans-serif;12  }13 14  /* Status bar */15  .status-bar{16    height:96px; padding:0 32px; color:#e9efe8; font-size:36px;17    display:flex; align-items:center; justify-content:space-between;18  }19  .status-left{ display:flex; align-items:center; gap:18px; opacity:0.95; }20  .status-right{ display:flex; align-items:center; gap:22px; }21  .icon-wifi, .icon-signal, .icon-battery{ width:44px; height:28px; }22  .icon-battery{ width:64px; height:28px; }23 24  /* App bar */25  .app-bar{26    height:168px; padding:0 28px; display:flex; align-items:center; gap:26px;27    border-bottom:1px solid rgba(255,255,255,0.06);28  }29  .app-title{ font-size:56px; font-weight:500; flex:1; letter-spacing:0.3px; }30  .btn-save{31    background:#f5aeb6; color:#1b2220; font-weight:600;32    padding:26px 46px; border-radius:60px; font-size:40px; box-shadow: none; border:none;33  }34  .btn-icon{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; }35 36  /* Account row */37  .account-row{38    margin:26px 28px 0 28px; padding:18px 20px; border-radius:12px;39    background:#2b3a33;40  }41  .account-row .label{ color:#b9c8bd; font-size:34px; margin-bottom:12px; }42  .account-pill{43    display:flex; align-items:center; gap:18px;44    background:#22332b; border:2px solid #45554d; color:#dce6df;45    padding:12px 18px; border-radius:48px; width:100%;46  }47  .avatar-small{48    width:64px; height:64px; border-radius:50%; background:#6b80ff;49    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;50  }51  .pill-email{ font-size:34px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }52  .chev{ width:28px; height:28px; opacity:0.8; }53 54  /* Avatar / add picture */55  .avatar-section{56    padding:34px 0 10px; display:flex; flex-direction:column; align-items:center;57  }58  .avatar-circle{59    width:300px; height:300px; border-radius:50%; background:#2a3f34;60    display:flex; align-items:center; justify-content:center; position:relative;61  }62  .add-picture-text{ color:#f5aeb6; margin-top:24px; font-size:36px; }63 64  /* Form */65  .form{ padding:12px 28px 120px 28px; }66  .row{ display:flex; gap:24px; margin-top:24px; align-items:flex-start; }67  .icon-col{ width:88px; display:flex; justify-content:center; padding-top:18px; }68  .fields-col{ flex:1; }69  .input-box{70    border:2px solid #64786c; border-radius:22px; padding:30px 28px;71    color:#dfe7e1; font-size:40px; line-height:1; background:transparent;72  }73  .input-box + .input-box{ margin-top:22px; }74  .placeholder{ color:#c8d5cd; opacity:0.9; }75  .inline-small{76    width:420px; display:inline-block; margin-top:18px;77  }78  .label-caption{ color:#a9b8ae; font-size:28px; margin:10px 0 6px 8px; }79  .dropdown-arrow{80    position:absolute; right:34px; top:42px; width:28px; height:28px; opacity:0.85;81  }82  .relative{ position:relative; }83  /* Bottom gesture bar */84  .gesture{85    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);86    width:360px; height:12px; background:#e7e7e7; border-radius:8px; opacity:0.9;87  }88 89  /* Utility */90  .muted{ color:#a9b8ae; }91  .v-dots{ width:12px; height:48px; }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status Bar -->98  <div class="status-bar">99    <div class="status-left">100      <div>12:17</div>101    </div>102    <div class="status-right">103      <!-- simple icons -->104      <svg class="icon-signal" viewBox="0 0 24 24" fill="#e9efe8"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2V20zm4 0h2V6h-2v14zm4 0h2V2h-2v18z"/></svg>105      <svg class="icon-wifi" viewBox="0 0 24 24" fill="#e9efe8"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-5a9 9 0 0 0-12 0l1.5 1.5a7 7 0 0 1 9 0L18 15zM12 6C8 6 4.6 7.3 2 9.5l1.6 1.6C6 9.1 9 8 12 8s6 1.1 8.4 3.1L22 9.5C19.4 7.3 16 6 12 6z"/></svg>106      <div style="display:flex; align-items:center; gap:8px;">107        <svg class="icon-battery" viewBox="0 0 32 16"><rect x="1" y="2" width="26" height="12" rx="2" fill="none" stroke="#e9efe8" stroke-width="2"/><rect x="3" y="4" width="20" height="8" fill="#e9efe8"/><rect x="28" y="5" width="3" height="6" fill="#e9efe8"/></svg>108        <div style="font-size:32px;">100%</div>109      </div>110    </div>111  </div>112 113  <!-- App Bar -->114  <div class="app-bar">115    <div class="btn-icon" title="Close">116      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#e9efe8" stroke-width="2">117        <path d="M4 4l16 16M20 4L4 20"/>118      </svg>119    </div>120    <div class="app-title">Create contact</div>121    <button class="btn-save">Save</button>122    <div class="btn-icon">123      <svg class="v-dots" viewBox="0 0 6 24" fill="#e9efe8">124        <circle cx="3" cy="4" r="3"/><circle cx="3" cy="12" r="3"/><circle cx="3" cy="20" r="3"/>125      </svg>126    </div>127  </div>128 129  <!-- Save to account -->130  <div class="account-row">131    <div class="label">Save to</div>132    <div class="account-pill">133      <div class="avatar-small">C</div>134      <div class="pill-email">dbwscratch.test.id1@gmail.com</div>135      <svg class="chev" viewBox="0 0 24 24" fill="#d0dcd3"><path d="M7 10l5 5 5-5z"/></svg>136    </div>137  </div>138 139  <!-- Avatar / Add picture -->140  <div class="avatar-section">141    <div class="avatar-circle">142      <svg width="140" height="140" viewBox="0 0 64 64" fill="none" stroke="#cfe4d3" stroke-width="3">143        <rect x="8" y="18" width="36" height="28" rx="3" stroke="#cfe4d3" fill="none"/>144        <path d="M10 42l10-10 8 8 6-6 8 8" stroke="#cfe4d3"/>145        <path d="M50 12v10M45 17h10" stroke="#cfe4d3"/>146      </svg>147    </div>148    <div class="add-picture-text">Add picture</div>149  </div>150 151  <!-- Form fields -->152  <div class="form">153 154    <!-- Names -->155    <div class="row">156      <div class="icon-col">157        <svg width="44" height="44" viewBox="0 0 24 24" fill="#a7b6ad">158          <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4 0-7 2-7 4v2h14v-2c0-2-3-4-7-4z"/>159        </svg>160      </div>161      <div class="fields-col">162        <div class="input-box relative"><div class="placeholder">First name</div>163          <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="#c8d5cd"><path d="M7 10l5 5 5-5z"/></svg>164        </div>165        <div class="input-box"><div class="placeholder">Last name</div></div>166      </div>167    </div>168 169    <!-- Company -->170    <div class="row">171      <div class="icon-col">172        <svg width="44" height="44" viewBox="0 0 24 24" fill="#a7b6ad">173          <path d="M3 21h18V9H3v12zm2-2V11h14v8H5zm6-6h2v2h-2v-2zM9 5h6v4H9z"/>174        </svg>175      </div>176      <div class="fields-col">177        <div class="input-box"><div class="placeholder">Company</div></div>178      </div>179    </div>180 181    <!-- Phone -->182    <div class="row">183      <div class="icon-col">184        <svg width="44" height="44" viewBox="0 0 24 24" fill="#a7b6ad">185          <path d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1 .3 2.1.5 3.2.5.7 0 1.2.5 1.2 1.2V20c0 .7-.5 1.2-1.2 1.2C10.6 21.2 2.8 13.4 2.8 3.4 2.8 2.7 3.3 2 4 2h2.4c.7 0 1.2.5 1.2 1.2 0 1.1.2 2.2.5 3.2.1.4 0 .9-.3 1.2l-2.2 2.2z"/>186        </svg>187      </div>188      <div class="fields-col">189        <div class="input-box"><div class="placeholder">Phone</div></div>190        <div class="inline-small">191          <div class="label-caption">Label</div>192          <div class="input-box relative"><div class="placeholder">Mobile</div>193            <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="#c8d5cd"><path d="M7 10l5 5 5-5z"/></svg>194          </div>195        </div>196      </div>197    </div>198 199    <!-- Email -->200    <div class="row">201      <div class="icon-col">202        <svg width="44" height="44" viewBox="0 0 24 24" fill="#a7b6ad">203          <path d="M2 6h20v12H2z" fill="none" stroke="#a7b6ad" stroke-width="2"/>204          <path d="M2 6l10 7L22 6" fill="none" stroke="#a7b6ad" stroke-width="2"/>205        </svg>206      </div>207      <div class="fields-col">208        <div class="input-box"><div class="placeholder">Email</div></div>209        <div class="inline-small">210          <div class="label-caption">Label</div>211          <div class="input-box relative"><div class="placeholder">Home</div>212            <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="#c8d5cd"><path d="M7 10l5 5 5-5z"/></svg>213          </div>214        </div>215      </div>216    </div>217 218  </div>219 220  <!-- Bottom gesture bar -->221  <div class="gesture"></div>222</div>223</body>224</html>