Fully Customizable Character Card Generator In jQuery
| File Size: | 214 KB |
|---|---|
| Views Total: | 601 |
| 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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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<br>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.
