GD-ML/AndroidCode
13.4k
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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #0b1f2b 0%, #0e2d3e 45%, #0f3648 100%);15 color: #e9f4ff;16 }17 18 /* Status bar */19 .status-bar {20 height: 90px;21 background: #000000;22 color: #ffffff;23 font-size: 34px;24 display: flex;25 align-items: center;26 padding: 0 28px;27 box-sizing: border-box;28 }29 .status-left { flex: 1; }30 .status-right {31 display: flex;32 align-items: center;33 gap: 18px;34 }35 .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }36 37 /* Top nav */38 .top-nav {39 height: 90px;40 display: flex;41 align-items: center;42 padding: 0 24px;43 box-sizing: border-box;44 position: relative;45 }46 .nav-title { flex: 1; text-align: center; font-size: 36px; font-weight: 600; opacity: 0.0; }47 .edit-btn {48 color: #ff7e84;49 font-weight: 700;50 font-size: 38px;51 }52 .back-btn {53 width: 56px;54 height: 56px;55 display: flex; align-items: center; justify-content: center;56 }57 58 /* Big avatar */59 .profile-wrap {60 margin-top: 40px;61 display: flex;62 flex-direction: column;63 align-items: center;64 text-align: center;65 }66 .avatar-ring {67 width: 320px;68 height: 320px;69 border-radius: 50%;70 background: rgba(255,255,255,0.15);71 display: grid;72 place-items: center;73 position: relative;74 }75 .avatar {76 width: 270px;77 height: 270px;78 border-radius: 50%;79 background: #E0E0E0;80 border: 1px solid #BDBDBD;81 color: #37474F;82 display: flex;83 align-items: center;84 justify-content: center;85 font-weight: 700;86 font-size: 36px;87 text-transform: uppercase;88 }89 .camera-pill {90 position: absolute;91 right: 18px;92 bottom: 18px;93 width: 92px;94 height: 92px;95 border-radius: 50%;96 background: rgba(41, 118, 151, 0.95);97 display: flex; align-items: center; justify-content: center;98 box-shadow: 0 3px 8px rgba(0,0,0,0.3);99 }100 101 .profile-name {102 font-size: 72px;103 font-weight: 600;104 margin-top: 28px;105 letter-spacing: 0.5px;106 }107 .profile-email {108 font-size: 34px;109 color: #a9c6d6;110 margin-top: 6px;111 }112 113 /* Quick actions grid */114 .actions-grid {115 margin-top: 40px;116 width: 980px;117 margin-left: auto;118 margin-right: auto;119 display: grid;120 grid-template-columns: repeat(4, 1fr);121 row-gap: 38px;122 column-gap: 24px;123 justify-items: center;124 }125 .action {126 display: flex;127 flex-direction: column;128 align-items: center;129 }130 .action-circle {131 width: 132px; height: 132px; border-radius: 50%;132 background: #3f6e85;133 display: flex; align-items: center; justify-content: center;134 box-shadow: inset 0 0 0 6px rgba(255,255,255,0.07);135 }136 .action label {137 margin-top: 12px;138 font-size: 28px; color: #cfe4ef;139 }140 .pager-dots {141 margin: 18px auto 6px;142 width: 80px;143 display: flex; justify-content: center; gap: 12px;144 }145 .dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.5); }146 .dot.active { background: #ffffff; }147 148 /* Divider */149 .divider {150 width: 94%;151 margin: 30px auto;152 height: 2px;153 background: rgba(255,255,255,0.25);154 }155 156 /* Phone rows */157 .phone-list { width: 100%; box-sizing: border-box; padding: 0 40px; }158 .phone-row {159 display: flex; align-items: center; justify-content: space-between;160 padding: 22px 0;161 border-bottom: 2px solid rgba(255,255,255,0.18);162 }163 .phone-info { display: flex; flex-direction: column; }164 .phone-number { font-size: 56px; font-weight: 600; letter-spacing: 1px; }165 .phone-label { font-size: 22px; color: #90b0c0; margin-top: 6px; letter-spacing: 2px; }166 .phone-actions { display: flex; align-items: center; gap: 20px; }167 .chip {168 width: 120px; height: 120px; border-radius: 50%;169 display: flex; align-items: center; justify-content: center;170 font-weight: 700;171 font-size: 28px;172 color: #08313f;173 }174 .chip.sms { background: #8ec8e3; color: #0e3b4b; }175 .chip.call { background: #0e8a60; color: #eafff7; }176 177 /* Recents */178 .recents {179 margin-top: 40px;180 padding: 0 40px;181 }182 .recents-title {183 color: #9ec0d1; font-weight: 700;184 letter-spacing: 2px; font-size: 30px; margin-bottom: 10px;185 }186 .recents .divider { margin: 0; width: 100%; }187 .no-history {188 text-align: center; margin-top: 26px; font-size: 40px; color: #b7d4e2;189 }190 191 /* Bottom pill (gesture handle) */192 .home-indicator {193 position: absolute; left: 50%; transform: translateX(-50%);194 bottom: 20px; width: 320px; height: 10px; background: rgba(255,255,255,0.6); border-radius: 10px;195 }196 197 /* Subtle background ghost mail list (visual texture) */198 .ghost-mail {199 position: absolute; top: 180px; left: -20px; right: -20px; bottom: 0;200 opacity: 0.10; color: #cfe4ef; line-height: 60px; font-size: 40px;201 pointer-events: none;202 }203</style>204</head>205<body>206<div id="render-target">207 208 <!-- Status bar -->209 <div class="status-bar">210 <div class="status-left">9:06</div>211 <div class="status-right">212 <div class="status-dot"></div>213 <div class="status-dot"></div>214 <div class="status-dot"></div>215 <svg width="36" height="24"><rect x="2" y="6" width="26" height="14" rx="3" fill="#fff"/><rect x="30" y="9" width="4" height="8" rx="1" fill="#fff"/></svg>216 </div>217 </div>218 219 <!-- Top navigation -->220 <div class="top-nav">221 <div class="back-btn">222 <svg width="52" height="52" viewBox="0 0 24 24">223 <path d="M14.5 4l-7 8 7 8" stroke="#ff7e84" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>224 </svg>225 </div>226 <div class="nav-title"></div>227 <div class="edit-btn">EDIT</div>228 </div>229 230 <!-- Decorative blurred mail list behind (ghost) -->231 <div class="ghost-mail">232 <div>Primary • Search in mail • Promotions • Wanderlog • Security alert • Google • Reminders • Updates •</div>233 <div>Message preview sample text • Newsletter • Trip Plans • Bonus Has Arrived • Compose •</div>234 <div>Inbox • Calendar • Contacts •</div>235 </div>236 237 <!-- Profile section -->238 <div class="profile-wrap">239 <div class="avatar-ring">240 <div class="avatar">[IMG: Avatar]</div>241 <div class="camera-pill">242 <svg width="48" height="36" viewBox="0 0 24 24" fill="none">243 <rect x="3" y="7" width="18" height="12" rx="2" fill="#b7e2f5"/>244 <path d="M9 7l2-2h2l2 2" stroke="#0b3b4e" stroke-width="2"/>245 <circle cx="12" cy="13" r="3" fill="#0b3b4e"/>246 </svg>247 </div>248 </div>249 <div class="profile-name">Brian</div>250 <div class="profile-email">(dbwscratch.test.id16@gmail.com)</div>251 </div>252 253 <!-- Quick action grid -->254 <div class="actions-grid">255 <div class="action">256 <div class="action-circle">257 <svg width="64" height="64" viewBox="0 0 24 24">258 <path d="M12 2l3 6 6 .9-4.5 4.2 1 6.5L12 17l-5.5 2.6 1-6.5L3 8.9 9 8l3-6z" fill="#cfe4ef"/>259 </svg>260 </div>261 <label>Favorite</label>262 </div>263 <div class="action">264 <div class="action-circle">265 <svg width="64" height="64" viewBox="0 0 24 24">266 <path d="M12 20c3.9 0 7-3.1 7-7S15.9 6 12 6V3L7 7l5 4V8c2.8 0 5 2.2 5 5s-2.2 5-5 5-5-2.2-5-5H5c0 3.9 3.1 7 7 7z" fill="#cfe4ef"/>267 </svg>268 </div>269 <label>Ringtones</label>270 </div>271 <div class="action">272 <div class="action-circle">273 <svg width="64" height="64" viewBox="0 0 24 24">274 <circle cx="6" cy="12" r="3" fill="#cfe4ef"/>275 <circle cx="18" cy="6" r="3" fill="#cfe4ef"/>276 <circle cx="18" cy="18" r="3" fill="#cfe4ef"/>277 <path d="M8.7 10.7l6-3.4M8.7 13.3l6 3.4" stroke="#cfe4ef" stroke-width="2"/>278 </svg>279 </div>280 <label>Share Contact</label>281 </div>282 <div class="action">283 <div class="action-circle">284 <svg width="64" height="64" viewBox="0 0 24 24">285 <rect x="5" y="5" width="14" height="14" rx="3" fill="#cfe4ef"/>286 <path d="M8 12h8" stroke="#3f6e85" stroke-width="3"/>287 <path d="M12 8v8" stroke="#3f6e85" stroke-width="3"/>288 </svg>289 </div>290 <label>Create shortcut</label>291 </div>292 293 <div class="action">294 <div class="action-circle">295 <svg width="64" height="64" viewBox="0 0 24 24">296 <rect x="4" y="4" width="16" height="16" rx="2" fill="#cfe4ef"/>297 <rect x="7" y="7" width="10" height="2" fill="#3f6e85"/>298 <rect x="7" y="11" width="10" height="2" fill="#3f6e85"/>299 <rect x="7" y="15" width="6" height="2" fill="#3f6e85"/>300 </svg>301 </div>302 <label>Address Book</label>303 </div>304 <div class="action">305 <div class="action-circle">306 <svg width="64" height="64" viewBox="0 0 24 24">307 <path d="M12 3l7 4v10l-7 4-7-4V7l7-4z" fill="#cfe4ef"/>308 <path d="M9 9h6v6H9z" fill="#3f6e85"/>309 </svg>310 </div>311 <label>Share drupe</label>312 </div>313 <div class="action">314 <div class="action-circle">315 <svg width="64" height="64" viewBox="0 0 24 24">316 <rect x="5" y="5" width="14" height="14" rx="2" fill="#cfe4ef"/>317 <path d="M7 10h10M7 14h6" stroke="#3f6e85" stroke-width="2"/>318 </svg>319 </div>320 <label>Note</label>321 </div>322 <div class="action">323 <div class="action-circle">324 <svg width="64" height="64" viewBox="0 0 24 24">325 <path d="M12 3l2 6h6l-4.8 3.5L17 21l-5-3.6L7 21l1.8-8.5L4 9h6l2-6z" fill="#cfe4ef"/>326 </svg>327 </div>328 <label>Reminder</label>329 </div>330 </div>331 332 <div class="pager-dots">333 <div class="dot"></div>334 <div class="dot active"></div>335 </div>336 337 <div class="divider"></div>338 339 <!-- Phone numbers -->340 <div class="phone-list">341 <div class="phone-row">342 <div class="phone-info">343 <div class="phone-number">63858 67435</div>344 <div class="phone-label">MOBILE</div>345 </div>346 <div class="phone-actions">347 <div class="chip sms">SMS</div>348 <div class="chip call">349 <svg width="48" height="48" viewBox="0 0 24 24">350 <path d="M6 3l3 3-2 2c1.5 3.2 4 5.7 7.2 7.2l2-2 3 3-2.2 2.2c-.7.7-1.8 1-2.8.7-6.2-1.8-11-6.5-12.8-12.8-.3-1 .1-2.1.7-2.8L6 3z" fill="#eafff7"/>351 </svg>352 </div>353 </div>354 </div>355 356 <div class="phone-row">357 <div class="phone-info">358 <div class="phone-number">9149069348</div>359 <div class="phone-label">MOBILE</div>360 </div>361 <div class="phone-actions">362 <div class="chip sms">SMS</div>363 <div class="chip call">364 <svg width="48" height="48" viewBox="0 0 24 24">365 <path d="M6 3l3 3-2 2c1.5 3.2 4 5.7 7.2 7.2l2-2 3 3-2.2 2.2c-.7.7-1.8 1-2.8.7-6.2-1.8-11-6.5-12.8-12.8-.3-1 .1-2.1.7-2.8L6 3z" fill="#eafff7"/>366 </svg>367 </div>368 </div>369 </div>370 </div>371 372 <!-- Recents -->373 <div class="recents">374 <div class="recents-title">RECENTS</div>375 <div class="divider"></div>376 <div class="no-history">No history</div>377 </div>378 379 <!-- Home indicator -->380 <div class="home-indicator"></div>381</div>382</body>383</html>