GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    height: 64px;21    width: 100%;22    display: flex;23    align-items: center;24    padding: 0 28px;25    color: #333;26    font-size: 32px;27  }28  .status-right {29    margin-left: auto;30    display: flex;31    gap: 18px;32    align-items: center;33  }34  .dot {35    width: 18px;36    height: 18px;37    background: #333;38    border-radius: 50%;39  }40 41  /* App toolbar */42  .toolbar {43    position: absolute;44    top: 64px;45    left: 0;46    height: 104px;47    width: 100%;48    display: flex;49    align-items: center;50    padding: 0 30px;51    gap: 34px;52    color: #222;53  }54  .tool-icon {55    width: 64px;56    height: 64px;57    display: inline-flex;58    align-items: center;59    justify-content: center;60  }61  .dashed-circle {62    border: 2px dashed #666;63    border-radius: 50%;64  }65 66  /* Toast */67  .toast {68    position: absolute;69    top: 190px;70    left: 50%;71    transform: translateX(-50%);72    width: 500px;73    height: 100px;74    background: #EAF8EE;75    border: 1px solid #CDE8D2;76    border-radius: 16px;77    display: flex;78    align-items: center;79    padding: 0 24px;80    box-sizing: border-box;81    color: #2F6B3B;82    font-weight: 600;83    gap: 18px;84  }85  .toast .close {86    margin-left: auto;87    color: #5A7A63;88    font-weight: 700;89    font-size: 28px;90    cursor: default;91  }92 93  /* Workspace / page preview */94  .workspace {95    position: absolute;96    top: 310px;97    left: 0;98    width: 100%;99    height: 1050px;100    background: #f7f7f7;101  }102  .page-frame {103    position: absolute;104    top: 60px;105    left: 0;106    width: 100%;107    height: 620px;108    background: #33403B; /* dark green band */109  }110  .page-frame .yellow-band {111    position: absolute;112    bottom: -100px;113    left: 0;114    width: 100%;115    height: 160px;116    background: #F7EFA6;117  }118  .collage-strip {119    position: absolute;120    bottom: -320px;121    left: 0;122    width: 100%;123    height: 320px;124    background: #ddd;125  }126  .video-overlay {127    position: absolute;128    top: 160px;129    left: 120px;130    width: 840px;131    height: 520px;132    background: #E0E0E0;133    border: 1px solid #BDBDBD;134    display: flex;135    align-items: center;136    justify-content: center;137    color: #757575;138    font-weight: 600;139    letter-spacing: 0.5px;140  }141 142  /* Bottom sheet */143  .sheet {144    position: absolute;145    left: 0;146    top: 1500px;147    width: 100%;148    height: 760px;149    background: #fff;150    border-top-left-radius: 26px;151    border-top-right-radius: 26px;152    box-shadow: 0 -8px 20px rgba(0,0,0,0.08);153    padding: 36px 40px 120px;154    box-sizing: border-box;155  }156  .sheet-header {157    display: flex;158    align-items: center;159    font-size: 48px;160    font-weight: 700;161    color: #212121;162  }163  .sheet-header .spacer { flex: 1; }164  .sheet-header .close-x {165    font-size: 46px;166    font-weight: 700;167    color: #444;168  }169  .check-row {170    margin-top: 36px;171    display: flex;172    align-items: center;173    gap: 22px;174    font-size: 36px;175    color: #333;176  }177  .checkbox {178    width: 46px;179    height: 46px;180    border: 2px solid #9E9E9E;181    border-radius: 8px;182  }183 184  .btn-row {185    margin-top: 40px;186    display: flex;187    flex-wrap: wrap;188    gap: 26px;189  }190  .pill-btn {191    padding: 30px 36px;192    border: 1px solid #CFCFCF;193    border-radius: 18px;194    font-size: 40px;195    color: #222;196    background: #F9F9F9;197  }198 199  /* Bottom navigation inside sheet */200  .sheet-nav {201    position: absolute;202    bottom: 40px;203    left: 0;204    width: 100%;205    display: flex;206    justify-content: space-around;207    padding: 0 40px;208    box-sizing: border-box;209  }210  .nav-item {211    display: flex;212    flex-direction: column;213    align-items: center;214    color: #777;215    font-size: 34px;216  }217  .nav-item.active { color: #5B4CF0; }218  .nav-icon {219    width: 72px;220    height: 72px;221    margin-bottom: 14px;222    display: flex;223    align-items: center;224    justify-content: center;225    border-radius: 18px;226    background: #F0EEFF;227    border: 1px solid #DCD7FF;228  }229  .nav-item.active .nav-icon {230    background: #EAE7FF;231    border-color: #C8BEFF;232  }233 234  /* Home indicator */235  .home-indicator {236    position: absolute;237    bottom: 20px;238    left: 50%;239    transform: translateX(-50%);240    width: 440px;241    height: 12px;242    background: #000;243    border-radius: 8px;244  }245</style>246</head>247<body>248<div id="render-target">249 250  <!-- Status bar -->251  <div class="status-bar">252    <div>6:22</div>253    <div class="status-right">254      <div class="dot"></div>255      <div class="dot"></div>256      <div class="dot"></div>257    </div>258  </div>259 260  <!-- Toolbar -->261  <div class="toolbar">262    <div class="tool-icon">263      <svg width="44" height="44" viewBox="0 0 24 24">264        <path d="M15 6 L9 12 L15 18" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>265      </svg>266    </div>267    <div class="tool-icon dashed-circle">268      <svg width="40" height="40" viewBox="0 0 24 24">269        <polygon points="9,7 17,12 9,17" fill="#333"/>270      </svg>271    </div>272    <div class="tool-icon">273      <svg width="48" height="48" viewBox="0 0 24 24">274        <rect x="5" y="5" width="14" height="3" fill="#222"/>275        <rect x="7" y="10" width="10" height="3" fill="#222"/>276        <rect x="9" y="15" width="6" height="3" fill="#222"/>277      </svg>278    </div>279    <div class="tool-icon">280      <svg width="46" height="46" viewBox="0 0 24 24">281        <path d="M7 13c3-3 7-3 10 0" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>282        <path d="M7 13 L10 16" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>283      </svg>284    </div>285    <div style="margin-left:auto;"></div>286    <div class="tool-icon">287      <svg width="40" height="40" viewBox="0 0 24 24">288        <circle cx="12" cy="5" r="2" fill="#222"/>289        <circle cx="12" cy="12" r="2" fill="#222"/>290        <circle cx="12" cy="19" r="2" fill="#222"/>291      </svg>292    </div>293    <div class="tool-icon">294      <svg width="44" height="44" viewBox="0 0 24 24">295        <path d="M12 5v9" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>296        <path d="M8 10l4 4 4-4" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>297        <rect x="5" y="19" width="14" height="2" fill="#222"/>298      </svg>299    </div>300    <div class="tool-icon">301      <svg width="44" height="44" viewBox="0 0 24 24">302        <path d="M5 12v7h14v-7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>303        <path d="M9 9l3-3 3 3" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>304        <path d="M12 6v9" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>305      </svg>306    </div>307  </div>308 309  <!-- Toast -->310  <div class="toast">311    <svg width="36" height="36" viewBox="0 0 24 24">312      <circle cx="12" cy="12" r="10" fill="#61C07C"/>313      <path d="M8 12l3 3 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>314    </svg>315    <div>All saved!</div>316    <div class="close">×</div>317  </div>318 319  <!-- Workspace preview -->320  <div class="workspace">321    <div class="page-frame">322      <div class="yellow-band"></div>323      <div class="video-overlay">[IMG: Video placeholder with watermark]</div>324    </div>325    <div class="collage-strip"></div>326  </div>327 328  <!-- Bottom Sheet -->329  <div class="sheet">330    <div class="sheet-header">331      <div>Page Animations</div>332      <div class="spacer"></div>333      <div class="close-x">✕</div>334    </div>335 336    <div class="check-row">337      <div class="checkbox"></div>338      <div>Apply same animation to all pages</div>339    </div>340    <div class="check-row">341      <div class="checkbox"></div>342      <div>Animate elements together</div>343    </div>344 345    <div class="btn-row">346      <div class="pill-btn">Bounce In</div>347      <div class="pill-btn">Swing In</div>348      <div class="pill-btn">Fade In</div>349      <div class="pill-btn">Rotate in from left</div>350    </div>351 352    <div class="sheet-nav">353      <div class="nav-item active">354        <div class="nav-icon">355          <svg width="34" height="34" viewBox="0 0 24 24">356            <circle cx="12" cy="12" r="6" fill="#5B4CF0"/>357            <circle cx="17" cy="7" r="2" fill="#5B4CF0"/>358          </svg>359        </div>360        <div>Animations</div>361      </div>362      <div class="nav-item">363        <div class="nav-icon">364          <svg width="34" height="34" viewBox="0 0 24 24">365            <circle cx="12" cy="12" r="9" stroke="#7C7C7C" stroke-width="2" fill="none"/>366            <path d="M12 7v6l4 2" stroke="#7C7C7C" stroke-width="2" fill="none" stroke-linecap="round"/>367          </svg>368        </div>369        <div>Duration</div>370      </div>371      <div class="nav-item">372        <div class="nav-icon">373          <svg width="34" height="34" viewBox="0 0 24 24">374            <rect x="4" y="4" width="16" height="16" rx="3" ry="3" stroke="#7C7C7C" stroke-width="2" fill="none"/>375            <text x="7" y="16" font-size="9" fill="#7C7C7C">9+</text>376          </svg>377        </div>378        <div>Manage pages</div>379      </div>380    </div>381  </div>382 383  <!-- Home indicator -->384  <div class="home-indicator"></div>385</div>386</body>387</html>