GD-ML/AndroidCode
13.4k
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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 }15 /* Status bar */16 .status-bar {17 height: 110px;18 padding: 0 36px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #616161;23 font-size: 42px;24 letter-spacing: 1px;25 }26 .status-icons {27 display: flex;28 gap: 26px;29 align-items: center;30 }31 .icon-dot {32 width: 22px;33 height: 22px;34 background: #9E9E9E;35 border-radius: 50%;36 display: inline-block;37 }38 /* Top toolbar */39 .toolbar {40 height: 120px;41 padding: 0 24px;42 display: flex;43 align-items: center;44 gap: 36px;45 color: #2E2E2E;46 }47 .toolbar .spacer { flex: 1; }48 .icon-btn {49 width: 96px;50 height: 96px;51 display: inline-flex;52 align-items: center;53 justify-content: center;54 border-radius: 16px;55 color: #212121;56 }57 .icon-btn svg { width: 48px; height: 48px; stroke: currentColor; fill: none; stroke-width: 3; }58 /* Canvas area */59 .canvas-area {60 height: 950px;61 background: #F5F5F5;62 position: relative;63 overflow: hidden;64 }65 .band {66 position: absolute;67 top: 110px;68 left: 0;69 right: 0;70 height: 280px;71 background: #2E3A35;72 }73 .video-wrap {74 position: absolute;75 top: 140px;76 left: 90px;77 width: 900px;78 height: 510px;79 border: 6px solid #58A6FF;80 border-radius: 16px;81 overflow: hidden;82 box-shadow: 0 12px 28px rgba(0,0,0,0.25);83 }84 .video-placeholder {85 width: 100%;86 height: 100%;87 background: #E0E0E0;88 border-top: 1px solid #BDBDBD;89 border-bottom: 1px solid #BDBDBD;90 display: flex;91 align-items: center;92 justify-content: center;93 color: #616161;94 font-size: 44px;95 letter-spacing: 1px;96 }97 .resize-dot {98 width: 26px;99 height: 26px;100 background: #FFFFFF;101 border: 3px solid #58A6FF;102 border-radius: 50%;103 position: absolute;104 }105 .dot-tl { top: -13px; left: -13px; }106 .dot-tr { top: -13px; right: -13px; }107 .dot-bl { bottom: -13px; left: -13px; }108 .dot-br { bottom: -13px; right: -13px; }109 .play-overlay {110 position: absolute;111 top: 50%;112 left: 50%;113 width: 120px;114 height: 120px;115 margin-left: -60px;116 margin-top: -60px;117 background: rgba(0,0,0,0.55);118 border-radius: 50%;119 display: flex;120 align-items: center;121 justify-content: center;122 }123 .play-overlay svg { width: 60px; height: 60px; fill: #FFFFFF; }124 .timeline {125 position: absolute;126 bottom: 18px;127 left: 26px;128 right: 26px;129 display: flex;130 align-items: center;131 color: #FFFFFF;132 font-size: 36px;133 text-shadow: 0 2px 4px rgba(0,0,0,0.6);134 gap: 20px;135 }136 .progress {137 height: 8px;138 background: rgba(255,255,255,0.6);139 border-radius: 4px;140 flex: 1;141 position: relative;142 }143 .progress:before {144 content: "";145 position: absolute;146 height: 100%;147 width: 15%;148 background: #FFFFFF;149 border-radius: 4px;150 }151 .rotate {152 position: absolute;153 top: 700px;154 left: 50%;155 transform: translateX(-50%);156 width: 76px;157 height: 76px;158 background: #FFFFFF;159 border-radius: 50%;160 box-shadow: 0 6px 16px rgba(0,0,0,0.15);161 display: flex;162 align-items: center;163 justify-content: center;164 color: #333;165 }166 .rotate svg { width: 40px; height: 40px; stroke: #333; stroke-width: 3; fill: none; }167 /* Bottom sheet */168 .sheet {169 position: absolute;170 left: 0;171 right: 0;172 bottom: 36px;173 height: 980px;174 background: #FFFFFF;175 border-top-left-radius: 28px;176 border-top-right-radius: 28px;177 box-shadow: 0 -8px 24px rgba(0,0,0,0.12);178 display: flex;179 flex-direction: column;180 }181 .sheet-header {182 padding: 28px 36px;183 display: flex;184 align-items: center;185 gap: 16px;186 }187 .sheet-header .title {188 font-size: 56px;189 font-weight: 700;190 color: #1E1E1E;191 flex: 1;192 }193 .sheet-close {194 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: #6B6B6B;195 }196 .sheet-close svg { width: 40px; height: 40px; }197 .sheet-content {198 padding: 8px 36px 12px 36px;199 overflow: hidden;200 }201 .check-row {202 display: flex;203 align-items: center;204 gap: 20px;205 margin: 28px 0;206 color: #303030;207 font-size: 42px;208 }209 .checkbox {210 width: 44px;211 height: 44px;212 border: 3px solid #AAAAAA;213 border-radius: 10px;214 background: #FFFFFF;215 }216 .options-row {217 margin-top: 28px;218 display: flex;219 gap: 24px;220 overflow: hidden;221 }222 .option-btn {223 padding: 24px 36px;224 border: 3px solid #D4D4D4;225 border-radius: 18px;226 font-size: 40px;227 color: #2E2E2E;228 background: #FFFFFF;229 white-space: nowrap;230 }231 .option-btn.secondary {232 color: #616161;233 }234 .option-btn.selected {235 border-color: #7C4DFF;236 box-shadow: 0 0 0 4px rgba(124,77,255,0.12) inset;237 }238 /* Bottom navigation in sheet */239 .sheet-nav {240 margin-top: auto;241 padding: 22px 80px 30px 80px;242 display: flex;243 justify-content: space-between;244 border-top: 1px solid #EEEEEE;245 }246 .nav-item {247 display: flex;248 flex-direction: column;249 align-items: center;250 gap: 14px;251 color: #606060;252 font-size: 34px;253 }254 .nav-item svg { width: 44px; height: 44px; }255 .nav-item.active { color: #6E56FF; }256 /* Gesture bar */257 .gesture-bar {258 position: absolute;259 bottom: 8px;260 left: 50%;261 transform: translateX(-50%);262 width: 360px;263 height: 10px;264 border-radius: 10px;265 background: #000000;266 opacity: 0.7;267 }268</style>269</head>270<body>271<div id="render-target">272 273 <!-- Status bar -->274 <div class="status-bar">275 <div class="time">6:05</div>276 <div class="status-icons">277 <span class="icon-dot"></span>278 <span class="icon-dot" style="opacity:0.7;"></span>279 <span class="icon-dot" style="opacity:0.5;"></span>280 <span class="icon-dot" style="opacity:0.4;"></span>281 <!-- simple battery icon -->282 <svg width="46" height="24" viewBox="0 0 46 24">283 <rect x="2" y="4" width="36" height="16" rx="3" fill="none" stroke="#616161" stroke-width="3"></rect>284 <rect x="6" y="8" width="24" height="8" fill="#616161"></rect>285 <rect x="40" y="8" width="4" height="8" rx="1" fill="#616161"></rect>286 </svg>287 </div>288 </div>289 290 <!-- Toolbar -->291 <div class="toolbar">292 <!-- Back -->293 <div class="icon-btn" title="Back">294 <svg viewBox="0 0 24 24">295 <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"></path>296 </svg>297 </div>298 <!-- Preview (dashed play circle) -->299 <div class="icon-btn" title="Preview">300 <svg viewBox="0 0 24 24">301 <circle cx="12" cy="12" r="9" stroke-dasharray="3 3"></circle>302 <polygon points="10,8 16,12 10,16" fill="currentColor" stroke="none"></polygon>303 </svg>304 </div>305 <!-- Layers -->306 <div class="icon-btn" title="Layers">307 <svg viewBox="0 0 24 24">308 <path d="M4 12 L12 7 L20 12 L12 17 Z"></path>309 <path d="M4 16 L12 11 L20 16" opacity="0.8"></path>310 <path d="M4 8 L12 3 L20 8" opacity="0.8"></path>311 </svg>312 </div>313 <!-- Undo -->314 <div class="icon-btn" title="Undo">315 <svg viewBox="0 0 24 24">316 <path d="M9 7 L5 11 L9 15" stroke-linecap="round" stroke-linejoin="round"></path>317 <path d="M6 11 H13 A6 6 0 1 1 7 17" stroke-linecap="round"></path>318 </svg>319 </div>320 <div class="spacer"></div>321 <!-- More -->322 <div class="icon-btn" title="More">323 <svg viewBox="0 0 24 24">324 <circle cx="12" cy="5" r="2" fill="currentColor"></circle>325 <circle cx="12" cy="12" r="2" fill="currentColor"></circle>326 <circle cx="12" cy="19" r="2" fill="currentColor"></circle>327 </svg>328 </div>329 <!-- Download -->330 <div class="icon-btn" title="Download">331 <svg viewBox="0 0 24 24">332 <path d="M12 4 V14"></path>333 <path d="M7 9 L12 14 L17 9" stroke-linecap="round" stroke-linejoin="round"></path>334 <rect x="4" y="16" width="16" height="4" rx="2"></rect>335 </svg>336 </div>337 <!-- Share -->338 <div class="icon-btn" title="Share">339 <svg viewBox="0 0 24 24">340 <path d="M16 8 L8 12 L16 16"></path>341 <circle cx="18" cy="7" r="3"></circle>342 <circle cx="6" cy="12" r="3"></circle>343 <circle cx="18" cy="17" r="3"></circle>344 </svg>345 </div>346 </div>347 348 <!-- Canvas area with video -->349 <div class="canvas-area">350 <div class="band"></div>351 352 <div class="video-wrap">353 <div class="video-placeholder">[IMG: Video Frame]</div>354 355 <div class="play-overlay">356 <svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"></polygon></svg>357 </div>358 359 <div class="timeline">360 <div>00:00</div>361 <div class="progress"></div>362 <div>00:15</div>363 </div>364 365 <div class="resize-dot dot-tl"></div>366 <div class="resize-dot dot-tr"></div>367 <div class="resize-dot dot-bl"></div>368 <div class="resize-dot dot-br"></div>369 </div>370 371 <div class="rotate" title="Rotate">372 <svg viewBox="0 0 24 24">373 <path d="M12 5 A7 7 0 1 0 19 12" stroke-linecap="round"></path>374 <path d="M19 7 L19 12 L14 12" stroke-linecap="round"></path>375 </svg>376 </div>377 </div>378 379 <!-- Bottom sheet -->380 <div class="sheet">381 <div class="sheet-header">382 <!-- Collapse/expand arrow -->383 <svg width="40" height="40" viewBox="0 0 24 24" style="color:#6B6B6B">384 <path d="M6 10 L12 16 L18 10" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>385 </svg>386 <div class="title">Element Animations</div>387 <div class="sheet-close" title="Close">388 <svg viewBox="0 0 24 24">389 <path d="M6 6 L18 18 M18 6 L6 18" stroke="currentColor" stroke-width="3" stroke-linecap="round"></path>390 </svg>391 </div>392 </div>393 394 <div class="sheet-content">395 <div class="check-row">396 <div class="checkbox"></div>397 <div>Apply same animation to all pages</div>398 </div>399 <div class="check-row" style="margin-top: 18px;">400 <div class="checkbox"></div>401 <div>Animate elements together</div>402 </div>403 404 <div class="options-row">405 <div class="option-btn secondary">(None)</div>406 <div class="option-btn">None</div>407 <div class="option-btn">Bounce In</div>408 <div class="option-btn selected" style="color:#6E56FF;">Swing In</div>409 <div class="option-btn">Fade</div>410 </div>411 </div>412 413 <div class="sheet-nav">414 <div class="nav-item active">415 <svg viewBox="0 0 24 24">416 <circle cx="12" cy="12" r="9" fill="none" stroke="#6E56FF" stroke-width="3"></circle>417 <circle cx="12" cy="12" r="2" fill="#6E56FF"></circle>418 </svg>419 <div>Animations</div>420 </div>421 <div class="nav-item">422 <svg viewBox="0 0 24 24">423 <circle cx="12" cy="12" r="9" fill="none" stroke="#606060" stroke-width="3"></circle>424 <path d="M12 8 V12 L15 14" stroke="#606060" stroke-width="3" stroke-linecap="round"></path>425 </svg>426 <div>Duration</div>427 </div>428 <div class="nav-item">429 <svg viewBox="0 0 24 24">430 <rect x="4" y="4" width="6" height="6" fill="#606060"></rect>431 <rect x="14" y="4" width="6" height="6" fill="#606060"></rect>432 <rect x="4" y="14" width="6" height="6" fill="#606060"></rect>433 <rect x="14" y="14" width="6" height="6" fill="#606060"></rect>434 </svg>435 <div>Manage pages</div>436 </div>437 </div>438 </div>439 440 <!-- Gesture bar -->441 <div class="gesture-bar"></div>442</div>443</body>444</html>