Editing Pocket WebApps/Quote Image Maker

=Quote Image Maker=
{{iscover|[[File:Screenshot-webapp.png|link=https://dascent.github.io/4ai/source/projects/quote-it/]]}}
'''Quote Image Maker''' is a lightweight, responsive, client-side web application that allows you to create beautiful quote images for social media (Facebook posts, covers, etc.).  

It runs entirely in the browser '''no server, no database, no external uploads'''. Everything stays on your device.

==Features==
* '''Canvas presets''' 
* '''Facebook Post''' (1080—1080)  
* '''Facebook Cover''' (820—312)

===Background options===  
* Built-in gradient and pattern library (Aurora, Sunset, Midnight, Mesh, Grid, etc.)  
* Upload your own background image (never leaves the browser session)

===Quote editor===
* Type and position text anywhere on the canvas  
* Align left, center, or right  
* Choose from multiple '''Google Fonts''' (Montserrat, Playfair Display, Roboto Slab)  
* Adjust font size and color  
* Drag and drop positioning, with '''Shift-drag for axis lock''' 
* Text shadow for readability on busy backgrounds

===Stickers / Icons<sup>NEW</sup>=== 
* Built-in icon library (heart, glasses, star, sparkles)  
* Upload custom icons (SVG/PNG)  
* Drag to reposition  
* Scale and rotate with sliders  
* Delete selected icon  
* Add unlimited icons  easy to extend the library by editing a single array

===Export=== 
* Generate crisp PNG images at exact pixel sizes  
* Safe local download (no cloud services involved)  

===Controls=== 
* Reset app state  
* Clear text  
* Delete selected icon  
* Download final design  

===Responsive UI=== 
* On desktop: options on the left, preview on the right  
* On mobile: preview on top, options below  

==How it works==
<ol>
<li>Select a '''canvas size''' (FB Post or FB Cover). </li> 
<li>Pick a ''background'' from the library or upload your own. </li>  
<li>Enter your ''quote text'' and style it (font, size, color, alignment). </li>  
<li>Drag the text box anywhere in the preview.<br>  
   - Hold '''Shift''' to lock dragging to X or Y axis. </li>  
<li>Add '''icons''': <br> 
   - Choose from the dropdown library and click ''Add icon''.<br>
   - Or upload your own SVG/PNG sticker.<br>  
   - Click an icon to select it, then use sliders to resize/rotate. <br> 
   - Drag it freely across the canvas. <br> 
   - Press ''Delete Selected Icon'' to remove it.</li>  
<li>When happy with the design, press '''Download PNG''' to save it locally.</li>   
</ol> 

==Example Customizations==

'''Classic Quote Card''' 
* Canvas: ''Facebook Post''  
* Background: ''Aurora Gradient''  
* Font: ''Playfair Display'' at 72px  
* Text: centered, white color  
* Sticker: small golden star in bottom corner  

'''Playful Moodboard''' 
* Canvas: ''Facebook Cover''  
* Background: ''Custom photo upload'' 
* Font: ''Montserrat'' bold, 60px  
* Text: aligned left, light pink color  
* Stickers: glasses icon near top, heart icon in corner, rotated 20°  

'''Minimalist Design'''  
* Canvas: ''Post''  
* Background: ''Subtle Grid'' pattern  
* Font: ''Roboto Slab'' at 48px  
* Text: aligned right, dark gray color  
* No icons  

==Extending the Icon Library==

The app keeps a simple array in the JavaScript:

<pre>
const ICONS = [
  { id:'heart', name:'Heart', src: svgURI(`<svg ...>...</svg>`) },
  { id:'glasses', name:'Glasses', src: svgURI(`<svg ...>...</svg>`) }
];
</pre>


'''Add a new entry with:'''
<code>id: unique identifier</code>

<code>name: label shown in dropdown</code>

<code>src: inline SVG or Base64-encoded PNG/WebP</code>

'''Example:'''
<pre>{ id:'leaf', name:'Leaf', src: svgURI(`<svg xmlns='http://www.w3.org/2000/svg' ...></svg>`) }</pre>

==Tech Stack==
* Pure HTML5, CSS3, and JavaScript
* No build tools, no frameworks
* Uses Canvas API for rendering
* Google Fonts integration
* Entirely client-side (safe, private, offline-friendly)

==License==
'''MIT License feel free to use, modify, and share. Contributions welcome!'''

{{Ai/tags|Ai/ChatGPT|tg-ai-chatgpt}}