| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=1080, initial-scale=1.0"> |
| <title>Permission Request - Mock</title> |
| <style> |
| body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; } |
| #render-target { |
| position: relative; |
| width: 1080px; |
| height: 2400px; |
| overflow: hidden; |
| background: #F5F7F9; |
| color: #111; |
| } |
| |
| |
| .status-bar { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 1080px; |
| height: 90px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 32px; |
| color: #1a1a1a; |
| font-weight: 600; |
| font-size: 34px; |
| } |
| .status-icons { |
| display: flex; |
| gap: 18px; |
| align-items: center; |
| } |
| .icon-wifi, .icon-battery, .icon-signal { |
| width: 36px; height: 22px; |
| border: 2px solid #1a1a1a; border-radius: 4px; |
| } |
| .icon-battery::after { |
| content: ""; |
| position: absolute; |
| width: 6px; height: 10px; |
| right: -6px; top: 6px; |
| background: #1a1a1a; border-radius: 2px; |
| } |
| |
| |
| .header { |
| position: absolute; |
| top: 110px; |
| left: 0; |
| right: 0; |
| padding: 0 36px; |
| } |
| .back-x { |
| position: absolute; |
| left: 30px; |
| top: -4px; |
| font-size: 56px; |
| color: #2a2a2a; |
| line-height: 1; |
| } |
| .title { |
| margin-left: 90px; |
| font-size: 64px; |
| font-weight: 700; |
| color: #1e1e1e; |
| } |
| |
| |
| .illustration { |
| position: absolute; |
| top: 290px; |
| left: 150px; |
| width: 780px; |
| height: 780px; |
| border-radius: 390px; |
| background: #E0E0E0; |
| border: 1px solid #BDBDBD; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: #757575; |
| text-align: center; |
| padding: 24px; |
| font-size: 36px; |
| } |
| |
| |
| .bottom-action { |
| position: absolute; |
| bottom: 240px; |
| left: 240px; |
| width: 600px; |
| height: 112px; |
| background: #0C2F33; |
| color: #C7E5E7; |
| border-radius: 56px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 700; |
| letter-spacing: 1px; |
| font-size: 36px; |
| } |
| |
| |
| .gesture { |
| position: absolute; |
| bottom: 92px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 320px; |
| height: 10px; |
| background: #FFFFFF; |
| border-radius: 6px; |
| opacity: 0.95; |
| } |
| |
| |
| .overlay { |
| position: absolute; |
| inset: 0; |
| background: rgba(0,0,0,0.62); |
| } |
| .sheet { |
| position: absolute; |
| left: 70px; |
| right: 70px; |
| top: 860px; |
| background: #2F3438; |
| color: #FFF; |
| border-radius: 56px; |
| padding: 64px 56px 56px; |
| box-shadow: 0 18px 40px rgba(0,0,0,0.4); |
| } |
| .bell { |
| width: 84px; height: 84px; |
| background: #3B4146; |
| border-radius: 42px; |
| display: flex; align-items: center; justify-content: center; |
| margin: 0 auto 36px; |
| } |
| .bell svg { width: 46px; height: 46px; fill: #A9D9FF; } |
| .sheet .question { |
| text-align: center; |
| font-size: 56px; |
| line-height: 1.2; |
| margin: 8px 16px 54px; |
| color: #FFFFFF; |
| font-weight: 700; |
| } |
| .question .brand { font-weight: 800; } |
| .actions { |
| display: flex; |
| flex-direction: column; |
| gap: 28px; |
| align-items: center; |
| } |
| .btn { |
| width: 88%; |
| height: 128px; |
| border-radius: 30px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 44px; |
| font-weight: 700; |
| cursor: default; |
| } |
| .btn.allow { |
| background: #CFEAFF; |
| color: #0F3142; |
| } |
| .btn.deny { |
| background: #CFEAFF; |
| color: #0F3142; |
| opacity: 0.92; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="render-target"> |
| |
| <div class="status-bar"> |
| <div>10:22</div> |
| <div class="status-icons"> |
| <div class="icon-signal"></div> |
| <div class="icon-wifi"></div> |
| <div class="icon-battery"></div> |
| </div> |
| </div> |
|
|
| <div class="header"> |
| <div class="back-x">✕</div> |
| <div class="title">Permission Request</div> |
| </div> |
|
|
| <div class="illustration">[IMG: Cartoon person with smartwatch holding a phone]</div> |
|
|
| <div class="bottom-action">SET PERMISSIONS</div> |
| <div class="gesture"></div> |
|
|
| |
| <div class="overlay"></div> |
| <div class="sheet"> |
| <div class="bell"> |
| <svg viewBox="0 0 24 24"> |
| <path d="M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22zm6-6V11a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2zm-2 .5H8V11a4 4 0 0 1 8 0v5.5z"/> |
| </svg> |
| </div> |
| <div class="question"> |
| Allow <span class="brand">Fitbit</span> to send you<br>notifications? |
| </div> |
| <div class="actions"> |
| <div class="btn allow">Allow</div> |
| <div class="btn deny">Don’t allow</div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
