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>Display Settings - Dark Theme</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #000000;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 110px;29    background: #0d0d0d;30    color: #ffffff;31  }32  .status-content {33    position: absolute;34    top: 0;35    left: 0;36    height: 110px;37    width: 100%;38  }39  .status-time {40    position: absolute;41    left: 40px;42    top: 50%;43    transform: translateY(-50%);44    font-size: 42px;45    font-weight: 500;46    letter-spacing: 0.4px;47  }48  .status-icons {49    position: absolute;50    right: 40px;51    top: 50%;52    transform: translateY(-50%);53    display: flex;54    align-items: center;55    gap: 26px;56  }57  .status-icons svg {58    display: block;59  }60 61  /* App bar */62  .app-bar {63    position: absolute;64    top: 110px;65    left: 0;66    width: 1080px;67    height: 160px;68    background: #1e1e1e;69    color: #ffffff;70    display: flex;71    align-items: center;72  }73  .back-btn {74    width: 96px;75    height: 96px;76    margin-left: 24px;77    display: flex;78    align-items: center;79    justify-content: center;80  }81  .title {82    font-size: 64px;83    font-weight: 600;84    margin-left: 18px;85    letter-spacing: 0.5px;86  }87 88  /* Content */89  .content {90    position: absolute;91    top: 270px;92    left: 0;93    width: 100%;94    padding: 0 40px;95    color: #ffffff;96  }97  .section-title {98    color: #9e9e9e;99    font-size: 36px;100    letter-spacing: 2px;101    font-weight: 700;102    margin: 40px 0 10px 20px;103    text-transform: uppercase;104  }105  .option {106    height: 150px;107    display: flex;108    align-items: center;109    justify-content: space-between;110    padding: 0 20px 0 20px;111  }112  .option .label {113    font-size: 54px;114    font-weight: 400;115    color: #f5f5f5;116  }117  .radio {118    width: 56px;119    height: 56px;120    border-radius: 50%;121    border: 6px solid #8e8e8e;122    position: relative;123    box-sizing: border-box;124  }125  .radio.selected {126    border-color: #ff7a32;127  }128  .radio.selected::after {129    content: "";130    position: absolute;131    top: 50%;132    left: 50%;133    width: 20px;134    height: 20px;135    background: #ff7a32;136    border-radius: 50%;137    transform: translate(-50%, -50%);138  }139 140  /* Bottom gesture bar */141  .gesture-bar {142    position: absolute;143    bottom: 36px;144    left: 50%;145    transform: translateX(-50%);146    width: 380px;147    height: 16px;148    background: #ffffff;149    opacity: 0.85;150    border-radius: 10px;151  }152</style>153</head>154<body>155<div id="render-target">156  <!-- Status bar -->157  <div class="status-bar">158    <div class="status-content">159      <div class="status-time">3:44</div>160      <div class="status-icons">161        <!-- Wi-Fi icon -->162        <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">163          <path d="M12 18.5l1.7-1.7a2.4 2.4 0 00-3.4 0L12 18.5zm-4.9-4.9l1.6 1.6a5.6 5.6 0 017.6 0l1.6-1.6a7.8 7.8 0 00-10.8 0zM2 8.9l1.6 1.6a12 12 0 0116.7 0L22 8.9A14.2 14.2 0 002 8.9z"/>164        </svg>165        <!-- Battery icon -->166        <svg width="48" height="48" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">167          <rect x="3" y="6" width="16" height="12" rx="2" ry="2" fill="#ffffff"/>168          <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>169          <rect x="5" y="8" width="12" height="8" fill="#000000"/>170          <rect x="5" y="8" width="9" height="8" fill="#ffffff"/>171        </svg>172      </div>173    </div>174  </div>175 176  <!-- App bar -->177  <div class="app-bar">178    <div class="back-btn">179      <svg width="54" height="54" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">180        <path d="M15.5 19l-7-7 7-7" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>181      </svg>182    </div>183    <div class="title">Display</div>184  </div>185 186  <!-- Content -->187  <div class="content">188    <div class="section-title">Dark Theme</div>189 190    <div class="option">191      <div class="label">Use System Default</div>192      <div class="radio selected"></div>193    </div>194 195    <div class="option">196      <div class="label">Light</div>197      <div class="radio"></div>198    </div>199 200    <div class="option">201      <div class="label">Dark</div>202      <div class="radio"></div>203    </div>204  </div>205 206  <!-- Gesture bar -->207  <div class="gesture-bar"></div>208</div>209</body>210</html>