GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Doc UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Top status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 90px;22    background: #244E83;23    color: #ffffff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    box-sizing: border-box;29    font-size: 38px;30    letter-spacing: 0.5px;31  }32  .status-left { font-weight: 600; }33  .status-right {34    display: flex;35    align-items: center;36    gap: 20px;37  }38  .icon-circle-minus { width: 36px; height: 36px; }39  .icon-wifi { width: 40px; height: 40px; }40  .battery {41    display: flex; align-items: center; gap: 10px;42    font-size: 30px;43  }44  .battery svg { width: 60px; height: 32px; }45 46  /* App bar */47  .app-bar {48    position: absolute;49    top: 90px;50    left: 0;51    width: 1080px;52    height: 150px;53    background: #2C5A97;54    color: #ffffff;55    display: flex;56    align-items: center;57    justify-content: space-between;58    padding: 0 36px;59    box-sizing: border-box;60  }61  .app-left, .app-center, .app-right { display: flex; align-items: center; gap: 26px; }62  .app-left .title { font-size: 54px; font-weight: 600; }63  .cloud-icon { width: 52px; height: 52px; }64  .grid-icon { width: 64px; height: 64px; }65  .page-pill {66    padding: 6px 16px;67    background: rgba(255,255,255,0.18);68    border: 1px solid rgba(255,255,255,0.35);69    border-radius: 14px;70    font-size: 36px;71  }72  .close-icon { width: 50px; height: 50px; }73 74  /* Document area */75  .doc-area {76    position: absolute;77    top: 240px;78    left: 0;79    width: 1080px;80    height: 1900px;81    background: #ffffff;82    box-sizing: border-box;83    padding: 40px 54px 160px 54px;84    color: #1c1c1c;85  }86  .doc-title {87    font-size: 46px;88    font-weight: 700;89    color: #2a5aa3;90    margin: 20px 0 26px 0;91  }92  .doc-sub {93    font-size: 30px;94    color: #555;95    line-height: 1.45;96    margin-bottom: 34px;97  }98  .doc-list {99    font-size: 32px;100    color: #222;101    line-height: 1.55;102    padding-left: 40px;103  }104  .doc-list li { margin-bottom: 28px; }105  .doc-list strong { font-weight: 700; }106  .footer-note {107    margin-top: 30px;108    font-size: 30px;109    color: #333;110    line-height: 1.5;111  }112 113  /* Word count */114  .word-count {115    position: absolute;116    right: 24px;117    bottom: 220px;118    font-size: 30px;119    color: #777;120  }121 122  /* Bottom toolbar */123  .bottom-bar {124    position: absolute;125    bottom: 0;126    left: 0;127    width: 1080px;128    height: 160px;129    background: #EFEFEF;130    border-top: 1px solid #D0D0D0;131    display: flex;132    align-items: center;133    justify-content: space-around;134    box-sizing: border-box;135    padding: 12px 24px;136  }137  .tool {138    display: flex;139    flex-direction: column;140    align-items: center;141    gap: 10px;142    color: #444;143    font-size: 28px;144  }145  .tool svg {146    width: 58px; height: 58px;147  }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status bar -->154  <div class="status-bar">155    <div class="status-left">9:36</div>156    <div class="status-right">157      <!-- circle-minus icon -->158      <svg class="icon-circle-minus" viewBox="0 0 24 24">159        <circle cx="12" cy="12" r="11" fill="none" stroke="#fff" stroke-width="2"></circle>160        <rect x="6" y="11" width="12" height="2" fill="#fff"></rect>161      </svg>162      <!-- wifi icon -->163      <svg class="icon-wifi" viewBox="0 0 24 24">164        <path d="M2 9c5-4 15-4 20 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>165        <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>166        <path d="M8 15c3-2 5-2 8 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>167        <circle cx="12" cy="18" r="1.8" fill="#fff"></circle>168      </svg>169      <div class="battery">170        <svg viewBox="0 0 50 24">171          <rect x="1" y="3" width="42" height="18" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"></rect>172          <rect x="45" y="8" width="4" height="8" fill="#fff"></rect>173          <rect x="4" y="6" width="32" height="12" fill="#fff" opacity="0.8"></rect>174        </svg>175        <span>85%</span>176      </div>177    </div>178  </div>179 180  <!-- App bar -->181  <div class="app-bar">182    <div class="app-left">183      <div class="title">Edit</div>184      <!-- Cloud outline icon -->185      <svg class="cloud-icon" viewBox="0 0 24 24">186        <path d="M7 18h9a4 4 0 0 0 0-8 5 5 0 0 0-9-2 4 4 0 0 0 0 8z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>187      </svg>188    </div>189    <div class="app-center">190      <!-- grid icon -->191      <svg class="grid-icon" viewBox="0 0 24 24">192        <rect x="3" y="3" width="6" height="6" fill="none" stroke="#fff" stroke-width="2"></rect>193        <rect x="3" y="13" width="6" height="6" fill="none" stroke="#fff" stroke-width="2"></rect>194        <rect x="13" y="3" width="8" height="16" rx="1" fill="none" stroke="#fff" stroke-width="2"></rect>195      </svg>196    </div>197    <div class="app-right">198      <div class="page-pill">1</div>199      <!-- close icon -->200      <svg class="close-icon" viewBox="0 0 24 24">201        <path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>202      </svg>203    </div>204  </div>205 206  <!-- Document area -->207  <div class="doc-area">208    <div class="doc-title">Brainstorm: Creative Stay-at-Home Activities</div>209    <div class="doc-sub">210      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:211    </div>212 213    <ol class="doc-list">214      <li>215        <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.216      </li>217      <li>218        <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.219      </li>220      <li>221        <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.222      </li>223      <li>224        <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.225      </li>226      <li>227        <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.228      </li>229      <li>230        <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.231      </li>232      <li>233        <strong>Organize Virtual Gatherings:</strong> Organize virtual gatherings such as happy hours, book clubs, or movie nights with friends and family.234      </li>235    </ol>236 237    <div class="footer-note">238      These stay-at-home activities can provide an enjoyable and creative way to pass the time, while also improving everyone's well-being.239    </div>240  </div>241 242  <div class="word-count">Word Count: 1440</div>243 244  <!-- Bottom toolbar -->245  <div class="bottom-bar">246    <div class="tool">247      <svg viewBox="0 0 24 24">248        <rect x="3" y="3" width="7" height="7" fill="none" stroke="#666" stroke-width="2"></rect>249        <rect x="14" y="3" width="7" height="7" fill="none" stroke="#666" stroke-width="2"></rect>250        <rect x="3" y="14" width="7" height="7" fill="none" stroke="#666" stroke-width="2"></rect>251        <rect x="14" y="14" width="7" height="7" fill="none" stroke="#666" stroke-width="2"></rect>252      </svg>253      <div>Tools</div>254    </div>255    <div class="tool">256      <svg viewBox="0 0 24 24">257        <rect x="4" y="4" width="16" height="12" rx="2" fill="none" stroke="#666" stroke-width="2"></rect>258        <path d="M8 20h8" stroke="#666" stroke-width="2" stroke-linecap="round"></path>259      </svg>260      <div>Mobile View</div>261    </div>262    <div class="tool">263      <svg viewBox="0 0 24 24">264        <path d="M4 12h12M12 5l7 7-7 7" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>265      </svg>266      <div>Share</div>267    </div>268    <div class="tool">269      <svg viewBox="0 0 24 24">270        <rect x="3" y="6" width="12" height="12" fill="none" stroke="#666" stroke-width="2"></rect>271        <path d="M18 6v12M6 3h8" fill="none" stroke="#666" stroke-width="2"></path>272      </svg>273      <div>Edit on PC</div>274    </div>275    <div class="tool">276      <svg viewBox="0 0 24 24">277        <circle cx="12" cy="12" r="9" fill="none" stroke="#666" stroke-width="2"></circle>278        <circle cx="12" cy="12" r="2" fill="#666"></circle>279        <path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke="#666" stroke-width="2" stroke-linecap="round"></path>280      </svg>281      <div>WPS AI</div>282    </div>283  </div>284 285</div>286</body>287</html>