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>Document Viewer Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #0f2b2f; /* deep teal like the app */15    font-family: Arial, Helvetica, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 90px;24    padding: 0 28px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #E6F0F0;29    font-size: 32px;30    letter-spacing: 0.5px;31    box-sizing: border-box;32  }33  .status-left, .status-right {34    display: flex; align-items: center; gap: 20px;35  }36  .status-right span { font-size: 28px; opacity: 0.9; }37 38  /* Top app bar */39  .app-bar {40    position: absolute;41    top: 90px; left: 0; right: 0;42    height: 130px;43    display: flex; align-items: center;44    padding: 0 22px;45    box-sizing: border-box;46    color: #ffffff;47  }48  .app-title {49    font-size: 44px;50    margin-left: 18px;51    white-space: nowrap;52    overflow: hidden;53    text-overflow: ellipsis;54    max-width: 650px;55    opacity: 0.96;56  }57  .app-actions {58    margin-left: auto;59    display: flex; align-items: center; gap: 26px;60  }61  .icon {62    width: 52px; height: 52px;63    display: inline-flex; align-items: center; justify-content: center;64    opacity: 0.95;65  }66  .icon svg { width: 100%; height: 100%; fill: none; stroke: #ffffff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }67 68  /* Scrollable document area */69  .content {70    position: absolute;71    top: 220px; /* 90 + 130 */72    bottom: 160px; /* room for gesture area */73    left: 0; right: 0;74    overflow-y: auto;75    padding-bottom: 60px;76  }77 78  .doc-img {79    width: 1020px;80    margin: 26px auto 30px auto;81    background: #E0E0E0;82    border: 1px solid #BDBDBD;83    color: #757575;84    height: 1520px;85    display: flex; align-items: center; justify-content: center;86    font-size: 40px;87    text-align: center;88  }89  .doc-img.small {90    height: 640px;91  }92 93  /* Floating action button (rounded square) */94  .fab {95    position: absolute;96    right: 48px;97    bottom: 300px; /* sits above gesture bar */98    width: 140px; height: 140px;99    background: #1e7c63;100    border-radius: 34px;101    box-shadow: 0 8px 18px rgba(0,0,0,0.35);102    display: flex; align-items: center; justify-content: center;103  }104  .fab svg { width: 70px; height: 70px; stroke: #e9fff8; stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }105 106  /* Bottom gesture/navigation overlay */107  .gesture {108    position: absolute;109    left: 0; right: 0; bottom: 0;110    height: 160px;111    background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.0));112  }113  .gesture .pill {114    position: absolute;115    left: 50%;116    transform: translateX(-50%);117    bottom: 42px;118    width: 320px; height: 14px;119    background: #E6E6E6;120    border-radius: 10px;121    opacity: 0.9;122  }123 124  /* Simple helper for small monochrome glyphs in status bar */125  .mini-icon svg { width: 36px; height: 36px; stroke: #E6F0F0; }126</style>127</head>128<body>129<div id="render-target">130  <!-- Status Bar -->131  <div class="status-bar">132    <div class="status-left">133      <div>4:14</div>134      <div class="mini-icon">135        <!-- check-circle -->136        <svg viewBox="0 0 24 24">137          <circle cx="12" cy="12" r="9" fill="none" stroke-width="2.2"></circle>138          <path d="M7 12l3 3 6-6" stroke-width="2.2"></path>139        </svg>140      </div>141      <div class="mini-icon">142        <!-- mail -->143        <svg viewBox="0 0 24 24">144          <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke-width="2.2"></rect>145          <path d="M3 8l9 6 9-6" stroke-width="2.2"></path>146        </svg>147      </div>148      <div class="mini-icon">149        <!-- alert -->150        <svg viewBox="0 0 24 24">151          <path d="M12 5v7" stroke-width="2.2"></path>152          <circle cx="12" cy="17" r="1.5" fill="#E6F0F0" stroke="none"></circle>153          <circle cx="12" cy="12" r="9" fill="none" stroke-width="2.2"></circle>154        </svg>155      </div>156    </div>157    <div class="status-right">158      <div class="mini-icon">159        <!-- wifi -->160        <svg viewBox="0 0 24 24">161          <path d="M3 9c4.5-4 13.5-4 18 0" stroke-width="2.2" fill="none"></path>162          <path d="M6 12c3-2.5 9-2.5 12 0" stroke-width="2.2" fill="none"></path>163          <path d="M9 15c1.5-1 4.5-1 6 0" stroke-width="2.2" fill="none"></path>164          <circle cx="12" cy="18" r="1.6" fill="#E6F0F0" stroke="none"></circle>165        </svg>166      </div>167      <div class="mini-icon">168        <!-- battery -->169        <svg viewBox="0 0 28 24">170          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke-width="2.2"></rect>171          <rect x="22" y="9" width="3" height="6" fill="#E6F0F0" stroke="none"></rect>172          <rect x="4" y="8" width="16" height="8" fill="#E6F0F0" stroke="none" opacity="0.9"></rect>173        </svg>174      </div>175      <span>100%</span>176    </div>177  </div>178 179  <!-- App Bar -->180  <div class="app-bar">181    <div class="icon">182      <!-- Back Arrow -->183      <svg viewBox="0 0 24 24">184        <path d="M15 5l-6 7 6 7"></path>185      </svg>186    </div>187    <div class="app-title">A_short_history_of...</div>188    <div class="app-actions">189      <div class="icon" title="Comments">190        <!-- chat bubble -->191        <svg viewBox="0 0 24 24">192          <path d="M4 5h16v10H7l-3 4V5z"></path>193        </svg>194      </div>195      <div class="icon" title="Search">196        <!-- search -->197        <svg viewBox="0 0 24 24">198          <circle cx="11" cy="11" r="7"></circle>199          <path d="M20 20l-4-4"></path>200        </svg>201      </div>202      <div class="icon" title="More">203        <!-- more vert -->204        <svg viewBox="0 0 24 24">205          <circle cx="12" cy="5" r="2" fill="#ffffff" stroke="none"></circle>206          <circle cx="12" cy="12" r="2" fill="#ffffff" stroke="none"></circle>207          <circle cx="12" cy="19" r="2" fill="#ffffff" stroke="none"></circle>208        </svg>209      </div>210    </div>211  </div>212 213  <!-- Scrollable Content -->214  <div class="content">215    <div class="doc-img">[IMG: Book cover texture]</div>216    <div class="doc-img small">[IMG: Library of Congress pattern page]</div>217  </div>218 219  <!-- Floating action button -->220  <div class="fab" title="Annotate">221    <svg viewBox="0 0 24 24">222      <path d="M3 21l4.5-1 11-11-3.5-3.5-11 11L3 21z"></path>223      <path d="M14 5l3.5 3.5"></path>224    </svg>225  </div>226 227  <!-- Bottom gesture overlay -->228  <div class="gesture">229    <div class="pill"></div>230  </div>231</div>232</body>233</html>