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 - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #0f1e21;13 border-radius: 32px;14 box-shadow: 0 8px 40px rgba(0,0,0,0.35);15 color: #cfe1dd;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute; left: 0; top: 0; width: 100%; height: 120px;21 padding: 0 40px;22 display: flex; align-items: center; justify-content: space-between;23 color: #e9f0ef; font-size: 40px; letter-spacing: 0.5px;24 }25 .status-icons { display: flex; align-items: center; gap: 26px; }26 .status-icons svg { opacity: 0.9; }27 28 /* Profile avatar */29 .avatar {30 position: absolute; right: 48px; top: 170px;31 width: 96px; height: 96px; border-radius: 50%;32 background: #a55c23; color: #f4e7d6;33 display: flex; align-items: center; justify-content: center;34 font-weight: 700; font-size: 46px;35 }36 37 /* Title */38 .title {39 position: absolute; left: 56px; top: 220px;40 font-size: 64px; font-weight: 600; color: #b9c9c6;41 }42 43 /* Actions grid */44 .actions {45 position: absolute; left: 40px; right: 40px; top: 360px;46 display: flex; flex-wrap: wrap; gap: 40px;47 }48 .action-card {49 width: 460px; height: 170px;50 background: #132a2d;51 border: 1px solid #0c2023;52 border-radius: 28px;53 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);54 display: flex; align-items: center; padding: 28px;55 color: #9fc5b4;56 }57 .action-card svg { width: 60px; height: 60px; margin-right: 22px; }58 .action-card .label { font-size: 36px; color: #9fc5b4; }59 60 /* Lower sheet */61 .sheet {62 position: absolute; left: 0; right: 0; top: 980px; bottom: 120px;63 background: #102628;64 border-top-left-radius: 48px; border-top-right-radius: 48px;65 padding: 40px 40px 140px 40px;66 }67 .sheet h2 {68 margin: 10px 16px 30px 16px;69 font-size: 40px; color: #b9c9c6; font-weight: 600;70 }71 72 /* Account rows */73 .row {74 height: 140px; border-radius: 16px;75 display: flex; align-items: center; justify-content: space-between;76 padding: 0 20px 0 16px; margin: 6px 6px;77 }78 .row-left { display: flex; align-items: center; }79 .chip {80 width: 100px; height: 100px; border-radius: 50%;81 display: flex; align-items: center; justify-content: center;82 font-size: 44px; font-weight: 700; color: #eef5f4;83 margin-right: 24px;84 }85 .chip.c-teal { background: #2f8c82; }86 .chip.c-purple { background: linear-gradient(135deg, #6a2ad6, #8f2ac9); }87 .chip.c-pink { background: #d25176; }88 .chip.c-orange { background: #c6712b; }89 .chip.c-gray { background: #b7c0c4; color: #243336; }90 .text-block { display: flex; flex-direction: column; }91 .primary { font-size: 36px; color: #dbe8e5; }92 .secondary { font-size: 28px; color: #92a4a0; margin-top: 4px; }93 94 .row .info {95 width: 54px; height: 54px; border-radius: 50%;96 display: flex; align-items: center; justify-content: center;97 }98 .row .info svg { width: 34px; height: 34px; }99 100 /* Device note lines that wrap */101 .device-note { max-width: 740px; }102 103 /* Add another account */104 .add-account {105 height: 120px; margin-top: 16px;106 display: flex; align-items: center; gap: 22px; padding-left: 24px;107 }108 .add-account svg { width: 54px; height: 54px; }109 .add-account span { font-size: 40px; color: #cfe1dd; }110 111 /* Home indicator */112 .home-pill {113 position: absolute; bottom: 40px; left: 50%;114 transform: translateX(-50%);115 width: 360px; height: 12px; border-radius: 12px; background: #c7c7c7; opacity: 0.85;116 }117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status bar -->123 <div class="status-bar">124 <div>12:22</div>125 <div class="status-icons">126 <!-- simple status icons -->127 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">128 <circle cx="5" cy="12" r="2" fill="#e9f0ef"/>129 <circle cx="12" cy="12" r="2" fill="#e9f0ef"/>130 <circle cx="19" cy="12" r="2" fill="#e9f0ef"/>131 </svg>132 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#e9f0ef" stroke-width="2">133 <path d="M3 12c3-4 6-6 9-6s6 2 9 6"/>134 <path d="M6 12c2-3 4-4 6-4s4 1 6 4"/>135 <path d="M9 12c1-2 2-2 3-2s2 0 3 2"/>136 </svg>137 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#e9f0ef" stroke-width="2">138 <rect x="1" y="7" width="16" height="10" rx="2" />139 <path d="M19 10v4" />140 </svg>141 <span style="font-size: 34px;">100%</span>142 </div>143 </div>144 145 <!-- Profile avatar -->146 <div class="avatar">R</div>147 148 <!-- Title -->149 <div class="title">Fix & manage</div>150 151 <!-- Actions grid -->152 <div class="actions">153 <!-- Merge & fix -->154 <div class="action-card">155 <svg viewBox="0 0 24 24" stroke="#79c9a9" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">156 <path d="M3 21l6-6M7 7l10 10" />157 <path d="M15 3l6 6M6 6l3-3" />158 </svg>159 <div class="label">Merge & fix</div>160 </div>161 <!-- Reminders -->162 <div class="action-card">163 <svg viewBox="0 0 24 24" stroke="#79c9a9" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">164 <rect x="5" y="3" width="14" height="18" rx="2"/>165 <path d="M8 8h8M8 12h8M8 16h8"/>166 </svg>167 <div class="label">Reminders</div>168 </div>169 <!-- Restore contacts -->170 <div class="action-card">171 <svg viewBox="0 0 24 24" stroke="#79c9a9" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">172 <path d="M7 17h10a4 4 0 0 0 0-8 5 5 0 0 0-9-1 4 4 0 0 0-1 9z"/>173 <path d="M12 13v-4M12 13l-3-3"/>174 </svg>175 <div class="label">Restore contacts</div>176 </div>177 <!-- Import from file -->178 <div class="action-card">179 <svg viewBox="0 0 24 24" stroke="#79c9a9" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">180 <path d="M6 20h12a2 2 0 0 0 2-2V8l-5-5H6a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z"/>181 <path d="M12 11v6M9 14l3 3 3-3"/>182 </svg>183 <div class="label">Import from file</div>184 </div>185 <!-- Export to file -->186 <div class="action-card">187 <svg viewBox="0 0 24 24" stroke="#79c9a9" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">188 <path d="M6 20h12a2 2 0 0 0 2-2V8l-5-5H6a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z"/>189 <path d="M12 17v-6M15 14l-3-3-3 3"/>190 </svg>191 <div class="label">Export to file</div>192 </div>193 <!-- Trash -->194 <div class="action-card">195 <svg viewBox="0 0 24 24" stroke="#79c9a9" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">196 <path d="M4 7h16M9 7V5h6v2"/>197 <rect x="6" y="7" width="12" height="14" rx="2"/>198 <path d="M10 11v6M14 11v6"/>199 </svg>200 <div class="label">Trash</div>201 </div>202 </div>203 204 <!-- Lower sheet -->205 <div class="sheet">206 <h2>Save imported contacts to</h2>207 208 <!-- Row 1 -->209 <div class="row">210 <div class="row-left">211 <div class="chip c-teal">C</div>212 <div class="text-block">213 <div class="primary">dbwscratch.test.id4@gmail.com</div>214 <div class="secondary">Google Contacts</div>215 </div>216 </div>217 <div class="info">218 <svg viewBox="0 0 24 24" stroke="#9fb1ad" stroke-width="1.8" fill="none">219 <circle cx="12" cy="12" r="10"/>220 <path d="M12 8v8M12 6v0"/>221 </svg>222 </div>223 </div>224 225 <!-- Row 2 -->226 <div class="row">227 <div class="row-left">228 <div class="chip c-purple">A</div>229 <div class="text-block">230 <div class="primary">andreaswagner98b@gmail.com</div>231 <div class="secondary">Google Contacts</div>232 </div>233 </div>234 <div class="info">235 <svg viewBox="0 0 24 24" stroke="#9fb1ad" stroke-width="1.8" fill="none">236 <circle cx="12" cy="12" r="10"/>237 <path d="M12 8v8M12 6v0"/>238 </svg>239 </div>240 </div>241 242 <!-- Row 3 -->243 <div class="row">244 <div class="row-left">245 <div class="chip c-pink">C</div>246 <div class="text-block">247 <div class="primary">clarawagner98b@gmail.com</div>248 <div class="secondary">Google Contacts</div>249 </div>250 </div>251 <div class="info">252 <svg viewBox="0 0 24 24" stroke="#9fb1ad" stroke-width="1.8" fill="none">253 <circle cx="12" cy="12" r="10"/>254 <path d="M12 8v8M12 6v0"/>255 </svg>256 </div>257 </div>258 259 <!-- Row 4 -->260 <div class="row">261 <div class="row-left">262 <div class="chip c-orange">R</div>263 <div class="text-block">264 <div class="primary">richardwegnar@gmail.com</div>265 <div class="secondary">Google Contacts</div>266 </div>267 </div>268 <div class="info">269 <svg viewBox="0 0 24 24" stroke="#9fb1ad" stroke-width="1.8" fill="none">270 <circle cx="12" cy="12" r="10"/>271 <path d="M12 8v8M12 6v0"/>272 </svg>273 </div>274 </div>275 276 <!-- Device Row -->277 <div class="row">278 <div class="row-left">279 <div class="chip c-gray">280 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#2a3c3f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">281 <rect x="7" y="3" width="10" height="18" rx="2"/>282 <path d="M10 3h4M10 21h4"/>283 </svg>284 </div>285 <div class="text-block device-note">286 <div class="primary">Device</div>287 <div class="secondary">Contacts may not sync or be available on your other devices</div>288 </div>289 </div>290 <div class="info"></div>291 </div>292 293 <!-- Add another account -->294 <div class="add-account">295 <svg viewBox="0 0 24 24" fill="none" stroke="#cfe1dd" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">296 <circle cx="8" cy="8" r="4"/>297 <path d="M2 20c0-4 4-6 8-6s8 2 8 6"/>298 <path d="M19 8v6M16 11h6"/>299 </svg>300 <span>Add another account</span>301 </div>302 </div>303 304 <!-- Home indicator -->305 <div class="home-pill"></div>306</div>307</body>308</html>