GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Transitions Panel</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #000000;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    color: #fff;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 32px;27    box-sizing: border-box;28  }29  .status-left { font-size: 48px; letter-spacing: 1px; }30  .status-right {31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .dot { width: 12px; height: 12px; background:#9AA0A6; border-radius:50%; display:inline-block; }36  .icon svg { width: 48px; height: 48px; fill: none; stroke: #ffffff; stroke-width: 5; }37 38  /* Slide workspace */39  .workspace {40    position: absolute;41    top: 140px;42    left: 0;43    width: 1080px;44    height: 1480px;45    /* just empty black area */46  }47 48  .slide {49    position: absolute;50    left: 24px;51    top: 340px;52    width: 1032px;53    height: 660px;54    border: 1px solid #A8A8A8;55    background: linear-gradient(90deg, #1f2c2a 0%, #223b36 60%, #cfe9c9 100%);56    box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset;57  }58  .slide-right {59    position: absolute;60    right: 0;61    top: 0;62    width: 320px;63    height: 100%;64    background: linear-gradient(135deg, #d8f0d5 0%, #cfe7c9 50%, #bfe0bf 100%);65    opacity: 0.85;66  }67  .slide-left-dark {68    position: absolute;69    left: 60px;70    top: 0;71    width: 700px;72    height: 100%;73    background: linear-gradient(180deg, rgba(25,45,42,0.95), rgba(24,40,38,0.95));74    mix-blend-mode: multiply;75  }76  .vertical-guide {77    position: absolute;78    left: 60px;79    top: 0;80    width: 4px;81    height: 100%;82    background: #63cbd0;83    opacity: 0.6;84  }85 86  .subtitle-box {87    position: absolute;88    left: 200px;89    top: 240px;90    width: 500px;91    height: 100px;92    border: 2px dashed rgba(120,180,180,0.6);93    display: flex;94    align-items: center;95    justify-content: center;96    color: #d5ece9;97    font-size: 32px;98  }99  .title-text {100    position: absolute;101    left: 200px;102    top: 360px;103    color: #ffffff;104    font-weight: 700;105    font-size: 80px;106    letter-spacing: 1px;107  }108  .tiny-triangle {109    position: absolute;110    left: 180px;111    top: 360px;112    width: 0;113    height: 0;114    border-left: 18px solid #5fd0c5;115    border-top: 10px solid transparent;116    border-bottom: 10px solid transparent;117    opacity: 0.8;118  }119 120  /* Bottom panel */121  .bottom-panel {122    position: absolute;123    left: 0;124    bottom: 0;125    width: 1080px;126    height: 760px;127    background: #161616;128    color: #ffffff;129    box-shadow: 0 -2px 0 rgba(255,255,255,0.06) inset;130  }131  .panel-header {132    height: 120px;133    display: flex;134    align-items: center;135    padding: 0 28px;136    box-sizing: border-box;137    border-bottom: 1px solid #2a2a2a;138  }139  .panel-title {140    color: #d97d33;141    font-size: 56px;142    font-weight: 600;143    flex: 1;144  }145  .panel-tools {146    display: flex;147    align-items: center;148    gap: 40px;149  }150  .tool svg { width: 48px; height: 48px; stroke: #bfbfbf; stroke-width: 5; fill: none; }151  .items {152    padding: 8px 0;153  }154  .item {155    height: 160px;156    display: flex;157    align-items: center;158    padding: 0 32px;159    box-sizing: border-box;160    border-bottom: 1px solid #272727;161    gap: 28px;162  }163  .item:last-child { border-bottom: none; }164  .item-icon {165    width: 80px;166    height: 80px;167    border-radius: 10px;168    display: flex;169    align-items: center;170    justify-content: center;171    background: #24303a;172  }173  .item-icon svg { width: 60px; height: 60px; stroke: #9ec9f7; fill: none; stroke-width: 5; }174  .item-text { font-size: 44px; flex: 1; }175  .chevron svg { width: 36px; height: 36px; stroke: #bdbdbd; stroke-width: 8; fill: none; }176 177  /* Bottom navigation pill */178  .nav-pill {179    position: absolute;180    left: 50%;181    transform: translateX(-50%);182    bottom: 22px;183    width: 300px;184    height: 12px;185    background: #e6e6e6;186    border-radius: 12px;187    opacity: 0.9;188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Status Bar -->195  <div class="status-bar">196    <div class="status-left">12:39</div>197    <div class="status-right">198      <span class="dot"></span>199      <span class="dot"></span>200      <span class="dot"></span>201      <div class="icon">202        <!-- WiFi -->203        <svg viewBox="0 0 24 24">204          <path d="M2 9c5-5 15-5 20 0"></path>205          <path d="M5 12c3.5-3.5 10.5-3.5 14 0"></path>206          <path d="M8 15c2-2 6-2 8 0"></path>207          <circle cx="12" cy="18" r="1.7" fill="#ffffff"></circle>208        </svg>209      </div>210      <div class="icon">211        <!-- Battery -->212        <svg viewBox="0 0 32 24">213          <rect x="2" y="5" width="24" height="14" rx="2" ry="2"></rect>214          <rect x="26" y="9" width="4" height="6" rx="1" ry="1"></rect>215          <rect x="4.5" y="7.5" width="16" height="9" fill="#ffffff" stroke="none"></rect>216        </svg>217      </div>218    </div>219  </div>220 221  <!-- Workspace with slide -->222  <div class="workspace">223    <div class="slide">224      <div class="vertical-guide"></div>225      <div class="slide-right"></div>226      <div class="slide-left-dark"></div>227      <div class="subtitle-box">Double tap to add subtitle</div>228      <div class="tiny-triangle"></div>229      <div class="title-text">The Hunter</div>230    </div>231  </div>232 233  <!-- Bottom Transitions Panel -->234  <div class="bottom-panel">235    <div class="panel-header">236      <div class="panel-title">Transitions</div>237      <div class="panel-tools">238        <!-- up/down chevrons near the title -->239        <div class="tool">240          <svg viewBox="0 0 24 24"><path d="M12 6l-6 6h12z"></path></svg>241        </div>242        <div class="tool">243          <svg viewBox="0 0 24 24"><path d="M6 12l6 6 6-6z"></path></svg>244        </div>245        <div class="tool">246          <!-- Light bulb -->247          <svg viewBox="0 0 24 24">248            <path d="M9 20h6"></path>249            <path d="M8 16c-2-2-2-6 0-8s6-2 8 0 2 6 0 8c-1 1-1 2-1 2H9s0-1-1-2z"></path>250          </svg>251        </div>252        <div class="tool">253          <!-- Undo -->254          <svg viewBox="0 0 24 24">255            <path d="M8 7l-5 5 5 5"></path>256            <path d="M20 12H5"></path>257          </svg>258        </div>259        <div class="tool">260          <!-- Redo -->261          <svg viewBox="0 0 24 24">262            <path d="M16 7l5 5-5 5"></path>263            <path d="M4 12h17"></path>264          </svg>265        </div>266        <div class="tool">267          <!-- caret/overflow -->268          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>269        </div>270      </div>271    </div>272 273    <div class="items">274      <!-- Transition Effects -->275      <div class="item">276        <div class="item-icon">277          <svg viewBox="0 0 24 24">278            <path d="M3 7h10"></path>279            <path d="M3 17h10"></path>280            <path d="M16 7l5 5-5 5"></path>281            <path d="M8 5l-3 2 3 2"></path>282          </svg>283        </div>284        <div class="item-text">Transition Effects</div>285        <div class="chevron">286          <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>287        </div>288      </div>289 290      <!-- Effect Options -->291      <div class="item">292        <div class="item-icon">293          <svg viewBox="0 0 24 24">294            <path d="M3 8h9"></path>295            <path d="M3 16h9"></path>296            <rect x="14" y="6" width="7" height="4" rx="1"></rect>297            <rect x="14" y="14" width="7" height="4" rx="1"></rect>298          </svg>299        </div>300        <div class="item-text">Effect Options</div>301        <div class="chevron">302          <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>303        </div>304      </div>305 306      <!-- Apply To All -->307      <div class="item">308        <div class="item-icon">309          <svg viewBox="0 0 24 24">310            <rect x="3" y="5" width="14" height="9" rx="1"></rect>311            <rect x="7" y="10" width="14" height="9" rx="1"></rect>312          </svg>313        </div>314        <div class="item-text">Apply To All</div>315      </div>316    </div>317 318    <div class="nav-pill"></div>319  </div>320 321</div>322</body>323</html>