GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Contact Detail UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#16181C; color:#E9EDF3;13    border-radius:28px; box-shadow: 0 12px 40px rgba(0,0,0,0.45);14  }15 16  /* Status bar */17  .status-bar {18    position:absolute; top:0; left:0; right:0;19    height:120px; padding:0 36px;20    display:flex; align-items:center; justify-content:space-between;21    color:#E9EDF3; font-weight:500; letter-spacing:0.5px;22    font-size:36px;23  }24  .status-right { display:flex; align-items:center; gap:28px; }25  .icon { width:48px; height:48px; display:inline-block; }26  .ico-stub svg { width:48px; height:48px; fill:#E9EDF3; }27 28  /* Top actions row */29  .top-actions {30    position:absolute; top:150px; left:36px; right:36px;31    display:flex; align-items:center; justify-content:space-between;32  }33  .left-back { display:flex; align-items:center; gap:16px; }34  .left-back .icon svg { fill:#BFC6D8; }35  .right-tools { display:flex; align-items:center; gap:56px; }36  .right-tools .icon svg { fill:#BFC6D8; }37 38  /* Avatar + name */39  .profile {40    position:absolute; top:330px; left:0; right:0;41    display:flex; flex-direction:column; align-items:center;42  }43  .avatar {44    width:300px; height:300px; border-radius:50%;45    background:#55D7E5; display:flex; align-items:center; justify-content:center;46    color:#0A2230; font-size:160px; font-weight:600;47    box-shadow:0 6px 16px rgba(0,0,0,0.35);48  }49  .name {50    margin-top:60px; font-size:72px; font-weight:500; letter-spacing:0.3px;51    color:#F3F6FB;52  }53 54  /* Divider */55  .divider {56    position:absolute; left:0; right:0; height:2px; background:#2B2E34;57  }58  .divider.top { top:930px; }59  .divider.bottom { top:1150px; }60 61  /* Quick actions */62  .quick-actions {63    position:absolute; top:960px; left:0; right:0;64    display:flex; align-items:center; justify-content:space-around;65    color:#9EB9FF; text-align:center;66  }67  .qa-item { display:flex; flex-direction:column; align-items:center; gap:22px; }68  .qa-item .icon svg { width:72px; height:72px; fill:#9EB9FF; }69  .qa-label { font-size:36px; color:#AFC6FF; }70 71  /* Contact card */72  .card {73    position:absolute; top:1240px; left:54px; width:972px;74    background:#1F2227; border-radius:36px; padding:44px;75    box-shadow:0 6px 18px rgba(0,0,0,0.35);76    border:1px solid #2B2E34;77  }78  .card-title { font-size:46px; font-weight:600; color:#E9EDF3; margin-bottom:40px; }79  .card-row {80    display:flex; align-items:flex-start; justify-content:space-between;81  }82  .card-left {83    display:flex; align-items:flex-start; gap:28px;84  }85  .card-left .icon svg { width:60px; height:60px; fill:#BFC6D8; }86  .phone-wrap { display:flex; flex-direction:column; gap:12px; }87  .phone-number { font-size:48px; color:#E9EDF3; letter-spacing:0.2px; }88  .phone-type { font-size:34px; color:#9AA2B4; }89  .card-right .icon svg { width:60px; height:60px; fill:#BFC6D8; }90 91  /* Footer note */92  .footer-note {93    position:absolute; top:1680px; left:0; right:0;94    text-align:center; color:#A3A9B9; font-size:32px;95  }96 97  /* Home pill */98  .home-pill {99    position:absolute; bottom:44px; left:50%; transform:translateX(-50%);100    width:300px; height:16px; background:#E9EDF3; border-radius:16px; opacity:0.85;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="status-bar">109    <div class="status-left">8:33</div>110    <div class="status-right">111      <div class="ico-stub icon">112        <!-- Cloud icon -->113        <svg viewBox="0 0 24 24"><path d="M6 18h10a4 4 0 0 0 0-8h-.4A6 6 0 0 0 6 7a5 5 0 0 0 0 11z"/></svg>114      </div>115      <div class="ico-stub icon">116        <!-- WiFi -->117        <svg viewBox="0 0 24 24"><path d="M2 9a15 15 0 0 1 20 0l-2 2a12 12 0 0 0-16 0L2 9zm4 5a9 9 0 0 1 12 0l-2 2a6 6 0 0 0-8 0l-2-2zm6 6 3-3-6 0 3 3z"/></svg>118      </div>119      <div class="ico-stub icon">120        <!-- Battery -->121        <svg viewBox="0 0 24 24"><path d="M20 8h1v8h-1v2H4V6h16v2zM6 8v8h12V8H6z"/></svg>122      </div>123    </div>124  </div>125 126  <!-- Top actions -->127  <div class="top-actions">128    <div class="left-back">129      <div class="icon">130        <!-- Back arrow -->131        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6V6z"/></svg>132      </div>133    </div>134    <div class="right-tools">135      <div class="icon">136        <!-- Pencil -->137        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>138      </div>139      <div class="icon">140        <!-- Star outline -->141        <svg viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z" fill="none" stroke="#BFC6D8" stroke-width="1.5"/></svg>142      </div>143      <div class="icon">144        <!-- More vertical -->145        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>146      </div>147    </div>148  </div>149 150  <!-- Profile -->151  <div class="profile">152    <div class="avatar">C</div>153    <div class="name">Con2</div>154  </div>155 156  <div class="divider top"></div>157 158  <!-- Quick actions -->159  <div class="quick-actions">160    <div class="qa-item">161      <div class="icon">162        <!-- Phone -->163        <svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.05-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1A18 18 0 0 1 3 5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.05l-2.21 2.17z"/></svg>164      </div>165      <div class="qa-label">Call</div>166    </div>167    <div class="qa-item">168      <div class="icon">169        <!-- Message -->170        <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3V4z"/></svg>171      </div>172      <div class="qa-label">Text</div>173    </div>174    <div class="qa-item">175      <div class="icon">176        <!-- Video camera -->177        <svg viewBox="0 0 24 24"><path d="M15 8v8H5V8h10zm2 2 4-2v8l-4-2v-4z"/></svg>178      </div>179      <div class="qa-label">Set up</div>180    </div>181  </div>182 183  <div class="divider bottom"></div>184 185  <!-- Contact card -->186  <div class="card">187    <div class="card-title">Contact info</div>188    <div class="card-row">189      <div class="card-left">190        <div class="icon">191          <!-- Phone small -->192          <svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.05-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1A18 18 0 0 1 3 5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.05l-2.21 2.17z"/></svg>193        </div>194        <div class="phone-wrap">195          <div class="phone-number">979767849649</div>196          <div class="phone-type">Mobile</div>197        </div>198      </div>199      <div class="card-right">200        <div class="icon">201          <!-- Message inline -->202          <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 3V4z"/></svg>203        </div>204      </div>205    </div>206  </div>207 208  <div class="footer-note">Added Jul 18, 2023 (dbwscratch.test.id8@gmail.com)</div>209 210  <div class="home-pill"></div>211</div>212</body>213</html>