GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Phonebook UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #3f3f3f;14 font-family: Arial, Helvetica, sans-serif;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #c76518;26 display: flex;27 align-items: center;28 padding: 0 36px;29 font-size: 40px;30 box-sizing: border-box;31 }32 .status-left { display: flex; align-items: center; gap: 18px; }33 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }34 .status-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.9; }35 .wifi {36 width: 46px; height: 32px;37 }38 .battery {39 width: 52px; height: 28px;40 }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 120px;46 left: 0;47 width: 1080px;48 height: 160px;49 background: #f57c00;50 box-sizing: border-box;51 padding: 0 36px;52 display: flex;53 align-items: center;54 }55 .app-title {56 font-size: 64px;57 font-weight: 600;58 letter-spacing: 0.5px;59 }60 .app-actions {61 margin-left: auto;62 display: flex;63 align-items: center;64 gap: 48px;65 }66 .icon {67 width: 56px; height: 56px;68 fill: none; stroke: #fff; stroke-width: 4;69 }70 .icon-filled { fill: #fff; stroke: none; }71 72 /* Tabs */73 .tabs {74 position: absolute;75 top: 280px;76 left: 0;77 width: 1080px;78 height: 120px;79 background: #3f3f3f;80 display: flex;81 align-items: flex-end;82 padding: 0 60px;83 box-sizing: border-box;84 gap: 140px;85 }86 .tab {87 height: 100%;88 display: flex;89 flex-direction: column;90 align-items: center;91 justify-content: flex-end;92 gap: 12px;93 color: #bdbdbd;94 }95 .tab svg { width: 64px; height: 64px; }96 .tab.active { color: #f57c00; }97 .tab.active svg path { fill: #f57c00; }98 .tab-indicator {99 width: 240px;100 height: 6px;101 background: #f57c00;102 position: absolute;103 bottom: 0;104 left: 60px;105 border-radius: 3px;106 }107 108 /* Alphabet sidebar */109 .alpha {110 position: absolute;111 right: 24px;112 top: 420px;113 width: 40px;114 color: #e0e0e0;115 font-size: 40px;116 line-height: 70px;117 letter-spacing: 2px;118 text-align: center;119 }120 121 /* List */122 .list {123 position: absolute;124 top: 400px;125 left: 0;126 width: 1080px;127 bottom: 200px;128 overflow: hidden;129 padding-left: 40px;130 padding-right: 100px;131 box-sizing: border-box;132 }133 .row {134 height: 150px;135 display: flex;136 align-items: center;137 gap: 40px;138 border-bottom: 1px solid rgba(255,255,255,0.06);139 }140 .avatar {141 width: 100px; height: 100px; border-radius: 50%;142 color: #fff; font-weight: bold; font-size: 54px;143 display: flex; justify-content: center; align-items: center;144 }145 .name {146 font-size: 48px;147 color: #eaeaea;148 }149 150 /* Floating action buttons */151 .fab-center {152 position: absolute;153 bottom: 160px;154 left: 50%;155 transform: translateX(-50%);156 width: 150px; height: 150px;157 background: #f57c00;158 border-radius: 50%;159 box-shadow: 0 12px 20px rgba(0,0,0,0.4);160 display: flex; justify-content: center; align-items: center;161 }162 .fab-right {163 position: absolute;164 bottom: 160px;165 right: 80px;166 width: 150px; height: 150px;167 background: #f57c00;168 border-radius: 50%;169 box-shadow: 0 12px 20px rgba(0,0,0,0.4);170 display: flex; justify-content: center; align-items: center;171 }172 .fab-grid {173 width: 76px; height: 76px; position: relative;174 }175 .fab-grid span {176 position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%;177 }178 /* 3x2 grid of dots */179 .fab-grid span:nth-child(1){ left: 0; top: 0; }180 .fab-grid span:nth-child(2){ left: 31px; top: 0; }181 .fab-grid span:nth-child(3){ left: 62px; top: 0; }182 .fab-grid span:nth-child(4){ left: 0; top: 44px; }183 .fab-grid span:nth-child(5){ left: 31px; top: 44px; }184 .fab-grid span:nth-child(6){ left: 62px; top: 44px; }185 186 .plus-icon {187 width: 84px; height: 84px;188 }189 190 /* Tooltip bubble */191 .tooltip {192 position: absolute;193 bottom: 300px;194 left: 50%;195 transform: translateX(-50%);196 background: #2f2f2f;197 color: #fff;198 padding: 24px 36px;199 border-radius: 40px;200 display: flex;201 align-items: center;202 gap: 18px;203 box-shadow: 0 6px 14px rgba(0,0,0,0.5);204 font-size: 40px;205 }206 .tooltip .mini-icon { width: 44px; height: 44px; }207 208 /* Gesture bar */209 .gesture {210 position: absolute;211 bottom: 46px;212 left: 50%;213 transform: translateX(-50%);214 width: 300px; height: 12px;215 background: #fff; border-radius: 6px;216 opacity: 0.85;217 }218 .bottom-bg {219 position: absolute; bottom: 0; left: 0; width: 1080px; height: 120px; background: #000;220 }221</style>222</head>223<body>224<div id="render-target">225 226 <!-- Status bar -->227 <div class="status-bar">228 <div class="status-left">229 <div>12:47</div>230 <div class="status-dot"></div>231 <div class="status-dot" style="opacity:0.6;"></div>232 <div class="status-dot" style="opacity:0.4;"></div>233 </div>234 <div class="status-right">235 <svg class="wifi" viewBox="0 0 24 24">236 <path d="M2 8c5-4 15-4 20 0M6 12c3-3 9-3 12 0M10 16c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none" />237 <circle cx="18" cy="19" r="1.5" fill="#fff"/>238 </svg>239 <svg class="battery" viewBox="0 0 26 14">240 <rect x="1" y="2" width="20" height="10" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>241 <rect x="3" y="4" width="16" height="6" fill="#fff"/>242 <rect x="22" y="5" width="3" height="4" fill="#fff"/>243 </svg>244 </div>245 </div>246 247 <!-- App bar -->248 <div class="app-bar">249 <div class="app-title">Phonebook</div>250 <div class="app-actions">251 <!-- Search -->252 <svg class="icon" viewBox="0 0 24 24">253 <circle cx="11" cy="11" r="6"></circle>254 <line x1="16" y1="16" x2="21" y2="21"></line>255 </svg>256 <!-- Sort -->257 <svg class="icon" viewBox="0 0 24 24">258 <path d="M4 7h12M4 12h8M4 17h4" stroke="#fff" stroke-width="2" />259 </svg>260 <!-- Filter -->261 <svg class="icon" viewBox="0 0 24 24">262 <path d="M3 5h18l-7 8v5l-4-2v-3z" fill="#fff"/>263 </svg>264 <!-- More -->265 <svg class="icon" viewBox="0 0 24 24">266 <circle cx="12" cy="5" r="2" class="icon-filled"></circle>267 <circle cx="12" cy="12" r="2" class="icon-filled"></circle>268 <circle cx="12" cy="19" r="2" class="icon-filled"></circle>269 </svg>270 </div>271 </div>272 273 <!-- Tabs -->274 <div class="tabs">275 <div class="tab active">276 <svg viewBox="0 0 24 24">277 <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-8 8c0-4.4 4.6-6 8-6s8 1.6 8 6H4z" fill="#f57c00"/>278 </svg>279 </div>280 <div class="tab">281 <svg viewBox="0 0 24 24">282 <path d="M12 17l-5.2 3.1 1.4-5.9L3 9.8l6-0.6L12 4l3 5.2 6 0.6-5.2 4.4 1.4 5.9z" fill="#bdbdbd"/>283 </svg>284 </div>285 <div class="tab">286 <svg viewBox="0 0 24 24">287 <circle cx="8" cy="8" r="3" fill="#bdbdbd"></circle>288 <circle cx="16.5" cy="9.5" r="2.5" fill="#bdbdbd"></circle>289 <path d="M3 19c0-3 3.5-4.5 5-4.5s5 1.5 5 4.5H3z" fill="#bdbdbd"></path>290 <path d="M13 19c0-2 2.7-3 4-3s4 1 4 3h-8z" fill="#bdbdbd"></path>291 </svg>292 </div>293 <div class="tab-indicator"></div>294 </div>295 296 <!-- Alphabet sidebar -->297 <div class="alpha">298 A<br>B<br>C<br>D<br>F<br>G<br>L<br>M<br>O<br>S<br>W299 </div>300 301 <!-- List of contacts -->302 <div class="list">303 <div class="row">304 <div class="avatar" style="background:#bf6a00;">A</div>305 <div class="name">Anat</div>306 </div>307 <div class="row">308 <div class="avatar" style="background:#5f8e2f;">B</div>309 <div class="name">Boss</div>310 </div>311 <div class="row">312 <div class="avatar" style="background:#1976d2;">B</div>313 <div class="name">Brian</div>314 </div>315 <div class="row">316 <div class="avatar" style="background:#00695c;">B</div>317 <div class="name">Briss</div>318 </div>319 <div class="row">320 <div class="avatar" style="background:#d84315;">B</div>321 <div class="name">Bubb</div>322 </div>323 <div class="row">324 <div class="avatar" style="background:#c2185b;">C</div>325 <div class="name">Cris</div>326 </div>327 <div class="row">328 <div class="avatar" style="background:#e64a19;">D</div>329 <div class="name">Daeg</div>330 </div>331 <div class="row">332 <div class="avatar" style="background:#b71c1c;">F</div>333 <div class="name">Friend</div>334 </div>335 <div class="row">336 <div class="avatar" style="background:#00838f;">G</div>337 <div class="name">Garhb</div>338 </div>339 <div class="row">340 <div class="avatar" style="background:#26a69a;">L</div>341 <div class="name">Lara</div>342 </div>343 <div class="row">344 <div class="avatar" style="background:#00acc1;">M</div>345 <div class="name">Max</div>346 </div>347 <div class="row">348 <div class="avatar" style="background:#d32f2f;">M</div>349 <div class="name">Mike</div>350 </div>351 </div>352 353 <!-- Floating action buttons -->354 <div class="fab-center">355 <div class="fab-grid">356 <span></span><span></span><span></span>357 <span></span><span></span><span></span>358 </div>359 </div>360 361 <div class="fab-right">362 <svg class="plus-icon" viewBox="0 0 24 24">363 <path d="M12 4v16M4 12h16" stroke="#fff" stroke-width="3" stroke-linecap="round"/>364 </svg>365 </div>366 367 <!-- Tooltip bubble -->368 <div class="tooltip">369 <svg class="mini-icon" viewBox="0 0 24 24">370 <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-8 8c0-4.4 4.6-6 8-6s8 1.6 8 6H4z" fill="#ffa726"/>371 </svg>372 <div>Inserting...</div>373 </div>374 375 <!-- Bottom gesture area -->376 <div class="bottom-bg"></div>377 <div class="gesture"></div>378 379</div>380</body>381</html>