GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Replica</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #FFFFFF;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 90px;25 padding: 0 36px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #E0E0E0;31 font-size: 30px;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 24px;38 }39 .icon {40 width: 36px; height: 36px;41 }42 43 /* Top actions */44 .top-actions {45 position: absolute;46 top: 110px;47 left: 36px;48 right: 36px;49 display: flex;50 align-items: center;51 justify-content: space-between;52 }53 .home-btn { display: flex; align-items: center; gap: 10px; }54 .circle-avatar {55 width: 72px; height: 72px; border-radius: 50%;56 background: #D3542F; display: flex; align-items: center; justify-content: center;57 font-weight: bold; color: #fff; font-size: 36px;58 }59 .notif-pill {60 width: 60px; height: 60px; border-radius: 16px; border: 2px solid #555; color: #fff;61 display: flex; align-items: center; justify-content: center; font-size: 32px;62 background: #1E1E1E;63 }64 .dots {65 width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;66 }67 68 /* Logo */69 .logo {70 position: absolute;71 top: 250px;72 left: 36px;73 right: 36px;74 text-align: left;75 font-size: 112px;76 font-weight: 600;77 letter-spacing: 0.5px;78 }79 80 /* Search bar */81 .search-wrap {82 position: absolute;83 top: 440px;84 left: 36px;85 right: 36px;86 }87 .search-bar {88 height: 110px;89 border-radius: 55px;90 background: #2A2A2A;91 display: flex;92 align-items: center;93 padding: 0 28px;94 box-sizing: border-box;95 gap: 24px;96 }97 .search-placeholder {98 flex: 1;99 color: #B0BEC5;100 font-size: 38px;101 }102 .round-icon {103 width: 72px; height: 72px; border-radius: 36px; background: #3A3A3A;104 display: flex; align-items: center; justify-content: center;105 }106 107 /* Image placeholder utility */108 .img-ph {109 background: #E0E0E0;110 border: 1px solid #BDBDBD;111 display: flex;112 align-items: center;113 justify-content: center;114 color: #757575;115 text-align: center;116 font-size: 30px;117 }118 119 /* Topic tiles */120 .topics {121 position: absolute;122 top: 600px;123 left: 36px;124 right: 36px;125 display: flex;126 gap: 28px;127 }128 .topic {129 width: 200px;130 height: 200px;131 border-radius: 24px;132 overflow: hidden;133 background: #1E1E1E;134 }135 .topic .thumb { width: 100%; height: 100%; }136 .topic-label {137 position: absolute;138 margin-top: 160px;139 width: 200px;140 height: 40px;141 background: rgba(0,0,0,0.35);142 display: flex; align-items: center; justify-content: center;143 font-size: 28px;144 }145 146 /* App shortcuts row */147 .apps {148 position: absolute;149 top: 850px;150 left: 36px; right: 36px;151 display: flex; gap: 80px; align-items: center;152 }153 .app {154 width: 170px;155 display: flex; flex-direction: column; align-items: center; gap: 18px;156 }157 .app .icon-circle {158 width: 120px; height: 120px; border-radius: 60px; background: #2F2F2F;159 display: flex; align-items: center; justify-content: center; color: #B0BEC5; font-size: 40px;160 }161 .app label {162 color: #CFCFCF; font-size: 28px; text-align: center;163 }164 165 /* Discover header */166 .discover {167 position: absolute;168 top: 1050px;169 left: 36px; right: 36px;170 display: flex; align-items: center; justify-content: space-between;171 }172 .discover-title { font-size: 40px; color: #EAEAEA; }173 .settings-btn { width: 60px; height: 60px; border-radius: 30px; background: #2A2A2A; display: flex; align-items: center; justify-content: center; }174 175 /* Article card */176 .card {177 position: absolute;178 top: 1120px;179 left: 36px; right: 36px;180 background: #1C1C1C; border-radius: 24px;181 padding: 28px; box-sizing: border-box;182 }183 .card-row { display: flex; align-items: flex-start; gap: 28px; }184 .card-text { flex: 1; }185 .card-title { font-size: 46px; line-height: 56px; color: #FFFFFF; margin-bottom: 24px; }186 .meta { display: flex; align-items: center; gap: 16px; color: #BDBDBD; font-size: 28px; }187 .site-chip {188 background: #FF6F00; color: #fff; font-weight: bold; font-size: 28px;189 padding: 8px 14px; border-radius: 12px;190 }191 .thumb-small { width: 240px; height: 200px; border-radius: 18px; overflow: hidden; }192 .card-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 24px; }193 194 /* Video card */195 .video-card {196 position: absolute;197 top: 1500px;198 left: 36px; right: 36px;199 background: #1C1C1C; border-radius: 24px; overflow: hidden;200 }201 .video-thumb { width: 100%; height: 500px; position: relative; }202 .play-btn {203 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);204 width: 120px; height: 120px; border-radius: 60px;205 background: rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center;206 }207 208 /* Bottom gesture bar */209 .gesture {210 position: absolute;211 bottom: 40px; left: 50%; transform: translateX(-50%);212 width: 300px; height: 16px; border-radius: 8px; background: #E6E6E6; opacity: 0.9;213 }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status Bar -->220 <div class="status-bar">221 <div>5:51</div>222 <div class="status-right">223 <!-- simple minimal icons -->224 <svg class="icon" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M12 2L3 9h3v9h5V13h2v5h5V9h3z"/></svg>225 <svg class="icon" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M12 4a8 8 0 100 16 8 8 0 000-16z"/></svg>226 <svg class="icon" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M4 4h16v2H4zm0 7h16v2H4zm0 7h16v2H4z"/></svg>227 <svg class="icon" viewBox="0 0 24 24"><path fill="#E0E0E0" d="M18 7H6a1 1 0 00-1 1v8h2V9h10v7h2V8a1 1 0 00-1-1zm-7 12h2v2h-2z"/></svg>228 </div>229 </div>230 231 <!-- Top actions row -->232 <div class="top-actions">233 <div class="home-btn">234 <svg width="48" height="48" viewBox="0 0 24 24">235 <path fill="#E0E0E0" d="M12 3l9 8h-2v9h-6v-6H11v6H5v-9H3z"/>236 </svg>237 </div>238 <div style="display:flex; align-items:center; gap:22px;">239 <div class="circle-avatar">C</div>240 <div class="notif-pill">1</div>241 <div class="dots">242 <svg width="36" height="36" viewBox="0 0 24 24">243 <circle cx="12" cy="5" r="2" fill="#E0E0E0"/>244 <circle cx="12" cy="12" r="2" fill="#E0E0E0"/>245 <circle cx="12" cy="19" r="2" fill="#E0E0E0"/>246 </svg>247 </div>248 </div>249 </div>250 251 <!-- Google Logo -->252 <div class="logo">Google</div>253 254 <!-- Search bar -->255 <div class="search-wrap">256 <div class="search-bar">257 <svg width="48" height="48" viewBox="0 0 24 24">258 <path fill="#B0BEC5" d="M10 2a8 8 0 105.3 14.3l4.2 4.2 1.4-1.4-4.2-4.2A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/>259 </svg>260 <div class="search-placeholder">Search or type web address</div>261 <div class="round-icon">262 <svg width="40" height="40" viewBox="0 0 24 24">263 <path fill="#E0E0E0" d="M12 3c1.7 0 3 1.3 3 3v5c0 1.5-1 2.7-2.3 3v3l-1.4 1-1.3-1v-3C10 13.7 9 12.5 9 11V6c0-1.7 1.3-3 3-3z"/>264 </svg>265 </div>266 <div class="round-icon">267 <svg width="40" height="40" viewBox="0 0 24 24">268 <path fill="#E0E0E0" d="M7 7h10l2 3v7a2 2 0 01-2 2H7a2 2 0 01-2-2V10l2-3zm5 3a3 3 0 100 6 3 3 0 000-6z"/>269 </svg>270 </div>271 </div>272 </div>273 274 <!-- Topics row -->275 <div class="topics">276 <div class="topic">277 <div class="img-ph thumb">[IMG: News]</div>278 <div class="topic-label">News</div>279 </div>280 <div class="topic">281 <div class="img-ph thumb">[IMG: Recipes]</div>282 <div class="topic-label">Recipes</div>283 </div>284 <div class="topic">285 <div class="img-ph thumb">[IMG: Electronics]</div>286 <div class="topic-label">Electronics</div>287 </div>288 <div class="topic">289 <div class="img-ph thumb">[IMG: Health]</div>290 <div class="topic-label">Health</div>291 </div>292 <div class="topic">293 <div class="img-ph thumb">[IMG: Music]</div>294 <div class="topic-label">Music</div>295 </div>296 </div>297 298 <!-- App shortcuts -->299 <div class="apps">300 <div class="app">301 <div class="icon-circle">G</div>302 <label>Google Take...</label>303 </div>304 <div class="app">305 <div class="icon-circle">🔎</div>306 <label>flag list</label>307 </div>308 <div class="app">309 <div class="icon-circle">f</div>310 <label>Facebook</label>311 </div>312 <div class="app">313 <div class="icon-circle">cb</div>314 <label>Cricbuzz...</label>315 </div>316 </div>317 318 <!-- Discover header -->319 <div class="discover">320 <div class="discover-title">Discover</div>321 <div class="settings-btn">322 <svg width="36" height="36" viewBox="0 0 24 24">323 <path fill="#E0E0E0" d="M12 8a4 4 0 100 8 4 4 0 000-8zm8.7 4a7.7 7.7 0 00-.3-1.7l2-1.6-2-3.4-2.4.8a7.9 7.9 0 00-1.5-1l-.3-2.5H9.8l-.3 2.5c-.6.2-1.1.6-1.6 1l-2.4-.8-2 3.4 2 1.6c-.1.5-.2 1.1-.2 1.7s.1 1.2.2 1.7l-2 1.6 2 3.4 2.4-.8c.5.4 1 .8 1.6 1l.3 2.5h4.6l.3-2.5c.5-.2 1-.6 1.5-1l2.4.8 2-3.4-2-1.6c.2-.5.3-1.1.3-1.7z"/>324 </svg>325 </div>326 </div>327 328 <!-- Article card -->329 <div class="card">330 <div class="card-row">331 <div class="card-text">332 <div class="card-title">Google Camera app gets major UI overhaul with new features</div>333 <div class="meta">334 <span class="site-chip">91</span>335 <span>91mobiles.com · 4h</span>336 </div>337 </div>338 <div class="thumb-small">339 <div class="img-ph" style="width:100%; height:100%;">[IMG: Camera App UI]</div>340 </div>341 </div>342 <div class="card-actions">343 <svg width="40" height="40" viewBox="0 0 24 24">344 <path fill="#BDBDBD" d="M18 8l-6-4v3H6v2h6v3l6-4zM6 14h12v2H6v-2z"/>345 </svg>346 <svg width="40" height="40" viewBox="0 0 24 24">347 <path fill="#BDBDBD" d="M12 8a2 2 0 100 4 2 2 0 000-4zm0-6a6 6 0 010 12 6 6 0 010-12zm0 14a8 8 0 018 8H4a8 8 0 018-8z"/>348 </svg>349 </div>350 </div>351 352 <!-- Video card -->353 <div class="video-card">354 <div class="video-thumb">355 <div class="img-ph" style="width:100%; height:100%;">[IMG: Video Preview - Task 1]</div>356 <div class="play-btn">357 <svg width="56" height="56" viewBox="0 0 24 24">358 <path fill="#000" d="M8 5v14l11-7z"/>359 </svg>360 </div>361 </div>362 </div>363 364 <!-- Bottom gesture bar -->365 <div class="gesture"></div>366</div>367</body>368</html>