GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Fill and Sign - Foxit PDF Editor</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family:Roboto, Arial, sans-serif;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;10 background:#2f3337; /* overall dark UI chrome */11 color:#fff;12 }13 14 /* Status bar */15 .status-bar{16 position:absolute;top:0;left:0;width:100%;height:110px;17 background:#3b3f43;display:flex;align-items:center;justify-content:space-between;18 padding:0 32px;box-sizing:border-box;font-weight:500;19 }20 .status-left{display:flex;align-items:center;gap:22px;}21 .status-right{display:flex;align-items:center;gap:26px;}22 .sb-icon{23 width:26px;height:26px;border:2px solid #cfd4da;border-radius:4px;opacity:.85;24 }25 .battery{26 width:40px;height:24px;border:2px solid #cfd4da;border-radius:4px;position:relative;27 }28 .battery::after{29 content:"";position:absolute;right:-8px;top:6px;width:6px;height:12px;background:#cfd4da;border-radius:2px;30 }31 32 /* App toolbar */33 .toolbar{34 position:absolute;top:110px;left:0;width:100%;height:180px;35 background:#3b3f43;border-bottom:1px solid #50565b;36 display:flex;align-items:center;justify-content:space-between;37 padding:0 30px;box-sizing:border-box;38 }39 .tool-left{display:flex;align-items:center;gap:26px;}40 .tool-title{font-size:56px;letter-spacing:.5px;}41 .tool-actions{display:flex;align-items:center;gap:30px;}42 .round-count{43 width:74px;height:74px;border-radius:14px;border:2px solid #9fb5ff;color:#9fb5ff;44 display:flex;align-items:center;justify-content:center;font-size:40px;45 }46 47 /* Secondary tool row */48 .tool-row{49 position:absolute;top:290px;left:0;width:100%;height:130px;50 background:#3b3f43;border-bottom:1px solid #50565b;51 display:flex;align-items:center;gap:28px;padding:0 30px;box-sizing:border-box;52 }53 .tool-btn{54 width:100px;height:80px;border-radius:12px;background:#44494d;color:#fff;55 display:flex;align-items:center;justify-content:center;font-weight:600;font-size:40px;56 box-shadow:inset 0 0 0 2px #61676c;57 }58 .tool-btn.light{background:transparent;border:2px solid #61676c;}59 .tool-spacer{flex:1;}60 .icon-chip{color:#cdd2d7;font-size:42px;opacity:.9;margin-right:22px;}61 62 /* Document area */63 .doc{64 position:absolute;top:420px;left:0;width:100%;height:1180px;background:#ffffff;color:#333;65 padding:60px;box-sizing:border-box;overflow:hidden;66 }67 .banner{68 width:960px;height:420px;background:#82349a;color:#fff;border-radius:6px;69 display:flex;align-items:center;justify-content:center;text-align:center;margin:0 auto 70px auto;70 box-shadow:0 2px 0 rgba(0,0,0,0.05) inset;71 }72 .banner h1{73 margin:0;font-size:86px;letter-spacing:6px;line-height:1.15;font-weight:700;text-transform:uppercase;74 width:900px;75 }76 .doc p{77 font-size:46px;line-height:1.5;color:#666;margin:0 60px 44px 60px;78 }79 .cursor{80 position:absolute;left:470px;top:940px;width:76px;height:76px;border-radius:38px;81 background:#cfe9ff;border:4px solid #5aaef5;display:flex;align-items:center;justify-content:center;82 color:#3b86e0;font-weight:700;83 box-shadow:0 2px 8px rgba(0,0,0,0.25);84 }85 86 /* Keyboard */87 .keyboard{88 position:absolute;bottom:0;left:0;width:100%;height:860px;background:#111213;border-top:1px solid #2a2d31;89 box-sizing:border-box;padding-top:20px;90 }91 .suggestions{92 height:120px;display:flex;align-items:center;gap:90px;color:#cfd4da;padding:0 34px;font-size:46px;border-bottom:1px solid #2a2d31;93 }94 .kb-row{display:flex;justify-content:center;gap:18px;margin-top:34px;}95 .key{96 width:88px;height:110px;border-radius:16px;background:#1b1c1f;color:#e7e8ea;97 display:flex;align-items:center;justify-content:center;font-size:42px;border:1px solid #2a2d31;98 }99 .key.wide{width:160px;}100 .key.space{width:640px;height:120px;margin-top:30px;background:#1b1c1f;}101 .enter{102 width:170px;height:170px;border-radius:86px;background:#bfe8ff;color:#1b3b4b;103 display:flex;align-items:center;justify-content:center;font-size:60px;margin-left:22px;104 }105 106 /* Simple inline icons */107 .icon{width:54px;height:54px;display:inline-block;}108 .back svg{width:54px;height:54px;fill:#fff;}109 .menu-dot{width:10px;height:10px;border-radius:50%;background:#cfd4da;margin:6px 0;}110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status bar -->116 <div class="status-bar">117 <div class="status-left">118 <div style="font-size:44px;">2:36</div>119 <div class="sb-icon" title="signal"></div>120 <div class="sb-icon" title="upload"></div>121 <div class="sb-icon" title="download"></div>122 <div class="sb-icon" title="lock"></div>123 <div class="sb-icon" title="dot"></div>124 </div>125 <div class="status-right">126 <div class="sb-icon" style="border-radius:50%;" title="wifi"></div>127 <div class="battery" title="battery"></div>128 </div>129 </div>130 131 <!-- App toolbar -->132 <div class="toolbar">133 <div class="tool-left">134 <div class="back icon">135 <svg viewBox="0 0 24 24">136 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>137 </svg>138 </div>139 <div class="tool-title">Fill and Sign</div>140 <div class="icon" style="transform:translateY(8px);">141 <svg viewBox="0 0 24 24"><path d="M8 10l4 4 4-4" fill="#cfd4da"></path></svg>142 </div>143 </div>144 <div class="tool-actions">145 <div class="round-count">2</div>146 <div class="icon-chip">⚡</div>147 <div style="display:flex;flex-direction:column;align-items:center;gap:2px;">148 <div class="menu-dot"></div><div class="menu-dot"></div><div class="menu-dot"></div>149 </div>150 </div>151 </div>152 153 <!-- Secondary tool row -->154 <div class="tool-row">155 <div class="tool-btn">li</div>156 <div class="tool-btn light">T</div>157 <div class="tool-btn light">AB</div>158 <div class="tool-btn light">📅</div>159 <div class="tool-btn light">☑</div>160 <div class="tool-btn light">✖</div>161 <div class="tool-btn light">|</div>162 <div class="tool-spacer"></div>163 <div class="tool-btn light" title="Undo">↶</div>164 <div class="tool-btn light" title="Menu">≡</div>165 <div class="tool-btn light" title="Lock">🔒</div>166 </div>167 168 <!-- Document canvas -->169 <div class="doc">170 <div class="banner">171 <h1>GET STARTED WITH FOXIT PDF EDITOR</h1>172 </div>173 174 <p>Welcome to Foxit PDF Editor, an easy-to-use PDF editor for your everyday work on mobile devices.</p>175 <div class="cursor">↻</div>176 <p>Let’s take a look at the ways you can work on PDF documents with Foxit PDF Editor.</p>177 </div>178 179 <!-- Keyboard -->180 <div class="keyboard">181 <div class="suggestions">182 <div>Hi</div>183 <div>Ho</div>184 <div>Hii</div>185 </div>186 187 <div class="kb-row">188 <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>189 <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>190 </div>191 <div class="kb-row">192 <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>193 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>194 </div>195 <div class="kb-row">196 <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>197 <div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div>198 </div>199 <div class="kb-row" style="align-items:center;">200 <div class="key wide">?123</div>201 <div class="key wide">,</div>202 <div class="key wide">🙂</div>203 <div class="key space"></div>204 <div class="key wide">.</div>205 <div class="enter">↵</div>206 </div>207 </div>208 209</div>210</body>211</html>