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>Reading Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Georgia", "Times New Roman", serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #000000;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #FFFFFF;30    font-size: 38px;31    letter-spacing: 0.5px;32  }33  .status-left {34    display: inline-flex;35    align-items: center;36    gap: 18px;37  }38  .status-right {39    display: inline-flex;40    align-items: center;41    gap: 22px;42  }43  .status-icon {44    width: 40px;45    height: 40px;46    display: inline-block;47  }48 49  /* Bookmark */50  .bookmark {51    position: absolute;52    right: 20px;53    top: 480px;54    width: 48px;55    height: 130px;56    background: #5b5b5b;57    border-radius: 24px;58    display: flex;59    align-items: center;60    justify-content: center;61    box-shadow: 0 6px 14px rgba(0,0,0,0.35);62  }63  .bookmark svg {64    width: 26px;65    height: 26px;66    fill: #1e1e1e;67  }68 69  /* Reading content */70  .content {71    position: absolute;72    top: 120px;73    left: 58px;74    right: 58px;75    bottom: 180px;76    color: #FFFFFF;77    font-size: 68px;78    line-height: 1.18;79    letter-spacing: 0.5px;80  }81  .content p {82    margin: 30px 0;83  }84  .stage {85    font-style: italic;86  }87  .speaker {88    font-weight: 600;89    letter-spacing: 1px;90    margin-top: 36px;91  }92 93  /* Bottom info bar */94  .bottom-bar {95    position: absolute;96    left: 0;97    bottom: 0;98    width: 1080px;99    height: 120px;100    background: rgba(0,0,0,0.8);101    display: flex;102    align-items: center;103    padding: 0 30px;104    box-sizing: border-box;105    color: #FFFFFF;106    font-family: "Helvetica Neue", Arial, sans-serif;107  }108  .bb-left {109    display: inline-flex;110    align-items: center;111    gap: 18px;112    font-size: 34px;113  }114  .pill {115    background: #2b2b2b;116    border-radius: 10px;117    padding: 6px 12px;118    font-weight: 700;119    font-size: 28px;120    border: 1px solid #3a3a3a;121  }122  .bb-center {123    flex: 1;124    text-align: center;125    font-size: 34px;126    opacity: 0.9;127  }128  .bb-right {129    min-width: 160px;130    text-align: right;131    font-size: 34px;132    font-weight: 700;133  }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Status Bar -->140  <div class="status-bar">141    <div class="status-left">142      <div>1:03</div>143      <!-- Simple round icon -->144      <svg class="status-icon" viewBox="0 0 24 24">145        <circle cx="12" cy="12" r="9" fill="#FFFFFF"/>146        <circle cx="12" cy="12" r="5" fill="#000000"/>147      </svg>148    </div>149    <div class="status-right">150      <!-- Wi-Fi icon -->151      <svg class="status-icon" viewBox="0 0 24 24">152        <path d="M12 18c.9 0 1.6.7 1.6 1.6S12.9 21.2 12 21.2s-1.6-.7-1.6-1.6.7-1.6 1.6-1.6z" fill="#FFFFFF"/>153        <path d="M3 9.5c5.6-4.7 12.4-4.7 18 0l-2 2c-4.8-4-9.2-4-14 0l-2-2z" fill="#FFFFFF"/>154        <path d="M6.5 12.5c3.9-3.3 7.1-3.3 11 0l-2 2c-2.8-2.3-4.3-2.3-7.1 0l-1.9-2z" fill="#FFFFFF"/>155      </svg>156      <!-- Battery icon -->157      <svg class="status-icon" viewBox="0 0 28 24">158        <rect x="2" y="6" width="20" height="12" rx="2" fill="#FFFFFF"/>159        <rect x="23" y="9" width="3" height="6" rx="1" fill="#FFFFFF"/>160        <rect x="4" y="8" width="16" height="8" fill="#000000"/>161      </svg>162    </div>163  </div>164 165  <!-- Bookmark control -->166  <div class="bookmark">167    <svg viewBox="0 0 24 24">168      <path d="M6 2h12v18l-6-4-6 4V2z"></path>169    </svg>170  </div>171 172  <!-- Reading Content -->173  <div class="content">174    <p>afternoon,</p>175    <p>To know our farther pleasure<br>in this case,</p>176    <p>To old Free-town, our<br>common judgement-place.</p>177    <p>Once more, on pain of death,<br>all men depart.</p>178 179    <p class="stage">[Exeunt Prince and Attendants; Capulet, Lady<br>Capulet, Tybalt, Citizens and<br>Servants.]</p>180 181    <p class="speaker">MONTAGUE.</p>182    <p>Who set this ancient quarrel<br>new abroach?</p>183    <p>Speak, nephew, were you by<br>when it began?</p>184 185    <p class="speaker">BENVOLIO.</p>186    <p>Here were the servants of<br>your adversary</p>187    <p>And yours, close fighting ere I</p>188  </div>189 190  <!-- Bottom information bar -->191  <div class="bottom-bar">192    <div class="bb-left">193      <div class="pill">100</div>194      <div>13:03</div>195    </div>196    <div class="bb-center">SCENE I. A public place. (13/30)</div>197    <div class="bb-right">6.6%</div>198  </div>199 200</div>201</body>202</html>