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</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#424449; color:#fff;12  }13 14  /* Status bar */15  .status-bar{16    height:120px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;17    color:#EDEFF2; background:rgba(0,0,0,0.08);18  }19  .status-left{display:flex; align-items:center; gap:18px; font-size:40px;}20  .status-right{display:flex; align-items:center; gap:26px;}21  .status-icon{width:44px; height:44px; display:flex; align-items:center; justify-content:center; opacity:.9;}22 23  /* App bar */24  .app-bar{25    height:160px; display:flex; align-items:center; padding:0 28px;26    background:#3A3C40; border-bottom:1px solid rgba(255,255,255,0.08);27  }28  .app-left{display:flex; align-items:center; gap:18px;}29  .app-title{30    font-size:56px; font-weight:500; color:#F4F6F8; display:flex; align-items:center; gap:10px;31  }32  .app-actions{margin-left:auto; display:flex; align-items:center; gap:28px;}33  .appbar-icon, .hamburger{34    width:72px; height:72px; display:flex; align-items:center; justify-content:center;35  }36 37  /* Breadcrumbs */38  .breadcrumb{39    height:90px; display:flex; align-items:center; padding:0 28px; gap:10px;40    background:#3B3D41; border-bottom:1px solid rgba(255,255,255,0.06); color:#BFC5CB;41  }42  .crumb{43    display:flex; align-items:center; padding:10px 16px; background:#44464B;44    border-radius:6px; font-size:30px; color:#C9CDD2;45  }46  .chev{margin:0 8px; opacity:.7;}47 48  /* List/content */49  .content{ position:absolute; top:370px; bottom:160px; left:0; right:0; padding:10px 16px; }50  .list{ height:100%; overflow:auto; padding-right:8px; }51  .row{52    position:relative; display:flex; align-items:center; gap:26px;53    padding:28px 24px; margin:18px 8px; border-radius:10px;54  }55  .epub-icon{56    width:118px; height:118px; border-radius:50%; background:#1BA1FF;57    display:flex; align-items:center; justify-content:center; color:#EAF6FF;58    font-weight:700; font-size:34px; letter-spacing:1px;59    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.08);60  }61  .thumb{62    width:160px; height:90px; background:#E0E0E0; border:1px solid #BDBDBD;63    display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px; margin-left:6px;64  }65  .info{display:flex; flex-direction:column;}66  .title-text{font-size:48px; line-height:1.2; margin-bottom:6px;}67  .meta{font-size:28px; color:#AEB4BA;}68  .kebab{ position:absolute; right:20px; top:50%; transform:translateY(-50%); opacity:.9; }69 70  /* Context menu */71  .menu{72    position:absolute; right:34px; top:740px; width:560px;73    background:#4A4D52; border-radius:12px; border:1px solid rgba(0,0,0,0.35);74    box-shadow:0 10px 28px rgba(0,0,0,0.55); overflow:hidden;75  }76  .menu .item{ padding:28px 34px; font-size:44px; color:#FFFFFF; }77  .menu .sub{ color:#B8BBC0; font-size:30px; padding-top:0; margin-top:-14px; }78  .menu .divider{ height:1px; background:rgba(255,255,255,0.16); }79 80  /* FAB and gesture */81  .fab{82    position:absolute; right:56px; bottom:180px; width:150px; height:150px; border-radius:50%;83    background:#6F757B; display:flex; align-items:center; justify-content:center;84    box-shadow:0 12px 26px rgba(0,0,0,0.55);85  }86  .gesture{87    position:absolute; left:50%; transform:translateX(-50%);88    bottom:34px; width:360px; height:12px; background:#FFFFFF; border-radius:10px; opacity:.95;89  }90 91  svg{ fill:#FFFFFF; }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status Bar -->98  <div class="status-bar">99    <div class="status-left">100      <div>11:10</div>101      <div class="status-icon">102        <svg viewBox="0 0 24 24" width="36" height="36"><circle cx="12" cy="12" r="8" fill="#D9D9D9"/></svg>103      </div>104    </div>105    <div class="status-right">106      <div class="status-icon" title="Wi‑Fi">107        <svg viewBox="0 0 24 24" width="34" height="34">108          <path d="M12 18l2 2-2 2-2-2 2-2z"></path>109          <path d="M2 9a16 16 0 0 1 20 0l-1.6 1.2A13 13 0 0 0 3.6 10.2z" opacity=".8"></path>110          <path d="M5 12a12 12 0 0 1 14 0l-1.7 1.1A9 9 0 0 0 6.7 13.1z" opacity=".7"></path>111          <path d="M8 15a8 8 0 0 1 8 0l-2 1a5 5 0 0 0-4 0z" opacity=".6"></path>112        </svg>113      </div>114      <div class="status-icon" title="Battery">115        <svg viewBox="0 0 24 24" width="40" height="40">116          <rect x="2" y="7" width="18" height="10" rx="2"></rect>117          <rect x="20" y="10" width="2" height="4"></rect>118          <rect x="4" y="9" width="12" height="6" fill="#C6E48B"></rect>119        </svg>120      </div>121    </div>122  </div>123 124  <!-- App Bar -->125  <div class="app-bar">126    <div class="app-left">127      <div class="hamburger">128        <svg viewBox="0 0 24 24" width="56" height="56">129          <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"></path>130        </svg>131      </div>132      <div class="app-title">133        <span>Local Files</span>134        <svg viewBox="0 0 24 24" width="40" height="40">135          <path d="M7 10l5 5 5-5z"></path>136        </svg>137      </div>138    </div>139    <div class="app-actions">140      <div class="appbar-icon">141        <svg viewBox="0 0 24 24" width="56" height="56">142          <path d="M15.5 14h-.8l-.3-.3A6 6 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6.5zm-5.5 1a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"></path>143        </svg>144      </div>145      <div class="appbar-icon">146        <svg viewBox="0 0 24 24" width="56" height="56">147          <circle cx="12" cy="5" r="2"></circle>148          <circle cx="12" cy="12" r="2"></circle>149          <circle cx="12" cy="19" r="2"></circle>150        </svg>151      </div>152    </div>153  </div>154 155  <!-- Breadcrumbs -->156  <div class="breadcrumb">157    <div class="crumb">/</div>158    <div class="chev">159      <svg viewBox="0 0 12 20" width="28" height="28"><path d="M2 2l8 8-8 8" stroke="#C9CDD2" stroke-width="3" fill="none"/></svg>160    </div>161    <div class="crumb">sdcard</div>162    <div class="chev">163      <svg viewBox="0 0 12 20" width="28" height="28"><path d="M2 2l8 8-8 8" stroke="#C9CDD2" stroke-width="3" fill="none"/></svg>164    </div>165    <div class="crumb">Books</div>166    <div class="chev">167      <svg viewBox="0 0 12 20" width="28" height="28"><path d="M2 2l8 8-8 8" stroke="#C9CDD2" stroke-width="3" fill="none"/></svg>168    </div>169    <div class="crumb">MoonReader</div>170  </div>171 172  <!-- Content List -->173  <div class="content">174    <div class="list">175 176      <!-- Row 1 -->177      <div class="row" style="margin-top:10px;">178        <div class="epub-icon">EPUB</div>179        <div class="info">180          <div class="title-text">Alice_en</div>181          <div class="meta">Jul 5, 2023 15:57 - 26.49 kB - EPUB - 13%</div>182        </div>183        <div class="kebab">184          <svg viewBox="0 0 24 24" width="52" height="52">185            <circle cx="12" cy="5" r="2"></circle>186            <circle cx="12" cy="12" r="2"></circle>187            <circle cx="12" cy="19" r="2"></circle>188          </svg>189        </div>190      </div>191 192      <!-- Row 2 -->193      <div class="row">194        <div class="thumb">[IMG: Book cover]</div>195        <div class="info">196          <div class="title-text">Romeo and Juliet - Shakespeare William</div>197          <div class="meta">Jul 6, 2023 09:50 - 147 kB - EPUB</div>198        </div>199        <div class="kebab">200          <svg viewBox="0 0 24 24" width="52" height="52">201            <circle cx="12" cy="5" r="2"></circle>202            <circle cx="12" cy="12" r="2"></circle>203            <circle cx="12" cy="19" r="2"></circle>204          </svg>205        </div>206      </div>207 208    </div>209  </div>210 211  <!-- Context Menu (for second item) -->212  <div class="menu">213    <div class="item">Book Information</div>214    <div class="item sub">(Save to My Shelf)</div>215    <div class="divider"></div>216    <div class="item">Delete file</div>217    <div class="divider"></div>218    <div class="item">Copy file</div>219    <div class="divider"></div>220    <div class="item">Move file</div>221    <div class="divider"></div>222    <div class="item">Rename file</div>223    <div class="divider"></div>224    <div class="item">Send file</div>225    <div class="divider"></div>226    <div class="item">Open file with...</div>227  </div>228 229  <!-- Floating Action Button -->230  <div class="fab" title="Open">231    <svg viewBox="0 0 24 24" width="72" height="72">232      <path d="M4 6h8v12H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm16 0h-6v12h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2z"></path>233    </svg>234  </div>235 236  <!-- Gesture Bar -->237  <div class="gesture"></div>238</div>239</body>240</html>