GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Reading App UI</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#D8C4A6; /* paper-like beige */12    font-family: Georgia, "Times New Roman", serif;13  }14 15  /* Status bar */16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:120px; background:#000;19    color:#fff;20  }21  .status-time {22    position:absolute; left:36px; top:32px;23    font-size:40px; letter-spacing:1px;24  }25  .status-icons {26    position:absolute; right:36px; top:30px;27    display:flex; gap:28px; align-items:center;28  }29  .icon {30    width:40px; height:40px;31    display:inline-block;32  }33 34  /* Reading content */35  .page {36    position:absolute; left:40px; right:40px;37    top:150px; bottom:200px;38    color:#6E5338;39    font-size:44px; line-height:1.45;40  }41  .page p { margin:0 0 42px 0; }42  .home-indicator {43    position:absolute; left:50%; transform:translateX(-50%);44    bottom:32px; width:420px; height:16px;45    background:#111; border-radius:10px; opacity:0.9;46  }47 48  /* Progress bar and dots at very bottom of page area */49  .progress {50    position:absolute; left:40px; right:40px; bottom:155px;51    height:10px; background:transparent;52  }53  .progress-line {54    position:absolute; left:0; right:0; top:4px;55    height:4px; background:#9E8A70; border-radius:2px;56  }57  .dot {58    position:absolute; width:18px; height:18px; border-radius:50%;59    background:#8C7760;60    bottom:-4px;61  }62  .dot.left { left:-8px; }63  .dot.right { right:-8px; }64 65  /* Font size popover */66  .popover {67    position:absolute; left:150px; top:590px;68    width:780px; height:180px;69    background:#333; border-radius:22px;70    box-shadow:0 6px 16px rgba(0,0,0,0.35);71    color:#EEE;72    display:flex; align-items:center; justify-content:space-between;73    padding:32px;74  }75  .popover-title {76    position:absolute; top:18px; left:32px;77    color:#CFCFCF; font-size:34px; letter-spacing:1px;78  }79  .size-display {80    font-size:56px; color:#FFF;81  }82  .round-btn {83    width:86px; height:86px; border-radius:50%;84    background:#444; border:3px solid #777;85    display:flex; align-items:center; justify-content:center;86    color:#FFF; font-size:56px; font-weight:bold;87  }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status bar -->94  <div class="status-bar">95    <div class="status-time">8:16</div>96    <div class="status-icons">97      <!-- simple wifi-like arc -->98      <svg class="icon" viewBox="0 0 24 24">99        <path d="M12 19.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" fill="#fff"/>100        <path d="M4 10c4.6-4 11.4-4 16 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>101        <path d="M7 13c3-2.5 7-2.5 10 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>102      </svg>103      <!-- battery icon -->104      <svg class="icon" viewBox="0 0 28 24">105        <rect x="1" y="5" width="20" height="14" rx="3" ry="3