GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Rendered Mobile UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #111;13    border-radius: 0;14  }15 16  /* Main video placeholder */17  .video {18    position: absolute;19    left: 0; top: 0;20    width: 1080px;21    height: 2200px;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    display: flex;25    justify-content: center;26    align-items: center;27    color: #757575;28    font-size: 32px;29    letter-spacing: 0.5px;30  }31 32  /* Status bar */33  .status-bar {34    position: absolute;35    top: 0; left: 0;36    width: 100%;37    height: 90px;38    display: flex;39    align-items: center;40    padding: 0 28px;41    color: #fff;42    font-weight: 600;43    font-size: 34px;44    mix-blend-mode: normal;45  }46  .status-right {47    margin-left: auto;48    display: flex;49    gap: 20px;50    align-items: center;51  }52  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; }53 54  /* Top YouTube actions (search, camera, menu) */55  .top-actions {56    position: absolute;57    right: 40px;58    top: 140px;59    display: flex;60    gap: 36px;61    align-items: center;62  }63  .top-actions svg {64    width: 64px; height: 64px;65    stroke: #fff; stroke-width: 4; fill: none;66  }67 68  /* Center pause button */69  .pause-btn {70    position: absolute;71    left: 50%;72    top: 50%;73    transform: translate(-50%, -50%);74    width: 130px; height: 130px;75    border-radius: 50%;76    background: rgba(255,255,255,0.22);77    display: flex; align-items: center; justify-content: center;78  }79  .pause-btn svg { width: 70px; height: 70px; fill: #fff; }80 81  /* Middle chevron */82  .chevron-down {83    position: absolute;84    left: 50%;85    top: 1240px;86    transform: translateX(-50%);87    width: 110px; height: 110px;88    border-radius: 60px;89    background: rgba(255,255,255,0.18);90    display: flex; align-items: center; justify-content: center;91  }92  .chevron-down svg { width: 56px; height: 56px; stroke: #fff; stroke-width: 5; fill: none; }93 94  /* Right vertical actions */95  .right-actions {96    position: absolute;97    right: 36px;98    top: 760px;99    display: flex;100    flex-direction: column;101    align-items: center;102    gap: 70px;103    color: #fff;104  }105  .action {106    display: flex; flex-direction: column; align-items: center; gap: 10px;107  }108  .action svg { width: 88px; height: 88px; stroke: #fff; stroke-width: 5; fill: none; }109  .action .label {110    font-size: 34px;111    text-shadow: 0 1px 2px rgba(0,0,0,0.5);112  }113 114  /* Channel info at bottom */115  .channel-info {116    position: absolute;117    left: 40px;118    right: 40px;119    bottom: 360px;120    color: #fff;121  }122  .channel-top {123    display: flex; align-items: center;124  }125  .avatar {126    width: 96px; height: 96px; border-radius: 50%;127    background: #E0E0E0; border: 1px solid #BDBDBD;128    display: flex; justify-content: center; align-items: center;129    color: #757575; font-size: 20px;130    margin-right: 20px;131  }132  .channel-name {133    font-size: 36px; font-weight: 700;134    margin-right: 16px;135  }136  .subscribe-btn {137    margin-left: 16px;138    background: #E53935;139    color: #fff;140    font-weight: 700;141    font-size: 32px;142    padding: 10px 22px;143    border-radius: 12px;144  }145  .description {146    margin-top: 22px;147    font-size: 38px;148    line-height: 1.25;149    text-shadow: 0 1px 2px rgba(0,0,0,0.6);150  }151  .desc-thumb {152    position: absolute;153    right: 40px;154    bottom: 360px;155    width: 110px; height: 110px;156    background: #E0E0E0; border: 1px solid #BDBDBD;157    display: flex; align-items: center; justify-content: center;158    color: #757575; font-size: 20px;159    transform: translateY(112px);160  }161 162  /* Progress bar */163  .progress-bar {164    position: absolute;165    left: 300px;166    right: 300px;167    bottom: 228px;168    height: 10px;169    background: rgba(255,255,255,0.25);170    border-radius: 10px;171    overflow: hidden;172  }173  .progress {174    width: 20%;175    height: 100%;176    background: #fff;177  }178 179  /* Bottom navigation */180  .bottom-nav {181    position: absolute;182    left: 0; right: 0; bottom: 0;183    height: 220px;184    background: rgba(0,0,0,0.75);185    backdrop-filter: blur(2px);186    display: flex;187    align-items: center;188    justify-content: space-around;189    color: #fff;190  }191  .nav-item {192    display: flex; flex-direction: column; align-items: center; gap: 16px;193    font-size: 30px;194  }195  .nav-item svg { width: 70px; height: 70px; stroke: #fff; stroke-width: 5; fill: none; }196</style>197</head>198<body>199<div id="render-target">200 201  <!-- Main video area -->202  <div class="video">[IMG: Underwater fish video]</div>203 204  <!-- Status bar -->205  <div class="status-bar">206    <div>11:36</div>207    <div class="status-right">208      <div class="status-icon">209        <!-- Wi-Fi -->210        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-2 11-2 14 0"/><path d="M8 16c2-1 6-1 8 0"/><circle cx="12" cy="20" r="1.6" fill="#fff"/></svg>211      </div>212      <div class="status-icon">213        <!-- Signal -->214        <svg viewBox="0 0 24 24"><rect x="2" y="14" width="3" height="8"/><rect x="7" y="12" width="3" height="10"/><rect x="12" y="9" width="3" height="13"/><rect x="17" y="6" width="3" height="16"/></svg>215      </div>216      <div class="status-icon">217        <!-- Battery -->218        <svg viewBox="0 0 28 24"><rect x="2" y="5" width="22" height="14" rx="2"/><rect x="24" y="9" width="3" height="6" rx="1" fill="none" stroke="#fff"/><rect x="4" y="7" width="14" height="10" fill="#fff" stroke="none"/></svg>219      </div>220    </div>221  </div>222 223  <!-- Top actions -->224  <div class="top-actions">225    <!-- Search -->226    <svg viewBox="0 0 24 24">227      <circle cx="10" cy="10" r="6"></circle>228      <line x1="15" y1="15" x2="22" y2="22"></line>229    </svg>230    <!-- Camera -->231    <svg viewBox="0 0 24 24">232      <rect x="3" y="6" width="18" height="12" rx="2"></rect>233      <path d="M7 6l2-3h6l2 3"></path>234      <circle cx="12" cy="12" r="3"></circle>235    </svg>236    <!-- Menu (3 dots) -->237    <svg viewBox="0 0 24 24">238      <circle cx="12" cy="5" r="2.2" fill="#fff" stroke="none"></circle>239      <circle cx="12" cy="12" r="2.2" fill="#fff" stroke="none"></circle>240      <circle cx="12" cy="19" r="2.2" fill="#fff" stroke="none"></circle>241    </svg>242  </div>243 244  <!-- Center pause -->245  <div class="pause-btn">246    <svg viewBox="0 0 24 24">247      <rect x="5" y="4" width="4" height="16"></rect>248      <rect x="15" y="4" width="4" height="16"></rect>249    </svg>250  </div>251 252  <!-- Chevron down -->253  <div class="chevron-down">254    <svg viewBox="0 0 24 24">255      <polyline points="4,9 12,17 20,9"></polyline>256    </svg>257  </div>258 259  <!-- Right side actions -->260  <div class="right-actions">261    <div class="action">262      <!-- Like -->263      <svg viewBox="0 0 24 24">264        <path d="M2 21h4V9H2z"></path>265        <path d="M6 9l5-7 1 0c2 0 2 2 2 3v4h5c1 0 2 1 2 2l-3 10H7c-1 0-1-1-1-2z"></path>266      </svg>267      <div class="label">344K</div>268    </div>269 270    <div class="action">271      <!-- Dislike -->272      <svg viewBox="0 0 24 24">273        <path d="M2 3h4v12H2z"></path>274        <path d="M6 15l5 7h1c2 0 2-2 2-3v-4h5c1 0 2-1 2-2L18 1H7c-1 0-1 1-1 2z"></path>275      </svg>276      <div class="label">Dislike</div>277    </div>278 279    <div class="action">280      <!-- Comments -->281      <svg viewBox="0 0 24 24">282        <rect x="3" y="4" width="18" height="14" rx="3"></rect>283        <polyline points="8,20 8,16 3,16"></polyline>284      </svg>285      <div class="label">2.4K</div>286    </div>287 288    <div class="action">289      <!-- Share -->290      <svg viewBox="0 0 24 24">291        <circle cx="5" cy="12" r="2"></circle>292        <circle cx="19" cy="6" r="2"></circle>293        <circle cx="19" cy="18" r="2"></circle>294        <path d="M7 12l10-6M7 12l10 6"></path>295      </svg>296      <div class="label">Share</div>297    </div>298 299    <div class="action">300      <!-- Remix -->301      <svg viewBox="0 0 24 24">302        <path d="M6 7a6 6 0 0 1 12 0h3l-4 4-4-4h3"></path>303        <path d="M18 17a6 6 0 0 1-12 0H3l4-4 4 4H8"></path>304      </svg>305      <div class="label">Remix</div>306    </div>307  </div>308 309  <!-- Channel info -->310  <div class="channel-info">311    <div class="channel-top">312      <div class="avatar">[IMG]</div>313      <div class="channel-name">@underwaterireland</div>314      <div class="subscribe-btn">Subscribe</div>315    </div>316    <div class="description">317      Smartest fish in the world. #shorts #fishing #new318    </div>319    <div class="desc-thumb">[IMG]</div>320  </div>321 322  <!-- Progress bar -->323  <div class="progress-bar"><div class="progress"></div></div>324 325  <!-- Bottom navigation -->326  <div class="bottom-nav">327    <div class="nav-item">328      <!-- Home -->329      <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7"></path><rect x="7" y="10" width="10" height="10" rx="2"></rect></svg>330      <div>Home</div>331    </div>332    <div class="nav-item">333      <!-- Shorts -->334      <svg viewBox="0 0 24 24"><path d="M9 3l6 4-6 4 6 4-6 4V3z"></path></svg>335      <div>Shorts</div>336    </div>337    <div class="nav-item">338      <!-- Create -->339      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="12" y1="7" x2="12" y2="17"></line><line x1="7" y1="12" x2="17" y2="12"></line></svg>340      <div></div>341    </div>342    <div class="nav-item">343      <!-- Subscriptions -->344      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"></rect><rect x="6" y="9" width="6" height="6" fill="none"></rect><path d="M16 12l4 3-4 3z" fill="none"></path></svg>345      <div>Subscriptions</div>346    </div>347    <div class="nav-item">348      <!-- Library -->349      <svg viewBox="0 0 24 24"><rect x="3" y="5" width="6" height="14"></rect><rect x="11" y="7" width="10" height="12"></rect></svg>350      <div>Library</div>351    </div>352  </div>353 354</div>355</body>356</html>