GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Contact Detail - Rahul Sharma</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f1713; /* very dark green/black */14    color: #E9EFE6;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 96px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #E5EFE0;27    font-size: 34px;28    letter-spacing: 1px;29  }30  .sb-icons { display: flex; align-items: center; gap: 22px; color: #D2DACF; }31  .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .9; display: inline-block; }32 33  /* Top app bar controls */34  .top-actions {35    position: absolute;36    top: 112px; left: 24px; right: 24px;37    display: flex; align-items: center; justify-content: space-between;38    color: #C8D3C6;39  }40  .ta-right { display: flex; align-items: center; gap: 44px; }41  .icon {42    width: 48px; height: 48px;43    fill: currentColor;44  }45 46  /* Header */47  .avatar {48    position: absolute;49    top: 230px; left: 50%;50    transform: translateX(-50%);51    width: 270px; height: 270px; border-radius: 50%;52    background: #F2A459; color: #1a1a1a;53    display: flex; align-items: center; justify-content: center;54    font-size: 160px; font-weight: 600;55  }56  .name {57    position: absolute; top: 560px; left: 0; right: 0;58    text-align: center; font-size: 72px; font-weight: 500; color: #EAF0E7;59  }60  .subtitle {61    position: absolute; top: 645px; left: 0; right: 0;62    text-align: center; font-size: 40px; color: #A5B1A6;63  }64 65  /* Side grip dots */66  .grip {67    position: absolute; left: 28px; top: 720px;68    display: grid; gap: 18px;69  }70  .grip .gdot {71    width: 16px; height: 16px; border-radius: 50%;72    background: #BFC8BD; opacity: .6;73    box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);74  }75 76  /* Quick actions row */77  .quick-actions {78    position: absolute; top: 840px; left: 0; right: 0;79    padding: 36px 40px 0;80    border-top: 2px solid #243027;81    border-bottom: 2px solid #243027;82  }83  .qa-row {84    display: grid;85    grid-template-columns: repeat(4, 1fr);86    text-align: center;87    color: #F4A69B;88  }89  .qa-item { padding: 36px 0 26px; }90  .qa-item svg { width: 72px; height: 72px; display: block; margin: 0 auto 18px; }91  .qa-item .lbl { font-size: 36px; color: #F5AEA4; }92 93  /* Cards */94  .card {95    margin: 36px 36px;96    background: #212822;97    border-radius: 36px;98    padding: 36px;99    box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset, 0 0 0 1px rgba(255,255,255,0.02);100  }101  .card h3 {102    margin: 4px 0 24px;103    font-size: 44px; font-weight: 600; color: #E8EFE5;104  }105  .info-row {106    display: flex; align-items: center;107    padding: 32px 8px;108    border-top: 1px solid #2a342c;109  }110  .info-row:first-of-type { border-top: none; }111  .info-icon {112    width: 72px; height: 72px; border-radius: 16px;113    display: flex; align-items: center; justify-content: center;114    color: #C9D4C6; background: #1A211C; margin-right: 30px;115  }116  .info-text { flex: 1; }117  .info-text .main { font-size: 42px; color: #E9EFE6; }118  .info-text .sub { font-size: 32px; color: #96A397; margin-top: 8px; }119 120  /* About card */121  .about-row { display: flex; align-items: center; padding: 18px 8px; }122  .about-row .main { font-size: 42px; color: #E9EFE6; }123 124  /* Toast/pill */125  .pill {126    position: absolute;127    top: 1490px; left: 210px;128    width: 660px; height: 112px;129    background: #2A372F; border-radius: 56px;130    display: flex; align-items: center; padding: 0 28px;131    color: #DDE6DB; box-shadow: 0 6px 16px rgba(0,0,0,0.35);132  }133  .pill .user {134    width: 72px; height: 72px; border-radius: 50%;135    background: #3D6FF0; display: flex; align-items: center; justify-content: center;136    color: white; font-weight: 700;137    margin-right: 22px;138  }139  .pill .text { font-size: 38px; }140 141  /* Divider line below quick actions to match screenshot */142  .divider { height: 2px; background: #243027; margin: 0 0 6px; }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status bar -->149  <div class="status-bar">150    <div>12:27</div>151    <div class="sb-icons">152      <span class="dot"></span>153      <span class="dot"></span>154      <span class="dot"></span>155      <span style="width:38px;height:22px;border:3px solid currentColor;border-radius:4px;display:inline-block;position:relative;">156        <span style="position:absolute;right:-8px;top:6px;width:6px;height:10px;background:currentColor;border-radius:1px;"></span>157        <span style="position:absolute;left:3px;top:3px;right:3px;bottom:3px;background:currentColor;"></span>158      </span>159      <span style="font-size:30px;">100%</span>160    </div>161  </div>162 163  <!-- Top bar controls -->164  <div class="top-actions">165    <svg class="icon" viewBox="0 0 24 24">166      <path d="M15.5 4L7 12l8.5 8" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>167    </svg>168    <div class="ta-right">169      <svg class="icon" viewBox="0 0 24 24">170        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM14.06 7.69l3.75 3.75" fill="currentColor"/>171      </svg>172      <svg class="icon" viewBox="0 0 24 24">173        <path d="M12 17.3l-5.5 3.2 1.5-6.1L3 9.8l6.2-.5L12 3.6l2.8 5.7 6.2.5-5 4.6 1.5 6.1z" fill="currentColor"/>174      </svg>175      <svg class="icon" viewBox="0 0 24 24">176        <circle cx="12" cy="4.5" r="2" fill="currentColor"/>177        <circle cx="12" cy="12" r="2" fill="currentColor"/>178        <circle cx="12" cy="19.5" r="2" fill="currentColor"/>179      </svg>180    </div>181  </div>182 183  <!-- Avatar and name -->184  <div class="avatar">R</div>185  <div class="name">Rahul Sharma</div>186  <div class="subtitle">Abcd</div>187 188  <!-- Edge grip dots -->189  <div class="grip">190    <div class="gdot"></div>191    <div class="gdot"></div>192    <div class="gdot"></div>193    <div class="gdot"></div>194  </div>195 196  <!-- Quick actions -->197  <div class="quick-actions">198    <div class="qa-row">199      <div class="qa-item">200        <svg viewBox="0 0 24 24" fill="currentColor">201          <path d="M6.6 10.8c1.4 2.7 3.9 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1 .3 2 .5 3 .5.6 0 1 .4 1 1v3.5c0 .6-.4 1-1 1C10.6 21.9 2 13.3 2 3.5 2 2.9 2.4 2.5 3 2.5H6.5c.6 0 1 .4 1 1 0 1 .2 2 .5 3 .1.4 0 .8-.3 1.1L6.6 10.8z"/>202        </svg>203        <div class="lbl">Call</div>204      </div>205      <div class="qa-item">206        <svg viewBox="0 0 24 24" fill="currentColor">207          <path d="M20 2H4c-1.1 0-2 .9-2 2v14l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>208        </svg>209        <div class="lbl">Text</div>210      </div>211      <div class="qa-item">212        <svg viewBox="0 0 24 24" fill="currentColor">213          <path d="M17 10.5V7c0-1.1-.9-2-2-2H5C3.9 5 3 5.9 3 7v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-3.5l4 4v-11l-4 4z"/>214        </svg>215        <div class="lbl">Set up</div>216      </div>217      <div class="qa-item">218        <svg viewBox="0 0 24 24" fill="currentColor">219          <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z"/>220        </svg>221        <div class="lbl">Email</div>222      </div>223    </div>224  </div>225 226  <!-- Contact info card -->227  <div class="card" style="margin-top: 1060px;">228    <h3>Contact info</h3>229 230    <div class="info-row">231      <div class="info-icon">232        <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor">233          <path d="M6.6 10.8c1.4 2.7 3.9 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1 .3 2 .5 3 .5.6 0 1 .4 1 1v3.5c0 .6-.4 1-1 1C10.6 21.9 2 13.3 2 3.5 2 2.9 2.4 2.5 3 2.5H6.5c.6 0 1 .4 1 1 0 1 .2 2 .5 3 .1.4 0 .8-.3 1.1L6.6 10.8z"/>234        </svg>235      </div>236      <div class="info-text">237        <div class="main">11 0022 3366</div>238        <div class="sub">Mobile</div>239      </div>240      <div style="color:#BFC9BD;">241        <svg viewBox="0 0 24 24" width="44" height="44" fill="currentColor">242          <path d="M20 2H4c-1.1 0-2 .9-2 2v14l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>243        </svg>244      </div>245    </div>246 247    <div class="info-row">248      <div class="info-icon">249        <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor">250          <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z"/>251        </svg>252      </div>253      <div class="info-text">254        <div class="main">xyz@gmail.com</div>255        <div class="sub">Home</div>256      </div>257    </div>258 259    <div class="info-row">260      <div class="info-icon">261        <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor">262          <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z"/>263        </svg>264      </div>265      <div class="info-text">266        <div class="main">klman@gmail.com</div>267        <div class="sub">Work</div>268      </div>269    </div>270  </div>271 272  <!-- About card -->273  <div class="card">274    <h3>About Rahul</h3>275    <div class="about-row">276      <div class="info-icon" style="margin-right:24px;">277        <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor">278          <path d="M3 13h18v8H3v-8zm2-8h14v6H5V5zm3 2h3v2H8V7z"/>279        </svg>280      </div>281      <div class="main">Abcd</div>282    </div>283  </div>284 285  <!-- Floating saved pill -->286  <div class="pill">287    <div class="user">B</div>288    <div class="text">Rahul Sharma saved</div>289  </div>290 291</div>292</body>293</html>