GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Foxit PDF Editor - Mock UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff;10  }11 12  /* Top status bar */13  .status-bar {14    position:absolute; top:0; left:0; width:1080px; height:110px;15    background:#3f4448; color:#eaeaea; display:flex; align-items:center;16    padding:0 36px; font-size:42px; letter-spacing:1px;17  }18  .status-right { margin-left:auto; display:flex; align-items:center; gap:26px; }19  .status-dot { width:12px; height:12px; background:#cfd3d6; border-radius:50%; display:inline-block; }20  .battery {21    width:58px; height:32px; border:3px solid #d6d9dc; border-radius:6px; position:relative;22  }23  .battery::after { content:""; position:absolute; right:-10px; top:8px; width:8px; height:16px; background:#d6d9dc; border-radius:2px; }24  .battery .level { width:70%; height:100%; background:#8dd16a; }25 26  /* App bar */27  .app-bar {28    position:absolute; top:110px; left:0; width:1080px; height:230px;29    background:#474d50; color:#fff;30    box-sizing:border-box; padding:24px 30px 20px 30px;31  }32  .app-top { display:flex; align-items:center; }33  .back {34    width:70px; height:70px; display:flex; align-items:center; justify-content:center;35    margin-right:18px;36  }37  .back svg { fill:#ffffff; }38  .title {39    font-size:52px; font-weight:600; letter-spacing:0.5px;40  }41  .caret { font-size:40px; margin-left:14px; color:#d9d9d9; }42  .app-actions { margin-left:auto; display:flex; align-items:center; gap:26px; }43  .badge {44    width:70px; height:70px; border-radius:16px; background:#2c3134; border:2px solid #9ea4a8;45    color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:36px;46  }47  .lightning { color:#29a1ff; font-size:56px; font-weight:800; }48  .kebab { display:flex; flex-direction:column; gap:8px; padding:10px 8px; }49  .kebab span { width:10px; height:10px; background:#eaeaea; border-radius:50%; display:block; }50 51  .tools {52    margin-top:26px; display:flex; align-items:center; gap:34px;53  }54  .tool {55    width:84px; height:72px; border-radius:12px; background:#585e61; color:#fff;56    display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:600;57  }58  .tool.small { width:76px; }59  .undo { transform:scaleX(-1); }60 61  /* Main content */62  .content {63    position:absolute; top:340px; left:0; width:1080px; height:1720px; background:#ffffff;64  }65  .hero {66    width:920px; height:510px; background:#7D3EA8; margin:60px auto 40px auto; border-radius:8px;67    display:flex; align-items:center; padding:40px 60px; box-sizing:border-box;68  }69  .hero h1 {70    color:#ffffff; font-size:72px; line-height:1.2; text-transform:uppercase; margin:0;71    letter-spacing:2px; font-weight:700;72  }73  .copy {74    width:910px; margin:20px auto; color:#6f6f6f; font-size:42px; line-height:1.5;75  }76  .list {77    width:910px; margin:24px auto; font-size:46px; color:#6f6f6f;78  }79  .list-item { display:flex; align-items:flex-start; gap:26px; margin:30px 0; }80  .num {81    color:#8E42C5; font-weight:700; min-width:80px; font-size:54px;82  }83 84  /* Floating right menu button */85  .floating-grid {86    position:absolute; right:26px; top:730px; width:110px; height:110px;87    background:#2f3437; border-radius:55px; display:flex; align-items:center; justify-content:center;88    box-shadow:0 6px 12px rgba(0,0,0,0.25);89  }90  .floating-grid .dot-grid { width:64px; height:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }91  .floating-grid .dot-grid span { width:12px; height:12px; background:#bfc5c9; border-radius:50%; }92 93  /* Bottom bubble */94  .page-bubble {95    position:absolute; left:36px; bottom:220px;96    background:#2f3437; color:#fff; border-radius:26px; padding:18px 30px; font-size:40px;97    box-shadow:0 6px 12px rgba(0,0,0,0.25);98  }99 100  /* Bottom navigation */101  .bottom-bar {102    position:absolute; bottom:0; left:0; width:1080px; height:180px; background:#3f4448;103    display:flex; align-items:center; justify-content:space-around; color:#e9e9e9;104  }105  .nav-icon { width:88px; height:88px; display:flex; align-items:center; justify-content:center; }106  .nav-icon svg { width:72px; height:72px; fill:none; stroke:#e9e9e9; stroke-width:8; }107 108</style>109</head>110<body>111<div id="render-target">112 113  <!-- Status bar -->114  <div class="status-bar">115    <div>2:34</div>116    <div class="status-right">117      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#d6d9dc" d="M12 2L3 9h6v13h6V9h6z"/></svg>118      <div class="status-dot"></div>119      <div class="status-dot"></div>120      <div class="battery"><div class="level"></div></div>121    </div>122  </div>123 124  <!-- App bar -->125  <div class="app-bar">126    <div class="app-top">127      <div class="back">128        <svg viewBox="0 0 24 24" width="48" height="48"><path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>129      </div>130      <div class="title">Fill and Sign <span class="caret">▼</span></div>131      <div class="app-actions">132        <div class="badge">2</div>133        <div class="lightning">⚡</div>134        <div class="kebab"><span></span><span></span><span></span></div>135      </div>136    </div>137 138    <div class="tools">139      <div class="tool">✍</div>140      <div class="tool">T</div>141      <div class="tool">AB</div>142      <div class="tool">📅</div>143      <div class="tool">☑</div>144      <div class="tool">✖</div>145      <div class="tool small">|</div>146      <div class="tool undo">147        <svg viewBox="0 0 24 24" width="44" height="44"><path d="M12 5l-7 7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>148      </div>149      <div class="tool">🔒</div>150    </div>151  </div>152 153  <!-- Content area -->154  <div class="content">155    <div class="hero">156      <h1>GET STARTED WITH<br>FOXIT PDF EDITOR</h1>157    </div>158 159    <div class="copy">160      Welcome to Foxit PDF Editor, an easy-to-use PDF editor for your everyday work on mobile devices.161    </div>162 163    <div class="copy">164      Let’s take a look at the ways you can work on PDF documents with Foxit PDF Editor.165    </div>166 167    <div class="list">168      <div class="list-item">169        <div class="num">01</div>170        <div>Open a PDF</div>171      </div>172      <div class="list-item">173        <div class="num">02</div>174        <div>View a PDF</div>175      </div>176      <div class="list-item">177        <div class="num">03</div>178        <div>Get Tools to Work with PDFs</div>179      </div>180    </div>181  </div>182 183  <!-- Floating menu button -->184  <div class="floating-grid">185    <div class="dot-grid">186      <span></span><span></span><span></span>187      <span></span><span></span><span></span>188      <span></span><span></span><span></span>189    </div>190  </div>191 192  <!-- Bottom page bubble -->193  <div class="page-bubble">1 / 1</div>194 195  <!-- Bottom navigation -->196  <div class="bottom-bar">197    <div class="nav-icon">198      <svg viewBox="0 0 24 24">199        <rect x="3" y="3" width="7" height="7"></rect>200        <rect x="14" y="3" width="7" height="7"></rect>201        <rect x="3" y="14" width="7" height="7"></rect>202        <rect x="14" y="14" width="7" height="7"></rect>203      </svg>204    </div>205    <div class="nav-icon">206      <svg viewBox="0 0 24 24">207        <circle cx="10" cy="10" r="6"></circle>208        <line x1="15" y1="15" x2="22" y2="22"></line>209      </svg>210    </div>211    <div class="nav-icon">212      <svg viewBox="0 0 24 24">213        <polygon points="12,2 15,9 22,12 15,15 12,22 9,15 2,12 9,9"></polygon>214      </svg>215    </div>216    <div class="nav-icon">217      <svg viewBox="0 0 24 24">218        <path d="M4 10c2-3 14-3 16 0M5 14c3 2 11 2 14 0" stroke-linecap="round"></path>219      </svg>220    </div>221    <div class="nav-icon">222      <svg viewBox="0 0 24 24">223        <line x1="3" y1="6" x2="21" y2="6"></line>224        <line x1="3" y1="12" x2="21" y2="12"></line>225        <line x1="3" y1="18" x2="21" y2="18"></line>226      </svg>227    </div>228  </div>229 230</div>231</body>232</html>