GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Origami Elephant Search - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f0f0f;13    color: #fff;14    font-family: Arial, Helvetica, sans-serif;15  }16 17  /* Top status bar */18  .status-bar {19    height: 80px;20    padding: 0 24px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #eaeaea;25    font-size: 34px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 14px;31  }32  .dot {33    width: 16px;34    height: 16px;35    background: #ccc;36    border-radius: 50%;37    display: inline-block;38  }39  .signal {40    width: 26px; height: 26px; border: 2px solid #ccc; border-radius: 4px;41  }42 43  /* Search bar header */44  .search-header {45    height: 110px;46    display: flex;47    align-items: center;48    gap: 22px;49    padding: 0 20px;50  }51  .icon {52    width: 48px; height: 48px; fill: #ffffff;53  }54  .pill {55    flex: 1;56    height: 80px;57    border-radius: 40px;58    background: #212121;59    display: flex;60    align-items: center;61    padding: 0 28px;62    color: #dcdcdc;63    font-size: 34px;64    letter-spacing: 0.2px;65  }66  .right-icons {67    display: flex;68    align-items: center;69    gap: 26px;70  }71 72  /* Thumbnail + info blocks */73  .thumb {74    width: 100%;75    height: 620px;76    position: relative;77    background: #E0E0E0;78    border: 1px solid #BDBDBD;79    display: flex;80    align-items: center;81    justify-content: center;82    color: #555;83    font-size: 36px;84    font-weight: bold;85  }86  .time-badge {87    position: absolute;88    right: 22px;89    bottom: 22px;90    background: rgba(0,0,0,0.85);91    color: #fff;92    padding: 10px 18px;93    border-radius: 8px;94    font-size: 32px;95  }96 97  .video-info {98    display: flex;99    padding: 22px;100    gap: 22px;101    align-items: flex-start;102  }103  .avatar {104    width: 80px; height: 80px;105    border-radius: 50%;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    display: flex; align-items: center; justify-content: center;109    color: #555; font-size: 22px;110  }111  .text-group {112    flex: 1;113  }114  .title {115    font-size: 42px;116    line-height: 1.2;117    margin-bottom: 10px;118    color: #fff;119  }120  .meta {121    font-size: 30px;122    color: #aaaaaa;123  }124  .kebab {125    width: 40px; height: 80px;126    display: flex; align-items: center; justify-content: center;127  }128  .kebab .dot {129    width: 8px; height: 8px; background: #bbb; margin: 4px 0;130  }131 132  /* Shorts section */133  .shorts-header {134    display: flex;135    align-items: center;136    gap: 16px;137    padding: 18px 24px;138    margin-top: 6px;139  }140  .shorts-icon {141    width: 40px; height: 40px; background: #ff0033; border-radius: 10px;142  }143  .shorts-header .label { font-size: 42px; font-weight: 600; }144  .shorts-row {145    display: flex; gap: 24px; padding: 20px 24px;146  }147  .shorts-card {148    width: 330px; height: 520px;149    background: #E0E0E0;150    border: 1px solid #BDBDBD;151    display: flex; align-items: center; justify-content: center;152    color: #555; font-size: 28px; font-weight: bold;153    border-radius: 18px;154    position: relative;155  }156  .shorts-card .time-badge {157    bottom: 14px; right: 14px; font-size: 26px; padding: 8px 14px;158  }159 160  /* Bottom navigation bar */161  .bottom-nav {162    position: absolute;163    bottom: 0;164    left: 0; right: 0;165    height: 170px;166    background: #111111;167    border-top: 1px solid #2a2a2a;168    display: flex;169    align-items: center;170    justify-content: space-around;171  }172  .nav-item {173    display: flex; flex-direction: column; align-items: center; gap: 10px;174    color: #eaeaea; font-size: 28px;175  }176  .nav-item svg { width: 60px; height: 60px; fill: #eaeaea; }177  .plus-btn {178    width: 96px; height: 96px; background: #222; border-radius: 50%;179    border: 2px solid #3a3a3a; display: flex; align-items: center; justify-content: center;180  }181  .content-spacer { height: 180px; } /* ensure content above nav */182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status Bar -->188  <div class="status-bar">189    <div>9:52</div>190    <div class="status-right">191      <span class="dot"></span>192      <span class="dot"></span>193      <span class="dot"></span>194      <span class="dot"></span>195      <span class="signal"></span>196      <span class="dot"></span>197    </div>198  </div>199 200  <!-- Search Header -->201  <div class="search-header">202    <svg class="icon" viewBox="0 0 24 24">203      <path d="M15 19L8 12l7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>204    </svg>205    <div class="pill">Easy original Elephan...</div>206    <div class="right-icons">207      <svg class="icon" viewBox="0 0 24 24">208        <path d="M18 6L6 18M6 6l12 12" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>209      </svg>210      <svg class="icon" viewBox="0 0 24 24">211        <path d="M12 4a4 4 0 014 4v3l3 2v2l-7-3V8a2 2 0 10-4 0v2H6V8a6 6 0 016-4z" fill="#fff"/>212      </svg>213      <svg class="icon" viewBox="0 0 24 24">214        <path d="M3 6h18v10H3zM8 18h8l2 3H6l2-3z" fill="#fff"/>215      </svg>216      <svg class="icon" viewBox="0 0 24 24">217        <circle cx="12" cy="5" r="2" fill="#fff"/>218        <circle cx="12" cy="12" r="2" fill="#fff"/>219        <circle cx="12" cy="19" r="2" fill="#fff"/>220      </svg>221    </div>222  </div>223 224  <!-- First video thumbnail -->225  <div class="thumb">226    [IMG: Origami Elephant Banner]227    <div class="time-badge">9:37</div>228  </div>229 230  <!-- First video info -->231  <div class="video-info">232    <div class="avatar">[Avatar]</div>233    <div class="text-group">234      <div class="title">Easy Origami ELEPHANT || Cute Origami paper animals</div>235      <div class="meta">Gary Easy Origami · 384K views · 2 years ago</div>236    </div>237    <div class="kebab">238      <div class="dot"></div>239      <div class="dot"></div>240      <div class="dot"></div>241    </div>242  </div>243 244  <!-- Second video thumbnail -->245  <div class="thumb" style="height: 620px;">246    [IMG: Two Origami Elephants]247    <div class="time-badge">9:22</div>248  </div>249 250  <!-- Second video info -->251  <div class="video-info">252    <div class="avatar" style="background:#d7f3f0; color:#3b7;">[Channel Icon]</div>253    <div class="text-group">254      <div class="title">Cute Origami Elephant - Easy Paper Elephant Making</div>255      <div class="meta">Easy Paper Origami · 779K views · 1 year ago</div>256    </div>257    <div class="kebab">258      <div class="dot"></div>259      <div class="dot"></div>260      <div class="dot"></div>261    </div>262  </div>263 264  <!-- Shorts section -->265  <div class="shorts-header">266    <div class="shorts-icon"></div>267    <div class="label">Shorts</div>268  </div>269  <div class="shorts-row">270    <div class="shorts-card">271      [IMG: Blue Paper Clip - Short]272      <div class="time-badge">0:15</div>273    </div>274    <div class="shorts-card">275      [IMG: Origami Close-up - Short]276      <div class="time-badge">0:19</div>277    </div>278    <div class="shorts-card">279      [IMG: Fun Craft - Short]280      <div class="time-badge">0:12</div>281    </div>282  </div>283 284  <div class="content-spacer"></div>285 286  <!-- Bottom navigation -->287  <div class="bottom-nav">288    <div class="nav-item">289      <svg viewBox="0 0 24 24">290        <path d="M12 3l9 8v9h-6v-5H9v5H3v-9l9-8z"></path>291      </svg>292      <div>Home</div>293    </div>294    <div class="nav-item">295      <svg viewBox="0 0 24 24">296        <path d="M4 5h16v4H4zm0 5h16v4H4zm0 5h10v4H4z"></path>297      </svg>298      <div>Shorts</div>299    </div>300    <div class="nav-item">301      <div class="plus-btn">302        <svg viewBox="0 0 24 24">303          <path d="M12 5v14M5 12h14" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>304        </svg>305      </div>306    </div>307    <div class="nav-item">308      <svg viewBox="0 0 24 24">309        <path d="M4 4h16v13H4zM8 19h8v2H8z"></path>310      </svg>311      <div>Subscriptions</div>312    </div>313    <div class="nav-item">314      <svg viewBox="0 0 24 24">315        <path d="M6 4h12v4H6zM4 9h16v11H4z"></path>316      </svg>317      <div>Library</div>318    </div>319  </div>320 321</div>322</body>323</html>