GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #3f3f3f;14 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0; left: 0;20 width: 100%;21 height: 120px;22 background: #c86a0a;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 font-size: 40px;29 }30 .status-left { display: flex; align-items: center; gap: 34px; }31 .status-right { margin-left: auto; display: flex; align-items: center; gap: 34px; }32 .icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }33 .icon svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 6; }34 35 /* App bar */36 .app-bar {37 position: absolute;38 top: 120px; left: 0;39 width: 100%;40 height: 160px;41 background: #ff8400;42 color: #fff;43 display: flex;44 align-items: center;45 justify-content: space-between;46 padding: 0 48px;47 box-sizing: border-box;48 }49 .app-title {50 font-weight: 700;51 font-size: 64px;52 letter-spacing: 0.5px;53 }54 .app-actions { display: flex; align-items: center; gap: 48px; }55 .app-actions .icon svg { stroke-width: 8; }56 57 /* Tabs */58 .tabs {59 position: absolute;60 top: 280px; left: 0;61 width: 100%;62 height: 120px;63 display: flex;64 align-items: center;65 padding-left: 72px;66 box-sizing: border-box;67 color: #d7d7d7;68 gap: 160px;69 }70 .tab { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; opacity: 0.75; }71 .tab.active { opacity: 1; }72 .active-underline {73 position: absolute;74 top: 380px; left: 72px;75 width: 360px; height: 6px;76 background: #ff8400;77 }78 79 /* Contact list */80 .list {81 position: absolute;82 top: 420px; left: 0;83 width: 100%;84 padding: 0 48px;85 box-sizing: border-box;86 color: #eaeaea;87 }88 .item {89 display: flex;90 align-items: center;91 gap: 36px;92 height: 220px;93 }94 .avatar {95 width: 120px; height: 120px;96 border-radius: 50%;97 background: #0d78a3;98 color: #fff;99 font-weight: 700;100 font-size: 64px;101 display: flex; align-items: center; justify-content: center;102 box-shadow: inset 0 0 0 4px rgba(255,255,255,0.08);103 }104 .name {105 font-size: 48px;106 letter-spacing: 0.2px;107 }108 109 /* Alphabet index on the right */110 .alpha-index {111 position: absolute;112 top: 540px; right: 40px;113 display: flex;114 flex-direction: column;115 gap: 100px;116 color: #d0d0d0;117 font-size: 40px;118 font-weight: 600;119 }120 121 /* Floating action buttons */122 .fab {123 position: absolute;124 bottom: 200px;125 width: 180px; height: 180px;126 border-radius: 50%;127 background: #ff8400;128 box-shadow: 0 16px 28px rgba(0,0,0,0.45);129 display: flex; align-items: center; justify-content: center;130 }131 .fab.dialer { left: 390px; }132 .fab.add { right: 80px; }133 134 .dialer-dots {135 width: 104px; height: 104px;136 display: grid;137 grid-template-columns: repeat(3, 1fr);138 grid-gap: 12px;139 }140 .dialer-dots span {141 width: 20px; height: 20px;142 background: #fff;143 border-radius: 50%;144 justify-self: center; align-self: center;145 }146 147 .plus {148 width: 96px; height: 96px; position: relative;149 }150 .plus::before, .plus::after {151 content: "";152 position: absolute;153 background: #fff;154 left: 50%; top: 50%;155 transform: translate(-50%, -50%);156 }157 .plus::before { width: 72px; height: 14px; border-radius: 7px; }158 .plus::after { width: 14px; height: 72px; border-radius: 7px; }159 160 /* Bottom navigation area */161 .nav-area {162 position: absolute;163 bottom: 0; left: 0;164 width: 100%;165 height: 150px;166 background: #000;167 }168 .gesture {169 position: absolute;170 left: 50%; transform: translateX(-50%);171 top: 48px;172 width: 300px; height: 18px;173 background: #e6e6e6;174 border-radius: 10px;175 }176</style>177</head>178<body>179<div id="render-target">180 181 <!-- Status bar -->182 <div class="status-bar">183 <div class="status-left">184 <div>2:27</div>185 <div class="icon">186 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><line x1="15" y1="15" x2="22" y2="22"></line></svg>187 </div>188 <div class="icon">189 <svg viewBox="0 0 24 24"><line x1="3" y1="21" x2="21" y2="3"></line><line x1="3" y1="3" x2="21" y2="21"></line></svg>190 </div>191 <div class="icon">192 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"></rect><line x1="12" y1="6" x2="12" y2="18"></line></svg>193 </div>194 <div style="width:10px;height:10px;background:#fff;border-radius:50%;"></div>195 </div>196 <div class="status-right">197 <div class="icon">198 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="6" y1="12" x2="18" y2="12"></line></svg>199 </div>200 <div class="icon">201 <svg viewBox="0 0 24 24"><path d="M3 18c3-9 15-9 18 0" stroke-linecap="round"></path><circle cx="17" cy="6" r="3"></circle></svg>202 </div>203 <div class="icon">204 <svg viewBox="0 0 24 24"><rect x="8" y="4" width="8" height="16" rx="2"></rect></svg>205 </div>206 </div>207 </div>208 209 <!-- App bar -->210 <div class="app-bar">211 <div class="app-title">Phonebook</div>212 <div class="app-actions">213 <div class="icon">214 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>215 </div>216 <div class="icon">217 <svg viewBox="0 0 24 24"><line x1="4" y1="8" x2="20" y2="8"></line><line x1="8" y1="12" x2="20" y2="12"></line><line x1="12" y1="16" x2="20" y2="16"></line></svg>218 </div>219 <div class="icon">220 <svg viewBox="0 0 24 24"><line x1="4" y1="8" x2="20" y2="8"></line><line x1="4" y1="12" x2="16" y2="12"></line><line x1="4" y1="16" x2="12" y2="16"></line></svg>221 </div>222 <div class="icon">223 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="19" r="2"></circle></svg>224 </div>225 </div>226 </div>227 228 <!-- Tabs -->229 <div class="tabs">230 <div class="tab active">231 <svg viewBox="0 0 24 24" width="64" height="64" stroke="#ffd7a6" fill="none" stroke-width="2">232 <circle cx="12" cy="8" r="4"></circle>233 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke-linecap="round"></path>234 </svg>235 </div>236 <div class="tab">237 <svg viewBox="0 0 24 24" width="64" height="64" stroke="#d7d7d7" fill="none" stroke-width="2">238 <polygon points="12,3 15,10 22,10 16,14 18,21 12,17 6,21 8,14 2,10 9,10"></polygon>239 </svg>240 </div>241 <div class="tab">242 <svg viewBox="0 0 24 24" width="64" height="64" stroke="#d7d7d7" fill="none" stroke-width="2">243 <circle cx="8" cy="9" r="3"></circle>244 <circle cx="16" cy="9" r="3"></circle>245 <path d="M2 20c0-3 4-5 8-5" stroke-linecap="round"></path>246 <path d="M14 15c4 0 8 2 8 5" stroke-linecap="round"></path>247 </svg>248 </div>249 </div>250 <div class="active-underline"></div>251 252 <!-- Contact list -->253 <div class="list">254 <div class="item">255 <div class="avatar">A</div>256 <div class="name">Abdul Karim</div>257 </div>258 <div class="item">259 <div class="avatar">D</div>260 <div class="name">Dad Gregory Van Loon</div>261 </div>262 <div class="item">263 <div class="avatar">M</div>264 <div class="name">Mom Violet Van Loon</div>265 </div>266 </div>267 268 <!-- Alphabet index -->269 <div class="alpha-index">270 <span>A</span>271 <span>D</span>272 <span>M</span>273 </div>274 275 <!-- Floating action buttons -->276 <div class="fab dialer">277 <div class="dialer-dots">278 <span></span><span></span><span></span>279 <span></span><span></span><span></span>280 <span></span><span></span><span></span>281 </div>282 </div>283 284 <div class="fab add">285 <div class="plus"></div>286 </div>287 288 <!-- Bottom navigation/gesture area -->289 <div class="nav-area">290 <div class="gesture"></div>291 </div>292</div>293</body>294</html>