GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #121212; font-family: Arial, Helvetica, sans-serif;12 color: #EAEAEA;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 110px; background: #1A1A1A;19 padding: 0 28px; box-sizing: border-box;20 display: flex; align-items: center; justify-content: space-between;21 letter-spacing: 0.3px;22 }23 .status-left { font-size: 38px; font-weight: 600; }24 .status-right { display: flex; align-items: center; gap: 28px; }25 .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #EAEAEA; stroke-width: 3; }26 .wifi svg { width: 44px; height: 44px; }27 .battery {28 width: 64px; height: 32px; border: 3px solid #EAEAEA; border-radius: 6px; position: relative;29 }30 .battery::after {31 content: ""; position: absolute; right: -10px; top: 8px;32 width: 8px; height: 16px; background: #EAEAEA; border-radius: 2px;33 }34 .battery .level { position: absolute; left: 4px; top: 4px; height: 20px; width: 40px; background: #EAEAEA; border-radius: 4px; }35 36 /* App header */37 .app-header {38 position: absolute; top: 110px; left: 0; right: 0;39 height: 220px; background: #1A1A1A;40 box-sizing: border-box; padding: 22px 32px;41 }42 .title {43 text-align: center; color: #F59E45; font-size: 40px; font-weight: 600; margin-top: 8px;44 }45 .tool-row {46 margin-top: 30px; display: flex; align-items: center; justify-content: space-between;47 padding: 0 60px;48 }49 .tool {50 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;51 }52 .tool svg { width: 56px; height: 56px; fill: none; stroke: #EAEAEA; stroke-width: 3; }53 54 /* Slide area */55 .slide-area {56 position: absolute; top: 330px; left: 0; right: 0;57 height: 1040px; background: #5A4534;58 }59 .textbox {60 position: absolute; left: 60px; top: 120px; width: 960px; height: 680px;61 border: 1.5px dashed #C8C8C8; box-sizing: border-box;62 }63 .handle { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; border: 1px solid #BDBDBD; }64 .handle.tl { left: -13px; top: -13px; }65 .handle.tr { right: -13px; top: -13px; }66 .handle.bl { left: -13px; bottom: -13px; }67 .handle.br { right: -13px; bottom: -13px; }68 .handle.ml { left: -13px; top: 50%; transform: translateY(-50%); }69 .handle.mr { right: -13px; top: 50%; transform: translateY(-50%); }70 .handle.mt { left: 50%; top: -13px; transform: translateX(-50%); }71 .handle.mb { left: 50%; bottom: -13px; transform: translateX(-50%); }72 73 .rotate {74 position: absolute; left: 50%; top: -60px; transform: translateX(-50%);75 width: 42px; height: 42px;76 }77 .rotate svg { width: 42px; height: 42px; stroke: #D0D0D0; stroke-width: 3; fill: none; }78 79 .text-row {80 position: absolute; left: 22px; bottom: 170px; color: #FFFFFF;81 font-size: 44px; font-weight: 500;82 }83 .caret { position: absolute; left: 22px; bottom: 170px; width: 4px; height: 52px; background: #EAEAEA; }84 .teardrop {85 position: absolute; left: 8px; bottom: 145px; width: 34px; height: 34px;86 background: #3A86FF; border-radius: 50% 50% 60% 60%/50% 50% 70% 70%;87 border: 2px solid #CBE0FF;88 box-shadow: 0 0 0 2px rgba(255,255,255,0.25) inset;89 }90 .teardrop::after {91 content: ""; position: absolute; bottom: -14px; left: 12px;92 width: 10px; height: 18px; background: #3A86FF; border-radius: 6px;93 }94 95 /* Formatting bar */96 .format-bar {97 position: absolute; top: 1370px; left: 0; right: 0;98 height: 160px; background: #1F1F1F;99 box-sizing: border-box; padding: 24px 28px;100 display: flex; align-items: center; gap: 34px;101 border-top: 1px solid #2A2A2A;102 }103 .fmt-item { color: #EAEAEA; font-size: 44px; font-weight: 700; }104 .fmt-item.light { font-weight: 500; font-style: italic; }105 .fmt-underline { text-decoration: underline; text-decoration-thickness: 3px; }106 .fmt-color { position: relative; }107 .fmt-color::after {108 content: ""; position: absolute; left: 0; right: 0; bottom: -8px;109 height: 8px; background: #E53935; border-radius: 4px;110 }111 .fmt-group { display: flex; gap: 26px; align-items: center; }112 .fmt-icon svg { width: 48px; height: 48px; stroke: #EAEAEA; stroke-width: 3; fill: none; }113 .fmt-spacer { flex: 1; }114 .fmt-right { display: flex; gap: 26px; align-items: center; }115 .arrow { width: 40px; height: 40px; border: 2px solid #EAEAEA; border-left: none; border-bottom: none; transform: rotate(45deg); }116 117 /* Keyboard */118 .keyboard {119 position: absolute; top: 1530px; left: 0; right: 0;120 height: 780px; background: #121212; box-sizing: border-box;121 padding-top: 12px;122 border-top: 1px solid #2A2A2A;123 }124 .kb-tools {125 display: flex; align-items: center; gap: 30px; padding: 10px 40px 20px;126 }127 .tool-chip {128 width: 84px; height: 64px; border-radius: 18px; background: #222; color: #EAEAEA;129 display: flex; align-items: center; justify-content: center; font-size: 28px; border: 1px solid #2F2F2F;130 }131 .keys { padding: 0 40px; display: grid; gap: 16px; }132 .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }133 .key {134 height: 100px; background: #2A2A2A; border-radius: 18px;135 display: flex; align-items: center; justify-content: center;136 color: #F2F2F2; font-size: 42px; border: 1px solid #3A3A3A;137 }138 .row2 { grid-template-columns: repeat(9, 1fr); }139 .row3 { grid-template-columns: repeat(7, 1fr); }140 .key.wide { grid-column: span 2; }141 .key.back { grid-column: span 2; }142 .bottom-row {143 display: grid; grid-template-columns: 1.2fr 0.8fr 5fr 1fr 1.2fr; gap: 12px; margin-top: 14px; padding: 0 40px;144 }145 .key.round {146 background: #A9C9F9; color: #0E2A5E; font-weight: 700; border-radius: 40px;147 }148 .space { height: 100px; background: #2A2A2A; border-radius: 18px; border: 1px solid #3A3A3A; }149 .enter {150 height: 100px; background: #A9C9F9; color: #0E2A5E; border-radius: 40px; font-weight: 700;151 display: flex; align-items: center; justify-content: center;152 }153 154 /* Bottom navigation pill */155 .nav-bar {156 position: absolute; bottom: 20px; left: 0; right: 0; height: 70px; background: #121212;157 display: flex; align-items: center; justify-content: center;158 }159 .pill { width: 200px; height: 10px; background: #EAEAEA; border-radius: 6px; opacity: 0.9; }160</style>161</head>162<body>163<div id="render-target">164 <!-- Status Bar -->165 <div class="status-bar">166 <div class="status-left">12:30</div>167 <div class="status-right">168 <div class="status-icon">169 <!-- Crescent moon -->170 <svg viewBox="0 0 24 24"><path d="M14 3a9 9 0 1 0 7 14.5A8 8 0 1 1 14 3z"/></svg>171 </div>172 <div class="status-icon">173 <!-- Circle dot -->174 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4" fill="#EAEAEA"/></svg>175 </div>176 <div class="status-icon">177 <!-- Play icon -->178 <svg viewBox="0 0 24 24"><polygon points="8,6 19,12 8,18" fill="#EAEAEA"/></svg>179 </div>180 <div class="status-icon wifi">181 <!-- Simple wifi -->182 <svg viewBox="0 0 24 24">183 <path d="M3 8c9-6 9-6 18 0"/>184 <path d="M6 11c6-4 6-4 12 0"/>185 <path d="M9 14c3-2 3-2 6 0"/>186 <circle cx="12" cy="18" r="1.8" fill="#EAEAEA"/>187 </svg>188 </div>189 <div class="battery"><div class="level"></div></div>190 </div>191 </div>192 193 <!-- App Header -->194 <div class="app-header">195 <div class="title">Presentation.pptx - Saved</div>196 <div class="tool-row">197 <div class="tool">198 <!-- Check -->199 <svg viewBox="0 0 24 24"><path d="M5 12l4 4 10-10"/></svg>200 </div>201 <div class="tool">202 <!-- Pen -->203 <svg viewBox="0 0 24 24"><path d="M4 20l5-1 10-10-4-4-10 10-1 5z"/></svg>204 </div>205 <div class="tool">206 <!-- Search -->207 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></svg>208 </div>209 <div class="tool">210 <!-- Slideshow -->211 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><polygon points="10,10 16,12 10,14" fill="#EAEAEA"/></svg>212 </div>213 <div class="tool">214 <!-- Undo -->215 <svg viewBox="0 0 24 24"><path d="M7 9H3l4-4v3c7 0 11 2 12 8"/></svg>216 </div>217 <div class="tool">218 <!-- More (vertical ellipsis) -->219 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#EAEAEA"/><circle cx="12" cy="12" r="2" fill="#EAEAEA"/><circle cx="12" cy="19" r="2" fill="#EAEAEA"/></svg>220 </div>221 </div>222 </div>223 224 <!-- Slide Editing Area -->225 <div class="slide-area">226 <div class="textbox">227 <div class="handle tl"></div>228 <div class="handle tr"></div>229 <div class="handle bl"></div>230 <div class="handle br"></div>231 <div class="handle ml"></div>232 <div class="handle mr"></div>233 <div class="handle mt"></div>234 <div class="handle mb"></div>235 236 <div class="rotate">237 <svg viewBox="0 0 24 24">238 <path d="M12 4v4l3-3M12 4a8 8 0 1 1-7 12"/>239 </svg>240 </div>241 242 <div class="caret"></div>243 <div class="teardrop"></div>244 <div class="text-row">Double tap to add text</div>245 </div>246 </div>247 248 <!-- Formatting Bar -->249 <div class="format-bar">250 <div class="fmt-item">B</div>251 <div class="fmt-item light">I</div>252 <div class="fmt-item fmt-underline">U</div>253 <div class="fmt-item fmt-color">A</div>254 255 <div class="fmt-group">256 <!-- Bullet list -->257 <div class="fmt-icon">258 <svg viewBox="0 0 24 24">259 <circle cx="5" cy="7" r="2" fill="#EAEAEA"/>260 <path d="M10 7h10M10 12h10"/>261 <circle cx="5" cy="12" r="2" fill="#EAEAEA"/>262 </svg>263 </div>264 <!-- Numbered list -->265 <div class="fmt-icon">266 <svg viewBox="0 0 24 24">267 <path d="M4 7h2M10 7h10M4 12h2M10 12h10"/>268 </svg>269 </div>270 <!-- Align icons -->271 <div class="fmt-icon">272 <svg viewBox="0 0 24 24">273 <path d="M3 6h18M3 11h12M3 16h18"/>274 </svg>275 </div>276 </div>277 278 <div class="fmt-spacer"></div>279 280 <div class="fmt-right">281 <div class="arrow"></div>282 </div>283 </div>284 285 <!-- Keyboard -->286 <div class="keyboard">287 <div class="kb-tools">288 <div class="tool-chip">▦</div>289 <div class="tool-chip">☺</div>290 <div class="tool-chip">GIF</div>291 <div class="tool-chip">⚙</div>292 <div class="tool-chip">G✚</div>293 <div class="tool-chip">🎨</div>294 <div class="tool-chip">🎤</div>295 </div>296 297 <div class="keys">298 <div class="row">299 <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>300 <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>301 </div>302 <div class="row row2">303 <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>304 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>305 </div>306 <div class="row row3">307 <div class="key wide">⇧</div>308 <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>309 <div class="key back">⌫</div>310 </div>311 </div>312 313 <div class="bottom-row">314 <div class="key round">?123</div>315 <div class="key">,</div>316 <div class="space"></div>317 <div class="key">.</div>318 <div class="enter">↩</div>319 </div>320 </div>321 322 <!-- Bottom Navigation Pill -->323 <div class="nav-bar"><div class="pill"></div></div>324</div>325</body>326</html>