GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Video Trim UI</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: #000;15    font-family: "Roboto", Arial, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    display: flex;27    align-items: center;28    padding: 0 28px;29    box-sizing: border-box;30    font-size: 44px;31    letter-spacing: 0.5px;32  }33  .status-left { flex: 0 0 auto; }34  .status-center {35    flex: 1 1 auto;36    display: flex;37    align-items: center;38    justify-content: center;39    gap: 36px;40    opacity: 0.9;41  }42  .status-right {43    flex: 0 0 auto;44    display: flex;45    align-items: center;46    gap: 28px;47  }48  .status-icon { display: inline-flex; align-items: center; }49 50  /* App bar */51  .app-bar {52    position: absolute;53    top: 110px;54    left: 0;55    width: 1080px;56    height: 120px;57    background: #1e1e1e;58    display: flex;59    align-items: center;60    padding: 0 24px;61    box-sizing: border-box;62    font-size: 40px;63  }64  .app-bar .left {65    display: flex;66    align-items: center;67    gap: 20px;68    color: #e0e0e0;69  }70  .app-bar .right {71    margin-left: auto;72    font-weight: 600;73    color: #ffffff;74    letter-spacing: 1px;75  }76 77  /* Main video frame */78  .video-frame {79    position: absolute;80    top: 230px;81    left: 0;82    width: 1080px;83    height: 720px;84    background: #E0E0E0;85    border-top: 1px solid #BDBDBD;86    border-bottom: 1px solid #BDBDBD;87    display: flex;88    align-items: center;89    justify-content: center;90    color: #757575;91    font-size: 42px;92  }93 94  /* Controls area */95  .controls {96    position: absolute;97    top: 970px;98    left: 0;99    width: 1080px;100    height: 140px;101    display: grid;102    grid-template-columns: 1fr 1fr 1fr;103    align-items: center;104    box-sizing: border-box;105    padding: 0 40px;106    font-size: 44px;107  }108  .controls .time { justify-self: start; opacity: 0.95; }109  .controls .play { justify-self: center; }110  .controls .sound { justify-self: end; }111 112  /* Timeline area */113  .timeline-area {114    position: absolute;115    top: 1110px;116    left: 0;117    width: 1080px;118    height: 1140px;119  }120  .timeline-line {121    position: absolute;122    left: 540px;123    top: 30px;124    width: 4px;125    height: 1030px;126    background: #e6e6e6;127    border-radius: 2px;128    opacity: 0.95;129  }130 131  /* Thumbnail strip and trim handle */132  .thumb-strip {133    position: absolute;134    right: 60px;135    bottom: 140px;136    width: 520px;137    height: 300px;138    background: #90CAF9;139    border-radius: 14px;140    box-shadow: 0 4px 10px rgba(0,0,0,0.35);141    display: flex;142    align-items: center;143    overflow: hidden;144  }145  .thumb-handle {146    width: 30px;147    height: 100%;148    background: #6EB6F3;149    display: flex;150    align-items: center;151    justify-content: center;152  }153  .thumb-handle .bar {154    width: 6px;155    height: 70px;156    background: #2E88D6;157    border-radius: 3px;158    margin: 6px 0;159  }160  .thumb-content {161    flex: 1;162    display: grid;163    grid-template-columns: 1fr 1fr;164    gap: 0;165    height: 100%;166  }167  .thumb {168    background: #E0E0E0;169    border-left: 1px solid #BDBDBD;170    border-right: 1px solid #BDBDBD;171    display: flex;172    align-items: center;173    justify-content: center;174    color: #757575;175    font-size: 36px;176  }177 178  /* Gesture pill */179  .gesture-pill {180    position: absolute;181    left: 50%;182    transform: translateX(-50%);183    bottom: 44px;184    width: 360px;185    height: 18px;186    background: #ffffff;187    border-radius: 12px;188    opacity: 0.9;189  }190 191  /* Helpers */192  .muted { opacity: 0.8; }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status bar -->199  <div class="status-bar">200    <div class="status-left">8:52</div>201    <div class="status-center">202      <span class="status-icon muted">20°</span>203      <span class="status-icon">•</span>204      <span class="status-icon">205        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">206          <path d="M12 3a9 9 0 100 18 9 9 0 000-18zm0 2c1.7 0 3.3.6 4.5 1.6L12 12 7.5 6.6A7 7 0 0112 5z" />207        </svg>208      </span>209      <span class="status-icon">210        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">211          <path d="M4 6h16v12H4zM6 8h12v8H6z" />212        </svg>213      </span>214    </div>215    <div class="status-right">216      <span class="status-icon">217        <!-- Wi-Fi icon -->218        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">219          <path d="M2 8c5.3-4.7 14.7-4.7 20 0l-2 2c-4.9-4-11.1-4-16 0L2 8zM6 12c3.6-3 8.4-3 12 0l-2 2c-2.7-2.1-5.3-2.1-8 0l-2-2zM10 16l2 2 2-2-2-2-2 2z"/>220        </svg>221      </span>222      <span class="status-icon">223        <!-- Battery icon -->224        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">225          <path d="M17 6h2v12h-2z" opacity="0.6"/>226          <path d="M3 7h13v10H3zM18 10h2v4h-2z"/>227        </svg>228      </span>229    </div>230  </div>231 232  <!-- App bar -->233  <div class="app-bar">234    <div class="left">235      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">236        <path d="M15 6L9 12l6 6"/>237      </svg>238    </div>239    <div class="right">SKIP</div>240  </div>241 242  <!-- Video preview frame -->243  <div class="video-frame">[IMG: Yoga video frame]</div>244 245  <!-- Playback controls -->246  <div class="controls">247    <div class="time">00:00 / 00:29</div>248    <div class="play">249      <svg width="84" height="84" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">250        <path d="M8 5l12 7-12 7V5z"/>251      </svg>252    </div>253    <div class="sound">254      <svg width="72" height="72" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">255        <path d="M4 9h4l4-3v12l-4-3H4V9z"/>256        <path d="M16 9c1.7 1.3 1.7 4.7 0 6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>257      </svg>258    </div>259  </div>260 261  <!-- Timeline area -->262  <div class="timeline-area">263    <div class="timeline-line"></div>264 265    <!-- Thumbnail strip near bottom right of the timeline -->266    <div class="thumb-strip">267      <div class="thumb-handle">268        <div class="bar"></div>269      </div>270      <div class="thumb-content">271        <div class="thumb">[IMG: Yoga thumbnail 1]</div>272        <div class="thumb">[IMG: Yoga thumbnail 2]</div>273      </div>274    </div>275  </div>276 277  <!-- Gesture pill -->278  <div class="gesture-pill"></div>279 280</div>281</body>282</html>