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>File Rename Dialog Mock</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: #1b1b1b;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0;21 width: 100%;22 height: 100px;23 background: #0b0b0b;24 color: #ffffff;25 display: flex;26 align-items: center;27 padding: 0 28px;28 box-sizing: border-box;29 font-size: 34px;30 letter-spacing: 0.5px;31 }32 .status-bar .time { font-weight: 600; }33 .status-bar .icons { margin-left: auto; display: flex; align-items: center; gap: 26px; }34 35 /* Top toolbar */36 .toolbar {37 position: absolute;38 top: 100px; left: 0;39 width: 100%;40 height: 120px;41 background: #111111;42 display: flex;43 align-items: center;44 padding: 0 28px;45 box-sizing: border-box;46 color: #e6e6e6;47 font-size: 40px;48 }49 .toolbar .count { color: #cfcfcf; font-weight: 600; }50 .toolbar .actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }51 52 /* File list */53 .file-row {54 position: absolute;55 top: 220px; left: 0;56 width: 100%;57 height: 170px;58 display: flex;59 align-items: center;60 padding: 0 24px 0 24px;61 box-sizing: border-box;62 background: #2d5b86;63 color: #ffffff;64 }65 .file-icon {66 width: 96px; height: 96px;67 border-radius: 14px;68 background: rgba(255,255,255,0.12);69 display: flex; justify-content: center; align-items: center;70 margin-right: 22px;71 }72 .file-text { flex: 1; }73 .file-title {74 font-size: 34px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;75 max-width: 760px;76 }77 .file-sub {78 margin-top: 8px; font-size: 26px; color: #d7e6ff;79 }80 .checkbox {81 width: 54px; height: 54px; border-radius: 6px; border: 2px solid #d7e6ff;82 display: flex; align-items: center; justify-content: center;83 background: rgba(255,255,255,0.08);84 }85 86 /* Dimming overlay */87 .overlay {88 position: absolute;89 top: 0; left: 0; width: 100%; height: 100%;90 background: rgba(0,0,0,0.55);91 z-index: 10;92 }93 94 /* Modal dialog */95 .modal {96 position: absolute;97 left: 90px;98 top: 620px;99 width: 900px;100 background: #e7e7e7;101 border-radius: 28px;102 z-index: 11;103 box-shadow: 0 12px 30px rgba(0,0,0,0.35);104 padding: 36px 44px 28px 44px;105 box-sizing: border-box;106 }107 .modal-title {108 font-size: 48px; font-weight: 800; color: #111; margin-bottom: 40px;109 }110 .text-input {111 font-size: 36px; color: #222; padding: 10px 0;112 border-bottom: 3px solid #9e9e9e;113 margin-right: 20px;114 }115 .modal-actions {116 display: flex; justify-content: flex-end; gap: 52px; margin-top: 34px;117 font-size: 38px; font-weight: 600;118 }119 .action {120 color: #6fa2ff; cursor: default;121 }122 123 /* Keyboard */124 .keyboard {125 position: absolute;126 bottom: 86px;127 left: 0; width: 100%;128 height: 760px;129 background: #121214;130 z-index: 12;131 box-sizing: border-box;132 padding-top: 14px;133 color: #eee;134 }135 .suggestions {136 display: flex; align-items: center; gap: 22px;137 padding: 0 22px 10px 22px;138 font-size: 28px;139 color: #cfcfcf;140 }141 .chip {142 padding: 6px 18px;143 background: #1e1e21;144 border-radius: 16px;145 border: 1px solid #2c2c31;146 }147 .rows {148 padding: 8px 18px 0 18px;149 box-sizing: border-box;150 display: grid;151 grid-template-rows: repeat(4, 1fr);152 gap: 12px;153 height: calc(100% - 80px);154 }155 .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }156 .key {157 background: #1c1c20;158 border: 1px solid #28282d;159 border-radius: 12px;160 display: flex; align-items: center; justify-content: center;161 font-size: 34px; color: #e9e9ea;162 }163 .key.shift, .key.backspace, .key.enter, .key.nav, .key.space {164 background: #2a2a2f;165 }166 .row.space-row { grid-template-columns: 1.3fr 1fr 5fr 1fr 1.3fr; }167 168 /* Gesture handle */169 .handle {170 position: absolute;171 bottom: 20px; left: 50%;172 transform: translateX(-50%);173 width: 240px; height: 10px;174 background: rgba(255,255,255,0.88);175 border-radius: 6px;176 z-index: 13;177 }178 /* Utility */179 .muted { opacity: 0.85; }180</style>181</head>182<body>183<div id="render-target">184 185 <!-- Status Bar -->186 <div class="status-bar">187 <div class="time">9:13</div>188 <div class="icons">189 <!-- simple icons -->190 <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff" class="muted">191 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>192 </svg>193 <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff" class="muted">194 <circle cx="12" cy="7" r="3" fill="#fff"></circle>195 <path d="M4 20c2-5 14-5 16 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>196 </svg>197 <svg width="34" height="18" viewBox="0 0 34 18">198 <rect x="1" y="3" width="28" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>199 <rect x="31" y="6" width="2" height="6" rx="1" fill="#fff"></rect>200 </svg>201 </div>202 </div>203 204 <!-- Toolbar -->205 <div class="toolbar">206 <div class="count">(1)</div>207 <div class="actions">208 <!-- search -->209 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#e6e6e6" stroke-width="2">210 <circle cx="11" cy="11" r="7"></circle>211 <line x1="16" y1="16" x2="22" y2="22"></line>212 </svg>213 <!-- scissors -->214 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round">215 <circle cx="5" cy="7" r="3"></circle>216 <circle cx="5" cy="17" r="3"></circle>217 <path d="M7.5 8.5 L19 3"></path>218 <path d="M7.5 15.5 L19 21"></path>219 </svg>220 <!-- pencil -->221 <svg width="48" height="48" viewBox="0 0 24 24" fill="#e6e6e6">222 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"></path>223 </svg>224 <!-- menu -->225 <svg width="48" height="48" viewBox="0 0 24 24" fill="#e6e6e6">226 <rect x="3" y="6" width="18" height="2"></rect>227 <rect x="3" y="11" width="18" height="2"></rect>228 <rect x="3" y="16" width="18" height="2"></rect>229 </svg>230 </div>231 </div>232 233 <!-- Selected file row -->234 <div class="file-row">235 <div class="file-icon">236 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">237 <rect x="3" y="3" width="18" height="18" rx="2" stroke="#ffffff" stroke-width="2" opacity="0.9"></rect>238 <path d="M10 8v7a2 2 0 1 1-2-2" stroke="#ffffff" stroke-width="2" fill="none"></path>239 <circle cx="15.5" cy="13" r="1.6" fill="#ffffff"></circle>240 </svg>241 </div>242 <div class="file-text">243 <div class="file-title">2023_12_07_08_05_37_1_1....</div>244 <div class="file-sub">2023-12-07 08:15, 194.3 KB <span class="muted"> • </span> 00:12s</div>245 </div>246 <div class="checkbox">247 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#d7e6ff" stroke-width="3">248 <polyline points="4,12 9,17 20,6"></polyline>249 </svg>250 </div>251 </div>252 253 <!-- Dim overlay (under modal) -->254 <div class="overlay"></div>255 256 <!-- Rename Modal -->257 <div class="modal">258 <div class="modal-title">Insert new file name</div>259 <div class="text-input">audio file</div>260 <div class="modal-actions">261 <div class="action">Cancel</div>262 <div class="action">OK</div>263 </div>264 </div>265 266 <!-- Keyboard -->267 <div class="keyboard">268 <div class="suggestions">269 <div class="chip">file</div>270 <div class="chip">files</div>271 <div class="chip">📁</div>272 <div class="chip">🗄️</div>273 <div style="margin-left:auto" class="chip">🎤</div>274 </div>275 <div class="rows">276 <div class="row">277 <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>278 <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>279 </div>280 <div class="row">281 <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>282 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key backspace">⌫</div>283 </div>284 <div class="row">285 <div class="key shift">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>286 <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">.</div><div class="key enter">✓</div>287 </div>288 <div class="row space-row">289 <div class="key nav">?123</div>290 <div class="key">,</div>291 <div class="key space">space</div>292 <div class="key">.</div>293 <div class="key enter">✓</div>294 </div>295 </div>296 </div>297 298 <!-- Gesture handle -->299 <div class="handle"></div>300 301</div>302</body>303</html>