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>Google Dark - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #E8EAED;16 font-family: Arial, Helvetica, sans-serif;17 }18 19 /* Top status bar */20 .status-bar {21 height: 110px;22 padding: 0 32px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #E8EAED;27 }28 .status-left { display: flex; align-items: center; gap: 16px; }29 .status-time { font-size: 40px; font-weight: 600; }30 .status-right { display: flex; align-items: center; gap: 28px; }31 32 /* Chrome toolbar */33 .chrome-bar {34 height: 140px;35 display: flex;36 align-items: center;37 gap: 24px;38 padding: 0 24px;39 border-top: 1px solid #1C1C1C;40 border-bottom: 1px solid #1C1C1C;41 }42 .icon-btn {43 width: 72px;44 height: 72px;45 display: inline-flex;46 align-items: center;47 justify-content: center;48 border-radius: 36px;49 color: #E8EAED;50 }51 .omnibox {52 flex: 1;53 height: 90px;54 border-radius: 45px;55 background: #1F1F1F;56 border: 1px solid #2A2A2A;57 display: flex;58 align-items: center;59 padding: 0 24px;60 gap: 18px;61 color: #B0B0B0;62 font-size: 34px;63 }64 .tab-chip {65 min-width: 66px;66 height: 66px;67 padding: 0 18px;68 border-radius: 33px;69 background: #2A2A2A;70 color: #E8EAED;71 display: inline-flex;72 align-items: center;73 justify-content: center;74 font-weight: 700;75 font-size: 30px;76 }77 78 /* Page header (Google tabs row) */79 .page-header {80 height: 120px;81 display: flex;82 align-items: center;83 padding: 0 24px;84 justify-content: space-between;85 border-bottom: 1px solid #1C1C1C;86 }87 .ph-left { display: flex; align-items: center; gap: 24px; }88 .ph-tabs { display: flex; align-items: center; gap: 36px; }89 .ph-tab {90 font-size: 34px;91 color: #9AA0A6;92 letter-spacing: 0.2px;93 }94 .ph-tab.active { color: #E8EAED; position: relative; }95 .ph-tab.active::after {96 content: "";97 position: absolute;98 left: 0; bottom: -20px;99 width: 60px; height: 6px;100 background: #8AB4F8;101 border-radius: 3px;102 }103 .ph-right { display: flex; align-items: center; gap: 24px; }104 .avatar {105 width: 64px; height: 64px;106 border-radius: 32px;107 background: #5C3CF0;108 display: flex; align-items: center; justify-content: center;109 font-weight: 700;110 }111 112 /* Google logo text */113 .logo {114 text-align: center;115 font-size: 160px;116 font-weight: 700;117 letter-spacing: -2px;118 margin-top: 60px;119 color: #E8EAED;120 }121 122 /* Search bar */123 .search-bar {124 width: 960px;125 height: 104px;126 margin: 40px auto 24px auto;127 background: #1F1F1F;128 border: 1px solid #2A2A2A;129 border-radius: 52px;130 display: flex;131 align-items: center;132 padding: 0 26px;133 gap: 20px;134 }135 .search-input {136 flex: 1;137 color: #9AA0A6;138 font-size: 36px;139 }140 .right-tools { display: flex; align-items: center; gap: 18px; }141 142 /* Languages */143 .languages {144 text-align: center;145 margin-top: 24px;146 color: #9AA0A6;147 font-size: 32px;148 }149 .lang-list {150 margin-top: 20px;151 display: flex;152 flex-wrap: wrap;153 gap: 26px;154 justify-content: center;155 color: #8AB4F8;156 font-size: 36px;157 }158 159 /* Trending section */160 .trending {161 margin: 80px 24px 0 24px;162 }163 .trend-header {164 display: flex; align-items: center; justify-content: space-between;165 margin-bottom: 24px;166 }167 .trend-title { font-size: 56px; font-weight: 600; }168 .trend-list {169 margin-top: 4px;170 border-top: 1px solid #2A2A2A;171 }172 .trend-item {173 display: flex;174 align-items: center;175 gap: 26px;176 height: 110px;177 border-bottom: 1px solid #2A2A2A;178 color: #E8EAED;179 font-size: 40px;180 }181 .trend-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }182 183 /* Bottom home indicator */184 .home-indicator {185 position: absolute;186 left: 50%;187 bottom: 40px;188 transform: translateX(-50%);189 width: 360px;190 height: 12px;191 background: #FFFFFF;192 border-radius: 6px;193 opacity: 0.8;194 }195 196 /* Simple SVG styling */197 svg { fill: none; stroke: #E8EAED; stroke-width: 3; }198 199</style>200</head>201<body>202<div id="render-target">203 204 <!-- Status bar -->205 <div class="status-bar">206 <div class="status-left">207 <div class="status-time">9:11</div>208 </div>209 <div class="status-right">210 <!-- Wi-Fi -->211 <svg width="44" height="44" viewBox="0 0 24 24">212 <path d="M2 8c5-4 15-4 20 0M5 11c3-2 11-2 14 0M8 14c2-1 6-1 8 0"/>213 <circle cx="12" cy="18" r="1.8" fill="#E8EAED" stroke="none"></circle>214 </svg>215 <!-- Battery -->216 <svg width="52" height="44" viewBox="0 0 28 24">217 <rect x="1" y="5" width="22" height="14" rx="2"></rect>218 <rect x="24" y="9" width="3" height="6" rx="1"></rect>219 <rect x="3" y="7" width="16" height="10" rx="1" fill="#E8EAED" stroke="none"></rect>220 </svg>221 </div>222 </div>223 224 <!-- Chrome toolbar -->225 <div class="chrome-bar">226 <!-- Home icon -->227 <div class="icon-btn">228 <svg width="40" height="40" viewBox="0 0 24 24">229 <path d="M3 10.5l9-7 9 7M6 10v9h12v-9"></path>230 </svg>231 </div>232 233 <!-- Omnibox -->234 <div class="omnibox">235 <svg width="40" height="40" viewBox="0 0 24 24">236 <circle cx="12" cy="10" r="5"></circle>237 <path d="M20 20l-4.5-4.5"></path>238 </svg>239 <div class="search-input">google.com/?sa=X&ved=</div>240 </div>241 242 <!-- Plus -->243 <div class="icon-btn">244 <svg width="40" height="40" viewBox="0 0 24 24">245 <path d="M12 5v14M5 12h14"></path>246 </svg>247 </div>248 249 <!-- Tabs count -->250 <div class="tab-chip">2</div>251 252 <!-- Kebab menu -->253 <div class="icon-btn">254 <svg width="10" height="40" viewBox="0 0 4 24">255 <circle cx="2" cy="5" r="1.2" fill="#E8EAED" stroke="none"></circle>256 <circle cx="2" cy="12" r="1.2" fill="#E8EAED" stroke="none"></circle>257 <circle cx="2" cy="19" r="1.2" fill="#E8EAED" stroke="none"></circle>258 </svg>259 </div>260 </div>261 262 <!-- Page header -->263 <div class="page-header">264 <div class="ph-left">265 <!-- Hamburger -->266 <div class="icon-btn" style="width:60px;height:60px;">267 <svg width="36" height="36" viewBox="0 0 24 24">268 <path d="M3 6h18M3 12h18M3 18h18"></path>269 </svg>270 </div>271 <div class="ph-tabs">272 <div class="ph-tab active">ALL</div>273 <div class="ph-tab">IMAGES</div>274 </div>275 </div>276 <div class="ph-right">277 <!-- Grid/app icon -->278 <div class="icon-btn" style="width:60px;height:60px;">279 <svg width="34" height="34" viewBox="0 0 24 24">280 <rect x="3" y="3" width="4" height="4" fill="#E8EAED" stroke="none"></rect>281 <rect x="10" y="3" width="4" height="4" fill="#E8EAED" stroke="none"></rect>282 <rect x="17" y="3" width="4" height="4" fill="#E8EAED" stroke="none"></rect>283 <rect x="3" y="10" width="4" height="4" fill="#E8EAED" stroke="none"></rect>284 <rect x="10" y="10" width="4" height="4" fill="#E8EAED" stroke="none"></rect>285 <rect x="17" y="10" width="4" height="4" fill="#E8EAED" stroke="none"></rect>286 <rect x="3" y="17" width="4" height="4" fill="#E8EAED" stroke="none"></rect>287 <rect x="10" y="17" width="4" height="4" fill="#E8EAED" stroke="none"></rect>288 <rect x="17" y="17" width="4" height="4" fill="#E8EAED" stroke="none"></rect>289 </svg>290 </div>291 <div class="avatar">C</div>292 </div>293 </div>294 295 <!-- Google logo -->296 <div class="logo">Google</div>297 298 <!-- Search bar -->299 <div class="search-bar">300 <div class="icon-btn" style="width:64px;height:64px;">301 <svg width="36" height="36" viewBox="0 0 24 24">302 <circle cx="11" cy="11" r="6"></circle>303 <path d="M20 20l-4.5-4.5"></path>304 </svg>305 </div>306 <div class="search-input"></div>307 <div class="right-tools">308 <!-- Microphone -->309 <div class="icon-btn" style="width:64px;height:64px;">310 <svg width="28" height="36" viewBox="0 0 24 24">311 <rect x="9" y="4" width="6" height="10" rx="3" fill="#E8EAED" stroke="none"></rect>312 <path d="M5 11c0 4 3 6 7 6s7-2 7-6M12 17v4"></path>313 </svg>314 </div>315 <!-- Lens / camera -->316 <div class="icon-btn" style="width:64px;height:64px;">317 <svg width="32" height="32" viewBox="0 0 24 24">318 <rect x="3" y="6" width="18" height="12" rx="3"></rect>319 <circle cx="12" cy="12" r="3" fill="#E8EAED" stroke="none"></circle>320 </svg>321 </div>322 </div>323 </div>324 325 <!-- Languages -->326 <div class="languages">Google offered in:</div>327 <div class="lang-list">328 <span>हिन्दी</span>329 <span>বাংলা</span>330 <span>తెలుగు</span>331 <span>मराठी</span>332 <span>தமிழ்</span>333 <span>ગુજરાતી</span>334 <span>ಕನ್ನಡ</span>335 <span>മലയാളം</span>336 <span>ਪੰਜਾਬੀ</span>337 </div>338 339 <!-- Trending searches -->340 <div class="trending">341 <div class="trend-header">342 <div class="trend-title">Trending searches</div>343 <div class="icon-btn">344 <svg width="8" height="40" viewBox="0 0 4 24">345 <circle cx="2" cy="5" r="1.2" fill="#E8EAED" stroke="none"></circle>346 <circle cx="2" cy="12" r="1.2" fill="#E8EAED" stroke="none"></circle>347 <circle cx="2" cy="19" r="1.2" fill="#E8EAED" stroke="none"></circle>348 </svg>349 </div>350 </div>351 352 <div class="trend-list">353 <div class="trend-item">354 <div class="trend-icon">355 <svg width="40" height="40" viewBox="0 0 24 24">356 <path d="M3 17l6-6 4 4 6-7" stroke="#8AB4F8"></path>357 </svg>358 </div>359 <div>hospet accident today</div>360 </div>361 <div class="trend-item">362 <div class="trend-icon">363 <svg width="40" height="40" viewBox="0 0 24 24">364 <path d="M3 17l6-6 4 4 6-7" stroke="#8AB4F8"></path>365 </svg>366 </div>367 <div>motorola edge 40 neo flipkart sale date</div>368 </div>369 <div class="trend-item">370 <div class="trend-icon">371 <svg width="40" height="40" viewBox="0 0 24 24">372 <path d="M3 17l6-6 4 4 6-7" stroke="#8AB4F8"></path>373 </svg>374 </div>375 <div>nse f&o ban list</div>376 </div>377 <div class="trend-item">378 <div class="trend-icon">379 <svg width="40" height="40" viewBox="0 0 24 24">380 <path d="M3 17l6-6 4 4 6-7" stroke="#8AB4F8"></path>381 </svg>382 </div>383 <div>spotify premium</div>384 </div>385 <div class="trend-item">386 <div class="trend-icon">387 <svg width="40" height="40" viewBox="0 0 24 24">388 <path d="M3 17l6-6 4 4 6-7" stroke="#8AB4F8"></path>389 </svg>390 </div>391 <div>metro bank</div>392 </div>393 <div class="trend-item">394 <div class="trend-icon">395 <svg width="40" height="40" viewBox="0 0 24 24">396 <path d="M3 17l6-6 4 4 6-7" stroke="#8AB4F8"></path>397 </svg>398 </div>399 <div>solar and lunar eclipse 2023 october</div>400 </div>401 <div class="trend-item">402 <div class="trend-icon">403 <svg width="40" height="40" viewBox="0 0 24 24">404 <path d="M3 17l6-6 4 4 6-7" stroke="#8AB4F8"></path>405 </svg>406 </div>407 <div>uae israel hamas</div>408 </div>409 </div>410 </div>411 412 <!-- Bottom home indicator -->413 <div class="home-indicator"></div>414</div>415</body>416</html>