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>Mobile Viewer Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: Arial, Helvetica, sans-serif;16    color: #ffffff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 90px;26    background: #000;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 36px;31    box-sizing: border-box;32    font-size: 34px;33    letter-spacing: 0.5px;34  }35  .status-right {36    display: flex;37    align-items: center;38    gap: 26px;39    font-size: 28px;40  }41  .status-icon svg { display: block; }42 43  /* App bar */44  .app-bar {45    position: absolute;46    top: 90px;47    left: 0;48    width: 1080px;49    height: 120px;50    background: #000;51    display: flex;52    align-items: center;53    justify-content: space-between;54    padding: 0 24px 0 12px;55    box-sizing: border-box;56  }57  .app-left, .app-right { display: flex; align-items: center; }58  .app-left { gap: 12px; }59  .app-right { gap: 34px; }60  .icon-btn { width: 72px; height: 72px; display: grid; place-items: center; }61 62  /* Content viewer area */63  .viewer {64    position: absolute;65    top: 210px; /* status(90) + appbar(120) */66    left: 0;67    width: 1080px;68    height: 1860px; /* remaining space before bottom bars */69    overflow: hidden;70    background: #111;71  }72  .img-ph {73    width: 100%;74    background: #E0E0E0;75    border-top: 1px solid #BDBDBD;76    border-bottom: 1px solid #BDBDBD;77    color: #757575;78    display: flex;79    align-items: center;80    justify-content: center;81    text-align: center;82  }83  .img-top { height: 1500px; font-size: 36px; }84  .divider { height: 10px; background: #ffffff; }85  .img-strip { height: 350px; font-size: 30px; }86 87  /* Bottom action bar */88  .bottom-bar {89    position: absolute;90    left: 0;91    bottom: 90px; /* space for gesture area */92    width: 1080px;93    height: 240px;94    background: #0a0a0a;95    border-top: 1px solid #1f1f1f;96    display: grid;97    grid-template-columns: repeat(5, 1fr);98    align-items: center;99    box-sizing: border-box;100  }101  .action {102    display: flex;103    flex-direction: column;104    align-items: center;105    gap: 16px;106    color: #d9d9d9;107    font-size: 28px;108  }109  .action svg { display: block; }110  .action .ico {111    width: 64px; height: 64px;112  }113 114  /* Gesture pill area */115  .gesture-area {116    position: absolute;117    left: 0;118    bottom: 0;119    width: 1080px;120    height: 90px;121    background: #000;122    display: flex;123    align-items: center;124    justify-content: center;125  }126  .pill {127    width: 220px;128    height: 10px;129    background: #ffffff;130    border-radius: 8px;131    opacity: 0.95;132  }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Status Bar -->139  <div class="status-bar">140    <div class="time">1:33</div>141    <div class="status-right">142      <!-- Wi‑Fi -->143      <span class="status-icon">144        <svg width="38" height="38" viewBox="0 0 24 24">145          <path fill="#fff" d="M12 18a3 3 0 0 0-2.1.9L12 21l2.1-2.1A3 3 0 0 0 12 18zm0-4a7 7 0 0 0-5 2.1l1.4 1.4A5 5 0 0 1 12 16a5 5 0 0 1 3.6 1.5l1.4-1.4A7 7 0 0 0 12 14zm0-4a11 11 0 0 0-7.8 3.2l1.4 1.4A9 9 0 0 1 12 12a9 9 0 0 1 6.4 2.6l1.4-1.4A11 11 0 0 0 12 10z"/>146        </svg>147      </span>148      <!-- Signal (simple bars) -->149      <span class="status-icon">150        <svg width="38" height="38" viewBox="0 0 24 24">151          <rect x="3" y="14" width="3" height="7" fill="#fff"/>152          <rect x="8" y="11" width="3" height="10" fill="#fff" opacity="0.8"/>153          <rect x="13" y="8" width="3" height="13" fill="#fff" opacity="0.6"/>154          <rect x="18" y="5" width="3" height="16" fill="#fff" opacity="0.45"/>155        </svg>156      </span>157      <!-- Battery 100% -->158      <span class="status-icon" style="display:flex; align-items:center; gap:8px;">159        <svg width="48" height="24" viewBox="0 0 28 14">160          <rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>161          <rect x="3" y="4" width="18" height="6" fill="#fff"/>162          <rect x="23" y="5" width="3" height="4" rx="1" fill="#fff"/>163        </svg>164        <span style="font-size:26px;">100%</span>165      </span>166    </div>167  </div>168 169  <!-- App Bar -->170  <div class="app-bar">171    <div class="app-left">172      <div class="icon-btn">173        <!-- Back Arrow -->174        <svg width="56" height="56" viewBox="0 0 24 24">175          <path fill="#fff" d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5z"/>176        </svg>177      </div>178    </div>179    <div class="app-right">180      <!-- Grid -->181      <div class="icon-btn">182        <svg width="56" height="56" viewBox="0 0 24 24">183          <path fill="#fff" d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z"/>184        </svg>185      </div>186      <!-- Search -->187      <div class="icon-btn">188        <svg width="56" height="56" viewBox="0 0 24 24">189          <path fill="#fff" d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8l5 5 1.5-1.5-5-5zM11 6.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9z"/>190        </svg>191      </div>192      <!-- More (kebab) -->193      <div class="icon-btn">194        <svg width="56" height="56" viewBox="0 0 24 24">195          <circle cx="12" cy="5" r="2" fill="#fff"/>196          <circle cx="12" cy="12" r="2" fill="#fff"/>197          <circle cx="12" cy="19" r="2" fill="#fff"/>198        </svg>199      </div>200    </div>201  </div>202 203  <!-- Viewer Content -->204  <div class="viewer">205    <div class="img-ph img-top">[IMG: Olive green book cover texture]</div>206    <div class="divider"></div>207    <div class="img-ph img-strip">[IMG: Beige patterned strip with "Library of Congress" seals repeating]</div>208  </div>209 210  <!-- Bottom Action Bar -->211  <div class="bottom-bar">212    <div class="action">213      <svg class="ico" viewBox="0 0 24 24">214        <circle cx="18" cy="5" r="2.5" fill="#fff"/>215        <circle cx="6" cy="12" r="2.5" fill="#fff"/>216        <circle cx="18" cy="19" r="2.5" fill="#fff"/>217        <path d="M7.8 11.1l7.9-4.3M7.8 12.9l7.9 4.3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>218      </svg>219      <div>Share</div>220    </div>221    <div class="action">222      <svg class="ico" viewBox="0 0 24 24">223        <path d="M3 21l6-1 11-11-5-5L4 15 3 21z" fill="none" stroke="#fff" stroke-width="2"/>224        <path d="M14 4l6 6" stroke="#fff" stroke-width="2" />225      </svg>226      <div>Annotate</div>227    </div>228    <div class="action">229      <svg class="ico" viewBox="0 0 24 24">230        <path d="M4 7h16" stroke="#fff" stroke-width="2" />231        <path d="M7 7V5h10v2" stroke="#fff" stroke-width="2"/>232        <rect x="6" y="7" width="12" height="13" fill="none" stroke="#fff" stroke-width="2"/>233      </svg>234      <div>Delete</div>235    </div>236    <div class="action">237      <svg class="ico" viewBox="0 0 24 24">238        <path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#fff" stroke-width="2"/>239      </svg>240      <div>Bookmark</div>241    </div>242    <div class="action">243      <svg class="ico" viewBox="0 0 24 24">244        <path d="M12 3v12" stroke="#fff" stroke-width="2"/>245        <path d="M7 11l5 5 5-5" fill="none" stroke="#fff" stroke-width="2"/>246        <path d="M5 21h14" stroke="#fff" stroke-width="2"/>247      </svg>248      <div>Download</div>249    </div>250  </div>251 252  <!-- Gesture pill -->253  <div class="gesture-area">254    <div class="pill"></div>255  </div>256 257</div>258</body>259</html>