GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Display Settings UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #000000;14    color: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 96px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #FFFFFF;30    font-size: 42px;31    letter-spacing: 0.5px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .icon {39    width: 40px;40    height: 40px;41  }42 43  /* Header */44  .header {45    position: absolute;46    top: 96px;47    left: 0;48    width: 100%;49    height: 180px;50    display: flex;51    align-items: center;52    box-sizing: border-box;53    padding: 0 36px;54  }55  .back-btn {56    width: 72px;57    height: 72px;58    display: flex;59    align-items: center;60    justify-content: center;61    margin-right: 12px;62  }63  .title {64    font-weight: 700;65    font-size: 84px;66    letter-spacing: 0.5px;67  }68 69  /* Options list */70  .options {71    position: absolute;72    top: 330px;73    left: 0;74    width: 100%;75    padding: 0 36px;76    box-sizing: border-box;77  }78  .option {79    display: flex;80    align-items: center;81    justify-content: space-between;82    padding: 52px 12px;83    font-size: 64px;84    border-bottom: 0px solid #1f1f1f;85  }86  .option + .option { margin-top: 8px; }87 88  /* Radio visuals */89  .radio {90    width: 64px;91    height: 64px;92    border-radius: 50%;93    box-sizing: border-box;94    border: 6px solid #DADADA;95    background: transparent;96    position: relative;97    margin-right: 12px;98  }99  .radio.selected {100    border-color: #B2DFDB;101  }102  .radio.selected::after {103    content: "";104    position: absolute;105    left: 50%;106    top: 50%;107    width: 28px;108    height: 28px;109    transform: translate(-50%, -50%);110    background: #B2DFDB;111    border-radius: 50%;112  }113 114  /* Gesture bar */115  .gesture-bar {116    position: absolute;117    bottom: 60px;118    left: 50%;119    width: 500px;120    height: 16px;121    background: #EDEDED;122    border-radius: 16px;123    transform: translateX(-50%);124    opacity: 0.9;125  }126</style>127</head>128<body>129<div id="render-target">130 131  <!-- Status Bar -->132  <div class="status-bar">133    <div class="status-left">6:24</div>134    <div class="status-right">135      <!-- Simple Wi-Fi icon -->136      <svg class="icon" viewBox="0 0 24 24" fill="none">137        <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>138        <path d="M5 11c3.5-3 10.5-3 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>139        <path d="M8 14c2-2 6-2 8 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>140        <circle cx="12" cy="18" r="2" fill="#ffffff"/>141      </svg>142      <!-- Battery icon -->143      <svg class="icon" viewBox="0 0 24 24" fill="none">144        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>145        <rect x="4" y="8" width="14" height="8" fill="#ffffff"/>146        <rect x="20" y="10" width="2.5" height="6" rx="1" fill="#ffffff"/>147      </svg>148    </div>149  </div>150 151  <!-- Header with back arrow and title -->152  <div class="header">153    <div class="back-btn">154      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">155        <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>156      </svg>157    </div>158    <div class="title">Display</div>159  </div>160 161  <!-- Options -->162  <div class="options">163    <div class="option">164      <div class="label">Use System Default</div>165      <div class="radio"></div>166    </div>167    <div class="option">168      <div class="label">Light</div>169      <div class="radio"></div>170    </div>171    <div class="option">172      <div class="label">Dark</div>173      <div class="radio selected"></div>174    </div>175  </div>176 177  <!-- Bottom gesture bar -->178  <div class="gesture-bar"></div>179 180</div>181</body>182</html>