GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Contact Detail UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #2f2f2f; /* dark content area */14    color: #fff;15  }16 17  /* Status bar (top overlay) */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    background: linear-gradient(#0b1d24 0%, rgba(11,29,36,0.0) 100%);30    font-size: 40px;31    opacity: 0.95;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 24px;37    font-size: 34px;38  }39  .dot { width: 12px; height: 12px; background: #b5c7cf; border-radius: 50%; display: inline-block; }40 41  /* Header */42  .header {43    position: absolute;44    top: 110px;45    left: 0;46    width: 1080px;47    height: 900px;48    background: #1e7bb0; /* blue banner */49  }50  .header .big-letter {51    position: absolute;52    top: 190px;53    left: 0;54    width: 100%;55    text-align: center;56    font-size: 520px;57    line-height: 1;58    color: #ffffff;59    font-weight: 600;60  }61  .top-actions {62    position: absolute;63    top: 40px;64    left: 60px;65    right: 60px;66    display: flex;67    align-items: center;68    justify-content: space-between;69  }70  .left-back {71    display: flex;72    align-items: center;73    gap: 12px;74  }75  .right-icons {76    display: flex;77    align-items: center;78    gap: 42px;79  }80  .icon {81    width: 54px;82    height: 54px;83  }84  .icon path, .icon circle, .icon rect, .icon polygon, .icon line {85    stroke: #fff;86    fill: none;87    stroke-width: 3;88    stroke-linecap: round;89    stroke-linejoin: round;90  }91  .icon-fill path, .icon-fill rect, .icon-fill polygon {92    fill: #fff;93    stroke: none;94  }95 96  .favorite-star {97    position: absolute;98    left: 60px;99    bottom: 70px;100  }101  .favorite-star svg {102    width: 90px; height: 90px;103  }104  .call-chat {105    position: absolute;106    right: 60px;107    bottom: 70px;108    display: flex;109    gap: 80px;110  }111  .call-chat .icon-fill { width: 86px; height: 86px; }112 113  /* Content list */114  .content {115    position: absolute;116    top: 1010px;117    left: 0;118    right: 0;119    bottom: 120px;120    background: #2f2f2f;121    padding-top: 40px;122  }123  .item {124    display: flex;125    align-items: center;126    gap: 34px;127    padding: 42px 60px;128    border-bottom: 0;129    color: #e8edf1;130    font-size: 44px;131  }132  .item .left-ic { width: 64px; height: 64px; flex: 0 0 64px; }133  .item .label { flex: 1; }134  .item .meta { color: #c8cfd6; font-size: 38px; }135 136  /* Gesture bar */137  .gesture-bar {138    position: absolute;139    bottom: 30px;140    left: 50%;141    transform: translateX(-50%);142    width: 260px;143    height: 14px;144    background: #e6e6e6;145    border-radius: 10px;146    opacity: 0.9;147  }148</style>149</head>150<body>151<div id="render-target">152  <!-- Status bar -->153  <div class="status-bar">154    <div>2:53</div>155    <div class="status-icons">156      <span class="dot"></span>157      <span class="dot"></span>158      <span class="dot"></span>159      <span class="dot"></span>160      <span>•</span>161      <svg class="icon" viewBox="0 0 24 24">162        <path d="M3 11h18v2H3z"></path>163      </svg>164      <svg class="icon" viewBox="0 0 24 24">165        <rect x="3" y="6" width="18" height="12" rx="2"></rect>166        <rect x="5" y="8" width="14" height="8" rx="1"></rect>167      </svg>168      <span>100%</span>169    </div>170  </div>171 172  <!-- Header -->173  <div class="header">174    <div class="top-actions">175      <div class="left-back">176        <svg class="icon" viewBox="0 0 24 24">177          <path d="M15 6l-6 6 6 6"></path>178        </svg>179      </div>180      <div class="right-icons">181        <!-- Edit -->182        <svg class="icon" viewBox="0 0 24 24">183          <path d="M4 20h4l10-10-4-4L4 16v4z"></path>184          <path d="M14 6l4 4"></path>185        </svg>186        <!-- Share -->187        <svg class="icon" viewBox="0 0 24 24">188          <circle cx="18" cy="6" r="3"></circle>189          <circle cx="6" cy="12" r="3"></circle>190          <circle cx="18" cy="18" r="3"></circle>191          <path d="M8.7 10.6L15.3 7.4"></path>192          <path d="M8.7 13.4L15.3 16.6"></path>193        </svg>194        <!-- Delete -->195        <svg class="icon" viewBox="0 0 24 24">196          <path d="M3 6h18"></path>197          <rect x="6" y="6" width="12" height="14" rx="1" ry="1"></rect>198          <path d="M10 10v6M14 10v6"></path>199        </svg>200        <!-- More (vertical dots) -->201        <svg class="icon-fill" viewBox="0 0 24 24">202          <circle cx="12" cy="5" r="2"></circle>203          <circle cx="12" cy="12" r="2"></circle>204          <circle cx="12" cy="19" r="2"></circle>205        </svg>206      </div>207    </div>208 209    <div class="big-letter">C</div>210 211    <div class="favorite-star">212      <svg viewBox="0 0 24 24">213        <polygon points="12,3 15,9 22,9 17,13.5 18.8,21 12,17 5.2,21 7,13.5 2,9 9,9"></polygon>214      </svg>215    </div>216 217    <div class="call-chat">218      <!-- Phone -->219      <svg class="icon-fill" viewBox="0 0 24 24">220        <path d="M6.6 10.8c2.4 4.3 6.2 7.2 10.5 8.3l2-3.1c.2-.3.1-.8-.2-1.1l-3-2.3c-.3-.2-.7-.2-1 0l-2 1.5c-2-1-3.6-2.6-4.6-4.6l1.5-2c.2-.3.2-.7 0-1l-2.3-3c-.3-.3-.7-.4-1.1-.2l-3.1 2c1.1 2 1.9 3.1 3.3 4.5z"></path>221      </svg>222      <!-- Message -->223      <svg class="icon-fill" viewBox="0 0 24 24">224        <path d="M4 5h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H7l-3 3V7a2 2 0 0 1 2-2z"></path>225      </svg>226    </div>227  </div>228 229  <!-- Content area -->230  <div class="content">231    <div class="item">232      <svg class="left-ic" viewBox="0 0 24 24">233        <circle cx="12" cy="7.5" r="4"></circle>234        <path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path>235      </svg>236      <div class="label">Clara</div>237    </div>238 239    <div class="item">240      <svg class="left-ic" viewBox="0 0 24 24">241        <path d="M6.6 10.8c2.4 4.3 6.2 7.2 10.5 8.3l2-3.1c.2-.3.1-.8-.2-1.1l-3-2.3c-.3-.2-.7-.2-1 0l-2 1.5c-2-1-3.6-2.6-4.6-4.6l1.5-2c.2-.3.2-.7 0-1l-2.3-3c-.3-.3-.7-.4-1.1-.2l-3.1 2c1.1 2 1.9 3.1 3.3 4.5z"></path>242      </svg>243      <div class="label">2111112222</div>244      <div class="meta">Mobile</div>245    </div>246 247    <div class="item">248      <svg class="left-ic" viewBox="0 0 24 24">249        <rect x="3" y="4" width="18" height="16" rx="2"></rect>250        <path d="M3 8l9 6 9-6"></path>251      </svg>252      <div class="label">dbwscratch.test.id4@gmail.com</div>253    </div>254  </div>255 256  <div class="gesture-bar"></div>257</div>258</body>259</html>