GD-ML/AndroidCode
13.4k
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>Reader - Typography Panel</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #000000;15 font-family: Georgia, "Times New Roman", serif;16 color:#ECECEC;17 }18 19 /* Status bar */20 .status-bar {21 position:absolute;22 top:0; left:0; right:0;23 height:110px;24 padding:0 32px;25 display:flex; align-items:center; justify-content:space-between;26 color:#FFFFFF;27 }28 .status-left { font-size:40px; font-weight:600; }29 .status-right { display:flex; align-items:center; gap:24px; }30 .icon { width:42px; height:42px; fill:#FFFFFF; opacity:0.95; }31 32 /* Reading area */33 .article {34 position:absolute;35 top:140px; left:70px; right:70px; bottom:0;36 font-size:46px; line-height:1.6; color:#F0F0F0;37 }38 .article p { margin:22px 0; }39 .time {40 font-weight:700;41 letter-spacing:1px;42 }43 44 /* Modal card (Typography panel) */45 .panel {46 position:absolute;47 left:50%;48 top:420px;49 transform:translateX(-50%);50 width:860px;51 background:#2f3338;52 border-radius:28px;53 box-shadow:0 28px 70px rgba(0,0,0,0.65);54 color:#E8ECEF;55 }56 .tabs {57 display:flex;58 padding:28px 34px 0;59 border-bottom:1px solid #4a4f55;60 gap:48px;61 }62 .tab {63 position:relative;64 padding:20px 12px 26px;65 font-size:44px;66 color:#BFC5CB;67 }68 .tab.active { color:#FFFFFF; }69 .tab.active::after {70 content:"";71 position:absolute; left:12px; right:12px; bottom:-2px; height:6px;72 background:#4DB5FF; border-radius:3px;73 }74 75 .font-grid {76 display:flex;77 gap:34px;78 padding:34px;79 padding-bottom:16px;80 }81 .font-option { flex:1; display:flex; flex-direction:column; align-items:center; }82 .circle {83 width:170px; height:170px; border-radius:50%;84 background:#42474e;85 border:4px solid #5b6168;86 display:flex; align-items:center; justify-content:center;87 color:#D8DEE4; font-size:96px; font-weight:700;88 }89 .font-option.active .circle {90 background:#2DA8FF; border-color:#2DA8FF; color:#FFFFFF;91 }92 .font-label { margin-top:18px; font-size:36px; color:#CCD3DA; }93 94 .controls {95 display:flex;96 gap:32px;97 padding:24px 34px;98 }99 .control-card {100 flex:1;101 background:#393e44;102 border:1px solid #595f66;103 border-radius:18px;104 padding:22px 26px;105 display:flex;106 align-items:center;107 justify-content:space-between;108 color:#DDE3E9;109 }110 .control-left {111 display:flex; align-items:center; gap:18px;112 font-weight:700;113 }114 .bigT { font-size:64px; }115 .percent { font-size:38px; opacity:0.9; }116 117 .align-ico { width:64px; height:64px; }118 .align-ico .bar { fill:#DDE3E9; opacity:0.9; }119 120 .panel-footer {121 padding:22px 34px 34px;122 display:flex; align-items:center; justify-content:space-between;123 color:#D3D9DF; font-size:40px;124 }125 .menu-group { display:flex; align-items:center; gap:18px; }126 .menu-ico { width:48px; height:48px; }127 .caret {128 width:0; height:0;129 border-left:14px solid transparent;130 border-right:14px solid transparent;131 border-top:18px solid #D3D9DF;132 }133 134 /* Bottom gesture bar */135 .gesture {136 position:absolute; left:50%; transform:translateX(-50%);137 bottom:24px; width:280px; height:12px; border-radius:8px; background:#BDBDBD; opacity:0.8;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">10:58</div>147 <div class="status-right">148 <!-- small dot -->149 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>150 <!-- Wi‑Fi -->151 <svg class="icon" viewBox="0 0 24 24">152 <path d="M12 19c.7 0 1.3.6 1.3 1.3S12.7 22 12 22s-1.3-.6-1.3-1.3S11.3 19 12 19z"/>153 <path d="M2.5 9.5A14 14 0 0 1 21.5 9.5l-1.9 1.9A11 11 0 0 0 4.4 11.4L2.5 9.5z"/>154 <path d="M6 13a9 9 0 0 1 12 0l-1.8 1.8a6.6 6.6 0 0 0-8.4 0L6 13z"/>155 <path d="M9.6 16.6a4.8 4.8 0 0 1 4.8 0L12 19l-2.4-2.4z"/>156 </svg>157 <!-- Battery -->158 <svg class="icon" viewBox="0 0 24 24">159 <rect x="2" y="7" width="18" height="10" rx="2" ry="2"/>160 <rect x="20" y="10" width="2" height="4"/>161 </svg>162 </div>163 </div>164 165 <!-- Reading content -->166 <div class="article">167 <p>Tony has been rebuilding Central Park miserably for years and we do the job on schedule, and at the press conference he doesn’t show up. He’s the last important organization in the concrete. It doesn’t matter to me, and I show up. He is the organization in my news judgment.</p>168 169 <p><span class="time">2:00 p.m.</span> I get deposed in a lawsuit we’ve brought against a contractor on Trump Tower. Halfway into the job we had to fire the company for total incompetence, and we’re suing for damages. I hate lawsuits and depositions, but the fact is that if you’re right, you’ve got to take a stand, or people will walk all over you. In any case, there’s no way I could avoid depositions, even if I never brought a lawsuit myself. Nowadays, if your name is Donald Trump, everyone in the world seems to want to sue you.</p>170 171 <p><span class="time">3:00 p.m.</span> I ask Norma Foerderer, my executive assistant and the person who keeps my life organized, to bring me lunch: a can of tomato juice. I rarely go out, because mostly, it’s a waste of time.</p>172 </div>173 174 <!-- Typography panel -->175 <div class="panel">176 <div class="tabs">177 <div class="tab active">Text</div>178 <div class="tab">Lighting</div>179 </div>180 181 <div class="font-grid">182 <div class="font-option active">183 <div class="circle">A</div>184 <div class="font-label">Original</div>185 </div>186 <div class="font-option">187 <div class="circle" style="font-family:Arial, Helvetica, sans-serif;">A</div>188 <div class="font-label">Sans</div>189 </div>190 <div class="font-option">191 <div class="circle" style="font-family: 'Times New Roman', serif;">A</div>192 <div class="font-label">Literata</div>193 </div>194 <div class="font-option">195 <div class="circle" style="font-family: 'Merriweather', serif;">A</div>196 <div class="font-label">Merri...</div>197 </div>198 </div>199 200 <div class="controls">201 <div class="control-card">202 <div class="control-left">203 <div class="bigT">T</div>204 </div>205 <div class="percent">88%</div>206 </div>207 208 <div class="control-card">209 <svg class="align-ico" viewBox="0 0 64 64">210 <rect class="bar" x="6" y="10" width="34" height="6" rx="3"/>211 <rect class="bar" x="6" y="26" width="50" height="6" rx="3"/>212 <rect class="bar" x="6" y="42" width="40" height="6" rx="3"/>213 </svg>214 <div class="percent">100%</div>215 </div>216 </div>217 218 <div class="controls" style="padding-top:4px;">219 <div class="control-card">220 <div class="control-left">221 <svg class="align-ico" viewBox="0 0 64 64">222 <rect class="bar" x="6" y="10" width="50" height="6" rx="3"/>223 <rect class="bar" x="6" y="26" width="34" height="6" rx="3"/>224 <rect class="bar" x="6" y="42" width="50" height="6" rx="3"/>225 </svg>226 </div>227 <div class="percent">T</div>228 </div>229 230 <div class="control-card">231 <div class="control-left">232 <div class="bigT">T</div>233 </div>234 <div class="percent">T</div>235 </div>236 </div>237 238 <div class="panel-footer">239 <div class="menu-group">240 <svg class="menu-ico" viewBox="0 0 24 24" fill="#D3D9DF">241 <rect x="3" y="5" width="18" height="2"/><rect x="3" y="11" width="18" height="2"/><rect x="3" y="17" width="14" height="2"/>242 </svg>243 <span>Default</span>244 </div>245 <div class="caret"></div>246 </div>247 </div>248 249 <!-- Gesture bar -->250 <div class="gesture"></div>251</div>252</body>253</html>