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>Save As UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0C0C0C;15 color: #FFFFFF;16 }17 18 /* Top status bar */19 .statusbar {20 height: 120px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #EDEDED;26 font-size: 36px;27 letter-spacing: 0.5px;28 }29 .status-icons {30 display: flex;31 align-items: center;32 gap: 28px;33 }34 .status-dot {35 width: 16px; height: 16px; background: #EDEDED; border-radius: 50%;36 }37 .wifi svg, .battery svg { display: block; }38 .wifi path, .battery rect { fill: #EDEDED; }39 40 /* App bar */41 .appbar {42 height: 120px;43 display: flex;44 align-items: center;45 padding: 0 24px 0 18px;46 border-bottom: 1px solid #1E1E1E;47 }48 .back-btn {49 width: 96px; height: 96px;50 display: flex; align-items: center; justify-content: center;51 margin-right: 12px;52 }53 .app-title {54 font-size: 48px; font-weight: 500; color: #FFFFFF;55 }56 57 /* Content list */58 .content {59 padding: 24px 36px 0 36px;60 }61 .section-title {62 font-size: 34px; color: #B0B0B0; margin-bottom: 24px;63 }64 .list { display: flex; flex-direction: column; gap: 18px; }65 .item {66 display: flex;67 align-items: center;68 padding: 26px 12px;69 border-radius: 12px;70 }71 .icon-wrap {72 width: 96px; height: 96px; border-radius: 16px;73 display: flex; align-items: center; justify-content: center;74 margin-right: 28px;75 }76 .icon-cloud { background: transparent; }77 .icon-device { background: transparent; }78 .icon-plus { background: transparent; }79 .item-title {80 font-size: 42px; color: #FFFFFF; line-height: 1.2;81 }82 .item-sub {83 font-size: 32px; color: #9E9E9E; margin-top: 6px;84 }85 .divider { height: 1px; background: #1E1E1E; margin: 8px 0 0 124px; }86 87 /* Bottom save bar and keyboard overlay */88 .bottom-area {89 position: absolute;90 left: 0; right: 0; bottom: 0;91 background: #0C0C0C;92 }93 .name-row {94 padding: 24px 36px;95 display: flex; align-items: center; gap: 18px;96 border-top: 1px solid #1E1E1E;97 }98 .filename-field {99 flex: 1;100 height: 92px;101 border: 3px solid #FF8F00;102 border-radius: 12px;103 display: flex; align-items: center;104 padding: 0 18px;105 background: #121212;106 }107 .filename-text { color: #FFFFFF; font-size: 42px; flex: 1; }108 .clear-btn {109 width: 54px; height: 54px; border-radius: 12px;110 display: flex; align-items: center; justify-content: center;111 margin-right: 10px;112 }113 .ext {114 color: #B0B0B0; font-size: 42px; margin-right: 12px;115 }116 .save-btn {117 width: 168px; height: 92px; background: #2A2A2A; color: #A9A9A9;118 border-radius: 12px; display: flex; align-items: center; justify-content: center;119 font-size: 38px; font-weight: 500;120 }121 122 .suggestions {123 padding: 8px 36px 18px 36px;124 display: flex; gap: 18px; align-items: center;125 }126 .chip {127 background: #1A1A1A; color: #E0E0E0;128 border: 1px solid #2C2C2C;129 padding: 16px 22px; border-radius: 24px;130 font-size: 34px;131 }132 133 .keyboard {134 height: 900px;135 background: #121212;136 border-top: 1px solid #1E1E1E;137 padding: 16px 28px 24px 28px;138 box-sizing: border-box;139 }140 .key-row {141 display: flex; justify-content: space-between; margin-top: 18px;142 }143 .key {144 height: 120px; flex: 1;145 background: #1E1E1E; border-radius: 18px;146 margin: 0 8px; display: flex; align-items: center; justify-content: center;147 color: #EDEDED; font-size: 44px; font-weight: 500;148 }149 .key.small { flex: 0 0 150px; }150 .key.wide { flex: 0 0 280px; }151 .key.circle {152 height: 120px; flex: 0 0 150px; border-radius: 60px; background: #CBD7EA; color: #1A1A1A; font-size: 48px; font-weight: 700;153 }154 .space { flex: 1; height: 120px; background: #1E1E1E; border-radius: 18px; margin: 0 8px; }155 .gesture {156 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);157 width: 360px; height: 10px; background: #EDEDED; border-radius: 8px; opacity: 0.8;158 }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Status bar -->165 <div class="statusbar">166 <div class="time">1:05</div>167 <div class="status-icons">168 <!-- Moon / Do Not Disturb -->169 <div class="status-dot"></div>170 <!-- Simple app icons placeholders -->171 <div class="status-dot"></div>172 <div class="status-dot"></div>173 <div class="wifi">174 <svg width="44" height="44" viewBox="0 0 24 24">175 <path d="M12 18c.9 0 1.6.7 1.6 1.6S12.9 21.2 12 21.2s-1.6-.7-1.6-1.6S11.1 18 12 18zm-7.5-5.2c4.2-3.3 8.8-3.3 13 0l-1.7 1.7c-2.9-2.1-6.7-2.1-9.6 0l-1.7-1.7zm-3-3.2c6.1-5 14-5 20.1 0l-1.8 1.8c-4.9-3.9-11.6-3.9-16.5 0L1.5 9.6z"/>176 </svg>177 </div>178 <div class="battery">179 <svg width="44" height="44" viewBox="0 0 24 24">180 <rect x="3" y="7" width="16" height="10" rx="2"></rect>181 <rect x="20" y="10" width="2" height="4"></rect>182 </svg>183 </div>184 </div>185 </div>186 187 <!-- App bar -->188 <div class="appbar">189 <div class="back-btn">190 <svg width="56" height="56" viewBox="0 0 24 24">191 <path fill="#FFFFFF" d="M15.5 19l-7-7 7-7 1.4 1.4L10.3 12l6.6 6.6z"/>192 </svg>193 </div>194 <div class="app-title">Save as</div>195 </div>196 197 <!-- Content -->198 <div class="content">199 <div class="section-title">Places</div>200 <div class="list">201 202 <!-- OneDrive - Personal -->203 <div class="item">204 <div class="icon-wrap icon-cloud">205 <svg width="72" height="72" viewBox="0 0 24 24">206 <path fill="#64B5F6" d="M6.5 17.5c-2 0-3.5-1.6-3.5-3.5S4.5 10.5 6.5 10.5h.3C7.5 8.6 9.4 7.2 11.6 7.2c2.9 0 5.4 2.4 5.4 5.3h.7c1.7 0 3.1 1.4 3.1 3.1s-1.4 3.1-3.1 3.1H6.5z"/>207 </svg>208 </div>209 <div>210 <div class="item-title">OneDrive - Personal</div>211 <div class="item-sub">ffionh41@gmail.com</div>212 </div>213 </div>214 <div class="divider"></div>215 216 <!-- This device -->217 <div class="item">218 <div class="icon-wrap icon-device">219 <svg width="72" height="72" viewBox="0 0 24 24">220 <rect x="5" y="3" width="14" height="18" rx="2" fill="#BDBDBD"></rect>221 <rect x="10" y="19" width="4" height="2" fill="#1A1A1A"></rect>222 </svg>223 </div>224 <div>225 <div class="item-title">This device</div>226 </div>227 </div>228 <div class="divider"></div>229 230 <!-- Browse -->231 <div class="item">232 <div class="icon-wrap icon-cloud">233 <svg width="72" height="72" viewBox="0 0 24 24">234 <path fill="#BDBDBD" d="M6.5 17.5c-2 0-3.5-1.6-3.5-3.5S4.5 10.5 6.5 10.5h.3C7.5 8.6 9.4 7.2 11.6 7.2c2.9 0 5.4 2.4 5.4 5.3h.7c1.7 0 3.1 1.4 3.1 3.1s-1.4 3.1-3.1 3.1H6.5z"/>235 </svg>236 </div>237 <div>238 <div class="item-title">Browse</div>239 <div class="item-sub">Google Drive, SD card, and more…</div>240 </div>241 </div>242 <div class="divider"></div>243 244 <!-- Add a place -->245 <div class="item">246 <div class="icon-wrap icon-plus">247 <svg width="72" height="72" viewBox="0 0 24 24">248 <rect x="10" y="4" width="4" height="16" fill="#BDBDBD"></rect>249 <rect x="4" y="10" width="16" height="4" fill="#BDBDBD"></rect>250 </svg>251 </div>252 <div>253 <div class="item-title">Add a place</div>254 <div class="item-sub">Connect to cloud storage</div>255 </div>256 </div>257 258 </div>259 </div>260 261 <!-- Bottom area including filename and keyboard -->262 <div class="bottom-area">263 <!-- Filename row -->264 <div class="name-row">265 <div class="filename-field">266 <div class="filename-text">Presentation</div>267 <div class="clear-btn">268 <svg width="36" height="36" viewBox="0 0 24 24">269 <path fill="#BDBDBD" d="M6 6l12 12M18 6L6 18" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"></path>270 </svg>271 </div>272 </div>273 <div class="ext">.pptx</div>274 <div class="save-btn">Save</div>275 </div>276 277 <!-- Suggestions chips -->278 <div class="suggestions">279 <div class="chip">Presentation</div>280 <div class="chip">Presentations</div>281 </div>282 283 <!-- Keyboard -->284 <div class="keyboard">285 <!-- Row 1 -->286 <div class="key-row">287 <div class="key">q</div>288 <div class="key">w</div>289 <div class="key">e</div>290 <div class="key">r</div>291 <div class="key">t</div>292 <div class="key">y</div>293 <div class="key">u</div>294 <div class="key">i</div>295 <div class="key">o</div>296 <div class="key">p</div>297 </div>298 <!-- Row 2 -->299 <div class="key-row">300 <div class="key">a</div>301 <div class="key">s</div>302 <div class="key">d</div>303 <div class="key">f</div>304 <div class="key">g</div>305 <div class="key">h</div>306 <div class="key">j</div>307 <div class="key">k</div>308 <div class="key">l</div>309 </div>310 <!-- Row 3 -->311 <div class="key-row">312 <div class="key small">?123</div>313 <div class="key">z</div>314 <div class="key">x</div>315 <div class="key">c</div>316 <div class="key">v</div>317 <div class="key">b</div>318 <div class="key">n</div>319 <div class="key">m</div>320 <div class="key small">321 <svg width="40" height="40" viewBox="0 0 24 24">322 <path fill="#EDEDED" d="M6 6l12 12"></path>323 <path stroke="#EDEDED" stroke-width="2" d="M6 6l12 12M6 18l12-12"></path>324 </svg>325 </div>326 </div>327 <!-- Row 4 -->328 <div class="key-row">329 <div class="key small">,</div>330 <div class="space"></div>331 <div class="key small">.</div>332 <div class="key circle">✓</div>333 </div>334 </div>335 <div class="gesture"></div>336 </div>337 338</div>339</body>340</html>