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; font-family: Arial, Helvetica, sans-serif; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#0f1814; color:#e7efe9;12  }13 14  /* Status bar */15  .status-bar{16    position:absolute; top:0; left:0; right:0; height:96px;17    padding:0 28px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;18    color:#e9efe9; font-size:36px; letter-spacing:1px;19  }20  .status-right{ display:flex; align-items:center; gap:22px; }21  .icon{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; }22  .icon svg{ width:36px; height:36px; fill:#e9efe9; }23 24  /* App bar */25  .app-bar{26    position:absolute; top:96px; left:0; right:0; height:160px;27    display:flex; align-items:center; padding:0 28px; box-sizing:border-box;28  }29  .app-title{30    font-size:56px; font-weight:600; margin-left:20px;31  }32  .save-wrap{ margin-left:auto; display:flex; align-items:center; gap:24px; }33  .btn-save{34    background:#f4b3b8; color:#111; padding:18px 38px; border-radius:40px; font-size:42px; font-weight:600;35    box-shadow:0 0 0 1px rgba(0,0,0,0.1) inset;36  }37  .kebab{ width:16px; height:16px; position:relative; margin-right:6px; }38  .kebab::before, .kebab::after, .kebab span{39    content:""; display:block; width:8px; height:8px; border-radius:50%; background:#e9efe9; margin:6px auto;40  }41 42  /* Add picture area */43  .avatar-area{44    position:absolute; top:330px; left:0; right:0; text-align:center;45  }46  .avatar{47    width:320px; height:320px; margin:0 auto; border-radius:50%;48    background:#264334; display:flex; align-items:center; justify-content:center;49  }50  .avatar svg{ width:150px; height:150px; fill:#c8e0d3; opacity:0.9; }51  .add-picture{52    margin-top:26px; color:#f4b3b8; font-size:40px;53  }54 55  /* Form */56  .form{57    position:absolute; top:780px; left:44px; right:44px;58  }59  .row{60    display:grid; grid-template-columns: 84px 1fr; column-gap:20px; align-items:start; margin-bottom:34px;61  }62  .leading{63    display:flex; align-items:center; justify-content:center; margin-top:22px; opacity:0.8;64  }65  .leading svg{ width:46px; height:46px; fill:#b6c6be; }66 67  .field-box{68    position:relative; border:2px solid #6e8177; border-radius:20px; padding:32px 92px 34px 28px; min-height:120px;69    display:flex; align-items:flex-end; color:#e9efe9; box-sizing:border-box;70  }71  .field-box .label{72    position:absolute; top:-20px; left:18px; padding:0 10px; background:#0f1814; color:#b9c6bf; font-size:28px;73  }74  .field-box .value{ font-size:48px; letter-spacing:0.2px; }75  .field-box .suffix{76    position:absolute; right:18px; top:50%; transform:translateY(-50%); opacity:0.85;77  }78  .field-box .suffix svg{ width:42px; height:42px; fill:#b6c6be; }79 80  /* Focused company field */81  .field-box.focus{82    border-color:#f4b3b8;83  }84  .field-box.focus .label{ color:#f4b3b8; }85 86  /* Keyboard mock */87  .keyboard{88    position:absolute; left:0; right:0; bottom:68px; height:980px;89    background:#121b16; border-top:1px solid #223128;90    box-sizing:border-box; padding:16px 18px;91  }92  .suggestions{93    display:flex; gap:22px; padding:8px 8px 20px; align-items:center;94  }95  .chip{96    padding:12px 26px; border-radius:28px; background:#1a231e; color:#dfe7e2; border:1px solid #2a362f; font-size:34px;97  }98  .keys{ margin-top:8px; }99  .row-keys{ display:flex; justify-content:center; gap:16px; margin:18px 0; padding:0 8px; }100  .key{101    background:#1a231e; border:1px solid #2a362f; color:#e8efe9; border-radius:18px; width:88px; height:120px;102    display:flex; align-items:center; justify-content:center; font-size:44px;103  }104  .key-wide{ width:160px; }105  .key-xwide{ flex:1; min-width:420px; }106  .key-circle{107    width:128px; height:128px; border-radius:999px; background:#f4b3b8; color:#0f1814; font-weight:700; border:none;108  }109  .key-muted{ background:#1a221d; color:#cdd8d2; }110 111  /* Bottom gesture bar */112  .gesture{113    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);114    width:360px; height:10px; border-radius:8px; background:#e9eceb; opacity:0.85;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status bar -->122  <div class="status-bar">123    <div class="status-left">12:21</div>124    <div class="status-right">125      <div class="icon">126        <svg viewBox="0 0 24 24"><path d="M2 10l5-5v14l-5-5zm16-6h4v16h-4z"/></svg>127      </div>128      <div class="icon">129        <svg viewBox="0 0 24 24"><path d="M12 3C7 3 2.73 6.11 1 10.5L3 11c1.43-3.44 4.76-5.5 9-5.5s7.57 2.06 9 5.5l2-.5C21.27 6.11 17 3 12 3zm0 6c-3.18 0-5.99 1.87-7.33 4.66L6 14c1.01-1.9 3-3 6-3s4.99 1.1 6 3l1.33-.34C17.99 10.87 15.18 9 12 9z"/></svg>130      </div>131      <div style="font-size:34px; opacity:.9;">100%</div>132      <div class="icon">133        <svg viewBox="0 0 24 24"><path d="M16 6H8L5 9v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm-1 10H9v-2h6v2zm0-4H9v-2h6v2z"/></svg>134      </div>135    </div>136  </div>137 138  <!-- App bar -->139  <div class="app-bar">140    <div class="icon" style="margin-right:8px;">141      <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>142    </div>143    <div class="app-title">Create contact</div>144    <div class="save-wrap">145      <div class="btn-save">Save</div>146      <div class="kebab"><span></span></div>147    </div>148  </div>149 150  <!-- Add picture -->151  <div class="avatar-area">152    <div class="avatar">153      <svg viewBox="0 0 24 24">154        <path d="M19 3H5c-1.1 0-2 .9-2 2v14l4-4h12c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM8.5 12L11 15l3.5-4.5L18 16H6l2.5-4z"/>155        <path d="M20 7h-2V5h-2V3h2V1h2v2h2v2h-2v2z"/>156      </svg>157    </div>158    <div class="add-picture">Add picture</div>159  </div>160 161  <!-- Form fields -->162  <div class="form">163 164    <div class="row">165      <div class="leading">166        <svg viewBox="0 0 24 24"><path d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z"/></svg>167      </div>168      <div class="field-box">169        <div class="label">First name</div>170        <div class="value">Rahul</div>171        <div class="suffix">172          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>173        </div>174      </div>175    </div>176 177    <div class="row">178      <div class="leading"></div>179      <div class="field-box">180        <div class="label">Last name</div>181        <div class="value">Sharma</div>182      </div>183    </div>184 185    <div class="row">186      <div class="leading">187        <svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm10 8h8V3h-8v18zM5 5h4v6H5V5zm10 0h4v14h-4V5z"/></svg>188      </div>189      <div class="field-box focus">190        <div class="label">Company</div>191        <div class="value">Abcd</div>192        <div class="suffix">193          <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>194        </div>195      </div>196    </div>197 198  </div>199 200  <!-- Keyboard mock -->201  <div class="keyboard">202    <div class="suggestions">203      <div class="chip">Abcd</div>204      <div class="chip">ABCD</div>205      <div class="chip">abcd</div>206    </div>207 208    <div class="keys">209      <div class="row-keys">210        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>211        <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>212      </div>213      <div class="row-keys">214        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>215        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>216      </div>217      <div class="row-keys">218        <div class="key key-wide key-muted">⇧</div>219        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>220        <div class="key key-wide key-muted">221          <svg viewBox="0 0 24 24" width="36" height="36" style="fill:#e8efe9;"><path d="M6 19l8.5-7L6 5v14zm9 0h3V5h-3v14z"/></svg>222        </div>223      </div>224      <div class="row-keys">225        <div class="key key-circle" style="background:#9bb59f; color:#0f1814; font-weight:700; width:128px; height:128px;">?123</div>226        <div class="key">,</div>227        <div class="key key-wide key-muted">😊</div>228        <div class="key key-xwide">space</div>229        <div class="key">.</div>230        <div class="key key-circle">231          <svg viewBox="0 0 24 24" width="42" height="42" style="fill:#0f1814;"><path d="M4 12l1.41 1.41L10 8.83V20h2V8.83l4.59 4.58L18 12l-7-7-7 7z"/></svg>232        </div>233      </div>234    </div>235  </div>236 237  <div class="gesture"></div>238</div>239</body>240</html>