GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>PDF Viewer UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 color: #333;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 padding: 0 36px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 background: #FFFFFF;30 color: #121212;31 font-size: 40px;32 }33 .status-left { display: flex; align-items: center; gap: 12px; }34 .status-right { display: flex; align-items: center; gap: 22px; color: #555; }35 .icon { width: 44px; height: 44px; }36 .battery {37 display: flex; align-items: center; gap: 10px; font-size: 34px; color: #555;38 }39 40 /* Top toolbar */41 .toolbar {42 position: absolute;43 top: 110px;44 left: 0;45 width: 1080px;46 height: 120px;47 display: flex;48 align-items: center;49 padding: 0 30px;50 box-sizing: border-box;51 background: #FFFFFF;52 border-bottom: 1px solid #E5E5E5;53 color: #5F6368;54 }55 .toolbar .left { display: flex; align-items: center; gap: 30px; }56 .toolbar .right { margin-left: auto; display: flex; align-items: center; gap: 40px; }57 .btn-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }58 .page-chip {59 width: 84px; height: 72px; border: 1px solid #C8C8C8; border-radius: 10px;60 display: flex; align-items: center; justify-content: center; font-size: 36px; color: #333;61 }62 63 /* Recommendation banner */64 .banner {65 position: absolute;66 top: 230px;67 left: 30px;68 width: 1020px;69 height: 120px;70 background: #3E3E3E;71 border-radius: 12px;72 display: flex;73 align-items: center;74 box-shadow: 0 2px 6px rgba(0,0,0,0.12);75 color: #F2F2F2;76 padding: 0 24px;77 box-sizing: border-box;78 }79 .banner-text { font-size: 36px; flex: 1; }80 .banner .close {81 width: 60px; height: 60px; color: #BDBDBD; display: flex; align-items: center; justify-content: center;82 margin-right: 10px;83 }84 .banner .action {85 width: 140px; height: 72px; background: #1E88E5; color: #fff; border-radius: 8px;86 display: flex; align-items: center; justify-content: center; font-size: 34px; margin-right: 10px;87 }88 89 /* Document content */90 .doc-wrap {91 position: absolute;92 top: 380px;93 left: 60px;94 right: 60px;95 bottom: 240px;96 overflow: auto;97 padding-right: 24px;98 }99 .doc {100 max-width: 960px;101 }102 .doc h1 {103 margin: 40px 0 10px 0;104 font-size: 46px;105 color: #1E88E5;106 font-weight: 700;107 }108 .doc p { font-size: 30px; line-height: 1.6; color: #555; margin: 8px 0 24px 0; }109 .doc ol { margin: 0; padding-left: 36px; }110 .doc li { font-size: 30px; line-height: 1.7; color: #333; margin-bottom: 26px; }111 112 /* Bottom actions */113 .bottom-bar {114 position: absolute;115 left: 0;116 bottom: 0;117 width: 1080px;118 height: 190px;119 background: #FFFFFF;120 border-top: 1px solid #E5E5E5;121 display: flex;122 align-items: center;123 justify-content: space-around;124 padding: 0 10px;125 box-sizing: border-box;126 }127 .action-item { width: 180px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #6B6B6B; }128 .action-icon {129 width: 80px; height: 80px; border: 1px dashed #BDBDBD; border-radius: 12px; display: flex; align-items: center; justify-content: center;130 position: relative;131 }132 .spark { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; background: #1E88E5; border-radius: 50%; }133 .action-item span { font-size: 30px; }134 /* Navigation pill */135 .nav-pill {136 position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%);137 width: 280px; height: 14px; background: #9E9E9E; border-radius: 7px;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Status Bar -->145 <div class="status-bar">146 <div class="status-left">147 <span>2:20</span>148 </div>149 <div class="status-right">150 <!-- Do Not Disturb -->151 <svg class="icon" viewBox="0 0 24 24">152 <circle cx="12" cy="12" r="10" fill="#757575"></circle>153 <rect x="6" y="11" width="12" height="2" fill="#FFFFFF"></rect>154 </svg>155 <!-- Battery -->156 <div class="battery">157 <svg class="icon" viewBox="0 0 28 24">158 <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#757575" stroke-width="2"></rect>159 <rect x="4" y="7" width="16" height="10" fill="#757575"></rect>160 <rect x="22" y="9" width="4" height="6" rx="1" ry="1" fill="#757575"></rect>161 </svg>162 <span>100%</span>163 </div>164 </div>165 </div>166 167 <!-- Toolbar -->168 <div class="toolbar">169 <div class="left">170 <!-- Back Arrow -->171 <div class="btn-icon">172 <svg class="icon" viewBox="0 0 24 24">173 <path d="M15 6 L9 12 L15 18" fill="none" stroke="#5F6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>174 </svg>175 </div>176 <div class="page-chip">1</div>177 <!-- Fit to screen icon -->178 <div class="btn-icon">179 <svg class="icon" viewBox="0 0 24 24">180 <rect x="5" y="5" width="14" height="14" fill="none" stroke="#5F6368" stroke-width="2"></rect>181 <path d="M8 8 L8 10 L10 10" stroke="#5F6368" stroke-width="2"></path>182 <path d="M16 8 L14 8 L14 10" stroke="#5F6368" stroke-width="2"></path>183 <path d="M8 16 L10 16 L10 14" stroke="#5F6368" stroke-width="2"></path>184 <path d="M16 16 L14 16 L14 14" stroke="#5F6368" stroke-width="2"></path>185 </svg>186 </div>187 </div>188 <div class="right">189 <!-- Save (floppy) -->190 <div class="btn-icon">191 <svg class="icon" viewBox="0 0 24 24">192 <rect x="4" y="4" width="16" height="16" rx="2" ry="2" fill="none" stroke="#5F6368" stroke-width="2"></rect>193 <rect x="8" y="6" width="8" height="5" fill="#5F6368"></rect>194 <rect x="8" y="13" width="8" height="5" fill="none" stroke="#5F6368" stroke-width="2"></rect>195 </svg>196 </div>197 <!-- Share -->198 <div class="btn-icon">199 <svg class="icon" viewBox="0 0 24 24">200 <circle cx="6" cy="12" r="3" fill="none" stroke="#5F6368" stroke-width="2"></circle>201 <circle cx="18" cy="6" r="3" fill="none" stroke="#5F6368" stroke-width="2"></circle>202 <circle cx="18" cy="18" r="3" fill="none" stroke="#5F6368" stroke-width="2"></circle>203 <path d="M9 12 L15 7" stroke="#5F6368" stroke-width="2"></path>204 <path d="M9 12 L15 17" stroke="#5F6368" stroke-width="2"></path>205 </svg>206 </div>207 <!-- Kebab menu -->208 <div class="btn-icon">209 <svg class="icon" viewBox="0 0 24 24">210 <circle cx="12" cy="5" r="2" fill="#5F6368"></circle>211 <circle cx="12" cy="12" r="2" fill="#5F6368"></circle>212 <circle cx="12" cy="19" r="2" fill="#5F6368"></circle>213 </svg>214 </div>215 </div>216 </div>217 218 <!-- Recommendation Banner -->219 <div class="banner">220 <div class="banner-text">【Recommend】 Easily add text in PDF</div>221 <div class="action">Add</div>222 <div class="close">223 <svg class="icon" viewBox="0 0 24 24">224 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"></path>225 </svg>226 </div>227 </div>228 229 <!-- Document Content -->230 <div class="doc-wrap">231 <div class="doc">232 <h1>Brainstorm: Creative Stay-at-Home Activities</h1>233 <p>With many people spending more time at home due to the COVID-19 pandemic, there has been a need for creative stay-at-home activities to keep boredom at bay. Here are some ideas:</p>234 235 <ol>236 <li><strong>Cooking/Baking Challenges:</strong> Encourage your family and friends to participate in cooking and baking challenges where they have to create a dish with certain ingredients or follow a difficult recipe.</li>237 <li><strong>Virtual Game Nights:</strong> Host a virtual game night with friends and family by playing virtual games such as Pictionary, Cards Against Humanity, or Trivia.</li>238 <li><strong>Virtual Museum Tours:</strong> Tour some of the world's most famous museums virtually using technology, including the Smithsonian's National Museum of Natural History and the British Museum.</li>239 <li><strong>DIY Home Projects:</strong> Try out some new DIY home projects, such as painting a room, creating a feature wall or landscaping your garden.</li>240 <li><strong>Online Exercise Classes:</strong> Participate in online exercise classes such as yoga or HIIT, which are great for maintaining physical and mental well-being.</li>241 <li><strong>Learn a New Skill:</strong> Learn a new language, take an online course in a subject you're interested in, or try out a new hobby such as painting or knitting.</li>242 <li><strong>Organize Virtual Gatherings:</strong> Organize virtual gatherings such as happy hours, book clubs or movie nights with friends and family.</li>243 </ol>244 245 <p>These stay-at-home activities can provide an enjoyable and creative way to pass the time, while also improving everyone's well-being.</p>246 </div>247 </div>248 249 <!-- Bottom Actions -->250 <div class="bottom-bar">251 <div class="action-item">252 <div class="action-icon">253 <div class="spark"></div>254 <svg class="icon" viewBox="0 0 24 24">255 <path d="M6 18 L18 6 M6 6 L18 18" stroke="#9E9E9E" stroke-width="2"></path>256 </svg>257 </div>258 <span>Edit</span>259 </div>260 <div class="action-item">261 <div class="action-icon">262 <div class="spark"></div>263 <svg class="icon" viewBox="0 0 24 24">264 <rect x="4" y="4" width="16" height="12" fill="none" stroke="#9E9E9E" stroke-width="2"></rect>265 <path d="M4 18 L10 18 L12 16 L20 16" stroke="#9E9E9E" stroke-width="2"></path>266 </svg>267 </div>268 <span>Annotate</span>269 </div>270 <div class="action-item">271 <div class="action-icon">272 <div class="spark"></div>273 <svg class="icon" viewBox="0 0 24 24">274 <path d="M5 17 L10 12 L13 15 L19 9" fill="none" stroke="#9E9E9E" stroke-width="2"></path>275 <circle cx="19" cy="9" r="2" fill="#9E9E9E"></circle>276 </svg>277 </div>278 <span>Fill & Sign</span>279 </div>280 <div class="action-item">281 <div class="action-icon">282 <div class="spark"></div>283 <svg class="icon" viewBox="0 0 24 24">284 <path d="M5 5 L19 5 L19 11 L5 11 Z" fill="none" stroke="#9E9E9E" stroke-width="2"></path>285 <path d="M5 13 L12 13 L12 19 L5 19 Z" fill="none" stroke="#9E9E9E" stroke-width="2"></path>286 </svg>287 </div>288 <span>Convert</span>289 </div>290 <div class="action-item">291 <div class="action-icon">292 <div class="spark"></div>293 <svg class="icon" viewBox="0 0 24 24">294 <circle cx="8" cy="8" r="3" fill="none" stroke="#9E9E9E" stroke-width="2"></circle>295 <circle cx="16" cy="8" r="3" fill="none" stroke="#9E9E9E" stroke-width="2"></circle>296 <circle cx="8" cy="16" r="3" fill="none" stroke="#9E9E9E" stroke-width="2"></circle>297 <circle cx="16" cy="16" r="3" fill="none" stroke="#9E9E9E" stroke-width="2"></circle>298 </svg>299 </div>300 <span>All</span>301 </div>302 </div>303 304 <div class="nav-pill"></div>305</div>306</body>307</html>