GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #000000;15    color: #ffffff;16  }17  .status-bar {18    height: 120px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #fff;24    font-weight: 500;25    letter-spacing: 0.5px;26  }27  .status-icons { display: flex; gap: 24px; align-items: center; }28  .icon { width: 48px; height: 48px; fill: #ffffff; }29  .top-bar {30    padding: 0 24px 24px 24px;31  }32  .search-row {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .pill {38    flex: 1;39    height: 96px;40    background: #1f1f1f;41    border-radius: 48px;42    display: flex;43    align-items: center;44    padding: 0 28px;45    gap: 18px;46    border: 1px solid #2a2a2a;47  }48  .pill .query {49    flex: 1;50    color: #e0e0e0;51    font-size: 34px;52    white-space: nowrap;53    overflow: hidden;54    text-overflow: ellipsis;55  }56  .kebab { margin-left: 6px; }57  /* Feed */58  .feed { padding: 0 24px; }59  .ad-card {60    background: #101010;61    border-radius: 24px;62    padding: 24px;63    border: 1px solid #1f1f1f;64    margin-bottom: 24px;65  }66  .ad-top {67    display: flex;68    align-items: flex-start;69    gap: 20px;70  }71  .avatar {72    width: 96px; height: 96px; border-radius: 50%;73    background: #E0E0E0; border: 1px solid #BDBDBD;74    display: flex; align-items: center; justify-content: center;75    color: #757575; font-size: 22px;76  }77  .ad-text { flex: 1; }78  .ad-title {79    font-size: 38px;80    line-height: 48px;81    font-weight: 600;82    margin-bottom: 6px;83  }84  .ad-sub {85    font-size: 28px; color: #bbbbbb; margin-bottom: 8px;86  }87  .ad-meta {88    font-size: 26px; color: #888888;89  }90  .ad-actions {91    display: flex; gap: 24px; padding: 24px 4px 4px 4px;92  }93  .btn {94    height: 92px; padding: 0 48px; border-radius: 46px;95    display: inline-flex; align-items: center; justify-content: center;96    font-size: 34px; font-weight: 600;97    border: 1px solid #2a2a2a; background: #0b0b0b; color: #eaeaea;98  }99  .btn.primary {100    background: #3ea6ff; border-color: #3ea6ff; color: #0b0b0b;101  }102  .video-card { margin-bottom: 36px; }103  .thumb {104    width: 1032px; height: 580px; margin: 0 auto 16px auto;105    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;106    display: flex; align-items: center; justify-content: center;107    font-size: 28px; position: relative;108  }109  .thumb.gold { outline: 20px solid #d6b23e; }110  .vevo-tag {111    position: absolute; left: 24px; bottom: 24px;112    background: rgba(0,0,0,0.6); padding: 10px 16px; border-radius: 8px;113    font-size: 24px; letter-spacing: 1px;114  }115  .v-title {116    font-size: 36px; font-weight: 600; line-height: 46px;117    margin: 0 24px 6px 24px;118  }119  .v-channel {120    font-size: 26px; color: #aaaaaa; margin: 0 24px 0 24px;121  }122  /* Mini player overlay */123  .mini-player {124    position: absolute;125    left: 190px; top: 1180px;126    width: 700px; height: 420px;127    background: #0b0b0b;128    border: 1px solid #2a2a2a;129    border-radius: 40px;130    box-shadow: 0 10px 30px rgba(0,0,0,0.6);131    overflow: hidden;132    display: flex; align-items: center; justify-content: center;133  }134  .mini-player .thumb { width: 640px; height: 360px; margin: 0; }135  /* Bottom navigation */136  .bottom-bar {137    position: absolute;138    bottom: 0; left: 0; right: 0;139    height: 200px;140    background: #0b0b0b;141    border-top: 1px solid #1f1f1f;142    display: flex; align-items: center; justify-content: space-around;143  }144  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #e0e0e0; }145  .nav-item .label { font-size: 26px; color: #cfcfcf; }146  .nav-icon { width: 60px; height: 60px; fill: #e0e0e0; }147  .progress-bar {148    position: absolute;149    bottom: 200px;150    left: 60px;151    width: 960px;152    height: 12px;153    background: #202020;154    border-radius: 6px;155    overflow: hidden;156  }157  .progress-bar span {158    display: block;159    width: 320px;160    height: 12px;161    background: #ffffff;162  }163</style>164</head>165<body>166<div id="render-target">167  <!-- Status bar -->168  <div class="status-bar">169    <div class="time">8:25</div>170    <div class="status-icons">171      <svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/></svg>172      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/><rect x="6" y="9" width="12" height="6" fill="#000"/></svg>173      <svg class="icon" viewBox="0 0 24 24"><path d="M4 7h16v10H4z"/></svg>174      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>175    </div>176  </div>177 178  <!-- Top search bar -->179  <div class="top-bar">180    <div class="search-row">181      <svg class="icon" viewBox="0 0 24 24">182        <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>183      </svg>184      <div class="pill">185        <div class="query">It's A Man's Man's M...</div>186        <svg class="icon" viewBox="0 0 24 24">187          <path d="M12 2a4 4 0 0 1 4 4v3a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4zm-3 14h6v6H9z" />188        </svg>189      </div>190      <svg class="icon" viewBox="0 0 24 24" style="opacity:0.9">191        <rect x="3" y="6" width="15" height="10" rx="2" ry="2" />192        <path d="M19 9c2 0 3 1 4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>193        <path d="M19 12c1 0 2 1 3 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>194      </svg>195      <svg class="icon kebab" viewBox="0 0 24 24">196        <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>197      </svg>198    </div>199  </div>200 201  <!-- Feed -->202  <div class="feed">203    <!-- Ad card -->204    <div class="ad-card">205      <div class="ad-top">206        <div class="avatar">[IMG: Channel Avatar]</div>207        <div class="ad-text">208          <div class="ad-title">Join me, Boarderella, as we dive into the enchanting world of Late Night Lofi</div>209          <div class="ad-sub">LoFi Beats for Late Nights</div>210          <div class="ad-meta">Ad · Boarderella</div>211        </div>212        <svg class="icon" viewBox="0 0 24 24">213          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>214        </svg>215      </div>216      <div class="ad-actions">217        <div class="btn">Watch</div>218        <div class="btn primary">Subscribe</div>219      </div>220    </div>221 222    <!-- Video 1 -->223    <div class="video-card">224      <div class="thumb gold">225        [IMG: Video thumbnail — two performers on stage]226        <div class="vevo-tag">vevo</div>227      </div>228      <div class="v-title">Luciano Pavarotti — Man's Man's World</div>229      <div class="v-channel">Luciano Pavarotti • 9...</div>230    </div>231 232    <!-- Video 2 (animated scene) -->233    <div class="video-card">234      <div class="thumb">235        [IMG: Animated jazz band performance]236      </div>237      <div class="v-title">Luciano Pavarotti, James Brow...</div>238      <div class="v-channel">LucianoPavarottiVEVO</div>239    </div>240  </div>241 242  <!-- Mini player overlay -->243  <div class="mini-player">244    <div class="thumb">[IMG: Album art painting]</div>245  </div>246 247  <!-- Bottom progress bar -->248  <div class="progress-bar"><span></span></div>249 250  <!-- Bottom navigation -->251  <div class="bottom-bar">252    <div class="nav-item">253      <svg class="nav-icon" viewBox="0 0 24 24">254        <path d="M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-6v-6H10v6H4a1 1 0 0 1-1-1z"/>255      </svg>256      <div class="label">Home</div>257    </div>258    <div class="nav-item">259      <svg class="nav-icon" viewBox="0 0 24 24">260        <path d="M8 2l8 4-6 4 6 4-8 4V2z"/>261      </svg>262      <div class="label">Shorts</div>263    </div>264    <div class="nav-item">265      <svg class="nav-icon" viewBox="0 0 24 24">266        <circle cx="12" cy="12" r="10"/><path d="M8 12h8" stroke="#000" stroke-width="2"/><path d="M12 8v8" stroke="#000" stroke-width="2"/>267      </svg>268      <div class="label">Create</div>269    </div>270    <div class="nav-item">271      <svg class="nav-icon" viewBox="0 0 24 24">272        <rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9l5 3-5 3z" fill="#000"/>273      </svg>274      <div class="label">Subscriptions</div>275    </div>276    <div class="nav-item">277      <svg class="nav-icon" viewBox="0 0 24 24">278        <rect x="5" y="4" width="14" height="16" rx="2"/><rect x="7" y="7" width="10" height="2" fill="#000"/><rect x="7" y="11" width="10" height="2" fill="#000"/>279      </svg>280      <div class="label">Library</div>281    </div>282  </div>283</div>284</body>285</html>