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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #F2EEF6; /* soft lavender */15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 96px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 40px;28    color: #5B5B5B;29    font-size: 46px;30    letter-spacing: 1px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .dot {38    width: 26px;39    height: 26px;40    border-radius: 50%;41    background: #6F6F6F;42    opacity: 0.8;43  }44 45  /* Top toolbar */46  .toolbar {47    position: absolute;48    top: 96px;49    left: 0;50    width: 100%;51    height: 140px;52    display: flex;53    align-items: center;54    gap: 60px;55    padding: 0 80px;56    color: #6F6F6F;57  }58  .tool-btn {59    width: 72px;60    height: 72px;61  }62  .tool-btn svg { width: 100%; height: 100%; stroke: #6F6F6F; fill: none; stroke-width: 6; }63 64  /* Main content area */65  .content {66    position: absolute;67    top: 420px;68    left: 0;69    width: 100%;70  }71 72  /* Slide preview card */73  .slide-card {74    width: 960px;75    height: 540px;76    margin: 0 auto;77    background: #FFFFFF;78    border-radius: 12px;79    box-shadow: 0 6px 20px rgba(0,0,0,0.14);80    position: relative;81  }82  .slide-side {83    position: absolute;84    top: 0;85    width: 120px;86    height: 100%;87    background: #CDE0FF;88    border-radius: 12px 0 0 12px;89  }90  .slide-side.right {91    right: 0;92    border-radius: 0 12px 12px 0;93  }94  .slide-image {95    position: absolute;96    left: 60px;97    top: 30px;98    width: 840px;99    height: 480px;100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    display: flex;103    justify-content: center;104    align-items: center;105    color: #757575;106    font-size: 42px;107    text-align: center;108    border-radius: 8px;109  }110 111  /* Thumbnails row */112  .thumbs {113    position: absolute;114    bottom: 210px;115    left: 0;116    width: 100%;117    display: flex;118    gap: 36px;119    padding: 0 40px;120    align-items: flex-end;121  }122  .thumb {123    width: 220px;124    height: 150px;125    background: #FFFFFF;126    border-radius: 16px;127    box-shadow: 0 4px 16px rgba(0,0,0,0.12);128    position: relative;129    overflow: hidden;130  }131  .thumb .stripe-top {132    position: absolute;133    top: 0;134    left: 0;135    height: 70px;136    width: 100%;137    background: #CDE0FF; /* default blue */138  }139  .thumb.yellow .stripe-top { background: #F5D777; }140  .thumb.pink .stripe-top { background: #F5B9C2; }141  .thumb .stripe-bottom {142    position: absolute;143    bottom: 0;144    left: 0;145    height: 70px;146    width: 100%;147    background: #EDEDED;148  }149  .thumb .img {150    position: absolute;151    left: 18px;152    top: 24px;153    width: 184px;154    height: 102px;155    background: #E0E0E0;156    border: 1px solid #BDBDBD;157    display: flex;158    align-items: center;159    justify-content: center;160    color: #757575;161    font-size: 26px;162    border-radius: 6px;163  }164  .thumb-label {165    text-align: center;166    margin-top: 10px;167    color: #6F6F6F;168    font-size: 28px;169  }170 171  /* Floating action button (right pill) */172  .fab-pill {173    position: absolute;174    right: 24px;175    bottom: 380px;176    width: 120px;177    height: 220px;178    background: #C9B5F6;179    border-radius: 60px;180    box-shadow: 0 10px 20px rgba(0,0,0,0.18);181    display: flex;182    align-items: center;183    justify-content: center;184  }185  .fab-icon {186    width: 72px;187    height: 72px;188  }189  .fab-icon svg { width: 100%; height: 100%; stroke: #FFFFFF; fill: none; stroke-width: 6; }190 191  /* Bottom gesture bar */192  .gesture {193    position: absolute;194    bottom: 28px;195    left: 50%;196    transform: translateX(-50%);197    width: 320px;198    height: 16px;199    background: #9A9A9A;200    border-radius: 10px;201    opacity: 0.55;202  }203</style>204</head>205<body>206<div id="render-target">207 208  <!-- Status bar -->209  <div class="status-bar">210    <div>7:11</div>211    <div class="status-icons">212      <!-- simple circles to mimic status icons -->213      <svg width="34" height="34" viewBox="0 0 34 34">214        <circle cx="17" cy="17" r="10" fill="#6F6F6F" opacity="0.9"></circle>215      </svg>216      <svg width="34" height="34" viewBox="0 0 34 34">217        <circle cx="17" cy="17" r="10" fill="#6F6F6F" opacity="0.75"></circle>218      </svg>219      <svg width="34" height="34" viewBox="0 0 34 34">220        <circle cx="17" cy="17" r="10" fill="#6F6F6F" opacity="0.6"></circle>221      </svg>222      <svg width="34" height="34" viewBox="0 0 34 34">223        <rect x="6" y="8" width="22" height="18" rx="3" fill="#6F6F6F"></rect>224      </svg>225    </div>226  </div>227 228  <!-- Toolbar -->229  <div class="toolbar">230    <!-- back arrow -->231    <div class="tool-btn">232      <svg viewBox="0 0 48 48">233        <path d="M30 10 L16 24 L30 38" stroke-linecap="round" stroke-linejoin="round"></path>234      </svg>235    </div>236    <!-- undo -->237    <div class="tool-btn">238      <svg viewBox="0 0 48 48">239        <path d="M18 18 L10 24 L18 30" stroke-linecap="round" stroke-linejoin="round"></path>240        <path d="M14 24 C20 14, 36 14, 38 24 C40 32, 32 36, 24 34" stroke-linecap="round"></path>241      </svg>242    </div>243    <!-- redo -->244    <div class="tool-btn">245      <svg viewBox="0 0 48 48">246        <path d="M30 18 L38 24 L30 30" stroke-linecap="round" stroke-linejoin="round"></path>247        <path d="M34 24 C28 14, 12 14, 10 24 C8 32, 16 36, 24 34" stroke-linecap="round"></path>248      </svg>249    </div>250    <!-- play -->251    <div class="tool-btn">252      <svg viewBox="0 0 48 48">253        <polygon points="18,12 36,24 18,36" fill="#6F6F6F"></polygon>254      </svg>255    </div>256    <!-- plus -->257    <div class="tool-btn">258      <svg viewBox="0 0 48 48">259        <path d="M24 10 L24 38 M10 24 L38 24" stroke-linecap="round"></path>260      </svg>261    </div>262    <!-- comment bubble -->263    <div class="tool-btn">264      <svg viewBox="0 0 48 48">265        <path d="M10 12 H34 A4 4 0 0 1 38 16 V28 A4 4 0 0 1 34 32 H22 L16 38 V32 H10 A4 4 0 0 1 6 28 V16 A4 4 0 0 1 10 12 Z" stroke-linejoin="round"></path>266      </svg>267    </div>268    <!-- more (vertical dots) -->269    <div class="tool-btn">270      <svg viewBox="0 0 48 48">271        <circle cx="24" cy="12" r="4" fill="#6F6F6F"></circle>272        <circle cx="24" cy="24" r="4" fill="#6F6F6F"></circle>273        <circle cx="24" cy="36" r="4" fill="#6F6F6F"></circle>274      </svg>275    </div>276  </div>277 278  <!-- Main content -->279  <div class="content">280    <div class="slide-card">281      <div class="slide-side"></div>282      <div class="slide-side right"></div>283      <div class="slide-image">[IMG: Happy Anniversary floral card]</div>284    </div>285  </div>286 287  <!-- Thumbnails row -->288  <div class="thumbs">289    <div>290      <div class="thumb">291        <div class="stripe-top"></div>292        <div class="stripe-bottom"></div>293        <div class="img">[IMG: Slide 1]</div>294      </div>295      <div class="thumb-label">1</div>296    </div>297 298    <div>299      <div class="thumb yellow">300        <div class="stripe-top"></div>301        <div class="stripe-bottom"></div>302        <div class="img">[IMG: Slide 2]</div>303      </div>304      <div class="thumb-label">2</div>305    </div>306 307    <div>308      <div class="thumb pink">309        <div class="stripe-top"></div>310        <div class="stripe-bottom"></div>311        <div class="img">[IMG: Slide 3]</div>312      </div>313      <div class="thumb-label">3</div>314    </div>315 316    <div>317      <div class="thumb pink">318        <div class="stripe-top"></div>319        <div class="stripe-bottom"></div>320        <div class="img">[IMG: Slide 4]</div>321      </div>322      <div class="thumb-label">4</div>323    </div>324  </div>325 326  <!-- Floating action pill -->327  <div class="fab-pill">328    <div class="fab-icon">329      <svg viewBox="0 0 48 48">330        <rect x="10" y="10" width="16" height="16" rx="3"></rect>331        <rect x="22" y="22" width="16" height="16" rx="3"></rect>332        <path d="M24 5 L24 17 M18 11 L30 11" stroke-linecap="round"></path>333      </svg>334    </div>335  </div>336 337  <!-- Bottom gesture bar -->338  <div class="gesture"></div>339 340</div>341</body>342</html>