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>UI Rendering</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Georgia", serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #000000;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 24px; left: 0; right: 0; height: 60px;17    padding: 0 32px; color: #FFFFFF; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;18    display: flex; align-items: center; justify-content: space-between;19  }20  .status-left { font-size: 36px; font-weight: 600; letter-spacing: 0.5px; }21  .status-right { display: flex; gap: 22px; align-items: center; }22  .status-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.95; }23  .status-icon svg { width: 100%; height: 100%; fill: #ffffff; }24 25  /* Reading content behind modal */26  .reading-content {27    position: absolute; top: 160px; left: 64px; right: 64px; bottom: 160px;28    color: #BDBDBD; line-height: 1.55; font-size: 42px;29  }30  .reading-content p { margin: 24px 0; }31  .reading-content .time { color: #E0E0E0; font-weight: 700; }32 33  /* Modal */34  .lighting-modal {35    position: absolute; left: 120px; top: 260px; width: 840px;36    background: #33383D; color: #EDEFF2;37    border-radius: 28px; box-shadow: 0 24px 90px rgba(0,0,0,0.65);38    overflow: hidden;39  }40  .modal-header {41    display: flex; position: relative; padding: 26px 28px 22px 28px; color: #C9D1D9;42    font-family: "Inter", system-ui, sans-serif; font-size: 34px;43    border-bottom: 1px solid rgba(255,255,255,0.08);44  }45  .tab { flex: 1; text-align: center; opacity: 0.8; }46  .tab.active { color: #8EB7FF; font-weight: 600; opacity: 1; }47  .tab-indicator {48    position: absolute; right: 28px; bottom: 0; height: 5px; width: 160px; background: #4EA2FF; border-radius: 3px;49  }50  .modal-body { padding: 24px 32px 32px 32px; font-family: "Inter", system-ui, sans-serif; }51  .section { margin-top: 18px; }52  .section-title {53    font-size: 32px; color: #EDEFF2; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between;54  }55  /* Toggle */56  .toggle {57    width: 98px; height: 56px; background: #516070; border-radius: 30px; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);58  }59  .toggle.on { background: #4EA2FF; }60  .toggle .knob {61    position: absolute; top: 6px; left: 6px; width: 44px; height: 44px; background: #E9F3FF; border-radius: 50%;62    transition: left 0.2s;63  }64  .toggle.on .knob { left: 48px; background: #FFFFFF; }65 66  /* Slider */67  .slider { height: 14px; background: #626A73; border-radius: 12px; position: relative; }68  .slider .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; background: #4EA2FF; border-radius: 12px; }69  .slider .thumb {70    position: absolute; top: 50%; left: 42%; transform: translate(-50%, -50%);71    width: 32px; height: 32px; background: #4EA2FF; border-radius: 50%; box-shadow: 0 0 0 4px rgba(78,162,255,0.25);72  }73 74  /* Theme swatches */75  .themes { display: flex; gap: 22px; margin-top: 8px; }76  .swatch {77    width: 220px; height: 140px; border-radius: 16px; border: 2px solid rgba(255,255,255,0.15);78    display: flex; align-items: center; justify-content: center; font-size: 28px; color: rgba(0,0,0,0.6);79  }80  .swatch.light { background: #FFFFFF; }81  .swatch.sepia { background: #E8DCC4; color: rgba(0,0,0,0.7); }82  .swatch.dark { background: #0F1114; border-color: rgba(255,255,255,0.25); color: #FFFFFF; position: relative; }83  .swatch.dark .check {84    position: absolute; right: 16px; bottom: 16px; width: 38px; height: 28px;85  }86  .swatch.dark .check svg { width: 100%; height: 100%; fill: #FFFFFF; }87 88  /* Info + label row */89  .label-with-info {90    display: flex; align-items: center; gap: 12px;91  }92  .info-icon {93    width: 38px; height: 38px; border-radius: 19px; background: rgba(255,255,255,0.08);94    display: inline-flex; align-items: center; justify-content: center;95  }96  .info-icon svg { width: 18px; height: 18px; fill: #C9D1D9; }97 98  /* Bottom gesture bar */99  .gesture {100    position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);101    width: 360px; height: 12px; background: #E0E0E0; border-radius: 8px; opacity: 0.85;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status bar -->109  <div class="status-bar">110    <div class="status-left">10:59</div>111    <div class="status-right">112      <span class="status-icon">113        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 3.67-2.66 6.71-6.16 7.39L12 22l-0.84-5.61A7.5 7.5 0 0 1 5 9a7 7 0 0 1 7-7z"/></svg>114      </span>115      <span class="status-icon">116        <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>117      </span>118      <span class="status-icon">119        <svg viewBox="0 0 24 24"><path d="M12 3c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9 4.03-9 9-9zm-1 13l6-6-1.41-1.41L11 12.17l-2.59-2.58L7 11l4 5z"/></svg>120      </span>121      <span class="status-icon">122        <svg viewBox="0 0 24 24"><path d="M2 12l6 6V6l-6 6zm8 6h12V6H10v12zm2-10h8v8h-8V8z"/></svg>123      </span>124      <span class="status-icon">125        <svg viewBox="0 0 24 24"><path d="M18.5 6A2.5 2.5 0 1 1 16 3.5 2.5 2.5 0 0 1 18.5 6zM3 11h12v2H3v-2zm14 8h3v-2h-3v2zm-2-6h5v-2h-5v2z"/></svg>126      </span>127      <span class="status-icon">128        <svg viewBox="0 0 24 24"><path d="M20 7H4v10h16V7zm2-2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2zM17 9h2v6h-2V9z"/></svg>129      </span>130    </div>131  </div>132 133  <!-- Reading content -->134  <div class="reading-content">135    <p>Tony has been working on the rebuilding project in Central Park. The schedule has been miserable for weeks and there’s a worry he won’t do the job right. A press conference is scheduled, and the last important meeting is set for the concrete pour.</p>136    <p>It doesn’t make sense to me, and yet people still show up. He says at least a dozen news organizations have RSVPd yes. So much for my news judgment.</p>137    <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.</p>138    <p>Nowadays, if your name is Donald Trump, everyone in the world seems to want to sue you.</p>139    <p><span class="time">3:00 p.m.</span> I ask my executive assistant to bring me lunch: a can of tomato juice. I rarely go out, because mostly, it’s a waste of time.</p>140  </div>141 142  <!-- Lighting settings modal -->143  <div class="lighting-modal">144    <div class="modal-header">145      <div class="tab">Text</div>146      <div class="tab active">Lighting</div>147      <div class="tab-indicator"></div>148    </div>149    <div class="modal-body">150      <div class="section">151        <div class="section-title">152          <span>Reading brightness</span>153          <div class="toggle on"><div class="knob"></div></div>154        </div>155        <div class="slider">156          <div class="fill"></div>157          <div class="thumb"></div>158        </div>159      </div>160 161      <div class="section" style="margin-top: 32px;">162        <div class="section-title">Viewing theme</div>163        <div class="themes">164          <div class="swatch light">A</div>165          <div class="swatch sepia">Aa</div>166          <div class="swatch dark">167            Aa168            <div class="check">169              <svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5 1.4-1.4L9 14.2 18.6 4.6 20 6z"/></svg>170            </div>171          </div>172        </div>173      </div>174 175      <div class="section" style="margin-top: 38px;">176        <div class="section-title">177          <span class="label-with-info">178            Reading Night Light179            <span class="info-icon">180              <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>181            </span>182          </span>183          <div class="toggle"><div class="knob"></div></div>184        </div>185      </div>186    </div>187  </div>188 189  <!-- Gesture handle -->190  <div class="gesture"></div>191</div>192</body>193</html>