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>PDF Viewer UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    height: 110px; background: #000000; color: #ffffff;17    display: flex; align-items: center; padding: 0 36px; font-size: 38px;18  }19  .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }20  .status-dot { width: 12px; height: 12px; background: #cfcfcf; border-radius: 50%; display: inline-block; }21  .battery {22    width: 54px; height: 28px; border: 4px solid #fff; border-radius: 6px; position: relative;23  }24  .battery::after {25    content: ""; position: absolute; right: -10px; top: 6px; width: 8px; height: 16px; background: #fff; border-radius: 2px;26  }27  .battery .level { position: absolute; left: 4px; top: 4px; height: 16px; width: 28px; background: #8BC34A; }28 29  /* App bar */30  .app-bar {31    background: #2f6d79; color: #ffffff; height: 220px; padding: 24px 30px 20px 30px;32    box-sizing: border-box;33  }34  .app-top-row {35    display: flex; align-items: center; gap: 26px;36  }37  .app-title {38    font-size: 46px; font-weight: 600; margin-left: 12px; flex: 1;39  }40  .app-icons { display: flex; align-items: center; gap: 40px; }41  .sub-title {42    margin-top: 18px; font-size: 34px; color: rgba(255,255,255,0.85);43  }44  .icon-btn svg { width: 50px; height: 50px; stroke: #ffffff; fill: none; stroke-width: 4; }45 46  /* Controls row under app bar */47  .controls {48    height: 140px; display: flex; align-items: center; padding: 0 40px; gap: 40px; color: #666;49  }50  .circle-a {51    width: 72px; height: 72px; border-radius: 50%; border: 2px solid #9e9e9e;52    display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 40px; color: #666;53  }54  .slider {55    flex: 1; height: 6px; background: #e0e0e0; position: relative; border-radius: 3px;56  }57  .slider .thumb {58    position: absolute; left: 48%; top: -16px; width: 34px; height: 34px; background: #cfcfcf; border-radius: 50%;59    border: 2px solid #bdbdbd;60  }61  .caret svg { width: 42px; height: 42px; stroke: #666; fill: none; stroke-width: 4; }62 63  /* Document page area */64  .page {65    position: relative; background: #ffffff; height: 1600px; padding-top: 40px;66  }67  .page .top-rule {68    height: 4px; background: #000000; width: 100%; margin-top: 480px;69  }70  .page .copyright {71    width: 880px; margin: 120px auto 0 auto; text-align: center; color: #333; font-size: 30px; line-height: 1.5;72  }73  .page .copyright a { color: #1a73e8; text-decoration: underline; }74 75  /* Floating lock button */76  .floating-lock {77    position: absolute; right: 60px; bottom: 520px; width: 160px; height: 160px;78    border: 2px solid #c7c7c7; border-radius: 16px; background: #ffffff;79    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;80    box-shadow: 0 2px 6px rgba(0,0,0,0.08);81  }82  .expand-icon svg { width: 64px; height: 64px; stroke: #666; fill: none; stroke-width: 4; }83  .floating-lock .label { color: #666; font-size: 34px; }84 85  /* Bottom bar */86  .bottom-bar {87    position: absolute; left: 0; right: 0; bottom: 120px;88    height: 220px; background: #2f6d79; color: #ffffff; padding: 24px 40px; box-sizing: border-box;89  }90  .bottom-bar .page-count { font-size: 44px; }91  .bottom-controls { position: absolute; left: 40px; right: 40px; bottom: 24px; height: 70px; display: flex; align-items: center; }92  .timeline {93    flex: 1; height: 8px; background: rgba(255,255,255,0.22); border-radius: 4px; position: relative; margin-right: 24px;94  }95  .timeline .dot {96    position: absolute; left: 12px; top: -16px; width: 36px; height: 36px; background: #4fc3f7; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6);97  }98  .bottom-icons { display: flex; align-items: center; gap: 32px; opacity: 0.7; }99  .bottom-icons svg { width: 56px; height: 56px; stroke: #ffffff; fill: none; stroke-width: 4; }100 101  /* OS bottom area */102  .os-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000000; }103  .home-indicator {104    position: absolute; left: 50%; transform: translateX(-50%);105    bottom: 34px; width: 260px; height: 12px; background: #cfcfcf; border-radius: 6px; opacity: 0.7;106  }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status bar -->113  <div class="status-bar">114    <div>10:40</div>115    <div class="status-icons">116      <span class="status-dot"></span>117      <span class="status-dot"></span>118      <svg width="40" height="40" viewBox="0 0 24 24">119        <circle cx="12" cy="12" r="5" stroke="#fff" fill="none" stroke-width="2"></circle>120      </svg>121      <svg width="40" height="40" viewBox="0 0 24 24">122        <path d="M3 12h6l5 4V8l-5 4H3z" stroke="#fff" fill="none" stroke-width="2"></path>123      </svg>124      <div class="battery"><div class="level"></div></div>125    </div>126  </div>127 128  <!-- App bar -->129  <div class="app-bar">130    <div class="app-top-row">131      <div class="icon-btn">132        <svg viewBox="0 0 24 24">133          <path d="M15 5L7 12l8 7" stroke-linecap="round" stroke-linejoin="round"></path>134        </svg>135      </div>136      <div class="app-title">20121106214533yermapdf_pdf</div>137      <div class="app-icons">138        <div class="icon-btn" title="Volume">139          <svg viewBox="0 0 24 24">140            <path d="M4 10v4h4l5 4V6l-5 4H4z"></path>141          </svg>142        </div>143        <div class="icon-btn" title="Search">144          <svg viewBox="0 0 24 24">145            <circle cx="11" cy="11" r="6"></circle>146            <path d="M20 20l-4.5-4.5"></path>147          </svg>148        </div>149        <div class="icon-btn" title="List">150          <svg viewBox="0 0 24 24">151            <path d="M4 6h16M4 12h16M4 18h16"></path>152          </svg>153        </div>154        <div class="icon-btn" title="Settings">155          <svg viewBox="0 0 24 24">156            <circle cx="12" cy="12" r="3"></circle>157            <path d="M4 12h2M18 12h2M12 4v2M12 18v2M6 6l1.4 1.4M17 17l1.4 1.4M6 18l1.4-1.4M17 7l1.4-1.4"></path>158          </svg>159        </div>160        <div class="icon-btn" title="More">161          <svg viewBox="0 0 24 24">162            <circle cx="12" cy="5" r="2" fill="#ffffff" stroke="none"></circle>163            <circle cx="12" cy="12" r="2" fill="#ffffff" stroke="none"></circle>164            <circle cx="12" cy="19" r="2" fill="#ffffff" stroke="none"></circle>165          </svg>166        </div>167      </div>168    </div>169    <div class="sub-title">Section: Cast List</div>170  </div>171 172  <!-- Controls below app bar -->173  <div class="controls">174    <div class="circle-a">A</div>175    <div class="slider"><div class="thumb"></div></div>176    <div class="caret">177      <svg viewBox="0 0 24 24">178        <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>179      </svg>180    </div>181  </div>182 183  <!-- Document page -->184  <div class="page">185    <div class="top-rule"></div>186    <div class="copyright">187      <div>A. S. Kline © 2007 All Rights Reserved</div>188      <div>This work may be freely reproduced, stored, and transmitted, electronically<br>189      or otherwise, for any non-commercial purpose. Permission to perform this<br>190      version of the play, on stage or film, by amateur or professional companies,<br>191      and for commercial purposes, should be requested from the translator,</div>192      <div><a href="#">mailto:tonykline@yahoo.com</a>.</div>193    </div>194 195    <!-- Floating lock/expand -->196    <div class="floating-lock">197      <div class="expand-icon">198        <svg viewBox="0 0 24 24">199          <path d="M4 12h6M14 12h6M8 8l-4 4 4 4M16 8l4 4-4 4" stroke-linecap="round" stroke-linejoin="round"></path>200        </svg>201      </div>202      <div class="label">Lock</div>203    </div>204  </div>205 206  <!-- Bottom bar -->207  <div class="bottom-bar">208    <div class="page-count">1 of 63</div>209    <div class="bottom-controls">210      <div class="timeline">211        <div class="dot"></div>212      </div>213      <div class="bottom-icons">214        <svg viewBox="0 0 24 24">215          <path d="M12 4v4M12 16v4M8 12h8M6 8l-2-2M18 8l2-2M6 16l-2 2M18 16l2 2"></path>216        </svg>217        <svg viewBox="0 0 24 24">218          <path d="M7 3v6h6M7 9l8 8" stroke-linecap="round" stroke-linejoin="round"></path>219        </svg>220      </div>221    </div>222  </div>223 224  <!-- OS bottom area -->225  <div class="os-bottom">226    <div class="home-indicator"></div>227  </div>228 229</div>230</body>231</html>