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>Details Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #212121;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #101010;25    color: #fff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31    font-size: 42px;32    letter-spacing: 0.5px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .status-dot {40    width: 18px; height: 18px; background: #9E9E9E; border-radius: 50%;41  }42  .status-rect {43    width: 34px; height: 22px; border: 2px solid #9E9E9E; border-radius: 4px;44  }45  .battery {46    width: 48px; height: 24px; border: 2px solid #9E9E9E; border-radius: 4px; position: relative;47  }48  .battery::after {49    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #9E9E9E; border-radius: 2px;50  }51 52  /* App bar */53  .app-bar {54    position: absolute;55    top: 110px;56    left: 0;57    width: 1080px;58    height: 160px;59    background: #2A2A2A;60    display: flex;61    align-items: center;62    box-sizing: border-box;63    padding: 0 36px;64  }65  .close-btn {66    width: 88px;67    height: 88px;68    margin-right: 24px;69  }70  .close-btn svg { width: 88px; height: 88px; }71  .title {72    font-size: 86px;73    font-weight: 600;74    color: #FFFFFF;75  }76  .overflow-btn {77    margin-left: auto;78    width: 120px;79    height: 60px;80    background: #3A3A3A;81    color: #FFFFFF;82    border-radius: 14px;83    display: flex;84    align-items: center;85    justify-content: center;86    font-size: 42px;87    letter-spacing: 6px;88  }89 90  /* White content sheet */91  .sheet {92    position: absolute;93    top: 300px;94    left: 36px;95    width: 1008px;96    height: 1150px;97    background: #FFFFFF;98    border-radius: 6px;99    box-sizing: border-box;100    padding: 56px 60px;101    color: #333;102  }103  .sheet p {104    font-size: 30px;105    line-height: 1.55;106    margin: 0;107    max-width: 860px;108  }109 110  /* Bottom actions and content */111  .bottom-panel {112    position: absolute;113    bottom: 0;114    left: 0;115    width: 1080px;116    height: 740px;117    background: #2B2B2B;118    box-sizing: border-box;119    padding: 36px 36px 48px;120    color: #fff;121  }122  .actions {123    display: flex;124    align-items: center;125    justify-content: space-between;126    padding: 18px 10px 18px 10px;127  }128  .action-left { width: 120px; height: 120px; display: flex; align-items: center; }129  .action-group { display: flex; align-items: center; gap: 70px; }130  .actions svg { width: 80px; height: 80px; }131  .accent { stroke: #00BCD4; fill: none; }132  .accent-fill { fill: #00BCD4; stroke: none; }133 134  .divider {135    margin-top: 18px;136    height: 2px;137    background: #4A4A4A;138  }139 140  .section-title {141    margin-top: 40px;142    font-size: 78px;143    font-weight: 600;144    color: #FFFFFF;145  }146  .file-row {147    display: flex;148    align-items: center;149    gap: 26px;150    margin-top: 22px;151  }152  .pdf-icon {153    width: 48px; height: 60px;154  }155  .timestamp {156    margin-top: 26px;157    font-size: 36px;158    color: #BDBDBD;159  }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status bar -->166  <div class="status-bar">167    <div>2:16</div>168    <div class="status-icons">169      <div class="status-dot"></div>170      <div class="status-rect"></div>171      <div class="status-dot"></div>172      <div class="battery"></div>173    </div>174  </div>175 176  <!-- App bar -->177  <div class="app-bar">178    <div class="close-btn">179      <svg viewBox="0 0 24 24">180        <path d="M4 4 L20 20 M20 4 L4 20" stroke="#00BCD4" stroke-width="3" stroke-linecap="round"/>181      </svg>182    </div>183    <div class="title">Details</div>184    <div class="overflow-btn">...</div>185  </div>186 187  <!-- Main white sheet -->188  <div class="sheet">189    <p>190      About this book series<br>191      This subseries of Springer Finance includes books with the character of lecture notes. Typically192      these are research monographs on new, cutting‑edge developments in mathematical finance;193      sometimes they may be a glimpse of a new field of research activity, or presentations of a new194      angle in a more classical field. In the established tradition of Lecture Notes, the timeliness of a195      manuscript can be more important than its form, which may be informal, preliminary or tentative196      ...197    </p>198  </div>199 200  <!-- Bottom panel with actions and report -->201  <div class="bottom-panel">202    <div class="actions">203      <div class="action-left">204        <!-- Pencil icon -->205        <svg viewBox="0 0 24 24">206          <path class="accent" stroke-width="2" d="M3 17 L3 21 L7 21 L18 10 L14 6 Z"/>207          <path class="accent" stroke-width="2" d="M12 8 L16 12"/>208        </svg>209      </div>210      <div class="action-group">211        <!-- Heart + icon -->212        <svg viewBox="0 0 24 24">213          <path class="accent" stroke-width="2" d="M12 20 C10 18 6 15 6 10 C6 7.5 8 6 10 6 C11 6 12 6.7 12 7.5 C12 6.7 13 6 14 6 C16 6 18 7.5 18 10 C18 15 14 18 12 20 Z"/>214          <path class="accent" stroke-width="2" d="M12 9 M12 6 L12 12 M9 9 L15 9" />215        </svg>216        <!-- Chat bubble icon -->217        <svg viewBox="0 0 24 24">218          <path class="accent" stroke-width="2" d="M3 5 H21 V16 H8 L5 19 V16 H3 Z"/>219        </svg>220        <!-- Star icon -->221        <svg viewBox="0 0 24 24">222          <path class="accent" stroke-width="2" d="M12 3 L14.7 9.2 L21 9.5 L16 13.4 L17.6 20 L12 16.6 L6.4 20 L8 13.4 L3 9.5 L9.3 9.2 Z"/>223        </svg>224      </div>225    </div>226 227    <div class="divider"></div>228 229    <div class="section-title">Report</div>230 231    <div class="file-row">232      <!-- Simple red PDF file icon -->233      <svg class="pdf-icon" viewBox="0 0 24 24">234        <path d="M5 2 H14 L19 7 V22 H5 Z" fill="#D32F2F"/>235        <path d="M14 2 V7 H19" fill="#FFCDD2"/>236        <text x="6" y="17" font-size="8" fill="#FFFFFF" font-family="Arial">PDF</text>237      </svg>238      <div style="color:#D32F2F; font-size:32px; letter-spacing:1px;">PDF</div>239    </div>240 241    <div class="timestamp">51 min ago</div>242  </div>243 244</div>245</body>246</html>