GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Foxit PDF Editor</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #2f3338;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 height: 110px;19 background: #3a3f44;20 display: flex;21 align-items: center;22 justify-content: space-between;23 padding: 0 32px;24 font-size: 40px;25 letter-spacing: 1px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 24px;31 opacity: 0.9;32 font-size: 32px;33 }34 .icon-circle {35 width: 26px; height: 26px; border-radius: 50%; border: 2px solid #b7c1c9;36 }37 38 /* App bar */39 .app-bar {40 height: 180px;41 background: #3f4449;42 display: flex;43 align-items: center;44 padding: 0 28px;45 gap: 22px;46 }47 .app-title {48 font-size: 56px;49 font-weight: 600;50 }51 .app-actions {52 margin-left: auto;53 display: flex;54 align-items: center;55 gap: 28px;56 }57 .bubble-count {58 width: 64px; height: 64px;59 border-radius: 16px;60 border: 3px solid #9aa7b2;61 display: flex; align-items: center; justify-content: center;62 font-size: 36px;63 }64 .lightning {65 width: 42px; height: 42px;66 background: #55a7ff;67 clip-path: polygon(55% 0, 30% 55%, 60% 55%, 35% 100%, 70% 40%, 40% 40%);68 }69 .kebab { width: 10px; height: 50px; position: relative; }70 .kebab:before, .kebab:after, .kebab i {71 content: ""; display: block; width: 10px; height: 10px; background: #cfd6dc; border-radius: 50%; margin: 6px 0;72 }73 74 /* Toolbar */75 .tool-bar {76 height: 160px;77 background: #34393e;78 display: flex;79 align-items: center;80 padding: 0 28px;81 gap: 36px;82 }83 .tool {84 width: 94px; height: 94px;85 border-radius: 16px;86 border: 2px solid #60666b;87 display: flex; align-items: center; justify-content: center;88 background: #3c4146;89 }90 .tool.selected {91 background: #cf4c3c;92 border-color: #cf4c3c;93 }94 .tool svg { width: 52px; height: 52px; }95 .undo-redo { margin-left: auto; display: flex; align-items: center; gap: 26px; }96 .lock-icon {97 width: 42px; height: 42px; border: 3px solid #cfd6dc; border-radius: 6px; position: relative;98 }99 .lock-icon:before {100 content:""; width: 22px; height: 12px; border: 3px solid #cfd6dc; border-bottom: none;101 position: absolute; top: -16px; left: 7px; border-radius: 10px;102 }103 104 /* Document area */105 .doc-area {106 background: #ffffff;107 position: absolute;108 top: 450px; /* status + app bar + toolbar heights */109 left: 0;110 right: 0;111 bottom: 830px; /* leave space for keyboard */112 overflow: hidden;113 color: #333;114 }115 .banner {116 background: #7c2a8e;117 margin: 50px 60px 30px;118 height: 340px;119 border-radius: 6px;120 color: #fff;121 display: flex; align-items: center;122 padding: 0 50px;123 }124 .banner h1 {125 font-size: 72px;126 line-height: 1.15;127 letter-spacing: 2px;128 text-transform: uppercase;129 margin: 0;130 }131 .doc-content {132 padding: 0 60px 40px;133 color: #707070;134 font-size: 42px;135 line-height: 1.4;136 }137 138 /* Keyboard */139 .keyboard {140 position: absolute;141 bottom: 0; left: 0; right: 0;142 height: 830px;143 background: #0f1114;144 color: #eaeef2;145 border-top: 1px solid #1c2025;146 }147 .kbd-suggest {148 height: 120px;149 padding: 0 28px;150 display: flex; align-items: center; gap: 36px;151 color: #cdd5db;152 font-size: 32px;153 }154 .kbd-key-row {155 display: flex;156 justify-content: space-between;157 padding: 18px 28px;158 }159 .key {160 width: 94px; height: 120px;161 background: #1c2025; border-radius: 16px;162 display: flex; align-items: center; justify-content: center;163 font-size: 42px;164 box-shadow: inset 0 0 0 2px #2b3137;165 }166 .key.wide { width: 136px; }167 .key.space { flex: 1; margin: 0 18px; }168 .key.enter {169 width: 136px; background: #7fc3ff; color: #0f1114; font-weight: 700;170 }171 .kbd-bottom {172 display: flex; align-items: center; padding: 18px 28px; gap: 18px;173 }174 .icon-small {175 width: 48px; height: 48px; border-radius: 10px; background: #1c2025; display: flex; align-items: center; justify-content: center;176 box-shadow: inset 0 0 0 2px #2b3137;177 }178</style>179</head>180<body>181<div id="render-target">182 183 <!-- Status Bar -->184 <div class="status-bar">185 <div>2:36</div>186 <div class="status-right">187 <div class="icon-circle"></div>188 <div class="icon-circle" style="border-color:#9fd65d"></div>189 <div style="width: 36px; height: 22px; border: 3px solid #cfd6dc; border-radius: 4px; position: relative;">190 <div style="position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#cfd6dc;"></div>191 </div>192 </div>193 </div>194 195 <!-- App Bar -->196 <div class="app-bar">197 <div class="tool" style="width:80px;height:80px;background:#3f4449;border-color:#869199;">198 <svg viewBox="0 0 24 24">199 <path d="M15 18l-6-6 6-6" fill="none" stroke="#d7dee4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>200 </svg>201 </div>202 <div class="app-title">Fill and Sign</div>203 <svg viewBox="0 0 24 24" width="40" height="40" style="margin-left:6px;">204 <path d="M6 9l6 6 6-6" fill="none" stroke="#cfd6dc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>205 </svg>206 207 <div class="app-actions">208 <div class="bubble-count">2</div>209 <div class="lightning"></div>210 <div class="kebab"><i></i></div>211 </div>212 </div>213 214 <!-- Tool Bar -->215 <div class="tool-bar">216 <div class="tool">217 <!-- signature pen -->218 <svg viewBox="0 0 24 24">219 <path d="M3 21s3-3 6-3 5 2 8 2 4-2 4-2" fill="none" stroke="#d7dee4" stroke-width="2" stroke-linecap="round"/>220 <path d="M14 3l7 7" fill="none" stroke="#d7dee4" stroke-width="2"/>221 <path d="M13 4l-9 9-1 5 5-1 9-9" fill="none" stroke="#d7dee4" stroke-width="2"/>222 </svg>223 </div>224 <div class="tool selected">225 <!-- T icon -->226 <svg viewBox="0 0 24 24">227 <path d="M4 4h16M10 4v16" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>228 </svg>229 </div>230 <div class="tool">231 <!-- AB icon -->232 <svg viewBox="0 0 24 24">233 <text x="4" y="16" font-size="12" fill="#d7dee4" font-family="Arial">AB</text>234 </svg>235 </div>236 <div class="tool">237 <!-- calendar -->238 <svg viewBox="0 0 24 24">239 <rect x="3" y="5" width="18" height="16" fill="none" stroke="#d7dee4" stroke-width="2"/>240 <path d="M7 3v4M17 3v4M3 10h18" stroke="#d7dee4" stroke-width="2"/>241 </svg>242 </div>243 <div class="tool">244 <!-- checkbox -->245 <svg viewBox="0 0 24 24">246 <rect x="4" y="4" width="16" height="16" fill="none" stroke="#d7dee4" stroke-width="2"/>247 <path d="M7 12l3 3 7-7" fill="none" stroke="#d7dee4" stroke-width="2"/>248 </svg>249 </div>250 <div class="tool">251 <!-- X in box -->252 <svg viewBox="0 0 24 24">253 <rect x="4" y="4" width="16" height="16" fill="none" stroke="#d7dee4" stroke-width="2"/>254 <path d="M8 8l8 8M16 8l-8 8" stroke="#d7dee4" stroke-width="2"/>255 </svg>256 </div>257 <div class="tool">258 <!-- vertical bar -->259 <svg viewBox="0 0 24 24">260 <path d="M12 4v16" stroke="#d7dee4" stroke-width="2"/>261 </svg>262 </div>263 264 <div class="undo-redo">265 <svg viewBox="0 0 24 24" width="52" height="52">266 <path d="M9 4L4 9l5 5" fill="none" stroke="#d7dee4" stroke-width="2" stroke-linecap="round"/>267 <path d="M20 20a7 7 0 0 0-7-7H4" fill="none" stroke="#d7dee4" stroke-width="2"/>268 </svg>269 <svg viewBox="0 0 24 24" width="52" height="52">270 <path d="M15 4l5 5-5 5" fill="none" stroke="#d7dee4" stroke-width="2" stroke-linecap="round"/>271 <path d="M4 20a7 7 0 0 1 7-7h9" fill="none" stroke="#d7dee4" stroke-width="2"/>272 </svg>273 <svg viewBox="0 0 24 24" width="54" height="54">274 <path d="M4 6h16M4 12h16M4 18h16" stroke="#d7dee4" stroke-width="2"/>275 </svg>276 <div class="lock-icon"></div>277 </div>278 </div>279 280 <!-- Document area -->281 <div class="doc-area">282 <div class="banner">283 <h1>GET STARTED WITH284 FOXIT PDF EDITOR</h1>285 </div>286 <div class="doc-content">287 <p>Welcome to Foxit PDF Editor, an easy-to-use PDF editor for your everyday work on mobile devices.</p>288 <p>Let’s take a look at the ways you can work on PDF documents with Foxit PDF Editor.</p>289 290 <!-- Placeholder where the page content would be -->291 <div style="margin-top: 30px; width: 960px; height: 220px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">292 [IMG: PDF page content placeholder]293 </div>294 </div>295 </div>296 297 <!-- Keyboard -->298 <div class="keyboard">299 <div class="kbd-suggest">300 <div class="icon-small"><svg viewBox="0 0 24 24" width="28" height="28"><rect x="3" y="3" width="6" height="6" fill="#cfd6dc"/><rect x="13" y="3" width="8" height="6" fill="#cfd6dc"/><rect x="3" y="13" width="8" height="8" fill="#cfd6dc"/><rect x="13" y="13" width="6" height="8" fill="#cfd6dc"/></svg></div>301 <div class="icon-small"><span style="font-size:24px">😊</span></div>302 <div class="icon-small"><span style="font-size:20px">GIF</span></div>303 <div class="icon-small"><svg viewBox="0 0 24 24" width="26" height="26"><circle cx="12" cy="12" r="9" fill="none" stroke="#cfd6dc" stroke-width="2"/><path d="M12 7v5l4 2" stroke="#cfd6dc" stroke-width="2" /></svg></div>304 <div class="icon-small"><span style="font-size:18px">G⇄</span></div>305 <div class="icon-small"><svg viewBox="0 0 24 24" width="28" height="28"><path d="M4 20l4-12 4 8 4-4 4 8z" fill="#cfd6dc"/></svg></div>306 <div class="icon-small"><svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 3v18M5 12h14" stroke="#cfd6dc" stroke-width="2"/></svg></div>307 </div>308 309 <!-- Row 1 -->310 <div class="kbd-key-row">311 <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>312 <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>313 </div>314 <!-- Row 2 -->315 <div class="kbd-key-row">316 <div class="key wide">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div><div class="key">G</div>317 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key wide">L</div>318 </div>319 <!-- Row 3 -->320 <div class="kbd-key-row">321 <div class="key wide">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div><div class="key">B</div>322 <div class="key">N</div><div class="key">M</div>323 <div class="key wide" style="display:flex; align-items:center; justify-content:center;">324 <svg viewBox="0 0 24 24" width="34" height="34"><path d="M4 12h16M15 7l5 5-5 5" stroke="#cfd6dc" stroke-width="2" fill="none"/></svg>325 </div>326 </div>327 <!-- Bottom row -->328 <div class="kbd-bottom">329 <div class="key wide">?123</div>330 <div class="key">,</div>331 <div class="key wide">😊</div>332 <div class="key space"></div>333 <div class="key">.</div>334 <div class="key enter">⏎</div>335 </div>336 </div>337 338</div>339</body>340</html>