GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Fill and Sign - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Top system/status bar */17 .status-bar {18 height: 100px;19 background: #3f454a;20 color: #e6ebef;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 28px;25 font-size: 34px;26 letter-spacing: 1px;27 }28 .status-right {29 display: flex;30 align-items: center;31 gap: 28px;32 opacity: 0.9;33 }34 .dot { width: 10px; height: 10px; background:#cfd5da; border-radius: 50%; display:inline-block; }35 36 /* App bar */37 .appbar {38 height: 120px;39 background: #40464b;40 display: flex;41 align-items: center;42 padding: 0 28px;43 color: #dfe5ea;44 }45 .appbar .title {46 font-size: 48px;47 font-weight: 600;48 margin-left: 20px;49 display: flex;50 align-items: center;51 gap: 14px;52 }53 .appbar .spacer { flex: 1; }54 .icon-btn {55 width: 64px; height: 64px;56 border-radius: 16px;57 display: inline-flex;58 align-items: center;59 justify-content: center;60 margin-left: 18px;61 color: #e7edf2;62 background: transparent;63 border: 2px solid rgba(255,255,255,0.15);64 }65 .counter {66 width: 70px; height: 70px;67 border: 2px solid rgba(255,255,255,0.35);68 border-radius: 14px;69 display: flex; align-items: center; justify-content: center;70 font-weight: 700; font-size: 36px;71 margin-right: 12px;72 }73 74 /* Tools row */75 .tools {76 height: 120px;77 background: #40464b;78 border-top: 1px solid rgba(255,255,255,0.07);79 border-bottom: 1px solid rgba(0,0,0,0.15);80 display: flex;81 align-items: center;82 padding: 0 28px;83 gap: 28px;84 }85 .tool {86 width: 90px; height: 90px;87 border-radius: 18px;88 border: 2px solid rgba(255,255,255,0.25);89 color: #ffffff;90 display: flex; align-items: center; justify-content: center;91 font-weight: 700;92 background: rgba(255,255,255,0.04);93 font-size: 38px;94 }95 .tool.small { font-size: 28px; }96 97 /* Content area */98 .content {99 padding: 24px 60px 0 60px;100 background: #ffffff;101 }102 .hero {103 width: 100%;104 height: 620px;105 background: #8f35ad;106 border-radius: 4px;107 color: #ffffff;108 display: flex;109 flex-direction: column;110 justify-content: center;111 padding: 0 40px;112 }113 .hero h1 {114 margin: 0;115 font-size: 96px;116 line-height: 1.1;117 font-weight: 800;118 letter-spacing: 6px;119 }120 .para {121 margin-top: 40px;122 color: #7a7f83;123 font-size: 44px;124 line-height: 1.5;125 }126 127 /* Keyboard mock */128 .keyboard {129 position: absolute;130 left: 0; right: 0; bottom: 0;131 height: 880px;132 background: #15181b;133 border-top: 1px solid #0b0d0f;134 display: flex;135 flex-direction: column;136 }137 .kb-suggestions {138 height: 180px;139 background: #1b1f23;140 color: #cdd3d8;141 display: flex;142 align-items: center;143 gap: 60px;144 padding: 0 40px;145 font-size: 46px;146 }147 .kb-row {148 display: grid;149 grid-template-columns: repeat(10, 1fr);150 gap: 16px;151 padding: 16px 24px;152 height: 160px;153 }154 .kb-row:last-of-type {155 height: 220px;156 grid-template-columns: 120px 120px 1fr 120px 120px;157 }158 .key {159 background: #252a2f;160 border-radius: 18px;161 color: #e8edf2;162 display: flex; align-items: center; justify-content: center;163 font-size: 48px;164 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35);165 }166 .key.light { background: #2b3036; color: #b9c0c6; }167 .space { font-size: 40px; opacity: 0.8; }168 .left-shift::before { content: "⇧"; font-size: 44px; }169 .enter::before { content: "↵"; font-size: 44px; }170 .backspace::before { content: "⌫"; font-size: 44px; }171 .num { font-weight: 700; }172 /* Simple inline icon helpers */173 .svg-icon { width: 44px; height: 44px; fill: #e7edf2; }174</style>175</head>176<body>177<div id="render-target">178 179 <!-- Top status -->180 <div class="status-bar">181 <div>2:36</div>182 <div class="status-right">183 <span class="dot"></span>184 <span class="dot"></span>185 <span class="dot"></span>186 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M2 18h2V6H2v12zm4 0h2V8H6v10zm4 0h2v-5h-2v5zm4 0h2V4h-2v14zm4 0h2v-9h-2v9z"/></svg>187 </div>188 </div>189 190 <!-- App bar -->191 <div class="appbar">192 <div class="icon-btn" aria-label="Back">193 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M15.5 19L8.5 12l7-7" stroke="#e7edf2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>194 </div>195 <div class="title">Fill and Sign196 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="#e7edf2"/></svg>197 </div>198 <div class="spacer"></div>199 <div class="counter">2</div>200 <div class="icon-btn" title="Lightning">201 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg>202 </div>203 <div class="icon-btn" title="More">204 <svg class="svg-icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>205 </div>206 </div>207 208 <!-- Tools -->209 <div class="tools">210 <div class="tool">li</div>211 <div class="tool">T</div>212 <div class="tool small">AB</div>213 <div class="tool">214 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M7 3h10v2H7zM7 7h10v2H7zM5 11h14v10H5z"/></svg>215 </div>216 <div class="tool">217 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M9 11l3 3 5-5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>218 </div>219 <div class="tool">220 <svg class="svg-icon" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"/><path d="M8 8l8 8M16 8l-8 8" stroke="#fff" stroke-width="2"/></svg>221 </div>222 <div class="tool">{</div>223 <div class="tool">224 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M15 7l-5 5 5 5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>225 </div>226 <div class="tool">227 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M9 7l5 5-5 5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>228 </div>229 <div class="tool small">≡</div>230 <div class="tool small">🔒</div>231 </div>232 233 <!-- Content -->234 <div class="content">235 <div class="hero">236 <h1>GET STARTED WITH</h1>237 <h1>FOXIT PDF EDITOR</h1>238 </div>239 240 <div class="para">241 Welcome to Foxit PDF Editor, an easy-to-use PDF editor for your everyday work on mobile devices.242 </div>243 <div class="para">244 Let’s take a look at the ways you can work on PDF documents with Foxit PDF Editor.245 </div>246 </div>247 248 <!-- Keyboard mock -->249 <div class="keyboard">250 <div class="kb-suggestions">251 <span>H</span><span>Hi</span><span>How</span>252 <div style="margin-left:auto; width:60px; height:60px; background:#39a9e3; border-radius:50%;"></div>253 </div>254 255 <div class="kb-row">256 <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>257 <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>258 </div>259 <div class="kb-row">260 <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>261 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key light">;</div>262 </div>263 <div class="kb-row">264 <div class="key left-shift"></div>265 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>266 <div class="key">b</div><div class="key">n</div><div class="key">m</div>267 <div class="key backspace"></div>268 </div>269 <div class="kb-row">270 <div class="key num">?123</div>271 <div class="key light">,</div>272 <div class="key space">space</div>273 <div class="key light">.</div>274 <div class="key enter"></div>275 </div>276 </div>277 278</div>279</body>280</html>