GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Reader UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8 9  /* Root container */10  #render-target {11    width: 1080px;12    height: 2400px;13    position: relative;14    overflow: hidden;15    background:16      radial-gradient(transparent 60%, rgba(0,0,0,0.35) 100%),17      repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 4px),18      repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 4px);19    background-color: #2b2b2b;20    border-radius: 24px;21    box-shadow: 0 20px 50px rgba(0,0,0,0.5);22    font-family: Georgia, "Times New Roman", serif;23    color: #e6e6e6;24  }25 26  /* Status bar */27  .status-bar {28    position: absolute;29    top: 0;30    left: 0;31    width: 100%;32    height: 110px;33    padding: 26px 36px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    color: #f1f1f1;38    font-family: Arial, Helvetica, sans-serif;39    font-size: 38px;40    letter-spacing: 0.5px;41  }42  .status-left, .status-right {43    display: flex;44    align-items: center;45    gap: 22px;46  }47  .status-icon svg { display: block; }48 49  /* Bookmark strap */50  .bookmark {51    position: absolute;52    right: 36px;53    top: 220px;54    width: 42px;55    height: 132px;56    background: #6b6b6b;57    border-radius: 8px 8px 4px 4px;58  }59  .bookmark-tip {60    position: absolute;61    right: 36px;62    top: 352px;63    width: 0; height: 0;64    border-left: 21px solid transparent;65    border-right: 21px solid transparent;66    border-top: 24px solid #6b6b6b;67  }68 69  /* Reading content */70  .content {71    position: absolute;72    left: 80px;73    right: 80px;74    top: 200px;75    padding-bottom: 180px;76    line-height: 1.8;77  }78  .title {79    text-align: center;80    font-weight: 700;81    font-size: 72px;82    margin: 120px 0 34px;83    color: #eaeaea;84  }85  .subtitle {86    text-align: center;87    font-style: italic;88    font-size: 40px;89    color: #cfcfcf;90    margin-bottom: 80px;91  }92  .speaker {93    font-weight: 700;94    letter-spacing: 1px;95    font-size: 42px;96    margin-top: 26px;97    color: #f0f0f0;98  }99  .line {100    font-size: 42px;101    color: #dcdcdc;102    margin: 10px 0 18px;103  }104 105  /* Bottom reading status */106  .reading-status {107    position: absolute;108    left: 0;109    bottom: 0;110    width: 100%;111    height: 120px;112    background: rgba(0, 0, 0, 0.45);113    display: flex;114    align-items: center;115    justify-content: space-between;116    padding: 0 40px;117    font-family: Arial, Helvetica, sans-serif;118    color: #e6e6e6;119  }120  .rs-left, .rs-center, .rs-right {121    display: flex;122    align-items: center;123    gap: 22px;124  }125  .pill {126    border: 1px solid #6b6b6b;127    padding: 10px 18px;128    border-radius: 18px;129    font-size: 30px;130    background: rgba(255,255,255,0.05);131  }132  .rs-left span { font-size: 34px; }133  .rs-center { font-size: 34px; opacity: 0.95; }134  .rs-right { font-size: 34px; }135</style>136</head>137<body>138<div id="render-target">139 140  <!-- Top status bar -->141  <div class="status-bar">142    <div class="status-left">143      <div>2:50</div>144      <div class="status-icon">145        <!-- Cellular bars -->146        <svg width="38" height="38" viewBox="0 0 38 38">147          <rect x="2" y="22" width="6" height="12" fill="#ffffff" opacity="0.9"/>148          <rect x="12" y="18" width="6" height="16" fill="#ffffff" opacity="0.85"/>149          <rect x="22" y="14" width="6" height="20" fill="#ffffff" opacity="0.8"/>150          <rect x="32" y="10" width="6" height="24" fill="#ffffff" opacity="0.75"/>151        </svg>152      </div>153      <div class="status-icon">154        <!-- Cloud -->155        <svg width="44" height="38" viewBox="0 0 44 38">156          <path d="M10 24c0-6 6-10 12-8 2-4 6-6 10-4 5 2 8 8 5 12h-27z" fill="#ffffff" opacity="0.9"/>157        </svg>158      </div>159    </div>160    <div class="status-right">161      <div class="status-icon">162        <!-- WiFi -->163        <svg width="42" height="38" viewBox="0 0 42 38">164          <path d="M3 14 Q21 2 39 14" stroke="#ffffff" stroke-width="3" fill="none" opacity="0.9"/>165          <path d="M8 20 Q21 10 34 20" stroke="#ffffff" stroke-width="3" fill="none" opacity="0.85"/>166          <path d="M14 26 Q21 18 28 26" stroke="#ffffff" stroke-width="3" fill="none" opacity="0.8"/>167          <circle cx="21" cy="30" r="3" fill="#ffffff"/>168        </svg>169      </div>170      <div class="status-icon">171        <!-- Battery -->172        <svg width="56" height="38" viewBox="0 0 56 38">173          <rect x="2" y="8" width="46" height="22" rx="4" ry="4" stroke="#ffffff" stroke-width="3" fill="none"/>174          <rect x="6" y="12" width="28" height="14" fill="#ffffff"/>175          <rect x="50" y="14" width="6" height="10" rx="2" ry="2" fill="#ffffff"/>176        </svg>177      </div>178    </div>179