GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">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: #F3EDF9;14  }15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    padding: 0 40px;23    color: #4b4b55;24    display: flex;25    align-items: center;26    justify-content: space-between;27    font-size: 42px;28    box-sizing: border-box;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .dot {36    width: 32px;37    height: 32px;38    background: #6F6A77;39    border-radius: 50%;40  }41  /* Top toolbar */42  .top-toolbar {43    position: absolute;44    top: 140px;45    left: 0;46    width: 1080px;47    height: 140px;48    display: flex;49    align-items: center;50    justify-content: space-around;51    color: #6F6A77;52  }53  .tool-icon {54    width: 84px;55    height: 84px;56  }57 58  /* Canvas area */59  .canvas {60    position: absolute;61    top: 420px;62    left: 70px;63    width: 940px;64    height: 620px;65  }66  .side-panel {67    position: absolute;68    top: 0;69    width: 160px;70    height: 620px;71    background: #CFE3FF;72    border: 1px solid #BBD0F5;73  }74  .side-panel.left { left: -40px; }75  .side-panel.right { right: -40px; }76 77  .selected-card {78    position: absolute;79    left: 0;80    top: 0;81    width: 940px;82    height: 620px;83    border: 5px solid #9E8ACF;84    border-radius: 10px;85    box-shadow: 0 8px 18px rgba(0,0,0,0.12);86    background: #E0E0E0;87    display: flex;88    align-items: center;89    justify-content: center;90    color: #555;91    text-align: center;92    box-sizing: border-box;93  }94  .selected-card .label {95    font-size: 40px;96  }97  /* Resize handles */98  .handle {99    position: absolute;100    width: 36px;101    height: 36px;102    background: #D8CCF5;103    border: 3px solid #8E78C9;104    border-radius: 50%;105  }106  .h-tl { top: -18px; left: -18px; }107  .h-tr { top: -18px; right: -18px; }108  .h-bl { bottom: -18px; left: -18px; }109  .h-br { bottom: -18px; right: -18px; }110  .h-tm { top: -18px; left: calc(50% - 18px); }111  .h-bm { bottom: -18px; left: calc(50% - 18px); }112  .h-ml { top: calc(50% - 18px); left: -18px; }113  .h-mr { top: calc(50% - 18px); right: -18px; }114  .h-top-floating {115    position: absolute;116    top: -72px;117    left: calc(50% - 18px);118    width: 36px;119    height: 36px;120    background: #D8CCF5;121    border: 3px solid #8E78C9;122    border-radius: 50%;123  }124 125  /* Filmstrip */126  .filmstrip {127    position: absolute;128    bottom: 410px;129    left: 0;130    width: 1080px;131    height: 220px;132    display: flex;133    align-items: center;134    padding: 0 30px;135    box-sizing: border-box;136    gap: 28px;137  }138  .thumb {139    width: 210px;140    height: 140px;141    border-radius: 16px;142    background: #E0E0E0;143    border: 2px solid #BDBDBD;144    position: relative;145    overflow: hidden;146    display: flex;147    align-items: center;148    justify-content: center;149    color: #666;150  }151  .thumb.active {152    border-color: #8E78C9;153    box-shadow: 0 6px 12px rgba(0,0,0,0.15);154  }155  .thumb-label {156    position: absolute;157    bottom: -2px;158    left: 8px;159    font-size: 28px;160    color: #4b4b55;161  }162  .thumb .band-top {163    position: absolute;164    top: 0;165    left: 0;166    height: 60%;167    width: 100%;168    background: #F4D47E; /* default yellow */169  }170  .thumb .band-bottom {171    position: absolute;172    bottom: 0;173    left: 0;174    height: 40%;175    width: 100%;176    background: #E9E9E9;177  }178  .thumb.pink .band-top { background: #F6B2B9; }179  .thumb.blue .band-top { background: #6FB8FF; }180 181  .thumb-add {182    width: 120px;183    height: 160px;184    border-radius: 80px;185    background: #D9CEFA;186    border: 2px solid #BDB3EA;187    display: flex;188    align-items: center;189    justify-content: center;190    margin-left: auto;191  }192 193  /* Bottom tools */194  .bottom-tools {195    position: absolute;196    bottom: 210px;197    left: 0;198    width: 1080px;199    height: 140px;200    display: flex;201    align-items: center;202    justify-content: space-around;203    color: #6F6A77;204  }205  .tool-btn {206    width: 96px;207    height: 96px;208  }209 210  /* Android navigation pill */211  .nav-pill {212    position: absolute;213    bottom: 72px;214    left: 50%;215    transform: translateX(-50%);216    width: 360px;217    height: 14px;218    background: #A6A1AE;219    border-radius: 14px;220    opacity: 0.8;221  }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Status Bar -->228  <div class="status-bar">229    <div>7:10</div>230    <div class="status-icons">231      <div class="dot"></div>232      <div class="dot"></div>233      <div class="dot"></div>234      <span style="font-size:34px; color:#6F6A77;">oyo</span>235      <div class="dot"></div>236      <!-- Wi-Fi icon -->237      <svg width="44" height="44" class="tool-icon" viewBox="0 0 24 24">238        <path d="M2 8c5-4 15-4 20 0" stroke="#6F6A77" stroke-width="2" fill="none" stroke-linecap="round"/>239        <path d="M5 11c3-3 11-3 14 0" stroke="#6F6A77" stroke-width="2" fill="none" stroke-linecap="round"/>240        <path d="M8 14c2-2 6-2 8 0" stroke="#6F6A77" stroke-width="2" fill="none" stroke-linecap="round"/>241        <circle cx="12" cy="18" r="2" fill="#6F6A77"/>242      </svg>243      <!-- Signal + battery -->244      <svg width="44" height="44" viewBox="0 0 24 24">245        <rect x="3" y="4" width="3" height="16" fill="#6F6A77"/>246        <rect x="8" y="8" width="3" height="12" fill="#6F6A77"/>247        <rect x="13" y="11" width="3" height="9" fill="#6F6A77"/>248        <rect x="18" y="13" width="3" height="7" fill="#6F6A77"/>249      </svg>250      <svg width="44" height="44" viewBox="0 0 24 24">251        <rect x="3" y="7" width="16" height="10" rx="2" ry="2" stroke="#6F6A77" stroke-width="2" fill="none"/>252        <rect x="5" y="9" width="12" height="6" fill="#6F6A77"/>253        <rect x="20" y="10" width="2" height="4" fill="#6F6A77"/>254      </svg>255    </div>256  </div>257 258  <!-- Top Toolbar -->259  <div class="top-toolbar">260    <!-- Check -->261    <svg class="tool-icon" viewBox="0 0 24 24">262      <path d="M5 12l4 4 10-10" stroke="#6F6A77" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>263    </svg>264    <!-- Visibility off (eye strike) -->265    <svg class="tool-icon" viewBox="0 0 24 24">266      <path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" stroke="#6F6A77" stroke-width="2" fill="none"/>267      <circle cx="12" cy="12" r="3" fill="#6F6A77"/>268      <path d="M3 3l18 18" stroke="#6F6A77" stroke-width="2"/>269    </svg>270    <!-- Play -->271    <svg class="tool-icon" viewBox="0 0 24 24">272      <polygon points="6,4 20,12 6,20" fill="#6F6A77"/>273    </svg>274    <!-- Text (A + lines) -->275    <svg class="tool-icon" viewBox="0 0 24 24">276      <path d="M6 18h12M6 21h12" stroke="#6F6A77" stroke-width="2"/>277      <path d="M12 3l4 10h-2l-1-3H11l-1 3H8l4-10z" fill="#6F6A77"/>278    </svg>279    <!-- Plus -->280    <svg class="tool-icon" viewBox="0 0 24 24">281      <path d="M12 5v14M5 12h14" stroke="#6F6A77" stroke-width="2.5" stroke-linecap="round"/>282    </svg>283    <!-- Comment bubble -->284    <svg class="tool-icon" viewBox="0 0 24 24">285      <path d="M4 5h16v12H9l-5 5V5z" fill="none" stroke="#6F6A77" stroke-width="2"/>286      <path d="M7 9h10M7 12h7" stroke="#6F6A77" stroke-width="2"/>287    </svg>288    <!-- Kebab menu -->289    <svg class="tool-icon" viewBox="0 0 24 24">290      <circle cx="12" cy="5" r="2.5" fill="#6F6A77"/>291      <circle cx="12" cy="12" r="2.5" fill="#6F6A77"/>292      <circle cx="12" cy="19" r="2.5" fill="#6F6A77"/>293    </svg>294  </div>295 296  <!-- Canvas with selected image and side panels -->297  <div class="canvas">298    <div class="side-panel left"></div>299    <div class="side-panel right"></div>300 301    <div class="selected-card">302      <div class="label">[IMG: Happy Anniversary Card - Floral Wreath]</div>303 304      <!-- Handles -->305      <div class="handle h-tl"></div>306      <div class="handle h-tr"></div>307      <div class="handle h-bl"></div>308      <div class="handle h-br"></div>309      <div class="handle h-tm"></div>310      <div class="handle h-bm"></div>311      <div class="handle h-ml"></div>312      <div class="handle h-mr"></div>313      <div class="h-top-floating"></div>314    </div>315  </div>316 317  <!-- Filmstrip thumbnails -->318  <div class="filmstrip">319    <div class="thumb active">320      <div class="band-top" style="background:#8398B6;"></div>321      <div class="band-bottom"></div>322      <div style="position:absolute; inset:10px; border:2px solid #9E8ACF; border-radius:12px; background:#E0E0E0; display:flex; align-items:center; justify-content:center; color:#666;">[IMG: Anniversary Card]</div>323      <div class="thumb-label">1</div>324    </div>325 326    <div class="thumb blue">327      <div class="band-top"></div>328      <div class="band-bottom"></div>329      <div style="position:absolute; left:18px; top:18px; width:120px; height:90px; background:#E0E0E0; border:1px solid #BDBDBD; transform:rotate(-6deg); display:flex; align-items:center; justify-content:center; color:#757575;">[IMG]</div>330      <div class="thumb-label">2</div>331    </div>332 333    <div class="thumb pink">334      <div class="band-top"></div>335      <div class="band-bottom"></div>336      <div style="position:absolute; left:40px; top:18px; width:110px; height:100px; background:#E0E0E0; border:1px solid #BDBDBD; transform:rotate(-4deg); display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Pineapple]</div>337      <div class="thumb-label">3</div>338    </div>339 340    <div class="thumb pink">341      <div class="band-top"></div>342      <div class="band-bottom"></div>343      <div style="position:absolute; left:90px; top:8px; width:110px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD; transform:rotate(8deg); display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Pineapple]</div>344      <div class="thumb-label">4</div>345    </div>346 347    <div class="thumb-add">348      <svg width="60" height="60" viewBox="0 0 24 24">349        <path d="M12 5v14M5 12h14" stroke="#6F6A77" stroke-width="2.5" stroke-linecap="round"/>350      </svg>351    </div>352  </div>353 354  <!-- Bottom tools -->355  <div class="bottom-tools">356    <!-- Pencil -->357    <svg class="tool-btn" viewBox="0 0 24 24">358      <path d="M3 17l2 4 4-2L19 8l-4-4L5 15l-2 2z" fill="none" stroke="#6F6A77" stroke-width="2"/>359    </svg>360    <!-- Align lines -->361    <svg class="tool-btn" viewBox="0 0 24 24">362      <path d="M4 6h16M4 10h12M4 14h16M4 18h10" stroke="#6F6A77" stroke-width="2"/>363    </svg>364    <!-- Crop -->365    <svg class="tool-btn" viewBox="0 0 24 24">366      <path d="M7 3v14h14M3 7h14v14" stroke="#6F6A77" stroke-width="2"/>367    </svg>368    <!-- Image -->369    <svg class="tool-btn" viewBox="0 0 24 24">370      <rect x="3" y="5" width="18" height="14" rx="2" ry="2" stroke="#6F6A77" stroke-width="2" fill="none"/>371      <circle cx="9" cy="10" r="2" fill="#6F6A77"/>372      <path d="M5 17l5-4 4 3 5-4v5H5z" fill="#6F6A77"/>373    </svg>374    <!-- Add frame -->375    <svg class="tool-btn" viewBox="0 0 24 24">376      <rect x="5" y="5" width="14" height="14" stroke="#6F6A77" stroke-width="2" fill="none"/>377      <path d="M12 8v8M8 12h8" stroke="#6F6A77" stroke-width="2"/>378    </svg>379    <!-- Duplicate -->380    <svg class="tool-btn" viewBox="0 0 24 24">381      <rect x="7" y="7" width="12" height="12" stroke="#6F6A77" stroke-width="2" fill="none"/>382      <rect x="3" y="3" width="12" height="12" stroke="#6F6A77" stroke-width="2" fill="none"/>383    </svg>384    <!-- Print -->385    <svg class="tool-btn" viewBox="0 0 24 24">386      <path d="M7 7V3h10v4H7z" stroke="#6F6A77" stroke-width="2" fill="none"/>387      <rect x="4" y="9" width="16" height="7" rx="2" ry="2" stroke="#6F6A77" stroke-width="2" fill="none"/>388      <rect x="7" y="14" width="10" height="7" stroke="#6F6A77" stroke-width="2" fill="none"/>389    </svg>390  </div>391 392  <!-- Navigation pill -->393  <div class="nav-pill"></div>394</div>395</body>396</html>