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: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: radial-gradient(1200px 1200px at 50% -200px, #1a3b4c 0%, #0f2f3e 45%, #0b2a38 70%, #0a2633 100%);15 color: #e8f2f7;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 90px;25 padding: 0 36px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #e7e7e7;31 font-size: 38px;32 opacity: 0.95;33 }34 .sb-left, .sb-right { display: flex; align-items: center; gap: 22px; }35 .sb-dot { width: 10px; height: 10px; background: #d0d0d0; border-radius: 50%; opacity: 0.8; }36 37 /* App bar */38 .app-bar {39 position: absolute;40 top: 90px;41 left: 0;42 width: 100%;43 height: 110px;44 display: flex;45 align-items: center;46 justify-content: space-between;47 padding: 0 36px;48 box-sizing: border-box;49 }50 .back-btn svg { width: 54px; height: 54px; }51 .edit-btn { font-weight: 700; letter-spacing: 1px; color: #ff6e6e; font-size: 44px; }52 53 /* Header / avatar */54 .header {55 position: absolute;56 top: 220px;57 left: 0;58 width: 100%;59 text-align: center;60 }61 .avatar-wrap {62 position: relative;63 width: 320px;64 height: 320px;65 margin: 0 auto 22px;66 }67 .avatar-ring {68 position: absolute;69 inset: 0;70 border-radius: 50%;71 background: #2b3f4a;72 box-shadow: inset 0 0 0 18px #8da1aa;73 }74 .avatar-core {75 position: absolute;76 inset: 18px;77 border-radius: 50%;78 background: #14181b;79 display: flex;80 align-items: center;81 justify-content: center;82 font-weight: 800;83 font-size: 120px;84 color: #f7f7f7;85 }86 .camera-pill {87 position: absolute;88 right: 18px;89 bottom: 18px;90 width: 96px;91 height: 96px;92 border-radius: 50%;93 background: #2c6a86;94 display: flex;95 align-items: center;96 justify-content: center;97 border: 6px solid rgba(10, 38, 51, 0.6);98 }99 .contact-name { font-size: 78px; font-weight: 700; letter-spacing: 0.5px; margin: 18px 0 8px; }100 .contact-sub { font-size: 36px; color: #a9bdc7; }101 102 /* Action grid */103 .actions {104 width: 100%;105 margin-top: 36px;106 }107 .grid {108 width: 100%;109 display: grid;110 grid-template-columns: repeat(4, 1fr);111 row-gap: 48px;112 padding: 40px 60px 10px;113 box-sizing: border-box;114 }115 .action {116 display: flex;117 flex-direction: column;118 align-items: center;119 gap: 18px;120 color: #cbe0ea;121 }122 .action-circle {123 width: 140px;124 height: 140px;125 border-radius: 50%;126 background: rgba(61, 117, 142, 0.9);127 display: flex;128 align-items: center;129 justify-content: center;130 }131 .action svg { width: 64px; height: 64px; fill: none; stroke: #d8ecf6; stroke-width: 5; }132 .action-label { font-size: 30px; text-align: center; line-height: 1.2; color: #cbe0ea; }133 134 .dots {135 display: flex;136 justify-content: center;137 gap: 18px;138 margin: 10px 0 24px;139 }140 .dot {141 width: 16px;142 height: 16px;143 border-radius: 50%;144 background: #9fb6c1;145 opacity: 0.8;146 }147 .dot.inactive { opacity: 0.4; }148 149 /* Phone number card */150 .divider { height: 2px; width: calc(100% - 120px); margin: 20px auto; background: rgba(200, 220, 230, 0.25); }151 .number-row {152 width: calc(100% - 120px);153 margin: 18px auto;154 display: flex;155 align-items: center;156 justify-content: space-between;157 color: #eaf6ff;158 }159 .num-left {160 display: flex;161 flex-direction: column;162 gap: 6px;163 }164 .phone-number { font-size: 58px; letter-spacing: 1px; }165 .phone-type { font-size: 24px; color: #9fb6c1; letter-spacing: 2px; }166 .num-actions { display: flex; align-items: center; gap: 22px; }167 .pill {168 width: 110px;169 height: 110px;170 border-radius: 50%;171 display: flex; align-items: center; justify-content: center;172 }173 .pill.sms { background: #8cc3d8; color: #0b2a33; font-weight: 800; font-size: 30px; }174 .pill.call { background: #1fb071; }175 .pill svg { width: 56px; height: 56px; stroke: #ffffff; stroke-width: 6; }176 177 /* Recents */178 .recents {179 width: calc(100% - 120px);180 margin: 40px auto 0;181 }182 .recents-title { color: #b6c8d1; font-size: 38px; letter-spacing: 2px; margin: 16px 0; }183 .recents .divider { margin: 6px 0 24px; }184 .no-history { text-align: center; color: #a9d3e6; font-size: 42px; margin-top: 40px; }185 186 /* Home indicator */187 .home-indicator {188 position: absolute;189 bottom: 38px;190 left: 50%;191 width: 320px;192 height: 12px;193 margin-left: -160px;194 background: rgba(240, 240, 240, 0.85);195 border-radius: 10px;196 }197 198 /* Simple icon strokes tuning */199 .fill-white { fill: #ffffff; stroke: none; }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status Bar -->206 <div class="status-bar">207 <div class="sb-left">208 <div>9:10</div>209 <div class="sb-dot"></div>210 <div class="sb-dot"></div>211 <div class="sb-dot"></div>212 <div class="sb-dot"></div>213 <div class="sb-dot"></div>214 <div class="sb-dot"></div>215 <div class="sb-dot"></div>216 </div>217 <div class="sb-right">218 <!-- WiFi -->219 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#e7e7e7" stroke-width="2" fill="none"><path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c4-3 10-3 14 0"/><path d="M8 16c3-2 5-2 8 0"/><circle cx="12" cy="20" r="1.8" fill="#e7e7e7"/></svg>220 <!-- Battery -->221 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#e7e7e7" stroke-width="2" fill="none"><rect x="2" y="7" width="18" height="10" rx="2"/><rect x="20" y="10" width="2" height="4"/><rect x="4" y="9" width="10" height="6" fill="#e7e7e7" stroke="none"/></svg>222 </div>223 </div>224 225 <!-- App bar -->226 <div class="app-bar">227 <div class="back-btn">228 <svg viewBox="0 0 24 24" stroke="#ff6e6e" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round">229 <path d="M15 6l-6 6 6 6"></path>230 </svg>231 </div>232 <div class="edit-btn">EDIT</div>233 </div>234 235 <!-- Header with avatar -->236 <div class="header">237 <div class="avatar-wrap">238 <div class="avatar-ring"></div>239 <div class="avatar-core">Bu</div>240 <div class="camera-pill">241 <svg viewBox="0 0 24 24" stroke="#e9f5fb" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">242 <rect x="3" y="7" width="18" height="12" rx="2"></rect>243 <path d="M8 7l2-3h4l2 3"></path>244 <circle cx="12" cy="13" r="3.5" fill="#e9f5fb" stroke="none"></circle>245 </svg>246 </div>247 </div>248 <div class="contact-name">Bubb</div>249 <div class="contact-sub">(dbwscratch.test.id16@gmail.com)</div>250 251 <!-- Actions -->252 <div class="actions">253 <div class="grid">254 <div class="action">255 <div class="action-circle">256 <!-- Star / Favorite -->257 <svg viewBox="0 0 24 24" stroke-linejoin="round">258 <path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path>259 </svg>260 </div>261 <div class="action-label">Favorite</div>262 </div>263 <div class="action">264 <div class="action-circle">265 <!-- Ringtones (music note) -->266 <svg viewBox="0 0 24 24">267 <path d="M12 3v12"></path>268 <circle cx="9" cy="18" r="3"></circle>269 <path d="M12 6l7-2v10"></path>270 <circle cx="18" cy="18" r="3"></circle>271 </svg>272 </div>273 <div class="action-label">Ringtones</div>274 </div>275 <div class="action">276 <div class="action-circle">277 <!-- Share -->278 <svg viewBox="0 0 24 24">279 <circle cx="6" cy="12" r="2"></circle>280 <circle cx="18" cy="6" r="2"></circle>281 <circle cx="18" cy="18" r="2"></circle>282 <path d="M8 12l8-6"></path>283 <path d="M8 12l8 6"></path>284 </svg>285 </div>286 <div class="action-label">Share Contact</div>287 </div>288 <div class="action">289 <div class="action-circle">290 <!-- Shortcut (sparkle/hand alt) -->291 <svg viewBox="0 0 24 24">292 <path d="M12 2v6"></path>293 <path d="M12 16v6"></path>294 <path d="M2 12h6"></path>295 <path d="M16 12h6"></path>296 <path d="M5 5l4 4"></path>297 <path d="M15 15l4 4"></path>298 </svg>299 </div>300 <div class="action-label">Create shortcut</div>301 </div>302 303 <div class="action">304 <div class="action-circle">305 <!-- Address book -->306 <svg viewBox="0 0 24 24">307 <rect x="4" y="4" width="14" height="16" rx="2"></rect>308 <circle cx="11" cy="10" r="3"></circle>309 <path d="M6 18c3-4 8-4 11 0"></path>310 </svg>311 </div>312 <div class="action-label">Address Book</div>313 </div>314 <div class="action">315 <div class="action-circle">316 <!-- Forward/share drupe -->317 <svg viewBox="0 0 24 24">318 <path d="M4 12h10"></path>319 <path d="M11 7l5 5-5 5"></path>320 </svg>321 </div>322 <div class="action-label">Share drupe</div>323 </div>324 <div class="action">325 <div class="action-circle">326 <!-- Note / pencil -->327 <svg viewBox="0 0 24 24">328 <rect x="4" y="4" width="16" height="16" rx="2"></rect>329 <path d="M8 16l8-8"></path>330 <path d="M13 7h5v5"></path>331 </svg>332 </div>333 <div class="action-label">Note</div>334 </div>335 <div class="action">336 <div class="action-circle">337 <!-- Reminder bell -->338 <svg viewBox="0 0 24 24">339 <path d="M12 3a6 6 0 0 1 6 6v4l2 3H4l2-3V9a6 6 0 0 1 6-6z"></path>340 <path d="M9 19a3 3 0 0 0 6 0"></path>341 </svg>342 </div>343 <div class="action-label">Reminder</div>344 </div>345 </div>346 <div class="dots">347 <div class="dot"></div>348 <div class="dot inactive"></div>349 </div>350 </div>351 </div>352 353 <!-- Phone number section -->354 <div class="divider" style="margin-top: 18px;"></div>355 <div class="number-row">356 <div class="num-left">357 <div class="phone-number">785469007855</div>358 <div class="phone-type">MOBILE</div>359 </div>360 <div class="num-actions">361 <div class="pill sms">SMS</div>362 <div class="pill call">363 <svg viewBox="0 0 24 24" fill="none">364 <path d="M6 2l4 4-2 2c2 4 4 6 8 8l2-2 4 4-2 3c-2 2-10-1-15-6S-0 6 2 4l4-2z"></path>365 </svg>366 </div>367 </div>368 </div>369 <div class="divider"></div>370 371 <!-- Recents -->372 <div class="recents">373 <div class="recents-title">RECENTS</div>374 <div class="divider"></div>375 <div class="no-history">No history</div>376 </div>377 378 <!-- Home indicator -->379 <div class="home-indicator"></div>380</div>381</body>382</html>