GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Display Settings - Dark Theme</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    position: relative;15    overflow: hidden;16    width: 1080px;17    height: 2400px;18    background: #FFFFFF;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 160px;28    background: #BDBDBD;29    color: #FFFFFF;30  }31  .status-time {32    position: absolute;33    left: 40px;34    top: 50%;35    transform: translateY(-50%);36    font-size: 46px;37    font-weight: 600;38    letter-spacing: 1px;39  }40  .status-icons {41    position: absolute;42    right: 36px;43    top: 50%;44    transform: translateY(-50%);45    display: flex;46    gap: 28px;47    align-items: center;48  }49 50  /* App bar */51  .app-bar {52    position: absolute;53    top: 160px;54    left: 0;55    width: 1080px;56    height: 160px;57    background: #FFFFFF;58    border-bottom: 1px solid #E5E5E5;59    display: flex;60    align-items: center;61    padding: 0 32px 0 24px;62  }63  .back-button {64    width: 72px;65    height: 72px;66    display: flex;67    align-items: center;68    justify-content: center;69    margin-left: 12px;70    margin-right: 16px;71  }72  .title {73    font-size: 56px;74    font-weight: 600;75    color: #222222;76  }77 78  /* Content */79  .content {80    position: absolute;81    top: 320px;82    left: 0;83    width: 100%;84    padding: 0 48px;85  }86  .section-title {87    font-size: 34px;88    font-weight: 700;89    color: #222222;90    letter-spacing: 2px;91    margin-top: 36px;92    margin-bottom: 60px;93  }94  .option {95    display: flex;96    align-items: center;97    justify-content: space-between;98    padding: 36px 0;99  }100  .option .label {101    font-size: 46px;102    color: #222222;103  }104  .divider {105    height: 1px;106    background: #F0F0F0;107    margin: 0;108    border: none;109  }110 111  /* Bottom gesture area */112  .bottom-edge {113    position: absolute;114    left: 0;115    bottom: 0;116    width: 1080px;117    height: 120px;118    border-top: 1px solid #EDEDED;119    background: #FFFFFF;120  }121  .gesture-pill {122    position: absolute;123    left: 50%;124    bottom: 28px;125    transform: translateX(-50%);126    width: 280px;127    height: 18px;128    background: #6E6E6E;129    border-radius: 9px;130  }131</style>132</head>133<body>134<div id="render-target">135 136  <!-- Status Bar -->137  <div class="status-bar">138    <div class="status-time">3:44</div>139    <div class="status-icons">140      <!-- Wi-Fi icon -->141      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">142        <path d="M2 8c5-4 15-4 20 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>143        <path d="M5 11c3.5-3 10.5-3 14 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>144        <path d="M8 14c2.5-2 7.5-2 10 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>145        <circle cx="12" cy="18" r="2" fill="#FFFFFF"/>146      </svg>147      <!-- Battery icon -->148      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">149        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#FFFFFF" stroke-width="2"/>150        <rect x="4" y="8" width="12" height="8" fill="#FFFFFF"/>151        <rect x="20" y="9" width="2" height="6" fill="#FFFFFF"/>152      </svg>153    </div>154  </div>155 156  <!-- App Bar -->157  <div class="app-bar">158    <div class="back-button">159      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">160        <path d="M15 6L9 12l6 6" stroke="#3C4043" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>161      </svg>162    </div>163    <div class="title">Display</div>164  </div>165 166  <!-- Content -->167  <div class="content">168    <div class="section-title">DARK THEME</div>169 170    <div class="option">171      <div class="label">Use System Default</div>172      <!-- Unselected radio -->173      <svg width="60" height="60" viewBox="0 0 24 24" fill="none">174        <circle cx="12" cy="12" r="9" stroke="#9E9E9E" stroke-width="2.5" fill="none"/>175      </svg>176    </div>177 178    <div class="option">179      <div class="label">Light</div>180      <!-- Selected radio -->181      <svg width="60" height="60" viewBox="0 0 24 24" fill="none">182        <circle cx="12" cy="12" r="9" stroke="#F26D00" stroke-width="2.8" fill="none"/>183        <circle cx="12" cy="12" r="4" fill="#F26D00"/>184      </svg>185    </div>186 187    <div class="option">188      <div class="label">Dark</div>189      <!-- Unselected radio -->190      <svg width="60" height="60" viewBox="0 0 24 24" fill="none">191        <circle cx="12" cy="12" r="9" stroke="#9E9E9E" stroke-width="2.5" fill="none"/>192      </svg>193    </div>194  </div>195 196  <!-- Bottom Gesture Area -->197  <div class="bottom-edge">198    <div class="gesture-pill"></div>199  </div>200 201</div>202</body>203</html>