GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    box-sizing: border-box;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    color: #222;29    font-weight: 600;30    font-size: 36px;31  }32  .status-icons {33    margin-left: 20px;34    display: flex;35    gap: 14px;36  }37  .dot {38    width: 20px;39    height: 20px;40    background: #444;41    border-radius: 50%;42    opacity: 0.85;43  }44  .status-right {45    margin-left: auto;46    display: flex;47    align-items: center;48    gap: 22px;49  }50  .battery {51    width: 52px;52    height: 26px;53    border: 3px solid #444;54    border-radius: 6px;55    position: relative;56  }57  .battery::after {58    content: "";59    position: absolute;60    right: -10px;61    top: 7px;62    width: 6px;63    height: 12px;64    background: #444;65    border-radius: 2px;66  }67  .battery-level {68    position: absolute;69    left: 4px;70    top: 4px;71    height: 14px;72    width: 32px;73    background: #4CAF50;74    border-radius: 2px;75  }76 77  /* App bar */78  .app-bar {79    position: absolute;80    top: 90px;81    left: 0;82    width: 1080px;83    height: 120px;84    display: flex;85    align-items: center;86    padding: 0 28px;87    box-sizing: border-box;88  }89  .app-left, .app-right {90    display: flex;91    align-items: center;92    gap: 30px;93  }94  .app-right { margin-left: auto; }95  .icon-btn {96    width: 72px;97    height: 72px;98    border-radius: 36px;99    border: 2px dashed #BDBDBD;100    display: flex;101    align-items: center;102    justify-content: center;103  }104  .icon-btn svg { width: 36px; height: 36px; fill: none; stroke: #222; stroke-width: 3; }105 106  /* Canvas area */107  .canvas {108    position: absolute;109    top: 210px;110    left: 0;111    width: 1080px;112    height: 1470px;113    box-sizing: border-box;114    background: #FAFAFA;115  }116 117  /* Banner-like stripes in canvas */118  .stripe-wrap {119    position: absolute;120    top: 340px;121    left: 0;122    width: 1080px;123    height: 540px;124  }125  .stripe-top {126    height: 190px;127    background: #263A33; /* deep green */128  }129  .stripe-mid {130    height: 210px;131    background: #FFE58F; /* pale yellow */132  }133  .stripe-bottom {134    height: 140px;135    background: #EDEDED;136  }137 138  /* Image overlay simulating video */139  .overlay-img {140    position: absolute;141    top: 370px;142    left: 125px;143    width: 830px;144    height: 520px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    box-shadow: 0 8px 24px rgba(0,0,0,0.2);148    display: flex;149    align-items: center;150    justify-content: center;151    color: #616161;152    text-transform: uppercase;153    letter-spacing: 6px;154    font-weight: 700;155    font-size: 72px;156  }157  .overlay-img span {158    background: rgba(255,255,255,0.7);159    padding: 6px 12px;160    border-radius: 6px;161    font-size: 40px;162    letter-spacing: 1px;163    color: #555;164    position: absolute;165    bottom: 22px;166    right: 22px;167  }168 169  /* Bottom sheet */170  .sheet {171    position: absolute;172    bottom: 0;173    left: 0;174    width: 1080px;175    height: 720px;176    background: #FFFFFF;177    border-top-left-radius: 36px;178    border-top-right-radius: 36px;179    box-shadow: 0 -12px 24px rgba(0,0,0,0.15);180    padding: 34px 40px;181    box-sizing: border-box;182  }183  .sheet-header {184    display: flex;185    align-items: center;186    margin-bottom: 30px;187  }188  .sheet-title {189    font-size: 54px;190    font-weight: 700;191    color: #222;192    flex: 1;193  }194  .close-btn {195    width: 64px;196    height: 64px;197    border-radius: 18px;198    border: 2px solid #D0D0D0;199    display: flex;200    align-items: center;201    justify-content: center;202  }203  .close-btn svg { width: 28px; height: 28px; stroke: #444; stroke-width: 3; fill: none; }204 205  /* Toggles */206  .toggle {207    display: flex;208    align-items: center;209    gap: 18px;210    font-size: 36px;211    color: #333;212    margin: 20px 0;213  }214  .checkbox {215    width: 44px;216    height: 44px;217    border: 3px solid #BDBDBD;218    border-radius: 10px;219    box-sizing: border-box;220  }221 222  /* Animation option buttons */223  .options-row {224    display: flex;225    gap: 28px;226    margin-top: 24px;227    flex-wrap: nowrap;228  }229  .pill {230    flex: 0 0 240px;231    height: 110px;232    border-radius: 26px;233    border: 2px solid #D8D8D8;234    display: flex;235    align-items: center;236    justify-content: center;237    font-size: 38px;238    color: #222;239    background: #FAFAFA;240  }241 242  /* Bottom navigation inside sheet */243  .sheet-nav {244    position: absolute;245    bottom: 26px;246    left: 0;247    width: 100%;248    display: flex;249    justify-content: space-around;250    align-items: flex-end;251    padding: 0 40px;252    box-sizing: border-box;253  }254  .nav-item {255    width: 300px;256    display: flex;257    flex-direction: column;258    align-items: center;259    gap: 16px;260    color: #333;261    font-size: 34px;262  }263  .nav-icon {264    width: 70px;265    height: 70px;266    border-radius: 35px;267    border: 2px solid #D0D0D0;268    display: flex;269    align-items: center;270    justify-content: center;271    position: relative;272  }273  .nav-icon svg { width: 36px; height: 36px; stroke: #555; stroke-width: 3; fill: none; }274  .selected .nav-icon {275    border-color: #7C4DFF;276    box-shadow: 0 0 0 6px rgba(124,77,255,0.18);277  }278  .badge {279    position: absolute;280    right: -8px;281    top: -8px;282    background: #7C4DFF;283    color: #fff;284    font-size: 22px;285    padding: 2px 8px;286    border-radius: 14px;287    line-height: 1.3;288  }289</style>290</head>291<body>292<div id="render-target">293 294  <!-- Status bar -->295  <div class="status-bar">296    6:15297    <div class="status-icons">298      <div class="dot"></div>299      <div class="dot"></div>300      <div class="dot"></div>301      <div class="dot"></div>302    </div>303    <div class="status-right">304      <svg width="28" height="28" viewBox="0 0 24 24">305        <circle cx="4" cy="12" r="2" fill="#444"></circle>306        <circle cx="12" cy="12" r="2" fill="#444"></circle>307        <circle cx="20" cy="12" r="2" fill="#444"></circle>308      </svg>309      <div class="battery">310        <div class="battery-level"></div>311      </div>312    </div>313  </div>314 315  <!-- App bar -->316  <div class="app-bar">317    <div class="app-left">318      <div class="icon-btn">319        <svg viewBox="0 0 24 24">320          <path d="M15 6 L7 12 L15 18" />321        </svg>322      </div>323      <div class="icon-btn">324        <svg viewBox="0 0 24 24">325          <polygon points="7,6 19,12 7,18" stroke-linejoin="round"></polygon>326        </svg>327      </div>328      <div class="icon-btn">329        <svg viewBox="0 0 24 24">330          <rect x="5" y="6" width="14" height="4"></rect>331          <rect x="7" y="12" width="10" height="4"></rect>332          <rect x="9" y="18" width="6" height="2"></rect>333        </svg>334      </div>335      <div class="icon-btn">336        <svg viewBox="0 0 24 24">337          <path d="M14 6 Q10 6 8 9 Q6 12 10 12" />338          <path d="M10 12 L7 9" />339        </svg>340      </div>341    </div>342    <div class="app-right">343      <div class="icon-btn">344        <svg viewBox="0 0 24 24">345          <circle cx="12" cy="5" r="2"></circle>346          <circle cx="12" cy="12" r="2"></circle>347          <circle cx="12" cy="19" r="2"></circle>348        </svg>349      </div>350      <div class="icon-btn">351        <svg viewBox="0 0 24 24">352          <path d="M12 5 L12 15" />353          <path d="M8 9 L12 5 L16 9" />354          <rect x="6" y="16" width="12" height="3" rx="1" />355        </svg>356      </div>357      <div class="icon-btn">358        <svg viewBox="0 0 24 24">359          <path d="M12 5 L19 12" />360          <path d="M19 12 L12 19" />361          <path d="M12 5 L5 12" />362          <path d="M5 12 L12 19" />363        </svg>364      </div>365    </div>366  </div>367 368  <!-- Canvas area -->369  <div class="canvas">370    <div class="stripe-wrap">371      <div class="stripe-top"></div>372      <div class="stripe-mid"></div>373      <div class="stripe-bottom"></div>374    </div>375 376    <div class="overlay-img">377      [IMG: FREEPIK video overlay]378      <span>Video placeholder</span>379    </div>380  </div>381 382  <!-- Bottom sheet -->383  <div class="sheet">384    <div class="sheet-header">385      <div class="sheet-title">Page Animations</div>386      <div class="close-btn">387        <svg viewBox="0 0 24 24">388          <path d="M6 6 L18 18" />389          <path d="M18 6 L6 18" />390        </svg>391      </div>392    </div>393 394    <div class="toggle">395      <div class="checkbox"></div>396      <div>Apply same animation to all pages</div>397    </div>398    <div class="toggle">399      <div class="checkbox"></div>400      <div>Animate elements together</div>401    </div>402 403    <div class="options-row">404      <div class="pill">Bounce In</div>405      <div class="pill">Swing In</div>406      <div class="pill">Fade In</div>407      <div class="pill">Rotate In</div>408    </div>409 410    <div class="sheet-nav">411      <div class="nav-item selected">412        <div class="nav-icon">413          <svg viewBox="0 0 24 24">414            <path d="M5 12 L12 5 L19 12 L12 19 Z" />415          </svg>416        </div>417        <div>Animations</div>418      </div>419      <div class="nav-item">420        <div class="nav-icon">421          <svg viewBox="0 0 24 24">422            <circle cx="12" cy="12" r="9"></circle>423            <path d="M12 4 L12 12 L17 15" />424          </svg>425        </div>426        <div>Duration</div>427      </div>428      <div class="nav-item">429        <div class="nav-icon">430          <span class="badge">9+</span>431          <svg viewBox="0 0 24 24">432            <rect x="5" y="5" width="14" height="10" rx="2"></rect>433            <path d="M7 19 L17 19" />434          </svg>435        </div>436        <div>Manage pages</div>437      </div>438    </div>439  </div>440 441</div>442</body>443</html>