GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Fix & manage UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0B1A1E;13 color: #E6F3EF;14 }15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 40px;26 color: #D8E6E4;27 font-size: 40px;28 letter-spacing: 1px;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 26px;34 }35 .sb-icon { width: 36px; height: 36px; opacity: 0.9; }36 .battery {37 display: inline-flex;38 align-items: center;39 gap: 12px;40 font-size: 36px;41 }42 /* Header title */43 .title {44 position: absolute;45 top: 160px;46 left: 40px;47 font-size: 84px;48 font-weight: 600;49 color: #EAF2F0;50 }51 .profile {52 position: absolute;53 top: 150px;54 right: 40px;55 width: 110px;56 height: 110px;57 border-radius: 55px;58 background: #E47A2E;59 display: flex;60 align-items: center;61 justify-content: center;62 font-weight: 700;63 font-size: 56px;64 color: #1B0F07;65 box-shadow: 0 4px 10px rgba(0,0,0,0.3);66 }67 68 /* Tiles grid */69 .grid {70 position: absolute;71 top: 310px;72 left: 40px;73 right: 40px;74 display: grid;75 grid-template-columns: repeat(2, 1fr);76 grid-gap: 36px;77 }78 .tile {79 background: #1A3136;80 border-radius: 44px;81 height: 180px;82 display: flex;83 align-items: center;84 padding: 0 36px;85 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);86 }87 .icon {88 width: 88px;89 height: 88px;90 margin-right: 26px;91 display: inline-flex;92 align-items: center;93 justify-content: center;94 }95 .icon svg { width: 88px; height: 88px; fill: none; stroke: #73D6AF; stroke-width: 6px; }96 .tile span {97 font-size: 46px;98 color: #CFE9E1;99 letter-spacing: 0.3px;100 }101 102 /* Other tools list */103 .section-title {104 position: absolute;105 top: 1100px;106 left: 40px;107 font-size: 40px;108 color: #A9C7C0;109 }110 .list {111 position: absolute;112 top: 1160px;113 left: 40px;114 right: 40px;115 border-radius: 30px;116 }117 .list-item {118 height: 120px;119 display: flex;120 align-items: center;121 padding: 0 10px 0 6px;122 color: #E4F0ED;123 }124 .list-item .li-icon { width: 80px; height: 80px; margin: 0 30px; display: flex; align-items: center; justify-content: center; }125 .list-item .li-icon svg { width: 72px; height: 72px; stroke: #CFE9E1; fill: none; stroke-width: 6px; }126 .list-item .text { font-size: 44px; }127 .divider { height: 2px; background: rgba(255,255,255,0.08); margin-left: 120px; }128 129 /* Bottom nav bar */130 .bottom-nav {131 position: absolute;132 bottom: 130px;133 left: 0;134 width: 1080px;135 height: 180px;136 background: #0B1A1E;137 display: flex;138 justify-content: space-around;139 align-items: center;140 border-top: 1px solid rgba(255,255,255,0.05);141 }142 .nav-item {143 width: 320px;144 height: 140px;145 display: flex;146 flex-direction: column;147 align-items: center;148 justify-content: center;149 gap: 10px;150 color: #CFE9E1;151 font-size: 36px;152 }153 .nav-item .nav-icon svg { width: 58px; height: 58px; stroke: #D6EDE6; fill: none; stroke-width: 6px; }154 .nav-item.active {155 color: #DFF5EE;156 }157 .nav-item.active .pill {158 position: absolute;159 width: 200px;160 height: 88px;161 background: #286A4F;162 border-radius: 44px;163 z-index: -1;164 margin-top: -20px;165 }166 .nav-item.active .nav-icon svg { stroke: #9BE8C6; }167 /* Gesture bar */168 .home-indicator {169 position: absolute;170 bottom: 52px;171 left: 50%;172 transform: translateX(-50%);173 width: 500px;174 height: 12px;175 border-radius: 6px;176 background: rgba(255,255,255,0.25);177 }178</style>179</head>180<body>181<div id="render-target">182 183 <!-- Status Bar -->184 <div class="status-bar">185 <div>1:11</div>186 <div class="status-right">187 <svg class="sb-icon" viewBox="0 0 24 24">188 <circle cx="7" cy="12" r="2" stroke="#D8E6E4" fill="none" stroke-width="2"/>189 <circle cx="17" cy="12" r="2" stroke="#D8E6E4" fill="none" stroke-width="2"/>190 </svg>191 <svg class="sb-icon" viewBox="0 0 24 24">192 <path d="M3 12h18" stroke="#D8E6E4" stroke-width="2"/>193 <path d="M12 3v18" stroke="#D8E6E4" stroke-width="2"/>194 </svg>195 <svg class="sb-icon" viewBox="0 0 24 24">196 <path d="M3 12l9-9 9 9-9 9-9-9z" stroke="#D8E6E4" stroke-width="2" fill="none"/>197 </svg>198 <span class="battery">199 <svg class="sb-icon" viewBox="0 0 24 24">200 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#D8E6E4" stroke-width="2" fill="none"/>201 <rect x="4" y="8" width="14" height="8" fill="#D8E6E4"/>202 <rect x="20" y="9" width="2" height="6" fill="#D8E6E4"/>203 </svg>204 100%205 </span>206 </div>207 </div>208 209 <!-- Title and profile -->210 <div class="title">Fix & manage</div>211 <div class="profile">R</div>212 213 <!-- Grid of tiles -->214 <div class="grid">215 <div class="tile">216 <div class="icon">217 <!-- wrench -->218 <svg viewBox="0 0 64 64">219 <path d="M40 12c4 10-6 18-6 18l-18 18 6 6 18-18s8-10 18-6c-6-8-6-18-18-18z"/>220 <circle cx="18" cy="48" r="3"/>221 </svg>222 </div>223 <span>Merge & fix</span>224 </div>225 <div class="tile">226 <div class="icon">227 <!-- clipboard -->228 <svg viewBox="0 0 64 64">229 <rect x="16" y="14" width="32" height="40" rx="6"/>230 <rect x="24" y="8" width="16" height="10" rx="4"/>231 <path d="M22 28h20M22 36h20M22 44h16"/>232 </svg>233 </div>234 <span>Reminders</span>235 </div>236 237 <div class="tile">238 <div class="icon">239 <!-- cloud restore -->240 <svg viewBox="0 0 64 64">241 <path d="M24 44h22a10 10 0 0 0 0-20 12 12 0 0 0-23-4 10 10 0 0 0-5 24h6"/>242 <path d="M26 34l6-6 6 6M32 28v12"/>243 </svg>244 </div>245 <span>Restore contacts</span>246 </div>247 <div class="tile">248 <div class="icon">249 <!-- download -->250 <svg viewBox="0 0 64 64">251 <rect x="14" y="46" width="36" height="8" rx="2"/>252 <path d="M32 14v24M22 28l10 10 10-10"/>253 </svg>254 </div>255 <span>Import from file</span>256 </div>257 258 <div class="tile">259 <div class="icon">260 <!-- upload -->261 <svg viewBox="0 0 64 64">262 <rect x="14" y="46" width="36" height="8" rx="2"/>263 <path d="M32 44V20M22 30l10-10 10 10"/>264 </svg>265 </div>266 <span>Export to file</span>267 </div>268 <div class="tile">269 <div class="icon">270 <!-- trash -->271 <svg viewBox="0 0 64 64">272 <rect x="20" y="22" width="24" height="32" rx="4"/>273 <path d="M16 22h32M26 30v16M38 30v16"/>274 <rect x="26" y="12" width="12" height="8" rx="3"/>275 </svg>276 </div>277 <span>Trash</span>278 </div>279 280 <div class="tile" style="grid-column: 1 / span 1;">281 <div class="icon">282 <!-- gear -->283 <svg viewBox="0 0 64 64">284 <circle cx="32" cy="32" r="10"/>285 <path d="M32 14v6M32 44v6M18 32h-6M52 32h6M22 22l-4-4M46 46l4 4M46 18l4-4M18 46l-4 4"/>286 </svg>287 </div>288 <span>Settings</span>289 </div>290 </div>291 292 <!-- Other tools section -->293 <div class="section-title">Other tools</div>294 <div class="list">295 <div class="list-item">296 <div class="li-icon">297 <!-- star-of-life style asterisk -->298 <svg viewBox="0 0 64 64">299 <path d="M32 14v36M14 32h36M20 20l24 24M44 20L20 44"/>300 </svg>301 </div>302 <div class="text">Emergency contacts</div>303 </div>304 <div class="divider"></div>305 306 <div class="list-item">307 <div class="li-icon">308 <!-- house -->309 <svg viewBox="0 0 64 64">310 <path d="M12 30l20-16 20 16v18H12z"/>311 <path d="M26 48V34h12v14"/>312 </svg>313 </div>314 <div class="text">Household contacts</div>315 </div>316 <div class="divider"></div>317 318 <div class="list-item">319 <div class="li-icon">320 <!-- family group: house + people -->321 <svg viewBox="0 0 64 64">322 <path d="M12 30l20-16 20 16v18H12z"/>323 <circle cx="26" cy="44" r="4"/>324 <circle cx="38" cy="44" r="4"/>325 <path d="M22 50h8M34 50h8"/>326 </svg>327 </div>328 <div class="text">Family group</div>329 </div>330 <div class="divider"></div>331 332 <div class="list-item">333 <div class="li-icon">334 <!-- blocked: circle with slash -->335 <svg viewBox="0 0 64 64">336 <circle cx="32" cy="32" r="16"/>337 <path d="M22 42l20-20"/>338 </svg>339 </div>340 <div class="text">Blocked numbers</div>341 </div>342 </div>343 344 <!-- Bottom Navigation -->345 <div class="bottom-nav">346 <div class="nav-item">347 <div class="nav-icon">348 <svg viewBox="0 0 64 64">349 <circle cx="32" cy="24" r="10"/>350 <path d="M14 52c6-8 30-8 36 0"/>351 </svg>352 </div>353 <div>Contacts</div>354 </div>355 <div class="nav-item">356 <div class="nav-icon">357 <svg viewBox="0 0 64 64">358 <path d="M32 12l8 16 18 2-13 12 4 18-17-10-17 10 4-18-13-12 18-2z"/>359 </svg>360 </div>361 <div>Highlights</div>362 </div>363 <div class="nav-item active" style="position: relative;">364 <div class="pill"></div>365 <div class="nav-icon">366 <svg viewBox="0 0 64 64">367 <path d="M40 12c4 10-6 18-6 18l-18 18 6 6 18-18s8-10 18-6c-6-8-6-18-18-18z"/>368 <circle cx="18" cy="48" r="3"/>369 </svg>370 </div>371 <div>Fix & manage</div>372 </div>373 </div>374 375 <!-- Gesture home indicator -->376 <div class="home-indicator"></div>377 378</div>379</body>380</html>