GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Reader Settings Overlay</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target{8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:10      radial-gradient(1000px 500px at 50% 0%, rgba(0,0,0,0.55), rgba(0,0,0,0.85)),11      repeating-linear-gradient(135deg,#2d2d2d 0,#2d2d2d 6px,#303030 6px,#303030 12px);12    color:#fff;13  }14 15  /* Status bar */16  .status-bar{17    position:absolute; top:0; left:0; right:0;18    height:120px; background:#0a0a0a;19    display:flex; align-items:center; padding:0 34px; font-weight:600;20    letter-spacing:1px; font-size:36px;21  }22  .sb-right{ margin-left:auto; display:flex; align-items:center; gap:26px; }23  .icon{24    width:36px; height:36px; border-radius:4px; position:relative;25  }26  .ico-wifi{ width:44px; height:28px; }27  .ico-batt{ width:52px; height:28px; border:2px solid #d9d9d9; border-radius:4px; position:relative; }28  .ico-batt:after{ content:''; position:absolute; right:-8px; top:7px; width:6px; height:12px; background:#d9d9d9; border-radius:1px; }29  .ico-fill{ position:absolute; left:2px; top:2px; bottom:2px; width:32px; background:#d9d9d9; }30 31  /* The book page behind the sheet */32  .book-wrap{33    position:absolute; left:70px; right:70px; top:360px;34    display:flex; justify-content:center;35  }36  .book-page{37    width:870px; min-height:1100px; background:#ffffff; color:#222;38    box-shadow:0 12px 30px rgba(0,0,0,0.35);39    padding:70px 80px; line-height:1.6; font-size:30px;40  }41  .book-page h2{ text-align:center; margin:20px 0 40px; font-size:36px; text-decoration:underline; }42  .aside{ color:#444; font-style:italic; margin-bottom:38px; }43  .speaker{ font-variant: small-caps; font-weight:bold; }44 45  /* Bottom sheet */46  .sheet{47    position:absolute; left:0; right:0; bottom:0; height:1150px;48    background:#0f0f0f; border-radius:30px 30px 0 0;49    box-shadow:0 -10px 40px rgba(0,0,0,0.6);50    padding:22px 0 30px;51  }52  .sheet .handle{53    width:180px; height:10px; background:#2e2e2e; border-radius:10px;54    margin:10px auto 16px;55  }56  .sheet .title{57    font-size:46px; font-weight:700; padding:16px 36px 22px;58  }59  .row{60    display:flex; align-items:center; justify-content:space-between;61    padding:26px 36px; font-size:40px; border-top:1px solid #1e1e1e;62  }63  .row.subtext{ flex-direction:column; align-items:flex-start; gap:10px; }64  .hint{ color:#9f9f9f; font-size:30px; }65 66  /* Switch */67  .switch{68    width:130px; height:70px; background:#3a3a3a; border-radius:40px;69    position:relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);70  }71  .switch::after{72    content:''; position:absolute; top:4px; left:4px;73    width:62px; height:62px; background:#8b8b8b; border-radius:50%; transition:all .2s;74  }75  .switch.on{ background:#61c7b7; }76  .switch.on::after{ left:64px; background:#dff7f3; }77 78  /* Brightness section */79  .bright-row{ gap:26px; }80  .auto-wrap{ display:flex; align-items:center; gap:18px; font-size:34px; color:#cfcfcf; }81  .slider-wrap{ display:flex; align-items:center; gap:24px; padding:18px 36px 10px; }82  .sun{ font-size:46px; color:#d9d9d9; }83  .slider{84    position:relative; height:10px; background:#c9c9c9; border-radius:5px;85    width:760px;86  }87  .slider .fill{88    position:absolute; top:0; left:0; height:10px; width:520px; background:#59bea8; border-radius:5px;89  }90  .slider .thumb{91    position:absolute; top:-18px; left:504px; width:48px; height:48px; background:#59bea8;92    border-radius:50%; box-shadow:0 0 0 6px rgba(89,190,168,0.25);93  }94 95  /* Gesture bar */96  .gesture{97    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);98    width:300px; height:10px; background:#e6e6e6; border-radius:10px; opacity:0.9;99  }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Status bar -->106  <div class="status-bar">107    <div>10:15</div>108    <div class="sb-right">109      <!-- simple placeholders for icons -->110      <div class="icon" style="color:#eaeaea;">☀️</div>111      <div class="icon" style="color:#eaeaea;">👤</div>112      <div class="icon" style="color:#eaeaea;">⭕</div>113      <div class="icon" style="color:#eaeaea;">✉️</div>114      <div class="icon" style="color:#eaeaea;">•</div>115      <svg class="ico-wifi" viewBox="0 0 24 24" fill="#eaeaea">116        <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-4.93-5.34a9 9 0 0 1 9.86 0l1.41-1.41a11 11 0 0 0-12.68 0l1.41 1.41zm-3.54-3.54a14 14 0 0 1 16.94 0l1.41-1.41a16 16 0 0 0-19.76 0l1.41 1.41z"/>117      </svg>118      <div class="ico-batt"><div class="ico-fill"></div></div>119    </div>120  </div>121 122  <!-- Book page behind -->123  <div class="book-wrap">124    <div class="book-page">125      <h2>Act I Scene 1</h2>126      <div class="aside">(When the curtain rises Yerma is asleep with an embroidery frame at her feet. A strange dreamy light fills the stage... Yerma wakes.)</div>127 128      <p class="speaker">Voice singing (within)</p>129      <p>For a cradle, cradle, cradle<br>130      for a cradle we will make<br>131      a little cabin in the meadow<br>132      and then shelter there'll we take.</p>133 134      <p class="speaker">YERMA:</p>135      <p>Juan. Do you hear me? Juan.</p>136 137      <p class="speaker">JUAN:</p>138      <p>I'm on my way.</p>139 140      <p class="speaker">YERMA:</p>141      <p>It's time.</p>142    </div>143  </div>144 145  <!-- Bottom settings sheet -->146  <div class="sheet">147    <div class="handle"></div>148    <div class="title">View</div>149 150    <div class="row">151      <div>Vertical Scrolling</div>152      <div class="switch"></div>153    </div>154 155    <div class="row">156      <div>Night Light</div>157      <div class="switch"></div>158    </div>159 160    <div class="row subtext">161      <div style="display:flex; width:100%; align-items:center; justify-content:space-between;">162        <div>Quick Brightness Access</div>163        <div class="switch"></div>164      </div>165      <div class="hint">Use left side of the screen to change value</div>166    </div>167 168    <div class="row bright-row">169      <div>Brightness</div>170      <div class="auto-wrap">171        Auto172        <div class="switch"></div>173      </div>174    </div>175 176    <div class="slider-wrap">177      <div class="sun">☼</div>178      <div class="slider">179        <div class="fill"></div>180        <div class="thumb"></div>181      </div>182      <div class="sun">☼</div>183    </div>184 185    <div class="row">186      <div>Page turn animation</div>187      <div class="switch on"></div>188    </div>189 190    <div class="row">191      <div>Show reading progress</div>192      <div class="switch"></div>193    </div>194  </div>195 196  <div class="gesture"></div>197</div>198</body>199</html>