GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>PDF Viewer UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    height: 88px;24    width: 100%;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #e8e8e8;30    font-size: 42px;31    letter-spacing: 0.2px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .status-dot { width: 10px; height: 10px; background: #cfcfcf; border-radius: 50%; opacity: 0.9; }39  .battery {40    width: 50px; height: 24px; border: 2px solid #cfcfcf; border-radius: 5px; position: relative;41  }42  .battery::after { content: ""; position: absolute; right: -6px; top: 7px; width: 6px; height: 10px; background: #cfcfcf; border-radius: 2px; }43  .battery .level { position: absolute; left: 2px; top: 2px; height: 18px; width: 36px; background: #cfcfcf; border-radius: 3px; }44 45  /* App bar */46  .app-bar {47    position: absolute;48    top: 88px;49    left: 0;50    height: 130px;51    width: 100%;52    display: flex;53    align-items: center;54    padding: 0 32px;55  }56  .app-left {57    display: flex;58    align-items: center;59    gap: 24px;60    flex: 1;61  }62  .app-title {63    font-size: 60px;64    font-weight: 600;65    color: #e6e6e6;66  }67  .app-actions {68    display: flex;69    align-items: center;70    gap: 38px;71  }72  .icon-btn {73    width: 66px;74    height: 66px;75    display: inline-flex;76    align-items: center;77    justify-content: center;78    border-radius: 12px;79    color: #d9d9d9;80  }81  .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #d9d9d9; stroke-width: 6; }82 83  /* Document page */84  .page {85    position: absolute;86    left: 36px;87    right: 36px;88    top: 480px;89    height: 1420px;90    background: #ffffff;91    border-radius: 4px;92    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);93    color: #111;94  }95  .page-content {96    padding: 120px 120px 100px 120px;97    font-size: 30px;98    line-height: 1.55;99    color: #1a1a1a;100  }101  .page-content h3 {102    margin: 0 0 20px 0;103    font-size: 32px;104    font-weight: 600;105  }106 107  /* Floating action button (note/pen) */108  .fab {109    position: absolute;110    right: 60px;111    bottom: 220px;112    width: 150px;113    height: 150px;114    background: #48521f;115    border-radius: 36px;116    box-shadow: 0 10px 30px rgba(0,0,0,0.45);117    display: flex;118    align-items: center;119    justify-content: center;120  }121  .fab-content {122    display: flex;123    flex-direction: column;124    align-items: center;125    gap: 12px;126    color: #eef0e8;127    font-weight: 600;128    font-size: 42px;129  }130  .fab svg { width: 60px; height: 60px; stroke: #eef0e8; stroke-width: 6; fill: none; }131 132  /* Gesture pill */133  .gesture-pill {134    position: absolute;135    bottom: 40px;136    left: 50%;137    transform: translateX(-50%);138    width: 300px;139    height: 16px;140    background: #e0e0e0;141    border-radius: 10px;142    opacity: 0.9;143  }144</style>145</head>146<body>147<div id="render-target">148 149  <!-- Status bar -->150  <div class="status-bar">151    <div>10:51</div>152    <div class="status-right">153      <!-- simple placeholder icons -->154      <div class="status-dot"></div>155      <div class="status-dot" style="width:18px;height:18px;border-radius:6px;"></div>156      <div class="status-dot"></div>157      <div class="status-dot"></div>158      <div class="battery"><div class="level"></div></div>159    </div>160  </div>161 162  <!-- App bar -->163  <div class="app-bar">164    <div class="app-left">165      <!-- Back arrow -->166      <div class="icon-btn" aria-label="Back">167        <svg viewBox="0 0 24 24">168          <path d="M15 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round"></path>169        </svg>170      </div>171      <div class="app-title">Report.pdf</div>172    </div>173    <div class="app-actions">174      <!-- Search -->175      <div class="icon-btn" aria-label="Search">176        <svg viewBox="0 0 24 24">177          <circle cx="11" cy="11" r="6"></circle>178          <path d="M20 20l-4.5-4.5" stroke-linecap="round"></path>179        </svg>180      </div>181      <!-- Drive add (triangle with plus) -->182      <div class="icon-btn" aria-label="Add to drive">183        <svg viewBox="0 0 24 24">184          <path d="M12 4l8 14H4z"></path>185          <path d="M12 9v6M9 12h6" stroke-linecap="round"></path>186        </svg>187      </div>188      <!-- More (vertical dots) -->189      <div class="icon-btn" aria-label="More">190        <svg viewBox="0 0 24 24">191          <circle cx="12" cy="5" r="2" fill="#d9d9d9" stroke="none"></circle>192          <circle cx="12" cy="12" r="2" fill="#d9d9d9" stroke="none"></circle>193          <circle cx="12" cy="19" r="2" fill="#d9d9d9" stroke="none"></circle>194        </svg>195      </div>196    </div>197  </div>198 199  <!-- PDF page -->200  <div class="page">201    <div class="page-content">202      <h3>About this book series</h3>203      <p>204        This subseries of Springer Finance includes books with the character of lecture notes.205        Typically these are research monographs on new, cutting‑edge developments in mathematical206        finance; sometimes they may be a glimpse of a new field of research activity, or207        presentations of a new angle in a more classical field. In the established tradition of208        Lecture Notes, the timeliness of a manuscript can be more important than its form, which209        may be informal, preliminary or tentative.210      </p>211      <p>[… truncated sample content of the PDF page …]</p>212    </div>213  </div>214 215  <!-- Floating action button -->216  <div class="fab" role="button" aria-label="Annotate">217    <div class="fab-content">218      <svg viewBox="0 0 24 24">219        <path d="M4 20l4-1 9-9-3-3-9 9-1 4z" stroke-linejoin="round"></path>220      </svg>221      <div>2/3</div>222    </div>223  </div>224 225  <!-- Gesture pill -->226  <div class="gesture-pill"></div>227 228</div>229</body>230</html>