Zeenah زينة

Islamic seasonal decorations · زينة المواسم

Decorate your site for the blessed days, and only on them.

Two small files. Add them to any website and it gets lanterns in Ramadan, bunting on Eid, a quiet border for the ten days of Dhul Ḥijjah, a crescent for the new Hijri year, and a greeting on Fridays if you want it. On every other day the script does nothing at all.

Preview the occasions Add it to a site

The occasions

Click one to preview it on this page. Each card shows the next time it will appear by itself, with the Umm al-Qura calendar and your settings below.

Configure

Pick what the script is allowed to do. The snippet updates as you go, and Preview applies it to this page.

Occasions

The optional ones are off by default, since communities differ on marking them. Turn on what fits your site.

Date
Greeting
Look & motion
Paste before </body>

Only settings that differ from the defaults are written out. With no settings at all, the single <script> tag is enough.

Light on the hardware

Decorations shouldn't cost a visitor's battery.

~10 KBJS and CSS together, minified and gzipped. No dependencies, no images, no fonts.
0nodes, timers or styles added on an ordinary day. The CSS is only fetched when an occasion starts.
CSS onlyEvery animation moves transform or opacity, so it runs on the GPU. No canvas, no requestAnimationFrame loop.
StillMotion switches off for visitors who ask for reduced motion, can freeze after a set time, and Eid's falling stars fall once and are removed.
One drawingLanterns and stars are <use> copies of one SVG sprite. Phones get fewer of them.
Hands offpointer-events: none everywhere except the greeting's close button. Nothing blocks a click; nothing prints.

Add it to a site

Pick whichever suits your site. Keep zeenah.css next to zeenah.js and the script loads it by itself.

1 · One tag, with the defaults
<script src="https://cdn.jsdelivr.net/gh/HusseinBenz/zeenah@1/zeenah.min.js" defer></script>
2 · Settings as attributes
<script src="zeenah.min.js" defer
  data-enable="friday,whiteDays"
  data-disable="ashura"
  data-offset="-1"
  data-lang="ar"></script>
3 · A config object, and the API
<script>
  window.ZeenahConfig = {
    occasions: {
      friday: true,
      eidFitr: { greeting: { en: 'Eid Mubarak from all of us!' } }
    },
    custom: [{ id: 'anniversary', gregorian: { month: 11, from: 3 }, theme: 'eid',
               greeting: { en: 'Our 10th birthday', ar: 'عيدنا العاشر' } }]
  };
</script>
<script src="zeenah.min.js" defer></script>

Zeenah.show('ramadan');  Zeenah.hide();  Zeenah.upcoming(5);

Admins can test any day by adding ?zeenah=eidAdha or ?zeenah-date=2027-03-09 to a page's address. The full option list is in the README.