GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>UI Render - Add Videos / New Playlist</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #0f0f0f; color: #fff;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0;16    height: 120px; background: #0a0a0a;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 40px; font-size: 44px; letter-spacing: 0.5px;19  }20  .status-right { display: flex; align-items: center; gap: 28px; }21  .status-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.85; }22  .status-icon svg { width: 44px; height: 44px; fill: #fff; }23 24  /* Header */25  .header {26    position: absolute; top: 120px; left: 0; right: 0;27    height: 120px; display: flex; align-items: center;28    padding: 0 36px; color: #eaeaea;29  }30  .header .back {31    width: 88px; height: 88px; display: flex; align-items: center; justify-content: center;32  }33  .header .back svg { width: 44px; height: 44px; stroke: #eaeaea; stroke-width: 8; }34  .header .title { font-size: 56px; margin-left: 12px; }35  .header .next { margin-left: auto; font-size: 46px; color: #7fb7ff; }36 37  /* Content list */38  .content {39    position: absolute; top: 240px; left: 0; right: 0; bottom: 1000px;40    padding: 0 36px; overflow: hidden;41  }42  .section-title {43    font-size: 40px; color: #b5b5b5; margin-top: 12px; margin-bottom: 24px;44  }45  .video-item {46    display: flex; align-items: center;47    margin-bottom: 30px;48  }49  .thumb {50    width: 300px; height: 170px; background: #E0E0E0;51    border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;52    color: #757575; position: relative; border-radius: 8px;53    overflow: hidden;54  }55  .duration {56    position: absolute; right: 12px; bottom: 12px;57    background: rgba(0,0,0,0.75); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 30px;58  }59  .video-info {60    flex: 1; margin-left: 26px;61  }62  .video-title {63    font-size: 42px; line-height: 1.2; color: #eaeaea;64  }65  .video-meta {66    font-size: 34px; color: #9b9b9b; margin-top: 10px;67  }68  .checkbox {69    width: 60px; height: 60px; border: 4px solid #6b6b6b; border-radius: 8px; margin-left: 20px;70  }71 72  /* Modal */73  .modal {74    position: absolute; left: 50%; top: 720px; transform: translateX(-50%);75    width: 860px; background: #202020; border-radius: 14px;76    box-shadow: 0 18px 60px rgba(0,0,0,0.7); padding: 40px 40px 34px 40px; color: #fff;77  }78  .modal-title { font-size: 56px; margin-bottom: 30px; }79  .input-label { font-size: 40px; color: #cfcfcf; }80  .input-line {81    margin-top: 24px; height: 80px; display: flex; align-items: center;82    border-bottom: 6px solid #2e2e2e; position: relative;83  }84  .input-placeholder { font-size: 46px; color: #a8a8a8; }85  .input-underline {86    position: absolute; bottom: -6px; left: 0; width: 100%; height: 6px; background: #2e2e2e;87  }88  .input-underline.active { background: #3b78ff; }89  .privacy-pill {90    display: inline-flex; align-items: center; gap: 14px;91    margin-top: 28px; background: #2a2a2a; color: #e8e8e8; padding: 16px 22px; border-radius: 14px;92    font-size: 36px;93  }94  .privacy-pill svg { width: 40px; height: 40px; fill: #e8e8e8; }95  .modal-actions {96    display: flex; justify-content: flex-end; gap: 40px; margin-top: 28px; font-size: 44px;97  }98  .action-cancel { color: #99a4ae; }99  .action-create { color: #6eb6ff; }100 101  /* Keyboard */102  .keyboard {103    position: absolute; bottom: 0; left: 0; right: 0;104    height: 1000px; background: #121212; border-top: 1px solid #1e1e1e;105    padding: 36px 30px 40px 30px;106  }107  .key-row { display: flex; justify-content: space-between; margin-bottom: 30px; }108  .key {109    background: #2a2a2a; color: #fff;110    height: 120px; border-radius: 22px; display: flex; align-items: center; justify-content: center;111    font-size: 46px; min-width: 90px;112    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.5);113  }114  .key.small { min-width: 84px; }115  .key.space { flex: 1; margin: 0 16px; }116  .key.icon { font-size: 42px; color: #c9c9c9; }117  .key.wide { min-width: 160px; }118  .key.backspace { min-width: 140px; }119  .bottom-row { display: flex; align-items: center; gap: 18px; }120 121  /* Footer gesture pill */122  .gesture-pill {123    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);124    width: 480px; height: 12px; border-radius: 12px; background: #e6e6e6; opacity: 0.65;125  }126 127  /* Misc small text near header right */128  .selected-count {129    position: absolute; top: 176px; right: 36px; font-size: 34px; color: #9b9b9b;130  }131</style>132</head>133<body>134<div id="render-target">135 136  <!-- Status bar -->137  <div class="status-bar">138    <div class="status-left">9:15</div>139    <div class="status-right">140      <div class="status-icon">✉️</div>141      <div class="status-icon">☁️</div>142      <div class="status-icon">143        <!-- Wi-Fi icon -->144        <svg viewBox="0 0 24 24"><path d="M12 18c.8 0 1.5.7 1.5 1.5S12.8 21 12 21s-1.5-.7-1.5-1.5S11.2 18 12 18zm-6.7-6.2a12.7 12.7 0 0 1 13.4 0l-1.7 1.7a10 10 0 0 0-10 0l-1.7-1.7zm3.9 3.9a7.2 7.2 0 0 1 8.6 0l-1.8 1.8a4.7 4.7 0 0 0-5 0l-1.8-1.8z"/></svg>145      </div>146      <div class="status-icon">147        <!-- Battery icon -->148        <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect><rect x="21" y="10" width="2" height="4"></rect></svg>149      </div>150    </div>151  </div>152 153  <!-- Header -->154  <div class="header">155    <div class="back">156      <svg viewBox="0 0 24 24">157        <line x1="5" y1="5" x2="19" y2="19"></line>158        <line x1="19" y1="5" x2="5" y2="19"></line>159      </svg>160    </div>161    <div class="title">Add videos</div>162    <div class="next">Next</div>163  </div>164  <div class="selected-count">0 videos selected</div>165 166  <!-- List content -->167  <div class="content">168    <div class="section-title">Recently Watched</div>169 170    <div class="video-item">171      <div class="thumb">172        [IMG: Rome Vlog Street Scene]173        <div class="duration">16:50</div>174      </div>175      <div class="video-info">176        <div class="video-title">What to do in Rome for 3 days | Italy Travel Vlog 2022</div>177        <div class="video-meta">Hannah JY Moon</div>178      </div>179      <div class="checkbox"></div>180    </div>181 182    <div class="video-item">183      <div class="thumb">184        [IMG: Music Video]185        <div class="duration">5:07</div>186      </div>187      <div class="video-info">188        <div class="video-title">Stereophonics - Graffiti On The Train</div>189        <div class="video-meta">Stereophonics Official · 14M views · 10 years ago</div>190      </div>191      <div class="checkbox"></div>192    </div>193 194    <div class="video-item">195      <div class="thumb">196        [IMG: Dragon Artwork]197        <div class="duration">0:54</div>198      </div>199      <div class="video-info">200        <div class="video-title">Respect 🔥😎</div>201        <div class="video-meta">GmmRich · 50M views · 1 month ago</div>202      </div>203      <div class="checkbox"></div>204    </div>205  </div>206 207  <!-- Modal: New playlist -->208  <div class="modal">209    <div class="modal-title">New playlist</div>210    <div class="input-line">211      <div class="input-placeholder">Title</div>212      <div class="input-underline active"></div>213    </div>214    <div class="privacy-pill">215      <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0-5 5v3H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-2V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z"/></svg>216      Private217    </div>218    <div class="modal-actions">219      <div class="action-cancel">Cancel</div>220      <div class="action-create">Create</div>221    </div>222  </div>223 224  <!-- Keyboard -->225  <div class="keyboard">226    <!-- top utility row -->227    <div class="key-row">228      <div class="key small">🟦</div>229      <div class="key icon">GIF</div>230      <div class="key icon">Gx</div>231      <div class="key icon">🎨</div>232      <div class="key icon">🎤</div>233    </div>234 235    <!-- QWERTY row -->236    <div class="key-row">237      <div class="key">Q</div><div class="key">W</div><div class="key">E</div><div class="key">R</div>238      <div class="key">T</div><div class="key">Y</div><div class="key">U</div><div class="key">I</div>239      <div class="key">O</div><div class="key">P</div>240    </div>241 242    <!-- ASDF row -->243    <div class="key-row">244      <div class="key">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div>245      <div class="key">G</div><div class="key">H</div><div class="key">J</div><div class="key">K</div>246      <div class="key">L</div>247    </div>248 249    <!-- ZXCV row -->250    <div class="key-row">251      <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div>252      <div class="key">B</div><div class="key">N</div><div class="key">M</div>253      <div class="key backspace">⌫</div>254    </div>255 256    <!-- bottom function row -->257    <div class="bottom-row">258      <div class="key wide">?123</div>259      <div class="key">,</div>260      <div class="key">🙂</div>261      <div class="key space"></div>262      <div class="key">.</div>263      <div class="key wide">✔️</div>264    </div>265  </div>266 267  <div class="gesture-pill"></div>268</div>269</body>270</html>