GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Reading App - Lighting Dialog</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #bfbfbf;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 1080px; height: 120px;16    background: #000000;17    color: #ffffff; font-weight: 600; font-size: 42px;18    display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;19  }20  .status-icons { margin-left: 24px; display: flex; gap: 22px; align-items: center; }21  .status-dot { width: 26px; height: 26px; background: #ffffff; border-radius: 50%; opacity: 0.85; }22  .battery {23    width: 34px; height: 20px; border: 3px solid #fff; border-radius: 4px; position: relative;24  }25  .battery::after {26    content: ""; position: absolute; right: -8px; top: 5px;27    width: 6px; height: 10px; background: #fff; border-radius: 2px;28  }29 30  /* Reading content */31  .reading {32    position: absolute; left: 36px; right: 36px; top: 160px; bottom: 100px;33    color: #111; font-family: Georgia, "Times New Roman", serif;34    font-size: 58px; line-height: 92px;35  }36  .reading p { margin: 0 0 48px 0; }37 38  /* Modal card */39  .card {40    position: absolute; left: 108px; top: 210px; width: 864px;41    background: #ffffff; border-radius: 28px;42    box-shadow: 0 24px 60px rgba(0,0,0,0.35);43    overflow: hidden;44  }45  .tabs {46    display: flex; justify-content: space-between; padding: 34px 40px 0; font-size: 44px;47  }48  .tab { color: #6f6f6f; padding-bottom: 22px; }49  .tab.active { color: #2d73ff; border-bottom: 6px solid #2d73ff; }50 51  .section { padding: 12px 40px 30px; }52  .label { font-size: 44px; color: #333; margin: 26px 0 18px; }53 54  /* Slider row */55  .slider-row { display: flex; align-items: center; gap: 22px; }56  input[type=range] {57    -webkit-appearance: none; width: 640px; height: 10px; background: #d9d9d9; border-radius: 6px;58  }59  input[type=range]::-webkit-slider-thumb {60    -webkit-appearance: none; width: 40px; height: 40px; border-radius: 50%;61    background: #2d73ff; box-shadow: 0 2px 6px rgba(0,0,0,0.25); margin-top: -15px;62  }63  input[type=range]::-webkit-slider-runnable-track {64    height: 10px; background: linear-gradient(to right, #2d73ff 0%, #2d73ff 70%, #d9d9d9 70%, #d9d9d9 100%);65    border-radius: 6px;66  }67 68  /* Small toggle on right of brightness */69  .round-toggle {70    width: 56px; height: 56px; border-radius: 50%;71    background: #dfe8ff; border: 1px solid #9fb8ff;72  }73 74  /* Theme boxes */75  .themes { display: flex; gap: 26px; }76  .theme-box {77    width: 260px; height: 140px; border-radius: 18px; border: 2px solid #cfcfcf;78    display: flex; align-items: center; justify-content: center; position: relative;79    font-size: 38px; color: #666;80  }81  .theme-light { background: #ffffff; }82  .theme-beige { background: #e9dec5; }83  .theme-dark { background: #000000; color: #ccc; }84  .check {85    position: absolute; right: 20px; top: 20px;86    width: 44px; height: 44px; border-radius: 10px; border: 2px solid #a7a7a7;87    display: flex; align-items: center; justify-content: center; background: #fff;88  }89  .check svg { width: 26px; height: 26px; fill: #2d73ff; }90 91  /* Night light row */92  .night-row { display: flex; align-items: center; justify-content: space-between; margin-top: 36px; }93  .night-left { display: flex; align-items: center; gap: 20px; }94  .info {95    width: 44px; height: 44px; border-radius: 50%; border: 2px solid #9ea7b3;96    display: flex; align-items: center; justify-content: center; color: #7a8699; font-weight: 700;97    font-size: 28px;98  }99  .switch {100    width: 110px; height: 56px; background: #e6e6e6; border-radius: 30px; position: relative;101    border: 1px solid #cccccc;102  }103  .switch::after {104    content: ""; position: absolute; top: 6px; left: 6px; width: 44px; height: 44px;105    background: #ffffff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2);106  }107 108  /* Bottom gesture bar */109  .gesture-bar {110    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);111    width: 240px; height: 16px; background: #9e9e9e; border-radius: 16px; opacity: 0.8;112  }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status Bar -->119  <div class="status-bar">120    <div>10:17</div>121    <div class="status-icons">122      <div class="status-dot"></div>123      <div class="status-dot"></div>124      <div class="status-dot"></div>125      <div class="battery"></div>126    </div>127  </div>128 129  <!-- Reading content behind modal -->130  <div class="reading">131    <p>I was <strong>Alex P</strong> again around prefer</p>132    <p>On a night reading my friends were young and crushed-up – and they were gushing about how perfect Chumpy was, how special he was for being so in touch with his emotions and how good we were together.</p>133    <p>Chumpy had flown to Victoria after the party and was in Melbourne, preparing to head overseas for the snow season. I was complaining to my friends that he only had a couple of days left in the country when two of them made an executive decision. Maia and Mel hijacked my phone and booked me a flight to Melbourne for the next afternoon.</p>134  </div>135 136  <!-- Lighting modal card -->137  <div class="card">138    <div class="tabs">139      <div class="tab">Text</div>140      <div class="tab active">Lighting</div>141    </div>142 143    <div class="section">144      <div class="label">Reading brightness</div>145      <div class="slider-row">146        <input type="range" min="0" max="100" value="70">147        <div class="round-toggle"></div>148      </div>149 150      <div class="label" style="margin-top: 40px;">Viewing theme</div>151      <div class="themes">152        <div class="theme-box theme-light">153          <div class="check">154            <svg viewBox="0 0 24 24">155              <path d="M9 16.5l-4-4 2-2 2 2 6-6 2 2z"/>156            </svg>157          </div>158        </div>159        <div class="theme-box theme-beige"></div>160        <div class="theme-box theme-dark"></div>161      </div>162 163      <div class="night-row">164        <div class="night-left">165          <div class="label" style="margin: 0;">Reading Night Light</div>166          <div class="info">i</div>167        </div>168        <div class="switch"></div>169      </div>170    </div>171  </div>172 173  <!-- Gesture bar -->174  <div class="gesture-bar"></div>175 176</div>177</body>178</html>