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: Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff;12    color:#212121;13  }14 15  /* Status bar */16  .status-bar {17    position:absolute; top:0; left:0;18    width:100%; height:120px;19    display:flex; align-items:center;20    padding:0 40px;21    box-sizing:border-box;22    color:#333;23    font-size:40px; font-weight:500;24  }25  .status-icons {26    margin-left:auto;27    display:flex; gap:28px; align-items:center;28  }29  .status-icons svg { width:44px; height:44px; fill:#616161; }30 31  /* App bar */32  .app-bar {33    position:absolute; top:120px; left:0;34    width:100%; height:160px;35    display:flex; align-items:center;36    padding:0 32px;37    box-sizing:border-box;38    border-bottom:1px solid #e5e5e5;39    background:#fff;40  }41  .back-btn {42    width:96px; height:96px; display:flex; align-items:center; justify-content:center;43  }44  .back-btn svg { width:52px; height:52px; stroke:#212121; stroke-width:8; fill:none; }45  .title {46    position:absolute; left:0; right:0;47    text-align:center;48    font-size:72px; font-weight:700; letter-spacing:0.5px;49    color:#212121;50  }51 52  /* List items */53  .content {54    position:absolute; top:280px; left:0; right:0;55    padding:20px 36px;56    box-sizing:border-box;57  }58  .item {59    position:relative;60    padding:40px 140px 40px 8px;61    min-height:220px;62    display:flex; align-items:center;63  }64  .label {65    font-size:54px; font-weight:500;66    color:#222;67    margin-left:12px;68  }69  .radio {70    position:absolute; right:36px; top:50%;71    transform:translateY(-50%);72    width:72px; height:72px;73    border-radius:50%;74    box-sizing:border-box;75    border:8px solid #2f2f2f;76    background:#fff;77  }78  .item.selected .radio {79    border-color:#2e7d32;80  }81  .item.selected .radio::after {82    content:"";83    position:absolute; left:50%; top:50%;84    transform:translate(-50%,-50%);85    width:26px; height:26px; border-radius:50%;86    background:#2e7d32;87  }88 89  /* Gesture bar */90  .gesture {91    position:absolute; bottom:56px; left:50%;92    transform:translateX(-50%);93    width:500px; height:18px;94    background:#8f8f8f; border-radius:16px;95    opacity:0.6;96  }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status Bar -->103  <div class="status-bar">104    <div class="time">6:02</div>105    <div class="status-icons">106      <!-- Mail indicator (simple dot) -->107      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>108      <!-- WiFi icon -->109      <svg viewBox="0 0 24 24">110        <path d="M2 8c5-5 15-5 20 0M6 12c3-3 9-3 12 0M10 16c2-2 4-2 6 0"/>111        <circle cx="12" cy="19" r="1.8"/>112      </svg>113      <!-- Battery icon -->114      <svg viewBox="0 0 32 24">115        <rect x="2" y="4" width="24" height="16" rx="3" ry="3" stroke="#616161" stroke-width="2" fill="none"/>116        <rect x="26" y="9" width="4" height="6" rx="1" fill="#616161"/>117        <rect x="4" y="6" width="18" height="12" fill="#616161"/>118      </svg>119    </div>120  </div>121 122  <!-- App Bar -->123  <div class="app-bar">124    <div class="back-btn">125      <svg viewBox="0 0 24 24">126        <path d="M15 4 L7 12 L15 20"/>127      </svg>128    </div>129    <div class="title">Display</div>130  </div>131 132  <!-- Content -->133  <div class="content">134    <div class="item selected">135      <div class="label">Use System Default</div>136      <span class="radio"></span>137    </div>138 139    <div class="item">140      <div class="label">Light</div>141      <span class="radio"></span>142    </div>143 144    <div class="item">145      <div class="label">Dark</div>146      <span class="radio"></span>147    </div>148  </div>149 150  <!-- Gesture bar at bottom -->151  <div class="gesture"></div>152</div>153</body>154</html>