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 Detail Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color: #ffffff;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: radial-gradient(1200px 1200px at 50% -200px, #1d3c51 0%, #0f2a3b 60%, #0b2131 100%);21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 120px;30    padding: 24px 36px 0;31    box-sizing: border-box;32    display: flex;33    align-items: flex-start;34    justify-content: space-between;35    color: #ffffff;36    font-size: 42px;37    letter-spacing: 1px;38    opacity: 0.95;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 22px;44  }45  .dot {46    width: 14px;47    height: 14px;48    background: #ffffff;49    border-radius: 50%;50    opacity: 0.85;51  }52  .icon-wifi,53  .icon-battery {54    width: 44px;55    height: 44px;56  }57 58  /* Header actions */59  .top-actions {60    position: absolute;61    top: 120px;62    left: 0;63    width: 100%;64    height: 100px;65    padding: 0 36px;66    box-sizing: border-box;67    display: flex;68    align-items: center;69    justify-content: space-between;70  }71  .back-btn {72    display: flex;73    align-items: center;74    gap: 12px;75    color: #ff6b6b;76    font-size: 38px;77  }78  .edit-link {79    color: #ff6b6b;80    font-weight: 700;81    font-size: 42px;82    letter-spacing: 1px;83  }84 85  /* Profile */86  .profile-wrap {87    position: absolute;88    top: 240px;89    left: 0;90    width: 100%;91    text-align: center;92  }93  .avatar {94    width: 260px;95    height: 260px;96    margin: 0 auto;97    border-radius: 50%;98    background: #101418;99    border: 16px solid rgba(255,255,255,0.35);100    position: relative;101    display: flex;102    align-items: center;103    justify-content: center;104    font-weight: 800;105    font-size: 88px;106    color: #e9f0f7;107    box-shadow: 0 10px 30px rgba(0,0,0,0.35) inset;108  }109  .camera-badge {110    position: absolute;111    right: -6px;112    bottom: 16px;113    width: 96px;114    height: 96px;115    border-radius: 50%;116    background: #3a84a4;117    border: 8px solid rgba(0,0,0,0.2);118    display: flex;119    align-items: center;120    justify-content: center;121  }122  .profile-name {123    margin-top: 26px;124    font-size: 84px;125    font-weight: 600;126    letter-spacing: 1px;127  }128  .profile-sub {129    margin-top: 10px;130    font-size: 40px;131    color: rgba(210,230,244,0.6);132  }133 134  /* Quick actions */135  .quick-actions {136    margin-top: 46px;137    display: flex;138    justify-content: center;139    gap: 66px;140  }141  .qa-item {142    width: 150px;143    text-align: center;144    color: rgba(210,230,244,0.85);145  }146  .qa-ico {147    width: 150px;148    height: 150px;149    border-radius: 50%;150    background: rgba(80,140,170,0.8);151    display: flex;152    align-items: center;153    justify-content: center;154    margin-bottom: 18px;155    box-shadow: 0 6px 16px rgba(0,0,0,0.25) inset;156  }157  .qa-label {158    font-size: 36px;159    color: rgba(210,230,244,0.8);160  }161 162  /* Dots */163  .dots {164    margin-top: 40px;165    display: flex;166    justify-content: center;167    gap: 18px;168  }169  .dot-sm {170    width: 18px;171    height: 18px;172    border-radius: 50%;173    background: rgba(255,255,255,0.4);174  }175  .dot-sm.active {176    background: rgba(255,255,255,0.9);177  }178 179  /* Number card */180  .number-card {181    position: absolute;182    left: 0;183    right: 0;184    top: 1100px;185    padding: 0 56px;186  }187  .divider {188    height: 2px;189    background: rgba(180,200,215,0.35);190    margin: 0 0 28px;191  }192  .number-row {193    display: flex;194    align-items: center;195    justify-content: space-between;196    padding: 16px 0 26px;197  }198  .num-left .number {199    font-size: 56px;200    letter-spacing: 1px;201  }202  .num-left .label {203    margin-top: 8px;204    font-size: 30px;205    letter-spacing: 2px;206    color: rgba(210,230,244,0.6);207  }208  .num-actions {209    display: flex;210    align-items: center;211    gap: 26px;212  }213  .round-btn {214    width: 110px;215    height: 110px;216    border-radius: 50%;217    display: flex;218    align-items: center;219    justify-content: center;220    box-shadow: 0 10px 18px rgba(0,0,0,0.25);221  }222  .btn-sms {223    background: #8fc3dc;224    color: #0d3a4e;225    font-weight: 800;226    font-size: 34px;227  }228  .btn-call {229    background: #0b8f60;230  }231 232  /* Recents */233  .recents {234    position: absolute;235    top: 1400px;236    left: 0;237    right: 0;238    padding: 0 56px;239    color: rgba(210,230,244,0.85);240  }241  .recents-header {242    display: flex;243    align-items: center;244    gap: 28px;245  }246  .recents-title {247    font-size: 44px;248    letter-spacing: 2px;249    color: rgba(210,230,244,0.65);250  }251  .recents-line {252    flex: 1;253    height: 2px;254    background: rgba(180,200,215,0.35);255  }256  .no-history {257    text-align: center;258    margin-top: 46px;259    font-size: 46px;260    color: #8fc3dc;261  }262 263  /* Gesture bar */264  .gesture {265    position: absolute;266    bottom: 28px;267    left: 50%;268    transform: translateX(-50%);269    width: 360px;270    height: 14px;271    border-radius: 10px;272    background: rgba(255,255,255,0.7);273    opacity: 0.85;274  }275</style>276</head>277<body>278<div id="render-target">279 280  <!-- Status bar -->281  <div class="status-bar">282    <div class="status-left">9:11</div>283    <div class="status-right">284      <div class="dot"></div>285      <div class="dot"></div>286      <div class="dot"></div>287      <div class="dot"></div>288      <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">289        <path d="M2 8c5-4 15-4 20 0"/>290        <path d="M5 12c4-3 10-3 14 0"/>291        <path d="M9 16c2-1 4-1 6 0"/>292        <circle cx="12" cy="19" r="1.6" fill="white"></circle>293      </svg>294      <svg class="icon-battery" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">295        <rect x="2" y="7" width="18" height="10" rx="2"></rect>296        <rect x="4" y="9" width="12" height="6" fill="white"></rect>297        <rect x="20" y="10" width="2" height="4" rx="1" fill="white"></rect>298      </svg>299    </div>300  </div>301 302  <!-- Top actions -->303  <div class="top-actions">304    <div class="back-btn">305      <svg width="56" height="56" viewBox="0 0 24 24" fill="#ff6b6b">306        <path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12l10-9 1.5 1.5z"></path>307      </svg>308    </div>309    <div class="edit-link">EDIT</div>310  </div>311 312  <!-- Profile section -->313  <div class="profile-wrap">314    <div class="avatar">315      Bu316      <div class="camera-badge">317        <svg width="48" height="36" viewBox="0 0 24 16" fill="#cde6f3">318          <path d="M3 4h3l1.2-2h7.6L16 4h3a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"></path>319          <circle cx="9" cy="9" r="3" fill="#3a84a4"></circle>320          <circle cx="9" cy="9" r="2" fill="#cde6f3"></circle>321        </svg>322      </div>323    </div>324    <div class="profile-name">Bubb</div>325    <div class="profile-sub">(dbwscratch.test.id16@gmail.com)</div>326 327    <div class="quick-actions">328      <div class="qa-item">329        <div class="qa-ico">330          <svg width="72" height="72" viewBox="0 0 24 24" stroke="#e6f4fb" fill="none" stroke-width="2">331            <circle cx="12" cy="12" r="8"></circle>332            <path d="M7 17l10-10"></path>333          </svg>334        </div>335        <div class="qa-label">Block</div>336      </div>337      <div class="qa-item">338        <div class="qa-ico">339          <svg width="72" height="72" viewBox="0 0 24 24" stroke="#e6f4fb" fill="none" stroke-width="2">340            <circle cx="12" cy="12" r="8"></circle>341            <circle cx="9" cy="11" r="1.2" fill="#e6f4fb"></circle>342            <circle cx="15" cy="11" r="1.2" fill="#e6f4fb"></circle>343            <path d="M9 15c2 1 4 1 6 0"></path>344          </svg>345        </div>346        <div class="qa-label">Spam</div>347      </div>348      <div class="qa-item">349        <div class="qa-ico">350          <svg width="72" height="72" viewBox="0 0 24 24" stroke="#e6f4fb" fill="none" stroke-width="2">351            <circle cx="9" cy="12" r="4"></circle>352            <circle cx="15" cy="12" r="4"></circle>353          </svg>354        </div>355        <div class="qa-label">Merge contact</div>356      </div>357      <div class="qa-item">358        <div class="qa-ico">359          <svg width="72" height="72" viewBox="0 0 24 24" stroke="#e6f4fb" fill="none" stroke-width="2">360            <rect x="6" y="7" width="12" height="12" rx="1"></rect>361            <path d="M9 7l1-2h4l1 2"></path>362            <path d="M10 11v6M14 11v6"></path>363          </svg>364        </div>365        <div class="qa-label">Delete</div>366      </div>367    </div>368 369    <div class="dots">370      <div class="dot-sm"></div>371      <div class="dot-sm active"></div>372    </div>373  </div>374 375  <!-- Number card -->376  <div class="number-card">377    <div class="divider"></div>378    <div class="number-row">379      <div class="num-left">380        <div class="number">785469007855</div>381        <div class="label">MOBILE</div>382      </div>383      <div class="num-actions">384        <div class="round-btn btn-sms">SMS</div>385        <div class="round-btn btn-call">386          <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">387            <path d="M6 2l3 3-2 2c1.5 3 3.5 5 6 6l2-2 3 3-2 2c-1 1-3.5 1-6-0.5S5 12 3.5 9c-1.5-2.5-1.5-5 0-6L6 2z"></path>388          </svg>389        </div>390      </div>391    </div>392    <div class="divider"></div>393  </div>394 395  <!-- Recents -->396  <div class="recents">397    <div class="recents-header">398      <div class="recents-title">RECENTS</div>399      <div class="recents-line"></div>400    </div>401    <div class="no-history">No history</div>402  </div>403 404  <!-- Gesture bar -->405  <div class="gesture"></div>406</div>407</body>408</html>