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 App - Font Settings</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    box-sizing: border-box;16    color: #EDEDED;17    font-family: Georgia, "Times New Roman", serif;18  }19 20  /* Reading content */21  .reading-area {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 1500px;27    padding: 70px 90px 120px 90px;28    box-sizing: border-box;29  }30  .reading-area p {31    font-size: 46px;32    line-height: 66px;33    margin: 0 0 48px 0;34    text-shadow: 0 0 0 rgba(0,0,0,0); /* crisp rendering */35  }36  .reading-area p.indent::first-letter { margin-left: 36px; }37  .reading-area em { font-style: italic; }38  .reading-area .time {39    font-size: 50px;40    color: #FFFFFF;41    font-weight: 700;42    letter-spacing: 0.5px;43  }44  .reading-area .pm {45    font-size: 34px;46    font-weight: 700;47    vertical-align: top;48    margin-left: 6px;49  }50 51  /* Settings panel at bottom */52  .settings-panel {53    position: absolute;54    bottom: 0;55    left: 0;56    width: 1080px;57    height: 900px;58    background: #2B2D31;59    color: #CFCFCF;60    box-shadow: 0 -8px 24px rgba(0,0,0,0.6);61  }62  .settings-panel .notch {63    position: absolute;64    top: -26px;65    left: 50%;66    transform: translateX(-50%);67    width: 120px;68    height: 12px;69    border-radius: 8px;70    background: #7A7A7A;71    opacity: 0.9;72  }73  .settings-content {74    padding: 40px 48px;75    box-sizing: border-box;76  }77 78  /* Tabs */79  .tabs {80    display: flex;81    align-items: center;82    gap: 54px;83    border-bottom: 1px solid rgba(255,255,255,0.08);84    padding-bottom: 22px;85  }86  .tab {87    font-size: 42px;88    color: #AAB0B7;89  }90  .tab.active {91    color: #56A4DA;92    position: relative;93  }94  .tab.active::after {95    content: "";96    position: absolute;97    left: 0;98    bottom: -24px;99    width: 100%;100    height: 6px;101    background: #56A4DA;102    border-radius: 3px;103  }104 105  /* Font cards row */106  .font-row {107    display: flex;108    justify-content: space-between;109    margin-top: 32px;110    margin-bottom: 36px;111    padding: 12px 0;112  }113  .font-card {114    width: 228px;115    text-align: center;116  }117  .font-card .sample {118    font-size: 120px;119    line-height: 1;120    color: #FFFFFF;121    margin-bottom: 18px;122  }123  .font-card .label {124    font-size: 36px;125    color: #B8BEC5;126  }127  .font-card.active .label {128    color: #56A4DA;129  }130 131  /* Divider line */132  .divider {133    height: 1px;134    background: rgba(255,255,255,0.08);135    margin: 28px 0 24px;136  }137 138  /* Slider common */139  .slider-row {140    display: flex;141    align-items: center;142    gap: 28px;143    margin-top: 22px;144  }145  .slider-row .label-small {146    font-size: 42px;147    color: #C9CDD2;148  }149  .slider-row .label-large {150    font-size: 64px;151    color: #C9CDD2;152    font-weight: 600;153  }154  .slider {155    flex: 1;156    height: 16px;157    position: relative;158    border-radius: 8px;159    background: linear-gradient(to right, #56A4DA 0%, #56A4DA 28%, #46515A 28%, #46515A 100%);160    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);161  }162  .slider .thumb {163    position: absolute;164    top: 50%;165    left: 28%;166    transform: translate(-50%, -50%);167    width: 28px;168    height: 28px;169    background: #56A4DA;170    border-radius: 50%;171    box-shadow: 0 0 0 4px rgba(86,164,218,0.25);172  }173  .slider .ticks {174    position: absolute;175    left: 0;176    right: 0;177    top: 50%;178    transform: translateY(-50%);179    height: 16px;180    background-image: radial-gradient(#5E6972 1px, transparent 1px);181    background-size: 64px 16px;182    background-repeat: repeat-x;183    opacity: 0.5;184    pointer-events: none;185  }186 187  /* Brightness row */188  .brightness-row {189    display: flex;190    align-items: center;191    gap: 26px;192    margin-top: 120px;193  }194  .sun {195    width: 46px;196    height: 46px;197  }198  .sun svg { width: 100%; height: 100%; }199  .slider.brightness {200    flex: 1;201    height: 14px;202    background: linear-gradient(to right, #56A4DA 0%, #56A4DA 80%, #46515A 80%, #46515A 100%);203  }204  .slider.brightness .thumb {205    left: 80%;206    width: 26px;207    height: 26px;208  }209 210  .auto-box {211    display: flex;212    align-items: center;213    gap: 14px;214    margin-left: 10px;215  }216  .auto-box .auto-label {217    font-size: 40px;218    color: #C9CDD2;219  }220  .checkbox {221    width: 44px;222    height: 44px;223    border: 2px solid #6E7780;224    border-radius: 6px;225    position: relative;226    background: rgba(255,255,255,0.02);227  }228  .checkbox .check {229    position: absolute;230    inset: 6px;231    background: #56A4DA;232    clip-path: polygon(18% 52%, 30% 64%, 47% 41%, 63% 62%, 86% 34%, 92% 41%, 63% 78%, 44% 57%, 31% 72%, 11% 54%);233  }234</style>235</head>236<body>237<div id="render-target">238 239  <div class="reading-area">240    <p class="indent">241      for a job as an office administrator. He tells me the woman specifically wants to work for Donald Trump, and I say she’s crazy but I’ll be happy to see her.242    </p>243    <p class="indent">244      We talk a little about the theater business, and I tell Gerry I’m about to take my kids to see <em>Cats</em>, one of his shows, for a second time. He asks if I’m getting my tickets through his office. I tell him that I don’t like to do that sort of thing. “Don’t be silly,” he says. “We have a woman here whose job it is to handle tickets for our friends. Here’s her number. Don’t hesitate to call.”245    </p>246    <p class="indent">247      It’s a nice gesture from a very nice guy.248    </p>249    <p>250      <span class="time">1:15</span><span class="pm">p.m.</span> Anthony Gliedman stops by to discuss the Wollman Rink project. Gliedman was housing commissioner under Ed Koch. At the time we fought a lot, and even though I ended251    </p>252  </div>253 254  <div class="settings-panel">255    <div class="notch"></div>256    <div class="settings-content">257      <div class="tabs">258        <div class="tab active">Font</div>259        <div class="tab">Layout</div>260        <div class="tab">Themes</div>261        <div class="tab">More</div>262      </div>263 264      <div class="font-row">265        <div class="font-card active">266          <div class="sample">Aa</div>267          <div class="label">Bookerly</div>268        </div>269        <div class="font-card">270          <div class="sample">Aa</div>271          <div class="label">Caecilia</div>272        </div>273        <div class="font-card">274          <div class="sample">Aa</div>275          <div class="label">Droid Serif</div>276        </div>277        <div class="font-card">278          <div class="sample">Aa</div>279          <div class="label">Georgia</div>280        </div>281      </div>282 283      <div class="divider"></div>284 285      <div class="slider-row">286        <div class="label-small">A</div>287        <div class="slider">288          <div class="ticks"></div>289          <div class="thumb"></div>290        </div>291        <div class="label-large">A</div>292      </div>293 294      <div class="brightness-row">295        <div class="sun">296          <svg viewBox="0 0 24 24">297            <circle cx="12" cy="12" r="4" fill="#C9CDD2"></circle>298            <g stroke="#C9CDD2" stroke-width="2" stroke-linecap="round">299              <line x1="12" y1="1" x2="12" y2="5"></line>300              <line x1="12" y1="19" x2="12" y2="23"></line>301              <line x1="1" y1="12" x2="5" y2="12"></line>302              <line x1="19" y1="12" x2="23" y2="12"></line>303              <line x1="4" y1="4" x2="6.5" y2="6.5"></line>304              <line x1="17.5" y1="17.5" x2="20" y2="20"></line>305              <line x1="4" y1="20" x2="6.5" y2="17.5"></line>306              <line x1="17.5" y1="6.5" x2="20" y2="4"></line>307            </g>308          </svg>309        </div>310 311        <div class="slider brightness">312          <div class="thumb"></div>313        </div>314 315        <div class="sun">316          <svg viewBox="0 0 24 24">317            <circle cx="12" cy="12" r="6" fill="#FFFFFF"></circle>318            <g stroke="#FFFFFF" stroke-width="2" stroke-linecap="round">319              <line x1="12" y1="0.8" x2="12" y2="4.6"></line>320              <line x1="12" y1="19.4" x2="12" y2="23.2"></line>321              <line x1="0.8" y1="12" x2="4.6" y2="12"></line>322              <line x1="19.4" y1="12" x2="23.2" y2="12"></line>323              <line x1="3.4" y1="3.4" x2="6.4" y2="6.4"></line>324              <line x1="17.6" y1="17.6" x2="20.6" y2="20.6"></line>325              <line x1="3.4" y1="20.6" x2="6.4" y2="17.6"></line>326              <line x1="17.6" y1="6.4" x2="20.6" y2="3.4"></line>327            </g>328          </svg>329        </div>330 331        <div class="auto-box">332          <div class="checkbox"><div class="check"></div></div>333          <div class="auto-label">Auto</div>334        </div>335      </div>336    </div>337  </div>338 339</div>340</body>341</html>