GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000;14    border-radius: 0;15    box-shadow: none;16    color: #fff;17  }18  .status-bar {19    height: 140px;20    padding: 0 36px;21    background: linear-gradient(#2c2c2c, #1a1a1a);22    display: flex;23    align-items: center;24    justify-content: space-between;25    box-sizing: border-box;26  }27  .status-left { font-size: 40px; font-weight: 600; letter-spacing: 1px; }28  .status-center { display: flex; gap: 24px; align-items: center; }29  .status-right { display: flex; gap: 26px; align-items: center; }30  .icon { width: 40px; height: 40px; }31  .video-thumb {32    width: 1080px;33    height: 660px;34    background: #E0E0E0;35    border: 1px solid #BDBDBD;36    display: flex;37    align-items: center;38    justify-content: center;39    color: #757575;40    font-size: 36px;41  }42  .section { padding: 36px; box-sizing: border-box; }43  .title {44    font-size: 52px;45    font-weight: 800;46    line-height: 1.2;47    margin-bottom: 18px;48  }49  .subline {50    color: #bdbdbd;51    font-size: 30px;52  }53  .subline .tag { color: #9ed0ff; margin-right: 14px; }54  .channel-row {55    margin-top: 28px;56    display: flex;57    align-items: center;58    justify-content: space-between;59  }60  .channel-left { display: flex; align-items: center; gap: 26px; }61  .avatar {62    width: 92px; height: 92px; border-radius: 50%;63    background: #ffd54f; color: #222; font-weight: 800;64    display: flex; align-items: center; justify-content: center;65    border: 1px solid #BDBDBD;66    font-size: 40px;67  }68  .channel-text { display: flex; flex-direction: column; }69  .channel-name { font-size: 36px; font-weight: 700; }70  .channel-meta { font-size: 28px; color: #bdbdbd; }71  .subscribe-btn {72    background: #fff; color: #000; border-radius: 60px;73    padding: 24px 36px; font-size: 34px; font-weight: 700;74  }75  .actions {76    margin-top: 34px;77    display: flex; gap: 26px; flex-wrap: wrap;78  }79  .pill {80    display: flex; align-items: center; gap: 18px;81    padding: 22px 28px; border-radius: 42px;82    background: #1f1f1f; border: 1px solid #333;83    color: #fff; font-size: 30px;84  }85  .comments-card {86    margin-top: 32px;87    background: #171717;88    border: 1px solid #2a2a2a;89    border-radius: 28px;90    padding: 28px;91  }92  .comments-header { font-size: 36px; font-weight: 700; color: #eaeaea; margin-bottom: 22px; }93  .comment-row { display: flex; align-items: flex-start; gap: 22px; }94  .comment-avatar {95    width: 72px; height: 72px; border-radius: 50%;96    background: #E0E0E0; border: 1px solid #BDBDBD;97    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;98  }99  .comment-text { color: #d7d7d7; font-size: 30px; line-height: 1.4; flex: 1; }100  .comment-expand { width: 40px; height: 40px; margin-left: 12px; }101  .divider { height: 24px; }102  .next-thumb {103    width: 1080px; height: 630px;104    background: #E0E0E0; border: 1px solid #BDBDBD;105    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;106    position: relative;107  }108  .duration {109    position: absolute; right: 18px; bottom: 18px;110    background: rgba(0,0,0,0.8); color: #fff;111    padding: 10px 16px; border-radius: 8px; font-size: 26px;112  }113  .next-meta { padding: 24px 36px 12px 36px; display: flex; align-items: center; justify-content: space-between; }114  .next-left { display: flex; align-items: center; gap: 22px; }115  .next-title { font-size: 40px; font-weight: 800; }116  .next-sub { font-size: 28px; color: #bdbdbd; margin-top: 6px; }117  .kebab { width: 40px; height: 40px; }118  .gesture {119    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);120    width: 300px; height: 16px; background: #616161; border-radius: 12px; opacity: 0.8;121  }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status bar -->128  <div class="status-bar">129    <div class="status-left">10:02</div>130    <div class="status-center">131      <!-- Simple bell icons to mimic notifications -->132      <svg class="icon" viewBox="0 0 24 24">133        <path fill="#fff" d="M12 2c-3 0-5 2-5 5v4l-2 3v2h14v-2l-2-3V7c0-3-2-5-5-5zM9 19a3 3 0 0 0 6 0h-6z"/>134      </svg>135      <svg class="icon" viewBox="0 0 24 24">136        <path fill="#fff" d="M12 2c-3 0-5 2-5 5v4l-2 3v2h14v-2l-2-3V7c0-3-2-5-5-5zM9 19a3 3 0 0 0 6 0h-6z"/>137      </svg>138      <svg class="icon" viewBox="0 0 24 24">139        <path fill="#fff" d="M12 2c-3 0-5 2-5 5v4l-2 3v2h14v-2l-2-3V7c0-3-2-5-5-5zM9 19a3 3 0 0 0 6 0h-6z"/>140      </svg>141      <svg class="icon" viewBox="0 0 24 24">142        <path fill="#fff" d="M12 2c-3 0-5 2-5 5v4l-2 3v2h14v-2l-2-3V7c0-3-2-5-5-5zM9 19a3 3 0 0 0 6 0h-6z"/>143      </svg>144      <div style="width:8px;height:8px;background:#fff;border-radius:50%;"></div>145    </div>146    <div class="status-right">147      <!-- Wi-Fi -->148      <svg class="icon" viewBox="0 0 24 24">149        <path fill="#fff" d="M12 18l2 2-2 2-2-2 2-2zm-6-6a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm-3-3a14 14 0 0 1 18 0l-2 2a10 10 0 0 0-14 0L3 9z"/>150      </svg>151      <!-- Battery -->152      <svg class="icon" viewBox="0 0 26 24">153        <rect x="1" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>154        <rect x="3" y="8" width="14" height="8" fill="#fff"/>155        <rect x="20" y="9" width="4" height="6" rx="1" fill="#fff"/>156      </svg>157    </div>158  </div>159 160  <!-- Main video thumbnail -->161  <div class="video-thumb">[IMG: London travel video - castle and green lawn]</div>162 163  <!-- Title and metadata -->164  <div class="section">165    <div class="title">London Vacation Travel Guide | Expedia</div>166    <div class="subline">167      5M views · 10y ago168      <span class="tag">#sightseeing</span>169      <span class="tag">#London</span>170      <span class="tag">#vacation</span>171      ...more172    </div>173 174    <div class="channel-row">175      <div class="channel-left">176        <div class="avatar">↗</div>177        <div class="channel-text">178          <div class="channel-name">Expedia</div>179          <div class="channel-meta">1.15M</div>180        </div>181      </div>182      <div class="subscribe-btn">Subscribe</div>183    </div>184 185    <div class="actions">186      <div class="pill">187        <svg class="icon" viewBox="0 0 24 24">188          <path fill="#fff" d="M2 21h4V9H2v12zm6 0h9c1.1 0 2-.9 2-2v-7.5c0-.6-.3-1.2-.8-1.5l-6.2-4.2-.7-.3H8v15z"/>189        </svg>190        <span>30K</span>191      </div>192      <div class="pill">193        <svg class="icon" viewBox="0 0 24 24">194          <path fill="#fff" d="M14 9l5 5-5 5v-3H4v-4h10V9z"/>195        </svg>196        <span>Share</span>197      </div>198      <div class="pill">199        <svg class="icon" viewBox="0 0 24 24">200          <path fill="#fff" d="M7 6a5 5 0 0 1 8 4h-3l5 5 5-5h-3a8 8 0 1 0-14 5l2-2A6 6 0 0 1 7 6z"/>201        </svg>202        <span>Remix</span>203      </div>204      <div class="pill">205        <svg class="icon" viewBox="0 0 24 24">206          <path fill="#fff" d="M12 3v10l4-4h-3V3h-2zm-7 14h14v2H5v-2z"/>207        </svg>208        <span>Download</span>209      </div>210    </div>211 212    <div class="comments-card">213      <div class="comments-header">Comments 1.7K</div>214      <div class="comment-row">215        <div class="comment-avatar">[IMG]</div>216        <div class="comment-text">217          When your school in England uses travel videos for geography, you know the education system is getting l…218        </div>219        <svg class="comment-expand" viewBox="0 0 24 24">220          <path fill="#bdbdbd" d="M7 10l5 5 5-5H7z"/>221        </svg>222      </div>223    </div>224  </div>225 226  <div class="divider"></div>227 228  <!-- Next video thumbnail -->229  <div class="next-thumb">230    [IMG: Paris Travel Guide - Eiffel Tower framed with yellow border]231    <div class="duration">6:29</div>232  </div>233 234  <div class="next-meta">235    <div class="next-left">236      <div class="avatar">↗</div>237      <div>238        <div class="next-title">Paris Vacation Travel Guide | Expedia</div>239        <div class="next-sub">Expedia • 4.7M views • 10 years ago</div>240      </div>241    </div>242    <svg class="kebab" viewBox="0 0 24 24">243      <circle cx="12" cy="5" r="2" fill="#bdbdbd"/><circle cx="12" cy="12" r="2" fill="#bdbdbd"/><circle cx="12" cy="19" r="2" fill="#bdbdbd"/>244    </svg>245  </div>246 247  <!-- Gesture bar -->248  <div class="gesture"></div>249 250</div>251</body>252</html>