GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Profile Screen Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 position: relative;9 width:1080px; height:2400px;10 overflow:hidden;11 background:#ffffff;12 color:#1b1e28;13 }14 /* Status bar */15 .statusbar {16 height:90px;17 padding:0 28px;18 display:flex; align-items:center; justify-content:space-between;19 color:#1c1c1c;20 font-weight:600;21 font-size:38px;22 }23 .status-icons { display:flex; align-items:center; gap:26px; color:#444; }24 .dot { width:12px; height:12px; background:#777; border-radius:50%; }25 .wifi, .cell { width:34px; height:24px; border:2px solid #555; border-radius:4px; }26 .battery {27 width:70px; height:30px; border:3px solid #333; border-radius:6px; position:relative;28 }29 .battery::after { content:""; position:absolute; right:-10px; top:8px; width:8px; height:14px; background:#333; border-radius:2px; }30 .battery .level { position:absolute; left:2px; top:2px; right:2px; bottom:2px; background:#2ecc71; }31 .pct { font-size:30px; color:#333; margin-left:8px; }32 /* Header */33 .header {34 padding:18px 32px 8px 32px;35 display:flex; align-items:center; justify-content:space-between;36 border-bottom:1px solid #f0f0f0;37 }38 .title { font-size:58px; font-weight:700; }39 .hdr-actions { display:flex; align-items:center; gap:34px; }40 .icon-btn { width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#2f6cff; }41 /* Profile area */42 .profile {43 padding:30px 32px 14px 32px;44 display:flex; gap:28px; align-items:center;45 }46 .avatar {47 width:190px; height:190px; border-radius:100px; background:#5b443c;48 display:flex; align-items:center; justify-content:center;49 color:#fff; font-size:90px; font-weight:700;50 }51 .name-wrap { flex:1; }52 .name { font-size:58px; font-weight:700; margin-bottom:10px; }53 .pin { display:inline-flex; align-items:center; gap:10px; color:#9aa3ad; font-size:32px; }54 /* Friends */55 .friends {56 padding:16px 32px;57 }58 .friends h3 { margin:0 0 16px 0; font-size:42px; font-weight:700; }59 .pill {60 display:inline-flex; align-items:center; justify-content:center;61 padding:26px 30px;62 background:#e6eaef; color:#5e6a75;63 border-radius:38px; font-size:36px;64 }65 /* Tabs */66 .tabs { display:flex; gap:48px; padding:22px 32px 0 32px; border-bottom:1px solid #e9eef6;}67 .tab { padding:20px 0; font-size:38px; color:#4c6fbf; }68 .tab.inactive { color:#7c8794; }69 .tab.active { font-weight:700; position:relative; }70 .tab.active::after {71 content:""; position:absolute; left:0; right:0; bottom:-2px; height:8px; border-radius:4px; background:#3478f6;72 }73 /* Content section */74 .section { padding:30px 32px; }75 .section h2 { font-size:44px; margin:6px 0 20px 0; }76 .lang-row { display:flex; align-items:center; gap:16px; color:#2b2f36; font-size:44px; }77 .flag {78 width:48px; height:48px; border-radius:50%;79 background:linear-gradient(180deg,#1fa64a 0 50%, #1fa64a 50% 100%);80 border:2px solid #0a8c36; position:relative;81 }82 .flag::after{ content:""; position:absolute; left:12px; top:12px; width:24px; height:24px; background:#f2c400; transform:rotate(45deg); }83 /* Progress circle */84 .gauge-wrap { display:flex; justify-content:center; margin:24px 0; }85 .gauge {86 width:610px; height:610px; border-radius:50%;87 background: conic-gradient(#dce7ff 0deg, #dce7ff 350deg, #6ea1ff 350deg 360deg);88 display:flex; align-items:center; justify-content:center;89 padding:22px;90 }91 .gauge-inner {92 width:100%; height:100%; border-radius:50%; background:#ffffff;93 border:20px solid #edf2ff;94 display:flex; align-items:center; justify-content:center; flex-direction:column;95 }96 .gauge-inner .percent { font-size:120px; font-weight:800; color:#222; }97 .subheadline {98 text-align:center; font-size:56px; font-weight:800; margin-top:18px;99 }100 /* Stats row */101 .stats {102 display:flex; justify-content:space-between; padding:22px 50px; margin-top:12px;103 }104 .stat {105 width:48%;106 border-top:1px solid #e7eef7;107 padding-top:24px;108 display:flex; align-items:center; justify-content:space-between;109 }110 .stat .label { color:#2a2f36; font-size:40px; }111 .stat .count { font-size:56px; font-weight:800; display:flex; align-items:center; gap:14px; }112 .green { color:#1ea94a; }113 .red { color:#e55252; }114 /* Days learned */115 .days { padding:30px 32px 0 32px; }116 .days h3 { font-size:48px; margin:0 0 24px 0; }117 .circles { display:flex; gap:40px; align-items:center; }118 .day {119 display:flex; align-items:center; flex-direction:column; gap:10px;120 width:100px;121 }122 .dot-circle {123 width:86px; height:86px; border-radius:50%;124 background:#e9eff6; border:2px solid #d5deea;125 display:flex; align-items:center; justify-content:center; color:#9aa5b5; font-size:50px;126 }127 .dot-circle.ok {128 background:#1ea94a; border-color:#188b3c; color:#fff;129 }130 .day span { font-size:34px; color:#677280; }131 /* Bottom navigation */132 .bottom-nav {133 position:absolute; left:0; right:0; bottom:80px;134 height:140px; border-top:1px solid #e8edf6;135 display:flex; align-items:center; justify-content:space-around;136 background:#ffffff;137 }138 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#8a96a8; font-size:30px; }139 .nav-item.active { color:#2f6cff; font-weight:700; }140 /* Gesture bar */141 .gesture {142 position:absolute; left:50%; transform:translateX(-50%);143 bottom:20px; width:500px; height:12px; background:#1a1a1a; border-radius:8px;144 }145 /* Small helpers for SVG sizing */146 svg { display:block; }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Status bar -->153 <div class="statusbar">154 <div class="time">6:11</div>155 <div class="status-icons">156 <div class="dot"></div>157 <div class="dot"></div>158 <div class="wifi"></div>159 <div class="cell"></div>160 <div style="display:flex; align-items:center;">161 <div class="battery"><div class="level"></div></div>162 <div class="pct">100%</div>163 </div>164 </div>165 </div>166 167 <!-- Header -->168 <div class="header">169 <div class="title">Profile</div>170 <div class="hdr-actions">171 <div class="icon-btn" title="add friend">172 <!-- person add icon -->173 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">174 <path d="M15.5 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" stroke="#2f6cff" stroke-width="2"/>175 <path d="M3 20c.5-3.5 4-6 7.5-6s7 2.5 7.5 6" stroke="#2f6cff" stroke-width="2" stroke-linecap="round"/>176 <path d="M18 7v6M15 10h6" stroke="#2f6cff" stroke-width="2" stroke-linecap="round"/>177 </svg>178 </div>179 <div class="icon-btn" title="settings">180 <!-- sliders icon -->181 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">182 <path d="M4 6h8M14 6h6M4 12h4M10 12h10M4 18h12M18 18h2" stroke="#2f6cff" stroke-width="2" stroke-linecap="round"/>183 <circle cx="12" cy="6" r="2.2" stroke="#2f6cff" stroke-width="2"/>184 <circle cx="8" cy="12" r="2.2" stroke="#2f6cff" stroke-width="2"/>185 <circle cx="16" cy="18" r="2.2" stroke="#2f6cff" stroke-width="2"/>186 </svg>187 </div>188 </div>189 </div>190 191 <!-- Profile info -->192 <div class="profile">193 <div class="avatar">F</div>194 <div class="name-wrap">195 <div class="name">Fabio Teixeira</div>196 <div class="pin">197 <!-- pin icon -->198 <svg width="26" height="26" viewBox="0 0 24 24" fill="none">199 <path d="M12 22s7-7.2 7-12a7 7 0 1 0-14 0c0 4.8 7 12 7 12Z" stroke="#9aa3ad" stroke-width="2"/>200 <circle cx="12" cy="10" r="2.8" stroke="#9aa3ad" stroke-width="2"/>201 </svg>202 <span> </span>203 </div>204 </div>205 </div>206 207 <!-- Friends -->208 <div class="friends">209 <h3>Friends (0)</h3>210 <div class="pill">Find Portuguese speakers</div>211 </div>212 213 <!-- Tabs -->214 <div class="tabs">215 <div class="tab active">PROGRESS</div>216 <div class="tab inactive">EXERCISES</div>217 <div class="tab inactive">CORRECTIONS</div>218 </div>219 220 <!-- Progress section -->221 <div class="section">222 <h2>Fluency</h2>223 <div class="lang-row">224 <div class="flag" aria-hidden="true"></div>225 <div>Portuguese</div>226 </div>227 228 <div class="gauge-wrap">229 <div class="gauge">230 <div class="gauge-inner">231 <div class="percent">1%</div>232 </div>233 </div>234 </div>235 236 <div class="subheadline">Fluent in Portuguese</div>237 238 <div class="stats">239 <div class="stat">240 <div class="label">Words learned</div>241 <div class="count green">242 <!-- trending icon -->243 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">244 <path d="M3 17l6-6 4 4 7-7" stroke="#1ea94a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>245 </svg>246 0247 </div>248 </div>249 <div class="stat">250 <div class="label">Certificates</div>251 <div class="count red">252 <!-- award badge -->253 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">254 <path d="M12 3a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z" stroke="#e55252" stroke-width="2"/>255 <path d="M8 15v6l4-2 4 2v-6" stroke="#e55252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>256 </svg>257 0258 </div>259 </div>260 </div>261 </div>262 263 <!-- Days learned -->264 <div class="days">265 <h3>Days learned</h3>266 <div class="circles">267 <div class="day">268 <div class="dot-circle ok">269 <!-- check -->270 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">271 <path d="M5 12l4 4 10-10" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>272 </svg>273 </div>274 <span>Fri</span>275 </div>276 <div class="day">277 <div class="dot-circle"></div>278 <span>Sat</span>279 </div>280 <div class="day">281 <div class="dot-circle"></div>282 <span>Sun</span>283 </div>284 <div class="day">285 <div class="dot-circle"></div>286 <span>Mon</span>287 </div>288 <div class="day">289 <div class="dot-circle"></div>290 <span>Tue</span>291 </div>292 <div class="day">293 <div class="dot-circle"></div>294 <span>Wed</span>295 </div>296 <div class="day">297 <div class="dot-circle"></div>298 <span>Thu</span>299 </div>300 </div>301 </div>302 303 <!-- Bottom navigation -->304 <div class="bottom-nav">305 <div class="nav-item">306 <!-- book -->307 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">308 <path d="M4 5h10a3 3 0 0 1 3 3v11H7a3 3 0 0 0-3 3V5Z" stroke="#8a96a8" stroke-width="2"/>309 <path d="M17 7h3v12" stroke="#8a96a8" stroke-width="2"/>310 </svg>311 </div>312 <div class="nav-item">313 <!-- analytics bars -->314 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">315 <path d="M4 20V9M10 20V4M16 20v-8M22 20V7" stroke="#8a96a8" stroke-width="2" stroke-linecap="round"/>316 </svg>317 </div>318 <div class="nav-item">319 <!-- crown -->320 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">321 <path d="M3 18l2-8 5 4 4-6 5 10H3Z" stroke="#8a96a8" stroke-width="2" stroke-linejoin="round"/>322 </svg>323 </div>324 <div class="nav-item">325 <!-- chat -->326 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">327 <path d="M4 5h16v10H8l-4 4V5Z" stroke="#8a96a8" stroke-width="2" stroke-linejoin="round"/>328 </svg>329 </div>330 <div class="nav-item active">331 <!-- user -->332 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">333 <circle cx="12" cy="7" r="4" stroke="#2f6cff" stroke-width="2"/>334 <path d="M4 21c1-4 4-6 8-6s7 2 8 6" stroke="#2f6cff" stroke-width="2" stroke-linecap="round"/>335 </svg>336 <div>Me</div>337 </div>338 </div>339 340 <div class="gesture"></div>341</div>342</body>343</html>