GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Settings UI</title>7<style>8  :root{9    --bg:#263036;10    --bg-elev:#2f3940;11    --bg-elev-2:#3a434a;12    --text:#e9eef1;13    --muted:#9aa6ad;14    --line:#3a444b;15    --green:#48d268;16  }17  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }18  #render-target{19    width:1080px; height:2400px; position:relative; overflow:hidden;20    background:var(--bg);21    color:var(--text);22  }23 24  /* Status bar */25  .status{26    height:120px;27    padding:0 42px;28    display:flex; align-items:center; justify-content:space-between;29    box-sizing:border-box;30    color:#e8edf0;31    font-weight:600;32    letter-spacing:0.5px;33  }34  .status .right{ display:flex; gap:22px; align-items:center; opacity:.9; }35  .dot{ width:10px; height:10px; background:#cfd6db; border-radius:50%; display:inline-block; opacity:.6; }36 37  /* Header */38  .header{39    height:120px;40    display:flex; align-items:center; justify-content:center;41    position:relative;42    border-top:1px solid rgba(0,0,0,0.15);43    border-bottom:1px solid var(--line);44  }45  .back-btn{46    position:absolute; left:34px; top:50%; transform:translateY(-50%);47    width:72px; height:72px; display:flex; align-items:center; justify-content:center; color:#cbd4d9;48  }49  .header-title{ font-size:44px; font-weight:700; letter-spacing:.5px; }50 51  /* Content */52  .content{ padding:48px 54px 0; }53  .section{54    margin-bottom:56px;55  }56  .label{57    color:#c7d0d6; opacity:.9;58    font-size:24px; letter-spacing:3px; font-weight:700;59    margin:24px 10px 22px;60    text-transform:uppercase;61  }62 63  /* Segmented controls */64  .seg{65    border:1px solid var(--line);66    border-radius:56px;67    background:transparent;68    overflow:hidden;69    display:flex;70  }71  .seg.three .item{ width:33.3333%; }72  .seg.two .item{ width:50%; }73  .item{74    padding:28px 24px;75    text-align:center;76    color:#cfd7dc;77    font-size:40px;78    font-weight:700;79    border-right:1px solid rgba(255,255,255,0.06);80    position:relative;81  }82  .item:last-child{ border-right:none; }83  .item small{84    display:block; margin-top:10px; font-size:28px; color:#a3adb3; font-weight:600; letter-spacing:.3px;85  }86  .item.active{87    background:var(--bg-elev);88    color:#ffffff;89  }90 91  /* Display mode (all off look) */92  .seg.off .item{ color:#87939a; }93 94  /* Switch rows */95  .row{96    display:flex; align-items:flex-start; justify-content:space-between;97    padding:38px 6px 10px;98  }99  .row + .help{ margin:6px 6px 0; }100  .title{101    font-size:42px; font-weight:700; letter-spacing:.2px;102  }103  .help{104    color:var(--muted); font-size:30px; line-height:44px;105    padding-right:160px;106  }107 108  .switch{109    width:120px; height:64px; border-radius:36px; background:#5a6369; position:relative; margin-top:6px;110    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);111  }112  .switch.on{ background:var(--green); }113  .knob{114    width:56px; height:56px; background:#fff; border-radius:50%;115    position:absolute; top:4px; left:6px; transition:left .2s;116    box-shadow:0 2px 6px rgba(0,0,0,.25);117  }118  .switch.on .knob{ left:58px; }119 120  /* Divider */121  .divider{ height:1px; background:var(--line); margin:40px 0; }122 123  /* List item with chevron */124  .list{125    border-top:1px solid var(--line);126    border-bottom:1px solid var(--line);127    margin-top:24px;128  }129  .list-item{130    display:flex; align-items:center; justify-content:space-between;131    padding:40px 10px;132  }133  .chev{134    width:44px; height:44px; color:#aeb8be;135  }136 137  /* Bottom gesture bar */138  .home-indicator{139    position:absolute; left:50%; transform:translateX(-50%);140    bottom:22px; width:300px; height:10px; border-radius:6px; background:#cfd6db; opacity:.45;141  }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status bar -->148  <div class="status">149    <div class="left" style="display:flex; align-items:center; gap:20px;">150      <span style="font-size:40px;">5:31</span>151      <span style="display:flex; gap:10px; align-items:center; opacity:.8;">152        <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>153      </span>154      <span class="dot" style="margin-left:10px; width:12px; height:12px;"></span>155    </div>156    <div class="right">157      <!-- simple wifi and battery shapes -->158      <svg width="48" height="48" viewBox="0 0 24 24" fill="#e9eef1" opacity=".85"><path d="M12 18l4-4h-3v-3h-2v3H8z"/><path d="M2 8a16 16 0 0 1 20 0l-2 2a13 13 0 0 0-16 0z" opacity=".35"/></svg>159      <svg width="48" height="48" viewBox="0 0 24 24" fill="#e9eef1"><path d="M16 6h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1V5h7v1z"/></svg>160    </div>161  </div>162 163  <!-- Header -->164  <div class="header">165    <div class="back-btn">166      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">167        <path d="M15 18l-6-6 6-6"/>168      </svg>169    </div>170    <div class="header-title">Settings</div>171  </div>172 173  <div class="content">174    <!-- UNITS -->175    <div class="section">176      <div class="label">UNITS</div>177      <div class="seg three">178        <div class="item">Imperial<small>°F, mph, in</small></div>179        <div class="item active">Metric<small>°C, km/h, mm</small></div>180        <div class="item">Hybrid<small>°C, mph, mm</small></div>181      </div>182    </div>183 184    <!-- WIND DIRECTION -->185    <div class="section" style="margin-top:26px;">186      <div class="label">WIND DIRECTION</div>187      <div class="seg two">188        <div class="item active">Cardinal<small>N, S, W, E</small></div>189        <div class="item">Degrees<small>0° - 360°</small></div>190      </div>191    </div>192 193    <!-- DISPLAY MODE -->194    <div class="section" style="margin-top:26px;">195      <div class="label">DISPLAY MODE</div>196      <div class="seg three off">197        <div class="item">Light</div>198        <div class="item">Dark</div>199        <div class="item">Black</div>200      </div>201    </div>202 203    <!-- Use Device Settings -->204    <div class="section" style="margin-top:40px;">205      <div class="row">206        <div class="title">Use Device Settings</div>207        <div class="switch on"><div class="knob"></div></div>208      </div>209      <div class="help">210        Enable the Light or Dark selection located in your device's Display & Brightness settings211      </div>212    </div>213 214    <!-- Current Conditions Background -->215    <div class="section" style="margin-top:40px;">216      <div class="row">217        <div class="title">Current Conditions Background</div>218        <div class="switch on"><div class="knob"></div></div>219      </div>220      <div class="help">221        Enable/disable the background on your Today screen to visually reflect the weather in your selected location. That means if it’s raining outside, it’s raining in the app.222      </div>223    </div>224 225    <div class="divider"></div>226 227    <!-- Manage Notifications -->228    <div class="list">229      <div class="list-item">230        <div class="title">Manage Notifications</div>231        <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">232          <path d="M8 4l8 8-8 8"/>233        </svg>234      </div>235    </div>236  </div>237 238  <!-- Bottom home indicator -->239  <div class="home-indicator"></div>240</div>241</body>242</html>