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>Settings UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0f1613; /* dark, slightly green */13    font-family: "Roboto", Arial, Helvetica, sans-serif;14    color: #e7e7e7;15  }16 17  /* Top bars */18  .statusbar {19    height: 110px;20    background: #1b241f;21    color: #eaeaea;22    display: flex;23    align-items: center;24    padding: 0 36px;25    font-size: 40px;26    letter-spacing: 0.5px;27  }28  .sb-left { flex: 0 0 auto; }29  .sb-icons {30    flex: 1;31    display: flex;32    justify-content: flex-end;33    align-items: center;34    gap: 28px;35  }36  .toolbar {37    height: 160px;38    background: #1b241f;39    display: flex;40    align-items: center;41    padding: 0 28px;42    border-bottom: 1px solid #27322b;43  }44  .back-btn {45    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;46    margin-right: 8px;47  }48  .toolbar-title {49    font-size: 64px; font-weight: 500; letter-spacing: 0.2px;50    margin-left: 10px;51  }52  .more-btn {53    margin-left: auto;54    width: 88px; height: 88px; display: flex; align-items: center; justify-content: center;55  }56 57  /* Content */58  .content {59    padding: 36px 48px 24px 48px;60  }61  .item {62    padding: 34px 0;63    border-bottom: 1px solid rgba(255,255,255,0.06);64  }65  .item.no-border { border-bottom: none; }66  .item-title {67    font-size: 52px;68    font-weight: 500;69    margin-bottom: 16px;70  }71  .item-sub {72    font-size: 38px;73    color: #a9b3ab;74  }75 76  /* Slider block */77  .slider-block {78    padding: 46px 0 40px 0;79    border-bottom: 1px solid rgba(255,255,255,0.06);80  }81  .slider-row {82    display: flex; align-items: center; gap: 28px;83  }84  .slider-label {85    font-size: 52px; font-weight: 500;86    margin-bottom: 34px;87    margin-left: 120px; /* aligns with text left after icon */88  }89  .slider-wrap {90    position: relative;91    margin-left: 120px;92    height: 44px;93  }94  .slider-track {95    width: 800px; height: 6px; background: #88c78f;96    border-radius: 4px;97    position: absolute; top: 19px; left: 0;98  }99  .slider-thumb {100    width: 44px; height: 44px; border-radius: 50%;101    background: #bfe7b8; border: 4px solid #76c27f;102    position: absolute; right: -6px; top: -2px;103  }104  .clock-ico {105    width: 80px; height: 80px; opacity: 0.95;106  }107 108  /* Section headers */109  .section-header {110    padding: 36px 0 16px 0;111    color: #8fd397;112    font-size: 42px; font-weight: 500;113  }114  .divider {115    height: 1px; background: rgba(255,255,255,0.08);116    margin: 26px 0;117  }118 119  /* Switch */120  .switch-row {121    display: flex; align-items: center;122    padding: 34px 0;123  }124  .switch-label {125    font-size: 52px; font-weight: 500;126  }127  .switch {128    margin-left: auto;129    width: 168px; height: 84px; border-radius: 42px;130    background: #1f3b2a; position: relative;131  }132  .switch::after {133    content: "";134    width: 76px; height: 76px; border-radius: 50%;135    background: #bfe7b8;136    position: absolute; top: 4px; right: 4px;137    box-shadow: 0 2px 0 rgba(0,0,0,0.4);138  }139 140  /* Gesture pill */141  .gesture-pill {142    position: absolute; bottom: 34px; left: 50%;143    transform: translateX(-50%);144    width: 360px; height: 16px; border-radius: 10px;145    background: rgba(255,255,255,0.85);146  }147 148  /* Helper colors */149  .muted { color: #a9b3ab; font-size: 38px; margin-top: 12px; }150 151  /* Simple icon styling */152  svg { display: block; }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status bar -->159  <div class="statusbar">160    <div class="sb-left">3:04</div>161    <div class="sb-icons">162      <!-- Cellular -->163      <svg width="38" height="38" viewBox="0 0 24 24" fill="#eaeaea">164        <rect x="2" y="16" width="3" height="6" rx="1"></rect>165        <rect x="7" y="12" width="3" height="10" rx="1"></rect>166        <rect x="12" y="8" width="3" height="14" rx="1"></rect>167        <rect x="17" y="4" width="3" height="18" rx="1"></rect>168      </svg>169      <!-- WiFi -->170      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2">171        <path d="M2 8c5-4 15-4 20 0"></path>172        <path d="M5 12c4-3 10-3 14 0"></path>173        <path d="M8 16c3-2 5-2 8 0"></path>174        <circle cx="12" cy="19" r="1.8" fill="#eaeaea" stroke="none"></circle>175      </svg>176      <!-- Battery -->177      <svg width="46" height="40" viewBox="0 0 28 24" fill="none" stroke="#eaeaea" stroke-width="2">178        <rect x="2" y="6" width="20" height="12" rx="2"></rect>179        <rect x="4" y="8" width="16" height="8" fill="#eaeaea" stroke="none"></rect>180        <rect x="22" y="9" width="3" height="6" rx="1" fill="#eaeaea" stroke="none"></rect>181      </svg>182    </div>183  </div>184 185  <!-- App bar -->186  <div class="toolbar">187    <div class="back-btn">188      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="3">189        <path d="M15 18l-6-6 6-6"></path>190      </svg>191    </div>192    <div class="toolbar-title">Settings</div>193    <div class="more-btn">194      <svg width="46" height="46" viewBox="0 0 24 24" fill="#eaeaea">195        <circle cx="12" cy="4.5" r="2"></circle>196        <circle cx="12" cy="12" r="2"></circle>197        <circle cx="12" cy="19.5" r="2"></circle>198      </svg>199    </div>200  </div>201 202  <!-- Content -->203  <div class="content">204 205    <div class="item">206      <div class="item-title">Snooze length</div>207      <div class="item-sub">10 minutes</div>208    </div>209 210    <div class="slider-block">211      <div class="slider-row">212        <div class="clock-ico">213          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#a9b3ab" stroke-width="2">214            <circle cx="12" cy="13" r="8"></circle>215            <path d="M12 13l4 3"></path>216            <path d="M12 7v6"></path>217            <path d="M7 4l2 2"></path>218            <path d="M17 4l-2 2"></path>219          </svg>220        </div>221        <div style="flex:1"></div>222      </div>223      <div class="slider-label">Alarm volume</div>224      <div class="slider-wrap">225        <div class="slider-track"></div>226        <div class="slider-thumb"></div>227      </div>228    </div>229 230    <div class="item">231      <div class="item-title">Gradually increase volume</div>232      <div class="item-sub">Never</div>233    </div>234 235    <div class="item">236      <div class="item-title">Volume buttons</div>237      <div class="item-sub">Control volume</div>238    </div>239 240    <div class="item">241      <div class="item-title">Start week on</div>242      <div class="item-sub">Sunday</div>243    </div>244 245    <div class="divid