GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Ebook Reader UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Georgia, 'Times New Roman', serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #FFFFFF;19  }20 21  /* Status Bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 40px;32    color: #777;33    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;34    font-size: 40px;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 20px;40  }41  .status-right {42    display: flex;43    align-items: center;44    gap: 28px;45  }46  .avatar-icon {47    width: 44px;48    height: 44px;49    border-radius: 50%;50    background: #e0e0e0;51    border: 1px solid #bdbdbd;52    display: flex;53    align-items: center;54    justify-content: center;55  }56  .bookmark {57    position: absolute;58    top: 220px;59    right: 30px;60    width: 44px;61    height: 120px;62    background: #BDBDBD;63    border-radius: 8px 8px 0 0;64    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);65  }66 67  /* Reading Content */68  .content {69    position: absolute;70    top: 140px;71    left: 60px;72    right: 60px;73    bottom: 140px;74    color: #111;75    font-size: 64px;76    line-height: 92px;77  }78  .para {79    margin: 0 0 36px 0;80  }81  .stage {82    font-style: italic;83    text-align: center;84    color: #222;85    margin: 70px 0;86  }87  .character {88    font-weight: bold;89    letter-spacing: 1px;90    margin-top: 40px;91    margin-bottom: 8px;92  }93 94  /* Footer Bar */95  .footer {96    position: absolute;97    bottom: 0;98    left: 0;99    width: 1080px;100    height: 120px;101    background: #EAEAEA;102    border-top: 1px solid #D0D0D0;103    display: flex;104    align-items: center;105    justify-content: space-between;106    padding: 0 40px;107    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;108    color: #333;109  }110  .footer-left {111    display: flex;112    align-items: center;113    gap: 20px;114    font-size: 36px;115  }116  .page-pill {117    background: #DCDCDC;118    border: 1px solid #BDBDBD;119    border-radius: 12px;120    padding: 10px 16px;121    font-weight: 600;122    font-size: 32px;123  }124  .footer-center {125    font-size: 34px;126    color: #555;127  }128  .footer-right {129    font-size: 34px;130    color: #222;131    font-weight: 600;132  }133 134  /* Simple Icons */135  .icon {136    width: 40px;137    height: 40px;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status Bar -->145  <div class="status-bar">146    <div class="status-left">147      <div>1:00</div>148      <div class="avatar-icon">149        <!-- simple face -->150        <svg class="icon" viewBox="0 0 24 24">151          <circle cx="12" cy="12" r="10" fill="#cfcfcf"/>152          <circle cx="9" cy="10" r="1.5" fill="#888"/>153          <circle cx="15" cy="10" r="1.5" fill="#888"/>154          <path d="M7 15c2.5 2 7.5 2 10 0" stroke="#888" stroke-width="1.5" fill="none" stroke-linecap="round"/>155        </svg>156      </div>157    </div>158    <div class="status-right">159      <!-- Wi-Fi -->160      <svg class="icon" viewBox="0 0 24 24">161        <path d="M2 8c5-4 15-4 20 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>162        <path d="M5 12c3-3 11-3 14 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>163        <path d="M8 16c2-2 6-2 8 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>164        <circle cx="12" cy="19" r="1.5" fill="#777"/>165      </svg>166      <!-- Battery -->167      <svg class="icon" viewBox="0 0 28 24">168        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#777" stroke-width="2"/>169        <rect x="4" y="8" width="12" height="8" fill="#777"/>170        <rect x="22" y="10" width="4" height="4" fill="#777"/>171      </svg>172    </div>173  </div>174 175  <!-- Bookmark Ribbon -->176  <div class="bookmark"></div>177 178  <!-- Reading Content -->179  <div class="content">180    <p class="para">afternoon;</p>181    <p class="para">To know our farther pleasure<br>in this case,</p>182    <p class="para">To old Free-town, our<br>common judgement-place.</p>183    <p class="para">Once more, on pain of death,<br>all men depart.</p>184 185    <p class="stage">[Exeunt Prince and Attendants; Capulet, Lady<br>Capulet, Tybalt, Citizens and<br>Servants.]</p>186 187    <p class="character">MONTAGUE.</p>188    <p class="para">Who set this ancient quarrel<br>new abroach?</p>189    <p class="para">Speak, nephew, were you by<br>when it began?</p>190 191    <p class="character">BENVOLIO.</p>192    <p class="para">Here were the servants of<br>your adversary</p>193    <p class="para">And yours, close fighting ere I</p>194  </div>195 196  <!-- Footer Bar -->197  <div class="footer">198    <div class="footer-left">199      <span class="page-pill">100</span>200      <span>13:00</span>201    </div>202    <div class="footer-center">SCENE I. A public place. (13/30)</div>203    <div class="footer-right">6.6%</div>204  </div>205 206</div>207</body>208</html>