GD-ML/AndroidCode

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 Viewer Mock</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;color:#333;}9  #render-target{10    position:relative; overflow:hidden;11    width:1080px; height:2400px;12    background:#FFFFFF;13  }14 15  /* Status bar */16  .status-bar{17    position:absolute; top:0; left:0; right:0;18    height:120px; padding:0 36px;19    display:flex; align-items:center; justify-content:space-between;20    color:#222; font-size:48px; letter-spacing:0.5px;21  }22  .status-icons{display:flex; align-items:center; gap:28px; color:#555; font-size:36px;}23  .icon-sb{width:54px; height:54px;}24 25  /* App toolbar */26  .toolbar{27    position:absolute; top:120px; left:0; right:0;28    height:130px; display:flex; align-items:center;29    padding:0 28px; gap:22px; color:#444;30    border-bottom:1px solid #eee;31  }32  .tool-btn{33    width:92px; height:92px; border:1px solid #BDBDBD; border-radius:10px;34    display:flex; align-items:center; justify-content:center; background:#fff;35  }36  .tool-plain{border:none; width:92px; height:92px; display:flex; align-items:center; justify-content:center;}37  .page-ind{font-size:40px; color:#444; font-weight:600;}38 39  .top-strip{40    position:absolute; top:250px; left:0; right:0; height:210px;41    background:#F2F2F2;42    border-bottom:1px solid #e6e6e6;43  }44 45  /* Document area */46  .page{47    position:absolute; top:480px; left:90px; width:900px;48    color:#424242; line-height:1.55;49  }50  .dash{51    border:2px dashed #D6DADF; border-radius:8px;52    padding:18px 22px; margin:18px 0;53    background:#fff;54  }55  .heading h1{56    margin:0; font-size:44px; color:#1E88E5; font-weight:700;57  }58  .para{font-size:30px; color:#555;}59  .ideas{padding-left:34px; margin:10px 0;}60  .ideas li{61    list-style:decimal; margin:18px 0;62    font-size:30px; color:#444;63  }64  .ideas li .t{font-weight:700;}65  /* Toast hint */66  .toast{67    position:absolute; left:50%; transform:translateX(-50%);68    bottom:325px;69    background:#FFF; padding:26px 34px 26px 26px;70    border-radius:44px; box-shadow:0 10px 30px rgba(0,0,0,0.15);71    display:flex; align-items:center; gap:18px; color:#6A6A6A; font-size:34px;72  }73  .toast .logo{74    width:70px; height:70px; border-radius:50%;75    background:linear-gradient(135deg,#FF5AA5,#FF2B6E);76    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:34px;77  }78 79  /* Bottom bar */80  .bottom-bar{81    position:absolute; bottom:0; left:0; right:0;82    height:160px; border-top:1px solid #E6E6E6;83    background:#fff; display:flex; align-items:center; justify-content:space-around;84    font-size:34px; color:#7A7A7A;85  }86  .tab{position:relative; padding:10px 8px;}87  .tab.active{color:#1976D2; font-weight:700;}88  .tab.active::after{89    content:""; position:absolute; left:50%; transform:translateX(-50%);90    bottom:-10px; width:90px; height:8px; background:#1976D2; border-radius:4px;91  }92 93  /* Gesture bar */94  .gesture{95    position:absolute; bottom:176px; left:50%; transform:translateX(-50%);96    width:360px; height:16px; background:#9E9E9E; border-radius:10px; opacity:0.6;97  }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status bar -->104  <div class="status-bar">105    <div class="time">2:20</div>106    <div class="status-icons">107      <!-- Do not disturb icon -->108      <svg class="icon-sb" viewBox="0 0 24 24">109        <circle cx="12" cy="12" r="9" stroke="#666" stroke-width="2" fill="none"></circle>110        <rect x="6.5" y="11" width="11" height="2" fill="#666"></rect>111      </svg>112      <!-- Wi-Fi icon -->113      <svg class="icon-sb" viewBox="0 0 24 24">114        <path d="M2 8c5-5 15-5 20 0" stroke="#666" stroke-width="2" fill="none"/>115        <path d="M5 11c3-3 11-3 14 0" stroke="#666" stroke-width="2" fill="none"/>116        <path d="M8 14c2-2 6-2 8 0" stroke="#666" stroke-width="2" fill="none"/>117        <circle cx="12" cy="18" r="1.8" fill="#666"/>118      </svg>119      <!-- Battery with percentage -->120      <div style="display:flex;align-items:center;gap:10px;">121        <svg class="icon-sb" viewBox="0 0 24 24">122          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"></rect>123          <rect x="20" y="10" width="2" height="4" fill="#666"></rect>124          <rect x="4" y="8" width="14" height="8" fill="#8BC34A"></rect>125        </svg>126        <span style="font-size:36px;color:#444;">100%</span>127      </div>128    </div>129  </div>130 131  <!-- Toolbar -->132  <div class="toolbar">133    <div class="tool-plain" aria-label="Back">134      <svg width="54" height="54" viewBox="0 0 24 24">135        <path d="M15 4 L7 12 L15 20" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>136      </svg>137    </div>138 139    <div class="tool-btn"><span class="page-ind">1</span></div>140 141    <div class="tool-btn" aria-label="Fit"><svg width="54" height="54" viewBox="0 0 24 24">142      <path d="M4 9V4h5M15 4h5v5M4 15v5h5M15 20h5v-5" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path>143    </svg></div>144 145    <div class="tool-btn" aria-label="Save">146      <svg width="54" height="54" viewBox="0 0 24 24">147        <rect x="4" y="4" width="16" height="16" rx="2" ry="2" stroke="#555" stroke-width="2" fill="none"></rect>148        <rect x="7" y="5.5" width="10" height="5" fill="#555"></rect>149        <rect x="7" y="13" width="10" height="6" stroke="#555" stroke-width="2" fill="none"></rect>150      </svg>151    </div>152 153    <div class="tool-plain" aria-label="Share">154      <svg width="54" height="54" viewBox="0 0 24 24">155        <circle cx="6" cy="12" r="2" fill="#555"></circle>156        <circle cx="18" cy="6" r="2" fill="#555"></circle>157        <circle cx="18" cy="18" r="2" fill="#555"></circle>158        <path d="M8 12 L16 7 M8 12 L16 17" stroke="#555" stroke-width="2" fill="none"></path>159      </svg>160    </div>161 162    <div class="tool-plain" aria-label="More">163      <svg width="54" height="54" viewBox="0 0 24 24">164        <circle cx="12" cy="5" r="2" fill="#555"></circle>165        <circle cx="12" cy="12" r="2" fill="#555"></circle>166        <circle cx="12" cy="19" r="2" fill="#555"></circle>167      </svg>168    </div>169  </div>170 171  <div class="top-strip"></div>172 173  <!-- Document content -->174  <div class="page">175    <div class="dash heading">176      <h1>Brainstorm: Creative Stay-at-Home Activities</h1>177    </div>178 179    <div class="dash para">180      With many people spending more time at home due to the COVID-19 pandemic, there has been181      a need for creative stay-at-home activities to keep boredom at bay. Here are some ideas:182    </div>183 184    <ol class="ideas">185      <li class="dash"><span class="t">Cooking/Baking Challenges:</span> Encourage your family and friends to participate in cooking186        and baking challenges where they have to create a dish with certain ingredients or follow187        a difficult recipe.</li>188 189      <li class="dash"><span class="t">Virtual Game Nights:</span> Host a virtual game night with friends and family by playing virtual190        games such as Pictionary, Cards Against Humanity, or Trivia.</li>191 192      <li class="dash"><span class="t">Virtual Museum Tours:</span> Tour some of the world's most famous museums virtually using193        technology, including the Smithsonian's National Museum of Natural History and the194        British Museum.</li>195 196      <li class="dash"><span class="t">DIY Home Projects:</span> Try out some new DIY home projects, such as painting a room,197        creating a feature wall or landscaping your garden.</li>198 199      <li class="dash"><span class="t">Online Exercise Classes:</span> Participate in online exercise classes such as yoga or HIIT,200        which are great for maintaining physical and mental well-being.</li>201 202      <li class="dash"><span class="t">Learn a New Skill:</span> Learn a new language, take an online course in a subject you’re203        interested in, or try out a new hobby such as painting or knitting.</li>204 205      <li class="dash"><span class="t">Organize Virtual Gatherings:</span> Organize virtual gatherings such as happy hours, book clubs206        or movie nights with friends and family.</li>207    </ol>208 209    <div class="dash para">210      These stay-at-home activities can provide an enjoyable and creative way to pass the time, while211      also improving everyone's well-being.212    </div>213  </div>214 215  <!-- Toast hint -->216  <div class="toast">217    <div class="logo">W</div>218    <span>Tap the text area you want to edit.</span>219  </div>220 221  <!-- Gesture bar -->222  <div class="gesture"></div>223 224  <!-- Bottom action bar -->225  <div class="bottom-bar">226    <div class="tab active">Edit</div>227    <div class="tab">Annotate</div>228    <div class="tab">Fill &amp; Sign</div>229    <div class="tab">Convert</div>230    <div class="tab">All</div>231  </div>232 233</div>234</body>235</html>