GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8" />4<title>Garcia Lorca: Yerma - Reader Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Georgia", "Times New Roman", serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #0f0f10;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 88px;23    background: #000;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    font-size: 30px;29  }30  .status-time { color: #eaeaea; font-weight: 600; letter-spacing: 1px; }31  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 22px; }32  .sb-dot { width: 18px; height: 18px; background: #eaeaea; border-radius: 50%; opacity: .9; }33  .sb-battery {34    width: 40px; height: 20px; border: 2px solid #eaeaea; position: relative; border-radius: 3px;35  }36  .sb-battery:after {37    content: ""; position: absolute; right: -6px; top: 5px; width: 6px; height: 10px; background: #eaeaea;38  }39 40  /* App bar */41  .app-bar {42    position: absolute;43    top: 88px;44    left: 0;45    width: 1080px;46    height: 150px;47    background: #151516;48    display: flex;49    align-items: center;50    padding: 0 28px;51    box-sizing: border-box;52    border-bottom: 1px solid #2a2a2b;53  }54  .app-left, .app-right { display: flex; align-items: center; gap: 28px; }55  .app-left { width: 240px; }56  .app-title {57    flex: 1;58    text-align: center;59    line-height: 1.1;60  }61  .app-title .title { font-size: 44px; color: #e8e8e8; font-weight: 600; }62  .app-title .subtitle { font-size: 28px; color: #a7a7a7; margin-top: 6px; }63  .icon-btn svg { width: 46px; height: 46px; fill: none; stroke: #e8e8e8; stroke-width: 4; }64 65  /* Reading page */66  .page-wrap {67    position: absolute;68    top: 238px;69    left: 0;70    width: 1080px;71    bottom: 300px;72    padding: 26px 0 0;73    box-sizing: border-box;74    overflow: hidden;75  }76  .page {77    width: 940px;78    margin: 0 auto;79    height: 100%;80    background: #ffffff;81    color: #111;82    border-radius: 2px;83    box-shadow: 0 0 0 1px #d6d6d6 inset;84    padding: 60px 70px 140px;85    box-sizing: border-box;86    overflow: hidden;87  }88  .center { text-align: center; }89  .u { text-decoration: underline; }90  .stage-dir { font-style: italic; color: #444; line-height: 1.45; }91  .voice {92    margin: 26px 0 26px 0;93    padding-left: 280px;94    font-size: 34px;95    line-height: 1.35;96  }97  .dialogue { margin: 16px 0; font-size: 36px; line-height: 1.5; }98  .name { text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }99  .progress-float {100    position: absolute;101    left: 0; right: 0;102    bottom: 270px;103    text-align: center;104    font-size: 36px;105    color: #eaeaea;106  }107  .progress-bar {108    position: absolute;109    left: 60px;110    right: 60px;111    bottom: 320px;112    height: 8px;113    background: #2f2f30;114    border-radius: 6px;115  }116  .progress-knob {117    position: absolute;118    left: 160px; /* approximate knob position */119    top: -16px;120    width: 36px;121    height: 36px;122    background: #56c18a;123    border-radius: 50%;124    box-shadow: 0 0 0 4px rgba(86,193,138,.25);125  }126 127  /* Bottom toolbar */128  .toolbar {129    position: absolute;130    left: 0;131    bottom: 48px;132    width: 1080px;133    height: 210px;134    background: #0e0e0f;135    border-top: 1px solid #2b2b2c;136    display: flex;137    align-items: center;138    justify-content: space-around;139    padding: 0 18px;140    box-sizing: border-box;141  }142  .tool {143    width: 120px;144    text-align: center;145    color: #eaeaea;146    font-size: 26px;147  }148  .tool .ico {149    width: 88px; height: 88px; border-radius: 18px;150    border: 2px solid #4a4a4b; margin: 0 auto 10px;151    display: flex; align-items: center; justify-content: center;152    color: #eaeaea; font-weight: 700; font-family: system-ui, Arial, sans-serif;153  }154  .tool svg { width: 46px; height: 46px; stroke: #eaeaea; fill: none; stroke-width: 4; }155 156  /* Gesture bar */157  .gesture {158    position: absolute;159    left: 330px;160    right: 330px;161    bottom: 12px;162    height: 10px;163    background: #c8c8c8;164    border-radius: 8px;165    opacity: .85;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div class="status-time">10:13</div>175    <div class="status-icons">176      <div class="sb-dot"></div>177      <div class="sb-dot"></div>178      <div class="sb-dot"></div>179      <div class="sb-battery"></div>180    </div>181  </div>182 183  <!-- App bar -->184  <div class="app-bar">185    <div class="app-left">186      <div class="icon-btn" title="Back">187        <svg viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>188      </div>189      <div class="icon-btn" title="Menu">190        <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>191      </div>192    </div>193 194    <div class="app-title">195      <div class="title">Garcia Lorca: Yerma</div>196      <div class="subtitle">A. S. Kline</div>197    </div>198 199    <div class="app-right">200      <div class="icon-btn" title="Search">201        <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M14 14l6 6"/></svg>202      </div>203      <div class="icon-btn" title="Bookmark">204        <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4z"/></svg>205      </div>206    </div>207  </div>208 209  <!-- Reading page -->210  <div class="page-wrap">211    <div class="page">212      <div class="center u" style="font-size:38px; margin-bottom: 18px;">Act I Scene 1</div>213 214      <div class="stage-dir" style="font-size: 32px; margin-bottom: 22px;">215        (When the curtain rises Yerma is asleep with an embroidery frame at her feet. A strange dreamy light fills the stage.216        A shepherd enters on tiptoe, gazing fixedly at Yerma. He leads a child dressed in white by the hand. The clock sounds.217        The shepherd leaves and the bluish light becomes the bright light of a spring morning. Yerma wakes.)218      </div>219 220      <div class="stage-dir" style="font-size: 28px; margin-bottom: 10px;">VOICE SINGING: (within)</div>221 222      <div class="voice">223        For a cradle, cradle, cradle<br/>224        for a cradle we will make<br/>225        a little cabin in the meadow<br/>226        and then shelter there’ll we take.227      </div>228 229      <div class="dialogue"><span class="name">Yerma:</span> Juan. Do you hear me? Juan.</div>230      <div class="dialogue"><span class="name">Juan:</span> I’m on my way.</div>231      <div class="dialogue"><span class="name">Yerma:</span> It’s time.</div>232      <div class="dialogue"><span class="name">Juan:</span> Have the oxen gone by?</div>233      <div class="dialogue"><span class="name">Yerma:</span> They’ve already gone.</div>234      <div class="dialogue"><span class="name">Juan:</span> See you later. <span class="stage-dir">(He prepares to leave)</span></div>235      <div class="dialogue"><span class="name">Yerma:</span> You won’t take a glass of milk?</div>236      <div class="dialogue"><span class="name">Juan:</span> What for?</div>237      <div class="dialogue"><span class="name">Yerma:</span> You work hard and you’re not made for work.</div>238      <div class="dialogue"><span class="name">Juan:</span> When men are thin they’re strong, like steel.</div>239      <div class="dialogue">240        <span class="name">Yerma:</span> Not you, though. When we married you were different.241        Now you’re white-faced as if the sun never shines on you. I’d like to see <em>you</em> swim in the river,242        or climb on the roof when the rain is beating on our house. We’ve243      </div>244      <!-- The page content is truncated to reflect the screenshot -->245    </div>246  </div>247 248  <!-- progress -->249  <div class="progress-bar">250    <div class="progress-knob"></div>251  </div>252  <div class="progress-float">5 / 63 (7%)</div>253 254  <!-- Bottom toolbar -->255  <div class="toolbar">256    <div class="tool">257      <div class="ico">Aa</div>258      <div>Text</div>259    </div>260    <div class="tool">261      <div class="ico">262        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 3"/></svg>263      </div>264      <div>View</div>265    </div>266    <div class="tool">267      <div class="ico">268        <svg viewBox="0 0 24 24"><path d="M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4"/></svg>269      </div>270      <div>Rotation</div>271    </div>272    <div class="tool">273      <div class="ico">274        <svg viewBox="0 0 24 24"><path d="M4 10v6h4l5 3V7l-5 3H4z"/></svg>275      </div>276      <div>TTS</div>277    </div>278    <div class="tool">279      <div class="ico">280        <svg viewBox="0 0 24 24"><path d="M4 5h16M8 9h8M6 13h12M10 17h4"/></svg>281      </div>282      <div>Autoscroll</div>283    </div>284    <div class="tool">285      <div class="ico">286        <svg viewBox="0 0 24 24"><path d="M6 3h12v14H6z"/><path d="M12 7v6M9 10h6"/></svg>287      </div>288      <div>Add note</div>289    </div>290    <div class="tool">291      <div class="ico">292        <svg viewBox="0 0 24 24"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg>293      </div>294      <div>Fullscreen</div>295    </div>296    <div class="tool">297      <div class="ico">298        <svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16"/></svg>299      </div>300      <div>More</div>301    </div>302  </div>303 304  <!-- gesture bar -->305  <div class="gesture"></div>306</div>307</body>308</html>