GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #F2ECF6;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 100px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 36px;27    color: #3D3D3D;28    font-size: 42px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .dot {36    width: 22px; height: 22px; background: #6A6A6A; border-radius: 50%;37  }38 39  /* App toolbar */40  .toolbar {41    position: absolute;42    top: 100px;43    left: 0;44    width: 1080px;45    height: 140px;46    display: flex;47    align-items: center;48    padding: 0 36px;49    gap: 46px;50    color: #5A5A5A;51  }52  .icon-btn {53    width: 72px; height: 72px;54    display: inline-flex; align-items: center; justify-content: center;55  }56  .icon-btn svg { width: 48px; height: 48px; stroke: #616161; fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }57  .play svg { fill: #616161; stroke: none; }58  .big-plus {59    margin-left: auto;60    width: 116px; height: 116px; border-radius: 58px;61    background: #D9D3FE;62    display: inline-flex; align-items: center; justify-content: center;63  }64  .big-plus svg { width: 60px; height: 60px; stroke: #5A5A9F; stroke-width: 8; }65 66  /* Main slide preview */67  .slide-preview {68    position: absolute;69    top: 280px;70    left: 36px;71    width: 1008px;72    height: 520px;73    border-radius: 12px;74    background: linear-gradient(#BBD3F6 0 50%, #E8E8E8 50% 100%);75    box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 6px 24px rgba(0,0,0,0.12);76  }77  .slide-overlay-text {78    position: absolute;79    left: 60px;80    top: 250px;81    width: 888px;82    color: #222;83    font-size: 28px;84    white-space: nowrap;85    overflow: hidden;86    text-overflow: ellipsis;87  }88  /* Card stack */89  .card {90    position: absolute;91    width: 640px;92    height: 340px;93    left: 220px;94    top: 150px;95    background: #FFFFFF;96    border-radius: 6px;97    box-shadow: 0 5px 0 rgba(0,0,0,0.12), 0 18px 32px rgba(0,0,0,0.25);98    transform-origin: center;99  }100  .card.shadow {101    background: #F5F5F5;102    top: 170px; left: 240px; transform: rotate(2.5deg);103    box-shadow: 0 4px 0 rgba(0,0,0,0.1), 0 12px 24px rgba(0,0,0,0.18);104  }105  .card.back {106    background: #EEEEEE;107    top: 190px; left: 260px; transform: rotate(-3deg);108    box-shadow: 0 3px 0 rgba(0,0,0,0.08), 0 10px 20px rgba(0,0,0,0.16);109  }110  .card.top { transform: rotate(-4deg); }111  .card-content {112    position: absolute; inset: 24px;113  }114  .card-title {115    font-size: 48px; color: #444; line-height: 1.2;116  }117  .card-sub { margin-top: 18px; font-size: 28px; color: #7A7A7A; }118 119  /* Thumbnails ribbon */120  .thumbs {121    position: absolute;122    top: 850px;123    left: 36px;124    width: 1008px;125    height: 220px;126    display: flex;127    align-items: center;128    gap: 26px;129  }130  .thumb {131    width: 220px; height: 160px;132    border-radius: 16px;133    background: linear-gradient(#BBD3F6 0 50%, #E8E8E8 50% 100%);134    box-shadow: 0 4px 14px rgba(0,0,0,0.12);135    position: relative;136  }137  .thumb.selected { outline: 8px solid #6B79C9; }138  .thumb-num {139    position: absolute; bottom: -34px; left: 6px;140    font-size: 28px; color: #6A6A6A;141  }142  .thumb.yellow { background: linear-gradient(#F2CD63 0 50%, #E8E8E8 50% 100%); }143  .thumb.pink { background: linear-gradient(#F2B6B6 0 50%, #E8E8E8 50% 100%); }144  /* Image placeholders in thumbnails */145  .thumb .img-ph {146    position: absolute; right: 18px; bottom: 18px;147    width: 90px; height: 120px;148    background: #E0E0E0; border: 1px solid #BDBDBD;149    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;150    border-radius: 6px;151    transform: rotate(-4deg);152  }153  .thumb .blue-card {154    position: absolute; left: 18px; bottom: 18px;155    width: 70px; height: 90px; border-radius: 6px;156    background: #3E7BFA; color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center;157  }158 159  /* Floating add slide button */160  .floating-add {161    position: absolute;162    top: 852px;163    right: 26px;164    width: 120px; height: 220px;165    display: flex; align-items: center; justify-content: center;166  }167  .floating-add .pill {168    width: 100px; height: 200px; border-radius: 50px;169    background: #D9D3FE; display: flex; align-items: center; justify-content: center; gap: 8px; flex-direction: column;170    box-shadow: 0 8px 28px rgba(0,0,0,0.18);171  }172  .floating-add svg { width: 46px; height: 46px; stroke: #5A5A9F; stroke-width: 7; fill: none; }173  .floating-add .plus { width: 56px; height: 56px; border-radius: 50%; background: #E7E3FF; display: flex; align-items: center; justify-content: center; }174  .floating-add .plus svg { width: 38px; height: 38px; }175 176  /* Bottom sheet */177  .sheet {178    position: absolute;179    left: 0; right: 0;180    top: 1150px;181    height: 1100px;182    background: #ECE6F4;183    border-top-left-radius: 36px; border-top-right-radius: 36px;184    box-shadow: 0 -18px 40px rgba(0,0,0,0.15);185  }186  .sheet-header {187    height: 120px; display: flex; align-items: center; gap: 28px; padding: 0 36px; color: #3F3F3F;188    font-size: 44px;189  }190  .sheet-header .icon-btn { width: 72px; height: 72px; }191  .sheet-body { padding: 10px 36px; }192  .sheet-item {193    height: 160px; display: flex; align-items: center; gap: 36px; color: #3F3F3F; font-size: 40px;194    border-top: 1px solid rgba(0,0,0,0.08);195  }196  .sheet-icon {197    width: 88px; height: 88px; display: flex; align-items: center; justify-content: center;198  }199  .sheet-icon svg { width: 88px; height: 88px; stroke: #5F5F5F; stroke-width: 6; fill: none; }200 201  /* Gesture bar */202  .gesture-bar {203    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);204    width: 240px; height: 12px; border-radius: 8px; background: #A3A3A3;205    opacity: 0.7;206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status bar -->213  <div class="status-bar">214    <div>7:06</div>215    <div class="status-icons">216      <div class="dot"></div>217      <div class="dot" style="opacity:.6"></div>218      <div class="dot" style="opacity:.4"></div>219      <svg viewBox="0 0 24 24">220        <path d="M3 12h6l-2 2m-4-2l2-2" />221      </svg>222      <svg viewBox="0 0 24 24">223        <rect x="1" y="5" width="18" height="12" rx="2"></rect>224        <rect x="20" y="9" width="3" height="4" rx="1"></rect>225      </svg>226    </div>227  </div>228 229  <!-- App toolbar -->230  <div class="toolbar">231    <div class="icon-btn">232      <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"></path></svg>233    </div>234    <div class="icon-btn">235      <svg viewBox="0 0 24 24"><path d="M20 12a8 8 0 1 1-7-7"></path><path d="M9 11H4l3-3"></path></svg>236    </div>237    <div class="icon-btn">238      <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 7-7"></path><path d="M15 11h5l-3-3"></path></svg>239    </div>240    <div class="icon-btn play">241      <svg viewBox="0 0 24 24"><polygon points="8,5 20,12 8,19"></polygon></svg>242    </div>243    <div class="big-plus">244      <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"></path></svg>245    </div>246    <div class="icon-btn">247      <svg viewBox="0 0 24 24"><path d="M4 5h14v10l-4-3-4 3-6-4z"></path></svg>248    </div>249    <div class="icon-btn">250      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle