GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Settings Screen</title>5<style>6 body{ margin:0; padding:0; background:transparent; }7 #render-target{8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#1f262a; color:#e6ecef;11 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;12 }13 14 /* Status bar */15 .status{16 position:absolute; top:0; left:0; right:0;17 height:110px; background:#1b2226;18 display:flex; align-items:center; justify-content:space-between;19 padding:0 40px; color:#cbd3d7; font-weight:600;20 }21 .status .left{ display:flex; align-items:center; gap:24px; }22 .status .right{ display:flex; align-items:center; gap:22px; }23 24 /* simple icon dots/shape */25 .dot{ width:18px; height:18px; border-radius:50%; background:#aab2b7; opacity:.7; }26 .bar{ width:24px; height:18px; border:2px solid #aab2b7; border-radius:3px; opacity:.7; }27 .circle{ width:22px; height:22px; border:2px solid #aab2b7; border-radius:50%; opacity:.7; }28 29 /* Header / navigation */30 .nav{31 position:absolute; top:110px; left:0; right:0;32 height:120px; display:flex; align-items:center;33 padding:0 32px; color:#e9eef1;34 border-bottom:1px solid rgba(255,255,255,0.06);35 }36 .nav .title{ flex:1; text-align:center; font-size:56px; font-weight:700; letter-spacing:.3px; }37 .icon-btn{ width:84px; height:84px; display:flex; align-items:center; justify-content:center; }38 .icon-btn svg{ width:44px; height:44px; fill:none; stroke:#e9eef1; stroke-width:5; }39 40 /* Content */41 .content{ position:absolute; top:240px; left:0; right:0; padding:40px; }42 .section{ margin-bottom:64px; }43 .label{ font-size:28px; letter-spacing:2px; color:#9aa6ad; text-transform:uppercase; margin:10px 0 22px; }44 45 /* Segmented controls */46 .pill-group{47 display:flex; gap:0;48 background:#242a2f; border-radius:52px; padding:12px;49 box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);50 }51 .pill-option{52 flex:1; border-radius:44px; padding:26px 10px;53 text-align:center; color:#cfd6db;54 transition:.2s; border:1px solid transparent;55 }56 .pill-option .title{ font-size:44px; font-weight:700; margin-bottom:8px; color:#eef3f7; }57 .pill-option .subtitle{ font-size:28px; color:#92a0a8; }58 .pill-option.inactive .title{ color:#cdd6db; }59 .pill-option.active{60 background:#32383d; border-color:rgba(255,255,255,0.06);61 }62 63 /* Two-option group tweaks */64 .pill-group.two .pill-option .title{ font-size:48px; }65 .pill-group.two .pill-option .subtitle{ font-size:30px; }66 67 /* Display mode simple options (no subtitles) */68 .display-options .pill-option{ padding:34px 10px; }69 .display-options .pill-option .title{ margin:0; font-size:44px; }70 .display-options .pill-option.inactive{ color:#b8c0c6; }71 72 /* Toggle rows */73 .row{ padding:30px 0; border-top:1px solid rgba(255,255,255,0.06); }74 .row:first-child{ border-top:none; }75 .row-head{ display:flex; align-items:center; justify-content:space-between; }76 .row-title{ font-size:46px; font-weight:700; color:#eef3f7; }77 .row-desc{ margin-top:16px; font-size:32px; line-height:1.35; color:#a3afb6; }78 79 .toggle{80 width:156px; height:76px; border-radius:38px;81 background:#3c4349; position:relative; box-shadow:inset 0 0 0 2px rgba(255,255,255,0.08);82 }83 .toggle.on{ background:#4cd275; }84 .toggle .knob{85 position:absolute; top:8px; left:8px; width:60px; height:60px;86 background:#ffffff; border-radius:50%; transition:.2s;87 }88 .toggle.on .knob{ left:88px; }89 90 /* Footer link with chevron */91 .link-row{92 margin-top:24px; padding:36px 0;93 border-top:1px solid rgba(255,255,255,0.06);94 display:flex; align-items:center; justify-content:space-between;95 }96 .link-text{ font-size:46px; font-weight:700; color:#eef3f7; }97 .chev svg{ width:40px; height:40px; stroke:#b9c2c8; stroke-width:5; fill:none; }98 99 /* Bottom handle (home indicator) */100 .home-indicator{101 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);102 width:360px; height:14px; border-radius:8px; background:#8c959a; opacity:.45;103 }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Status bar -->110 <div class="status">111 <div class="left">112 <div style="font-size:40px;">8:19</div>113 <div class="dot"></div>114 <div class="circle"></div>115 <div class="bar"></div>116 <div class="dot"></div>117 </div>118 <div class="right">119 <div class="circle"></div>120 <div class="circle"></div>121 <div class="dot"></div>122 </div>123 </div>124 125 <!-- Navigation -->126 <div class="nav">127 <div class="icon-btn">128 <svg viewBox="0 0 24 24">129 <path d="M15 5 L7 12 L15 19"></path>130 </svg>131 </div>132 <div class="title">Settings</div>133 <div style="width:84px;"></div>134 </div>135 136 <!-- Content -->137 <div class="content">138 139 <!-- Units -->140 <div class="section">141 <div class="label">UNITS</div>142 <div class="pill-group">143 <div class="pill-option active">144 <div class="title">Imperial</div>145 <div class="subtitle">°F, mph, in</div>146 </div>147 <div class="pill-option inactive">148 <div class="title">Metric</div>149 <div class="subtitle">°C, km/h, mm</div>150 </div>151 <div class="pill-option inactive">152 <div class="title">Hybrid</div>153 <div class="subtitle">°C, mph, mm</div>154 </div>155 </div>156 </div>157 158 <!-- Wind Direction -->159 <div class="section">160 <div class="label">WIND DIRECTION</div>161 <div class="pill-group two">162 <div class="pill-option active">163 <div class="title">Cardinal</div>164 <div class="subtitle">N, S, W, E</div>165 </div>166 <div class="pill-option inactive">167 <div class="title">Degrees</div>168 <div class="subtitle">0° – 360°</div>169 </div>170 </div>171 </div>172 173 <!-- Display Mode -->174 <div class="section">175 <div class="label">DISPLAY MODE</div>176 <div class="pill-group display-options">177 <div class="pill-option inactive">178 <div class="title">Light</div>179 </div>180 <div class="pill-option inactive">181 <div class="title">Dark</div>182 </div>183 <div class="pill-option inactive">184 <div class="title">Black</div>185 </div>186 </div>187 </div>188 189 <!-- Toggle rows -->190 <div class="section">191 <div class="row">192 <div class="row-head">193 <div class="row-title">Use Device Settings</div>194 <div class="toggle on">195 <div class="knob"></div>196 </div>197 </div>198 <div class="row-desc">199 Enable the Light or Dark selection located in your device's Display & Brightness settings200 </div>201 </div>202 203 <div class="row">204 <div class="row-head">205 <div class="row-title">Current Conditions Background</div>206 <div class="toggle on">207 <div class="knob"></div>208 </div>209 </div>210 <div class="row-desc">211 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.212 </div>213 </div>214 </div>215 216 <!-- Manage notifications -->217 <div class="link-row">218 <div class="link-text">Manage Notifications</div>219 <div class="chev">220 <svg viewBox="0 0 24 24"><path d="M9 5 L16 12 L9 19"></path></svg>221 </div>222 </div>223 224 </div>225 226 <!-- Home indicator -->227 <div class="home-indicator"></div>228</div>229</body>230</html>