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>Fix & manage UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0d1f20;15 color: #e6f0ef;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 110px;25 padding: 0 40px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #eaf2f1;31 font-size: 42px;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 24px;38 }39 .icon {40 width: 44px;41 height: 44px;42 }43 44 /* Page header */45 .content {46 position: absolute;47 top: 150px;48 left: 56px;49 right: 56px;50 }51 .title {52 font-size: 88px;53 font-weight: 600;54 margin: 30px 0 40px 0;55 color: #d2e6e5;56 }57 58 /* Cards grid */59 .cards {60 display: grid;61 grid-template-columns: 1fr 1fr;62 gap: 32px;63 margin-right: 8px;64 }65 .card {66 background: #13282a;67 border-radius: 34px;68 height: 190px;69 padding: 36px;70 box-sizing: border-box;71 display: flex;72 align-items: center;73 gap: 28px;74 color: #d7e8e8;75 box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;76 }77 .card span {78 font-size: 44px;79 font-weight: 500;80 }81 .mint { color: #75e0c2; }82 .card.wide {83 grid-column: 1 / span 2;84 }85 86 /* Other tools section */87 .section-title {88 margin-top: 56px;89 margin-bottom: 24px;90 font-size: 40px;91 color: #99b3b2;92 font-weight: 500;93 }94 .list {95 margin-top: 12px;96 border-radius: 24px;97 }98 .list-item {99 display: flex;100 align-items: center;101 gap: 28px;102 height: 120px;103 font-size: 44px;104 color: #cfe0df;105 }106 .divider {107 height: 2px;108 background: #1f3638;109 margin-left: 96px;110 }111 112 /* Floating avatar */113 .avatar {114 position: absolute;115 top: 220px;116 right: 56px;117 width: 94px;118 height: 94px;119 border-radius: 50%;120 background: #d5712e;121 display: flex;122 align-items: center;123 justify-content: center;124 font-weight: 700;125 font-size: 44px;126 color: #ffffff;127 box-shadow: 0 6px 14px rgba(0,0,0,0.35);128 }129 130 /* Snackbar */131 .snackbar {132 position: absolute;133 bottom: 270px;134 left: 50%;135 transform: translateX(-50%);136 background: #3c4647;137 color: #e6f0ef;138 border-radius: 48px;139 padding: 30px 40px;140 display: flex;141 align-items: center;142 gap: 22px;143 font-size: 38px;144 box-shadow: 0 8px 20px rgba(0,0,0,0.4);145 }146 .mini-avatar {147 width: 68px;148 height: 68px;149 border-radius: 50%;150 background: #a9c1fa;151 display: flex;152 align-items: center;153 justify-content: center;154 color: #1b2c3b;155 font-weight: 700;156 }157 158 /* Bottom navigation */159 .bottom-nav {160 position: absolute;161 bottom: 0;162 left: 0;163 width: 100%;164 height: 200px;165 background: #0f2324;166 border-top: 2px solid #102a2c;167 display: flex;168 align-items: center;169 justify-content: space-around;170 padding-bottom: 20px;171 box-sizing: border-box;172 }173 .nav-item {174 width: 280px;175 height: 150px;176 display: flex;177 flex-direction: column;178 align-items: center;179 justify-content: center;180 gap: 16px;181 color: #cdd9d8;182 font-size: 36px;183 }184 .nav-item .icon {185 width: 56px;186 height: 56px;187 }188 .nav-active {189 position: relative;190 color: #d7e8e8;191 }192 .nav-active .active-pill {193 position: absolute;194 top: -12px;195 width: 170px;196 height: 86px;197 background: #1f6f5c;198 border-radius: 44px;199 z-index: 0;200 }201 .nav-active .icon, .nav-active span { z-index: 1; }202 203 /* Gesture bar */204 .gesture-bar {205 position: absolute;206 bottom: 210px;207 left: 50%;208 transform: translateX(-50%);209 width: 210px;210 height: 12px;211 background: #e6e6e6;212 border-radius: 12px;213 opacity: 0.9;214 }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Status bar -->221 <div class="status-bar">222 <div>12:23</div>223 <div class="status-right">224 <!-- simple icons to mimic system status -->225 <svg class="icon" viewBox="0 0 24 24" stroke="#e6f0ef" fill="none" stroke-width="2">226 <path d="M4 10h16v4H4z"/>227 <path d="M2 12h2"/>228 <path d="M20 10v4" stroke="#e6f0ef"/>229 </svg>230 <svg class="icon" viewBox="0 0 24 24" stroke="#e6f0ef" fill="none" stroke-width="2">231 <path d="M3 12c3-5 7-7 11-7s8 2 7 7-5 7-11 7-10-2-7-7z" />232 </svg>233 <div style="display:flex;align-items:center;gap:10px;">234 <svg class="icon" viewBox="0 0 24 24" stroke="#e6f0ef" fill="none" stroke-width="2">235 <rect x="3" y="6" width="16" height="12" rx="2" />236 <rect x="5" y="8" width="12" height="8" fill="#e6f0ef"/>237 </svg>238 <span>100%</span>239 </div>240 </div>241 </div>242 243 <!-- Floating avatar -->244 <div class="avatar">R</div>245 246 <!-- Main content -->247 <div class="content">248 <div class="title">Fix & manage</div>249 250 <div class="cards">251 <!-- Merge & fix -->252 <div class="card">253 <svg class="icon" viewBox="0 0 24 24" stroke="#75e0c2" fill="none" stroke-width="2">254 <path d="M4 14l6-6" />255 <path d="M8 18l-4-4" />256 <circle cx="10" cy="8" r="2" />257 <path d="M14 10l6 6" />258 <circle cx="16" cy="16" r="2" />259 </svg>260 <span>Merge & fix</span>261 </div>262 263 <!-- Reminders -->264 <div class="card">265 <svg class="icon" viewBox="0 0 24 24" stroke="#75e0c2" fill="none" stroke-width="2">266 <rect x="4" y="5" width="12" height="9" rx="2"/>267 <rect x="8" y="10" width="12" height="9" rx="2"/>268 </svg>269 <span>Reminders</span>270 </div>271 272 <!-- Restore contacts -->273 <div class="card">274 <svg class="icon" viewBox="0 0 24 24" stroke="#75e0c2" fill="none" stroke-width="2">275 <path d="M6 14c0-3 3-5 6-5s6 2 6 5" />276 <path d="M4 14c0-4 3-7 8-7 4 0 7 3 7 7" />277 <path d="M12 9v7" />278 <path d="M9 13l3 3 3-3" />279 </svg>280 <span>Restore contacts</span>281 </div>282 283 <!-- Import from file -->284 <div class="card">285 <svg class="icon" viewBox="0 0 24 24" stroke="#75e0c2" fill="none" stroke-width="2">286 <path d="M12 5v10" />287 <path d="M9 12l3 3 3-3" />288 <rect x="4" y="18" width="16" height="2" />289 </svg>290 <span>Import from file</span>291 </div>292 293 <!-- Export to file -->294 <div class="card">295 <svg class="icon" viewBox="0 0 24 24" stroke="#75e0c2" fill="none" stroke-width="2">296 <path d="M12 19V9" />297 <path d="M9 12l3-3 3 3" />298 <rect x="4" y="6" width="16" height="2" />299 </svg>300 <span>Export to file</span>301 </div>302 303 <!-- Trash -->304 <div class="card">305 <svg class="icon" viewBox="0 0 24 24" stroke="#75e0c2" fill="none" stroke-width="2">306 <path d="M4 7h16" />307 <path d="M8 7V5h8v2" />308 <rect x="6" y="7" width="12" height="12" rx="2" />309 <path d="M10 11v6M14 11v6" />310 </svg>311 <span>Trash</span>312 </div>313 314 <!-- Settings wide -->315 <div class="card wide">316 <svg class="icon" viewBox="0 0 24 24" stroke="#75e0c2" fill="none" stroke-width="2">317 <circle cx="12" cy="12" r="3" />318 <path d="M4 12h2M18 12h2M12 4v2M12 18v2M6.5 6.5l1.5 1.5M16 16l1.5 1.5M16 8l1.5-1.5M6.5 17.5l1.5-1.5" />319 </svg>320 <span>Settings</span>321 </div>322 </div>323 324 <!-- Other tools -->325 <div class="section-title">Other tools</div>326 <div class="list">327 <div class="list-item">328 <svg class="icon" viewBox="0 0 24 24" stroke="#cfe0df" fill="none" stroke-width="2">329 <path d="M12 3l3 6 6 3-6 3-3 6-3-6-6-3 6-3z" />330 </svg>331 <span>Emergency contacts</span>332 </div>333 <div class="divider"></div>334 335 <div class="list-item">336 <svg class="icon" viewBox="0 0 24 24" stroke="#cfe0df" fill="none" stroke-width="2">337 <path d="M3 12l9-7 9 7" />338 <rect x="7" y="12" width="10" height="8" />339 <circle cx="12" cy="15" r="1.6" fill="#cfe0df"/>340 </svg>341 <span>Household contacts</span>342 </div>343 <div class="divider"></div>344 345 <div class="list-item">346 <svg class="icon" viewBox="0 0 24 24" stroke="#cfe0df" fill="none" stroke-width="2">347 <path d="M3 12l9-7 9 7" />348 <rect x="7" y="12" width="10" height="8" rx="2" />349 </svg>350 <span>Family group</span>351 </div>352 <div class="divider"></div>353 354 <div class="list-item">355 <svg class="icon" viewBox="0 0 24 24" stroke="#cfe0df" fill="none" stroke-width="2">356 <circle cx="12" cy="12" r="8" />357 <path d="M5 5l14 14" />358 </svg>359 <span>Blocked numbers</span>360 </div>361 <div class="divider"></div>362 </div>363 </div>364 365 <!-- Snackbar -->366 <div class="snackbar">367 <div class="mini-avatar">•</div>368 <div>contacts.vcf will be imported shortly.</div>369 </div>370 371 <!-- Bottom navigation -->372 <div class="bottom-nav">373 <div class="nav-item">374 <svg class="icon" viewBox="0 0 24 24" stroke="#cdd9d8" fill="none" stroke-width="2">375 <path d="M4 20h16v-9l-8-6-8 6z" />376 <path d="M10 20v-6h4v6" />377 </svg>378 <span>Contacts</span>379 </div>380 381 <div class="nav-item">382 <svg class="icon" viewBox="0 0 24 24" stroke="#cdd9d8" fill="none" stroke-width="2">383 <path d="M4 5h16v4H4zM4 11h16v4H4zM4 17h16v2H4z" />384 </svg>385 <span>Highlights</span>386 </div>387 388 <div class="nav-item nav-active">389 <div class="active-pill"></div>390 <svg class="icon" viewBox="0 0 24 24" stroke="#d7e8e8" fill="none" stroke-width="2">391 <path d="M4 14l6-6M8 18l-4-4" />392 <circle cx="16" cy="16" r="2" />393 <path d="M14 10l6 6" />394 </svg>395 <span>Fix & manage</span>396 </div>397 </div>398 399 <!-- Gesture bar -->400 <div class="gesture-bar"></div>401 402</div>403</body>404</html>