WebPush

Install the app and subscribe to receive notifications on this device.

Loading…

This device's subscriber ID

Keep this ID if you want to send a notification specifically to this device.

``` ### B. `style.css` Create the stylesheet: ```bash nano /var/www/webpush/public/style.css ``` Paste: * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f3f6fb; color: #172033; font-family: system-ui, -apple-system, sans-serif; } .card { width: 100%; max-width: 440px; padding: 32px 24px; border-radius: 20px; background: white; box-shadow: 0 10px 35px #17203312; text-align: center; } .logo { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; background: #155eef; color: white; font-size: 32px; font-weight: 800; } h1 { margin: 0 0 12px; } p { color: #586174; line-height: 1.5; } button { width: 100%; padding: 14px 16px; margin-top: 12px; border: 0; border-radius: 10px; background: #155eef; color: white; font: inherit; font-weight: 650; cursor: pointer; } button:disabled { opacity: .6; cursor: wait; } button.secondary { background: #e9eef8; color: #172033; } [hidden] { display: none !important; } #status { margin-top: 20px; overflow-wrap: anywhere; } #subscriberSection { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e5e9f1; } h2 { font-size: 16px; } code { overflow-wrap: anywhere; font-size: 13px; } .hint { font-size: 13px; }