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=1080, initial-scale=1.0">6<title>UI Recreation - Rename Dialog</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0E5FA9;15 border-radius: 0;16 box-shadow: none;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 20px;23 left: 24px;24 right: 24px;25 height: 48px;26 color: #ffffff;27 font-size: 34px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 opacity: 0.95;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 22px;37 }38 .sb-icon {39 width: 34px; height: 34px;40 }41 42 /* App bar content */43 .app-header {44 position: absolute;45 top: 92px;46 left: 24px;47 right: 24px;48 height: 260px;49 display: flex;50 align-items: flex-start;51 justify-content: space-between;52 color: #cfe6ff;53 }54 .title {55 font-size: 66px;56 font-weight: 500;57 letter-spacing: 0.2px;58 color: #e3f1ff;59 }60 .header-actions {61 display: flex;62 align-items: center;63 gap: 36px;64 margin-top: 12px;65 }66 .action-icon {67 width: 54px; height: 54px; fill: #e3f1ff;68 }69 .tabs {70 position: absolute;71 top: 316px;72 left: 24px;73 right: 24px;74 display: flex;75 justify-content: space-between;76 color: #cfe6ff;77 letter-spacing: 6px;78 font-size: 38px;79 font-weight: 700;80 }81 82 /* Horizontal cards preview area */83 .cards-strip {84 position: absolute;85 top: 380px;86 left: 0;87 right: 0;88 height: 220px;89 background: #0b5394;90 display: flex;91 align-items: center;92 overflow: hidden;93 padding-left: 20px;94 gap: 18px;95 }96 .card {97 width: 200px;98 height: 200px;99 background: #E0E0E0;100 border: 1px solid #BDBDBD;101 border-radius: 16px;102 display: flex;103 flex-direction: column;104 justify-content: center;105 align-items: center;106 color: #757575;107 font-size: 26px;108 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);109 }110 .price {111 position: absolute;112 bottom: 8px;113 right: 12px;114 color: #333;115 font-size: 28px;116 font-weight: 700;117 }118 119 /* Dim overlay behind dialog */120 .dim {121 position: absolute;122 top: 0; left: 0; right: 0; bottom: 0;123 background: rgba(0,0,0,0.35);124 }125 126 /* Rename dialog */127 .dialog {128 position: absolute;129 left: 90px;130 top: 930px;131 width: 900px;132 background: #ffffff;133 border-radius: 18px;134 box-shadow: 0 16px 50px rgba(0,0,0,0.35);135 padding: 40px;136 color: #000;137 }138 .dialog-title {139 font-size: 48px;140 font-weight: 600;141 margin-bottom: 34px;142 color: #222;143 }144 .input-row {145 position: relative;146 border: 2px solid #1976d2;147 border-radius: 12px;148 padding: 22px 80px 22px 22px;149 font-size: 40px;150 line-height: 1.3;151 color: #222;152 }153 .selection {154 position: absolute;155 top: 10px;156 left: 22px;157 height: 64px;158 background: #a4cdfc;159 opacity: 0.9;160 border-radius: 6px;161 width: 650px; /* simulate selected text width */162 z-index: 1;163 }164 .input-text {165 position: relative;166 z-index: 2;167 }168 .suffix {169 color: #777;170 }171 .clear-btn {172 position: absolute;173 right: 18px;174 top: 18px;175 width: 54px;176 height: 54px;177 border-radius: 27px;178 background: #f1f3f6;179 border: 1px solid #d9dde3;180 display: flex;181 align-items: center;182 justify-content: center;183 }184 .dialog-actions {185 margin-top: 36px;186 display: flex;187 justify-content: flex-end;188 gap: 36px;189 font-size: 38px;190 font-weight: 700;191 }192 .action-text {193 color: #1976d2;194 letter-spacing: 2px;195 }196 197 /* Keyboard */198 .keyboard {199 position: absolute;200 left: 0;201 bottom: 0;202 width: 1080px;203 height: 900px;204 background: #f6f4fb;205 border-top-left-radius: 28px;206 border-top-right-radius: 28px;207 box-shadow: 0 -6px 20px rgba(0,0,0,0.25);208 padding-top: 30px;209 }210 .kb-toolbar {211 display: flex;212 align-items: center;213 justify-content: space-between;214 padding: 0 36px;215 margin-bottom: 24px;216 }217 .tool {218 width: 66px; height: 66px; border-radius: 16px;219 background: #ffffff; border: 1px solid #e1e3ea;220 display: flex; align-items: center; justify-content: center;221 }222 .tool.green { background: #d9f2d6; border-color: #c5e7c1; }223 .tool svg { width: 36px; height: 36px; fill: #333; }224 225 .kb-rows {226 padding: 0 24px;227 }228 .key-row {229 display: flex;230 justify-content: center;231 gap: 18px;232 margin-bottom: 22px;233 }234 .key {235 width: 88px; height: 110px;236 background: #ffffff;237 border: 1px solid #e1e3ea;238 border-radius: 22px;239 display: flex; align-items: center; justify-content: center;240 font-size: 42px; color: #000;241 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.04);242 }243 .key.wide { width: 120px; }244 .key.pink { background: #ffd8e2; }245 .key.backspace { background: #ffd8e2; }246 .key.enter {247 width: 120px; height: 120px; border-radius: 60px;248 background: #b9e8b7; font-weight: 700;249 }250 .spacebar {251 width: 540px; height: 110px; background: #ffffff; border: 1px solid #e1e3ea; border-radius: 22px;252 }253 .mic-wrap {254 width: 110px; height: 110px; border-radius: 55px; background: #ffffff; border: 1px solid #e1e3ea;255 display: flex; align-items: center; justify-content: center;256 }257 258 .gesture {259 position: absolute;260 bottom: 20px;261 left: 50%;262 transform: translateX(-50%);263 width: 220px; height: 12px; border-radius: 6px;264 background: #bdbdbd;265 opacity: 0.8;266 }267</style>268</head>269<body>270<div id="render-target">271 272 <!-- Status Bar -->273 <div class="status-bar">274 <div>2:33</div>275 <div class="status-icons">276 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#fff" d="M12 4a8 8 0 100 16 8 8 0 000-16zM11 11V7h2v4h-2zm0 6v-2h2v2h-2z"/></svg>277 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#fff" d="M12 2l4 4h-3v12h-2V6H8l4-4z"/></svg>278 <svg class="sb-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="#fff"/></svg>279 </div>280 </div>281 282 <!-- App Header -->283 <div class="app-header">284 <div class="title">Playback paused</div>285 <div class="header-actions">286 <!-- Search -->287 <svg class="action-icon" viewBox="0 0 24 24"><path d="M10 3a7 7 0 105.29 12.29l3.7 3.7 1.41-1.41-3.7-3.7A7 7 0 0010 3zm0 2a5 5 0 110 10 5 5 0 010-10z"/></svg>288 <!-- Filter -->289 <svg class="action-icon" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm4 5h10v2H7v-2zm3 5h4v2h-4v-2z"/></svg>290 <!-- More -->291 <svg class="action-icon" viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>292 </div>293 </div>294 295 <div class="tabs">296 <div>RECORD</div>297 <div>LISTEN</div>298 </div>299 300 <!-- Content cards preview -->301 <div class="cards-strip">302 <div class="card">303 <div>[IMG: App icon]</div>304 <div class="price">₹436</div>305 </div>306 <div class="card">307 <div>[IMG: Microwave]</div>308 <div class="price">₹108</div>309 </div>310 <div class="card">311 <div>[IMG: Blue Chair]</div>312 <div class="price">₹543</div>313 </div>314 <div class="card">315 <div>[IMG: Landscape Photo]</div>316 <div class="price">₹1 126</div>317 </div>318 <div class="card">319 <div>[IMG: Smart TV]</div>320 <div class="price">₹1 126</div>321 </div>322 <div class="card">323 <div>[IMG: Drawer Unit]</div>324 <div class="price">₹108</div>325 </div>326 <div class="card">327 <div>[IMG: Daybed]</div>328 <div class="price">₹326</div>329 </div>330 </div>331 332 <!-- Overlay for dialog -->333 <div class="dim"></div>334 335 <!-- Rename Dialog -->336 <div class="dialog">337 <div class="dialog-title">Rename</div>338 <div class="input-row">339 <div class="selection"></div>340 <div class="input-text">able energy lecture practice<span class="suffix">.m4a</span></div>341 <div class="clear-btn">342 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#606b75" stroke-width="2" fill="none" stroke-linecap="round"/></svg>343 </div>344 </div>345 <div class="dialog-actions">346 <div class="action-text">CANCEL</div>347 <div class="action-text">RENAME</div>348 </div>349 </div>350 351 <!-- Keyboard -->352 <div class="keyboard">353 <div class="kb-toolbar">354 <div class="tool green">355 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>356 </div>357 <div class="tool">358 <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 00-5 5c0 2.76 2.24 6 5 6s5-3.24 5-6a5 5 0 00-5-5zm0 13c-4 0-7 2-7 4v2h14v-2c0-2-3-4-7-4z"/></svg>359 </div>360 <div class="tool"><span style="font-weight:700;font-size:24px;">GIF</span></div>361 <div class="tool">362 <svg viewBox="0 0 24 24"><path d="M12 3l9 6-9 6-9-6 9-6zm0 15l9-6v9H3v-9l9 6z"/></svg>363 </div>364 <div class="tool">365 <svg viewBox="0 0 24 24"><path d="M4 5h9v2H4V5zm0 4h13v2H4V9zm0 4h9v2H4v-2zm0 4h13v2H4v-2z"/></svg>366 </div>367 <div class="tool">368 <svg viewBox="0 0 24 24"><path d="M12 2l2 4 4 .6-3 2.9.8 4.5-3.8-2-3.8 2 .8-4.5-3-2.9 4-.6 2-4z"/></svg>369 </div>370 <div class="mic-wrap">371 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 013 3v6a3 3 0 11-6 0V6a3 3 0 013-3zm-6 9h2a6 6 0 0012 0h2a8 8 0 01-7 7v3h-4v-3a8 8 0 01-7-7z"/></svg>372 </div>373 </div>374 375 <div class="kb-rows">376 <!-- Row 1 -->377 <div class="key-row">378 <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>379 <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>380 </div>381 <!-- Row 2 -->382 <div class="key-row">383 <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>384 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>385 </div>386 <!-- Row 3 -->387 <div class="key-row">388 <div class="key pink wide">?123</div>389 <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><div class="key">N</div><div class="key">M</div>390 <div class="key backspace wide">⌫</div>391 </div>392 <!-- Row 4 -->393 <div class="key-row">394 <div class="key wide">,</div>395 <div class="key wide">🙂</div>396 <div class="spacebar"></div>397 <div class="key">.</div>398 <div class="key enter">✓</div>399 </div>400 </div>401 <div class="gesture"></div>402 </div>403 404</div>405</body>406</html>