Daily Moon Phase

Put the moon on your own website

Five widgets, free to use on any site — personal, commercial, client work, it does not matter. Pick one, copy two lines, paste them where you want it to appear. There is no iframe, so it inherits nothing and breaks nothing; it renders inside its own shadow root, so your CSS and the widget's can never collide.

• Served over HTTPS. It works on a secure site, which is most of them now. Widgets served over plain http:// are silently blocked by the browser.
• No tracking. No cookie, no pixel, no analytics call, no network request of any kind after the script loads. Everything is calculated in the visitor's own browser.
• About 9 KB gzipped, loaded async, and it never blocks your page rendering.
• Light, dark or automatic, following your visitor's system setting.

All we ask is that you keep the small “Daily Moon Phase” link at the bottom. It is already in the snippet.

Every option is a plain HTML attribute on the container element.

• data-dmp — today, times, week, calendar or phases.
• data-city — any of london, birmingham, manchester, leeds, liverpool, sheffield, bristol, newcastle, nottingham, brighton, edinburgh, glasgow, aberdeen, inverness, cardiff, swansea, belfast, dublin. Only affects rise and set times; the phase itself is the same everywhere.
• data-theme — auto (default), light or dark.
• data-width — a max width in pixels, or any CSS length. Leave it off and the widget fills its container.
• data-accent — a hex colour for the heading and highlights.

You can put as many widgets on a page as you like; one copy of the script drives all of them. If you add one after page load, call DailyMoonPhase.refresh().