GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Profile Screen Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #F7F9FC;14 }15 16 /* Top system/status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #2FA1E2;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 }30 .status-left { font-size: 40px; letter-spacing: 1px; }31 .status-right {32 margin-left: auto;33 display: flex;34 gap: 22px;35 align-items: center;36 }37 .status-dot {38 width: 28px; height: 28px; background:#fff; border-radius:50%; opacity:0.9;39 }40 41 /* App bar */42 .app-bar {43 position: absolute;44 top: 120px;45 left: 0;46 width: 1080px;47 height: 140px;48 background: #3CB0E7;49 color: #fff;50 display: flex;51 align-items: center;52 padding: 0 24px 0 16px;53 box-sizing: border-box;54 }55 .icon-btn {56 width: 112px;57 height: 112px;58 display: flex;59 align-items: center;60 justify-content: center;61 }62 .title {63 font-size: 68px;64 font-weight: 600;65 margin-left: 8px;66 }67 .spacer { flex: 1; }68 69 /* Profile header section */70 .profile-header {71 position: absolute;72 top: 260px;73 left: 0;74 width: 1080px;75 background: #fff;76 padding: 40px 36px 20px 36px;77 box-sizing: border-box;78 border-bottom: 1px solid #E5E8EC;79 }80 .profile-top {81 display: flex;82 align-items: center;83 gap: 36px;84 }85 .avatar {86 width: 206px;87 height: 206px;88 border-radius: 50%;89 background: #E0E0E0;90 border: 2px solid #BDBDBD;91 display: flex;92 align-items: center;93 justify-content: center;94 color: #6D6D6D;95 font-size: 28px;96 text-align: center;97 line-height: 1.1;98 padding: 10px;99 box-sizing: border-box;100 }101 .stats-follow {102 display: flex;103 align-items: center;104 gap: 26px;105 flex-wrap: wrap;106 }107 .stat-card {108 width: 210px;109 height: 140px;110 background: #F7FAFF;111 border-radius: 12px;112 border: 1px solid #D9E4EE;113 display: flex;114 flex-direction: column;115 align-items: center;116 justify-content: center;117 }118 .stat-num { font-size: 56px; font-weight: 700; color: #37474F; line-height: 1; }119 .stat-label { font-size: 30px; color: #607D8B; margin-top: 8px; }120 121 .follow-btn {122 height: 110px;123 padding: 0 36px;124 background: #9CD56C;125 border-radius: 12px;126 color: #fff;127 font-weight: 700;128 font-size: 38px;129 display: flex;130 align-items: center;131 gap: 16px;132 border: none;133 }134 .check {135 width: 44px; height: 44px; background: #fff; color: #74B64D;136 border-radius: 50%; display: flex; align-items: center; justify-content: center;137 }138 139 .profile-name {140 margin-top: 28px;141 font-size: 56px;142 color: #1F2D3D;143 font-weight: 700;144 }145 .profile-sub {146 margin-top: 12px;147 font-size: 36px;148 color: #607D8B;149 }150 151 /* Videos section */152 .content {153 position: absolute;154 top: 620px;155 left: 0;156 width: 1080px;157 padding: 14px 0 0 0;158 box-sizing: border-box;159 }160 .section-title {161 padding: 0 36px 12px 36px;162 font-size: 58px;163 font-weight: 800;164 color: #1F2D3D;165 }166 167 .video-list { width: 1080px; }168 .video-item {169 display: flex;170 position: relative;171 padding: 24px 36px;172 gap: 28px;173 background: #fff;174 border-top: 1px solid #EBEFF3;175 }176 .thumb {177 width: 340px;178 height: 190px;179 background: #E0E0E0;180 border: 1px solid #BDBDBD;181 display: flex;182 align-items: center;183 justify-content: center;184 color: #6D6D6D;185 font-size: 26px;186 text-align: center;187 position: relative;188 }189 .time-badge {190 position: absolute;191 right: 16px;192 bottom: 18px;193 background: rgba(0,0,0,0.75);194 color: #fff;195 padding: 6px 10px;196 font-size: 26px;197 border-radius: 6px;198 }199 .v-meta { flex: 1; }200 .v-title {201 font-size: 44px;202 color: #1E2A33;203 font-weight: 700;204 line-height: 1.25;205 }206 .v-author {207 margin-top: 10px;208 font-size: 34px;209 color: #607D8B;210 }211 .v-stats {212 margin-top: 10px;213 font-size: 30px;214 color: #7E8A93;215 }216 .kebab {217 width: 56px;218 height: 56px;219 display: flex; align-items: center; justify-content: center;220 position: absolute; right: 24px; top: 36px;221 }222 .divider-end { height: 24px; background: #fff; }223 224 /* Helper to emulate bottom safe area shadow line */225 .bottom-bar {226 position: absolute;227 bottom: 0; left: 0; width: 1080px; height: 60px;228 background: #F7F9FC;229 }230</style>231</head>232<body>233<div id="render-target">234 235 <!-- Status bar -->236 <div class="status-bar">237 <div class="status-left">9:11</div>238 <div class="status-right">239 <div class="status-dot" title="signal"></div>240 <div class="status-dot" title="wifi"></div>241 <div class="status-dot" title="battery"></div>242 </div>243 </div>244 245 <!-- App bar with back arrow and kebab -->246 <div class="app-bar">247 <div class="icon-btn" aria-label="Back">248 <svg width="60" height="60" viewBox="0 0 24 24" fill="#FFFFFF">249 <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z"/>250 </svg>251 </div>252 <div class="title">Profile</div>253 <div class="spacer"></div>254 <div class="icon-btn" aria-label="More">255 <svg width="60" height="60" viewBox="0 0 24 24" fill="#FFFFFF">256 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>257 </svg>258 </div>259 </div>260 261 <!-- Profile header content -->262 <div class="profile-header">263 <div class="profile-top">264 <div class="avatar">[IMG: Avatar]</div>265 266 <div class="stats-follow">267 <div class="stat-card">268 <div class="stat-num">2</div>269 <div class="stat-label">followers</div>270 </div>271 <div class="stat-card">272 <div class="stat-num">0</div>273 <div class="stat-label">following</div>274 </div>275 <div class="stat-card">276 <div class="stat-num">0</div>277 <div class="stat-label">likes</div>278 </div>279 <button class="follow-btn">280 <span class="check">281 <svg width="28" height="28" viewBox="0 0 24 24" fill="#74B64D">282 <path d="M9 16.2l-3.5-3.5L4 14.2 9 19l12-12-1.5-1.5z"/>283 </svg>284 </span>285 FOLLOWING286 </button>287 </div>288 </div>289 290 <div class="profile-name">hafeez baig</div>291 <div class="profile-sub">freelance film maker</div>292 </div>293 294 <!-- Videos list -->295 <div class="content">296 <div class="section-title">11 Videos</div>297 298 <div class="video-list">299 <!-- Item 1 -->300 <div class="video-item">301 <div class="thumb">302 [IMG: Video thumbnail]303 <div class="time-badge">01:28</div>304 </div>305 <div class="v-meta">306 <div class="v-title">cadbury commercial TVC</div>307 <div class="v-author">hafeez baig</div>308 <div class="v-stats">75 views • 7 years ago</div>309 </div>310 <div class="kebab">311 <svg width="44" height="44" viewBox="0 0 24 24" fill="#607D8B">312 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>313 </svg>314 </div>315 </div>316 317 <!-- Item 2 -->318 <div class="video-item">319 <div class="thumb">320 [IMG: Video thumbnail]321 <div class="time-badge">00:32</div>322 </div>323 <div class="v-meta">324 <div class="v-title">Manzil e Lahasil -short film teaser</div>325 <div class="v-author">hafeez baig</div>326 <div class="v-stats">63 views • 7 years ago</div>327 </div>328 <div class="kebab">329 <svg width="44" height="44" viewBox="0 0 24 24" fill="#607D8B">330 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>331 </svg>332 </div>333 </div>334 335 <!-- Item 3 -->336 <div class="video-item">337 <div class="thumb">338 [IMG: Video thumbnail]339 <div class="time-badge">02:51</div>340 </div>341 <div class="v-meta">342 <div class="v-title">Adventure Pakistan</div>343 <div class="v-author">hafeez baig</div>344 <div class="v-stats">66 views • 6 years ago</div>345 </div>346 <div class="kebab">347 <svg width="44" height="44" viewBox="0 0 24 24" fill="#607D8B">348 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>349 </svg>350 </div>351 </div>352 353 <!-- Item 4 -->354 <div class="video-item">355 <div class="thumb">356 [IMG: Video thumbnail]357 <div class="time-badge">02:13</div>358 </div>359 <div class="v-meta">360 <div class="v-title">Rabba Mere Hal Da - Music Video</div>361 <div class="v-author">hafeez baig</div>362 <div class="v-stats">115 views • 6 years ago</div>363 </div>364 <div class="kebab">365 <svg width="44" height="44" viewBox="0 0 24 24" fill="#607D8B">366 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>367 </svg>368 </div>369 </div>370 371 <!-- Item 5 -->372 <div class="video-item">373 <div class="thumb">374 [IMG: Video thumbnail]375 <div class="time-badge">08:14</div>376 </div>377 <div class="v-meta">378 <div class="v-title">NIDANAAMA - Short Film</div>379 <div class="v-author">hafeez baig</div>380 <div class="v-stats">71 views • 6 years ago</div>381 </div>382 <div class="kebab">383 <svg width="44" height="44" viewBox="0 0 24 24" fill="#607D8B">384 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>385 </svg>386 </div>387 </div>388 389 <!-- Item 6 -->390 <div class="video-item">391 <div class="thumb">392 [IMG: Video thumbnail]393 <div class="time-badge">00:45</div>394 </div>395 <div class="v-meta">396 <div class="v-title">NIDANAAMA - Short Film Teaser</div>397 <div class="v-author">hafeez baig</div>398 <div class="v-stats">— • —</div>399 </div>400 <div class="kebab">401 <svg width="44" height="44" viewBox="0 0 24 24" fill="#607D8B">402 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>403 </svg>404 </div>405 </div>406 407 <div class="divider-end"></div>408 </div>409 </div>410 411 <div class="bottom-bar"></div>412</div>413</body>414</html>