GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Details Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #121212;14    font-family: "Roboto", Arial, sans-serif;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    background: #0E0E0E;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-weight: 500;31    letter-spacing: 0.5px;32  }33  .status-left { font-size: 42px; }34  .status-right {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 24px;39  }40  .status-icon {41    width: 34px;42    height: 34px;43    opacity: 0.8;44    fill: #FFFFFF;45  }46 47  /* Header */48  .header {49    position: absolute;50    top: 110px;51    left: 0;52    width: 1080px;53    height: 170px;54    background: #232323;55    display: flex;56    align-items: center;57    padding: 0 36px;58    box-sizing: border-box;59    border-bottom: 1px solid #2e2e2e;60  }61  .close-icon {62    width: 68px;63    height: 68px;64    margin-right: 24px;65  }66  .title {67    font-size: 84px;68    font-weight: 700;69  }70 71  /* Main content area */72  .content {73    position: absolute;74    top: 280px;75    left: 0;76    width: 1080px;77    height: 1400px;78    background: #FFFFFF;79    color: #222;80  }81  .doc-text {82    position: absolute;83    top: 120px;84    left: 70px;85    width: 880px;86    font-size: 32px;87    line-height: 1.6;88  }89  .doc-text h3 {90    margin: 0 0 24px 0;91    font-size: 36px;92    color: #333;93  }94 95  /* Floating menu bubble */96  .menu-bubble {97    position: absolute;98    top: 70px;99    right: 60px;100    width: 150px;101    height: 70px;102    background: #3a3a3a;103    border-radius: 20px;104    display: flex;105    align-items: center;106    justify-content: center;107    gap: 16px;108  }109  .menu-dot {110    width: 14px;111    height: 14px;112    background: #fff;113    border-radius: 50%;114    opacity: 0.95;115  }116 117  /* Bottom panel */118  .bottom-panel {119    position: absolute;120    left: 0;121    bottom: 120px;122    width: 1080px;123    height: 520px;124    background: #262626;125    border-top: 1px solid #2e2e2e;126    box-sizing: border-box;127    padding: 40px 36px;128  }129  .actions {130    display: flex;131    align-items: center;132    justify-content: space-between;133  }134  .left-action {135    display: flex;136    align-items: center;137    gap: 26px;138  }139  .divider {140    width: 1px;141    height: 48px;142    background: #3a3a3a;143  }144  .action-icons {145    display: flex;146    align-items: center;147    gap: 48px;148  }149  .icon {150    width: 60px;151    height: 60px;152    fill: none;153    stroke: #00bcd4;154    stroke-width: 6;155  }156  .list-section {157    margin-top: 34px;158    border-top: 1px solid #3a3a3a;159    padding-top: 26px;160  }161  .item-title {162    font-size: 64px;163    font-weight: 700;164    margin-bottom: 24px;165  }166  .pdf-row {167    display: flex;168    align-items: center;169    gap: 18px;170    margin-bottom: 18px;171  }172  .pdf-icon {173    width: 42px;174    height: 52px;175    background: #E53935;176    border-radius: 6px;177    position: relative;178  }179  .pdf-icon::after {180    content: "PDF";181    position: absolute;182    top: 50%;183    left: 50%;184    transform: translate(-50%, -50%);185    font-size: 20px;186    color: #fff;187    font-weight: 700;188  }189  .timestamp {190    color: #9e9e9e;191    font-size: 34px;192  }193 194  /* Gesture bar */195  .gesture {196    position: absolute;197    bottom: 40px;198    left: 50%;199    transform: translateX(-50%);200    width: 320px;201    height: 16px;202    background: #E0E0E0;203    border-radius: 10px;204    opacity: 0.9;205  }206</style>207</head>208<body>209<div id="render-target">210  <!-- Status bar -->211  <div class="status-bar">212    <div class="status-left">2:19</div>213    <div class="status-right">214      <!-- simple status icons -->215      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>216      <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/></svg>217      <svg class="status-icon" viewBox="0 0 24 24"><path d="M4 18h16M7 14h10M10 10h4" stroke="#fff" stroke-width="2" fill="none"/></svg>218      <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 8h18v8" stroke="#fff" stroke-width="2" fill="none"/><rect x="15" y="16" width="4" height="5" fill="#fff"/></svg>219      <svg class="status-icon" viewBox="0 0 24 24"><path d="M6 18h12v-2a6 6 0 0 0-12 0v2z" fill="#fff"/></svg>220    </div>221  </div>222 223  <!-- Header -->224  <div class="header">225    <svg class="close-icon" viewBox="0 0 24 24">226      <path d="M5 5L19 19M19 5L5 19" stroke="#00bcd4" stroke-width="3" stroke-linecap="round"/>227    </svg>228    <div class="title">Details</div>229  </div>230 231  <!-- Main content document area -->232  <div class="content">233    <div class="menu-bubble">234      <div class="menu-dot"></div>235      <div class="menu-dot"></div>236      <div class="menu-dot"></div>237    </div>238    <div class="doc-text">239      <h3>About this book series</h3>240      <p>241        This subseries of Springer Finance includes books with the character of lecture notes. Typically242        these are research monographs on new, cutting-edge developments in mathematical finance;243        sometimes they may be a glimpse of a new field of research activity, or presentations of a new244        angle in a more classical field. In the established tradition of Lecture Notes, the timeliness of a245        manuscript can be more important than its form, which may be informal, preliminary or tentative.246      </p>247    </div>248  </div>249 250  <!-- Bottom panel with actions and list -->251  <div class="bottom-panel">252    <div class="actions">253      <div class="left-action">254        <!-- Pencil icon -->255        <svg class="icon" viewBox="0 0 24 24">256          <path d="M3 21l3-1 12-12-2-2L4 18l-1 3z" fill="none" stroke="#00bcd4" stroke-width="2"/>257        </svg>258        <div class="divider"></div>259      </div>260      <div class="action-icons">261        <!-- Heart + -->262        <svg class="icon" viewBox="0 0 24 24">263          <path d="M12 21s-7-4.4-7-9a4.5 4.5 0 0 1 8-2 4.5 4.5 0 0 1 8 2c0 4.6-7 9-9 9z" />264          <path d="M19 7v4M21 9h-4" stroke="#00bcd4" stroke-width="2" />265        </svg>266        <!-- Chat bubble -->267        <svg class="icon" viewBox="0 0 24 24">268          <path d="M4 5h16v11H9l-5 4V5z" />269        </svg>270        <!-- Star -->271        <svg class="icon" viewBox="0 0 24 24">272          <path d="M12 3l3.2 6.5 7.1 1-5.2 5 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5.2-5 7.1-1z" />273        </svg>274      </div>275    </div>276 277    <div class="list-section">278      <div class="item-title">Report</div>279      <div class="pdf-row">280        <div class="pdf-icon"></div>281        <div style="font-size:28px;color:#e0e0e0;">PDF</div>282      </div>283      <div class="timestamp">51 min ago</div>284    </div>285  </div>286 287  <!-- Gesture bar -->288  <div class="gesture"></div>289</div>290</body>291</html>