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 { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2b2b2b;15    font-family: Arial, Helvetica, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: linear-gradient(#0d1f26, rgba(0,0,0,0));27    color: #fff;28  }29  .status-time {30    position: absolute;31    top: 28px;32    left: 36px;33    font-size: 40px;34    letter-spacing: 1px;35  }36  .status-icons {37    position: absolute;38    top: 32px;39    right: 36px;40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .status-dot {45    width: 14px;46    height: 14px;47    background: #fff;48    border-radius: 50%;49    opacity: 0.9;50  }51  .battery {52    width: 42px; height: 22px; border: 3px solid #fff; border-radius: 4px; position: relative;53  }54  .battery::after { content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 1px; }55  .battery-fill { position: absolute; left: 3px; top: 3px; width: 28px; height: 14px; background: #fff; }56 57  /* Header / contact banner */58  .header {59    position: absolute;60    top: 120px;61    left: 0;62    width: 1080px;63    height: 960px;64    background: linear-gradient(#0b4f77, #1976d2);65  }66  .big-letter {67    position: absolute;68    top: 260px;69    left: 0;70    width: 1080px;71    text-align: center;72    font-size: 520px;73    font-weight: 700;74    color: #ffffff;75    line-height: 1;76  }77  .header-left {78    position: absolute;79    top: 180px;80    left: 36px;81  }82  .header-actions {83    position: absolute;84    top: 180px;85    right: 32px;86    display: flex;87    gap: 38px;88    align-items: center;89  }90  .svg-icon { width: 58px; height: 58px; }91  .svg-icon.small { width: 50px; height: 50px; }92 93  .star-wrap {94    position: absolute;95    left: 60px;96    bottom: 280px;97  }98 99  .quick-actions {100    position: absolute;101    right: 60px;102    bottom: 260px;103    display: flex;104    gap: 44px;105    align-items: center;106  }107  .qa-btn {108    width: 120px;109    height: 120px;110    border-radius: 10px;111    background: rgba(255,255,255,0.15);112    display: flex;113    align-items: center;114    justify-content: center;115  }116  .qa-btn svg { width: 74px; height: 74px; }117 118  /* Details section */119  .details {120    position: absolute;121    top: 1080px;122    left: 0;123    width: 1080px;124    height: 1170px;125    background: #333333;126    padding: 40px 44px;127    box-sizing: border-box;128  }129  .detail-row {130    display: flex;131    align-items: center;132    padding: 36px 0;133    border-bottom: 1px solid rgba(255,255,255,0.08);134  }135  .detail-row:last-child { border-bottom: none; }136  .detail-icon {137    width: 86px; height: 86px;138    border-radius: 10px;139    background: #444;140    display: flex; align-items: center; justify-content: center;141    margin-right: 32px;142  }143  .detail-text {144    flex: 1;145    color: #EAEAEA;146    font-size: 44px;147  }148  .detail-sub {149    color: #BDBDBD;150    font-size: 36px;151    margin-top: 8px;152  }153  .detail-right {154    color: #CFCFCF;155    font-size: 36px;156    margin-left: 16px;157  }158 159  /* Bottom pill */160  .pill {161    position: absolute;162    bottom: 140px;163    right: 140px;164    display: flex;165    align-items: center;166    gap: 24px;167    background: #263238;168    color: #fff;169    border-radius: 48px;170    height: 108px;171    padding: 0 36px 0 22px;172    box-shadow: 0 6px 20px rgba(0,0,0,0.35);173    font-size: 40px;174  }175  .pill-avatar {176    width: 72px; height: 72px; background: #e57c13; border-radius: 50%;177    display: flex; align-items: center; justify-content: center;178  }179  .gesture {180    position: absolute;181    bottom: 36px;182    left: 50%;183    transform: translateX(-50%);184    width: 320px;185    height: 12px;186    border-radius: 12px;187    background: #f2f2f2;188    opacity: 0.9;189  }190</style>191</head>192<body>193<div id="render-target">194 195  <!-- Status bar -->196  <div class="status-bar">197    <div class="status-time">2:56</div>198    <div class="status-icons">199      <div class="status-dot"></div>200      <div class="status-dot"></div>201      <div class="status-dot"></div>202      <div class="status-dot"></div>203      <div class="status-dot"></div>204      <svg class="small svg-icon" viewBox="0 0 24 24" fill="#fff">205        <path d="M4 20h16v2H4zM12 2l5 8H7l5-8z"></path>206      </svg>207      <div class="battery"><div class="battery-fill"></div></div>208      <div style="font-size:34px; margin-left:6px;">100%</div>209    </div>210  </div>211 212  <!-- Header -->213  <div class="header">214    <div class="big-letter">C</div>215 216    <!-- Back arrow -->217    <div class="header-left">218      <svg class="svg-icon" viewBox="0 0 48 48" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">219        <path d="M30 10 L14 24 L30 38"></path>220      </svg>221    </div>222 223    <!-- Top right actions -->224    <div class="header-actions">225      <!-- Pencil -->226      <svg class="svg-icon" viewBox="0 0 48 48" fill="#fff">227        <path d="M36 6l6 6-22 22-8 2 2-8z"></path>228      </svg>229      <!-- Share -->230      <svg class="svg-icon" viewBox="0 0 48 48" fill="#fff">231        <circle cx="12" cy="24" r="5"></circle>232        <circle cx="36" cy="12" r="5"></circle>233        <circle cx="36" cy="36" r="5"></circle>234        <path d="M16 24 L31 14 M16 24 L31 34" stroke="#fff" stroke-width="4" fill="none"></path>235      </svg>236      <!-- Trash -->237      <svg class="svg-icon" viewBox="0 0 48 48" fill="#fff">238        <path d="M16 12h16l-2-4H18z"></path>239        <rect x="12" y="16" width="24" height="26" rx="2" ry="2"></rect>240      </svg>241      <!-- More (vertical dots) -->242      <svg class="svg-icon" viewBox="0 0 48 48" fill="#fff">243        <circle cx="24" cy="10" r="4"></circle>244        <circle cx="24" cy="24" r="4"></circle>245        <circle cx="24" cy="38" r="4"></circle>246      </svg>247    </div>248 249    <!-- Star on left -->250    <div class="star-wrap">251      <svg class="svg-icon" viewBox="0 0 64 64" fill="#fff">252        <path d="M32 6l8 18 20 2-15 12 5 18-18-10-18 10 5-18-15-12 20-2z"></path>253      </svg>254    </div>255 256    <!-- Quick actions -->257    <div class="quick-actions">258      <div class="qa-btn">259        <!-- Envelope -->260        <svg viewBox="0 0 64 64" fill="#fff">261          <rect x="8" y="18" width="48" height="28" rx="4" ry="4"></rect>262          <path d="M8 18l24 16 24-16" fill="none" stroke="#fff" stroke-width="4"></path>263        </svg>264      </div>265      <div class="qa-btn">266        <!-- Phone -->267        <svg viewBox="0 0 64 64" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">268          <path d="M20 16c4-4 8-4 12 0l4 6c-2 4-6 8-10 10l-6-4c-4-4-4-8 0-12z"></path>269          <path d="M36 28l10 10c-6 6-14 10-22 12-6-2-12-6-16-12l10-10"></path>270        </svg>271      </div>272      <div class="qa-btn">273        <!-- Message bubble -->274        <svg viewBox="0 0 64 64" fill="none" stroke="#fff" stroke-width="5">275          <rect x="8" y="12" width="48" height="32" rx="6" ry="6" fill="none"></rect>276          <path d="M20 44l10-8h26" stroke-linecap="round"></path>277        </svg>278      </div>279    </div>280  </div>281 282  <!-- Details list -->283  <div class="details">284    <div class="detail-row">285      <div class="detail-icon">286        <!-- person icon -->287        <svg viewBox="0 0 64 64" fill="#ccc">288          <circle cx="32" cy="22" r="12"></circle>289          <path d="M12 52c4-10 16-12 20-12s16 2 20 12" fill="#ccc"></path>290        </svg>291      </div>292      <div class="detail-text">Clara Wagner</div>293    </div>294 295    <div class="detail-row">296      <div class="detail-icon">297        <!-- phone icon -->298        <svg viewBox="0 0 64 64" fill="none" stroke="#ccc" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">299          <path d="M20 18c4-4 8-4 12 0l4 6c-2 4-6 8-10 10l-6-4c-4-4-4-8 0-12z"></path>300          <path d="M36 30l10 10c-6 6-14 10-22 12-6-2-12-6-16-12l10-10"></path>301        </svg>302      </div>303      <div class="detail-text">2111112222</div>304      <div class="detail-right">Mobile</div>305    </div>306 307    <div class="detail-row">308      <div class="detail-icon">309        <!-- mail icon -->310        <svg viewBox="0 0 64 64" fill="#ccc">311          <rect x="8" y="18" width="48" height="28" rx="4" ry="4"></rect>312          <path d="M8 18l24 16 24-16" fill="none" stroke="#ccc" stroke-width="4"></path>313        </svg>314      </div>315      <div class="detail-text">316        clarawagner98b@gmail.com317        <div class="detail-sub"></div>318      </div>319      <div class="detail-right">Home</div>320    </div>321 322    <div class="detail-row">323      <div class="detail-icon">324        <!-- avatar square -->325        <svg viewBox="0 0 64 64" fill="#ccc">326          <rect x="8" y="8" width="48" height="48" rx="8" ry="8"></rect>327        </svg>328      </div>329      <div class="detail-text">dbwscratch.test.id4@gmail.com</div>330    </div>331  </div>332 333  <!-- Bottom pill -->334  <div class="pill">335    <div class="pill-avatar">336      <svg viewBox="0 0 48 48" fill="#fff">337        <circle cx="24" cy="16" r="9"></circle>338        <path d="M8 40c4-10 16-12 16-12s12 2 16 12" fill="#fff"></path>339      </svg>340    </div>341    <div>Updating...</div>342  </div>343 344  <div class="gesture"></div>345</div>346</body>347</html>