GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>YouTube Mobile Skeleton UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #0b0b0b;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    height: 70px;20    padding: 0 28px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #e6e6e6;25    font-weight: 600;26    font-size: 34px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 26px;32  }33  .status-icon { width: 36px; height: 36px; opacity: 0.85; }34 35  /* App bar */36  .appbar {37    height: 120px;38    padding: 0 28px;39    display: flex;40    align-items: center;41    justify-content: space-between;42  }43  .yt-brand {44    display: flex;45    align-items: center;46    gap: 16px;47    font-size: 56px;48    font-weight: 700;49    letter-spacing: -0.5px;50  }51  .yt-play {52    width: 90px; height: 62px;53    background: #e53935;54    border-radius: 14px;55    display: inline-flex;56    align-items: center;57    justify-content: center;58  }59  .yt-play svg { width: 40px; height: 40px; }60  .app-actions {61    display: flex;62    align-items: center;63    gap: 36px;64  }65  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #e6e6e6; stroke-width: 3; }66  .avatar {67    width: 68px; height: 68px;68    border-radius: 50%;69    background: #5e68cf;70    display: flex; align-items: center; justify-content: center;71    font-weight: 700;72  }73 74  /* Chips */75  .chips {76    display: flex;77    gap: 24px;78    padding: 0 28px;79    margin-top: 12px;80  }81  .chip {82    width: 220px; height: 78px;83    background: #1a1a1a;84    border-radius: 20px;85  }86 87  /* Feed skeleton cards */88  .card {89    margin: 28px;90    margin-top: 20px;91    background: #151515;92    border-radius: 28px;93    padding: 0;94    overflow: hidden;95    box-shadow: 0 0 0 1px #111 inset;96  }97  .card .thumb {98    height: 560px;99    background: #202020;100    border-bottom: 1px solid #101010;101    display: flex; align-items: center; justify-content: center;102    color: #7c7c7c;103    font-size: 34px;104  }105  .card .meta {106    padding: 24px;107  }108  .avatar-row {109    display: flex; align-items: center; gap: 24px;110  }111  .avatar-circle {112    width: 96px; height: 96px; border-radius: 50%;113    background: #2a2a2a;114  }115  .line {116    height: 32px; background: #2f2f2f; border-radius: 8px;117    margin-top: 18px;118  }119  .line.short { width: 260px; }120  .line.med { width: 760px; }121  .line.long { width: 920px; }122  .line.full { width: 100%; }123 124  /* Bottom navigation */125  .bottom-bar {126    position: absolute;127    bottom: 0;128    left: 0;129    width: 100%;130    height: 180px;131    background: #0e0e0e;132    border-top: 1px solid #141414;133    display: flex;134    align-items: center;135    justify-content: space-around;136    padding: 0 20px;137  }138  .nav-item {139    display: flex;140    flex-direction: column;141    align-items: center;142    gap: 12px;143    color: #e8e8e8;144    font-size: 28px;145  }146  .nav-item svg { width: 64px; height: 64px; fill: none; stroke: #e8e8e8; stroke-width: 3; }147  .plus {148    width: 96px; height: 96px;149    border-radius: 50%;150    background: #111;151    border: 3px solid #e8e8e8;152    display: flex; align-items: center; justify-content: center;153  }154  .red-dot {155    position: absolute;156    width: 22px; height: 22px;157    background: #e53935; border-radius: 50%;158    top: 24px; right: 120px;159    box-shadow: 0 0 0 3px #0e0e0e;160  }161 162  /* Gesture pill */163  .gesture {164    position: absolute;165    bottom: 94px;166    left: 50%;167    transform: translateX(-50%);168    width: 620px; height: 14px;169    background: #d9d9d9;170    border-radius: 10px;171    opacity: 0.85;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status Bar -->179  <div class="status-bar">180    <div>6:20</div>181    <div class="status-right">182      <!-- notification off icon -->183      <svg class="status-icon" viewBox="0 0 24 24">184        <circle cx="12" cy="12" r="9" stroke="#e6e6e6" fill="none" stroke-width="2"></circle>185        <line x1="6" y1="6" x2="18" y2="18" stroke="#e6e6e6" stroke-width="2"></line>186      </svg>187      <!-- wifi icon -->188      <svg class="status-icon" viewBox="0 0 24 24">189        <path d="M2 8c10-6 10-6 20 0" stroke="#e6e6e6" fill="none" stroke-width="2"></path>190        <path d="M5 12c7-4 7-4 14 0" stroke="#e6e6e6" fill="none" stroke-width="2"></path>191        <path d="M8 16c4-2 4-2 8 0" stroke="#e6e6e6" fill="none" stroke-width="2"></path>192        <circle cx="12" cy="19" r="1.8" fill="#e6e6e6"></circle>193      </svg>194      <!-- battery icon -->195      <svg class="status-icon" viewBox="0 0 32 24">196        <rect x="2" y="6" width="24" height="12" rx="2" ry="2" stroke="#e6e6e6" fill="none" stroke-width="2"></rect>197        <rect x="4" y="8" width="16" height="8" fill="#e6e6e6"></rect>198        <rect x="26" y="9" width="3" height="6" rx="1" fill="#e6e6e6"></rect>199      </svg>200    </div>201  </div>202 203  <!-- App Bar -->204  <div class="appbar">205    <div class="yt-brand">206      <div class="yt-play">207        <svg viewBox="0 0 24 24">208          <polygon points="9,7 19,12 9,17" fill="#ffffff"></polygon>209        </svg>210      </div>211      <div>YouTube</div>212    </div>213    <div class="app-actions">214      <!-- Cast -->215      <div class="icon-btn">216        <svg viewBox="0 0 24 24">217          <rect x="2" y="4" width="20" height="14" rx="2" stroke="#e6e6e6"></rect>218          <path d="M2 20c2-2 6-2 8 0" stroke="#e6e6e6"></path>219          <path d="M2 16c4-3 8-3 12 0" stroke="#e6e6e6"></path>220        </svg>221      </div>222      <!-- Bell -->223      <div class="icon-btn">224        <svg viewBox="0 0 24 24">225          <path d="M12 3c-3 0-5 2-5 5v4c0 1-1 2-2 3h14c-1-1-2-2-2-3V8c0-3-2-5-5-5z" stroke="#e6e6e6"></path>226          <path d="M9 19c1.5 2 4.5 2 6 0" stroke="#e6e6e6"></path>227        </svg>228      </div>229      <!-- Search -->230      <div class="icon-btn">231        <svg viewBox="0 0 24 24">232          <circle cx="10" cy="10" r="6" stroke="#e6e6e6"></circle>233          <line x1="15" y1="15" x2="21" y2="21" stroke="#e6e6e6"></line>234        </svg>235      </div>236      <!-- Avatar -->237      <div class="avatar">C</div>238    </div>239  </div>240 241  <!-- Chips -->242  <div class="chips">243    <div class="chip"></div>244    <div class="chip"></div>245    <div class="chip"></div>246    <div class="chip"></div>247  </div>248 249  <!-- Card 1 -->250  <div class="card" style="margin-top: 26px;">251    <div class="thumb">252      <div style="border:1px solid #3a3a3a; background:#E0E0E0; color:#757575; padding:10px 18px; border-radius:10px;">253        [IMG: Video Thumbnail Placeholder]254      </div>255    </div>256    <div class="meta">257      <div class="avatar-row">258        <div class="avatar-circle"></div>259        <div style="flex:1;">260          <div class="line long"></div>261          <div class="line med"></div>262          <div class="line short"></div>263        </div>264      </div>265    </div>266  </div>267 268  <!-- Card 2 -->269  <div class="card">270    <div class="thumb">271      <div style="border:1px solid #3a3a3a; background:#E0E0E0; color:#757575; padding:10px 18px; border-radius:10px;">272        [IMG: Video Thumbnail Placeholder]273      </div>274    </div>275    <div class="meta">276      <div class="avatar-row">277        <div class="avatar-circle"></div>278        <div style="flex:1;">279          <div class="line long"></div>280          <div class="line med"></div>281          <div class="line short"></div>282        </div>283      </div>284    </div>285  </div>286 287  <!-- Bottom Navigation -->288  <div class="bottom-bar">289    <div class="nav-item">290      <svg viewBox="0 0 24 24">291        <path d="M3 11l9-7 9 7v8H15v-5H9v5H3z"></path>292      </svg>293      <div>Home</div>294    </div>295    <div class="nav-item">296      <svg viewBox="0 0 24 24">297        <path d="M7 5l10 4-10 4 10 4-10 4" stroke-linejoin="round"></path>298      </svg>299      <div>Shorts</div>300    </div>301    <div class="nav-item">302      <div class="plus">303        <svg viewBox="0 0 24 24">304          <line x1="12" y1="5" x2="12" y2="19" stroke="#e8e8e8" stroke-width="3"></line>305          <line x1="5" y1="12" x2="19" y2="12" stroke="#e8e8e8" stroke-width="3"></line>306        </svg>307      </div>308    </div>309    <div class="nav-item" style="position: relative;">310      <svg viewBox="0 0 24 24">311        <rect x="3" y="5" width="18" height="14" rx="2"></rect>312        <polygon points="9,9 15,12 9,15" fill="none"></polygon>313      </svg>314      <div>Subscriptions</div>315      <span class="red-dot"></span>316    </div>317    <div class="nav-item">318      <svg viewBox="0 0 24 24">319        <rect x="5" y="5" width="14" height="14" rx="2"></rect>320        <line x1="5" y1="10" x2="19" y2="10"></line>321        <line x1="9" y1="5" x2="9" y2="19"></line>322      </svg>323      <div>Library</div>324    </div>325  </div>326 327  <div class="gesture"></div>328</div>329</body>330</html>