Fully Customizable Character Card Generator In jQuery

Fully Customizable Character Card Generator In jQuery
File Size: 214 KB
Views Total: 225
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

An easy-to-use yet fully customizable character card generator written jQuery, Bootstrap 5, Bootstrap Icons, dom-to-image, and FileSaver.js

Features:

  • Custom character name.
  • Custom avatar.
  • Custom background image.
  • Custom quote.
  • Custom colors.
  • Custom avatar shape: circle, diamond, hexagon, or square.
  • Rounded corners.
  • Download the character card as a PNG image.

How to use it:

1. Load the necessary JavaScript and CSS files in the document.

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap-icons.min.css" />

<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- DOM to Image Library -->
<script src="/path/to/cdn/dom-to-image.min.js"></script>

<!-- Font Picker -->
<script src="assets/js/FontPicker.js"></script>

<!-- File Saver Library -->
<script src="/path/to/cdn/FileSaver.min.js"></script>

<!-- Character Card Generator Files -->
<link rel="stylesheet" href="assets/css/style.css" />
<script src="assets/js/script.js"></script>

2. The HTML for the Character Card Generator.

<main class="flex-grow-1 p-3">
  <div class="container">
    <div id="main" class="px-2 py-3">
      <div class="row g-3">
        <div class="col-12 col-xl-6 order-1 order-xl-0">
          <div class="tab-content">
            <div class="tab-pane fade show active" id="ccg-simple-content" role="tabpanel" aria-labelledby="ccg-simple-tab">
              <h3 class="main-header px-2 pt-0 pb-2">Simple Settings</h3>
              <div id="ccg-input" class="px-2">
                <div class="mb-2">
                  <input type="text" id="ccg-name-input" class="form-control rounded-0" placeholder="Character's Name..." name="ccg-name-input" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Character Name" />
                </div>
                <div class="mb-2">
                  <div class="input-group">
                    <input type="text" id="ccg-avatar-input" class="form-control border-end-0 rounded-0" placeholder="Avatar Image URL..." name="ccg-avatar-input" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar Image URL" />
                    <input type="file" id="ccg-avatar-upload" class="form-control rounded-0 d-none" name="ccg-avatar-upload" onchange="avatarUploadOutput(this)" />
                    <label for="ccg-avatar-upload" class="form-label btn btn-link rounded-0 m-0" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar Image Upload"><i class="bi bi-upload"></i></label>
                  </div>
                </div>
                <div class="mb-2">
                  <div class="input-group">
                    <input type="text" id="ccg-background-input" class="form-control border-end-0 rounded-0" placeholder="Background Image URL..." name="ccg-background-input" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Background Image URL" />
                    <input type="file" id="ccg-background-upload" class="form-control rounded-0 d-none" name="ccg-background-upload" onchange="backgroundUploadOutput(this)" />
                    <label for="ccg-background-upload" class="form-label btn btn-link rounded-0 m-0" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Background Image Upload"><i class="bi bi-upload"></i></label>
                  </div>
                </div>
                <div class="mb-2">
                  <textarea id="ccg-quote-input" class="form-control rounded-0" placeholder="Short Quote..." name="ccg-quote-input" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Character Quote"></textarea>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="ccg-advanced-content" role="tabpanel" aria-labelledby="ccg-advanced-tab">
              <h3 class="main-header px-2 pt-0 pb-2">Advanced Settings</h3>
              <div id="ccg-input" class="px-2">
                <div class="mb-2">
                  <select class="form-select rounded-0" id="ccg-card-layout" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Layout&#60;br&#62;Default: Normal">
                    <option selected disabled>Card Layout</option>
                    <option value="normal">Normal</option>
                    <option value="reversed">Reversed</option>
                  </select>
                </div>
                <div class="mb-2">
                  <select class="form-select rounded-0" id="ccg-avatar-shape" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Avatar Shape&#60;br&#62;Default: Diamond">
                    <option selected disabled>Avatar Shape</option>
                    <option value="none">None</option>
                    <option value="circle">Circle</option>
                    <option value="diamond">Diamond</option>
                    <option value="hexagon">Hexagon</option>
                    <option value="square">Square</option>
                  </select>
                </div>
                <div class="mb-2">
                  <select class="form-select rounded-0" id="ccg-card-corners" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Rounded Card Corners&#60;br&#62;Default: None">
                    <option selected disabled>Rounded Corners</option>
                    <option value="none">None</option>
                    <option value="small">Small</option>
                    <option value="medium">Medium</option>
                    <option value="large">Large</option>
                  </select>
                </div>
                <div class="d-flex flex-row mb-2">
                  <div id="font-picker-name" class="w-100" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Name Font&#60;br&#62;Default: EB Garamond">
                    <!-- Loaded via FontPicker.js -->
                  </div>
                  <button class="btn btn-link border-start-0 rounded-0" onclick="ccgResetNameFont()" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Reset Name Font"><i class="bi bi-arrow-counterclockwise"></i></button>
                </div>
                <div class="d-flex flex-row mb-2">
                  <div class="input-group">
                    <select class="form-select rounded-0 flex-shrink-1" id="ccg-name-font-size" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Name Font Size&#60;br&#62;Default: Large">
                      <option selected disabled>Size</option>
                      <option value="xsmall">X-Small</option>
                      <option value="small">Small</option>
                      <option value="medium">Medium</option>
                      <option value="large">Large</option>
                      <option value="xlarge">X-Large</option>
                    </select>
                    <select class="form-select rounded-0 flex-shrink-1" id="ccg-name-text-alignment" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Align Name Text&#60;br&#62;Default: Left">
                      <option selected disabled>Alignment</option>
                      <option value="left">Left</option>
                      <option value="center">Center</option>
                      <option value="right">Right</option>
                    </select>
                    <select class="form-select rounded-0 flex-shrink-1" id="ccg-name-font-weight" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Name Font Weight&#60;br&#62;Default: Normal">
                      <option selected disabled>Weight</option>
                      <option value="lighter">Lighter</option>
                      <option value="light">Light</option>
                      <option value="normal">Normal</option>
                      <option value="bold">Bold</option>
                      <option value="bolder">Bolder</option>
                    </select>
                    <div data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Name Font Italics&#60;br&#62;Default: Unitalicized">
                      <input id="ccg-name-font-italics" class="form-check-input rounded-0 d-none m-0" type="checkbox" value="name-italics" />
                      <label for="ccg-name-font-italics" class="form-label btn btn-link rounded-0 m-0"><i class="bi bi-type-italic"></i></label>
                    </div>
                  </div>
                </div>
                <div class="d-flex flex-row mb-2">
                  <div class="input-group">
                    <div class="d-flex flex-grow-1 w-50" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Name Letter Spacing&#60;br&#62;Default: 0">
                      <input type="range" id="ccg-name-letter-spacing" class="form-range rounded-0 flex-grow-1 px-2 py-0 w-75" name="ccg-name-letter-spacing" min="0.0" max="0.6" step="0.15" value="0.0" />
                      <span id="ccg-name-letter-spacing-value" class="input-group-text form-range-value border-start-0 rounded-0 cursor-default d-inline-block px-2 text-center" style="min-width: 55px;">0</span>
                    </div>
                    <div class="d-flex flex-grow-1 w-50" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Name Word Spacing&#60;br&#62;Default: 0">
                      <input type="range" id="ccg-name-word-spacing" class="form-range rounded-0 flex-grow-1 px-2 py-0 w-75" name="ccg-name-word-spacing" min="0.0" max="0.3" step="0.075" value="0.0" />
                      <span id="ccg-name-word-spacing-value" class="input-group-text form-range-value border-start-0 rounded-0 cursor-default d-inline-block px-2 text-center" style="min-width: 60px;">0</span>
                    </div>
                  </div>
                </div>
                <div class="d-flex flex-row mb-2">
                  <div id="font-picker-quote" class="w-100" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Quote Font&#60;br&#62;Default: Montserrat">
                    <!-- Loaded via FontPicker.js -->
                  </div>
                  <button class="btn btn-link border-start-0 rounded-0" onclick="ccgResetQuoteFont()" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Reset Quote Font"><i class="bi bi-arrow-counterclockwise"></i></button>
                </div>
                <div class="d-flex flex-row mb-2">
                  <div class="input-group">
                    <select class="form-select rounded-0 flex-shrink-1" id="ccg-quote-font-size" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Quote Font Size&#60;br&#62;Default: X-Small">
                      <option selected disabled>Size</option>
                      <option value="xxsmall">XX-Small</option>
                      <option value="xsmall">X-Small</option>
                    </select>
                    <select class="form-select rounded-0 flex-shrink-1" id="ccg-quote-text-alignment" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Align Quote Text&#60;br&#62;Default: Left">
                      <option selected disabled>Alignment</option>
                      <option value="left">Left</option>
                      <option value="center">Center</option>
                      <option value="right">Right</option>
                    </select>
                    <select class="form-select rounded-0 flex-shrink-1" id="ccg-quote-font-weight" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Quote Font Weight&#60;br&#62;Default: Normal">
                      <option selected disabled>Weight</option>
                      <option value="lighter">Lighter</option>
                      <option value="light">Light</option>
                      <option value="normal">Normal</option>
                      <option value="bold">Bold</option>
                      <option value="bolder">Bolder</option>
                    </select>
                    <div data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Quote Font Italics&#60;br&#62;Default: Italicized">
                      <input id="ccg-quote-font-italics" class="form-check-input rounded-0 d-none m-0" type="checkbox" value="quote-italics" checked />
                      <label for="ccg-quote-font-italics" class="form-label btn btn-link rounded-0 m-0"><i class="bi bi-type-italic"></i></label>
                    </div>
                  </div>
                </div>
                <div class="d-flex flex-row mb-2">
                  <div class="input-group">
                    <div class="d-flex flex-grow-1 w-50" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Quote Letter Spacing&#60;br&#62;Default: 0">
                      <input type="range" id="ccg-quote-letter-spacing" class="form-range rounded-0 flex-grow-1 px-2 py-0 w-75" name="ccg-quote-letter-spacing" min="0.0" max="0.6" step="0.15" value="0.0" />
                      <span id="ccg-quote-letter-spacing-value" class="input-group-text form-range-value border-start-0 rounded-0 cursor-default d-inline-block px-2 text-center" style="min-width: 55px;">0</span>
                    </div>
                    <div class="d-flex flex-grow-1 w-50" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Quote Word Spacing&#60;br&#62;Default: 0">
                      <input type="range" id="ccg-quote-word-spacing" class="form-range rounded-0 flex-grow-1 px-2 py-0 w-75" name="ccg-quote-word-spacing" min="0.0" max="0.3" step="0.075" value="0.0" />
                      <span id="ccg-quote-word-spacing-value" class="input-group-text form-range-value border-start-0 rounded-0 cursor-default d-inline-block px-2 text-center" style="min-width: 60px;">0</span>
                    </div>
                  </div>
                </div>
                <div class="mb-2">
                  <div class="input-group">
                    <input type="color" id="ccg-outer-border-color" class="form-control form-control-color rounded-0 flex-shrink-1" name="ccg-outer-border-color" value="#3b3b3b" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Border Color&#60;br&#62;Default: R59, G59, B59" />
                    <input type="color" id="ccg-inner-border-color" class="form-control form-control-color rounded-0 flex-shrink-1" name="ccg-inner-border-color" value="#6e6e6e" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Text Separator Color&#60;br&#62;Default: R110, G110, B110" />
                    <input type="color" id="ccg-name-color" class="form-control form-control-color rounded-0 flex-shrink-1" name="ccg-name-color" value="#ffffff" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Name Text Color&#60;br&#62;Default: R255, G255, B255" />
                    <input type="color" id="ccg-quote-color" class="form-control form-control-color rounded-0 flex-shrink-1" name="ccg-quote-color" value="#cccccc" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Quote Text Color&#60;br&#62;Default: R204, G204, B204" />
                    <input type="color" id="ccg-text-shadow-color" class="form-control form-control-color rounded-0 flex-shrink-1" name="ccg-text-shadow-color" value="#000000" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Text Shadow Color&#60;br&#62;Default: R0, G0, B0" />
                    <input type="color" id="ccg-overlay-color" class="form-control form-control-color rounded-0 flex-shrink-1" name="ccg-overlay-color" value="#000000" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Background Overlay Color&#60;br&#62;Default: R0, G0, B0" />
                    <div class="d-flex flex-grow-1 w-50" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Background Overlay Opacity&#60;br&#62;Default: 75%">
                      <input type="range" id="ccg-overlay-opacity" class="form-range rounded-0 flex-grow-1 px-2 py-0 w-75" name="ccg-overlay-opacity" min="0" max="100" step="1" value="75" />
                      <span id="ccg-overlay-opacity-value" class="input-group-text form-range-value border-start-0 rounded-0 cursor-default d-inline-block px-2 text-center" style="min-width: 60px;">75%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="nav px-2 py-0" id="ccg-settings-controls" role="tablist">
            <button class="btn btn-link rounded-0 me-2" onclick="ccgCapture()" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Capture Card Image"><span class="d-none d-sm-inline">Capture</span><i class="bi bi-camera-fill d-sm-none"></i></button>
            <button class="btn btn-link rounded-0 me-2" onclick="ccgReset()" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Reset All Options"><span class="d-none d-sm-inline">Reset</span><i class="bi bi-arrow-counterclockwise d-sm-none"></i></button>
            <button class="btn btn-link nav-link rounded-0 me-2 p-0 active" id="ccg-simple-tab" data-bs-toggle="tab" data-bs-target="#ccg-simple-content" type="button" role="tab" aria-controls="ccg-simple-content" aria-selected="true">
            <span class="px-3 py-2" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Simple Settings"><span class="d-none d-sm-inline">Simple</span><i class="bi bi-gear-fill d-sm-none"></i></span>
            </button>
            <button class="btn btn-link nav-link rounded-0 me-2 p-0" id="ccg-advanced-tab" data-bs-toggle="tab" data-bs-target="#ccg-advanced-content" type="button" role="tab" aria-controls="ccg-advanced-content" aria-selected="false">
            <span class="px-3 py-2" data-bs-trigger="hover" data-bs-toggle="tooltip" data-bs-placement="top" title="Advanced Settings"><span class="d-none d-sm-inline">Advanced</span><i class="bi bi-gear-wide-connected d-sm-none"></i></span>
            </button>
          </div>
        </div>
        <div id="ccg-preview" class="col-12 col-xl-6 d-flex flex-column order-0 order-xl-1">
          <h3 class="main-header px-2 pt-0 pb-2">Preview</h3>
          <div class="align-items-md-center d-flex flex-grow-1 justify-content-md-center overflow-auto px-2">
            <div id="ccg-output">
              <div class="card rounded-0 h-100" id="ccg-background-output">
                <div class="card-img-overlay rounded-0 h-100 px-0 position-relative">
                  <i id="ccg-background-overlay" class="d-block h-100 position-absolute top-0 left-0 w-100"></i>
                  <div class="d-flex flex-row px-3 position-absolute top-50 translate-middle-y w-100">
                    <div class="card-avatar">
                      <div class="h-100 w-100" id="ccg-avatar-output">
                        <!-- Loaded via script -->
                      </div>
                    </div>
                    <div class="w-100">
                      <div class="card-title align-items-end d-flex m-0 position-relative w-100">
                        <h3 class="apply-font-name lh-base mx-0 mt-0 mb-1 px-2 py-0 text-truncate" id="ccg-name-output">Character Name</h3>
                        <hr class="m-0" />
                      </div>
                      <blockquote class="card-text blockquote align-items-start d-flex m-0">
                        <p class="apply-font-quote fs-6 fst-italic mx-0 mt-1 mb-0 text-truncate-ml-2 px-2 py-0" id="ccg-quote-output">A short but memorable quote...</p>
                      </blockquote>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

Changelog:

2021-08-15

  • Bugfix

This awesome jQuery plugin is developed by H3K83. For more Advanced Usages, please check the demo page or visit the official website.