GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #0f0f10;14    border-radius: 0;15    box-shadow: none;16    font-family: Arial, Helvetica, sans-serif;17    color: #fff;18  }19 20  /* Top app bar */21  .top-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 150px;27    background: #111213;28    display: flex;29    align-items: center;30    padding: 0 36px;31    box-sizing: border-box;32    gap: 28px;33  }34  .divider {35    width: 1px;36    height: 48px;37    background: #3a3a3a;38    margin: 0 6px;39  }40  .icon {41    width: 56px;42    height: 56px;43    display: inline-flex;44    align-items: center;45    justify-content: center;46  }47  .icon svg { width: 44px; height: 44px; fill: none; stroke: #E6E6E6; stroke-width: 3.5; }48  .icon.fill svg { fill: #E6E6E6; stroke: none; }49 50  /* Document area */51  .doc-wrap {52    position: absolute;53    top: 150px;54    left: 0;55    width: 100%;56    height: 1700px;57    padding: 0 38px;58    box-sizing: border-box;59  }60  .doc-page {61    width: 100%;62    height: 100%;63    background: #ffffff;64    color: #222;65    box-sizing: border-box;66    padding: 90px 70px 160px;67  }68  .page-sep {69    height: 2px;70    background: #d7d7d7;71    margin: 40px -70px 40px;72  }73  .chapter-title {74    font-family: Georgia, "Times New Roman", serif;75    font-size: 72px;76    font-weight: 700;77    margin: 0 0 30px 0;78    display: inline-block;79    border-bottom: 8px solid #e7c84d;80  }81  .log-entry {82    font-family: Georgia, "Times New Roman", serif;83    font-size: 38px;84    font-weight: 700;85    letter-spacing: 1px;86    margin: 28px 0 26px;87  }88  .doc-text {89    font-family: Georgia, "Times New Roman", serif;90    font-size: 34px;91    line-height: 1.55;92    text-align: left;93  }94  .doc-text p { margin: 16px 0; text-indent: 36px; }95 96  /* Page indicator bubble */97  .page-pill {98    position: absolute;99    top: 360px;100    right: 16px;101    background: #2d2f32;102    color: #fff;103    width: 84px;104    height: 84px;105    border-radius: 42px;106    display: flex;107    align-items: center;108    justify-content: center;109    font-weight: 700;110    font-size: 32px;111    box-shadow: 0 2px 6px rgba(0,0,0,0.25);112  }113 114  /* Bottom sheet */115  .sheet {116    position: absolute;117    bottom: 0;118    left: 0;119    width: 1080px;120    height: 900px;121    background: #171819;122    border-top-left-radius: 28px;123    border-top-right-radius: 28px;124    box-shadow: 0 -12px 32px rgba(0,0,0,0.5);125    padding: 36px 40px 40px;126    box-sizing: border-box;127  }128  .sheet .handle {129    position: absolute;130    top: 16px;131    left: 50%;132    transform: translateX(-50%);133    width: 160px;134    height: 10px;135    border-radius: 6px;136    background: #3a3c3f;137  }138  .sheet h2 {139    margin: 28px 0 10px 0;140    font-size: 54px;141    font-weight: 700;142    color: #f5f5f5;143  }144  .sheet .subtitle {145    color: #bfc3c7;146    font-size: 30px;147    line-height: 1.45;148    margin-bottom: 34px;149  }150 151  /* Share targets row */152  .targets {153    display: flex;154    gap: 36px;155    margin-top: 10px;156    margin-bottom: 26px;157  }158  .target-item {159    width: 180px;160    display: flex;161    flex-direction: column;162    align-items: center;163    color: #dfe3e6;164    font-size: 26px;165  }166  .target-icon {167    width: 132px;168    height: 132px;169    border-radius: 28px;170    background: #27292b;171    border: 1px solid #3a3d40;172    display: flex;173    align-items: center;174    justify-content: center;175    margin-bottom: 16px;176  }177  .target-icon svg { width: 70px; height: 70px; stroke: #eaeef2; stroke-width: 3; fill: none; }178  .circle-fill { background: #2b2e31; }179 180  /* Toggle row */181  .toggle-row {182    display: flex;183    align-items: center;184    justify-content: space-between;185    margin: 26px 0 26px;186    padding: 12px 0;187    border-top: 1px solid #2a2c2f;188    border-bottom: 1px solid #2a2c2f;189  }190  .toggle-row .label { font-size: 30px; color: #e6eaee; }191  .switch {192    width: 126px; height: 64px; background: #2d2f33; border-radius: 32px; position: relative; box-shadow: inset 0 0 0 1px #3b3e42;193  }194  .switch.on { background: #1e6eea; box-shadow: none; }195  .knob {196    position: absolute; top: 6px; left: 58px; width: 52px; height: 52px; background: #fff; border-radius: 26px;197  }198  .switch.on .knob { left: 68px; background: #ffffff; }199 200  /* Bottom actions */201  .actions {202    display: flex;203    gap: 24px;204    margin-top: 26px;205  }206  .btn {207    flex: 1;208    height: 120px;209    background: #232527;210    border: 1px solid #3a3c3f;211    border-radius: 20px;212    color: #e9edf0;213    display: flex;214    align-items: center;215    justify-content: center;216    gap: 18px;217    font-size: 32px;218    font-weight: 600;219  }220  .btn svg { width: 40px; height: 40px; stroke: #e9edf0; stroke-width: 3; fill: none; }221 222  /* Bottom gesture pill */223  .nav-pill {224    position: absolute;225    bottom: 16px;226    left: 50%;227    transform: translateX(-50%);228    width: 360px;229    height: 12px;230    background: #e6e6e6;231    border-radius: 6px;232    opacity: 0.8;233  }234</style>235</head>236<body>237<div id="render-target">238 239  <!-- Top black app bar with icons -->240  <div class="top-bar">241    <div class="icon">242      <svg viewBox="0 0 48 48">243        <path d="M28 8 L12 24 L28 40" />244      </svg>245    </div>246    <div class="divider"></div>247    <div class="icon">248      <svg viewBox="0 0 48 48">249        <path d="M34 16 q-12 0 -18 10" />250        <path d="M18 20 L10 16 L14 24" />251      </svg>252    </div>253    <div class="icon fill">254      <svg viewBox="0 0 48 48">255        <path d="M24 6 C16 18 16 28 24 38 C32 28 32 18 24 6 Z" />256      </svg>257    </div>258    <div class="icon">259      <svg viewBox="0 0 48 48">260        <rect x="8" y="10" width="30" height="24" rx="6" />261        <path d="M14 34 L10 38" />262      </svg>263    </div>264    <div class="icon">265      <svg viewBox="0 0 48 48">266        <circle cx="22" cy="22" r="12" />267        <path d="M32 32 L40 40" />268      </svg>269    </div>270    <div class="icon">271      <svg viewBox="0 0 48 48">272        <circle cx="12" cy="12" r="4" />273        <circle cx="36" cy="10" r="4" />274        <circle cx="24" cy="36" r="4" />275        <path d="M14 12 L32 10" />276        <path d="M24 32 L24 16" />277      </svg>278    </div>279    <div class="icon fill">280      <svg viewBox="0 0 48 48">281        <circle cx="24" cy="10" r="3.5" />282        <circle cx="24" cy="24" r="3.5" />283        <circle cx="24" cy="38" r="3.5" />284      </svg>285    </div>286  </div>287 288  <!-- Document viewer area -->289  <div class="doc-wrap">290    <div class="doc-page">291      <div class="page-sep"></div>292      <div class="chapter-title">Chapter 2</div>293 294      <div class="log-entry">LOG ENTRY: SOL 7</div>295 296      <div class="doc-text">297        <p>Ok, I’ve had a good night’s sleep, and things don’t seem as hopeless as they did yesterday.</p>298        <p>Today I took stock of supplies, and did a quick EVA to check up on the external equipment. Here’s my situation:</p>299        <p>The surface mission was supposed to be 31 days. For redundancy, the supply probes had enough food to last the whole crew 56 days. That way if one or two probes had problems, we'd still have enough food to complete the mission.</p>300        <p>We were six days in when all hell broke loose, so that leaves enough ...</p>301      </div>302    </div>303  </div>304 305  <!-- Page indicator -->306  <div class="page-pill">8</div>307 308  <!-- Bottom sheet: Share document link -->309  <div class="sheet">310    <div class="handle"></div>311    <h2>Share document link</h2>312    <div class="subtitle">File will be uploaded to Adobe cloud storage. Anyone with the link can access the file.</div>313 314    <div class="targets">315      <div class="target-item">316        <div class="target-icon">317          <svg viewBox="0 0 48 48">318            <path d="M18 30 c-6 -2 -8 -10 -4 -14 c5 -5 12 -5 16 0" />319            <path d="M30 18 c6 2 8 10 4 14 c-5 5 -12 5 -16 0" />320          </svg>321        </div>322        <div>Get link</div>323      </div>324 325      <div class="target-item">326        <div class="target-icon circle-fill">327          <svg viewBox="0 0 48 48">328            <path d="M8 12 h32 v24 h-32 z" />329            <path d="M8 12 l16 14 l16 -14" />330          </svg>331        </div>332        <div>Gmail</div>333      </div>334 335      <div class="target-item">336        <div class="target-icon circle-fill">337          <svg viewBox="0 0 48 48">338            <rect x="8" y="12" width="32" height="24" rx="4" />339            <path d="M12 18 h24" />340            <path d="M12 26 h24" />341          </svg>342        </div>343        <div>Outlook</div>344      </div>345 346      <div class="target-item">347        <div class="target-icon circle-fill">348          <svg viewBox="0 0 48 48">349            <path d="M12 24 q12 -12 24 0" />350            <path d="M12 24 q12 12 24 0" />351          </svg>352        </div>353        <div>Nearby Share</div>354      </div>355 356      <div class="target-item">357        <div class="target-icon circle-fill">358          <svg viewBox="0 0 48 48">359            <path d="M16 10 h16 v28 h-16 z" />360            <path d="M24 34 l6 6" />361          </svg>362        </div>363        <div>Contacts+</div>364      </div>365    </div>366 367    <div class="toggle-row">368      <div class="label">Allow comments</div>369      <div class="switch on">370        <div class="knob"></div>371      </div>372    </div>373 374    <div class="actions">375      <div class="btn">376        <svg viewBox="0 0 48 48">377          <path d="M24 10 v28" />378          <path d="M10 24 h28" />379        </svg>380        <span>Invite people</span>381      </div>382      <div class="btn">383        <svg viewBox="0 0 48 48">384          <rect x="10" y="12" width="24" height="26" rx="3" />385          <path d="M18 6 h20 v28" />386        </svg>387        <span>Send a copy</span>388      </div>389    </div>390  </div>391 392  <!-- System gesture pill -->393  <div class="nav-pill"></div>394</div>395</body>396</html>