GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Yoga - Video List</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #F5F6F8;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #222;17 }18 /* Top app bar */19 .appbar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 220px; /* includes status bar area */25 background: #1565C0;26 color: #fff;27 box-sizing: border-box;28 }29 .status-row {30 height: 90px;31 padding: 0 36px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 font-weight: 600;36 letter-spacing: 0.5px;37 }38 .status-right {39 display: flex;40 align-items: center;41 gap: 22px;42 }43 .top-row {44 height: 130px;45 display: flex;46 align-items: center;47 padding: 0 28px;48 gap: 24px;49 }50 .title {51 font-size: 44px;52 font-weight: 600;53 letter-spacing: 0.2px;54 }55 .icon-btn {56 width: 80px;57 height: 80px;58 display: inline-flex;59 align-items: center;60 justify-content: center;61 border-radius: 40px;62 }63 /* Content area */64 .content {65 position: absolute;66 top: 220px;67 left: 0;68 right: 0;69 bottom: 0;70 padding: 30px 32px 0;71 box-sizing: border-box;72 }73 .list-header {74 display: flex;75 align-items: center;76 justify-content: space-between;77 color: #6B6F76;78 font-size: 30px;79 padding: 24px 8px 16px;80 }81 .sort-right {82 display: flex;83 align-items: center;84 gap: 12px;85 color: #6B6F76;86 font-weight: 600;87 }88 .card {89 display: flex;90 align-items: flex-start;91 gap: 26px;92 padding: 34px 8px;93 border-top: 1px solid #E6E7EA;94 }95 .thumb {96 width: 420px;97 height: 236px;98 background: #E0E0E0;99 border: 1px solid #BDBDBD;100 border-radius: 18px;101 display: flex;102 align-items: center;103 justify-content: center;104 color: #757575;105 position: relative;106 overflow: hidden;107 font-size: 28px;108 }109 .duration {110 position: absolute;111 right: 12px;112 bottom: 12px;113 background: rgba(0,0,0,0.85);114 color: #fff;115 padding: 6px 12px;116 border-radius: 8px;117 font-size: 26px;118 letter-spacing: 0.5px;119 }120 .meta {121 flex: 1;122 padding-top: 8px;123 }124 .meta .title-line {125 font-size: 40px;126 font-weight: 700;127 margin-bottom: 10px;128 color: #222;129 }130 .meta .sub {131 font-size: 28px;132 color: #7A7F86;133 }134 .more-btn {135 width: 70px;136 height: 70px;137 display: inline-flex;138 align-items: center;139 justify-content: center;140 }141 /* Dim overlay and bottom sheet */142 .dim {143 position: absolute;144 left: 0; right: 0;145 top: 0; bottom: 0;146 background: rgba(0,0,0,0.55);147 }148 .sheet {149 position: absolute;150 left: 0;151 right: 0;152 bottom: 60px; /* leave room for gesture bar */153 height: 520px;154 background: #FFFFFF;155 border-top-left-radius: 28px;156 border-top-right-radius: 28px;157 box-shadow: 0 -8px 24px rgba(0,0,0,0.15);158 padding: 22px 36px;159 box-sizing: border-box;160 }161 .option {162 height: 140px;163 display: flex;164 align-items: center;165 justify-content: space-between;166 border-bottom: 1px solid #F0F1F3;167 }168 .option:last-child { border-bottom: none; }169 .opt-left {170 display: flex;171 align-items: center;172 gap: 28px;173 }174 .opt-title {175 font-size: 36px;176 color: #1F2329;177 }178 .badge {179 background: #4CBBA6;180 color: #fff;181 font-weight: 700;182 font-size: 26px;183 padding: 10px 18px;184 border-radius: 10px;185 }186 .socials {187 display: flex;188 align-items: center;189 gap: 18px;190 }191 .social {192 width: 70px; height: 70px;193 border-radius: 35px;194 background: #E9EEF6;195 display: flex; align-items: center; justify-content: center;196 color: #5F6D7A; font-weight: 800;197 font-size: 34px;198 }199 /* Gesture bar */200 .gesture {201 position: absolute;202 left: 340px;203 right: 340px;204 bottom: 12px;205 height: 10px;206 border-radius: 6px;207 background: #D2D4D8;208 }209 210 /* Simple SVG colors */211 .icon-white path { fill: #FFFFFF; }212 .icon-gray path { fill: #6B6F76; }213 .icon-dark path { fill: #1F2329; }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Top App Bar -->220 <div class="appbar">221 <div class="status-row">222 <div style="font-size:34px;">10:50</div>223 <div class="status-right">224 <!-- simple icons: signal, wifi, battery -->225 <svg width="38" height="28" viewBox="0 0 24 24"><path class="icon-white" d="M2 20h2l7-8 4 4 7-8v12H2z"/></svg>226 <svg width="34" height="28" viewBox="0 0 24 24"><path class="icon-white" d="M2 8c3.9-3.9 15.1-3.9 19 0l-2.1 2.1c-2.9-2.9-11.9-2.9-14.8 0L2 8zm4.2 4.2c2.6-2.6 10.9-2.6 13.5 0l-2.1 2.1c-1.8-1.8-7.5-1.8-9.3 0l-2.1-2.1zm4.2 4.2c1.3-1.3 4.8-1.3 6.1 0L14.6 18c-.7-.7-2.5-.7-3.2 0l-1.0-1.0z"/></svg>227 <svg width="40" height="28" viewBox="0 0 24 24"><path class="icon-white" d="M16 4h2l2 2v12l-2 2H6l-2-2V6l2-2h2V2h8v2zM6 6v12h12V6H6z"/></svg>228 </div>229 </div>230 <div class="top-row">231 <div class="icon-btn">232 <!-- close (X) -->233 <svg width="44" height="44" viewBox="0 0 24 24"><path class="icon-white" d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12 19 6.4z"/></svg>234 </div>235 <div class="title">Yoga</div>236 <div style="margin-left:auto" class="icon-btn">237 <!-- more vertical -->238 <svg width="44" height="44" viewBox="0 0 24 24"><path class="icon-white" d="M12 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>239 </div>240 </div>241 </div>242 243 <!-- Main content -->244 <div class="content">245 <div class="list-header">246 <div>1 ITEM</div>247 <div class="sort-right">248 <svg width="34" height="34" viewBox="0 0 24 24"><path class="icon-gray" d="M7 10l5 5 5-5H7z"/></svg>249 <div>DATE ADDED</div>250 </div>251 </div>252 253 <div class="card">254 <div class="thumb">255 [IMG: Yoga video thumbnail]256 <div class="duration">00:29</div>257 </div>258 <div class="meta">259 <div class="title-line">Untitled</div>260 <div class="sub">0 views · 15 minutes ago</div>261 </div>262 <div class="more-btn">263 <svg width="40" height="40" viewBox="0 0 24 24"><path class="icon-gray" d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>264 </div>265 </div>266 </div>267 268 <!-- Dim overlay and bottom sheet -->269 <div class="dim"></div>270 <div class="sheet">271 <div class="option">272 <div class="opt-left">273 <!-- link icon -->274 <svg width="54" height="54" viewBox="0 0 24 24"><path class="icon-dark" d="M3.9 12c0-2 1.6-3.6 3.6-3.6h3v2.2h-3c-.8 0-1.4.6-1.4 1.4s.6 1.4 1.4 1.4h3v2.2h-3c-2 0-3.6-1.6-3.6-3.6zm6-.9h3.2v1.8H9.9v-1.8zm10.2.9c0 2-1.6 3.6-3.6 3.6h-3v-2.2h3c.8 0 1.4-.6 1.4-1.4s-.6-1.4-1.4-1.4h-3V8.3h3c2 0 3.6 1.6 3.6 3.6z"/></svg>275 <div class="opt-title">Share vimeo.com link</div>276 </div>277 </div>278 279 <div class="option">280 <div class="opt-left">281 <!-- upload square -->282 <svg width="54" height="54" viewBox="0 0 24 24"><path class="icon-dark" d="M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm7 12v-5l-2.2 2.2-1.6-1.6L12 7l3.8 3.6-1.6 1.6L12 11v5h0z"/></svg>283 <div class="opt-title">Send video file</div>284 </div>285 <div class="badge">TRY PLUS</div>286 </div>287 288 <div class="option">289 <div class="opt-left">290 <!-- publish/swap icon -->291 <svg width="54" height="54" viewBox="0 0 24 24"><path class="icon-dark" d="M7 7h8l-2.5-2.5L14 3l5 5-5 5-1.5-1.5L15 9H7V7zm10 10H9l2.5 2.5L10 21l-5-5 5-5 1.5 1.5L9 15h8v2z"/></svg>292 <div class="opt-title">Publish to social</div>293 </div>294 <div class="socials">295 <div class="social">f</div>296 <div class="social">▶</div>297 </div>298 </div>299 </div>300 301 <!-- Gesture bar -->302 <div class="gesture"></div>303</div>304</body>305</html>