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>Events - Notifications Sheet</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #0f1114; /* dark app background */15 color: #EAEAEA;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 height: 110px;25 width: 100%;26 color: #fff;27 font-size: 38px;28 }29 .status-bar .time {30 position: absolute;31 left: 36px;32 top: 28px;33 font-weight: 500;34 letter-spacing: 1px;35 }36 .status-icons {37 position: absolute;38 right: 36px;39 top: 28px;40 display: flex;41 align-items: center;42 gap: 28px;43 }44 .icon {45 width: 40px; height: 40px;46 }47 48 /* Header */49 .header {50 position: absolute;51 top: 120px;52 left: 28px;53 right: 28px;54 height: 170px;55 display: flex;56 align-items: center;57 color: #E6E6E6;58 }59 .back-btn {60 width: 64px; height: 64px; margin-right: 18px;61 }62 .title {63 font-size: 58px;64 font-weight: 600;65 letter-spacing: 0.2px;66 color: #EDEDED;67 }68 .more {69 margin-left: auto;70 width: 52px; height: 52px;71 }72 73 /* Color row */74 .row {75 position: absolute;76 top: 300px;77 left: 28px;78 right: 28px;79 display: flex;80 align-items: center;81 gap: 28px;82 color: #EAEAEA;83 }84 .color-dot {85 width: 56px; height: 56px;86 background: #5F8DD3;87 border-radius: 50%;88 }89 .row .texts {90 display: flex;91 flex-direction: column;92 }93 .row .label {94 font-size: 42px;95 font-weight: 500;96 }97 .row .sublabel {98 font-size: 30px;99 color: #9AA0A6;100 margin-top: 6px;101 }102 .divider {103 position: absolute;104 top: 430px;105 left: 0;106 right: 0;107 height: 1px;108 background: #1b1f23;109 }110 .section-title {111 position: absolute;112 top: 470px;113 left: 28px;114 font-size: 34px;115 color: #9AA0A6;116 }117 118 /* Bottom sheet dialog */119 .sheet {120 position: absolute;121 left: 24px;122 right: 24px;123 top: 600px;124 bottom: 170px;125 background: #222A31;126 border-radius: 42px;127 box-shadow: 0 30px 80px rgba(0,0,0,0.7);128 padding: 36px 36px 28px 36px;129 display: flex;130 flex-direction: column;131 }132 .options {133 margin-top: 6px;134 overflow: hidden;135 border-radius: 34px;136 }137 .option {138 display: flex;139 align-items: center;140 gap: 30px;141 padding: 30px 18px;142 border-radius: 16px;143 color: #E6E6E6;144 font-size: 40px;145 }146 .option + .option { margin-top: 10px; }147 .radio {148 width: 48px; height: 48px; border-radius: 50%;149 border: 4px solid #8a8f94;150 position: relative;151 box-sizing: border-box;152 flex: 0 0 48px;153 }154 .radio.selected { border-color: #8AB4F8; }155 .radio.selected span {156 position: absolute;157 left: 50%; top: 50%;158 transform: translate(-50%, -50%);159 width: 18px; height: 18px; border-radius: 50%;160 background: #8AB4F8;161 }162 .cancel {163 margin-top: auto;164 text-align: right;165 color: #8AB4F8;166 font-size: 38px;167 }168 169 /* Gesture pill */170 .gesture {171 position: absolute;172 bottom: 42px;173 left: 50%;174 transform: translateX(-50%);175 width: 320px;176 height: 12px;177 background: #D7D7D7;178 border-radius: 8px;179 opacity: 0.8;180 }181</style>182</head>183<body>184<div id="render-target">185 <!-- Status bar -->186 <div class="status-bar">187 <div class="time">6:35</div>188 <div class="status-icons">189 <!-- Wi-Fi -->190 <svg class="icon" viewBox="0 0 24 24" fill="none">191 <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>192 <path d="M5 12c3.5-3 10.5-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>193 <circle cx="12" cy="16.5" r="2" fill="#fff"/>194 </svg>195 <!-- Battery -->196 <svg class="icon" viewBox="0 0 28 24">197 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>198 <rect x="4" y="8" width="16" height="8" rx="1.5" fill="#fff"/>199 <rect x="22.5" y="9" width="3" height="6" rx="1" fill="#fff"/>200 </svg>201 </div>202 </div>203 204 <!-- Header -->205 <div class="header">206 <svg class="back-btn" viewBox="0 0 24 24" fill="none">207 <path d="M15 19L8 12l7-7" stroke="#EAEAEA" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 <div class="title">Events</div>210 <svg class="more" viewBox="0 0 24 24" fill="#B0B6BB">211 <circle cx="12" cy="5" r="2.2"/>212 <circle cx="12" cy="12" r="2.2"/>213 <circle cx="12" cy="19" r="2.2"/>214 </svg>215 </div>216 217 <!-- Row: Color -->218 <div class="row">219 <div class="color-dot"></div>220 <div class="texts">221 <div class="label">Color</div>222 <div class="sublabel">Peacock</div>223 </div>224 </div>225 <div class="divider"></div>226 <div class="section-title">Default notifications</div>227 228 <!-- Bottom sheet with options -->229 <div class="sheet">230 <div class="options">231 <div class="option">232 <div class="radio selected"><span></span></div>233 <div>No notification</div>234 </div>235 <div class="option">236 <div class="radio"></div>237 <div>5 minutes before</div>238 </div>239 <div class="option">240 <div class="radio"></div>241 <div>10 minutes before</div>242 </div>243 <div class="option">244 <div class="radio"></div>245 <div>15 minutes before</div>246 </div>247 <div class="option">248 <div class="radio"></div>249 <div>30 minutes before</div>250 </div>251 <div class="option">252 <div class="radio"></div>253 <div>1 hour before</div>254 </div>255 <div class="option">256 <div class="radio"></div>257 <div>1 day before</div>258 </div>259 <div class="option">260 <div class="radio"></div>261 <div>Custom...</div>262 </div>263 </div>264 <div class="cancel">Cancel</div>265 </div>266 267 <!-- Gesture pill -->268 <div class="gesture"></div>269</div>270</body>271</html>