GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Info & Settings</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; color: #263238; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #eaf0f2;12 }13 14 /* Top bars */15 .status-bar {16 height: 96px;17 background: #0b4452;18 color: #fff;19 display: flex;20 align-items: center;21 padding: 0 36px;22 font-size: 34px;23 letter-spacing: 0.5px;24 }25 .status-left { flex: 1; }26 .status-right { display: flex; align-items: center; gap: 24px; }27 .app-bar {28 height: 168px;29 background: #0f6a7f;30 color: #fff;31 position: relative;32 display: flex;33 align-items: center;34 padding: 0 24px;35 box-sizing: border-box;36 }37 .back-btn {38 width: 120px; height: 100%; display: flex; align-items: center; justify-content: center;39 }40 .app-title {41 position: absolute; left: 0; right: 0; text-align: center;42 font-size: 56px; font-weight: 500;43 }44 .divider-top {45 height: 8px; background: #d7e0e4;46 }47 48 /* Cards */49 .content {50 padding: 24px;51 }52 .card {53 background: #fff;54 border-radius: 16px;55 box-shadow: 0 2px 6px rgba(0,0,0,0.1);56 margin: 20px 8px;57 padding: 36px;58 }59 60 .row {61 display: flex; align-items: center; justify-content: space-between;62 }63 .row + .row { margin-top: 28px; }64 .title-blue {65 color: #0f6a7f; font-weight: 700; font-size: 44px; margin-bottom: 24px;66 }67 .label { font-size: 40px; color: #263238; }68 .subtext { color: #8a8f94; font-size: 32px; line-height: 1.35; margin-top: 18px; }69 70 /* Toggles */71 .toggle {72 width: 130px; height: 70px; border-radius: 35px; position: relative; cursor: default;73 background: #d6d6d6; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);74 }75 .toggle .knob {76 position: absolute; top: 6px; width: 58px; height: 58px; border-radius: 50%; background: #fff;77 box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left .2s;78 }79 .toggle.off .knob { left: 6px; }80 .toggle.on { background: #ffc107; }81 .toggle.on .knob { left: 66px; }82 83 /* Dropdown value */84 .value {85 display: flex; align-items: center; gap: 12px; font-size: 40px; color: #455a64;86 }87 88 /* Dividers inside cards */89 .line {90 height: 2px; background: #e6e6e6; margin: 28px 0;91 }92 93 /* Star + Remove ads */94 .star {95 width: 64px; height: 64px; margin-right: 18px;96 }97 .link-blue {98 color: #0e6aa1; font-weight: 700; font-size: 48px;99 }100 101 /* Segmented controls */102 .seg {103 display: flex; border: 2px solid #ffc107; border-radius: 12px; overflow: hidden;104 width: 100%; height: 112px;105 }106 .seg .seg-btn {107 flex: 1; display: flex; align-items: center; justify-content: center;108 font-size: 40px; color: #ffc107; background: #fff;109 }110 .seg .seg-btn + .seg-btn { border-left: 2px solid #ffc107; }111 .seg .seg-btn.active {112 background: #ffc107; color: #fff; font-weight: 600;113 }114 .unit-hint {115 text-align: center; color: #9aa2a7; font-size: 34px; margin-top: 18px;116 }117 118 /* Bottom gesture bar */119 .gesture {120 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);121 width: 300px; height: 12px; background: #000; opacity: 0.6; border-radius: 6px;122 }123 124 /* Small helpers */125 .left-wrap { display: flex; align-items: center; }126</style>127</head>128<body>129<div id="render-target">130 131 <!-- Status bar -->132 <div class="status-bar">133 <div class="status-left">5:28</div>134 <div class="status-right">135 <!-- placeholder dots like notifications -->136 <svg width="18" height="18"><circle cx="9" cy="9" r="9" fill="#ffffff" opacity="0.7"/></svg>137 <svg width="36" height="24" viewBox="0 0 24 24" fill="none">138 <path d="M2 16c4-4 8-6 10-6s6 2 10 6" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.9"/>139 <path d="M6 16c3-3 6-4 6-4s3 1 6 4" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.9"/>140 <circle cx="12" cy="16" r="1.5" fill="#fff"/>141 </svg>142 <svg width="38" height="24" viewBox="0 0 28 14" fill="none">143 <rect x="1" y="1" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>144 <rect x="3" y="3" width="18" height="8" fill="#fff"/>145 <rect x="24" y="5" width="3" height="4" rx="1" fill="#fff"/>146 </svg>147 </div>148 </div>149 150 <!-- App bar -->151 <div class="app-bar">152 <div class="back-btn">153 <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">154 <path d="M15.5 19l-7-7 7-7" />155 </svg>156 </div>157 <div class="app-title">Info & Settings</div>158 </div>159 <div class="divider-top"></div>160 161 <!-- Content -->162 <div class="content">163 164 <!-- Remove ads card -->165 <div class="card">166 <div class="row">167 <div class="left-wrap">168 <svg class="star" viewBox="0 0 24 24">169 <path d="M12 2l3 6 7 .9-5 4.8 1.3 7.3L12 17l-6.3 4 1.3-7.3-5-4.8L9 8z" fill="#ffc107"/>170 </svg>171 <div class="link-blue">Remove ads</div>172 </div>173 </div>174 </div>175 176 <!-- Notifications card -->177 <div class="card">178 <div class="title-blue">Notifications</div>179 180 <div class="row">181 <div class="label">Weather alerts</div>182 <div class="toggle on"><div class="knob"></div></div>183 </div>184 185 <div class="line"></div>186 187 <div class="row">188 <div class="label">Active for</div>189 <div class="value">190 Ivrea191 <svg width="28" height="28" viewBox="0 0 24 24" fill="#79868b">192 <path d="M7 10l5 5 5-5" />193 </svg>194 </div>195 </div>196 197 <div class="line"></div>198 199 <div class="row">200 <div class="label">Weather updates</div>201 <div class="toggle on"><div class="knob"></div></div>202 </div>203 204 <div class="line"></div>205 206 <div class="row">207 <div class="label">Weather notifications</div>208 <div class="toggle off"><div class="knob"></div></div>209 </div>210 211 <div class="subtext">212 Permanent notification featuring current weather and temperature in your status bar213 </div>214 </div>215 216 <!-- Weather card -->217 <div class="card">218 <div class="title-blue">Weather</div>219 220 <div class="label" style="margin-bottom: 18px;">Units</div>221 <div class="seg">222 <div class="seg-btn">Metric</div>223 <div class="seg-btn">Imperial</div>224 <div class="seg-btn active">Advanced</div>225 </div>226 <div class="unit-hint">°C, m, kph</div>227 228 <div class="line"></div>229 230 <div class="label" style="margin-bottom: 16px;">Temperature</div>231 <div class="seg" style="width: 720px;">232 <div class="seg-btn active">°C</div>233 <div class="seg-btn">°F</div>234 </div>235 236 <div class="line"></div>237 238 <div class="label" style="margin-bottom: 16px;">Height and length</div>239 <div class="seg" style="width: 720px;">240 <div class="seg-btn active">m</div>241 <div class="seg-btn">ft</div>242 </div>243 244 <div class="line"></div>245 246 <div class="label">Wind speed</div>247 </div>248 249 </div>250 251 <!-- Bottom gesture bar -->252 <div class="gesture"></div>253</div>254</body>255</html>