GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>YouTube Search - Static Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #111317;13    color: #fff;14  }15  .status-bar {16    position: absolute;17    top: 0;18    left: 0;19    width: 1080px;20    height: 90px;21    padding: 0 24px;22    box-sizing: border-box;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #eaeaea;27    font-size: 34px;28  }29  .status-icons { display: flex; gap: 18px; align-items: center; }30  .dot {31    width: 10px; height: 10px; background: #d9d9d9; border-radius: 50%;32  }33  .nav-bar {34    position: absolute;35    top: 90px;36    left: 0;37    width: 1080px;38    height: 120px;39    padding: 0 24px;40    box-sizing: border-box;41    display: flex;42    align-items: center;43    gap: 18px;44  }45  .icon-btn {46    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;47    border-radius: 36px;48  }49  .search-pill {50    flex: 1;51    height: 84px;52    background: #1e2127;53    border-radius: 42px;54    padding: 0 28px;55    box-sizing: border-box;56    display: flex;57    align-items: center;58    justify-content: space-between;59    color: #d6d6d6;60    font-size: 34px;61  }62  .search-text { color: #e5e5e5; }63  .top-image {64    position: absolute;65    top: 210px;66    left: 0;67    width: 1080px;68    height: 760px;69    background: #E0E0E0;70    border-top: 1px solid #BDBDBD;71    border-bottom: 1px solid #BDBDBD;72    display: flex;73    align-items: center;74    justify-content: center;75    color: #757575;76    font-size: 36px;77  }78  .visit-strip {79    position: absolute;80    top: 970px;81    left: 0;82    width: 1080px;83    height: 92px;84    background: #172a45;85    display: flex;86    align-items: center;87    justify-content: space-between;88    padding: 0 28px;89    box-sizing: border-box;90    font-size: 34px;91  }92  .ad-card {93    position: absolute;94    top: 1062px;95    left: 0;96    width: 1080px;97    padding: 24px 28px;98    box-sizing: border-box;99    color: #f3f3f3;100  }101  .ad-title { font-size: 40px; font-weight: bold; margin-bottom: 10px; }102  .ad-sub { font-size: 32px; color: #b9b9b9; margin-bottom: 8px; }103  .ad-link { font-size: 30px; color: #8bb3ff; margin-top: 4px; }104  .pill-row { display: flex; gap: 24px; margin-top: 24px; }105  .pill {106    height: 92px; padding: 0 32px; border-radius: 46px; background: #1f2833; color: #e7e7e7;107    display: flex; align-items: center; font-size: 32px; border: 1px solid #2c3442;108  }109  .second-image {110    position: absolute;111    top: 1348px;112    left: 0;113    width: 1080px;114    height: 840px;115    background: #E0E0E0;116    border-top: 1px solid #BDBDBD;117    border-bottom: 1px solid #BDBDBD;118    display: flex;119    align-items: center;120    justify-content: center;121    color: #757575;122    font-size: 38px;123    text-align: center;124    padding: 20px;125    box-sizing: border-box;126  }127  .bottom-bar {128    position: absolute;129    bottom: 120px;130    left: 0;131    width: 1080px;132    height: 160px;133    background: #0f1115;134    display: flex;135    align-items: center;136    justify-content: space-around;137    color: #eaeaea;138    font-size: 26px;139    border-top: 1px solid #23272f;140  }141  .tab {142    width: 160px;143    height: 120px;144    display: flex; flex-direction: column; align-items: center; justify-content: center;145    gap: 10px;146  }147  .tab svg { width: 52px; height: 52px; }148  .plus-wrap {149    width: 120px; height: 120px; border-radius: 60px; background: #0f1419; border: 3px solid #2c3a4a;150    display: flex; align-items: center; justify-content: center;151  }152  .red-dot {153    position: absolute;154    top: 24px;155    right: 180px;156    width: 18px; height: 18px; background: #ff3b30; border-radius: 50%;157  }158  .gesture {159    position: absolute;160    bottom: 40px; left: 50%; transform: translateX(-50%);161    width: 420px; height: 12px; background: #8c8c8c; border-radius: 6px; opacity: 0.5;162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status Bar -->169  <div class="status-bar">170    <div>9:53</div>171    <div class="status-icons">172      <div class="dot"></div>173      <div class="dot"></div>174      <div class="dot"></div>175      <div class="dot"></div>176      <div class="dot" style="margin-right:6px;"></div>177      <svg viewBox="0 0 48 48" width="34" height="34" fill="#d9d9d9"><circle cx="40" cy="8" r="4"/></svg>178    </div>179  </div>180 181  <!-- Search / Navigation Bar -->182  <div class="nav-bar">183    <div class="icon-btn">184      <svg viewBox="0 0 48 48" width="40" height="40" stroke="#eaeaea" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">185        <path d="M30 10 L14 24 L30 38"></path>186      </svg>187    </div>188 189    <div class="search-pill">190      <div class="search-text">top 10 things to do i...</div>191      <svg viewBox="0 0 48 48" width="36" height="36" stroke="#cfcfcf" fill="none" stroke-width="5" stroke-linecap="round">192        <path d="M12 12 L36 36 M36 12 L12 36"></path>193      </svg>194    </div>195 196    <div class="icon-btn">197      <svg viewBox="0 0 48 48" width="30" height="30" fill="#eaeaea">198        <path d="M24 6c5 0 9 4 9 9v6c0 5 4 9 9 9h-8c-3 0-6-3-6-6v-9c0-3-2-6-4-9z"></path>199        <rect x="20" y="33" width="8" height="9" fill="#eaeaea"></rect>200      </svg>201    </div>202    <div class="icon-btn">203      <svg viewBox="0 0 48 48" width="34" height="34" fill="none" stroke="#eaeaea" stroke-width="3">204        <rect x="6" y="12" width="36" height="24" rx="3"></rect>205        <path d="M10 34c5-9 18-9 23 0"></path>206        <path d="M10 28c3-6 12-6 15 0"></path>207      </svg>208    </div>209    <div class="icon-btn">210      <svg viewBox="0 0 48 48" width="6" height="36" fill="#eaeaea">211        <circle cx="24" cy="10" r="4"></circle>212        <circle cx="24" cy="24" r="4"></circle>213        <circle cx="24" cy="38" r="4"></circle>214      </svg>215    </div>216  </div>217 218  <!-- Top Image (Ad Preview) -->219  <div class="top-image">[IMG: Merlion statue at night - Singapore]</div>220 221  <!-- Visit Site Strip -->222  <div class="visit-strip">223    <div>Visit site</div>224    <svg viewBox="0 0 48 48" width="38" height="38" fill="none" stroke="#cfe0ff" stroke-width="4">225      <path d="M18 30 L34 14"></path>226      <path d="M26 14 H34 V22"></path>227      <rect x="10" y="18" width="24" height="20" rx="3" stroke="#cfe0ff"></rect>228    </svg>229  </div>230 231  <!-- Ad Card -->232  <div class="ad-card">233    <div class="ad-title">TripCrafters - Find Cheap Singapore Packages</div>234    <div class="ad-sub">Expert Local Advice. Get Amazing Discounts On Packages.</div>235    <div class="ad-link">Ad • www.tripcrafters.com/</div>236 237    <div class="pill-row">238      <div class="pill">Top Singapore Packages</div>239      <div class="pill">Working Process</div>240      <div class="pill">Tour Packages</div>241    </div>242  </div>243 244  <!-- Second Image Result -->245  <div class="second-image">[IMG: "TOP 10 SINGAPORE" - Gardens by the Bay neon trees thumbnail]</div>246 247  <!-- Bottom Navigation Bar -->248  <div class="bottom-bar">249    <div class="tab">250      <svg viewBox="0 0 48 48" fill="none" stroke="#eaeaea" stroke-width="3">251        <path d="M6 24 L24 8 L42 24"></path>252        <rect x="12" y="24" width="24" height="16" rx="2" fill="none"></rect>253      </svg>254      <div>Home</div>255    </div>256    <div class="tab">257      <svg viewBox="0 0 48 48" fill="#eaeaea">258        <path d="M20 10 L34 18 L20 26 L14 22 L20 18 L14 14 Z"></path>259      </svg>260      <div>Shorts</div>261    </div>262    <div class="tab">263      <div class="plus-wrap">264        <svg viewBox="0 0 48 48" width="56" height="56" stroke="#eaeaea" stroke-width="4" fill="none" stroke-linecap="round">265          <circle cx="24" cy="24" r="20"></circle>266          <path d="M24 14 V34"></path>267          <path d="M14 24 H34"></path>268        </svg>269      </div>270    </div>271    <div class="tab" style="position: relative;">272      <svg viewBox="0 0 48 48" fill="none" stroke="#eaeaea" stroke-width="3">273        <rect x="6" y="12" width="36" height="24" rx="3"></rect>274        <polygon points="21,18 31,24 21,30" fill="#eaeaea"></polygon>275      </svg>276      <div>Subscriptions</div>277    </div>278    <div class="tab">279      <svg viewBox="0 0 48 48" fill="none" stroke="#eaeaea" stroke-width="3">280        <rect x="10" y="10" width="28" height="6"></rect>281        <rect x="10" y="20" width="28" height="6"></rect>282        <rect x="10" y="30" width="28" height="6"></rect>283      </svg>284      <div>Library</div>285    </div>286  </div>287  <div class="red-dot"></div>288 289  <!-- Gesture bar -->290  <div class="gesture"></div>291 292</div>293</body>294</html>