JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 125
  • Score
    100M100P100Q80073F
  • License MIT

JDZ Captcha is a simple and lightweight captcha solution for web applications. It is designed to be easy to implement and customize, providing a user-friendly experience while ensuring security against automated bots.

Package Exports

  • jdzcaptcha
  • jdzcaptcha/dist/public/js/jdzcaptcha.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jdzcaptcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

JiZy Captcha

Frontend assets (JS + CSS + icons) for JdzCaptcha — an icon-based CAPTCHA where users select the least-displayed icon in a randomized grid. No distorted text.

This package is the client-side companion to the PHP server library JdzCaptcha.

Install

npm install jdzcaptcha

What's in the package

  • dist/public/js/jdzcaptcha.min.js — client script
  • dist/public/css/jdzcaptcha.min.css — stylesheet
  • dist/assets/jdzcaptcha/ — icon series and placeholder
  • lib/ — JS and Less sources and icon sets for custom builds
  • cli/jpack.js, config/ — jpack build entrypoint and templates

Usage

Include the built CSS and JS in your page, and add a container where the captcha should render:

<link rel="stylesheet" href="/css/jdzcaptcha.min.css">
<script src="/js/jdzcaptcha.min.js"></script>

<div class="jdzc" data-series="streamline" data-theme="light"></div>

The server-side PHP library issues the challenge and validates the submission. See the JdzCaptcha docs for full integration.

Icon series & variants

Icons are organized as {series}/{variant}. The package ships with one series — streamline (50 icons, light variant only: black icons on a clear background). Dark-variant and additional series can be dropped into lib/iconsets/{series}/{variant}/ for a custom build.

Select the iconset on the container via data-series and data-theme:

<div class="jdzc" data-series="streamline" data-theme="light"></div>

Custom build

The package ships with jizy-packer scripts:

npm run jpack:dist   # build into dist/
npm run jpack:build  # build into build/ with custom json config

License

MIT — Joffrey Demetz