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>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121314;15 color: #EDEDED;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 92px;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: 34px;32 letter-spacing: 0.5px;33 }34 .sb-left, .sb-right {35 display: flex;36 align-items: center;37 gap: 16px;38 }39 .sb-right svg, .sb-left svg { opacity: 0.9; }40 41 /* Top action row */42 .top-actions {43 position: absolute;44 top: 110px;45 left: 32px;46 right: 32px;47 height: 72px;48 display: flex;49 align-items: center;50 justify-content: space-between;51 }52 .home-icon {53 width: 56px; height: 56px;54 display: flex; align-items: center; justify-content: center;55 border-radius: 14px;56 background: transparent;57 }58 .ta-right {59 display: flex; align-items: center; gap: 18px;60 }61 .avatar {62 width: 56px; height: 56px; border-radius: 50%;63 background: #C24C2E; display: flex; align-items: center; justify-content: center;64 font-weight: 600; color: #fff; font-size: 28px;65 }66 .notif-badge {67 width: 56px; height: 56px; border-radius: 12px;68 border: 2px solid #62666a; color: #E0E0E0;69 display: flex; align-items: center; justify-content: center;70 font-weight: 600; font-size: 28px;71 }72 .icon-btn {73 width: 56px; height: 56px; border-radius: 50%;74 display: flex; align-items: center; justify-content: center;75 }76 77 /* Google logo text */78 .logo {79 position: absolute;80 top: 220px;81 left: 54px;82 font-size: 140px;83 font-weight: 700;84 letter-spacing: 0.5px;85 color: #FFFFFF;86 }87 88 /* Search bar */89 .search {90 position: absolute;91 top: 380px;92 left: 40px;93 width: 1000px;94 height: 120px;95 background: #2A2E31;96 border-radius: 64px;97 display: flex; align-items: center;98 padding: 0 20px 0 32px;99 box-sizing: border-box;100 color: #C9CFD4;101 font-size: 42px;102 }103 .search .left {104 display: flex; align-items: center; gap: 22px; flex: 1;105 }106 .search-placeholder { opacity: 0.9; }107 .search .right {108 display: flex; align-items: center; gap: 18px;109 }110 .chip {111 width: 96px; height: 96px; border-radius: 50%;112 background: #3A3F43; display: flex; align-items: center; justify-content: center;113 }114 115 /* Top site cards */116 .site-cards {117 position: absolute;118 top: 530px;119 left: 40px;120 right: 40px;121 display: grid;122 grid-template-columns: repeat(4, 1fr);123 gap: 26px;124 }125 .card-img {126 height: 210px; border-radius: 24px; overflow: hidden;127 border: 1px solid #BDBDBD; background: #E0E0E0;128 display: flex; align-items: center; justify-content: center;129 color: #555; font-size: 34px;130 }131 .card-label {132 margin-top: 12px; font-size: 34px; color: #D9D9D9;133 }134 135 /* App shortcuts row */136 .apps-row {137 position: absolute;138 top: 840px;139 left: 40px;140 right: 40px;141 display: grid;142 grid-template-columns: repeat(4, 1fr);143 gap: 26px;144 text-align: center;145 }146 .app {147 display: flex; flex-direction: column; align-items: center; gap: 18px;148 }149 .app-icon {150 width: 132px; height: 132px; border-radius: 50%;151 background: #2A2E31;152 display: flex; align-items: center; justify-content: center;153 color: #DDE2E6; font-weight: 700; font-size: 44px;154 }155 .app span { font-size: 32px; color: #C7C7C7; }156 157 /* Discover */158 .discover-header {159 position: absolute;160 top: 1140px;161 left: 40px;162 right: 40px;163 display: flex; align-items: center; justify-content: space-between;164 }165 .discover-header h3 {166 margin: 0; font-size: 44px; color: #DADADA; font-weight: 600;167 }168 .settings-btn { width: 60px; height: 60px; border-radius: 50%; display: flex;169 align-items: center; justify-content: center; }170 171 /* News card */172 .news-card {173 position: absolute;174 top: 1208px;175 left: 40px;176 width: 1000px;177 background: #1C1F22;178 border-radius: 20px;179 padding: 28px;180 box-sizing: border-box;181 }182 .news-top {183 display: flex; align-items: flex-start; gap: 24px;184 }185 .news-text { flex: 1; }186 .news-title {187 font-size: 50px; line-height: 1.2; color: #F1F1F1; margin: 0 0 18px 0;188 }189 .news-meta {190 display: flex; align-items: center; gap: 12px; color: #ACB3B8; font-size: 28px;191 }192 .news-thumb {193 width: 260px; height: 180px;194 background: #E0E0E0; border: 1px solid #BDBDBD;195 border-radius: 16px; display: flex; align-items: center; justify-content: center;196 color: #555; font-size: 30px;197 }198 .news-actions {199 margin-top: 12px; display: flex; justify-content: flex-end; gap: 20px;200 }201 202 /* Large media card (preview of next item) */203 .media-card {204 position: absolute;205 top: 1550px;206 left: 40px;207 width: 1000px;208 height: 420px;209 background: #1C1F22;210 border-radius: 20px;211 padding: 20px;212 box-sizing: border-box;213 display: flex; align-items: center; justify-content: center;214 }215 .media-placeholder {216 width: 100%; height: 100%;217 background: #E0E0E0; border: 1px solid #BDBDBD;218 border-radius: 16px; display: flex; align-items: center; justify-content: center;219 color: #555; font-size: 36px;220 }221 222 /* Home indicator */223 .home-indicator {224 position: absolute;225 bottom: 28px;226 left: 50%;227 transform: translateX(-50%);228 width: 340px; height: 10px; border-radius: 8px;229 background: #E5E5E5; opacity: 0.95;230 }231 232 /* Helpers: small site icon */233 .site-icon {234 width: 40px; height: 40px; border-radius: 8px;235 background: #111; border: 1px solid #333;236 display: inline-flex; align-items: center; justify-content: center;237 color: #F44336; font-weight: 800; font-size: 24px;238 }239</style>240</head>241<body>242<div id="render-target">243 244 <!-- Status Bar -->245 <div class="status-bar">246 <div class="sb-left">247 <div>6:28</div>248 <div>17°</div>249 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">250 <circle cx="12" cy="13" r="8"></circle>251 <path d="M12 9v4l3 2"></path>252 </svg>253 </div>254 <div class="sb-right">255 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">256 <path d="M2 8c5-6 15-6 20 0"></path>257 <path d="M5 12c4-4 10-4 14 0"></path>258 <path d="M8 16c3-3 5-3 8 0"></path>259 <circle cx="12" cy="20" r="1.5" fill="#E0E0E0" stroke="none"></circle>260 </svg>261 <svg width="40" height="34" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">262 <rect x="3" y="6" width="16" height="12" rx="2"></rect>263 <rect x="19" y="10" width="2" height="4"></rect>264 </svg>265 </div>266 </div>267 268 <!-- Top actions -->269 <div class="top-actions">270 <div class="home-icon">271 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#D9D9D9" stroke-width="2">272 <path d="M3 11l9-7 9 7"></path>273 <path d="M5 10v9h5v-6h4v6h5v-9"></path>274 </svg>275 </div>276 <div class="ta-right">277 <div class="avatar">C</div>278 <div class="notif-badge">1</div>279 <div class="icon-btn">280 <svg width="40" height="40" viewBox="0 0 24 24" fill="#D9D9D9">281 <circle cx="12" cy="5" r="2"></circle>282 <circle cx="12" cy="12" r="2"></circle>283 <circle cx="12" cy="19" r="2"></circle>284 </svg>285 </div>286 </div>287 </div>288 289 <!-- Google Logo -->290 <div class="logo">Google</div>291 292 <!-- Search Bar -->293 <div class="search">294 <div class="left">295 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#C9CFD4" stroke-width="2">296 <circle cx="11" cy="11" r="7"></circle>297 <path d="M20 20l-4.5-4.5"></path>298 </svg>299 <div class="search-placeholder">Search or type web address</div>300 </div>301 <div class="right">302 <div class="chip">303 <svg width="36" height="36" viewBox="0 0 24 24" fill="#DADFE3">304 <path d="M12 3a4 4 0 0 0-4 4v4a4 4 0 0 0 3 3.87V20a1 1 0 0 0 2 0v-5.13A4 4 0 0 0 16 11V7a4 4 0 0 0-4-4z"></path>305 </svg>306 </div>307 <div class="chip">308 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#DADFE3" stroke-width="2">309 <rect x="3" y="6" width="18" height="12" rx="3"></rect>310 <circle cx="12" cy="12" r="3"></circle>311 </svg>312 </div>313 </div>314 </div>315 316 <!-- Top site cards -->317 <div class="site-cards">318 <div>319 <div class="card-img">[IMG: News photo]</div>320 <div class="card-label">News</div>321 </div>322 <div>323 <div class="card-img">[IMG: Recipes]</div>324 <div class="card-label">Recipes</div>325 </div>326 <div>327 <div class="card-img">[IMG: Government building]</div>328 <div class="card-label">Kevin McCarthy</div>329 </div>330 <div>331 <div class="card-img">[IMG: Weather sky]</div>332 <div class="card-label">Weather</div>333 </div>334 </div>335 336 <!-- App shortcuts row -->337 <div class="apps-row">338 <div class="app">339 <div class="app-icon">f</div>340 <span>Facebook</span>341 </div>342 <div class="app">343 <div class="app-icon">cb</div>344 <span>Cricbuzz.c…</span>345 </div>346 <div class="app">347 <div class="app-icon">348 <svg width="66" height="66" viewBox="0 0 24 24" fill="#E74C3C">349 <rect x="3" y="5" width="18" height="14" rx="3"></rect>350 <polygon points="10,9 16,12 10,15" fill="#fff"></polygon>351 </svg>352 </div>353 <span>YouTube</span>354 </div>355 <div class="app">356 <div class="app-icon">W</div>357 <span>Wikipedia</span>358 </div>359 </div>360 361 <!-- Discover header -->362 <div class="discover-header">363 <h3>Discover</h3>364 <div class="settings-btn">365 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#D9D9D9" stroke-width="2">366 <circle cx="12" cy="12" r="3"></circle>367 <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V22a2 2 0 1 1-4 0v-.07a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 1 1 0-4h.07a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 6.02 3.3l.06.06a1.65 1.65 0 0 0 1.82.33H8a1.65 1.65 0 0 0 1-1.51V2a2 2 0 1 1 4 0v.07a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06A2 2 0 1 1 22 6.02l-.06.06a1.65 1.65 0 0 0-.33 1.82V8c0 .65.38 1.25.98 1.51"></path>368 </svg>369 </div>370 </div>371 372 <!-- News card -->373 <div class="news-card">374 <div class="news-top">375 <div class="news-text">376 <h4 class="news-title">OnePlus will release a red version of the OnePlus 11R outside of China</h4>377 <div class="news-meta">378 <span class="site-icon">g9</span>379 <span>Gagadget.com · 2d</span>380 </div>381 </div>382 <div class="news-thumb">[IMG: Red OnePlus 11R]</div>383 </div>384 <div class="news-actions">385 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#C9CFD4" stroke-width="2">386 <circle cx="18" cy="5" r="3"></circle>387 <circle cx="6" cy="12" r="3"></circle>388 <circle cx="18" cy="19" r="3"></circle>389 <path d="M8.59 13.51l6.83 3.98"></path>390 <path d="M15.41 6.51L8.59 10.49"></path>391 </svg>392 <svg width="40" height="40" viewBox="0 0 24 24" fill="#C9CFD4">393 <circle cx="12" cy="5" r="2"></circle>394 <circle cx="12" cy="12" r="2"></circle>395 <circle cx="12" cy="19" r="2"></circle>396 </svg>397 </div>398 </div>399 400 <!-- Large media card -->401 <div class="media-card">402 <div class="media-placeholder">[IMG: Smartphones photo]</div>403 </div>404 405 <!-- Home indicator -->406 <div class="home-indicator"></div>407</div>408</body>409</html>