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>Save As Dialog Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0f0f10;15 color: #ffffff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 96px;25 padding: 0 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #fff;30 font-size: 40px;31 letter-spacing: 0.5px;32 }33 .status-right {34 display: flex;35 align-items: center;36 gap: 26px;37 }38 .status-icon { width: 38px; height: 38px; opacity: 0.9; }39 40 /* App bar */41 .app-bar {42 position: absolute;43 top: 96px;44 left: 0;45 width: 100%;46 height: 132px;47 display: flex;48 align-items: center;49 gap: 24px;50 padding: 0 30px;51 color: #fff;52 }53 .app-title {54 font-size: 56px;55 font-weight: 600;56 }57 .back-btn {58 width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;59 }60 61 /* Content list */62 .content {63 position: absolute;64 top: 228px;65 left: 0;66 width: 100%;67 padding: 24px 40px 0 40px;68 }69 .section-title {70 color: #bdbdbd;71 font-size: 36px;72 margin-bottom: 24px;73 }74 .list {75 display: flex;76 flex-direction: column;77 gap: 44px;78 }79 .item {80 display: flex;81 align-items: center;82 gap: 34px;83 }84 .item-icon {85 width: 72px; height: 72px;86 display: inline-flex; align-items: center; justify-content: center;87 }88 .item-text { line-height: 1.2; }89 .item-title { font-size: 48px; font-weight: 600; color: #ffffff; }90 .item-sub { font-size: 34px; color: #a7a7a7; margin-top: 10px; }91 92 /* Filename bar above keyboard */93 .filename-bar {94 position: absolute;95 left: 36px;96 right: 36px;97 bottom: 960px; /* sits just above keyboard */98 display: flex;99 align-items: center;100 gap: 26px;101 }102 .filename-input {103 position: relative;104 flex: 1;105 height: 96px;106 border: 3px solid #ff8f00;107 border-radius: 10px;108 padding: 0 94px 0 22px;109 display: flex;110 align-items: center;111 font-size: 44px;112 color: #ffffff;113 background: transparent;114 }115 .clear-x {116 position: absolute;117 right: 18px;118 top: 50%;119 transform: translateY(-50%);120 width: 54px; height: 54px;121 display: inline-flex; align-items: center; justify-content: center;122 border-radius: 14px;123 background: #2b2b2c;124 }125 .ext {126 font-size: 44px;127 color: #bdbdbd;128 margin-right: 10px;129 }130 .save-btn {131 width: 160px;132 height: 96px;133 border-radius: 14px;134 background: #3a3a3b;135 color: #909090;136 font-size: 42px;137 display: inline-flex;138 align-items: center;139 justify-content: center;140 }141 142 /* Keyboard */143 .keyboard {144 position: absolute;145 left: 0;146 bottom: 0;147 width: 100%;148 height: 920px;149 background: #1a1a1b;150 border-top: 1px solid #2c2c2d;151 }152 .kb-suggest {153 height: 110px;154 display: flex;155 align-items: center;156 justify-content: space-between;157 padding: 0 36px;158 color: #e0e0e0;159 font-size: 40px;160 }161 .kb-suggest-left { display: flex; align-items: center; gap: 24px; }162 .kb-row {163 display: flex;164 justify-content: space-between;165 padding: 0 24px;166 margin-top: 18px;167 }168 .key {169 width: 92px; height: 120px;170 background: #2b2b2c;171 border-radius: 18px;172 display: flex; align-items: center; justify-content: center;173 color: #ffffff;174 font-size: 42px;175 }176 .key.wide { width: 164px; }177 .key.extra-wide { width: 420px; }178 .key.circle {179 width: 120px; height: 120px; border-radius: 60px;180 background: #c7d7ea; color: #0f0f10; font-weight: bold;181 }182 183 /* Gesture bar */184 .gesture {185 position: absolute;186 bottom: 22px;187 left: 50%;188 transform: translateX(-50%);189 width: 220px;190 height: 10px;191 border-radius: 8px;192 background: #e6e6e6;193 opacity: 0.9;194 }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Status Bar -->201 <div class="status-bar">202 <div>1:05</div>203 <div class="status-right">204 <!-- Simple moon icon -->205 <svg class="status-icon" viewBox="0 0 24 24">206 <path fill="#ffffff" d="M12 22a9 9 0 0 1-4.5-16.8A8 8 0 1 0 20 16a9 9 0 0 1-8 6z"></path>207 </svg>208 <!-- tiny dots to mimic icons -->209 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.6"/></svg>210 <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" fill="#ffffff" opacity="0.8"/></svg>211 <!-- WiFi -->212 <svg class="status-icon" viewBox="0 0 24 24">213 <path fill="#ffffff" d="M2 9c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0zM6 13c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0zM10 17l2 2 2-2-2-2z"/>214 </svg>215 <!-- Battery -->216 <svg class="status-icon" viewBox="0 0 24 24">217 <rect x="2" y="6" width="18" height="12" rx="2" fill="#ffffff"/>218 <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>219 </svg>220 </div>221 </div>222 223 <!-- App Bar -->224 <div class="app-bar">225 <div class="back-btn">226 <svg width="54" height="54" viewBox="0 0 24 24">227 <path fill="#ffffff" d="M15 18l-6-6 6-6v12z"/>228 </svg>229 </div>230 <div class="app-title">Save as</div>231 </div>232 233 <!-- Content -->234 <div class="content">235 <div class="section-title">Places</div>236 <div class="list">237 <!-- OneDrive -->238 <div class="item">239 <div class="item-icon">240 <svg width="72" height="72" viewBox="0 0 24 24">241 <path fill="#6fb7ff" d="M7 15c0-2.8 2.2-5 5-5 1 0 1.9.3 2.7.8C15 9.3 13.1 8 11 8c-2.8 0-5 2.2-5 5 0 .8.2 1.6.6 2.3.1-.1.3-.2.4-.3z"/>242 <path fill="#4da6ff" d="M6 16.5C7.1 15.6 8.5 15 10 15h6c1.7 0 3 1.3 3 3H7.5c-.8 0-1.6-.2-2.3-.5z"/>243 </svg>244 </div>245 <div class="item-text">246 <div class="item-title">OneDrive - Personal</div>247 <div class="item-sub">ffionh41@gmail.com</div>248 </div>249 </div>250 251 <!-- This device -->252 <div class="item">253 <div class="item-icon">254 <svg width="72" height="72" viewBox="0 0 24 24">255 <rect x="6" y="3" width="12" height="18" rx="2" fill="#bdbdbd"/>256 <rect x="10" y="18" width="4" height="1.6" fill="#0f0f10"/>257 </svg>258 </div>259 <div class="item-text">260 <div class="item-title">This device</div>261 </div>262 </div>263 264 <!-- Browse -->265 <div class="item">266 <div class="item-icon">267 <svg width="72" height="72" viewBox="0 0 24 24">268 <path fill="#bdbdbd" d="M6 15c0-3.3 2.7-6 6-6 3 0 5.5 2.2 5.9 5 1.2.2 2.1 1.2 2.1 2.5 0 1.4-1.1 2.5-2.5 2.5H7.5C6.1 19 5 17.9 5 16.5c0-.9.5-1.7 1.2-2z"/>269 </svg>270 </div>271 <div class="item-text">272 <div class="item-title">Browse</div>273 <div class="item-sub">Google Drive, SD card, and more…</div>274 </div>275 </div>276 277 <!-- Add a place -->278 <div class="item">279 <div class="item-icon">280 <svg width="72" height="72" viewBox="0 0 24 24">281 <path fill="#bdbdbd" d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/>282 </svg>283 </div>284 <div class="item-text">285 <div class="item-title">Add a place</div>286 <div class="item-sub">Connect to cloud storage</div>287 </div>288 </div>289 </div>290 </div>291 292 <!-- Filename Bar -->293 <div class="filename-bar">294 <div class="filename-input">295 Importance of hiking296 <div class="clear-x">297 <svg width="32" height="32" viewBox="0 0 24 24">298 <path fill="#cfcfcf" d="M18 6L6 18M6 6l12 12" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>299 </svg>300 </div>301 </div>302 <div class="ext">.pptx</div>303 <div class="save-btn">Save</div>304 </div>305 306 <!-- Keyboard -->307 <div class="keyboard">308 <div class="kb-suggest">309 <div class="kb-suggest-left">310 <svg width="54" height="54" viewBox="0 0 24 24">311 <circle cx="12" cy="12" r="10" fill="#bdbdbd"/>312 </svg>313 <div>hiking</div>314 </div>315 <div style="display:flex; align-items:center; gap:24px;">316 <div style="font-size:48px;">🥾</div>317 <svg width="54" height="54" viewBox="0 0 24 24">318 <path fill="#bdbdbd" d="M12 3c3 0 5 2.2 5 5 0 1.6-.7 3-1.9 4.1l.4 5.9-3.5-1.6-3.5 1.6.4-5.9A5 5 0 0 1 7 8c0-2.8 2.2-5 5-5z"/>319 </svg>320 </div>321 </div>322 323 <!-- Row 1 -->324 <div class="kb-row">325 <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>326 <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>327 </div>328 <!-- Row 2 -->329 <div class="kb-row" style="padding: 0 72px;">330 <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>331 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>332 </div>333 <!-- Row 3 -->334 <div class="kb-row" style="padding: 0 128px;">335 <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>336 <div class="key">n</div><div class="key">m</div><div class="key">⌫</div>337 </div>338 <!-- Row 4 -->339 <div class="kb-row" style="margin-top: 22px; padding: 0 24px;">340 <div class="key wide">?123</div>341 <div class="key">,</div>342 <div class="key extra-wide"></div>343 <div class="key">.</div>344 <div class="key circle">✓</div>345 </div>346 </div>347 348 <!-- Gesture bar -->349 <div class="gesture"></div>350 351</div>352</body>353</html>