GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f0f0f;15 color: #fff;16 }17 /* Status bar */18 .status-bar {19 height: 90px;20 padding: 0 28px;21 box-sizing: border-box;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #fff;26 background: #0b0b0b;27 font-size: 36px;28 letter-spacing: 0.5px;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 22px;34 opacity: 0.9;35 }36 .status-dot { width: 8px; height: 8px; background:#fff; border-radius: 50%; opacity: 0.6; }37 .icon-24 { width: 48px; height: 48px; fill: #fff; }38 /* Search header */39 .search-header {40 height: 130px;41 display: flex;42 align-items: center;43 padding: 0 18px 0 10px;44 box-sizing: border-box;45 background: #121212;46 border-bottom: 1px solid #1e1e1e;47 }48 .back-btn {49 width: 100px;50 display: flex;51 align-items: center;52 justify-content: center;53 }54 .search-pill {55 flex: 1;56 height: 86px;57 background: #232323;58 border-radius: 44px;59 border: 1px solid #2b2b2b;60 display: flex;61 align-items: center;62 padding: 0 26px;63 gap: 18px;64 box-sizing: border-box;65 }66 .search-text {67 font-size: 38px;68 color: #e6e6e6;69 flex: 1;70 white-space: nowrap;71 overflow: hidden;72 text-overflow: ellipsis;73 }74 .header-actions {75 width: 260px;76 display: flex;77 align-items: center;78 justify-content: space-between;79 padding-left: 16px;80 }81 /* Banner ad */82 .banner {83 width: 100%;84 height: 720px;85 background: linear-gradient(135deg, #3a1a9b, #2a0c64);86 position: relative;87 display: flex;88 align-items: center;89 justify-content: center;90 border-bottom: 1px solid #1f1f1f;91 }92 .banner .placeholder {93 width: 940px;94 height: 620px;95 background: #E0E0E0;96 border: 1px solid #BDBDBD;97 color: #757575;98 display: flex;99 align-items: center;100 justify-content: center;101 font-size: 40px;102 text-align: center;103 }104 .open-ext {105 position: absolute;106 right: 26px;107 bottom: 26px;108 width: 82px;109 height: 82px;110 background: rgba(0,0,0,0.55);111 border: 1px solid #3a3a3a;112 border-radius: 18px;113 display: flex;114 align-items: center;115 justify-content: center;116 }117 /* Ad details card */118 .ad-card {119 padding: 24px 28px 28px;120 background: #111111;121 border-bottom: 1px solid #1f1f1f;122 }123 .hint {124 font-size: 32px;125 color: #9aa0a6;126 margin-bottom: 18px;127 }128 .ad-row {129 display: flex;130 gap: 24px;131 align-items: flex-start;132 }133 .app-icon {134 width: 108px;135 height: 108px;136 border-radius: 22px;137 background: #E0E0E0;138 border: 1px solid #BDBDBD;139 color: #757575;140 display: flex;141 align-items: center;142 justify-content: center;143 font-size: 30px;144 }145 .ad-content {146 flex: 1;147 }148 .ad-title {149 font-size: 42px;150 line-height: 1.25;151 color: #ffffff;152 margin-bottom: 12px;153 }154 .ad-sub {155 font-size: 32px;156 color: #bfbfbf;157 line-height: 1.35;158 margin-bottom: 14px;159 }160 .ad-meta {161 display: flex;162 gap: 18px;163 align-items: center;164 font-size: 30px;165 color: #9aa0a6;166 margin-bottom: 26px;167 }168 .ad-actions {169 display: flex;170 gap: 24px;171 padding: 8px 0 6px;172 }173 .btn {174 height: 96px;175 padding: 0 56px;176 border-radius: 50px;177 font-size: 36px;178 display: inline-flex;179 align-items: center;180 justify-content: center;181 cursor: default;182 }183 .btn-outline {184 border: 2px solid #2b2b2b;185 color: #d0d0d0;186 background: #181818;187 }188 .btn-primary {189 background: #3ea6ff;190 color: #0b0b0b;191 border: none;192 }193 /* Shorts */194 .shorts-header {195 display: flex;196 align-items: center;197 gap: 18px;198 padding: 32px 28px 18px;199 }200 .shorts-icon {201 width: 48px; height: 48px;202 }203 .shorts-label {204 font-size: 42px;205 font-weight: 600;206 }207 .shorts-row {208 display: flex;209 gap: 22px;210 padding: 0 20px 30px 20px;211 overflow: hidden;212 }213 .short-card {214 width: 325px;215 height: 520px;216 border-radius: 18px;217 background: #E0E0E0;218 border: 1px solid #BDBDBD;219 color: #757575;220 display: flex;221 align-items: center;222 justify-content: center;223 font-size: 32px;224 }225 /* Bottom navigation */226 .bottom-nav {227 position: absolute;228 left: 0; right: 0; bottom: 70px;229 height: 170px;230 background: #0f0f0f;231 border-top: 1px solid #1e1e1e;232 display: flex;233 align-items: center;234 justify-content: space-around;235 }236 .nav-item {237 width: 170px;238 height: 150px;239 display: flex;240 flex-direction: column;241 align-items: center;242 justify-content: center;243 gap: 8px;244 color: #e5e5e5;245 font-size: 26px;246 }247 .nav-icon { width: 56px; height: 56px; fill: #e5e5e5; }248 .nav-item.inactive { color: #a7a7a7; }249 .nav-item.inactive .nav-icon { fill: #a7a7a7; }250 /* Gesture bar */251 .gesture {252 position: absolute;253 left: 50%;254 transform: translateX(-50%);255 bottom: 18px;256 width: 430px;257 height: 14px;258 background: #dcdcdc;259 border-radius: 8px;260 opacity: 0.85;261 }262</style>263</head>264<body>265<div id="render-target">266 <!-- Status Bar -->267 <div class="status-bar">268 <div>5:28</div>269 <div class="status-icons">270 <div class="status-dot"></div>271 <div class="status-dot"></div>272 <div class="status-dot"></div>273 <svg class="icon-24" viewBox="0 0 24 24" aria-label="Signal">274 <path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2v10zm4 0h2v-13h-2v13zm4 0h2V4h-2v16z"/>275 </svg>276 <svg class="icon-24" viewBox="0 0 24 24" aria-label="Battery">277 <path d="M16 6h2a2 2 0 012 2v8a2 2 0 01-2 2h-2v2H6V4h10v2z" opacity="0.2"/>278 <rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="1.5"/>279 <rect x="4.5" y="7.5" width="13" height="9" fill="#fff"/>280 </svg>281 </div>282 </div>283 284 <!-- Search Header -->285 <div class="search-header">286 <div class="back-btn">287 <svg class="icon-24" viewBox="0 0 24 24" aria-label="Back">288 <path d="M15.5 19L8.5 12l7-7" stroke="#fff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>289 </svg>290 </div>291 <div class="search-pill">292 <svg class="icon-24" viewBox="0 0 24 24" aria-label="Search">293 <circle cx="11" cy="11" r="7" stroke="#cfcfcf" stroke-width="2" fill="none"/>294 <path d="M20 20l-4-4" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>295 </svg>296 <div class="search-text">pop songs</div>297 <svg class="icon-24" viewBox="0 0 24 24" aria-label="Clear">298 <path d="M6 6l12 12M18 6L6 18" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>299 </svg>300 </div>301 <div class="header-actions">302 <svg class="icon-24" viewBox="0 0 24 24" aria-label="Voice">303 <rect x="10" y="4" width="4" height="10" rx="2" fill="#ffffff"/>304 <path d="M6 11a6 6 0 0012 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>305 <path d="M12 17v3" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>306 </svg>307 <svg class="icon-24" viewBox="0 0 24 24" aria-label="Cast">308 <path d="M3 5h18v12H14" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>309 <path d="M3 17a3 3 0 013 3M3 14a6 6 0 016 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>310 </svg>311 <svg class="icon-24" viewBox="0 0 24 24" aria-label="More">312 <circle cx="12" cy="5" r="2.2" fill="#fff"/>313 <circle cx="12" cy="12" r="2.2" fill="#fff"/>314 <circle cx="12" cy="19" r="2.2" fill="#fff"/>315 </svg>316 </div>317 </div>318 319 <!-- Large Banner Ad -->320 <div class="banner">321 <div class="placeholder">[IMG: Amazon Music Promotional Banner]</div>322 <div class="open-ext">323 <svg width="44" height="44" viewBox="0 0 24 24">324 <rect x="3" y="3" width="18" height="18" rx="3" ry="3" stroke="#cfcfcf" fill="none"/>325 <path d="M9 15l6-6M10 7h8v8" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>326 </svg>327 </div>328 </div>329 330 <!-- Ad Details Card -->331 <div class="ad-card">332 <div class="hint">Since you searched for <span style="color:#e5e5e5">pop songs</span></div>333 <div class="ad-row">334 <div class="app-icon">music</div>335 <div class="ad-content">336 <div class="ad-title">Download The Amazon Music App | Amazon Music: Songs & Podcasts</div>337 <div class="ad-sub">Ad-free music with free offline downloads. Included with Prime.</div>338 <div class="ad-meta">339 <span>Ad</span>340 <span>•</span>341 <span>4.2 ★</span>342 <span>•</span>343 <span>FREE</span>344 </div>345 <div class="ad-actions">346 <div class="btn btn-outline">Watch</div>347 <div class="btn btn-primary">Install</div>348 </div>349 </div>350 <svg class="icon-24" viewBox="0 0 24 24" aria-label="More">351 <circle cx="12" cy="5" r="2.2" fill="#fff"/>352 <circle cx="12" cy="12" r="2.2" fill="#fff"/>353 <circle cx="12" cy="19" r="2.2" fill="#fff"/>354 </svg>355 </div>356 </div>357 358 <!-- Shorts Section -->359 <div class="shorts-header">360 <svg class="shorts-icon" viewBox="0 0 24 24">361 <path d="M7 2l10 4-4 3 4 3-10 4 3-4-3-3 3-3-3-4z" fill="#ff2f2f"/>362 </svg>363 <div class="shorts-label">Shorts</div>364 </div>365 <div class="shorts-row">366 <div class="short-card">[IMG: Short Video 1]</div>367 <div class="short-card">[IMG: Short Video 2]</div>368 <div class="short-card">[IMG: Short Video 3]</div>369 <div class="short-card">[IMG: Short Video 4]</div>370 </div>371 372 <!-- Bottom Navigation -->373 <div class="bottom-nav">374 <div class="nav-item">375 <svg class="nav-icon" viewBox="0 0 24 24">376 <path d="M4 10l8-6 8 6v8a2 2 0 01-2 2h-4v-6H10v6H6a2 2 0 01-2-2v-8z"/>377 </svg>378 <div>Home</div>379 </div>380 <div class="nav-item inactive">381 <svg class="nav-icon" viewBox="0 0 24 24">382 <path d="M7 2l10 4-4 3 4 3-10 4 3-4-3-3 3-3-3-4z"/>383 </svg>384 <div>Shorts</div>385 </div>386 <div class="nav-item inactive">387 <svg class="nav-icon" viewBox="0 0 24 24">388 <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" fill="none"/>389 <path d="M12 8v8M8 12h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>390 </svg>391 <div></div>392 </div>393 <div class="nav-item inactive">394 <svg class="nav-icon" viewBox="0 0 24 24">395 <rect x="3" y="6" width="18" height="12" rx="2" fill="currentColor"/>396 <rect x="7" y="9" width="10" height="6" fill="#0f0f0f"/>397 </svg>398 <div>Subscriptions</div>399 </div>400 <div class="nav-item inactive">401 <svg class="nav-icon" viewBox="0 0 24 24">402 <rect x="4" y="5" width="16" height="14" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>403 <path d="M4 9h16M9 5v14" stroke="currentColor" stroke-width="2"/>404 </svg>405 <div>Library</div>406 </div>407 </div>408 409 <!-- Gesture bar -->410 <div class="gesture"></div>411</div>412</body>413</html>