GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Contacts - Add</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target{8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#202325;10  }11  /* Top profile header */12  .header{13    position:relative;14    height:900px;15    background:linear-gradient(#2b1414 0%, #a6413a 18%, #a6413a 100%);16    color:#fff;17  }18  .status-bar{19    position:absolute; top:20px; left:0; right:0;20    height:70px; color:#fff; font-size:40px; padding:0 40px;21    display:flex; align-items:center; justify-content:space-between; opacity:.95;22  }23  .status-right{ display:flex; align-items:center; gap:24px; font-size:34px; }24  .nav-left, .nav-right{25    position:absolute; top:120px; width:80px; height:80px; display:flex; align-items:center; justify-content:center;26  }27  .nav-left{ left:20px; }28  .nav-right{ right:20px; }29  .avatar-letter{30    position:absolute; left:0; right:0; top:210px;31    text-align:center; font-size:340px; font-weight:700; letter-spacing:6px; color:#fff;32  }33  .corner-star, .corner-camera{34    position:absolute; bottom:120px; width:120px; height:120px; display:flex; align-items:center; justify-content:center;35  }36  .corner-star{ left:24px; }37  .corner-camera{ right:24px; }38 39  /* Form area */40  .form{41    position:relative;42    background:#3a3a3a;43    color:#eaeaea;44    padding:40px 40px 0 120px;45    height:700px;46  }47  .field{48    position:relative;49    margin:38px 0 34px;50    padding-left:0;51  }52  .field .label{53    font-size:42px; color:#dcdcdc; margin-bottom:14px;54  }55  .underline{56    height:6px; background:#ff8c2b; width:930px; border-radius:3px;57  }58  .left-icon{59    position:absolute; left:-80px; top:6px; width:56px; height:56px; display:flex; align-items:center; justify-content:center;60  }61  .right-chip{62    position:absolute; right:40px; top:0; color:#f6f6f6; font-size:44px;63  }64  .add-btn{65    position:absolute; left:420px; top:108px;66    width:120px; height:120px; border-radius:16px;67    border:2px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;68    color:#ffa55c; font-size:84px; font-weight:600; background:rgba(255,255,255,0.06);69  }70 71  /* Keyboard mock */72  .keyboard{73    position:absolute; left:0; right:0; bottom:0; height:800px;74    background:#0f1416; color:#e9ecef; border-top:1px solid #1f272a;75  }76  .suggest{77    height:120px; padding:0 30px; display:flex; align-items:center; gap:24px;78    background:#11181b;79  }80  .chip{81    padding:18px 26px; background:#1f272a; border-radius:20px; font-size:42px; color:#cfd8dc;82  }83  .rows{ padding:14px 16px 0; }84  .key-row{ display:flex; justify-content:space-between; margin:18px 12px; }85  .key{86    width:88px; height:110px; background:#1a2125; border-radius:20px; display:flex; align-items:center; justify-content:center;87    color:#e6eef2; font-size:46px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);88  }89  .key.wide{ width:170px; }90  .space{ flex:1; height:110px; background:#1a2125; border-radius:22px; margin:0 12px; display:flex; align-items:center; justify-content:center; font-size:44px; color:#bfcad0; }91  .enter{ width:150px; }92  .bottom-bar{93    position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center;94  }95  .home-pill{ width:540px; height:12px; background:#d9d9d9; border-radius:6px; opacity:.7; }96  svg{ width:100%; height:100%; }97</style>98</head>99<body>100<div id="render-target">101 102  <div class="header">103    <div class="status-bar">104      <div>1:15</div>105      <div class="status-right">106        <!-- WiFi icon -->107        <div style="width:44px; height:44px;">108          <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-4.7c-1.8 0-3.5.7-4.8 1.9l1.3 1.4c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4l1.3-1.4a6.8 6.8 0 0 0-4.8-1.9Zm0-4.8c-3.4 0-6.4 1.3-8.7 3.5l1.4 1.5A11 11 0 0 1 12 11c2.9 0 5.6 1.1 7.6 3l1.5-1.5A14.2 14.2 0 0 0 12 9Z"/></svg>109        </div>110        <!-- Battery -->111        <div style="display:flex; align-items:center; gap:10px;">112          <div style="width:58px; height:28px; border:3px solid #fff; border-radius:6px; position:relative;">113            <div style="position:absolute; right:-10px; top:6px; width:6px; height:16px; background:#fff;"></div>114            <div style="position:absolute; left:2px; top:2px; bottom:2px; right:2px; background:#fff;"></div>115          </div>116          <div style="font-size:34px;">100%</div>117        </div>118      </div>119    </div>120 121    <div class="nav-left">122      <svg viewBox="0 0 24 24" fill="#fff"><path d="M15.4 19.4 8.9 12l6.5-7.4-1.8-1.5L5.6 12l7.9 8.9 1.9-1.5z"/></svg>123    </div>124    <div class="nav-right">125      <svg viewBox="0 0 24 24" fill="#fff"><path d="M9.2 16.6 4.8 12l1.7-1.7 2.7 2.8 8.3-8.3 1.7 1.7-10 10-1.7.1z"/></svg>126    </div>127 128    <div class="avatar-letter">A</div>129 130    <div class="corner-star">131      <svg viewBox="0 0 24 24" fill="#fff"><path d="m12 2.5 2.5 6.1 6.6.5-5 4.2 1.6 6.4L12 16.6 6.3 19.7l1.6-6.4-5-4.2 6.6-.5L12 2.5z"/></svg>132    </div>133    <div class="corner-camera">134      <svg viewBox="0 0 24 24" fill="#fff"><path d="M9 5.5 7.6 7H5.5A2.5 2.5 0 0 0 3 9.5v7A2.5 2.5 0 0 0 5.5 19h13a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 18.5 7h-2.1L15 5.5H9Zm3 3.5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/></svg>135    </div>136  </div>137 138  <div class="form">139    <!-- First name -->140    <div class="field">141      <div class="left-icon">142        <svg viewBox="0 0 24 24" fill="#e7e7e7"><path d="M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 2c-4.1 0-7.5 2.9-7.5 6.5h3c0-2 2-3.5 4.5-3.5S16.5 18.5 16.5 20.5h3c0-3.6-3.4-6.5-7.5-6.5Z"/></svg>143      </div>144      <div class="label">First name</div>145      <div class="underline"></div>146    </div>147 148    <!-- Surname -->149    <div class="field">150      <div class="left-icon">151        <svg viewBox="0 0 24 24" fill="#e7e7e7"><path d="M12 12a4.6 4.6 0 1 0 0-9.2A4.6 4.6 0 0 0 12 12Zm0 2c-3.7 0-7 2.4-7.8 5.7-.2.8.4 1.3 1.2 1.3h13.3c.8 0 1.4-.5 1.2-1.3C19 16.4 15.7 14 12 14Z"/></svg>152      </div>153      <div class="label">Surname</div>154      <div class="underline"></div>155    </div>156 157    <!-- Number -->158    <div class="field" style="margin-top:50px;">159      <div class="left-icon">160        <svg viewBox="0 0 24 24" fill="#e7e7e7"><path d="M6.6 3h2.8L11 7l-1.8 1c.9 1.8 2.3 3.2 4.1 4.1l1-1.8 4 1.6v2.8c0 .9-.7 1.6-1.6 1.6A14 14 0 0 1 3 7.6C3 6.7 3.7 6 4.6 6h2z"/></svg>161      </div>162      <div class="label">Number</div>163      <div class="right-chip">Mobile</div>164      <div class="underline" style="width:820px;"></div>165      <div class="add-btn">+</div>166    </div>167 168    <!-- Email -->169    <div class="field" style="margin-top:66px;">170      <div class="left-icon">171        <svg viewBox="0 0 24 24" fill="#e7e7e7"><path d="M4 6h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm8 6 8-5H4l8 5Zm0 2-8-5v7h16v-7l-8 5Z"/></svg>172      </div>173      <div class="label">Email</div>174      <div class="right-chip">Home</div>175      <div class="underline" style="width:820px;"></div>176    </div>177  </div>178 179  <!-- Keyboard mock -->180  <div class="keyboard">181    <div class="suggest">182      <div class="chip">Richard Wagner</div>183    </div>184    <div class="rows">185      <div class="key-row">186        <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><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>187      </div>188      <div class="key-row">189        <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><div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>190      </div>191      <div class="key-row">192        <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><div class="key wide">⌫</div>193      </div>194      <div class="key-row">195        <div class="key wide">?123</div>196        <div class="key">,</div>197        <div class="space">Space</div>198        <div class="key">.</div>199        <div class="key enter">⏎</div>200      </div>201    </div>202    <div class="bottom-bar">203      <div class="home-pill"></div>204    </div>205  </div>206 207</div>208</body>209</html>