GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI - New Playlist</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #0A0A0A; color: #FFFFFF;11 }12 .status-bar {13 position: absolute; top: 0; left: 0; width: 1080px; height: 90px;14 display: flex; align-items: center; justify-content: space-between;15 padding: 0 30px; color: #DADADA;16 font-size: 36px; letter-spacing: 0.5px;17 }18 .status-left { display: flex; gap: 24px; align-items: center; }19 .status-right { display: flex; gap: 24px; align-items: center; }20 .icon { width: 34px; height: 34px; }21 .app-bar {22 position: absolute; top: 90px; left: 0; width: 1080px; height: 120px;23 display: flex; align-items: center; padding: 0 30px; color: #FFFFFF;24 }25 .app-bar .title { font-size: 64px; font-weight: 600; margin-left: 20px; }26 .app-bar .next { margin-left: auto; font-size: 48px; color: #63A4FF; }27 .app-bar .back {28 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;29 }30 .content {31 position: absolute; top: 210px; left: 0; width: 1080px; height: 1240px; overflow: hidden;32 padding: 24px 30px; color: #DADADA;33 }34 .section-title { font-size: 42px; margin-bottom: 18px; color: #BDBDBD; }35 .video-item {36 display: flex; align-items: center; padding: 16px 0; border-bottom: 1px solid #1E1E1E;37 }38 .thumb {39 width: 240px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;40 display: flex; align-items: center; justify-content: center; color: #757575; margin-right: 24px;41 }42 .video-text { flex: 1; }43 .video-title { font-size: 40px; color: #FFFFFF; line-height: 1.2; }44 .video-meta { font-size: 32px; color: #9E9E9E; margin-top: 6px; }45 .check {46 width: 56px; height: 56px; border: 2px solid #5C6BC0; border-radius: 6px;47 display: flex; align-items: center; justify-content: center; margin-left: 12px;48 }49 .check svg { width: 40px; height: 40px; }50 .selected-count {51 position: absolute; top: 220px; right: 30px; font-size: 38px; color: #BDBDBD;52 }53 /* Scrim and modal */54 .scrim {55 position: absolute; top: 0; left: 0; width: 1080px; height: 1450px;56 background: rgba(0,0,0,0.55);57 pointer-events: none;58 }59 .modal {60 position: absolute; top: 620px; left: 90px; width: 900px;61 background: #1E1E1E; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.6);62 padding: 48px; z-index: 5;63 }64 .modal-title { font-size: 58px; font-weight: 700; margin-bottom: 38px; color: #FFFFFF; }65 .input-field {66 font-size: 56px; color: #FFFFFF; padding: 12px 0;67 border-bottom: 4px solid #1976D2; margin-bottom: 36px;68 }69 .chips { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }70 .chip {71 display: inline-flex; align-items: center; gap: 10px;72 background: #2A2A2A; color: #CFCFCF; padding: 14px 20px; border-radius: 24px;73 font-size: 36px;74 }75 .chip svg { width: 36px; height: 36px; }76 .modal-actions { display: flex; justify-content: flex-end; gap: 40px; margin-top: 20px; }77 .btn { font-size: 48px; color: #90CAF9; cursor: default; }78 .btn.primary { color: #63A4FF; }79 /* Keyboard */80 .keyboard {81 position: absolute; bottom: 0; left: 0; width: 1080px; height: 950px; background: #111111;82 border-top: 1px solid #1E1E1E;83 }84 .suggestion-bar {85 height: 120px; display: flex; align-items: center; gap: 40px; padding: 0 30px;86 color: #E0E0E0; background: #151515; font-size: 46px;87 }88 .suggestion {89 background: #222; padding: 10px 20px; border-radius: 16px; color: #D9D9D9;90 border: 1px solid #2E2E2E;91 }92 .keys { padding: 16px 20px; }93 .key-row { display: flex; justify-content: space-between; margin: 16px 0; }94 .key {95 width: 92px; height: 120px; background: #2B2B2B; border-radius: 16px;96 display: flex; align-items: center; justify-content: center;97 color: #F0F0F0; font-size: 48px; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);98 }99 .key.wide { width: 200px; }100 .space { flex: 1; height: 120px; background: #2B2B2B; border-radius: 16px; margin: 0 18px;101 display: flex; align-items: center; justify-content: center; color: #F0F0F0; font-size: 44px;102 }103 .bottom-row { display: flex; align-items: center; padding: 0 20px; gap: 18px; }104 .enter {105 width: 120px; height: 120px; background: #3259FF; border-radius: 24px;106 display: flex; align-items: center; justify-content: center;107 }108 .home-indicator {109 position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);110 width: 420px; height: 10px; background: #3A3A3A; border-radius: 10px;111 }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status Bar -->118 <div class="status-bar">119 <div class="status-left">120 <div>9:45</div>121 <svg class="icon" viewBox="0 0 24 24">122 <path d="M12 2l2 2-2 2-2-2 2-2zm0 8l2 2-2 2-2-2 2-2z" fill="#DADADA"/>123 </svg>124 <svg class="icon" viewBox="0 0 24 24">125 <circle cx="12" cy="12" r="3" fill="#DADADA"/>126 </svg>127 <svg class="icon" viewBox="0 0 24 24">128 <circle cx="12" cy="12" r="3" fill="#DADADA"/>129 </svg>130 <svg class="icon" viewBox="0 0 24 24">131 <circle cx="12" cy="12" r="3" fill="#DADADA"/>132 </svg>133 </div>134 <div class="status-right">135 <svg class="icon" viewBox="0 0 24 24">136 <path d="M2 14a10 10 0 0110-10v3a7 7 0 00-7 7H2zm3 0a7 7 0 017-7v3a4 4 0 00-4 4H5zm3 0a4 4 0 014-4v4H8z" fill="#DADADA"/>137 </svg>138 <svg class="icon" viewBox="0 0 24 24">139 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#DADADA" fill="none" stroke-width="2"/>140 <rect x="5" y="8" width="14" height="8" fill="#DADADA"/>141 <rect x="21" y="10" width="1.5" height="4" fill="#DADADA"/>142 </svg>143 </div>144 </div>145 146 <!-- App Bar -->147 <div class="app-bar">148 <div class="back">149 <svg viewBox="0 0 24 24" width="56" height="56">150 <path d="M5 5l14 14M19 5L5 19" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>151 </svg>152 </div>153 <div class="title">Add videos</div>154 <div class="next">Next</div>155 </div>156 157 <!-- Content List -->158 <div class="content">159 <div class="section-title">Recently Watched</div>160 161 <div class="video-item">162 <div class="thumb">[IMG: Animated band]</div>163 <div class="video-text">164 <div class="video-title">4*TOWN (From Disney and Pixar's Turning Red) - Nobody...</div>165 <div class="video-meta">DisneyMusicVEVO</div>166 </div>167 <div class="check">168 <svg viewBox="0 0 24 24">169 <path d="M4 12l4 4 8-8" stroke="#63A4FF" stroke-width="3" fill="none" stroke-linecap="round"/>170 </svg>171 </div>172 </div>173 174 <div class="video-item">175 <div class="thumb">[IMG: Street scene]</div>176 <div class="video-text">177 <div class="video-title">Nhảy theo điệu nhảy của các chú mèo nào các bạn ơi</div>178 <div class="video-meta">Thai Le • 148M views • 3 years ago</div>179 </div>180 <div class="check">181 <svg viewBox="0 0 24 24">182 <path d="M4 12l4 4 8-8" stroke="#63A4FF" stroke-width="3" fill="none" stroke-linecap="round"/>183 </svg>184 </div>185 </div>186 187 <div class="video-item">188 <div class="thumb">[IMG: Music video]</div>189 <div class="video-text">190 <div class="video-title">Katy Perry - Chained To The Rhythm (Official) ft. Skip Marley</div>191 <div class="video-meta">Katy Perry • 735M views • 6 years ago</div>192 </div>193 <div class="check" style="border-color:#4A4A4A;">194 <!-- unchecked -->195 </div>196 </div>197 </div>198 199 <div class="selected-count">2 videos selected</div>200 201 <!-- Scrim and Modal -->202 <div class="scrim"></div>203 <div class="modal">204 <div class="modal-title">New playlist</div>205 <div class="input-field">favourite <span style="color:#90CAF9;">song</span></div>206 <div class="chips">207 <div class="chip">208 <svg viewBox="0 0 24 24">209 <rect x="5" y="8" width="14" height="12" rx="3" ry="3" fill="#9E9E9E"/>210 <rect x="8" y="5" width="8" height="6" rx="3" ry="3" fill="#9E9E9E"/>211 </svg>212 Private213 </div>214 </div>215 <div class="modal-actions">216 <div class="btn">Cancel</div>217 <div class="btn primary">Create</div>218 </div>219 </div>220 221 <!-- Keyboard -->222 <div class="keyboard">223 <div class="suggestion-bar">224 <div class="suggestion">song</div>225 <div class="suggestion">songs</div>226 <div class="suggestion">songa</div>227 </div>228 <div class="keys">229 <div class="key-row">230 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>231 </div>232 <div class="key-row" style="padding: 0 46px;">233 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>234 </div>235 <div class="key-row" style="padding: 0 140px;">236 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>237 </div>238 <div class="bottom-row">239 <div class="key wide">?123</div>240 <div class="key">,</div>241 <div class="key">🙂</div>242 <div class="space">space</div>243 <div class="key">.</div>244 <div class="enter">245 <svg viewBox="0 0 24 24" width="64" height="64">246 <path d="M4 12l5 5 11-11" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round"/>247 </svg>248 </div>249 </div>250 </div>251 <div class="home-indicator"></div>252 </div>253 254</div>255</body>256</html>