GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>About Document UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f2b33; /* app dark teal background */14    font-family: Arial, Helvetica, sans-serif;15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #000000;26    color: #ffffff;27    display: flex;28    align-items: center;29    padding: 0 32px;30    box-sizing: border-box;31    font-size: 42px;32  }33  .status-left { display: flex; align-items: center; gap: 20px; }34  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }35  .icon {36    width: 44px; height: 44px;37  }38 39  /* Top app bar */40  .top-bar {41    position: absolute;42    top: 120px;43    left: 0;44    width: 1080px;45    height: 160px;46    background: #2e5f6a;47    display: flex;48    align-items: center;49    box-sizing: border-box;50    padding: 0 32px;51  }52  .back {53    width: 72px; height: 72px; margin-right: 16px;54  }55  .title {56    font-size: 56px;57    font-weight: 600;58    letter-spacing: 0.5px;59    margin-right: auto;60  }61  .read-badge {62    display: flex; align-items: center; gap: 20px;63    color: #f8d24e;64    font-weight: 700;65    font-size: 44px;66  }67  .divider {68    width: 2px; height: 48px; background: rgba(255,255,255,0.3);69  }70 71  /* Content */72  .content {73    position: absolute;74    top: 280px;75    left: 0;76    right: 0;77    bottom: 120px;78    padding: 40px 40px 160px;79    box-sizing: border-box;80    color: #e8f1f3;81  }82 83  .doc-preview {84    width: 900px;85    height: 1050px;86    margin: 20px auto 40px;87    background: #E0E0E0;88    border: 1px solid #BDBDBD;89    display: flex;90    justify-content: center;91    align-items: center;92    color: #757575;93    font-size: 40px;94  }95 96  .filename {97    font-size: 72px;98    font-weight: 300;99    line-height: 88px;100    color: #ffffff;101    margin: 20px 20px 30px;102    word-break: break-word;103  }104 105  .action-row {106    display: flex;107    gap: 70px;108    padding: 18px 20px 36px;109    color: #c9d7db;110  }111  .action {112    width: 72px; height: 72px;113    display: inline-flex; align-items: center; justify-content: center;114  }115 116  .meta {117    color: #b6c5ca;118    font-size: 40px;119    padding: 8px 20px;120  }121  .meta strong { color: #e8f1f3; }122  .files-row {123    display: flex; align-items: center; gap: 14px;124    padding: 10px 20px 24px;125    font-size: 42px;126    color: #d2dee2;127  }128  .caret {129    width: 38px; height: 38px;130  }131 132  .section-title {133    font-size: 46px;134    color: #ffffff;135    padding: 18px 20px 8px;136  }137  .section-text {138    font-size: 40px;139    color: #b6c5ca;140    padding: 6px 20px 16px;141    word-break: break-all;142  }143 144  .files-list {145    display: flex; align-items: flex-start; justify-content: space-between;146    padding: 16px 20px;147  }148  .file-info {149    color: #e8f1f3;150    font-size: 44px;151  }152  .path {153    color: #b6c5ca;154    font-size: 38px;155    margin-top: 8px;156  }157  .more-vertical { width: 52px; height: 52px; }158 159  /* Bottom navigation pill */160  .nav-bar {161    position: absolute;162    bottom: 0; left: 0;163    width: 1080px; height: 120px;164    background: #0a0a0a;165    display: flex; align-items: center; justify-content: center;166  }167  .home-pill {168    width: 240px; height: 12px; background: #ffffff; border-radius: 8px;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status Bar -->176  <div class="status-bar">177    <div class="status-left">178      <div>10:34</div>179      <!-- simple sun icon -->180      <svg class="icon" viewBox="0 0 24 24">181        <circle cx="12" cy="12" r="5" fill="#fff"/>182      </svg>183      <!-- location icon (dot) -->184      <svg class="icon" viewBox="0 0 24 24">185        <circle cx="12" cy="12" r="3" fill="#fff"/>186      </svg>187      <!-- Google 'G' simplified -->188      <div style="font-weight:700; font-size:40px;">G</div>189      <div style="font-size:60px; margin-top:-10px;">•</div>190    </div>191    <div class="status-right">192      <!-- WiFi -->193      <svg class="icon" viewBox="0 0 24 24">194        <path d="M2 9c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M11 18l2 2-2-2z" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>195      </svg>196      <!-- Battery -->197      <svg class="icon" viewBox="0 0 24 24">198        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>199        <rect x="20" y="10" width="2" height="4" fill="#fff"/>200        <rect x="4" y="8" width="12" height="8" fill="#fff"/>201      </svg>202    </div>203  </div>204 205  <!-- Top App Bar -->206  <div class="top-bar">207    <!-- Back Arrow -->208    <svg class="back" viewBox="0 0 24 24">209      <path d="M15 18L9 12l6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210    </svg>211    <div class="title">About Document</div>212    <div class="read-badge">213      <div>READ</div>214      <div class="divider"></div>215      <!-- speaker icon -->216      <svg class="icon" viewBox="0 0 24 24">217        <path d="M4 9h4l5-4v14l-5-4H4zM18 9c1.7 1.5 1.7 4.5 0 6" stroke="#f8d24e" stroke-width="2" fill="none" stroke-linecap="round"/>218      </svg>219    </div>220  </div>221 222  <!-- Content -->223  <div class="content">224    <div class="doc-preview">[IMG: Document cover page]</div>225 226    <div class="filename">20121106214533yermapdf_pdf</div>227 228    <div class="action-row">229      <!-- star -->230      <svg class="action" viewBox="0 0 24 24">231        <path d="M12 3l3 6 6 .9-4.5 4.4L18 21l-6-3.2L6 21l1.5-6.7L3 9.9 9 9l3-6z" fill="#c9d7db"/>232      </svg>233      <!-- clock -->234      <svg class="action" viewBox="0 0 24 24">235        <circle cx="12" cy="12" r="9" stroke="#c9d7db" stroke-width="2" fill="none"/>236        <path d="M12 6v6l4 2" stroke="#c9d7db" stroke-width="2" fill="none" stroke-linecap="round"/>237      </svg>238      <!-- check -->239      <svg class="action" viewBox="0 0 24 24">240        <path d="M5 12l4 4 10-10" stroke="#c9d7db" stroke-width="2" fill="none" stroke-linecap="round"/>241      </svg>242      <!-- bookshelf -->243      <svg class="action" viewBox="0 0 24 24">244        <rect x="3" y="5" width="4" height="14" fill="#c9d7db"/>245        <rect x="9" y="7" width="4" height="12" fill="#c9d7db"/>246        <rect x="15" y="9" width="6" height="10" fill="#c9d7db"/>247      </svg>248      <!-- share -->249      <svg class="action" viewBox="0 0 24 24">250        <circle cx="18" cy="5" r="3" fill="#c9d7db"/>251        <circle cx="6" cy="12" r="3" fill="#c9d7db"/>252        <circle cx="18" cy="19" r="3" fill="#c9d7db"/>253        <path d="M8.8 12l6.4-5M8.8 12l6.4 7" stroke="#c9d7db" stroke-width="2" fill="none"/>254      </svg>255      <!-- trash -->256      <svg class="action" viewBox="0 0 24 24">257        <path d="M5 7h14M9 7V5h6v2M7 7l1 12h8l1-12" stroke="#c9d7db" stroke-width="2" fill="none" stroke-linecap="round"/>258      </svg>259      <!-- edit pencil -->260      <svg class="action" viewBox="0 0 24 24">261        <path d="M4 17l8-8 5 5-8 8H4v-5zM14 6l3-3 3 3-3 3-3-3z" fill="#c9d7db"/>262      </svg>263    </div>264 265    <div class="meta"><strong>0%, November 27, 2023 10:29 AM</strong></div>266    <div class="meta">Current bookmark and last read time</div>267 268    <div class="files-row">269      <div>PDF, 235 kB, Files: 1</div>270      <svg class="caret" viewBox="0 0 24 24">271        <path d="M6 15l6-6 6 6" stroke="#d2dee2" stroke-width="2" fill="none" stroke-linecap="round"/>272      </svg>273    </div>274 275    <div class="section-title">The document's file identifier</div>276    <div class="section-text">SHA-1: 989e586b0ac26dd8a7bf02667c4857de94d06271</div>277 278    <div class="files-list">279      <div>280        <div class="file-info">File #1</div>281        <div class="path">/storage/emulated/0/Download/20121106214533yermapdf_pdf.pdf</div>282      </div>283      <!-- more vertical icon -->284      <svg class="more-vertical" viewBox="0 0 24 24">285        <circle cx="12" cy="5" r="2" fill="#c9d7db"/>286        <circle cx="12" cy="12" r="2" fill="#c9d7db"/>287        <circle cx="12" cy="19" r="2" fill="#c9d7db"/>288      </svg>289    </div>290  </div>291 292  <!-- Bottom navigation pill -->293  <div class="nav-bar">294    <div class="home-pill"></div>295  </div>296 297</div>298</body>299</html>