GD-ML/AndroidCode
13.4k
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>Sound & Vibration - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0b1411;15 color: #e8efe8;16 }17 18 /* Top bars */19 .status-bar {20 height: 100px;21 background: #4b5449;22 color: #f2f6f0;23 display: flex;24 align-items: center;25 padding: 0 36px;26 font-size: 38px;27 letter-spacing: 1px;28 }29 .status-time { flex: 1; }30 .status-icons { display: flex; gap: 26px; align-items: center; }31 .status-dot {32 width: 12px; height: 12px; background: #e8efe8; border-radius: 50%;33 opacity: 0.9;34 }35 36 .app-bar {37 height: 170px;38 background: #4b5449;39 display: flex;40 align-items: center;41 padding: 0 24px 0 12px;42 border-bottom: 1px solid rgba(0,0,0,0.25);43 }44 .back-btn {45 width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;46 }47 .app-title {48 font-size: 64px;49 font-weight: 600;50 margin-left: 8px;51 }52 53 .sub-note {54 background: #0b1411;55 color: #8fa097;56 font-size: 30px;57 padding: 26px 36px 24px;58 border-top: 1px solid rgba(255,255,255,0.03);59 }60 61 /* List */62 .list {63 padding: 8px 0 140px;64 }65 .item {66 padding: 36px 36px;67 border-bottom: 1px solid rgba(255,255,255,0.06);68 }69 .item.compact { padding: 32px 36px; }70 .item-title {71 font-size: 54px;72 line-height: 1.2;73 color: #eaf2ea;74 }75 .item-sub {76 margin-top: 8px;77 font-size: 30px;78 color: #9aa9a1;79 }80 .row {81 display: flex;82 align-items: center;83 justify-content: space-between;84 }85 86 /* Toggle switch */87 .toggle {88 position: relative;89 width: 140px;90 height: 72px;91 border-radius: 36px;92 background: #384138;93 transition: background 0.2s;94 }95 .toggle.on { background: #54e07d; }96 .toggle.off { background: #3a433c; opacity: 0.8; }97 .toggle::after {98 content: "";99 position: absolute;100 top: 8px; left: 8px;101 width: 56px; height: 56px;102 border-radius: 50%;103 background: #c7d1c9;104 box-shadow: 0 2px 4px rgba(0,0,0,0.4);105 transition: left 0.2s, background 0.2s;106 }107 .toggle.on::after {108 left: 76px;109 background: #0b1b0f;110 }111 112 .v-divider {113 width: 2px;114 height: 60px;115 background: rgba(255,255,255,0.1);116 margin: 0 24px;117 }118 119 /* Bottom gesture bar */120 .gesture {121 position: absolute;122 bottom: 32px;123 left: 50%;124 transform: translateX(-50%);125 width: 360px;126 height: 12px;127 background: #dfe5df;128 border-radius: 8px;129 opacity: 0.85;130 }131 132 /* Small helpers for spacing groups */133 .spacer-xxl { height: 18px; }134</style>135</head>136<body>137<div id="render-target">138 139 <!-- Status bar -->140 <div class="status-bar">141 <div class="status-time">10:50</div>142 <div class="status-icons">143 <!-- Simple icons -->144 <svg width="38" height="38" viewBox="0 0 24 24" fill="#f2f6f0" xmlns="http://www.w3.org/2000/svg">145 <path d="M2 16l10-10 10 10h-3v4h-14v-4h-3z"/>146 </svg>147 <div class="status-dot"></div>148 <svg width="38" height="38" viewBox="0 0 24 24" fill="#f2f6f0" xmlns="http://www.w3.org/2000/svg">149 <path d="M3 12l6-6v4h6l-6 6v-4h-6z"/>150 </svg>151 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#f2f6f0" stroke-width="2" xmlns="http://www.w3.org/2000/svg">152 <rect x="3" y="7" width="18" height="10" rx="2" ry="2" />153 <path d="M22 10v4" stroke="#f2f6f0"/>154 </svg>155 </div>156 </div>157 158 <!-- App bar -->159 <div class="app-bar">160 <div class="back-btn">161 <svg width="48" height="48" viewBox="0 0 24 24" fill="#e9efe8" xmlns="http://www.w3.org/2000/svg">162 <path d="M15.5 19l-7-7 7-7v14z"/>163 </svg>164 </div>165 <div class="app-title">Sound & vibration</div>166 </div>167 168 <div class="sub-note">Identify songs playing nearby</div>169 170 <div class="list">171 <div class="item">172 <div class="item-title">Media</div>173 <div class="item-sub">Show player</div>174 </div>175 176 <div class="item">177 <div class="item-title">Vibration & haptics</div>178 <div class="item-sub">On</div>179 </div>180 181 <div class="item row">182 <div>183 <div class="item-title">Shortcut to prevent ringing</div>184 <div class="item-sub">Vibrate</div>185 </div>186 <div class="row" style="align-items:center;">187 <div class="v-divider"></div>188 <div class="toggle on" aria-label="Shortcut to prevent ringing"></div>189 </div>190 </div>191 192 <div class="item">193 <div class="item-title">Default notification sound</div>194 <div class="item-sub">Popcorn</div>195 </div>196 197 <div class="item">198 <div class="item-title">Default alarm sound</div>199 <div class="item-sub">Bright Morning</div>200 </div>201 202 <div class="item row">203 <div class="item-title">Dial pad tones</div>204 <div class="toggle on" aria-label="Dial pad tones"></div>205 </div>206 207 <div class="item row">208 <div class="item-title">Screen locking sound</div>209 <div class="toggle on" aria-label="Screen locking sound"></div>210 </div>211 212 <div class="item row">213 <div class="item-title">Charging sounds and vibration</div>214 <div class="toggle on" aria-label="Charging sounds and vibration"></div>215 </div>216 217 <div class="item row">218 <div class="item-title">Touch sounds</div>219 <div class="toggle on" aria-label="Touch sounds"></div>220 </div>221 222 <div class="item row">223 <div>224 <div class="item-title">Always show icon when in</div>225 <div class="item-title" style="margin-top:4px;">vibrate mode</div>226 </div>227 <div class="toggle off" aria-label="Always show icon when in vibrate mode"></div>228 </div>229 </div>230 231 <div class="gesture"></div>232</div>233</body>234</html>