GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Foxit PDF Editor - Get Started</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top system/status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #3f454b;24    color: #d9dde1;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    box-sizing: border-box;30    font-size: 36px;31    letter-spacing: 0.5px;32  }33  .status-right {34    display: flex; gap: 26px; align-items: center;35  }36  .icon {37    width: 44px; height: 44px;38    display: inline-flex; align-items: center; justify-content: center;39  }40  .icon svg { width: 44px; height: 44px; fill: none; stroke: #d9dde1; stroke-width: 4; }41 42  /* App toolbar */43  .app-bar {44    position: absolute;45    top: 120px;46    left: 0;47    width: 1080px;48    height: 200px;49    background: #3f454b;50    color: #ffffff;51    box-sizing: border-box;52    padding: 0 36px;53  }54  .app-bar-top {55    height: 120px;56    display: flex; align-items: center; justify-content: space-between;57  }58  .app-title {59    display: flex; align-items: center; gap: 22px;60    font-size: 48px; font-weight: 600;61  }62  .app-title .dropdown {63    display: inline-flex; align-items: center; gap: 10px;64  }65  .tool-row {66    height: 80px;67    display: flex; align-items: center; gap: 44px;68    color: #cfd4d8;69  }70  .tool {71    display: flex; align-items: center; gap: 16px;72    color: #cfd4d8;73    font-size: 36px;74  }75  .tool .tool-icon svg { stroke: #cfd4d8; }76 77  /* Content area */78  .content {79    position: absolute;80    top: 320px;81    left: 0;82    width: 1080px;83    height: calc(2400px - 320px - 180px);84    overflow: hidden;85    box-sizing: border-box;86    padding: 60px 70px 180px 70px;87    background: #ffffff;88  }89 90  .hero {91    width: 940px;92    min-height: 440px;93    background: #7b3db4;94    color: #ffffff;95    padding: 70px;96    box-sizing: border-box;97    border-radius: 6px;98    margin-bottom: 60px;99  }100  .hero h1 {101    margin: 0;102    font-size: 90px;103    line-height: 1.05;104    letter-spacing: 2px;105    font-weight: 700;106  }107 108  .intro {109    color: #70767a;110    font-size: 44px;111    line-height: 1.45;112    margin-bottom: 60px;113    width: 920px;114  }115 116  .list {117    width: 920px;118    color: #70767a;119    font-size: 46px;120    line-height: 1.6;121  }122  .list-item {123    display: flex; align-items: baseline; gap: 24px;124    margin: 18px 0;125  }126  .list-item .num {127    color: #7b3db4; font-weight: 700; width: 80px; text-align: right;128  }129 130  /* Bottom navigation bar */131  .bottom-bar {132    position: absolute;133    bottom: 0;134    left: 0;135    width: 1080px;136    height: 180px;137    background: #3f454b;138    display: flex; align-items: center; justify-content: space-around;139    color: #cfd4d8;140  }141  .bottom-icon svg { stroke: #cfd4d8; }142 143  /* Page indicator bubble */144  .page-indicator {145    position: absolute;146    bottom: 210px;147    left: 32px;148    background: #3f454b;149    color: #ffffff;150    font-size: 36px;151    padding: 18px 26px;152    border-radius: 38px;153    opacity: 0.95;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status Bar -->161  <div class="status-bar">162    <div>2:32</div>163    <div class="status-right">164      <div class="icon">165        <!-- Small signal icon -->166        <svg viewBox="0 0 24 24"><path d="M3 21h2M6 17h2M9 13h2M12 9h2M15 5h2"/></svg>167      </div>168      <div class="icon">169        <!-- Upload/Download arrows -->170        <svg viewBox="0 0 24 24">171          <path d="M12 4v10M8 8l4-4 4 4M12 20v-6M8 16l4 4 4-4"/>172        </svg>173      </div>174      <div class="icon">175        <!-- Lock icon -->176        <svg viewBox="0 0 24 24">177          <rect x="5" y="11" width="14" height="10" rx="2"></rect>178          <path d="M8 11V7a4 4 0 0 1 8 0v4"></path>179        </svg>180      </div>181      <div class="icon">182        <!-- Dot -->183        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>184      </div>185      <div class="icon">186        <!-- Wifi -->187        <svg viewBox="0 0 24 24">188          <path d="M2 8c5-4 15-4 20 0M5 12c3-2 11-2 14 0M8 16c2-1 6-1 8 0M12 20h0"/>189        </svg>190      </div>191      <div class="icon">192        <!-- Battery -->193        <svg viewBox="0 0 28 24">194          <rect x="2" y="6" width="20" height="12" rx="2"></rect>195          <rect x="23" y="9" width="3" height="6" rx="1"></rect>196        </svg>197      </div>198    </div>199  </div>200 201  <!-- App Toolbar -->202  <div class="app-bar">203    <div class="app-bar-top">204      <div class="app-title">205        <span class="icon">206          <!-- Back arrow -->207          <svg viewBox="0 0 24 24"><path d="M15 5L7 12l8 7"/></svg>208        </span>209        <span>Annotate</span>210        <span class="dropdown">211          <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>212        </span>213      </div>214      <div class="app-title" style="gap:28px; font-size:40px; font-weight:500;">215        <!-- Quick counters and flash -->216        <div style="background:#5a6066; color:#fff; border-radius:8px; padding:8px 16px;">2</div>217        <div class="icon">218          <!-- Lightning bolt -->219          <svg viewBox="0 0 24 24"><path d="M13 2L3 14h8l-2 8 12-14h-8l2-6z"/></svg>220        </div>221        <div class="icon">222          <!-- More vertical -->223          <svg viewBox="0 0 24 24">224            <circle cx="12" cy="5" r="2"></circle>225            <circle cx="12" cy="12" r="2"></circle>226            <circle cx="12" cy="19" r="2"></circle>227          </svg>228        </div>229      </div>230    </div>231 232    <div class="tool-row">233      <div class="tool">234        <div class="tool-icon icon"><svg viewBox="0 0 24 24"><path d="M4 4h6v6H4z"/></svg></div>235        <div style="opacity:0.9;">A</div>236      </div>237      <div class="tool">238        <div class="tool-icon icon"><svg viewBox="0 0 24 24"><path d="M5 19l14-14M5 9v10h10"/></svg></div>239      </div>240      <div class="tool">241        <div class="tool-icon icon"><svg viewBox="0 0 24 24"><path d="M4 20h16M8 4h8M6 8h12"/></svg></div>242        <div>A</div>243      </div>244      <div class="tool">245        <div class="tool-icon icon"><svg viewBox="0 0 24 24"><path d="M3 21l12-12 6 6-12 6zM15 9l3-3"/></svg></div>246      </div>247      <div class="tool">248        <div class="tool-icon icon"><svg viewBox="0 0 24 24"><path d="M6 12h12M12 6v12"/></svg></div>249        <div>T</div>250      </div>251      <div class="tool">252        <div class="tool-icon icon"><svg viewBox="0 0 24 24"><path d="M5 5h14v14H5z"/></svg></div>253      </div>254      <div class="tool">255        <div class="tool-icon icon"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></div>256      </div>257    </div>258  </div>259 260  <!-- Main content -->261  <div class="content">262    <div class="hero">263      <h1>264        GET STARTED WITH<br>265        FOXIT PDF EDITOR266      </h1>267    </div>268 269    <div class="intro">270      Welcome to Foxit PDF Editor, an<br>271      easy-to-use PDF editor for your everyday<br>272      work on mobile devices.273    </div>274 275    <div class="intro" style="margin-top:10px;">276      Let’s take a look at the ways you can work<br>277      on PDF documents with Foxit PDF Editor.278    </div>279 280    <div class="list">281      <div class="list-item">282        <div class="num">01</div>283        <div>Open a PDF</div>284      </div>285      <div class="list-item">286        <div class="num">02</div>287        <div>View a PDF</div>288      </div>289      <div class="list-item">290        <div class="num">03</div>291        <div>Get Tools to Work with PDFs</div>292      </div>293    </div>294  </div>295 296  <!-- Page indicator -->297  <div class="page-indicator">1 / 1</div>298 299  <!-- Bottom navigation bar -->300  <div class="bottom-bar">301    <div class="bottom-icon icon">302      <!-- Grid icon -->303      <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/></svg>304    </div>305    <div class="bottom-icon icon">306      <!-- Search icon -->307      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4-4"/></svg>308    </div>309    <div class="bottom-icon icon">310      <!-- Diamond icon -->311      <svg viewBox="0 0 24 24"><path d="M12 2l7 7-7 13-7-13 7-7z"/></svg>312    </div>313    <div class="bottom-icon icon">314      <!-- Glasses icon -->315      <svg viewBox="0 0 24 24"><path d="M3 12h4a3 3 0 0 1 6 0h2a3 3 0 0 1 6 0h0M7 12v3M17 12v3"/></svg>316    </div>317    <div class="bottom-icon icon">318      <!-- Menu icon -->319      <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>320    </div>321  </div>322 323</div>324</body>325</html>