GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Google Discover - Dark UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#121212; color:#FFFFFF; font-family: Roboto, "Segoe UI", Arial, sans-serif;11 }12 13 /* Status bar */14 .status-bar {15 height:64px; padding:0 24px; display:flex; align-items:center; justify-content:space-between;16 color:#EDEDED; font-size:26px;17 }18 .status-right { display:flex; align-items:center; gap:18px; }19 .icon {20 width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;21 }22 .icon svg { width:28px; height:28px; fill:#EDEDED; }23 24 /* Header row below status bar */25 .top-row {26 height:84px; display:flex; align-items:center; justify-content:space-between;27 padding:0 24px;28 }29 .home-wrap { display:flex; align-items:center; gap:16px; }30 .home-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; }31 .home-icon svg { width:40px; height:40px; fill:#CFCFCF; }32 .top-actions { display:flex; align-items:center; gap:22px; }33 .chip {34 width:64px; height:64px; border-radius:50%; background:#D1552D; color:#fff; font-weight:700;35 display:flex; align-items:center; justify-content:center; font-size:30px;36 }37 .tiny-square {38 width:56px; height:56px; border-radius:12px; background:#2A2A2A; color:#fff;39 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:26px;40 border:1px solid #3a3a3a;41 }42 .dots { width:48px; height:48px; display:flex; align-items:center; justify-content:center; }43 .dots svg { width:28px; height:28px; fill:#CFCFCF; }44 45 /* Google wordmark (text only) */46 .brand {47 font-size:118px; letter-spacing: -2px; font-weight:700; text-align:left; padding:18px 36px 12px;48 }49 50 /* Search/address bar */51 .search-bar {52 margin:8px 36px 26px; height:112px; border-radius:56px;53 background:#202124; display:flex; align-items:center; padding:0 28px; box-shadow:0 1px 0 rgba(255,255,255,0.05) inset;54 }55 .search-input { flex:1; color:#DADCE0; font-size:36px; opacity:0.95; }56 .search-actions { display:flex; align-items:center; gap:26px; }57 .round-btn {58 width:68px; height:68px; border-radius:50%; background:#2A2A2A; display:flex; align-items:center; justify-content:center;59 border:1px solid #3a3a3a;60 }61 .round-btn svg { width:36px; height:36px; fill:#CFCFCF; }62 63 /* Shortcut tiles (horizontal) */64 .tile-row { display:flex; gap:18px; padding:24px 36px 6px; }65 .tile {66 width:200px; height:190px; border-radius:24px; overflow:hidden; background:#1E1E1E; border:1px solid #2E2E2E;67 }68 .tile .img {69 width:100%; height:130px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;70 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;71 }72 .tile .label { padding:14px; font-size:28px; color:#FFFFFF; }73 74 /* App shortcuts (round icons with labels) */75 .apps-row { display:flex; gap:70px; padding:26px 36px; align-items:flex-start; }76 .app { width:140px; display:flex; flex-direction:column; align-items:center; }77 .app .circle {78 width:120px; height:120px; border-radius:60px; background:#2A2A2A; border:1px solid #3a3a3a; display:flex; align-items:center; justify-content:center;79 }80 .app .circle svg { width:62px; height:62px; fill:#9BD0FF; }81 .app .label { margin-top:16px; font-size:28px; color:#DADCE0; text-align:center; }82 83 /* Discover section */84 .discover-title { padding:30px 36px 10px; font-size:36px; color:#DADCE0; }85 .card {86 margin:10px 36px; border-radius:28px; background:#181818; border:1px solid #2A2A2A; overflow:hidden;87 }88 .card-content { padding:32px; display:flex; gap:24px; }89 .card-text { flex:1; }90 .headline { font-size:48px; line-height:64px; color:#FFFFFF; }91 .thumb {92 width:240px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px;93 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;94 }95 .meta { padding:16px 32px 26px; display:flex; align-items:center; justify-content:space-between; color:#A8A8A8; font-size:28px; border-top:1px solid #202020; }96 .meta .left { display:flex; align-items:center; gap:16px; }97 .meta .right { display:flex; align-items:center; gap:26px; }98 .small-icon svg { width:34px; height:34px; fill:#CFCFCF; }99 100 /* Large image card */101 .big-image { margin:24px 36px; border-radius:28px; overflow:hidden; border:1px solid #2A2A2A; background:#181818; }102 .big-image .img {103 height:500px; background:#E0E0E0; border-bottom:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px;104 }105 .home-indicator {106 position:absolute; bottom:26px; left:50%; transform:translateX(-50%);107 width:300px; height:14px; border-radius:12px; background:#E6E6E6; opacity:0.7;108 }109</style>110</head>111<body>112<div id="render-target">113 114 <!-- Status bar -->115 <div class="status-bar">116 <div>6:59</div>117 <div class="status-right">118 <div class="icon">119 <!-- simple dot sequence to mimic tiny status icons -->120 <svg viewBox="0 0 24 24">121 <circle cx="4" cy="12" r="2"></circle>122 <circle cx="10" cy="12" r="2"></circle>123 <circle cx="16" cy="12" r="2"></circle>124 <circle cx="22" cy="12" r="2"></circle>125 </svg>126 </div>127 <div class="icon">128 <!-- wifi -->129 <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 0.001 4.001A2 2 0 0 0 12 18zm-8.485-8.485 1.414 1.414A10 10 0 0 1 12 8a10 10 0 0 1 7.071 2.929l1.414-1.414A12 12 0 0 0 12 6a12 12 0 0 0-8.485 3.515zM3.757 12.243l1.414 1.414A8 8 0 0 1 12 12a8 8 0 0 1 6.829 3.657l1.414-1.414A10 10 0 0 0 12 10a10 10 0 0 0-8.243 2.243z"></path></svg>130 </div>131 <div class="icon">132 <!-- battery -->133 <svg viewBox="0 0 24 24"><path d="M2 8h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm18 3h2v2h-2v-2z"></path></svg>134 </div>135 </div>136 </div>137 138 <!-- top row -->139 <div class="top-row">140 <div class="home-wrap">141 <div class="home-icon">142 <svg viewBox="0 0 24 24"><path d="M12 3 2 12h3v8h6v-5h2v5h6v-8h3L12 3z"></path></svg>143 </div>144 </div>145 <div class="top-actions">146 <div class="chip">C</div>147 <div class="tiny-square">1</div>148 <div class="dots">149 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle></svg>150 </div>151 </div>152 </div>153 154 <!-- Google brand -->155 <div class="brand">Google</div>156 157 <!-- Search bar -->158 <div class="search-bar">159 <div class="search-input">Search or type web address</div>160 <div class="search-actions">161 <div class="round-btn" title="Voice">162 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-5 9a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.92V21h-2v-2.08A7 7 0 0 1 5 12h2z"></path></svg>163 </div>164 <div class="round-btn" title="Camera">165 <svg viewBox="0 0 24 24"><path d="M9 4h6l2 3h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3l2-3zm3 5a5 5 0 1 0 .001 10.001A5 5 0 0 0 12 9zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"></path></svg>166 </div>167 </div>168 </div>169 170 <!-- Shortcut tiles -->171 <div class="tile-row">172 <div class="tile">173 <div class="img">[IMG: Street Scene]</div>174 <div class="label">News</div>175 </div>176 <div class="tile">177 <div class="img">[IMG: Indian Cuisine]</div>178 <div class="label">Recipes</div>179 </div>180 <div class="tile">181 <div class="img">[IMG: Astrology Chart]</div>182 <div class="label">Astrology</div>183 </div>184 <div class="tile">185 <div class="img">[IMG: Dancers on Stage]</div>186 <div class="label">Maratha Thane Bandh</div>187 </div>188 <div class="tile">189 <div class="img">[IMG: Book/Note]</div>190 <div class="label">Health</div>191 </div>192 </div>193 194 <!-- Apps row -->195 <div class="apps-row">196 <div class="app">197 <div class="circle">198 <!-- Google G simplified -->199 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 9.95 11.5h-9.2v-3h13.2A10 10 0 0 0 12 2z"></path></svg>200 </div>201 <div class="label">Google Tak...</div>202 </div>203 <div class="app">204 <div class="circle">205 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 0 4.9 14.4l5.5 5.5 1.4-1.4-5.5-5.5A8 8 0 0 0 10 2zm0 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10z"></path></svg>206 </div>207 <div class="label">flag list</div>208 </div>209 <div class="app">210 <div class="circle">211 <svg viewBox="0 0 24 24"><path d="M14 9h3V6h-3c-2.8 0-4 1.4-4 4v2H8v3h2v6h3v-6h3l1-3h-4V9c0-.7.3-1 1-1z"></path></svg>212 </div>213 <div class="label">Facebook</div>214 </div>215 <div class="app">216 <div class="circle">217 <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4zM7 7h10v2H7zm0 4h10v2H7zm0 4h7v2H7z"></path></svg>218 </div>219 <div class="label">Cricbuzz.c...</div>220 </div>221 </div>222 223 <!-- Discover section -->224 <div class="discover-title">Discover</div>225 226 <!-- First news card -->227 <div class="card">228 <div class="card-content">229 <div class="card-text">230 <div class="headline">231 G20 Venue 'Bharat Mandapam' Flooded After Heavy Rain In Delhi. 'Vikas Is Swimming' Says Congress — Watch232 </div>233 </div>234 <div class="thumb">[IMG: Flooded Hall]</div>235 </div>236 <div class="meta">237 <div class="left">238 <div class="small-icon">239 <svg viewBox="0 0 24 24"><path d="M3 3h18v4H3zm0 6h18v12H3z"></path></svg>240 </div>241 <div>ABP LIVE · 1d</div>242 </div>243 <div class="right">244 <div class="small-icon">245 <!-- share -->246 <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.9-3.5L8.7 8.3a3 3 0 1 0 0 7.4l6.4 3.8A3 3 0 1 0 16 17l-6.4-3.8a3 3 0 0 0 0-2.4L16 7a3 3 0 0 0 2-.9z"></path></svg>247 </div>248 <div class="small-icon">249 <!-- more -->250 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle></svg>251 </div>252 </div>253 </div>254 </div>255 256 <!-- Second card with big image -->257 <div class="big-image">258 <div class="img">[IMG: Meteor Near Earth]</div>259 </div>260 261 <div class="home-indicator"></div>262</div>263</body>264</html>