GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>E-Reader UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #e6d3b4; /* sepia page */13    border-radius: 0;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #0b0b0b;24    color: #ffffff;25  }26  .status-left {27    position: absolute;28    top: 36px;29    left: 40px;30    font-family: "SF Pro Text", Arial, sans-serif;31    font-size: 48px;32    letter-spacing: 1px;33  }34  .status-right {35    position: absolute;36    top: 36px;37    right: 40px;38    display: flex;39    gap: 22px;40    align-items: center;41  }42  .icon {43    width: 44px;44    height: 44px;45  }46 47  /* Reading area */48  .page {49    position: absolute;50    top: 120px;51    left: 40px;52    right: 40px;53    bottom: 180px;54    padding: 0 10px;55    color: #5a4b39;56    font-family: Georgia, "Times New Roman", serif;57    font-size: 50px;58    line-height: 1.45;59    hyphens: auto;60  }61  .para { margin: 28px 0; }62 63  /* Floating font-size control */64  .font-modal {65    position: absolute;66    top: 860px;67    left: 120px;68    width: 840px;69    height: 180px;70    background: #2f2f2f;71    border-radius: 18px;72    box-shadow: 0 8px 24px rgba(0,0,0,0.35);73    color: #e9e9e9;74  }75  .font-modal .label {76    position: absolute;77    top: 22px;78    left: 40px;79    font-size: 38px;80    font-family: Arial, sans-serif;81    letter-spacing: 1px;82    color: #bfbfbf;83  }84  .font-controls {85    position: absolute;86    left: 0; right: 0;87    top: 70px;88    height: 100px;89    display: flex;90    align-items: center;91    justify-content: space-between;92    padding: 0 60px;93  }94  .circle-btn {95    width: 88px;96    height: 88px;97    border-radius: 50%;98    border: 4px solid #cfcfcf;99    display: flex;100    align-items: center;101    justify-content: center;102    color: #ffffff;103    font-size: 54px;104    box-sizing: border-box;105  }106  .font-value {107    color: #ffffff;108    font-size: 54px;109    font-family: Arial, sans-serif;110  }111 112  /* Bottom progress bar */113  .progress-wrap {114    position: absolute;115    bottom: 128px;116    left: 40px;117    width: 1000px;118    height: 14px;119  }120  .progress-track {121    position: absolute;122    top: 4px;123    left: 28px;124    right: 28px;125    height: 6px;126    background: #cbb59a;127    border-radius: 3px;128  }129  .progress-dot {130    position: absolute;131    top: 0;132    width: 14px;133    height: 14px;134    border-radius: 50%;135    background: #cbb59a;136  }137  .progress-dot.left { left: 0; }138  .progress-dot.right { right: 0; }139 140  /* Home indicator */141  .home-indicator {142    position: absolute;143    bottom: 44px;144    left: 50%;145    transform: translateX(-50%);146    width: 360px;147    height: 16px;148    background: #cfc6b9;149    border-radius: 10px;150  }151</style>152</head>153<body>154<div id="render-target">155  <div class="status-bar">156    <div class="status-left">8:16</div>157    <div class="status-right">158      <!-- Simple round icon -->159      <svg class="icon" viewBox="0 0 24 24">160        <circle cx="12" cy="12" r="10" fill="#ffffff"/>161        <circle cx="12" cy="12" r="6" fill="#0b0b0b"/>162      </svg>163      <!-- Battery icon -->164      <svg class="icon" viewBox="0 0 28 18">165        <rect x="2" y="2" width="22" height="14" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>166        <rect x="24" y="6" width="3" height="6" fill="#ffffff"/>167        <rect x="4" y="4" width="16" height="10" fill="#ffffff"/>168      </svg>169    </div>170  </div>171 172  <div class="page">173    <p class="para">174      her mind that she had never before seen a rabbit with either a waistcoat‑pocket, or a watch to take out of it, and, burning with curiosity, she ran across the field after it and was just in time to see it pop down a large rabbit‑hole, under the hedge. In another moment, down went Alice after it!175    </p>176    <p class="para">177      The rabbit‑hole went straight on like a tunnel for some way, and then dipped suddenly; she had not a moment to think about stopping herself before she found herself falling down what seemed to be a very deep well.178    </p>179 180    <div class="font-modal">181      <div class="label">FONT SIZE</div>182      <div class="font-controls">183        <div class="circle-btn">−</div>184        <div class="font-value">50</div>185        <div class="circle-btn">+</div>186      </div>187    </div>188 189    <p class="para">190      Either the well was very deep, or she fell very slowly, for she had plenty of time, as she went down, to look about her. First, she tried to make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well and noticed that they were filled with cupboards and book‑shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed. It was labeled "ORANGE MARMALADE," but—191    </p>192  </div>193 194  <div class="progress-wrap">195    <div class="progress-dot left"></div>196    <div class="progress-track"></div>197    <div class="progress-dot right"></div>198  </div>199 200  <div class="home-indicator"></div>201</div>202</body>203</html>