GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Reader UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Georgia, "Times New Roman", serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #E7D3B6; /* sepia paper */20    border-radius: 0;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 120px;30    background: #000;31    color: #fff;32    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;33    font-size: 40px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    padding: 0 40px;38    box-sizing: border-box;39  }40  .status-icons {41    display: flex;42    align-items: center;43    gap: 28px;44  }45  .icon-circle {46    width: 36px;47    height: 36px;48    border-radius: 50%;49    border: 3px solid #fff;50    opacity: 0.9;51  }52  .icon-battery {53    width: 28px;54    height: 36px;55    border: 3px solid #fff;56    position: relative;57    border-radius: 4px;58  }59  .icon-battery::after {60    content: "";61    position: absolute;62    right: -8px;63    top: 8px;64    width: 6px;65    height: 18px;66    background: #fff;67    border-radius: 2px;68  }69 70  /* Reading content */71  .page {72    position: absolute;73    left: 0;74    top: 120px;75    right: 0;76    bottom: 0;77    padding: 60px 72px 160px 72px;78    box-sizing: border-box;79  }80  .content {81    color: #7A5B3E;82    font-size: 48px;83    line-height: 1.55;84    letter-spacing: 0.4px;85  }86  .content p {87    margin: 28px 0;88    text-indent: 36px;89  }90  .content p.big-indent {91    text-indent: 0;92  }93  .small-caps {94    font-variant: small-caps;95    letter-spacing: 2px;96  }97 98  /* Overlay - Font size control */99  .font-overlay {100    position: absolute;101    top: 860px;102    left: 170px;103    width: 740px;104    height: 220px;105    background: #3d3d3f;106    border-radius: 22px;107    box-shadow: 0 18px 40px rgba(0,0,0,0.35);108    color: #fff;109  }110  .font-overlay .title {111    position: absolute;112    top: 26px;113    left: 40px;114    font-size: 36px;115    letter-spacing: 2px;116    color: #cfcfd4;117  }118  .font-overlay .controls {119    position: absolute;120    bottom: 38px;121    left: 0;122    right: 0;123    display: flex;124    align-items: center;125    justify-content: space-around;126    padding: 0 46px;127  }128  .circle-btn {129    width: 96px;130    height: 96px;131    border-radius: 50%;132    border: 6px solid #fff;133    display: flex;134    align-items: center;135    justify-content: center;136    font-size: 70px;137    line-height: 1;138  }139  .font-size-value {140    font-size: 64px;141    color: #eaeaf0;142    opacity: 0.95;143  }144 145  /* Bottom progress */146  .progress {147    position: absolute;148    left: 40px;149    right: 40px;150    bottom: 150px;151    height: 10px;152    background: #d2bea3;153    border-radius: 6px;154  }155  .progress::before,156  .progress::after {157    content: "";158    position: absolute;159    width: 20px;160    height: 20px;161    background: #E7D3B6;162    border-radius: 50%;163    top: -5px;164  }165  .progress::before { left: -12px; }166  .progress::after { right: -12px; }167 168  /* Home indicator */169  .home-indicator {170    position: absolute;171    bottom: 36px;172    left: 50%;173    transform: translateX(-50%);174    width: 520px;175    height: 16px;176    background: #ffffff;177    opacity: 0.9;178    border-radius: 10px;179  }180</style>181</head>182<body>183<div id="render-target">184  <div class="status-bar">185    <div>8:16</div>186    <div class="status-icons">187      <div class="icon-circle"></div>188      <div class="icon-battery"></div>189    </div>190  </div>191 192  <div class="page">193    <div class="content">194      <p class="big-indent">195        ket, or a watch to take out of it, and, burning with curiosity, she ran