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">6<title>Fix & manage - Mock 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: #0b1f21;13 border-radius: 28px;14 box-shadow: 0 30px 80px rgba(0,0,0,0.45);15 color: #d9e7e6;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute; left: 0; top: 0; width: 100%; height: 120px;21 display: flex; align-items: center; justify-content: space-between;22 padding: 0 40px; color: #e9f6f4; font-size: 38px; letter-spacing: 1px;23 }24 .status-icons { display: flex; align-items: center; gap: 26px; }25 .status-right { display: flex; align-items: center; gap: 26px; font-size: 34px; }26 .status-icon svg { width: 40px; height: 40px; stroke: #cfe7e5; fill: none; stroke-width: 3; }27 28 /* Header */29 .header-area {30 position: absolute; left: 56px; top: 180px; right: 56px;31 }32 .title {33 font-size: 78px; font-weight: 500; margin: 0 0 36px 0; color: #cfe7e5;34 }35 .avatar {36 position: absolute; right: 0; top: 0;37 width: 96px; height: 96px; border-radius: 50%;38 background: #d9772a; display: flex; align-items: center; justify-content: center;39 font-weight: 600; color: #fff; font-size: 44px;40 }41 42 /* Cards grid */43 .cards {44 margin-top: 60px;45 display: grid;46 grid-template-columns: 1fr 1fr;47 column-gap: 36px; row-gap: 34px;48 }49 .card {50 height: 180px; border-radius: 36px;51 background: #0e2a2d; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);52 display: flex; align-items: center; padding: 0 40px; color: #d6e6e5;53 }54 .card .icon {55 width: 76px; height: 76px; border-radius: 20px;56 display: flex; align-items: center; justify-content: center;57 margin-right: 28px;58 }59 .icon svg { width: 64px; height: 64px; stroke: #71d6b9; fill: none; stroke-width: 6; }60 .card .label { font-size: 44px; }61 62 /* Single wide card alignment tweak */63 .cards .single { grid-column: 1; }64 65 /* Section: Other tools */66 .section {67 margin-top: 68px;68 }69 .section-title { color: #a6b7b5; font-size: 38px; margin-bottom: 16px; }70 .list {71 margin-top: 10px;72 border-radius: 16px;73 }74 .list-item {75 display: flex; align-items: center;76 height: 130px; padding: 0 56px; color: #d6e6e5; font-size: 44px;77 position: relative;78 }79 .list-item + .list-item { border-top: 2px solid #203537; }80 .list .li-icon {81 width: 64px; height: 64px; margin-right: 26px; display: flex; align-items: center; justify-content: center;82 }83 .li-icon svg { width: 56px; height: 56px; stroke: #cfe7e5; fill: none; stroke-width: 6; }84 85 /* Bottom navigation */86 .bottom-nav {87 position: absolute; left: 0; bottom: 0; width: 100%; height: 220px;88 background: #0d2325; border-top: 1px solid #112a2c;89 display: flex; align-items: center; justify-content: space-around;90 padding-bottom: 40px;91 }92 .nav-item {93 width: 30%; text-align: center; color: #bcd3d1;94 }95 .nav-item .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 24px; }96 .nav-item .label { display: block; margin-top: 18px; font-size: 36px; }97 .nav-icon svg { width: 60px; height: 60px; stroke: #cfe7e5; fill: none; stroke-width: 6; }98 .nav-item.active .nav-icon {99 background: #245a4a; color: #fff;100 }101 .nav-item.active .nav-icon svg { stroke: #ffffff; }102 .gesture {103 position: absolute; left: 50%; transform: translateX(-50%);104 bottom: 16px; width: 240px; height: 14px; border-radius: 7px; background: #e0e0e0; opacity: 0.35;105 }106</style>107</head>108<body>109<div id="render-target">110 111 <!-- Status Bar -->112 <div class="status-bar">113 <div class="status-icons">114 <div style="font-weight: 500;">12:21</div>115 <span class="status-icon">116 <!-- Runner icon (simple man) -->117 <svg viewBox="0 0 24 24"><path d="M8 18l4-4 2 6M12 10l-3 3M15 6a2 2 0 1 1-3 0 2 2 0 0 1 3 0z"/></svg>118 </span>119 <span class="status-icon">120 <!-- Flower -->121 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l4 4M15 15l4 4M5 19l4-4M15 9l4-4"/></svg>122 </span>123 <span class="status-icon">124 <!-- Check -->125 <svg viewBox="0 0 24 24"><path d="M4 12l6 6L20 6"/></svg>126 </span>127 <span class="status-icon">128 <!-- Shield -->129 <svg viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z"/></svg>130 </span>131 <span class="status-icon">132 <!-- Dot -->133 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#cfe7e5" stroke="none"/></svg>134 </span>135 </div>136 <div class="status-right">137 <span class="status-icon">138 <!-- WiFi -->139 <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18l2 2-2 2-2-2 2-2z"/></svg>140 </span>141 <span class="status-icon">142 <!-- Battery -->143 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2"/><rect x="22" y="9" width="3" height="6"/></svg>144 </span>145 <span>100%</span>146 </div>147 </div>148 149 <!-- Header -->150 <div class="header-area">151 <h1 class="title">Fix & manage</h1>152 <div class="avatar">R</div>153 154 <!-- Cards Grid -->155 <div class="cards">156 <div class="card">157 <div class="icon">158 <!-- Tools (merge & fix) -->159 <svg viewBox="0 0 24 24">160 <path d="M4 16l6-6M10 18l-4-4M12 6l8 8M17 5l2 2M5 17l2 2"/>161 </svg>162 </div>163 <div class="label">Merge & fix</div>164 </div>165 166 <div class="card">167 <div class="icon">168 <!-- Reminders (note) -->169 <svg viewBox="0 0 24 24">170 <path d="M6 4h9l3 3v13H6z"/>171 <path d="M15 4v3h3"/>172 <path d="M8 11h8M8 15h6"/>173 </svg>174 </div>175 <div class="label">Reminders</div>176 </div>177 178 <div class="card">179 <div class="icon">180 <!-- Restore contacts (cloud up) -->181 <svg viewBox="0 0 24 24">182 <path d="M6 16a5 5 0 1 1 9-6 4 4 0 1 1 3 6H6z"/>183 <path d="M12 14v-4M10 12l2-2 2 2"/>184 </svg>185 </div>186 <div class="label">Restore contacts</div>187 </div>188 189 <div class="card">190 <div class="icon">191 <!-- Import from file (download) -->192 <svg viewBox="0 0 24 24">193 <path d="M12 4v10"/>194 <path d="M9 11l3 3 3-3"/>195 <path d="M4 20h16"/>196 </svg>197 </div>198 <div class="label">Import from file</div>199 </div>200 201 <div class="card">202 <div class="icon">203 <!-- Export to file (upload) -->204 <svg viewBox="0 0 24 24">205 <path d="M12 20V10"/>206 <path d="M9 13l3-3 3 3"/>207 <path d="M4 4h16"/>208 </svg>209 </div>210 <div class="label">Export to file</div>211 </div>212 213 <div class="card">214 <div class="icon">215 <!-- Trash -->216 <svg viewBox="0 0 24 24">217 <path d="M5 7h14M10 7V5h4v2M7 7l1 12h8l1-12"/>218 </svg>219 </div>220 <div class="label">Trash</div>221 </div>222 223 <div class="card single">224 <div class="icon">225 <!-- Settings (gear) -->226 <svg viewBox="0 0 24 24">227 <circle cx="12" cy="12" r="3"/>228 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.5 4.5l2.1 2.1M17.4 17.4l2.1 2.1M4.5 19.5l2.1-2.1M17.4 6.6l2.1-2.1"/>229 </svg>230 </div>231 <div class="label">Settings</div>232 </div>233 </div>234 235 <!-- Other tools -->236 <div class="section">237 <div class="section-title">Other tools</div>238 <div class="list">239 240 <div class="list-item">241 <div class="li-icon">242 <!-- Emergency (star of life) -->243 <svg viewBox="0 0 24 24">244 <path d="M12 2v20M2 12h20M5 5l14 14M19 5L5 19"/>245 </svg>246 </div>247 <div>Emergency contacts</div>248 </div>249 250 <div class="list-item">251 <div class="li-icon">252 <!-- Household contacts (home) -->253 <svg viewBox="0 0 24 24">254 <path d="M3 11l9-7 9 7v9H3z"/>255 <path d="M9 20v-6h6v6"/>256 </svg>257 </div>258 <div>Household contacts</div>259 </div>260 261 <div class="list-item">262 <div class="li-icon">263 <!-- Family group (home outline) -->264 <svg viewBox="0 0 24 24">265 <path d="M4 12l8-6 8 6v8H4z"/>266 <path d="M10 20v-5h4v5"/>267 </svg>268 </div>269 <div>Family group</div>270 </div>271 272 <div class="list-item">273 <div class="li-icon">274 <!-- Blocked numbers (no entry) -->275 <svg viewBox="0 0 24 24">276 <circle cx="12" cy="12" r="9"/>277 <path d="M7 7l10 10"/>278 </svg>279 </div>280 <div>Blocked numbers</div>281 </div>282 283 </div>284 </div>285 </div>286 287 <!-- Bottom Navigation -->288 <div class="bottom-nav">289 <div class="nav-item">290 <div class="nav-icon">291 <!-- Contacts (person) -->292 <svg viewBox="0 0 24 24">293 <circle cx="12" cy="8" r="4"/>294 <path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>295 </svg>296 </div>297 <span class="label">Contacts</span>298 </div>299 <div class="nav-item">300 <div class="nav-icon">301 <!-- Highlights (star) -->302 <svg viewBox="0 0 24 24">303 <path d="M12 3l3 6 6 .9-4.5 4.3 1.1 6.5L12 17l-5.6 3.7 1.1-6.5L3 9.9 9 9z"/>304 </svg>305 </div>306 <span class="label">Highlights</span>307 </div>308 <div class="nav-item active">309 <div class="nav-icon">310 <!-- Fix & manage (wrench) -->311 <svg viewBox="0 0 24 24">312 <path d="M14 2l2 2-3 3 3 3-2 2-3-3-3 3-2-2 3-3-3-3 2-2 3 3z"/>313 </svg>314 </div>315 <span class="label">Fix & manage</span>316 </div>317 <div class="gesture"></div>318 </div>319 320</div>321</body>322</html>