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>Contact Edit Screen 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:#0b2e3a;12    font-family: Arial, Helvetica, sans-serif; color:#fff;13  }14 15  /* Status bar */16  .status-bar{17    position:absolute; left:0; top:0; width:100%; height:96px;18    background: linear-gradient(#0a1f25, rgba(11,46,58,0));19    display:flex; align-items:center; justify-content:space-between;20    padding:0 30px; box-sizing:border-box; font-size:36px; opacity:0.95;21  }22  .status-right{ display:flex; align-items:center; gap:20px; }23  .battery{ border:2px solid #fff; width:48px; height:26px; border-radius:4px; position:relative; }24  .battery:after{ content:""; position:absolute; right:-8px; top:7px; width:6px; height:12px; background:#fff; border-radius:2px; }25  .battery .level{ position:absolute; left:3px; top:3px; height:18px; width:32px; background:#fff; border-radius:2px; }26 27  /* Header / Avatar block */28  .header{29    position:absolute; left:0; top:96px; width:100%; height:760px;30    background: linear-gradient(#0e5578, #0c6a93);31  }32  .big-initial{33    position:absolute; left:0; right:0; top:110px; text-align:center;34    font-size:440px; font-weight:600; color:#eef6fb; opacity:0.9; letter-spacing:4px;35  }36  .top-actions{37    position:absolute; right:30px; top:34px; display:flex; gap:38px; align-items:center;38  }39  .back-btn{ position:absolute; left:26px; top:34px; width:60px; height:60px; opacity:0.96; }40  .fav-star{ position:absolute; left:56px; bottom:110px; width:80px; height:80px; }41  .camera-fab{42    position:absolute; right:44px; bottom:96px; width:96px; height:96px;43  }44 45  /* Form area */46  .form{47    position:absolute; left:0; top:856px; width:100%; bottom:940px;48    background:#262626; box-sizing:border-box; padding-top:30px;49  }50  .field{ display:flex; align-items:center; padding:24px 40px; column-gap:28px; }51  .field .icon{ width:64px; height:64px; opacity:0.9; }52  .input-line{53    flex:1; color:#fff; font-size:46px; padding:12px 0 18px 0; border-bottom:4px solid #ff9800;54  }55  .placeholder{ color:#b0b0b0; }56  .right-label{ color:#cfcfcf; font-size:40px; margin-left:18px; }57  .add-btn-wrap{ display:flex; justify-content:center; padding:28px 0 10px; }58  .add-btn{59    width:150px; height:110px; border-radius:14px; border:3px solid #6b6b6b; display:flex; align-items:center; justify-content:center;60  }61  .add-btn span{ font-size:72px; color:#ff9800; line-height:1; margin-top:-6px; }62 63  /* Keyboard */64  .keyboard{65    position:absolute; left:0; right:0; bottom:0; height:940px; background:#0e1417; border-top:1px solid #182025;66    box-sizing:border-box; padding:16px 22px 90px;67  }68  .suggest-row{69    height:96px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;70  }71  .chip{72    background:#1e272b; color:#d8dfe4; border:1px solid #2a3a41; border-radius:34px; padding:12px 24px; font-size:38px; display:flex; align-items:center; gap:16px;73  }74  .chip .avatar{75    width:48px; height:48px; background:#2962ff; border-radius:50%;76    display:flex; align-items:center; justify-content:center; font-weight:bold;77  }78 79  .keys{ display:flex; flex-direction:column; gap:16px; margin-top:8px; }80  .row{ display:flex; justify-content:center; gap:12px; }81  .key{82    width:92px; height:120px; border-radius:14px; background:#20282d; color:#e6ecef; display:flex; align-items:center; justify-content:center; font-size:44px; box-shadow:inset 0 -2px 0 rgba(255,255,255,0.05);83  }84  .key.wide{ width:124px; }85  .key.xwide{ width:160px; }86  .key.circle{ width:120px; height:120px; border-radius:60px; background:#4caf50; color:#07230a; font-weight:700; }87  .key.dark{ background:#1a2226; color:#b8c1c7; }88  .space{ width:520px; }89  .gesture{90    position:absolute; left:50%; transform:translateX(-50%); bottom:26px; width:260px; height:8px; background:#e9e9e9; border-radius:4px; opacity:0.85;91  }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">2:54</div>100    <div class="status-right">101      <span>⬤ ⬤</span>102      <span>📶</span>103      <div class="battery"><div class="level"></div></div>104      <span style="font-size:32px;">100%</span>105    </div>106  </div>107 108  <!-- Header / avatar initial -->109  <div class="header">110    <svg class="back-btn" viewBox="0 0 24 24">111      <path d="M15 6L9 12l6 6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>112    </svg>113 114    <div class="top-actions">115      <svg width="54" height="54" viewBox="0 0 24 24">116        <path d="M5 13l4 4L19 7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>117      </svg>118      <svg width="54" height="54" viewBox="0 0 24 24">119        <circle cx="6" cy="12" r="2" fill="#fff"/><circle cx="16" cy="6" r="2" fill="#fff"/><circle cx="16" cy="18" r="2" fill="#fff"/>120        <path d="M8 12h6M16 8v8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>121      </svg>122      <svg width="54" height="54" viewBox="0 0 24 24">123        <circle cx="12" cy="5" r="2" fill="#fff"/><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="12" cy="19" r="2" fill="#fff"/>124      </svg>125    </div>126 127    <div class="big-initial">C</div>128 129    <svg class="fav-star" viewBox="0 0 24 24">130      <path d="M12 3l3 6 7 .9-5 4.6 1.3 7L12 18l-6.3 3.5L7 14.5 2 9.9 9 9z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>131    </svg>132 133    <svg class="camera-fab" viewBox="0 0 48 48">134      <rect x="2" y="2" width="44" height="44" rx="10" ry="10" fill="none" stroke="#fff" stroke-width="3"/>135      <path d="M31 18h-3l-2-2h-4l-2 2h-3a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-9a3 3 0 0 0-3-3z" fill="none" stroke="#fff" stroke-width="2"/>136      <circle cx="24" cy="26" r="5" fill="none" stroke="#fff" stroke-width="2"/>137    </svg>138  </div>139 140  <!-- Form Section -->141  <div class="form">142    <div class="field">143      <svg class="icon" viewBox="0 0 24 24">144        <circle cx="12" cy="8" r="4" fill="#d9d9d9"/>145        <path d="M4 20c2-4 14-4 16 0" fill="none" stroke="#d9d9d9" stroke-width="2" stroke-linecap="round"/>146      </svg>147      <div class="input-line">Clara</div>148    </div>149 150    <div class="field" style="padding-top:18px;">151      <div style="width:64px; height:64px;"></div>152      <div class="input-line">Wagner</div>153    </div>154 155    <div class="field">156      <svg class="icon" viewBox="0 0 24 24">157        <path d="M6 2l3 2v4l-2 2c2 4 6 6 10 8l2-2h4l2 3c-2 2-5 3-7 3C10 22 2 14 2 7c0-2 1-5 4-5z" fill="#d9d9d9"/>158      </svg>159      <div class="input-line">2111112222</div>160      <div class="right-label">Mobile</div>161    </div>162 163    <div class="add-btn-wrap">164      <div class="add-btn"><span>+</span></div>165    </div>166 167    <div class="field" style="padding-top:10px;">168      <svg class="icon" viewBox="0 0 24 24">169        <path d="M3 6h18v12H3z" fill="none" stroke="#d9d9d9" stroke-width="2"/>170        <path d="M3 7l9 7 9-7" fill="none" stroke="#d9d9d9" stroke-width="2"/>171      </svg>172      <div class="input-line"><span class="placeholder">Email</span></div>173      <div class="right-label">Home</div>174    </div>175  </div>176 177  <!-- Keyboard -->178  <div class="keyboard">179    <div class="suggest-row">180      <div class="chip">181        <div class="avatar">•</div>182        Richard Wagner183      </div>184    </div>185 186    <div class="keys">187      <div class="row">188        <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>189        <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>190      </div>191      <div class="row">192        <div class="key wide">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>193        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key wide">l</div>194      </div>195      <div class="row">196        <div class="key xwide dark">⇧</div>197        <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>198        <div class="key">n</div><div class="key">m</div>199        <div class="key xwide dark">⌫</div>200      </div>201      <div class="row">202        <div class="key circle dark" style="background:#7fd4a5; color:#06240f;">?123</div>203        <div class="key dark">,</div>204        <div class="key space dark"></div>205        <div class="key dark">.</div>206        <div class="key circle">➜</div>207      </div>208    </div>209 210    <div class="gesture"></div>211  </div>212 213</div>214</body>215</html>