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>Phonebook UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #3f3f3f; /* main dark surface */13 border-radius: 0;14 }15 16 /* Status bar */17 .statusbar {18 position: absolute; top: 0; left: 0; right: 0;19 height: 120px; background: #c86814; color: #fff;20 }21 .statusbar .time {22 position: absolute; left: 36px; top: 50%; transform: translateY(-50%);23 font-size: 46px; font-weight: 500; letter-spacing: 1px;24 }25 .statusbar .icons {26 position: absolute; right: 36px; top: 50%; transform: translateY(-50%);27 display: flex; align-items: center; gap: 28px;28 }29 .statusbar svg { width: 44px; height: 44px; }30 31 /* Toolbar */32 .toolbar {33 position: absolute; top: 120px; left: 0; right: 0;34 height: 200px; background: #f68010; color: #fff;35 display: flex; align-items: center; justify-content: space-between;36 padding: 0 36px;37 }38 .toolbar .title {39 font-size: 72px; font-weight: 600;40 }41 .toolbar .actions { display: flex; align-items: center; gap: 42px; }42 .toolbar .actions svg { width: 64px; height: 64px; }43 44 /* Tabs */45 .tabs {46 position: absolute; top: 320px; left: 0; right: 0;47 height: 110px; background: #3f3f3f; color: #ffc107;48 display: flex; align-items: center; justify-content: space-around;49 padding: 0 160px;50 }51 .tab { width: 240px; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }52 .tab.selected::after {53 content: ""; position: absolute; bottom: 0; left: 20%; right: 20%;54 height: 6px; background: #ff9800; border-radius: 3px;55 }56 .tabs svg { width: 64px; height: 64px; fill: #ffc107; }57 58 /* List area */59 .list {60 position: absolute; top: 430px; left: 0; right: 0; bottom: 140px;61 padding-top: 10px;62 }63 .contact {64 height: 140px; display: flex; align-items: center;65 padding-left: 36px;66 }67 .avatar {68 width: 96px; height: 96px; border-radius: 50%;69 display: flex; align-items: center; justify-content: center;70 font-size: 44px; font-weight: 600; color: #fff;71 margin-right: 34px;72 }73 .name {74 font-size: 50px; color: #eaeaea; letter-spacing: 0.3px;75 }76 77 /* Alphabet index on right */78 .alphabet {79 position: absolute; right: 28px; top: 60px;80 display: flex; flex-direction: column; align-items: center;81 gap: 24px; color: #e0e0e0; font-size: 34px; line-height: 1;82 }83 84 /* Floating Action Buttons */85 .fab {86 position: absolute; bottom: 190px;87 width: 160px; height: 160px; border-radius: 50%;88 background: #f68010; box-shadow: 0 12px 24px rgba(0,0,0,0.45);89 display: flex; align-items: center; justify-content: center;90 }91 .fab svg { width: 72px; height: 72px; }92 .fab.dial { left: calc(50% - 80px); }93 .fab.add { right: 60px; }94 95 /* Bottom home bar */96 .homebar {97 position: absolute; bottom: 0; left: 0; right: 0;98 height: 140px; background: #000;99 }100 .home-indicator {101 position: absolute; left: 50%; transform: translateX(-50%);102 top: 62px; width: 280px; height: 16px; background: #e6e6e6; border-radius: 10px;103 }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Status bar -->110 <div class="statusbar">111 <div class="time">12:45</div>112 <div class="icons">113 <!-- simple lock -->114 <svg viewBox="0 0 64 64">115 <rect x="16" y="26" width="32" height="24" rx="6" ry="6" fill="none" stroke="#fff" stroke-width="4"></rect>116 <path d="M22 26v-6a10 10 0 0120 0v6" fill="none" stroke="#fff" stroke-width="4"></path>117 </svg>118 <!-- pin -->119 <svg viewBox="0 0 64 64">120 <path d="M32 10l10 14-8 4 0 16-2 10-2-10 0-16-8-4z" fill="none" stroke="#fff" stroke-width="4"></path>121 </svg>122 <!-- location needle -->123 <svg viewBox="0 0 64 64">124 <circle cx="32" cy="24" r="8" fill="none" stroke="#fff" stroke-width="4"></circle>125 <path d="M32 32l0 22" stroke="#fff" stroke-width="4"></path>126 </svg>127 <!-- wifi -->128 <svg viewBox="0 0 64 64">129 <path d="M10 26c12-12 32-12 44 0" fill="none" stroke="#fff" stroke-width="4"></path>130 <path d="M18 34c8-8 20-8 28 0" fill="none" stroke="#fff" stroke-width="4"></path>131 <circle cx="32" cy="44" r="4" fill="#fff"></circle>132 </svg>133 <!-- battery -->134 <svg viewBox="0 0 64 64">135 <rect x="10" y="18" width="44" height="28" rx="6" ry="6" fill="none" stroke="#fff" stroke-width="4"></rect>136 <rect x="14" y="22" width="32" height="20" fill="#fff"></rect>137 <rect x="56" y="26" width="6" height="12" fill="#fff"></rect>138 </svg>139 </div>140 </div>141 142 <!-- Toolbar -->143 <div class="toolbar">144 <div class="title">Phonebook</div>145 <div class="actions">146 <!-- Search -->147 <svg viewBox="0 0 64 64">148 <circle cx="28" cy="28" r="18" fill="none" stroke="#fff" stroke-width="4"></circle>149 <line x1="42" y1="42" x2="58" y2="58" stroke="#fff" stroke-width="4"></line>150 </svg>151 <!-- Sort (lines) -->152 <svg viewBox="0 0 64 64">153 <line x1="16" y1="18" x2="52" y2="18" stroke="#fff" stroke-width="4"></line>154 <line x1="24" y1="32" x2="52" y2="32" stroke="#fff" stroke-width="4"></line>155 <line x1="32" y1="46" x2="52" y2="46" stroke="#fff" stroke-width="4"></line>156 </svg>157 <!-- Filter (funnel) -->158 <svg viewBox="0 0 64 64">159 <path d="M10 18h44l-18 18v14l-8-4v-10z" fill="none" stroke="#fff" stroke-width="4"></path>160 </svg>161 <!-- Overflow (vertical dots) -->162 <svg viewBox="0 0 64 64">163 <circle cx="32" cy="16" r="4" fill="#fff"></circle>164 <circle cx="32" cy="32" r="4" fill="#fff"></circle>165 <circle cx="32" cy="48" r="4" fill="#fff"></circle>166 </svg>167 </div>168 </div>169 170 <!-- Tabs -->171 <div class="tabs">172 <div class="tab selected">173 <!-- Person icon -->174 <svg viewBox="0 0 64 64">175 <circle cx="32" cy="22" r="10"></circle>176 <path d="M16 48c0-10 12-14 16-14s16 4 16 14" ></path>177 </svg>178 </div>179 <div class="tab">180 <!-- Star icon -->181 <svg viewBox="0 0 64 64">182 <polygon points="32,10 38,26 56,26 42,36 48,52 32,42 16,52 22,36 8,26 26,26"></polygon>183 </svg>184 </div>185 <div class="tab">186 <!-- Group icon -->187 <svg viewBox="0 0 64 64">188 <circle cx="22" cy="22" r="8"></circle>189 <circle cx="42" cy="22" r="8"></circle>190 <path d="M8 48c0-8 8-12 14-12s14 4 14 12" ></path>191 <path d="M28 48c0-8 8-12 14-12s14 4 14 12" ></path>192 </svg>193 </div>194 </div>195 196 <!-- Contact list -->197 <div class="list">198 <div class="contact">199 <div class="avatar" style="background:#f57c00;">A</div>200 <div class="name">Anat</div>201 </div>202 <div class="contact">203 <div class="avatar" style="background:#5c8f2f;">B</div>204 <div class="name">Boss</div>205 </div>206 <div class="contact">207 <div class="avatar" style="background:#1976d2;">B</div>208 <div class="name">Brian</div>209 </div>210 <div class="contact">211 <div class="avatar" style="background:#00796b;">B</div>212 <div class="name">Briss</div>213 </div>214 <div class="contact">215 <div class="avatar" style="background:#e64a19;">B</div>216 <div class="name">Bubb</div>217 </div>218 <div class="contact">219 <div class="avatar" style="background:#ad1457;">C</div>220 <div class="name">Cris</div>221 </div>222 <div class="contact">223 <div class="avatar" style="background:#d84315;">D</div>224 <div class="name">Daeg</div>225 </div>226 <div class="contact">227 <div class="avatar" style="background:#c62828;">F</div>228 <div class="name">Friend</div>229 </div>230 <div class="contact">231 <div class="avatar" style="background:#00838f;">G</div>232 <div class="name">Garhb</div>233 </div>234 <div class="contact">235 <div class="avatar" style="background:#64b5f6;">L</div>236 <div class="name">Lara</div>237 </div>238 <div class="contact">239 <div class="avatar" style="background:#b71c1c;">M</div>240 <div class="name">Mike</div>241 </div>242 <div class="contact">243 <div class="avatar" style="background:#f9a825;">O</div>244 <div class="name">Office</div>245 </div>246 247 <!-- Right alphabet index -->248 <div class="alphabet">249 <span>A</span><span>B</span><span>C</span><span>D</span><span>F</span>250 <span>G</span><span>L</span><span>M</span><span>O</span><span>S</span><span>W</span>251 </div>252 </div>253 254 <!-- Floating action buttons -->255 <div class="fab dial">256 <!-- Dialpad (3x3 dots) -->257 <svg viewBox="0 0 72 72">258 <circle cx="18" cy="18" r="5" fill="#fff"></circle>259 <circle cx="36" cy="18" r="5" fill="#fff"></circle>260 <circle cx="54" cy="18" r="5" fill="#fff"></circle>261 262 <circle cx="18" cy="36" r="5" fill="#fff"></circle>263 <circle cx="36" cy="36" r="5" fill="#fff"></circle>264 <circle cx="54" cy="36" r="5" fill="#fff"></circle>265 266 <circle cx="18" cy="54" r="5" fill="#fff"></circle>267 <circle cx="36" cy="54" r="5" fill="#fff"></circle>268 <circle cx="54" cy="54" r="5" fill="#fff"></circle>269 </svg>270 </div>271 272 <div class="fab add">273 <!-- Plus icon -->274 <svg viewBox="0 0 72 72">275 <rect x="32" y="14" width="8" height="44" fill="#fff"></rect>276 <rect x="14" y="32" width="44" height="8" fill="#fff"></rect>277 </svg>278 </div>279 280 <!-- Bottom home area -->281 <div class="homebar">282 <div class="home-indicator"></div>283 </div>284 285</div>286</body>287</html>