GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Mock - YouTube Search Results</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0f0f0f;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0;21 width: 100%; height: 84px;22 padding: 0 28px;23 box-sizing: border-box;24 display: flex; align-items: center; justify-content: space-between;25 color: #eaeaea;26 font-size: 34px;27 letter-spacing: 1px;28 }29 .status-icons {30 display: flex; align-items: center; gap: 20px;31 }32 .dot { width: 10px; height: 10px; border-radius: 50%; background: #eaeaea; display: inline-block; }33 .battery {34 width: 44px; height: 24px; border: 2px solid #eaeaea; border-radius: 4px; position: relative;35 }36 .battery::after {37 content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 12px; background: #eaeaea; border-radius: 2px;38 }39 .battery .lvl { position: absolute; left: 3px; top: 3px; right: 8px; bottom: 3px; background: #eaeaea; }40 41 /* Search header */42 .header {43 position: absolute;44 top: 84px; left: 0; right: 0;45 height: 120px;46 display: flex; align-items: center; gap: 20px;47 padding: 0 20px;48 box-sizing: border-box;49 }50 .icon-btn {51 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 36px;52 }53 .search-bar {54 flex: 1;55 height: 76px;56 background: #202020;57 border-radius: 40px;58 display: flex; align-items: center;59 padding: 0 22px;60 box-sizing: border-box;61 color: #cfcfcf;62 font-size: 32px;63 }64 .search-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }65 .header-right { display: flex; align-items: center; gap: 12px; }66 67 /* Ad row */68 .ad-row {69 position: absolute;70 top: 204px; left: 0; right: 0;71 padding: 12px 20px 14px;72 box-sizing: border-box;73 }74 .ad-link { color: #c8e6c9; font-size: 26px; margin-bottom: 14px; }75 .chips { display: flex; gap: 16px; flex-wrap: nowrap; }76 .chip {77 padding: 14px 26px;78 background: #202020;79 border: 1px solid #3a3a3a;80 color: #eaeaea;81 border-radius: 24px;82 font-size: 26px;83 white-space: nowrap;84 }85 86 /* Thumbnails */87 .thumb {88 width: 100%;89 height: 720px;90 background: #E0E0E0;91 border-top: 1px solid #3b3b3b;92 border-bottom: 1px solid #3b3b3b;93 color: #555;94 display: flex; align-items: center; justify-content: center;95 position: absolute; left: 0;96 }97 .thumb-1 { top: 340px; }98 .thumb-2 { top: 1330px; height: 620px; }99 .thumb .label {100 background: rgba(255,255,255,0.8);101 color: #333; padding: 8px 16px; border-radius: 8px; font-size: 28px;102 }103 .badge {104 position: absolute; right: 18px; bottom: 18px;105 background: rgba(0,0,0,0.8);106 padding: 10px 14px; border-radius: 8px; font-size: 28px; color: #fff;107 }108 .corner-tag {109 position: absolute; right: 18px; top: 18px;110 background: rgba(0,0,0,0.6);111 padding: 8px 12px; border-radius: 8px; font-size: 24px; color: #ffd54f;112 }113 114 /* Video meta */115 .meta {116 position: absolute; left: 0; right: 0;117 height: 160px;118 padding: 18px 20px;119 box-sizing: border-box;120 display: flex; gap: 18px;121 }122 .meta-1 { top: 1060px; }123 .meta-2 { top: 1950px; }124 .avatar {125 width: 92px; height: 92px; border-radius: 50%;126 background: #E0E0E0; border: 1px solid #BDBDBD;127 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;128 margin-top: 4px;129 }130 .meta .title {131 font-size: 34px; color: #fff; line-height: 1.24; margin-bottom: 8px;132 }133 .meta .sub {134 font-size: 26px; color: #9e9e9e;135 }136 137 /* Chapters row */138 .chapters {139 position: absolute; left: 20px; right: 20px; top: 1218px;140 height: 100px; box-sizing: border-box;141 display: flex; align-items: center; justify-content: space-between;142 background: #1a1a1a; border-radius: 12px; padding: 10px 12px;143 border: 1px solid #2a2a2a;144 }145 .chap-left { display: flex; align-items: center; gap: 14px; overflow: hidden; }146 .thumb-mini {147 width: 84px; height: 84px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;148 display: flex; align-items: center; justify-content: center; font-size: 18px; border-radius: 8px;149 }150 .chap-title { font-size: 26px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 680px; }151 .chap-chip {152 background: #2b2b2b; color: #eaeaea; padding: 12px 18px; border-radius: 22px; font-size: 24px; border: 1px solid #3a3a3a;153 }154 155 /* Bottom nav */156 .bottom-nav {157 position: absolute; left: 0; right: 0; bottom: 0;158 height: 150px; background: #0f0f0f; border-top: 1px solid #222;159 display: flex; justify-content: space-around; align-items: center;160 }161 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #e5e5e5; font-size: 22px; }162 .nav-item.active { color: #fff; }163 .fab {164 width: 108px; height: 108px; background: #1f1f1f; border-radius: 54px;165 display: flex; align-items: center; justify-content: center; border: 2px solid #333;166 margin-bottom: 18px;167 }168 169 /* Simple SVG icons style */170 svg { fill: currentColor; }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Status Bar -->177 <div class="status-bar">178 <div>9:54</div>179 <div class="status-icons">180 <span class="dot"></span>181 <span class="dot"></span>182 <span class="dot"></span>183 <span class="dot"></span>184 <span class="dot"></span>185 <div class="battery"><div class="lvl"></div></div>186 </div>187 </div>188 189 <!-- Search Header -->190 <div class="header">191 <div class="icon-btn" title="Back">192 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9z"/></svg>193 </div>194 <div class="search-bar">195 <div class="search-text">top 10 things to do i...</div>196 <svg width="34" height="34" viewBox="0 0 24 24"><path d="m12 3c-2.8 0-5 2.2-5 5v3.5c0 .6-.4 1-1 1H5v2h3v5h2v-5h4v5h2v-5h3v-2h-1c-.6 0-1-.4-1-1V8c0-2.8-2.2-5-5-5z"/></svg>197 </div>198 <div class="header-right">199 <div class="icon-btn" title="Voice">200 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 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>201 </div>202 <div class="icon-btn" title="Cast">203 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M21 3H3a2 2 0 0 0-2 2v3h2V5h18v14H12v2h9a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM1 13v2a6 6 0 0 1 6 6h2a8 8 0 0 0-8-8zm0-4v2a10 10 0 0 1 10 10h2C13 14.8 8.2 10 1 9z"/></svg>204 </div>205 <div class="icon-btn" title="More">206 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M6 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/></svg>207 </div>208 </div>209 </div>210 211 <!-- Ad and Chips -->212 <div class="ad-row">213 <div class="ad-link">Ad · www.tripcrafters.com/</div>214 <div class="chips">215 <div class="chip">Top Singapore Packages</div>216 <div class="chip">Working Process</div>217 <div class="chip">Tour Packages</div>218 </div>219 </div>220 221 <!-- First Thumbnail -->222 <div class="thumb thumb-1">223 <div class="corner-tag">4K</div>224 <div class="label">[IMG: Supertree Grove night lights - "TOP 10 SINGAPORE"]</div>225 <div class="badge">12:49</div>226 </div>227 228 <!-- First Meta -->229 <div class="meta meta-1">230 <div class="avatar">Logo</div>231 <div style="flex:1">232 <div class="title">TOP 10 things to do in SINGAPORE | Travel Guide 4K</div>233 <div class="sub">Hungry Passport · 1.8M views · 3 years ago</div>234 </div>235 <div class="icon-btn" title="Options">236 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>237 </div>238 </div>239 240 <!-- Chapters -->241 <div class="chapters">242 <div class="chap-left">243 <div class="thumb-mini">[IMG]</div>244 <div class="chap-title">Intro | 10. Marina Bay Waterfront Promenade...</div>245 </div>246 <div class="chap-chip">11 chapters ▾</div>247 </div>248 249 <!-- Second Thumbnail -->250 <div class="thumb thumb-2">251 <div class="label">[IMG: Collage - rooftop deck, LED light tunnel, Marina Bay couples]</div>252 <div class="badge">10:15</div>253 </div>254 255 <!-- Second Meta -->256 <div class="meta meta-2">257 <div class="avatar">DP</div>258 <div style="flex:1">259 <div class="title">TOP 10 things to do in SINGAPORE | A Travel Guide | 2022</div>260 <div class="sub">Prabhi & Harsh · 702K views · 1 year ago</div>261 </div>262 <div class="icon-btn" title="Options">263 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>264 </div>265 </div>266 267 <!-- Bottom Navigation -->268 <div class="bottom-nav">269 <div class="nav-item active">270 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 3 2 12h3v8h6v-5h2v5h6v-8h3z"/></svg>271 <div>Home</div>272 </div>273 <div class="nav-item">274 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M11 2h2v20h-2z"/></svg>275 <div>Shorts</div>276 </div>277 <div class="fab">278 <svg width="52" height="52" viewBox="0 0 24 24"><path d="M19 11H13V5h-2v6H5v2h6v6h2v-6h6z"/></svg>279 </div>280 <div class="nav-item">281 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M4 4h16v2H4zm0 6h16v2H4zm0 6h10v2H4z"/></svg>282 <div>Subscriptions</div>283 </div>284 <div class="nav-item">285 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M4 3h16v18H4zM6 5v14h12V5z"/></svg>286 <div>Library</div>287 </div>288 </div>289 290</div>291</body>292</html>