GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Reading Now & Share Sheet</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  * { box-sizing: border-box; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0b1114;14    border-radius: 0;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 100px;24    background: #000000;25    color: #ffffff;26    display: flex;27    align-items: center;28    padding: 0 28px;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .sb-icon {39    width: 40px; height: 40px;40  }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 100px;46    left: 0;47    width: 1080px;48    height: 170px;49    background: #203c46;50    color: #dbe6ea;51    display: flex;52    align-items: center;53    padding: 0 30px;54  }55  .app-title {56    font-size: 64px;57    font-weight: 600;58    margin-left: 24px;59  }60  .app-actions {61    margin-left: auto;62    display: flex;63    align-items: center;64    gap: 34px;65  }66  .icon-btn { width: 56px; height: 56px; }67 68  /* Content background */69  .content {70    position: absolute;71    top: 270px;72    left: 0;73    width: 1080px;74    height: 1130px;75    background: #0c1216;76    padding: 26px;77  }78 79  /* Card */80  .book-card {81    width: 1040px;82    height: 520px;83    background: #142027;84    border-radius: 18px;85    margin: 10px auto;86    display: flex;87    align-items: center;88    padding: 24px;89    color: #c9d2d7;90  }91  .cover {92    width: 260px;93    height: 380px;94    background: #E0E0E0;95    border: 1px solid #BDBDBD;96    border-radius: 6px;97    color: #757575;98    display: flex;99    align-items: center;100    justify-content: center;101    text-align: center;102    font-size: 28px;103    padding: 10px;104    margin-left: 6px;105  }106  .info {107    margin-left: 36px;108    flex: 1;109  }110  .title {111    font-size: 62px;112    color: #e6eef2;113    margin-bottom: 10px;114    font-weight: 600;115  }116  .author {117    font-size: 38px;118    color: #9fb1bb;119    margin-bottom: 6px;120  }121  .meta {122    font-size: 32px;123    color: #8ea0a9;124    margin-bottom: 26px;125  }126  .progress {127    position: relative;128    height: 24px;129    margin: 18px 0 30px;130  }131  .progress .bar {132    position: absolute;133    left: 0; right: 0; top: 10px;134    height: 4px;135    background: #233640;136    border-radius: 2px;137  }138  .progress .dot {139    position: absolute;140    width: 14px; height: 14px;141    background: #8fa4ad;142    border-radius: 50%;143    top: 6px;144  }145  .progress .left { left: 0; }146  .progress .right { right: 0; }147 148  .actions {149    display: flex;150    align-items: center;151    gap: 46px;152  }153  .small-icon {154    width: 56px; height: 56px;155  }156 157  /* Share sheet */158  .share-sheet {159    position: absolute;160    bottom: 0;161    left: 0;162    width: 1080px;163    height: 1200px;164    background: #171b1f;165    border-top-left-radius: 30px;166    border-top-right-radius: 30px;167    box-shadow: 0 -8px 20px rgba(0,0,0,0.5);168    color: #e5e9ec;169    padding: 24px 36px 40px;170  }171  .drag-handle {172    width: 120px; height: 12px;173    background: #2b2f33;174    border-radius: 6px;175    margin: 8px auto 24px;176  }177 178  .file-row {179    display: flex;180    align-items: center;181    gap: 26px;182    padding-top: 12px;183  }184  .file-icon {185    width: 86px; height: 86px;186    background: #2a2f34;187    border-radius: 10px;188    display: flex; align-items: center; justify-content: center;189  }190  .file-name {191    font-size: 42px;192    color: #cfd6da;193  }194 195  .nearby-wrap {196    display: flex;197    justify-content: center;198    margin: 30px 0 40px;199  }200  .nearby-btn {201    padding: 22px 36px;202    border: 2px solid #597e91;203    border-radius: 18px;204    color: #cfe4ef;205    font-size: 40px;206    display: inline-flex;207    align-items: center;208    gap: 18px;209    background: transparent;210  }211  .nearby-icon { width: 46px; height: 46px; }212 213  .tip-text {214    text-align: center;215    color: #9aa4aa;216    font-size: 36px;217    margin-bottom: 50px;218  }219 220  .share-grid {221    display: flex;222    justify-content: space-between;223    padding: 0 18px;224  }225  .app {226    width: 210px;227    text-align: center;228  }229  .app .circle {230    width: 170px; height: 170px;231    border-radius: 85px;232    margin: 0 auto 16px;233    display: flex; align-items: center; justify-content: center;234  }235  .label {236    font-size: 36px;237    color: #d7dde1;238  }239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Status Bar -->245  <div class="status-bar">246    7:41247    <div class="status-right">248      <!-- simple notification dot -->249      <svg class="sb-icon" viewBox="0 0 24 24">250        <circle cx="12" cy="12" r="4" fill="#ffffff"/>251      </svg>252      <!-- Wi-Fi icon -->253      <svg class="sb-icon" viewBox="0 0 24 24">254        <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0M12 20l-2-2h4l-2 2z" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>255      </svg>256      <!-- Battery icon -->257      <svg class="sb-icon" viewBox="0 0 24 24">258        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#ffffff" stroke-width="2" fill="none"/>259        <rect x="21" y="10" width="2" height="4" fill="#ffffff"/>260        <rect x="4" y="8" width="12" height="8" fill="#ffffff"/>261      </svg>262    </div>263  </div>264 265  <!-- App Bar -->266  <div class="app-bar">267    <!-- Hamburger -->268    <svg class="icon-btn" viewBox="0 0 24 24">269      <path d="M3 6h18M3 12h18M3 18h18" stroke="#eaf2f5" stroke-width="2" stroke-linecap="round"/>270    </svg>271    <div class="app-title">Reading Now</div>272    <div class="app-actions">273      <!-- Search -->274      <svg class="icon-btn" viewBox="0 0 24 24">275        <circle cx="10" cy="10" r="6" stroke="#eaf2f5" stroke-width="2" fill="none"/>276        <path d="M15 15l5 5" stroke="#eaf2f5" stroke-width="2" stroke-linecap="round"/>277      </svg>278      <!-- More -->279      <svg class="icon-btn" viewBox="0 0 24 24">280        <circle cx="12" cy="5" r="2" fill="#eaf2f5"/>281        <circle cx="12" cy="12" r="2" fill="#eaf2f5"/>282        <circle cx="12" cy="19" r="2" fill="#eaf2f5"/>283      </svg>284    </div>285  </div>286 287  <!-- Content -->288  <div class="content">289    <div class="book-card">290      <div class="cover">[IMG: Book Cover - Alice in Wonderland]</div>291      <div class="info">292        <div class="title">Just mercy</div>293        <div class="author">Lewis Carroll</div>294        <div class="meta">EPUB, 26 kB</div>295 296        <div class="progress">297          <span class="dot left"></span>298          <div class="bar"></div>299          <span class="dot right"></span>300        </div>301 302        <div class="actions">303          <!-- Star -->304          <svg class="small-icon" viewBox="0 0 24 24">305            <path d="M12 3l3 6 6 1-4 4 1 7-6-3-6 3 1-7-4-4 6-1 3-6z" stroke="#a9bdc6" stroke-width="2" fill="none"/>306          </svg>307          <!-- Clock -->308          <svg class="small-icon" viewBox="0 0 24 24">309            <circle cx="12" cy="12" r="9" stroke="#a9bdc6" stroke-width="2" fill="none"/>310            <path d="M12 12V6M12 12l5 3" stroke="#a9bdc6" stroke-width="2" stroke-linecap="round"/>311          </svg>312          <!-- Check -->313          <svg class="small-icon" viewBox="0 0 24 24">314            <path d="M4 12l5 5 11-11" stroke="#a9bdc6" stroke-width="2" fill="none" stroke-linecap="round"/>315          </svg>316          <!-- Books -->317          <svg class="small-icon" viewBox="0 0 24 24">318            <rect x="3" y="4" width="6" height="16" stroke="#a9bdc6" stroke-width="2" fill="none"/>319            <rect x="11" y="4" width="6" height="16" stroke="#a9bdc6" stroke-width="2" fill="none"/>320            <rect x="19" y="4" width="2" height="16" fill="#a9bdc6"/>321          </svg>322          <!-- More Vertical -->323          <svg class="small-icon" viewBox="0 0 24 24">324            <circle cx="12" cy="6" r="2" fill="#a9bdc6"/>325            <circle cx="12" cy="12" r="2" fill="#a9bdc6"/>326            <circle cx="12" cy="18" r="2" fill="#a9bdc6"/>327          </svg>328        </div>329      </div>330    </div>331  </div>332 333  <!-- Share Sheet Overlay -->334  <div class="share-sheet">335    <div class="drag-handle"></div>336 337    <div class="file-row">338      <div class="file-icon">339        <!-- simple file glyph -->340        <svg viewBox="0 0 24 24" width="56" height="56">341          <path d="M6 3h8l5 5v13H6z" stroke="#cfd6da" stroke-width="2" fill="none"/>342          <path d="M14 3v6h6" stroke="#cfd6da" stroke-width="2" fill="none"/>343        </svg>344      </div>345      <div class="file-name">Alice_en.epub</div>346    </div>347 348    <div class="nearby-wrap">349      <div class="nearby-btn">350        <svg class="nearby-icon" viewBox="0 0 24 24">351          <path d="M3 12c4-4 14-4 18 0M6 12c3-3 9-3 12 0M9 12c2-2 4-2 6 0" stroke="#cfe4ef" stroke-width="2" fill="none" stroke-linecap="round"/>352        </svg>353        Nearby354      </div>355    </div>356 357    <div class="tip-text">No recommended people to share with</div>358 359    <div class="share-grid">360      <!-- Gmail -->361      <div class="app">362        <div class="circle" style="background:#ffffff;">363          <svg viewBox="0 0 24 24" width="120" height="120">364            <path d="M3 6l9 7 9-7v12H3z" fill="#EA4335"/>365            <path d="M3 6h18L12 13 3 6z" fill="#FBBC04"/>366          </svg>367        </div>368        <div class="label">Gmail</div>369      </div>370      <!-- OneDrive -->371      <div class="app">372        <div class="circle" style="background:#d6e8ff;">373          <svg viewBox="0 0 24 24" width="120" height="120">374            <path d="M6 15c2-5 10-7 12-2 2 0 3 2 3 4H5c0-1 0-2 1-2z" fill="#1A73E8"/>375            <path d="M5 17h16c-1 2-3 3-6 3H8c-2 0-3-1-3-3z" fill="#4285F4"/>376          </svg>377        </div>378        <div class="label">OneDrive</div>379      </div>380      <!-- Drive -->381      <div class="app">382        <div class="circle" style="background:#ffffff;">383          <svg viewBox="0 0 24 24" width="120" height="120">384            <path d="M8 4l4 7-4 7H2l4-7-4-7h6z" fill="#34A853"/>385            <path d="M16 4l6 10-6 6-6-10 6-6z" fill="#FBBC04"/>386            <path d="M8 18h8l-4-7H4z" fill="#4285F4"/>387          </svg>388        </div>389        <div class="label">Drive</div>390      </div>391      <!-- TeraBox -->392      <div class="app">393        <div class="circle" style="background:#9bc7ff;">394          <svg viewBox="0 0 24 24" width="120" height="120">395            <rect x="5" y="5" width="14" height="14" rx="3" fill="#1E88E5"/>396            <path d="M8 13c2-3 6-3 8 0-1 2-3 3-4 3s-3-1-4-3z" fill="#ffffff"/>397          </svg>398        </div>399        <div class="label">TeraBox</div>400      </div>401    </div>402  </div>403 404</div>405</body>406</html>