GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Recreation - Rename Dialog</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 color: #222;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #0f5fae;21 border-radius: 0;22 box-shadow: none;23 }24 25 /* Status bar */26 .status-bar {27 position: absolute;28 top: 0;29 left: 0;30 width: 1080px;31 height: 90px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 padding: 0 24px;36 color: #fff;37 font-size: 36px;38 letter-spacing: 0.5px;39 }40 .status-right {41 display: flex;42 align-items: center;43 gap: 22px;44 }45 .status-dot {46 width: 24px;47 height: 24px;48 background: #fff;49 border-radius: 50%;50 opacity: 0.9;51 }52 .wifi-icon, .battery-icon {53 width: 44px;54 height: 24px;55 }56 57 /* App header */58 .header {59 position: absolute;60 top: 90px;61 left: 0;62 width: 1080px;63 height: 360px;64 padding: 0 32px;65 box-sizing: border-box;66 color: #ffffff;67 }68 .header-title {69 margin-top: 100px;70 font-size: 76px;71 font-weight: 600;72 opacity: 0.95;73 }74 .header-actions {75 position: absolute;76 right: 20px;77 top: 120px;78 display: flex;79 gap: 34px;80 }81 .action-btn {82 width: 56px;83 height: 56px;84 display: flex;85 align-items: center;86 justify-content: center;87 opacity: 0.95;88 }89 .tabs {90 position: absolute;91 bottom: 0;92 left: 0;93 width: 1080px;94 height: 90px;95 display: flex;96 align-items: center;97 justify-content: space-between;98 padding: 0 60px;99 box-sizing: border-box;100 color: #cbe0ff;101 letter-spacing: 3px;102 font-weight: 700;103 }104 105 /* Carousel strip */106 .carousel {107 position: absolute;108 top: 450px;109 left: 0;110 width: 1080px;111 height: 210px;112 background: #0f5fae;113 display: flex;114 align-items: center;115 gap: 18px;116 padding: 0 24px;117 box-sizing: border-box;118 }119 .thumb {120 width: 180px;121 height: 160px;122 background: #E0E0E0;123 border: 1px solid #BDBDBD;124 border-radius: 16px;125 display: flex;126 align-items: center;127 justify-content: center;128 color: #757575;129 font-size: 28px;130 text-align: center;131 }132 .price {133 margin-top: 6px;134 color: #ffffff;135 font-size: 28px;136 text-align: center;137 opacity: 0.9;138 }139 140 /* Main content area below header (dim blue) */141 .content-bg {142 position: absolute;143 top: 360px;144 left: 0;145 width: 1080px;146 height: 900px;147 background: #0f5fae;148 }149 150 /* Modal overlay */151 .overlay {152 position: absolute;153 top: 0;154 left: 0;155 width: 1080px;156 height: 2400px;157 background: rgba(0,0,0,0.25);158 z-index: 5;159 }160 .dialog {161 position: absolute;162 left: 60px;163 top: 820px;164 width: 960px;165 background: #ffffff;166 border-radius: 22px;167 box-shadow: 0 20px 40px rgba(0,0,0,0.35);168 z-index: 6;169 }170 .dialog-header {171 padding: 36px 40px 20px 40px;172 font-size: 46px;173 color: #333;174 }175 .input-row {176 display: flex;177 align-items: center;178 gap: 18px;179 padding: 0 40px 20px 40px;180 }181 .input-field {182 flex: 1;183 height: 110px;184 border: 2px solid #1976D2;185 border-radius: 14px;186 display: flex;187 align-items: center;188 padding: 0 24px;189 box-sizing: border-box;190 font-size: 40px;191 color: #222;192 }193 .extension-label {194 font-size: 40px;195 color: #777;196 }197 .clear-btn {198 width: 64px;199 height: 64px;200 border-radius: 50%;201 border: 1px solid #BDBDBD;202 display: flex;203 align-items: center;204 justify-content: center;205 color: #555;206 }207 .dialog-actions {208 display: flex;209 justify-content: flex-end;210 gap: 40px;211 padding: 30px 40px 40px 40px;212 }213 .action-text {214 font-size: 38px;215 color: #1976D2;216 font-weight: 700;217 letter-spacing: 2px;218 }219 220 /* Keyboard */221 .keyboard {222 position: absolute;223 bottom: 0;224 left: 0;225 width: 1080px;226 height: 930px;227 background: #F3EFF8;228 z-index: 8;229 box-sizing: border-box;230 padding-top: 20px;231 }232 .suggestions {233 height: 110px;234 margin: 0 20px 10px 20px;235 background: #F3EFF8;236 display: flex;237 align-items: center;238 justify-content: space-between;239 padding: 0 24px;240 color: #4a4a4a;241 font-size: 34px;242 }243 .suggestions .words {244 display: flex;245 gap: 36px;246 color: #4a4a4a;247 }248 .key-row {249 display: flex;250 gap: 18px;251 padding: 14px 24px;252 }253 .key {254 flex: 1;255 height: 120px;256 background: #ffffff;257 border-radius: 26px;258 box-shadow: 0 1px 0 rgba(0,0,0,0.06);259 display: flex;260 align-items: center;261 justify-content: center;262 font-size: 44px;263 color: #333;264 }265 .key.small {266 flex: 0 0 90px;267 }268 .key.medium {269 flex: 0 0 140px;270 }271 .key.wide {272 flex: 1 1 100%;273 }274 .key.special {275 background: #F7DDE4;276 color: #333;277 }278 .key.confirm {279 background: #B9E7B9;280 color: #1C6B1C;281 font-weight: 700;282 }283 .space {284 flex: 1;285 }286 .gesture-bar {287 position: absolute;288 bottom: 16px;289 left: 50%;290 transform: translateX(-50%);291 width: 360px;292 height: 10px;293 background: #BDBDBD;294 border-radius: 8px;295 opacity: 0.8;296 }297 298 /* Utility SVG styles */299 svg { display: block; }300</style>301</head>302<body>303<div id="render-target">304 <!-- Status Bar -->305 <div class="status-bar">306 <div>2:34</div>307 <div class="status-right">308 <div class="status-dot"></div>309 <div class="status-dot"></div>310 <svg class="wifi-icon" viewBox="0 0 24 24">311 <path fill="#fff" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm6 6l-3-3 3-3 3 3-3 3z"/>312 </svg>313 <svg class="battery-icon" viewBox="0 0 36 20">314 <rect x="1" y="3" width="30" height="14" rx="3" fill="none" stroke="#fff" stroke-width="2"/>315 <rect x="3" y="5" width="22" height="10" rx="2" fill="#fff"/>316 <rect x="32" y="7" width="3" height="6" rx="1" fill="#fff"/>317 </svg>318 </div>319 </div>320 321 <!-- Header -->322 <div class="header">323 <div class="header-title">Playback paused</div>324 <div class="header-actions">325 <div class="action-btn">326 <svg width="40" height="40" viewBox="0 0 24 24">327 <path fill="#fff" d="M10 18l6-6-6-6v12z"/>328 <circle cx="10" cy="12" r="8" fill="none"/>329 <path fill="#fff" d="M10 4a8 8 0 1 0 0 16h0"/>330 </svg>331 </div>332 <div class="action-btn">333 <svg width="40" height="40" viewBox="0 0 24 24">334 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/>335 <line x1="17" y1="17" x2="22" y2="22" stroke="#fff" stroke-width="2"/>336 </svg>337 </div>338 <div class="action-btn">339 <svg width="40" height="40" viewBox="0 0 24 24">340 <path fill="#fff" d="M4 7h16v2H4zM4 11h12v2H4zM4 15h10v2H4z"/>341 </svg>342 </div>343 <div class="action-btn">344 <svg width="40" height="40" viewBox="0 0 24 24">345 <circle cx="12" cy="5" r="2" fill="#fff"/>346 <circle cx="12" cy="12" r="2" fill="#fff"/>347 <circle cx="12" cy="19" r="2" fill="#fff"/>348 </svg>349 </div>350 </div>351 <div class="tabs">352 <div>RECORD</div>353 <div>LISTEN</div>354 </div>355 </div>356 357 <!-- Carousel -->358 <div class="carousel">359 <div>360 <div class="thumb">[IMG: App Icon]</div>361 <div class="price">₹436</div>362 </div>363 <div>364 <div class="thumb">[IMG: Microwave]</div>365 <div class="price">₹108</div>366 </div>367 <div>368 <div class="thumb">[IMG: Blue Chair]</div>369 <div class="price">₹543</div>370 </div>371 <div>372 <div class="thumb">[IMG: TV Screen]</div>373 <div class="price">₹1 126</div>374 </div>375 <div>376 <div class="thumb">[IMG: Cabinet]</div>377 <div class="price">₹108</div>378 </div>379 <div>380 <div class="thumb">[IMG: Sofa Bed]</div>381 <div class="price">₹326</div>382 </div>383 </div>384 385 <!-- Background filler -->386 <div class="content-bg"></div>387 388 <!-- Overlay and Dialog -->389 <div class="overlay"></div>390 <div class="dialog">391 <div class="dialog-header">Rename</div>392 <div class="input-row">393 <div class="input-field">renewable energy lecture</div>394 <div class="extension-label">.m4a</div>395 <div class="clear-btn">396 <svg width="28" height="28" viewBox="0 0 24 24">397 <circle cx="12" cy="12" r="11" fill="none"/>398 <path d="M7 7l10 10M17 7L7 17" stroke="#666" stroke-width="2" stroke-linecap="round"/>399 </svg>400 </div>401 </div>402 <div class="dialog-actions">403 <div class="action-text">CANCEL</div>404 <div class="action-text">RENAME</div>405 </div>406 </div>407 408 <!-- Keyboard -->409 <div class="keyboard">410 <div class="suggestions">411 <div class="words">412 <span>lecture</span>413 <span>|</span>414 <span>lecturer</span>415 <span>|</span>416 <span>lectures</span>417 </div>418 <div style="display:flex;align-items:center;gap:16px;">419 <svg width="38" height="38" viewBox="0 0 24 24">420 <path d="M12 3a4 4 0 0 1 4 4v5a4 4 0 1 1-8 0V7a4 4 0 0 1 4-4zm-5 14h10v2H7z" fill="#666"/>421 </svg>422 </div>423 </div>424 425 <!-- Row 1 -->426 <div class="key-row">427 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>428 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>429 </div>430 <!-- Row 2 -->431 <div class="key-row">432 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>433 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>434 </div>435 <!-- Row 3 -->436 <div class="key-row">437 <div class="key special medium">⇧</div>438 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>439 <div class="key">n</div><div class="key">m</div>440 <div class="key special medium">441 <svg width="36" height="36" viewBox="0 0 24 24">442 <path d="M16 8l-6 6h4v4l6-6h-4V8z" fill="#333"/>443 </svg>444 </div>445 </div>446 <!-- Row 4 -->447 <div class="key-row">448 <div class="key special medium">?123</div>449 <div class="key special small">,</div>450 <div class="key special small">451 <svg width="32" height="32" viewBox="0 0 24 24">452 <circle cx="12" cy="12" r="9" fill="#333"/>453 <rect x="11" y="5" width="2" height="14" fill="#fff"/>454 </svg>455 </div>456 <div class="key wide">space</div>457 <div class="key special small">.</div>458 <div class="key confirm medium">✓</div>459 </div>460 <div class="gesture-bar"></div>461 </div>462</div>463</body>464</html>