GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Foxit PDF Editor - Mobile UI Mock</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: #2f3438;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0; left: 0;20    width: 100%; height: 80px;21    background: #3c4146;22    display: flex; align-items: center;23    padding: 0 28px;24    box-sizing: border-box;25    font-size: 30px;26    letter-spacing: 1px;27  }28  .status-left { display: flex; align-items: center; gap: 22px; }29  .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }30 31  /* Simple status icons */32  .icon {33    width: 38px; height: 38px;34    display: inline-flex; justify-content: center; align-items: center;35  }36  .icon svg { width: 100%; height: 100%; }37  .battery svg, .wifi svg, .dot svg { fill: none; stroke: #ffffff; stroke-width: 3; }38 39  /* App bar */40  .appbar {41    position: absolute; top: 80px; left: 0;42    width: 100%; height: 140px;43    background: #3c4146;44    box-sizing: border-box;45    padding: 0 36px;46    display: flex; align-items: center;47  }48  .back { margin-right: 24px; }49  .title {50    font-size: 50px; font-weight: 600;51    display: flex; align-items: center; gap: 12px;52  }53  .title .caret {54    width: 24px; height: 24px; border: solid #cfd8dc; border-width: 0 4px 4px 0;55    transform: rotate(45deg); display: inline-block; margin-top: 4px;56  }57  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }58  .pill {59    width: 64px; height: 64px; border-radius: 14px;60    border: 2px solid #8ba1a9; color: #cfe3ea;61    display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 34px;62  }63  .lightning { font-size: 44px; color: #5ec4ff; }64  .dots { width: 10px; height: 10px; box-shadow: 0 0 0 4px #b0bec5, 0 16px 0 4px #b0bec5, 0 -16px 0 4px #b0bec5; border-radius: 50%; }65 66  /* Tool row */67  .tool-row {68    position: absolute; top: 220px; left: 0;69    width: 100%; height: 120px;70    background: #3c4146;71    display: flex; align-items: center; gap: 42px;72    padding: 0 46px; box-sizing: border-box;73  }74  .tool {75    width: 84px; height: 84px; border-radius: 14px;76    border: 2px solid #8aa0a8; color: #e5f1f4;77    display: flex; justify-content: center; align-items: center;78    font-size: 38px; font-weight: 700;79  }80  .tool-box { border: 2px solid #8aa0a8; width: 84px; height: 84px; border-radius: 14px; position: relative; }81  .tool-box:before {82    content: "T"; position: absolute; color: #fff; font-weight: 700;83    font-size: 38px; left: 50%; top: 50%; transform: translate(-50%,-50%);84  }85  .tool.ab { font-size: 32px; }86  .tool.small { font-size: 30px; }87 88  /* Document workspace background */89  .workspace {90    position: absolute; top: 340px; left: 0; width: 100%; bottom: 900px;91    background: #2f3438;92    padding-top: 40px;93  }94 95  /* White page */96  .page {97    width: 980px; min-height: 1200px;98    margin: 0 auto; background: #ffffff; color: #222;99    border-radius: 2px;100    box-shadow: 0 2px 0 rgba(0,0,0,0.2);101    padding-bottom: 80px;102  }103  .banner {104    background: #7d2a8f; color: #fff;105    height: 420px; padding: 60px 60px;106  }107  .banner h1 {108    margin: 0; line-height: 1.1;109    font-size: 82px; font-weight: 700; letter-spacing: 2px;110  }111  .content { padding: 60px; }112  .para {113    font-size: 44px; color: #6f6f6f; line-height: 1.45; margin-bottom: 46px;114  }115  .cursor {116    position: absolute; width: 4px; height: 44px; background: #49a7ff;117    animation: blink 1s step-start infinite;118  }119  @keyframes blink { 50% { opacity: 0; } }120 121  /* Keyboard */122  .keyboard {123    position: absolute; left: 0; bottom: 0;124    width: 100%; height: 900px;125    background: #0f1215;126    border-top: 2px solid rgba(255,255,255,0.08);127    box-sizing: border-box;128    padding: 24px 24px;129    color: #e6e6e6;130  }131  .kbd-top {132    height: 90px; display: flex; align-items: center; gap: 34px;133    padding: 0 8px; margin-bottom: 18px;134  }135  .chip {136    background: #1d2226; border-radius: 14px; padding: 8px 18px; border: 1px solid #2b3136;137    font-size: 32px; display: inline-flex; align-items: center; gap: 12px;138  }139  .keys-row {140    display: flex; justify-content: center; gap: 16px; margin-bottom: 18px;141  }142  .key {143    width: 92px; height: 120px; border-radius: 18px;144    background: #1d2126; border: 1px solid #2b3136;145    display: flex; align-items: center; justify-content: center;146    font-size: 46px; color: #fff;147  }148  .key.wide { width: 160px; }149  .space { flex: 1; height: 120px; border-radius: 22px; background: #1d2126; border: 1px solid #2b3136; }150  .key.grey { color: #aab3b8; }151  .key.blue { background: #bfe7ff; color: #0c3a50; border-color: #a6d9fb; }152  .key.small { font-size: 32px; }153  .keys-bottom {154    display: flex; align-items: center; gap: 18px; margin-top: 14px;155  }156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Status bar -->162  <div class="status-bar">163    <div class="status-left">164      <div>2:35</div>165      <div class="icon">166        <svg viewBox="0 0 24 24"><path class="dot" d="M2 12h6M12 12h10"/></svg>167      </div>168      <div class="icon">169        <svg viewBox="0 0 24 24"><path class="dot" d="M6 18l6-12 6 12"/></svg>170      </div>171    </div>172    <div class="status-right">173      <div class="icon wifi">174        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 16c3-2 5-2 8 0M12 20h0"/></svg>175      </div>176      <div class="icon battery">177        <svg viewBox="0 0 28 18"><rect x="2" y="3" width="22" height="12" rx="2"></rect><rect x="24" y="6" width="3" height="6"></rect><rect x="4" y="5" width="14" height="8" fill="#ffffff"></rect></svg>178      </div>179    </div>180  </div>181 182  <!-- App bar -->183  <div class="appbar">184    <div class="back icon">185      <svg viewBox="0 0 24 24"><path d="M15 4L7 12l8 8" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>186    </div>187    <div class="title">Fill and Sign <span class="caret"></span></div>188    <div class="app-actions">189      <div class="pill">2</div>190      <div class="lightning">⚡</div>191      <div class="dots"></div>192    </div>193  </div>194 195  <!-- Tool row -->196  <div class="tool-row">197    <div class="tool">✍</div>198    <div class="tool-box"></div>199    <div class="tool ab">AB</div>200    <div class="tool small">📅</div>201    <div class="tool">☑</div>202    <div class="tool">✖</div>203    <div class="tool">⟦</div>204    <div class="tool">↶</div>205    <div class="tool">≡</div>206    <div class="tool small">🔒</div>207  </div>208 209  <!-- Workspace + Page -->210  <div class="workspace">211    <div class="page">212      <div class="banner">213        <h1>GET STARTED WITH<br>FOXIT PDF EDITOR</h1>214      </div>215      <div class="content">216        <div class="para">217          Welcome to Foxit PDF Editor, an<br>218          easy-to-use PDF editor for your everyday<br>219          work on mobile devices<span class="cursor" style="left: 496px; top: 614px;"></span>.220        </div>221        <div class="para">222          Let’s take a look at the ways you can work<br>223          on PDF documents with Foxit PDF Editor.224        </div>225      </div>226    </div>227  </div>228 229  <!-- Keyboard -->230  <div class="keyboard">231    <div class="kbd-top">232      <div class="chip">⬜</div>233      <div class="chip">🙂</div>234      <div class="chip">GIF</div>235      <div class="chip">⚙</div>236      <div class="chip">G↔</div>237      <div class="chip">🎨</div>238      <div class="chip">🎙</div>239    </div>240 241    <div class="keys-row">242      <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>243      <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>244    </div>245    <div class="keys-row">246      <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>247      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>248    </div>249    <div class="keys-row">250      <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>251      <div class="key">n</div><div class="key">m</div>252      <div class="key wide grey">⌫</div>253    </div>254 255    <div class="keys-bottom">256      <div class="key wide grey small">?123</div>257      <div class="key grey">,</div>258      <div class="key grey small">😊</div>259      <div class="space"></div>260      <div class="key grey">.</div>261      <div class="key wide blue">↵</div>262    </div>263  </div>264 265</div>266</body>267</html>