GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Notification Preferences UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #111111; color: #FFFFFF;12 }13 14 /* Status bar */15 .status-bar {16 height: 110px;17 background: #1e1e1e;18 display: flex; align-items: center;19 padding: 0 40px;20 font-weight: 700;21 font-size: 42px;22 color: #fff;23 }24 .status-spacer { flex: 1; }25 .status-icons {26 display: flex; align-items: center; gap: 26px;27 }28 .status-dot {29 width: 14px; height: 14px; background: #cfcfcf; border-radius: 50%;30 }31 .icon-cloud, .icon-battery, .icon-wifi {32 width: 44px; height: 44px;33 }34 35 /* App bar */36 .app-bar {37 height: 140px;38 background: #2a2a2a;39 display: flex; align-items: center;40 padding: 0 40px;41 box-sizing: border-box;42 }43 .back-icon {44 width: 60px; height: 60px; margin-right: 24px;45 }46 .app-title {47 font-size: 52px; font-weight: 700; color: #eaeaea;48 }49 50 /* Content */51 .content {52 padding: 40px 48px 120px 48px;53 box-sizing: border-box;54 }55 .section-title {56 font-size: 52px;57 font-weight: 700;58 margin: 30px 0 30px 0;59 color: #ffffff;60 }61 .setting {62 padding: 40px 0 36px 0;63 display: flex;64 gap: 24px;65 align-items: flex-start;66 justify-content: space-between;67 }68 .setting .texts {69 max-width: 820px;70 }71 .setting .title {72 font-size: 44px; font-weight: 700; color: #ffffff; margin-bottom: 18px;73 }74 .setting .desc {75 font-size: 32px; line-height: 1.5; color: #bdbdbd;76 }77 .divider {78 height: 2px; background: #505050; margin: 18px 0 18px 0;79 }80 81 /* Toggle */82 .toggle {83 width: 128px; height: 68px;84 border-radius: 34px;85 background: #4b3a2a;86 position: relative;87 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4);88 }89 .toggle::after {90 content: "";91 width: 62px; height: 62px;92 background: #d87816;93 border-radius: 50%;94 position: absolute;95 top: 3px; right: 3px;96 box-shadow: 0 2px 6px rgba(0,0,0,0.5);97 }98 99 /* Subsection header like "Email" */100 .subsection-header {101 font-size: 50px; font-weight: 700; color: #ffffff;102 margin: 40px 0 20px 0;103 }104 105 /* Bottom gesture handle */106 .gesture {107 position: absolute; bottom: 28px; left: 50%;108 transform: translateX(-50%);109 width: 360px; height: 16px;110 background: #cfcfcf; border-radius: 8px; opacity: 0.7;111 }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Top system status bar -->118 <div class="status-bar">119 <div>7:33</div>120 <div class="status-spacer"></div>121 <div class="status-icons">122 <svg class="icon-cloud" viewBox="0 0 24 24">123 <path fill="#cfcfcf" d="M6 15a5 5 0 0 1 4.9-5 4 4 0 0 1 7.6 1.5A3.5 3.5 0 0 1 18.5 20H8a3 3 0 0 1-2-5z"/>124 </svg>125 <div class="status-dot"></div>126 <svg class="icon-wifi" viewBox="0 0 24 24">127 <path fill="#cfcfcf" d="M12 18.5l1.5 1.5-1.5 1.5-1.5-1.5zM2 9a14 14 0 0 1 20 0l-1.4 1.4a12 12 0 0 0-17.2 0L2 9zm4.6 4.6a8 8 0 0 1 10.8 0l-1.4 1.4a6 6 0 0 0-8 0l-1.4-1.4z"/>128 </svg>129 <svg class="icon-battery" viewBox="0 0 24 24">130 <rect x="1" y="6" width="18" height="12" rx="2" fill="#cfcfcf"></rect>131 <rect x="3" y="8" width="14" height="8" rx="1" fill="#111111"></rect>132 <rect x="20" y="9" width="2" height="6" fill="#cfcfcf"></rect>133 </svg>134 </div>135 </div>136 137 <!-- App bar -->138 <div class="app-bar">139 <svg class="back-icon" viewBox="0 0 24 24">140 <path fill="#ffffff" d="M15 18l-6-6 6-6v12z"/>141 </svg>142 <div class="app-title">Notification Preferences</div>143 </div>144 145 <!-- Content -->146 <div class="content">147 <div class="section-title">Push Notifications</div>148 149 <div class="setting">150 <div class="texts">151 <div class="title">Comments</div>152 <div class="desc">153 These are notifications for all comment related activities. These include comments on your recipes,154 replies to your comments and comments around the recipes you have participated in.155 </div>156 </div>157 <div class="toggle"></div>158 </div>159 <div class="divider"></div>160 161 <div class="setting">162 <div class="texts">163 <div class="title">When you’re tagged in a comment</div>164 <div class="desc">165 If another cook tags you in a recipe, we’ll send you a push notification.166 </div>167 </div>168 <div class="toggle"></div>169 </div>170 <div class="divider"></div>171 172 <div class="setting">173 <div class="texts">174 <div class="title">When you’re tagged in a recipe</div>175 <div class="desc">176 If another cook tags you in a comment, we’ll send you a push notification.177 </div>178 </div>179 <div class="toggle"></div>180 </div>181 <div class="divider"></div>182 183 <div class="setting">184 <div class="texts">185 <div class="title">Activity About Your Recipe</div>186 <div class="desc">187 These are notifications for statistics around your recipes.188 </div>189 </div>190 <div class="toggle"></div>191 </div>192 <div class="divider"></div>193 194 <div class="setting">195 <div class="texts">196 <div class="title">Activity About Your Tips</div>197 <div class="desc">198 These are notifications for statistics around your tips.199 </div>200 </div>201 <div class="toggle"></div>202 </div>203 <div class="divider"></div>204 205 <div class="setting">206 <div class="texts">207 <div class="title">From Cookpad</div>208 <div class="desc">209 These are notifications for seasonal events, surveys and tips from our community team.210 </div>211 </div>212 <div class="toggle"></div>213 </div>214 215 <div class="divider" style="margin-top:40px;"></div>216 217 <div class="subsection-header">Email</div>218 219 <div class="setting">220 <div class="texts">221 <div class="title">Guidance</div>222 <div class="desc">223 We’ll email you guidance on how to make the most of Cookpad features.224 </div>225 </div>226 <div class="toggle"></div>227 </div>228 229 <div class="divider"></div>230 </div>231 232 <!-- Bottom gesture handle -->233 <div class="gesture"></div>234</div>235</body>236</html>