GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>YouTube Search - Origami Elephant</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: #0f0f0f;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    background: #000;20    padding: 0 24px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    box-sizing: border-box;25  }26  .status-left { font-weight: 600; letter-spacing: 1px; }27  .status-right {28    display: flex; gap: 18px; align-items: center;29  }30  .dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: 0.9; }31 32  /* App bar */33  .app-bar {34    height: 160px;35    background: #111;36    display: flex;37    align-items: center;38    padding: 0 16px;39    box-sizing: border-box;40    gap: 16px;41    border-bottom: 1px solid #1f1f1f;42  }43  .icon-btn {44    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;45    color: #e0e0e0;46  }47  .search-pill {48    flex: 1;49    background: #1f1f1f;50    border-radius: 40px;51    height: 96px;52    padding: 0 28px;53    display: flex;54    align-items: center;55    box-sizing: border-box;56    color: #d0d0d0;57    font-size: 36px;58    overflow: hidden;59    white-space: nowrap;60    text-overflow: ellipsis;61  }62  .search-text { flex: 1; }63  .pill-x {64    width: 44px; height: 44px; border-radius: 22px;65    display: flex; align-items: center; justify-content: center;66    color: #bdbdbd; margin-left: 12px; font-size: 36px;67  }68 69  /* Content area */70  .content { padding-bottom: 360px; } /* space for nav + mini player */71  .thumb {72    width: 1080px;73    height: 590px;74    position: relative;75    background: #E0E0E0;76    border-top: 1px solid #2a2a2a;77    border-bottom: 1px solid #2a2a2a;78    display: flex;79    align-items: center;80    justify-content: center;81    color: #757575;82    text-align: center;83    box-sizing: border-box;84    font-size: 40px;85    padding: 20px;86  }87  .duration {88    position: absolute;89    right: 18px;90    bottom: 18px;91    background: rgba(0,0,0,0.75);92    color: #fff;93    padding: 8px 16px;94    border-radius: 8px;95    font-size: 34px;96  }97 98  .video-meta {99    display: flex;100    padding: 24px 20px;101    box-sizing: border-box;102    align-items: flex-start;103    gap: 20px;104  }105  .avatar {106    width: 96px; height: 96px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;107    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;108    flex-shrink: 0;109  }110  .meta-text { flex: 1; }111  .title {112    font-size: 40px; line-height: 48px; color: #fff; margin-top: 6px;113  }114  .subtext { font-size: 32px; color: #b0b0b0; margin-top: 8px; }115  .kebab { width: 60px; text-align: center; color: #bdbdbd; font-size: 56px; line-height: 56px; }116 117  /* Shorts header */118  .shorts-header {119    display: flex; align-items: center; gap: 16px;120    padding: 18px 22px; border-top: 1px solid #1f1f1f;121  }122  .shorts-dot {123    width: 36px; height: 36px; background: #ff3b30; border-radius: 10px;124  }125  .shorts-title { font-size: 42px; font-weight: 700; }126 127  /* Mini player */128  .mini {129    position: absolute; left: 0; right: 0; bottom: 170px;130    height: 160px; background: #121212; border-top: 1px solid #1e1e1e;131    display: flex; align-items: center; padding: 0 18px; box-sizing: border-box;132    gap: 18px;133  }134  .mini-thumb {135    width: 240px; height: 130px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;136    display: flex; align-items: center; justify-content: center; font-size: 24px;137  }138  .mini-text { flex: 1; }139  .mini-title { font-size: 34px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }140  .mini-sub { font-size: 26px; color: #b0b0b0; margin-top: 6px; }141  .mini-controls { display: flex; align-items: center; gap: 26px; }142  .play-circle {143    width: 92px; height: 92px; border-radius:  thoroughly; 144  }145  .play-circle {146    width: 92px; height: 92px; border-radius: 46px; border: 2px solid #cfcfcf;147    display: flex; align-items: center; justify-content: center; color: #fff;148    background: rgba(255,255,255,0.05);149  }150  .close-x { font-size: 64px; color: #cfcfcf; }151  .mini-progress {152    position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #2a2a2a;153  }154  .mini-progress .bar { height: 100%; width: 70%; background: #ff0000; }155 156  /* Bottom navigation */157  .bottom-nav {158    position: absolute; left: 0; right: 0; bottom: 0; height: 170px;159    background: #0e0e0e; border-top: 1px solid #1d1d1d;160    display: flex; justify-content: space-around; align-items: center;161  }162  .nav-item { display: flex; flex-direction: column; align-items: center; color: #d9d9d9; font-size: 26px; }163  .nav-icon { width: 56px; height: 56px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; color: #fff; }164  .nav-icon svg { width: 48px; height: 48px; fill: #dcdcdc; }165 166  /* Simple SVG icons styling shades */167  .icon svg { width: 52px; height: 52px; fill: #e0e0e0; }168</style>169</head>170<body>171<div id="render-target">172 173  <!-- Status Bar -->174  <div class="status-bar">175    <div class="status-left">9:50</div>176    <div class="status-right">177      <div class="dot"></div>178      <div class="dot"></div>179      <div class="dot"></div>180      <div class="dot" style="opacity:0.6;"></div>181    </div>182  </div>183 184  <!-- App Bar -->185  <div class="app-bar">186    <div class="icon-btn icon" title="Back">187      <svg viewBox="0 0 24 24"><path d="M15.5 3.5L7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9 1.4 1.4z"/></svg>188    </div>189    <div class="search-pill">190      <div class="search-text">Easy original Elepha...</div>191      <div class="pill-x">✕</div>192    </div>193    <div class="icon-btn icon" title="Voice">194      <svg viewBox="0 0 24 24"><path d="M12 2a3 3 0 0 0-3 3v6a3 3 0 1 0 6 0V5a3 3 0 0 0-3-3zm-1 18.9V22h2v-1.1a7 7 0 0 0 6-6.9h-2a5 5 0 0 1-10 0H3a7 7 0 0 0 8 6.9z"/></svg>195    </div>196    <div class="icon-btn icon" title="Cast">197      <svg viewBox="0 0 24 24"><path d="M3 4h18a2 2 0 0 1 2 2v10h-2V6H3v2H1V6a2 2 0 0 1 2-2zm-2 9v2a6 6 0 0 1 6 6h2c0-4.4-3.6-8-8-8zm0 4v2a2 2 0 0 1 2 2h2c0-2.2-1.8-4-4-4zm0-8v2a10 10 0 0 1 10 10h2C13 15.8 8.2 11 3 11z"/></svg>198    </div>199    <div class="icon-btn" title="More" style="font-size:48px;">⋮</div>200  </div>201 202  <!-- Content -->203  <div class="content">204 205    <!-- Result 1 -->206    <div class="thumb">207      [IMG: Thumbnail - Two Origami Elephants (Yellow & Blue) with "Origami ELEPHANT" text]208      <div class="duration">9:37</div>209    </div>210    <div class="video-meta">211      <div class="avatar">[AV]</div>212      <div class="meta-text">213        <div class="title">Easy Origami ELEPHANT || Cute Origami paper animals</div>214        <div class="subtext">Gary Easy Origami · 384K views · 2 years ago</div>215      </div>216      <div class="kebab">⋮</div>217    </div>218 219    <!-- Result 2 -->220    <div class="thumb">221      [IMG: Thumbnail - Pink and Purple Origami Elephants facing each other]222      <div class="duration">9:22</div>223    </div>224    <div class="video-meta">225      <div class="avatar">[AV]</div>226      <div class="meta-text">227        <div class="title">Cute Origami Elephant - Easy Paper Elephant Making</div>228        <div class="subtext">Easy Paper Origami · 779K views · 1 year ago</div>229      </div>230      <div class="kebab">⋮</div>231    </div>232 233    <!-- Shorts header -->234    <div class="shorts-header">235      <div class="shorts-dot"></div>236      <div class="shorts-title">Shorts</div>237    </div>238 239  </div>240 241  <!-- Mini Player -->242  <div class="mini">243    <div class="mini-thumb">[IMG: Origami Snail Preview]</div>244    <div class="mini-text">245      <div class="mini-title">Origami Snail || Paper Moving toy</div>246      <div class="mini-sub">Gary Easy Origami</div>247    </div>248    <div class="mini-controls">249      <div class="play-circle">250        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="#ffffff"/></svg>251      </div>252      <div class="close-x">✕</div>253    </div>254    <div class="mini-progress"><div class="bar"></div></div>255  </div>256 257  <!-- Bottom Navigation -->258  <div class="bottom-nav">259    <div class="nav-item">260      <div class="nav-icon">261        <svg viewBox="0 0 24 24"><path d="M12 5l9 7h-3v7h-4v-5H10v5H6v-7H3l9-7z"/></svg>262      </div>263      <div>Home</div>264    </div>265    <div class="nav-item">266      <div class="nav-icon">267        <svg viewBox="0 0 24 24"><path d="M7 2h10v6H7zM7 9h10v6H7zM7 16h10v6H7z"/></svg>268      </div>269      <div>Shorts</div>270    </div>271    <div class="nav-item">272      <div class="nav-icon">273        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#dcdcdc" stroke-width="2" fill="none"/></svg>274      </div>275      <div> </div>276    </div>277    <div class="nav-item">278      <div class="nav-icon">279        <svg viewBox="0 0 24 24"><path d="M3 4h18v3H3zM3 10h18v3H3zM3 16h12v3H3z"/></svg>280      </div>281      <div>Subscriptions</div>282    </div>283    <div class="nav-item">284      <div class="nav-icon">285        <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3zM7 10h10v4H7z"/></svg>286      </div>287      <div>Library</div>288    </div>289  </div>290 291</div>292</body>293</html>