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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Georgia, "Times New Roman", serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #f3c5d3;20    border-radius: 28px;21    box-shadow: 0 4px 24px rgba(0,0,0,0.08);22    color: #2a1b22;23  }24 25  /* Status bar */26  .status-bar {27    position: absolute;28    top: 36px;29    left: 40px;30    right: 40px;31    height: 72px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #5a4650;36    font-family: "SF Pro Text", Arial, sans-serif;37    font-weight: 600;38    font-size: 44px;39  }40  .status-left, .status-right {41    display: flex;42    align-items: center;43    gap: 28px;44  }45  .icon {46    width: 44px;47    height: 44px;48  }49  .dot {50    width: 14px;51    height: 14px;52    border-radius: 50%;53    background: #5a4650;54    display: inline-block;55  }56 57  /* Reading content */58  .content {59    position: absolute;60    left: 120px;61    right: 120px;62    top: 740px;63    line-height: 1.75;64    font-size: 36px;65  }66  .speaker {67    font-variant: small-caps;68    font-weight: 800;69    letter-spacing: 0.6px;70  }71  .line {72    margin: 30px 0;73  }74  .stage {75    font-style: italic;76    margin-top: 44px;77  }78  .centered {79    text-align: center;80    font-style: italic;81    margin-top: 48px;82  }83 84  /* Bottom info bar */85  .bottom-bar {86    position: absolute;87    left: 60px;88    right: 60px;89    bottom: 54px;90    height: 140px;91    background: rgba(255,255,255,0.35);92    border: 1px solid rgba(0,0,0,0.08);93    border-radius: 56px;94    display: flex;95    align-items: center;96    justify-content: space-between;97    padding: 0 44px;98    backdrop-filter: blur(2px);99    color: #1e0f16;100    font-family: "SF Pro Text", Arial, sans-serif;101    font-weight: 700;102  }103  .chip {104    display: inline-flex;105    align-items: center;106    gap: 16px;107    background: rgba(0,0,0,0.08);108    color: #181218;109    border-radius: 28px;110    padding: 12px 22px;111    font-size: 36px;112  }113  .bottom-bar .center {114    font-size: 40px;115    font-weight: 700;116    opacity: 0.95;117  }118  .bottom-bar .right {119    font-size: 40px;120  }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Status Bar -->127  <div class="status-bar">128    <div class="status-left">129      <div>10:32</div>130      <!-- Sun icon -->131      <svg class="icon" viewBox="0 0 24 24">132        <circle cx="12" cy="12" r="4" fill="#5a4650"></circle>133        <g stroke="#5a4650" stroke-width="2" stroke-linecap="round">134          <line x1="12" y1="1.5" x2="12" y2="5"></line>135          <line x1="12" y1="19" x2="12" y2="22.5"></line>136          <line x1="1.5" y1="12" x2="5" y2="12"></line>137          <line x1="19" y1="12" x2="22.5" y2="12"></line>138          <line x1="4.5" y1="4.5" x2="7" y2="7"></line>139          <line x1="17" y1="17" x2="19.5" y2="19.5"></line>140          <line x1="17" y1="7" x2="19.5" y2="4.5"></line>141          <line x1="4.5" y1="19.5" x2="7" y2="17"></line>142        </g>143      </svg>144      <!-- Camera icon -->145      <svg class="icon" viewBox="0 0 24 24">146        <path d="M7 7h3l1.5-2h5L18 7h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3z" fill="#5a4650"></path>147        <circle cx="12" cy="13" r="4" fill="#f3c5d3" stroke="#5a4650" stroke-width="2"></circle>148      </svg>149      <!-- Refresh/clock icon -->150      <svg class="icon" viewBox="0 0 24 24">151        <path d="M12 4a8 8 0 1 0 8 8" fill="none" stroke="#5a4650" stroke-width="2" stroke-linecap="round"></path>152        <path d="M12 8v5l4 2" fill="none" stroke="#5a4650" stroke-width="2" stroke-linecap="round"></path>153      </svg>154      <!-- G -->155      <div style="font-weight:700; font-size:42px; color:#5a4650;">G</div>156      <span class="dot"></span>157    </div>158    <div class="status-right">159      <!-- WiFi icon -->160      <svg class="icon" viewBox="0 0 24 24">161        <path d="M3 9c4.5-4.2 13.5-4.2 18 0" fill="none" stroke="#5a4650" stroke-width="2" stroke-linecap="round"></path>162        <path d="M6 12c3.3-3 8.7-3 12 0" fill="none" stroke="#5a4650" stroke-width="2" stroke-linecap="round"></path>163        <path d="M9.5 15.5c1.7-1.6 3.3-1.6 5 0" fill="none" stroke="#5a4650" stroke-width="2" stroke-linecap="round"></path>164        <circle cx="12" cy="18.5" r="1.5" fill="#5a4650"></circle>165      </svg>166      <!-- Battery icon -->167      <svg class="icon" viewBox="0 0 28 24">168        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#5a4650" stroke-width="2"></rect>169        <rect x="20" y="9" width="3.5" height="6" fill="#5a4650"></rect>170        <path d="M12 8l-3 6h4l-2 4" fill="none" stroke="#5a4650" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>171      </svg>172    </div>173  </div>174 175  <!-- Reading content -->176  <div class="content">177    <p class="line"><span class="speaker">Yerma:</span> <em>(Laughing)</em> I’m going to trim them with lace.</p>178    <p class="line"><span class="speaker">Victor:</span> If it’s a girl, name her after yourself.</p>179    <p class="line"><span class="speaker">Yerma:</span> <em>(Trembling)</em> What?</p>180    <p class="line"><span class="speaker">Victor:</span> I’m happy for you.</p>181    <p class="line"><span class="speaker">Yerma:</span> <em>(Almost choking)</em> No…they’re not mine! They’re for Maria’s baby.</p>182    <p class="line"><span class="speaker">Victor:</span> Fine, let’s see if her example encourages you. This house needs a child.</p>183    <p class="line"><span class="speaker">Yerma:</span> <em>(With anguish)</em> Needs one!</p>184    <p class="line"><span class="speaker">Victor:</span> You can do it. Tell your husband to think about work less. He wants to make money and he will, but who will he leave it to when he dies? I’m going out to my sheep. Tell Juan to take the two he brought from me. And about the other thing…try harder! <em>(He exits, smiling)</em></p>185    <p class="line"><span class="speaker">Yerma:</span> <em>(Passionately)</em> That’s it: try harder!</p>186 187    <p class="stage">(Yerma who has risen, in thought, goes to the place where Victor stood and breathes deeply as if she were breathing mountain air. Then she goes to the other side of the room as if seeking something, and then sits down and takes up the sewing again. She begins to sew and remains there with fixed gaze)</p>188 189    <p class="centered">Curtain</p>190  </div>191 192  <!-- Bottom info bar -->193  <div class="bottom-bar">194    <div class="left">195      <span class="chip">100</span>196      <span style="margin-left:16px; font-weight:800; font-size:40px;">10:32</span>197    </div>198    <div class="center">Act I Scene 1</div>199    <div class="right">13/63</div>200  </div>201 202</div>203</body>204</html>