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;font-family:Roboto, Arial, Helvetica, sans-serif;}9 #render-target{10 width:1080px;height:2400px;position:relative;overflow:hidden;11 background:#121212;color:#EAEAEA;12 }13 /* Utility */14 .row{display:flex;align-items:center;}15 .muted{color:#9aa0a6;}16 .chip{background:#2a2b2d;border-radius:40px;padding:18px 26px;color:#c9d1d9;}17 .divider{height:1px;background:#2b2b2b;}18 a{color:#8ab4f8;text-decoration:none;}19 /* Status bar */20 .status{21 height:84px;padding:0 36px;22 font-size:38px;letter-spacing:0.5px;justify-content:space-between;color:#e6e6e6;23 }24 .status .icons svg{margin-left:28px;fill:#e6e6e6;width:38px;height:38px;}25 /* Omnibox area (Chrome) */26 .omnibar-wrap{padding:18px 22px 10px 22px;}27 .omnibar{height:92px;border-radius:46px;background:#2a2b2d;flex:1;display:flex;align-items:center;padding:0 28px;color:#bfc5cc;}28 .omnibar .url{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:34px;}29 .topbar-icon{width:80px;height:92px;display:flex;align-items:center;justify-content:center;}30 .topbar-icon svg{fill:#cfcfcf;width:44px;height:44px;}31 /* Secondary nav */32 .g-nav{height:104px;border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;padding:0 28px;justify-content:space-between;}33 .g-left{gap:28px;}34 .g-tabs{gap:34px;margin-left:18px;}35 .g-tab{font-size:34px;color:#9aa0a6;position:relative;}36 .g-tab.active{color:#bcd2ff;}37 .g-tab.active::after{content:"";position:absolute;left:0;right:0;height:6px;background:#8ab4f8;border-radius:3px;bottom:-22px;}38 .avatar{width:64px;height:64px;background:#5b4bcf;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;}39 /* Google logo + search */40 .hero{padding:80px 48px 0 48px;text-align:center;}41 .logo{font-size:150px;font-weight:700;letter-spacing:-2px;color:#e9eef6;margin-bottom:46px;}42 .g-search{max-width:980px;margin:0 auto;border-radius:48px;background:#2a2b2d;height:96px;padding:0 22px;}43 .g-search input{flex:1;background:transparent;border:none;outline:none;color:#eaeaea;font-size:38px;}44 .g-search .icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;}45 .g-search .icon svg{fill:#b5b5b5;width:40px;height:40px;}46 .langs{margin-top:34px;color:#b0b7bd;font-size:32px;}47 .langs .list{margin-top:16px;display:flex;flex-wrap:wrap;gap:22px;justify-content:center;}48 /* Trending */49 .trending{margin:70px 0 0 0;padding:0 32px;}50 .trend-header{font-size:60px;font-weight:600;margin-bottom:20px;color:#e6e6e6;display:flex;align-items:center;justify-content:space-between;}51 .trend-item{padding:36px 0;display:flex;align-items:center;gap:26px;}52 .trend-item .text{font-size:40px;color:#dedede;flex:1;}53 .trend-sub{font-size:30px;color:#8f9aa3;margin-top:6px;}54 .trend-icon svg{width:40px;height:40px;fill:#9aa0a6;}55 /* Gesture pill */56 .gesture{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;width:320px;height:12px;border-radius:10px;background:#e6e6e6;opacity:.8;}57</style>58</head>59<body>60<div id="render-target">61 62 <!-- Status bar -->63 <div class="row status">64 <div class="time">10:12</div>65 <div class="row icons">66 <!-- moon -->67 <svg viewBox="0 0 24 24"><path d="M12 2a9 9 0 1 0 8.5 12.4A8 8 0 0 1 12 2z"/></svg>68 <!-- youtube play -->69 <svg viewBox="0 0 24 24"><path d="M10 16l6-4-6-4v8zm11-4a7 7 0 0 0-.7-3.2c-.6-1.1-1.3-1.6-2.6-1.7C15.7 7 12 7 12 7s-3.7 0-5.7.1c-1.3.1-2 .6-2.6 1.7A7 7 0 0 0 3 12c0 1.6.2 3 .7 3.2.6 1.1 1.3 1.6 2.6 1.7 2 .1 5.7.1 5.7.1s3.7 0 5.7-.1c1.3-.1 2-.6 2.6-1.7.5-.2.7-1.6.7-3.2z"/></svg>70 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>71 <!-- dot -->72 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2.5"/></svg>73 </div>74 <div class="row icons">75 <!-- signal -->76 <svg viewBox="0 0 24 24"><path d="M3 18h2v3H3v-3zm4-5h2v8H7v-8zm4-4h2v12h-2V9zm4-4h2v16h-2V5z"/></svg>77 <!-- battery -->78 <svg viewBox="0 0 24 24"><path d="M17 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm4 3v6h-1V9h1z"/></svg>79 </div>80 </div>81 82 <!-- Omnibox row -->83 <div class="row omnibar-wrap">84 <div class="topbar-icon" title="Home">85 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>86 </div>87 <div class="omnibar">88 <div class="icon" aria-hidden="true">89 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M14 14l6 6"/></svg>90 </div>91 <div class="url">google.com/?sa=X&ved=</div>92 <div class="icon" aria-hidden="true">93 <svg viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>94 </div>95 </div>96 <div class="topbar-icon" title="Add">97 <svg viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>98 </div>99 <div class="topbar-icon" title="Tabs">100 <div class="chip" style="height:64px;display:flex;align-items:center;justify-content:center;padding:0 22px;font-size:34px;">3</div>101 </div>102 <div class="topbar-icon" title="More">103 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>104 </div>105 </div>106 107 <!-- Google navigation (ALL / IMAGES) -->108 <div class="row g-nav">109 <div class="row g-left">110 <div class="topbar-icon">111 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>112 </div>113 <div class="row g-tabs">114 <div class="g-tab active">ALL</div>115 <div class="g-tab">IMAGES</div>116 </div>117 </div>118 <div class="row" style="gap:26px;">119 <div class="topbar-icon">120 <svg viewBox="0 0 24 24"><path d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z"/></svg>121 </div>122 <div class="avatar">C</div>123 </div>124 </div>125 126 <!-- Hero Section -->127 <div class="hero">128 <div class="logo">Google</div>129 <div class="row g-search">130 <div class="icon">131 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M14 14l6 6"/></svg>132 </div>133 <input type="text" placeholder="">134 <div class="icon">135 <!-- mic -->136 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1A7 7 0 0 0 19 11h-2z"/></svg>137 </div>138 <div class="icon">139 <!-- lens -->140 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="5"/><path d="M14 14l6 6"/></svg>141 </div>142 </div>143 144 <div class="langs">145 Google offered in:146 <div class="list">147 <a href="#">हिन्दी</a>148 <a href="#">বাংলা</a>149 <a href="#">తెలుగు</a>150 <a href="#">मराठी</a>151 <a href="#">தமிழ்</a>152 <a href="#">ગુજરાતી</a>153 <a href="#">ಕನ್ನಡ</a>154 <a href="#">മലയാളം</a>155 <a href="#">ਪੰਜਾਬੀ</a>156 </div>157 </div>158 </div>159 160 <!-- Trending Searches -->161 <div class="trending">162 <div class="trend-header">163 <div>Trending searches</div>164 <svg viewBox="0 0 24 24" width="40" height="40" style="fill:#9aa0a6;"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>165 </div>166 167 <div class="divider"></div>168 <div class="trend-item">169 <div class="trend-icon">170 <svg viewBox="0 0 24 24"><path d="M3 17l6-6 4 4 6-8 2 1-8 11-4-4-6 4z"/></svg>171 </div>172 <div class="text">jammu srinagar national highway update</div>173 </div>174 <div class="divider"></div>175 176 <div class="trend-item">177 <div class="trend-icon">178 <svg viewBox="0 0 24 24"><path d="M3 17l6-6 4 4 6-8 2 1-8 11-4-4-6 4z"/></svg>179 </div>180 <div class="text">earthquake today in sri lanka</div>181 </div>182 <div class="divider"></div>183 184 <div class="trend-item">185 <div class="trend-icon">186 <svg viewBox="0 0 24 24"><path d="M3 17l6-6 4 4 6-8 2 1-8 11-4-4-6 4z"/></svg>187 </div>188 <div class="text">teer shillong teer results</div>189 </div>190 <div class="divider"></div>191 192 <div class="trend-item">193 <div class="trend-icon">194 <svg viewBox="0 0 24 24"><path d="M3 17l6-6 4 4 6-8 2 1-8 11-4-4-6 4z"/></svg>195 </div>196 <div class="text">icici bank jp associates</div>197 </div>198 <div class="divider"></div>199 200 <div class="trend-item">201 <div class="trend-icon">202 <svg viewBox="0 0 24 24"><path d="M3 17l6-6 4 4 6-8 2 1-8 11-4-4-6 4z"/></svg>203 </div>204 <div class="text">icc cricket world cup semi final</div>205 </div>206 <div class="divider"></div>207 208 <div class="trend-item">209 <div class="trend-icon">210 <svg viewBox="0 0 24 24"><path d="M3 17l6-6 4 4 6-8 2 1-8 11-4-4-6 4z"/></svg>211 </div>212 <div class="text">kumamoto masters badminton</div>213 </div>214 <div class="divider"></div>215 216 <div class="trend-item">217 <div class="trend-icon">218 <svg viewBox="0 0 24 24"><path d="M3 17l6-6 4 4 6-8 2 1-8 11-4-4-6 4z"/></svg>219 </div>220 <div style="flex:1;">221 <div class="text">usa cricket premier league</div>222 <div class="trend-sub">American Premier League</div>223 </div>224 <div style="width:120px;height:90px;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#757575;">[IMG: Ad Logo]</div>225 </div>226 <div class="divider"></div>227 </div>228 229 <!-- Gesture pill -->230 <div class="gesture"></div>231</div>232</body>233</html>