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>Local Files - Mock UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #424242;20    color: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    height: 100px;26    padding: 0 32px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #EDEDED;31    font-weight: 500;32    font-size: 44px;33    letter-spacing: 1px;34    opacity: 0.95;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .status-dot {42    width: 26px;43    height: 26px;44    background: #EDEDED;45    border-radius: 50%;46    opacity: 0.9;47  }48  .battery {49    width: 46px;50    height: 26px;51    border: 3px solid #EDEDED;52    border-radius: 4px;53    position: relative;54  }55  .battery::after {56    content: '';57    position: absolute;58    right: -6px;59    top: 7px;60    width: 6px;61    height: 12px;62    background: #EDEDED;63    border-radius: 1px;64  }65  .battery .level {66    position: absolute;67    top: 3px;68    left: 3px;69    right: 8px;70    bottom: 3px;71    background: #EDEDED;72  }73 74  /* App bar */75  .app-bar {76    height: 140px;77    padding: 0 24px 0 24px;78    display: flex;79    align-items: center;80    background: #3B3B3B;81    box-shadow: 0 1px 0 rgba(0,0,0,0.25);82  }83  .app-title {84    display: flex;85    align-items: center;86    gap: 12px;87    font-size: 54px;88    font-weight: 500;89    color: #FFFFFF;90    margin-left: 16px;91  }92  .app-actions {93    margin-left: auto;94    display: flex;95    align-items: center;96    gap: 28px;97  }98  .icon-btn {99    width: 72px;100    height: 72px;101    display: flex;102    align-items: center;103    justify-content: center;104    border-radius: 36px;105    color: #FFFFFF;106  }107  .icon-btn svg { fill: #FFFFFF; }108 109  /* Breadcrumbs */110  .breadcrumbs {111    height: 86px;112    background: #484848;113    display: flex;114    align-items: center;115    padding: 0 24px;116    gap: 16px;117    color: #CFCFCF;118    font-size: 34px;119    white-space: nowrap;120    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 0 rgba(0,0,0,0.25);121  }122  .crumb {123    padding: 10px 18px;124    border-radius: 18px;125    background: rgba(255,255,255,0.06);126    color: #D6D6D6;127  }128  .sep {129    color: #B0B0B0;130    opacity: 0.8;131  }132 133  /* List area */134  .content {135    padding: 28px 0 160px 0;136  }137  .list-item {138    display: flex;139    align-items: flex-start;140    padding: 28px 24px;141    gap: 24px;142  }143  .list-item + .list-item {144    border-top: 1px solid rgba(255,255,255,0.06);145  }146  .circle-epub {147    width: 120px;148    height: 120px;149    border-radius: 60px;150    background: #1E88E5;151    display: flex;152    align-items: center;153    justify-content: center;154    color: #FFFFFF;155    font-weight: 700;156    font-size: 32px;157    letter-spacing: 1px;158  }159  .item-text {160    flex: 1;161    min-width: 0;162  }163  .title {164    font-size: 48px;165    line-height: 56px;166    color: #FFFFFF;167  }168  .subtitle {169    margin-top: 8px;170    font-size: 30px;171    color: #BDBDBD;172  }173  .kebab {174    width: 72px;175    height: 72px;176    display: flex;177    align-items: center;178    justify-content: center;179    opacity: 0.9;180  }181 182  /* Image placeholder (for book cover) */183  .img-ph {184    width: 170px;185    height: 80px;186    background: #E0E0E0;187    border: 1px solid #BDBDBD;188    color: #757575;189    font-size: 20px;190    display: flex;191    align-items: center;192    justify-content: center;193  }194 195  /* Floating action button */196  .fab {197    position: absolute;198    right: 48px;199    bottom: 220px;200    width: 150px;201    height: 150px;202    background: #6E6E6E;203    border-radius: 50%;204    box-shadow: 0 8px 18px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35) inset;205    display: flex;206    align-items: center;207    justify-content: center;208  }209  .fab svg { fill: #FFFFFF; }210 211  /* Gesture bar */212  .gesture-bar {213    position: absolute;214    bottom: 70px;215    left: 50%;216    transform: translateX(-50%);217    width: 360px;218    height: 12px;219    background: #EDEDED;220    border-radius: 12px;221    opacity: 0.95;222  }223</style>224</head>225<body>226<div id="render-target">227  <!-- Status bar -->228  <div class="status-bar">229    <div class="time">11:14</div>230    <div class="status-icons">231      <div class="status-dot"></div>232      <div class="status-dot"></div>233      <svg width="42" height="42" viewBox="0 0 24 24">234        <path fill="#EDEDED" d="M12 3a9 9 0 1 0 .001 18.001A9 9 0 0 0 12 3zm0 2a7 7 0 0 1 0 14V5z"/>235      </svg>236      <svg width="44" height="44" viewBox="0 0 24 24">237        <path fill="#EDEDED" d="M12 2l4 7h-8l4-7zm0 20l-4-7h8l-4 7z"/>238      </svg>239      <svg width="36" height="36" viewBox="0 0 24 24">240        <path fill="#EDEDED" d="M12 2a8 8 0 0 0 0 16v4l6-6h-4a8 8 0 0 0-2-14z"/>241      </svg>242      <div class="battery"><div class="level"></div></div>243    </div>244  </div>245 246  <!-- App bar -->247  <div class="app-bar">248    <div class="icon-btn" aria-label="menu">249      <svg width="56" height="56" viewBox="0 0 24 24">250        <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"></path>251      </svg>252    </div>253    <div class="app-title">254      <span>Local Files</span>255      <svg width="40" height="40" viewBox="0 0 24 24" style="margin-top:4px;">256        <path d="M7 10l5 5 5-5H7z" fill="#FFFFFF"></path>257      </svg>258    </div>259    <div class="app-actions">260      <div class="icon-btn" aria-label="search">261        <svg width="56" height="56" viewBox="0 0 24 24">262          <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"></path>263        </svg>264      </div>265      <div class="icon-btn" aria-label="more">266        <svg width="56" height="56" viewBox="0 0 24 24">267          <path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"></path>268        </svg>269      </div>270    </div>271  </div>272 273  <!-- Breadcrumbs -->274  <div class="breadcrumbs">275    <span class="crumb">/</span>276    <span class="sep">›</span>277    <span class="crumb">sdcard</span>278    <span class="sep">›</span>279    <span class="crumb">Books</span>280    <span class="sep">›</span>281    <span class="crumb">MoonReader</span>282  </div>283 284  <!-- Content list -->285  <div class="content">286    <!-- Item 1 -->287    <div class="list-item">288      <div class="circle-epub">EPUB</div>289      <div class="item-text">290        <div class="title">Alice_en</div>291        <div class="subtitle">Jul 5, 2023 15:57 · 26.49 kB · <strong style="color:#D0D0D0;">EPUB</strong> · 13%</div>292      </div>293      <div class="kebab">294        <svg width="44" height="44" viewBox="0 0 24 24">295          <path fill="#FFFFFF" d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/>296        </svg>297      </div>298    </div>299 300    <!-- Item 2 -->301    <div class="list-item">302      <div class="img-ph">[IMG: Book Cover]</div>303      <div class="item-text">304        <div class="title">Romeo and Juliet - Shakespeare<br>William</div>305        <div class="subtitle">Jul 6, 2023 09:50 · 147 kB · <strong style="color:#D0D0D0;">EPUB</strong> · 5%</div>306      </div>307      <div class="kebab">308        <svg width="44" height="44" viewBox="0 0 24 24">309          <path fill="#FFFFFF" d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/>310        </svg>311      </div>312    </div>313  </div>314 315  <!-- Floating action button -->316  <div class="fab" aria-label="open">317    <svg width="88" height="88" viewBox="0 0 24 24">318      <path d="M4 4h8a4 4 0 0 1 4 4v10H8a4 4 0 0 0-4-4V4zm16 0H12v12a4 4 0 0 1 4 4h4V4z"/>319    </svg>320  </div>321 322  <!-- Gesture bar -->323  <div class="gesture-bar"></div>324</div>325</body>326</html>