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    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0f1714; /* deep greenish dark */15    color: #e8efe9;16    border-radius: 36px;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    right: 0;25    height: 90px;26    padding: 0 34px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #e7eee8;31    font-size: 32px;32    letter-spacing: 0.5px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 18px;38  }39  .icon {40    width: 34px;41    height: 34px;42    display: inline-block;43  }44 45  /* App bar */46  .app-bar {47    position: absolute;48    top: 90px;49    left: 0;50    right: 0;51    height: 140px;52    display: flex;53    align-items: center;54    padding: 0 36px;55    gap: 26px;56  }57  .title {58    font-size: 64px;59    font-weight: 600;60    letter-spacing: 0.2px;61    flex: 1;62  }63  .save-btn {64    background: #ec9ea5;65    color: #12201a;66    border-radius: 999px;67    padding: 22px 44px;68    font-size: 36px;69    font-weight: 600;70  }71  .overflow-btn { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }72 73  /* Content area */74  .content {75    position: absolute;76    top: 250px;77    left: 52px;78    right: 52px;79    bottom: 760px; /* leave room for keyboard */80    overflow: hidden;81    padding-right: 12px;82  }83 84  .row {85    margin-bottom: 42px;86    display: flex;87    align-items: flex-start;88    gap: 24px;89  }90 91  .helper {92    color: #a8b6ae;93    font-size: 24px;94    margin: 6px 0 10px 16px;95  }96 97  .dropdown {98    width: 520px;99    border: 2px solid #7a8b82;100    border-radius: 18px;101    padding: 26px 28px;102    font-size: 38px;103    color: #e9f0ea;104    position: relative;105  }106  .dropdown .chev {107    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);108  }109 110  .input {111    flex: 1;112    border: 2px solid #7a8b82;113    border-radius: 18px;114    padding: 28px;115    font-size: 40px;116    color: #e9f0ea;117  }118 119  .input.big {120    width: calc(100% - 100px);121  }122 123  .input.active {124    border-color: #ec9ea5;125    box-shadow: 0 0 0 2px rgba(236,158,165,0.25) inset;126  }127 128  .left-icon {129    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-top: 66px;130  }131 132  .icon-btn {133    width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 44px;134  }135 136  /* Keyboard mock */137  .keyboard {138    position: absolute;139    left: 0; right: 0; bottom: 70px;140    padding: 18px 22px 24px;141    background: #0d1411;142    border-top: 1px solid #1e2a24;143  }144  .kb-row {145    display: flex;146    justify-content: center;147    gap: 16px;148    margin: 14px 0;149  }150  .key {151    background: #18221d;152    color: #d6dfda;153    border: 1px solid #2a3933;154    width: 92px; height: 110px;155    border-radius: 18px;156    display: flex;157    align-items: center;158    justify-content: center;159    font-size: 44px;160  }161  .key.small { width: 110px; }162  .key.medium { width: 160px; }163  .key.large { width: 220px; }164  .key.pill {165    border-radius: 999px;166    background: #aec8b8;167    color: #0f1714;168    font-size: 34px;169  }170  .key.enter {171    background: #ec9ea5;172    color: #13201a;173    width: 120px;174  }175 176  .gesture-bar {177    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);178    width: 300px; height: 8px; border-radius: 6px; background: #95a59c;179    opacity: 0.8;180  }181 182  /* subtle rounded outlines used throughout */183  .rounded {184    border-radius: 18px;185  }186</style>187</head>188<body>189<div id="render-target">190  <!-- Status bar -->191  <div class="status-bar">192    <div>12:26</div>193    <div class="status-icons">194      <!-- simple status glyphs -->195      <svg class="icon" viewBox="0 0 24 24" fill="#e8efe9"><path d="M7 12a5 5 0 0 0 10 0c0-2.8-2.2-5-5-5v10a5 5 0 0 1-5-5z"/></svg>196      <svg class="icon" viewBox="0 0 24 24" fill="#e8efe9"><path d="M12 2l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z"/></svg>197      <svg class="icon" viewBox="0 0 24 24" fill="#e8efe9"><path d="M4 3h16v3H4zM4 9h16v3H4zM4 15h16v3H4z"/></svg>198      <!-- battery -->199      <svg class="icon" viewBox="0 0 24 24" fill="#e8efe9"><path d="M16 5h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h10v2z"/></svg>200      <div style="font-size:28px;">100%</div>201    </div>202  </div>203 204  <!-- App bar -->205  <div class="app-bar">206    <!-- Back X -->207    <div class="icon-btn">208      <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#e8efe9" stroke-width="2">209        <path d="M18 6L6 18M6 6l12 12"/>210      </svg>211    </div>212    <div class="title">Create contact</div>213    <div class="save-btn">Save</div>214    <div class="overflow-btn">215      <svg width="40" height="40" viewBox="0 0 24 24" fill="#e8efe9">216        <circle cx="12" cy="5" r="2"></circle>217        <circle cx="12" cy="12" r="2"></circle>218        <circle cx="12" cy="19" r="2"></circle>219      </svg>220    </div>221  </div>222 223  <!-- Content -->224  <div class="content">225 226    <!-- Label: Mobile dropdown -->227    <div class="helper">Label</div>228    <div class="row">229      <div class="dropdown">230        Mobile231        <span class="chev">232          <svg width="40" height="40" viewBox="0 0 24 24" fill="#e8efe9"><path d="M7 10l5 5 5-5z"/></svg>233        </span>234      </div>235    </div>236 237    <!-- Phone input -->238    <div class="row">239      <div class="input big">Phone</div>240    </div>241 242    <!-- Label: Work -->243    <div class="helper">Label</div>244    <div class="row">245      <div class="dropdown">246        Work247        <span class="chev">248          <svg width="40" height="40" viewBox="0 0 24 24" fill="#e8efe9"><path d="M7 10l5 5 5-5z"/></svg>249        </span>250      </div>251    </div>252 253    <!-- Email filled with icon and remove button -->254    <div class="helper" style="margin-left: 106px;">Email</div>255    <div class="row">256      <div class="left-icon">257        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#e8efe9" stroke-width="1.8">258          <rect x="3" y="5" width="18" height="14" rx="2"></rect>259          <path d="M3 7l9 6 9-6"/>260        </svg>261      </div>262      <div class="input" style="flex:1;">xyz@gmail.com</div>263      <div class="icon-btn">264        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#e8efe9" stroke-width="2">265          <path d="M18 6L6 18M6 6l12 12"/>266        </svg>267      </div>268    </div>269 270    <!-- Label Home dropdown -->271    <div class="helper">Label</div>272    <div class="row">273      <div class="dropdown">274        Home275        <span class="chev">276          <svg width="40" height="40" viewBox="0 0 24 24" fill="#e8efe9"><path d="M7 10l5 5 5-5z"/></svg>277        </span>278      </div>279    </div>280 281    <!-- Active email input with pink border -->282    <div class="helper">Email</div>283    <div class="row">284      <div class="input active big">klman@gmail.com</div>285      <div class="icon-btn">286        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#e8efe9" stroke-width="2">287          <path d="M18 6L6 18M6 6l12 12"/>288        </svg>289      </div>290    </div>291 292  </div>293 294  <!-- Keyboard mock -->295  <div class="keyboard">296    <div class="kb-row">297      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>298      <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>299      <div class="key">o</div><div class="key">p</div>300    </div>301    <div class="kb-row">302      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>303      <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>304      <div class="key">l</div>305    </div>306    <div class="kb-row">307      <div class="key medium">shift</div>308      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>309      <div class="key">b</div><div class="key">n</div><div class="key">m</div>310      <div class="key medium">⌫</div>311    </div>312    <div class="kb-row">313      <div class="key pill small">?123</div>314      <div class="key small">@</div>315      <div class="key small">☺</div>316      <div class="key large">space</div>317      <div class="key small">.</div>318      <div class="key enter">↩</div>319    </div>320  </div>321 322  <div class="gesture-bar"></div>323</div>324</body>325</html>