GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>YouTube Mobile UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2160px; position:relative; overflow:hidden;9 background:#121212; color:#fff;10 }11 12 /* Top App Bar */13 .topbar {14 height:120px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;15 background:#121212;16 }17 .yt-brand { display:flex; align-items:center; gap:16px; font-size:42px; font-weight:700; }18 .yt-icon { width:68px; height:48px; background:#ff0000; border-radius:10px; display:flex; align-items:center; justify-content:center; }19 .yt-icon svg { width:34px; height:34px; }20 .top-actions { display:flex; align-items:center; gap:30px; }21 .icon-btn { width:48px; height:48px; display:flex; align-items:center; justify-content:center; position:relative; }22 .notif-dot {23 position:absolute; top:-2px; right:-2px; background:#e53935; color:#fff; font-size:22px; border-radius:16px;24 padding:2px 8px; line-height:26px; border:2px solid #121212;25 }26 .avatar { width:62px; height:62px; border-radius:50%; background:#c2185b; display:flex; align-items:center; justify-content:center; font-weight:700; }27 28 /* Content Sections */29 .content { padding:8px 28px 300px; } /* leave room for mini-player + bottom nav */30 .section-title { display:flex; align-items:center; justify-content:space-between; margin:22px 0 16px; }31 .title-left { display:flex; align-items:center; gap:20px; }32 .title-left span { font-size:46px; font-weight:700; }33 .title-icon { width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:#9e9e9e; }34 .view-all { color:#3ea6ff; font-size:36px; }35 36 .cards-row { display:flex; gap:24px; }37 .card { width:330px; }38 .thumb {39 width:330px; height:186px; background:#E0E0E0; border:1px solid #BDBDBD;40 display:flex; align-items:center; justify-content:center; color:#757575; position:relative;41 }42 .duration {43 position:absolute; right:8px; bottom:8px; background:#000; color:#fff; font-size:28px;44 padding:6px 10px; border-radius:6px; opacity:0.9;45 }46 .video-title { font-size:36px; line-height:44px; margin-top:12px; }47 .video-sub { font-size:30px; color:#9e9e9e; margin-top:8px; }48 .private { font-size:30px; color:#9e9e9e; }49 50 /* Simple rows */51 .row-item { display:flex; align-items:center; gap:22px; padding:22px 0; border-top:1px solid #1f1f1f; }52 .row-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:#9e9e9e; }53 .row-text { font-size:42px; }54 .sub-text { font-size:34px; color:#9e9e9e; }55 56 /* Mini Player */57 .mini-player {58 position:absolute; left:0; right:0; bottom:160px; height:140px; background:#1e1e1e;59 display:flex; align-items:center; gap:24px; padding:12px 24px;60 }61 .mini-thumb {62 width:220px; height:116px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;63 display:flex; align-items:center; justify-content:center;64 }65 .mini-info { flex:1; }66 .mini-title { font-size:38px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }67 .mini-sub { font-size:30px; color:#9e9e9e; margin-top:4px; }68 .mini-controls { display:flex; align-items:center; gap:26px; }69 .progress-bar { position:absolute; left:0; right:0; bottom:0; height:6px; background:#d32f2f; }70 71 /* Bottom Navigation */72 .bottom-nav {73 position:absolute; left:0; right:0; bottom:0; height:160px; background:#1a1a1a;74 display:flex; align-items:center; justify-content:space-around; padding:0 10px;75 border-top:1px solid #2a2a2a;76 }77 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#9e9e9e; }78 .nav-item.active { color:#fff; }79 .nav-label { font-size:30px; }80 .fab {81 width:96px; height:96px; border-radius:50%; background:#2c2c2c; display:flex; align-items:center; justify-content:center;82 border:2px solid #3a3a3a;83 }84 .plus { font-size:60px; color:#fff; line-height:60px; }85 86 /* SVG helper */87 svg { fill:currentColor; }88</style>89</head>90<body>91<div id="render-target">92 93 <!-- Top Bar -->94 <div class="topbar">95 <div class="yt-brand">96 <div class="yt-icon">97 <svg viewBox="0 0 24 24">98 <path d="M8 5l10 7-10 7V5z"/>99 </svg>100 </div>101 <div>YouTube</div>102 </div>103 <div class="top-actions">104 <div class="icon-btn" title="Cast">105 <svg viewBox="0 0 24 24" width="34" height="34">106 <path d="M3 5h18v12h-7v2h9V3H1v6h2zM1 17h3c0-1.66-1.34-3-3-3v3zm0 4h7c0-3.87-3.13-7-7-7v3c2.21 0 4 1.79 4 4z"/>107 </svg>108 </div>109 <div class="icon-btn" title="Notifications">110 <span class="notif-dot">9+</span>111 <svg viewBox="0 0 24 24" width="36" height="36">112 <path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7l-2 2v1h16v-1l-2-2z"/>113 </svg>114 </div>115 <div class="icon-btn" title="Search">116 <svg viewBox="0 0 24 24" width="36" height="36">117 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 15.5l.27.28v.79L21 20.5 20.5 21l-4.5-4.5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>118 </svg>119 </div>120 <div class="avatar">C</div>121 </div>122 </div>123 124 <!-- Content -->125 <div class="content">126 127 <!-- History Section -->128 <div class="section-title">129 <div class="title-left">130 <div class="title-icon">131 <svg viewBox="0 0 24 24" width="42" height="42">132 <path d="M13 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7V3zm0 5v6l5 3 .9-1.78-3.9-2.22V8h-2z"/>133 </svg>134 </div>135 <span>History</span>136 </div>137 <div class="view-all">View all</div>138 </div>139 140 <div class="cards-row">141 <div class="card">142 <div class="thumb">[IMG: Video Thumbnail - Urban walkway]143 <div class="duration">3:22</div>144 </div>145 <div class="video-title">Miley Cyrus - Flowers (Official Video)</div>146 <div class="video-sub">Miley Cyrus</div>147 </div>148 <div class="card">149 <div class="thumb">[IMG: Kutchi Dabeli Recipe - Food]150 <div class="duration">17:56</div>151 </div>152 <div class="video-title">Kutchi Dabeli Recipe | Double Roti | Indian Street Food</div>153 <div class="video-sub">Your Food Lab</div>154 </div>155 <div class="card">156 <div class="thumb">[IMG: Tutorial / News Clip]157 <div class="duration">10:02</div>158 </div>159 <div class="video-title">Please Pay Attention - Tips & Guide</div>160 <div class="video-sub">Legacy Channel</div>161 </div>162 </div>163 164 <!-- Playlists Section -->165 <div class="section-title" style="margin-top:40px;">166 <div class="title-left">167 <div class="title-icon">168 <svg viewBox="0 0 24 24" width="42" height="42">169 <path d="M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h10v2H3v-2zm16-9l5 4-5 4V7z"/>170 </svg>171 </div>172 <span>Playlists</span>173 </div>174 <div class="view-all">View all</div>175 </div>176 177 <div class="cards-row">178 <div class="card">179 <div class="thumb">[IMG: Playlist Cover - Music]180 <div class="duration">2</div>181 </div>182 <div class="video-title">Song</div>183 </div>184 <div class="card">185 <div class="thumb">[IMG: Watch Later Playlist]</div>186 <div class="video-title">Watch later</div>187 <div class="private">Private</div>188 </div>189 <div class="card">190 <div class="thumb">[IMG: Liked Videos Playlist]</div>191 <div class="video-title">Liked videos</div>192 <div class="private">Private</div>193 </div>194 </div>195 196 <!-- Your videos -->197 <div class="row-item" style="margin-top:18px;">198 <div class="row-icon">199 <svg viewBox="0 0 24 24" width="44" height="44"><path d="M10 16.5l6-4.5-6-4.5v9zM21 3H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/></svg>200 </div>201 <div>202 <div class="row-text">Your videos</div>203 </div>204 </div>205 206 <!-- Downloads -->207 <div class="row-item">208 <div class="row-icon">209 <svg viewBox="0 0 24 24" width="44" height="44">210 <path d="M5 20h14v2H5v-2zm7-18v10l4-4 1.4 1.4L12 16l-5.4-5.6L8 9l4 4V2h0z"/>211 </svg>212 </div>213 <div>214 <div class="row-text">Downloads</div>215 <div class="sub-text">20 recommendations</div>216 </div>217 </div>218 219 </div>220 221 <!-- Mini Player -->222 <div class="mini-player">223 <div class="mini-thumb">[IMG: Video Thumbnail]</div>224 <div class="mini-info">225 <div class="mini-title">Miley Cyrus - Flowers (Official Video)</div>226 <div class="mini-sub">MileyCyrusVEVO</div>227 </div>228 <div class="mini-controls">229 <div class="icon-btn" title="Play">230 <svg viewBox="0 0 24 24" width="48" height="48"><path d="M8 5v14l11-7-11-7z"/></svg>231 </div>232 <div class="icon-btn" title="Close">233 <svg viewBox="0 0 24 24" width="48" height="48"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>234 </div>235 </div>236 <div class="progress-bar"></div>237 </div>238 239 <!-- Bottom Navigation -->240 <div class="bottom-nav">241 <div class="nav-item active">242 <svg viewBox="0 0 24 24" width="46" height="46"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>243 <div class="nav-label">Home</div>244 </div>245 <div class="nav-item">246 <svg viewBox="0 0 24 24" width="46" height="46"><path d="M18 13V6h-2v7h2zm-4 5V6h-2v12h2zm-4-2V6H8v10h2zm-4 4V6H4v14h2z"/></svg>247 <div class="nav-label">Shorts</div>248 </div>249 <div class="nav-item">250 <div class="fab"><span class="plus">+</span></div>251 </div>252 <div class="nav-item">253 <svg viewBox="0 0 24 24" width="46" height="46"><path d="M21 7H3V5h18v2zm0 4H8v2h13v-2zm0 6H8v2h13v-2zM6 11H3v8h3v-8z"/></svg>254 <div class="nav-label">Subscriptions</div>255 </div>256 <div class="nav-item">257 <svg viewBox="0 0 24 24" width="46" height="46"><path d="M4 6h16v2H4V6zm0 5h10v2H4v-2zm0 5h16v2H4v-2z"/></svg>258 <div class="nav-label">Library</div>259 </div>260 </div>261 262</div>263</body>264</html>