GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile PDF Viewer Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #FFFFFF;20 }21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1080px;27 height: 140px;28 background: #fff;29 display: flex;30 align-items: center;31 padding: 0 36px;32 box-sizing: border-box;33 color: #333;34 }35 .status-time {36 font-size: 44px;37 font-weight: 600;38 }39 .status-right {40 margin-left: auto;41 display: flex;42 align-items: center;43 gap: 28px;44 }45 .icon {46 width: 48px;47 height: 48px;48 }49 /* Toolbar */50 .toolbar {51 position: absolute;52 top: 140px;53 left: 0;54 width: 1080px;55 height: 120px;56 background: #fff;57 display: flex;58 align-items: center;59 padding: 0 36px;60 box-sizing: border-box;61 border-bottom: 1px solid #E0E0E0;62 color: #555;63 }64 .toolbar .tool-group {65 display: flex;66 align-items: center;67 gap: 40px;68 margin-left: 24px;69 }70 .page-badge {71 width: 64px;72 height: 64px;73 border: 2px solid #8B8B8B;74 border-radius: 8px;75 display: flex;76 align-items: center;77 justify-content: center;78 color: #333;79 font-size: 28px;80 font-weight: 600;81 }82 /* Spacer between toolbar and page */83 .top-spacer {84 position: absolute;85 top: 260px;86 left: 0;87 width: 1080px;88 height: 180px;89 background: #EFEFEF;90 }91 92 /* Document content */93 .doc {94 position: absolute;95 top: 470px;96 left: 80px;97 width: 920px;98 color: #333;99 line-height: 1.6;100 }101 .doc h1 {102 font-size: 36px;103 color: #2E5EA8;104 margin: 0 0 8px 0;105 font-weight: 700;106 }107 .doc .subtitle {108 font-size: 22px;109 color: #666;110 margin-bottom: 24px;111 }112 .doc ol {113 margin: 0 0 24px 28px;114 padding: 0;115 }116 .doc li {117 font-size: 24px;118 margin-bottom: 20px;119 }120 /* Bottom spacer before action bar */121 .bottom-spacer {122 position: absolute;123 left: 0;124 width: 1080px;125 height: 220px;126 bottom: 300px;127 background: #EFEFEF;128 }129 130 /* Bottom action bar */131 .action-bar {132 position: absolute;133 bottom: 140px;134 left: 0;135 width: 1080px;136 height: 160px;137 background: #fff;138 border-top: 1px solid #E0E0E0;139 display: flex;140 align-items: center;141 justify-content: space-around;142 box-sizing: border-box;143 }144 .action-item {145 width: 160px;146 text-align: center;147 color: #333;148 }149 .action-icon {150 width: 64px;151 height: 64px;152 margin: 0 auto 10px auto;153 position: relative;154 border: 1px dashed #9E9E9E;155 border-radius: 8px;156 display: flex;157 align-items: center;158 justify-content: center;159 }160 .bolt {161 position: absolute;162 top: -10px;163 right: -10px;164 width: 22px;165 height: 22px;166 }167 .action-label {168 font-size: 22px;169 }170 171 /* Gesture bar */172 .gesture {173 position: absolute;174 bottom: 48px;175 left: 390px;176 width: 300px;177 height: 10px;178 background: #BDBDBD;179 border-radius: 6px;180 }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status Bar -->187 <div class="status-bar">188 <div class="status-time">2:22</div>189 <div class="status-right">190 <!-- Do Not Disturb icon -->191 <svg class="icon" viewBox="0 0 24 24">192 <circle cx="12" cy="12" r="10" fill="#777"></circle>193 <rect x="6" y="11" width="12" height="2" fill="#fff"></rect>194 </svg>195 <!-- Wi-Fi icon -->196 <svg class="icon" viewBox="0 0 24 24">197 <path d="M2 9c4-4 16-4 20 0" stroke="#777" stroke-width="2" fill="none" />198 <path d="M5 12c3-3 11-3 14 0" stroke="#777" stroke-width="2" fill="none" />199 <path d="M8 15c2-2 6-2 8 0" stroke="#777" stroke-width="2" fill="none" />200 <circle cx="12" cy="18" r="2" fill="#777"></circle>201 </svg>202 <!-- Battery icon with 100% -->203 <svg class="icon" viewBox="0 0 32 24">204 <rect x="1" y="4" width="26" height="16" rx="2" ry="2" stroke="#777" stroke-width="2" fill="none"></rect>205 <rect x="27" y="8" width="4" height="8" fill="#777"></rect>206 <rect x="4" y="7" width="20" height="10" fill="#77C255"></rect>207 </svg>208 <div style="font-size:28px; color:#333; margin-left:6px;">100%</div>209 </div>210 </div>211 212 <!-- Toolbar -->213 <div class="toolbar">214 <!-- Back chevron -->215 <svg class="icon" viewBox="0 0 24 24">216 <path d="M15 4 L7 12 L15 20" stroke="#4A4A4A" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>217 </svg>218 <div class="tool-group">219 <div class="page-badge">1</div>220 <!-- Fullscreen icon -->221 <svg class="icon" viewBox="0 0 24 24">222 <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" stroke="#4A4A4A" stroke-width="2" fill="none" stroke-linecap="round"></path>223 </svg>224 <!-- Save (floppy) -->225 <svg class="icon" viewBox="0 0 24 24">226 <path d="M4 4h14l2 2v14H4z" stroke="#4A4A4A" stroke-width="2" fill="none"></path>227 <rect x="7" y="4" width="7" height="5" fill="#4A4A4A"></rect>228 <rect x="7" y="12" width="10" height="6" fill="none" stroke="#4A4A4A" stroke-width="2"></rect>229 </svg>230 <!-- Share icon -->231 <svg class="icon" viewBox="0 0 24 24">232 <circle cx="6" cy="12" r="3" fill="#4A4A4A"></circle>233 <circle cx="18" cy="6" r="3" fill="#4A4A4A"></circle>234 <circle cx="18" cy="18" r="3" fill="#4A4A4A"></circle>235 <path d="M9 12 L15 7 M9 12 L15 17" stroke="#4A4A4A" stroke-width="2" fill="none"></path>236 </svg>237 <!-- More (kebab) -->238 <svg class="icon" viewBox="0 0 24 24">239 <circle cx="12" cy="5" r="2" fill="#4A4A4A"></circle>240 <circle cx="12" cy="12" r="2" fill="#4A4A4A"></circle>241 <circle cx="12" cy="19" r="2" fill="#4A4A4A"></circle>242 </svg>243 </div>244 </div>245 246 <div class="top-spacer"></div>247 248 <!-- Document -->249 <div class="doc">250 <h1>Brainstorm: Creative Stay-at-Home Activities</h1>251 <div class="subtitle">252 With many people spending more time at home due to the COVID-19 pandemic, there has been253 a need for creative stay-at-home activities to keep boredom at bay. Here are some ideas:254 </div>255 256 <ol>257 <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>258 <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>259 <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>260 <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>261 <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>262 <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>263 <li><strong>Organize Virtual Gatherings:</strong> Organize virtual gatherings such as happy hours, book clubs or movie nights with friends and family.</li>264 </ol>265 266 <div class="subtitle" style="margin-top:10px;">267 These stay-at-home activities can provide an enjoyable and creative way to pass the time, while also improving everyone's well-being.268 </div>269 </div>270 271 <div class="bottom-spacer"></div>272 273 <!-- Bottom action bar -->274 <div class="action-bar">275 <div class="action-item">276 <div class="action-icon">277 <!-- simple crop-like icon -->278 <svg width="34" height="34" viewBox="0 0 24 24">279 <path d="M7 4v11h11M4 7h11v11" stroke="#7A7A7A" stroke-width="2" fill="none"></path>280 </svg>281 <svg class="bolt" viewBox="0 0 24 24">282 <path d="M10 2 L4 13 L11 13 L8 22 L20 8 L13 8 L16 2 Z" fill="#2E6BF2"></path>283 </svg>284 </div>285 <div class="action-label">Edit</div>286 </div>287 <div class="action-item">288 <div class="action-icon" style="border-style: solid;">289 <!-- annotate icon (pen over image) -->290 <svg width="34" height="34" viewBox="0 0 24 24">291 <rect x="3" y="5" width="18" height="14" stroke="#7A7A7A" stroke-width="2" fill="none"></rect>292 <path d="M8 13l3-3 5 6H6z" fill="#B0B0B0"></path>293 <path d="M14 6l4 4" stroke="#7A7A7A" stroke-width="2"></path>294 </svg>295 <svg class="bolt" viewBox="0 0 24 24">296 <path d="M10 2 L4 13 L11 13 L8 22 L20 8 L13 8 L16 2 Z" fill="#2E6BF2"></path>297 </svg>298 </div>299 <div class="action-label">Annotate</div>300 </div>301 <div class="action-item">302 <div class="action-icon">303 <!-- text T plus -->304 <svg width="34" height="34" viewBox="0 0 24 24">305 <text x="8" y="17" font-size="16" fill="#7A7A7A" font-family="Arial">T</text>306 <path d="M20 10v8M16 14h8" stroke="#7A7A7A" stroke-width="2"></path>307 </svg>308 <svg class="bolt" viewBox="0 0 24 24">309 <path d="M10 2 L4 13 L11 13 L8 22 L20 8 L13 8 L16 2 Z" fill="#2E6BF2"></path>310 </svg>311 </div>312 <div class="action-label">Fill & Sign</div>313 </div>314 <div class="action-item">315 <div class="action-icon">316 <!-- image with plus -->317 <svg width="34" height="34" viewBox="0 0 24 24">318 <rect x="3" y="5" width="18" height="14" stroke="#7A7A7A" stroke-width="2" fill="none"></rect>319 <circle cx="10" cy="11" r="3" fill="#B0B0B0"></circle>320 <path d="M8 16l3-3 4 5H6z" fill="#C8C8C8"></path>321 </svg>322 <svg class="bolt" viewBox="0 0 24 24">323 <path d="M10 2 L4 13 L11 13 L8 22 L20 8 L13 8 L16 2 Z" fill="#2E6BF2"></path>324 </svg>325 </div>326 <div class="action-label">Convert</div>327 </div>328 <div class="action-item">329 <div class="action-icon" style="border-style: solid;">330 <!-- page with check -->331 <svg width="34" height="34" viewBox="0 0 24 24">332 <rect x="5" y="4" width="14" height="16" stroke="#7A7A7A" stroke-width="2" fill="none"></rect>333 <path d="M8 13l3 3 5-6" stroke="#7A7A7A" stroke-width="2" fill="none"></path>334 </svg>335 <svg class="bolt" viewBox="0 0 24 24">336 <path d="M10 2 L4 13 L11 13 L8 22 L20 8 L13 8 L16 2 Z" fill="#2E6BF2"></path>337 </svg>338 </div>339 <div class="action-label">All</div>340 </div>341 </div>342 343 <!-- Gesture bar -->344 <div class="gesture"></div>345</div>346</body>347</html>