GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - YouTube Mock</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: 80px;19 padding: 0 28px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #fff;24 font-weight: 600;25 font-size: 32px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 22px;31 }32 .sb-icon { width: 34px; height: 34px; opacity: 0.9; }33 34 /* Header */35 .header {36 height: 110px;37 padding: 0 24px;38 display: flex;39 align-items: center;40 justify-content: space-between;41 }42 .yt-logo {43 display: flex;44 align-items: center;45 gap: 18px;46 font-size: 42px;47 font-weight: 800;48 }49 .yt-logo .play {50 width: 68px;51 height: 48px;52 border-radius: 10px;53 background: #ff0000;54 position: relative;55 }56 .yt-logo .play:after {57 content: '';58 position: absolute;59 left: 26px;60 top: 13px;61 border-left: 18px solid #fff;62 border-top: 11px solid transparent;63 border-bottom: 11px solid transparent;64 }65 .header-icons {66 display: flex;67 align-items: center;68 gap: 32px;69 }70 .circle-avatar {71 width: 58px; height: 58px; border-radius: 50%; background: #3c3f52; display: flex; align-items: center; justify-content: center; font-weight: 700;72 }73 74 /* Tabs */75 .tabs {76 padding: 8px 16px 12px;77 display: flex;78 gap: 16px;79 overflow: hidden;80 }81 .chip {82 padding: 12px 22px;83 border-radius: 28px;84 font-size: 28px;85 background: #232323;86 color: #ddd;87 border: 1px solid #2d2d2d;88 white-space: nowrap;89 }90 .chip.active { background: #fff; color: #000; font-weight: 700; }91 92 /* Section title */93 .section-title {94 display: flex;95 align-items: center;96 gap: 18px;97 padding: 18px 24px 12px;98 font-size: 40px;99 font-weight: 800;100 }101 .shorts-icon {102 width: 30px; height: 42px; position: relative;103 }104 .shorts-icon:before, .shorts-icon:after {105 content:'';106 position: absolute;107 width: 30px; height: 18px; background:#ea4335; border-radius:10px;108 }109 .shorts-icon:before { top:0; }110 .shorts-icon:after { bottom:0; }111 112 /* Shorts grid */113 .shorts-grid {114 padding: 0 24px;115 display: grid;116 grid-template-columns: 1fr 1fr;117 gap: 24px;118 }119 .short-card {120 position: relative;121 height: 640px;122 border-radius: 24px;123 overflow: hidden;124 background: #1a1a1a;125 border: 1px solid #2a2a2a;126 }127 .short-card .img {128 position: absolute;129 inset: 0;130 background: #E0E0E0;131 border: 1px solid #BDBDBD;132 display: flex; align-items: center; justify-content: center;133 color: #757575; font-size: 28px; text-align: center; padding: 0 18px;134 }135 .short-card .overlay-top {136 position: absolute; left: 0; right: 0; top: 0;137 padding: 22px;138 background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0));139 font-size: 34px; font-weight: 800; line-height: 1.2;140 }141 .short-card .overlay-bottom {142 position: absolute; left: 0; right: 0; bottom: 0;143 padding: 20px;144 background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0));145 }146 .short-card .title { font-size: 34px; font-weight: 700; }147 .short-card .views { font-size: 28px; opacity: 0.9; margin-top: 6px; }148 149 /* Large content image */150 .content-block {151 margin: 28px 24px 0;152 height: 920px;153 border-radius: 26px;154 overflow: hidden;155 background: #E0E0E0;156 border: 1px solid #BDBDBD;157 display: flex; align-items: center; justify-content: center; color:#757575; font-size: 32px; text-align:center; padding:16px;158 }159 160 /* Bottom navigation */161 .bottom-nav {162 position: absolute;163 bottom: 90px;164 left: 0; right: 0;165 height: 140px;166 background: #0f0f0f;167 border-top: 1px solid #222;168 display: flex;169 align-items: center;170 justify-content: space-around;171 padding: 0 24px;172 }173 .nav-item {174 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;175 color: #ddd; font-size: 26px;176 }177 .nav-item .icon { width: 46px; height: 46px; }178 .nav-item.active { color: #fff; }179 .create-btn {180 width: 100px; height: 100px; border-radius: 50%;181 background: #0f0f0f; border: 2px solid #aaa; display:flex; align-items:center; justify-content:center;182 box-shadow: 0 2px 6px rgba(0,0,0,0.4);183 }184 .notif-dot {185 position: absolute; right: -6px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: #e53935;186 border: 2px solid #0f0f0f;187 }188 189 /* Home indicator */190 .home-indicator {191 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);192 width: 540px; height: 12px; border-radius: 8px; background: #2a2a2a;193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status Bar -->200 <div class="status-bar">201 <div>6:20</div>202 <div class="status-right">203 <!-- Simple status icons -->204 <svg class="sb-icon" viewBox="0 0 24 24">205 <rect x="2" y="14" width="3" height="8" fill="#fff"></rect>206 <rect x="7" y="10" width="3" height="12" fill="#fff" opacity="0.9"></rect>207 <rect x="12" y="6" width="3" height="16" fill="#fff" opacity="0.8"></rect>208 <rect x="17" y="2" width="3" height="20" fill="#fff" opacity="0.7"></rect>209 </svg>210 <svg class="sb-icon" viewBox="0 0 24 24">211 <path d="M2 8l10-6 10 6v8l-10 6-10-6V8z" fill="none" stroke="#fff" stroke-width="2"></path>212 <circle cx="12" cy="12" r="3" fill="#fff"></circle>213 </svg>214 <svg class="sb-icon" viewBox="0 0 24 24">215 <rect x="3" y="7" width="14" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>216 <rect x="17" y="9" width="4" height="6" rx="1" fill="#fff"></rect>217 </svg>218 </div>219 </div>220 221 <!-- Header -->222 <div class="header">223 <div class="yt-logo">224 <div class="play"></div>225 <div>YouTube</div>226 </div>227 <div class="header-icons">228 <!-- Cast -->229 <svg width="44" height="44" viewBox="0 0 24 24">230 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>231 <circle cx="5" cy="18" r="2" fill="#fff"></circle>232 <circle cx="9" cy="18" r="2" fill="#fff" opacity="0.9"></circle>233 <circle cx="13" cy="18" r="2" fill="#fff" opacity="0.8"></circle>234 </svg>235 <!-- Bell -->236 <svg width="44" height="44" viewBox="0 0 24 24">237 <path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5z" fill="none" stroke="#fff" stroke-width="2"></path>238 <circle cx="12" cy="19" r="2" fill="#fff"></circle>239 </svg>240 <!-- Search -->241 <svg width="44" height="44" viewBox="0 0 24 24">242 <circle cx="10" cy="10" r="6" fill="none" stroke="#fff" stroke-width="2"></circle>243 <path d="M16 16l5 5" stroke="#fff" stroke-width="2" fill="none"></path>244 </svg>245 <div class="circle-avatar">C</div>246 </div>247 </div>248 249 <!-- Tabs -->250 <div class="tabs">251 <div class="chip active">All</div>252 <div class="chip">Live</div>253 <div class="chip">News</div>254 <div class="chip">Music</div>255 <div class="chip">Elephants</div>256 </div>257 258 <!-- Shorts Section -->259 <div class="section-title">260 <div class="shorts-icon"></div>261 <div>Shorts</div>262 </div>263 264 <!-- Shorts Grid -->265 <div class="shorts-grid">266 <!-- Card 1 -->267 <div class="short-card">268 <div class="img">[IMG: Dad carrying groceries in driveway]</div>269 <div class="overlay-top">270 SHE WAS A SECOND<br>271 GROCERY BAG<br>272 THAT NEEDED273 </div>274 <div class="overlay-bottom">275 <div class="title">This dad looks like he had a long day 😂😂 #s...</div>276 <div class="views">13M views</div>277 </div>278 </div>279 280 <!-- Card 2 -->281 <div class="short-card">282 <div class="img">[IMG: Yellow gosling cuddled on shoulder]</div>283 <div class="overlay-bottom">284 <div class="title">This Goose Doesn’t Know She’s A Goose | T...</div>285 <div class="views">3.5M views</div>286 </div>287 </div>288 </div>289 290 <!-- Large content image -->291 <div class="content-block">[IMG: Modern home interior with glass elevator, kitchen and living area]</div>292 293 <!-- Bottom Navigation -->294 <div class="bottom-nav">295 <div class="nav-item active">296 <svg class="icon" viewBox="0 0 24 24">297 <path d="M3 11l9-7 9 7v9H3v-9z" fill="none" stroke="#fff" stroke-width="2"></path>298 <rect x="8" y="14" width="8" height="6" fill="#fff"></rect>299 </svg>300 <div>Home</div>301 </div>302 <div class="nav-item">303 <svg class="icon" viewBox="0 0 24 24">304 <rect x="6" y="4" width="12" height="16" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>305 <path d="M9 8l6 4-6 4V8z" fill="#fff"></path>306 </svg>307 <div>Shorts</div>308 </div>309 <div class="nav-item">310 <div class="create-btn">311 <svg width="48" height="48" viewBox="0 0 24 24">312 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2"></path>313 </svg>314 </div>315 </div>316 <div class="nav-item" style="position: relative;">317 <svg class="icon" viewBox="0 0 24 24">318 <rect x="3" y="7" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>319 <rect x="6" y="10" width="6" height="6" fill="#fff"></rect>320 <rect x="14" y="10" width="6" height="6" fill="#fff"></rect>321 </svg>322 <div>Subscriptions</div>323 <div class="notif-dot"></div>324 </div>325 <div class="nav-item">326 <svg class="icon" viewBox="0 0 24 24">327 <rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>328 <path d="M7 9h10M7 13h10M7 17h10" stroke="#fff" stroke-width="2"></path>329 </svg>330 <div>Library</div>331 </div>332 </div>333 334 <!-- Home indicator -->335 <div class="home-indicator"></div>336</div>337</body>338</html>