📝 Sticky Notes Pro v6.0

🚀 Ultimate Sticky Notes Card Creator with 18 Card Effects & JSON Import

Transform your text into stunning sticky note cards with realistic effects!

Live Demo • Features • Card Effects • JSON Import • Installation

---

🆕 What's New in v6.0

✨ 18 Card Effects | 📋 Direct JSON Paste | 🎨 28 Color Presets | 📎 15 Attachments | 🔤 18 Fonts

---

---

📋 Table of Contents

• Overview
• What's New in v6.0
• 18 Card Effects
• Features
• JSON Import/Export
• Quick Start
• Installation
• Usage Guide
• Customization
• Keyboard Shortcuts
• Configuration
• Browser Support
• Changelog
• Contributing
• Author
• License

---

🌟 Overview

Sticky Notes Pro is the ultimate web application for creating beautiful, realistic sticky note cards with 18 stunning effects. Perfect for:

• 📚 Students - Create study notes, flashcards, and summaries
• 👨‍💼 Professionals - Design presentation cards and meeting notes
• ✍️ Content Creators - Generate social media content and infographics
• 📖 Book Readers - Capture book summaries and key takeaways
• 🎯 Anyone - Who wants beautiful, shareable note cards!

Why Sticky Notes Pro v6.0?

Feature	Benefit
🎴 18 Card Effects	Fold, Curved, Torn, Stacked, Notebook, Polaroid & more
📋 JSON Import	Paste JSON directly to import multiple notes
🎨 28 Color Presets	Match any brand or mood
📎 15 Attachment Styles	Realistic tape, pins, clips, and more
🔤 18 Fonts (incl. Hindi)	Perfect typography for any language
📥 High-Quality Export	Up to 5x resolution PNG images
📱 Fully Responsive	Works on any device
🌙 Dark Terminal Theme	Easy on the eyes
⚡ Zero Backend	100% client-side, privacy-first

---

🆕 What's New in v6.0

🎴 18 Card Effects

Realistic card styles including fold, curved, torn edges, stacked, notebook, polaroid, and more!

📋 Direct JSON Paste

New JSON Editor modal - paste JSON array to instantly import multiple notes!

🎨 28 Color Presets

Added Cream, Slate, Red, Gold to the existing 24 presets.

📎 15 Attachment Styles

New attachments: Green Pin, Rose Clip, Binder, String, and more!

📋 Copy Individual Note JSON

Each note has a copy button to export its JSON for reuse.

---

🎴 18 Card Effects

Effect	Preview	Description
📄 Fold	Classic	Corner fold with shadow
🌊 Curved	Lifted	Curved shadow underneath
📃 Torn	Rough	Torn/ripped paper edges
📚 Stacked	Layered	Multiple stacked copies
📓 Notebook	Lined	Lined paper with red margin
📸 Polaroid	Photo	Photo frame style
✉️ Postcard	Border	Postcard with stamp
🎯 3D Lifted	Depth	Multiple shadow layers
📋 Taped	Double	Tape strips on corners
🎟️ Ticket	Perforated	Ticket punch holes
📮 Stamp	Dashed	Postage stamp border
📌 Pinned	Cork	Cork board with pin
🎀 Washi	Decorative	Washi tape decoration
🌈 Gradient	Rainbow	Gradient border glow
⬜ Minimal	Clean	Simple clean style
💡 Neon	Glow	Neon glow effect
🪟 Glass	Blur	Glassmorphism style

Effect CSS Classes

.effect-fold      /* Classic corner fold */
.effect-curved    /* Curved lifted shadow */
.effect-torn      /* Torn rough edges */
.effect-stacked   /* Stacked copies */
.effect-notebook  /* Lined notebook paper */
.effect-polaroid  /* Photo frame */
.effect-postcard  /* Postcard style */
.effect-3d        /* 3D shadow layers */
.effect-taped     /* Double tape */
.effect-ticket    /* Perforated ticket */
.effect-stamp     /* Stamp border */
.effect-cork      /* Cork pin */
.effect-washi     /* Washi tape */
.effect-gradient  /* Gradient border */
.effect-minimal   /* Clean minimal */
.effect-neon      /* Neon glow */
.effect-glass     /* Glass blur */

---

✨ Features

🎨 Design & Styling

28 Color Presets

Yellow   Pink     Blue     Green    Purple   Orange   Cyan
Rose     Lime     Amber    Teal     Indigo   Fuchsia  Sky
Emerald  Violet   Sunset   Ocean    Forest   Lavender Peach
Mint     Cream    Slate    Red      Gold     Dark     Neon

15 Attachment Styles

Style	Description
📋 Tape	Classic center tape
📐 Tape Corner	Angled corner tape
📎 Tape Double	Two tape strips
📌 Red Pin	Classic red pushpin
🔶 Gold Pin	Elegant gold pin
🔷 Blue Pin	Cool blue pin
🟢 Green Pin	Fresh green pin
🔗 Silver Clip	Paper clip
✨ Gold Clip	Premium gold clip
💗 Rose Clip	Rose gold clip
📍 Staple	Office staple
🧲 Magnet	Fridge magnet style
📒 Binder	Side binder clip
🧵 String	Hanging string
📄 None	Clean, no attachment

18 Font Families

Standard Fonts

• Inter (Default)
• Poppins
• JetBrains Mono

Hindi/Devanagari Fonts 🇮🇳

• Noto Sans Devanagari
• Tiro Devanagari Hindi
• Mukta
• Hind

Handwriting Fonts ✍️

• Kalam
• Caveat
• Patrick Hand
• Shadows Into Light
• Indie Flower
• Architects Daughter
• Comic Neue

Decorative Fonts 🎨

• Pacifico
• Dancing Script
• Satisfy
• Great Vibes
• Sacramento

📝 Note Types

Type	Emoji	Best Use
General Note	📝	Any content
Law / Rule	⚖️	Laws, principles, rules
Meaning	💡	Definitions, explanations
Example	📌	Real-world cases
Impact	✨	Effects, benefits
Takeaway	🎯	Summaries, conclusions
Quote	💬	Famous quotes
Tip	💡	Tips and tricks
Warning	⚠️	Cautions, alerts
Idea	💭	Creative ideas
Question	❓	Questions
Answer	✅	Answers
Reminder	🔔	Reminders
Goal	🎯	Goals, objectives
Task	✔️	To-do items

---

📋 JSON Import/Export

🆕 Direct JSON Paste Feature

Click the 📋 JSON button to open the JSON Editor and paste notes directly!

JSON Format

Single Note

{
  "title": "Never Outshine the Master",
  "content": "Apne boss ko kabhi overshadow mat karo",
  "bullets": ["Point 1", "Point 2", "Point 3"],
  "type": "law",
  "preset": "yellow",
  "effect": "fold",
  "attach": "tape",
  "font": "kalam",
  "fontSize": "base",
  "rotation": 2,
  "customColor": null
}

Multiple Notes Array

{
  "notes": [
    {
      "title": "Law 1",
      "content": "Content here...",
      "type": "law",
      "preset": "yellow",
      "effect": "fold"
    },
    {
      "title": "Law 2",
      "content": "Content here...",
      "type": "meaning",
      "preset": "blue",
      "effect": "curved"
    }
  ]
}

Available JSON Fields

Field	Type	Options
title	String	Note title
content	String	Main content
bullets	Array	Bullet points
type	String	law, meaning, example, impact, takeaway, quote, tip, warning, idea, note
preset	String	yellow, pink, blue, green, purple, orange, cyan, rose, lime, amber, teal, indigo, fuchsia, sky, emerald, violet, sunset, ocean, forest, lavender, peach, mint, cream, slate, red, gold, dark, neon
effect	String	fold, curved, torn, stacked, notebook, polaroid, postcard, 3d, taped, ticket, stamp, cork, washi, gradient, minimal, neon, glass
attach	String	tape, tape-corner, tape-double, pin, pin-gold, pin-blue, pin-green, clip, clip-gold, clip-rose, staple, magnet, binder, string, none
font	String	inter, poppins, mono, hindi, hindi-tiro, mukta, kalam, caveat, patrick, pacifico, dancing, satisfy, vibes, sacramento, shadows, indie, architect, comic
fontSize	String	xs, sm, base, lg, xl
rotation	Number	-8 to 8 degrees
customColor	String	Hex color like #ff0000

Copy Individual Note

Each note card has a 📋 button to copy its JSON:

{
  "id": "note-1234567890",
  "title": "My Note",
  "content": "Content...",
  ...
}

---

🚀 Quick Start

Option 1: Direct Use

Simply open index.html in any modern browser!

Option 2: Live Server

# Using Python
python -m http.server 8000

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8000

Then visit http://localhost:8000

---

💻 Installation

Clone Repository

git clone https://github.com/SudhirDevOps1/sticky-notes-pro.git
cd sticky-notes-pro

Download ZIP

1. Click the green "Code" button
2. Select "Download ZIP"
3. Extract and open index.html

CDN Dependencies (Auto-loaded)

<!-- Tailwind CSS -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<!-- html2canvas for image export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<!-- Google Fonts (18 fonts) -->
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

---

📖 Usage Guide

Method 1: Text Input (Auto-Parse)

Type or paste structured text in the input area:

Day 1 – Laws 1 to 3

Law 1: Never Outshine the Master 👑
Meaning: Apne boss ko kabhi overshadow mat karo...
Example: Office meeting mein boss se zyada ideas mat do...
Positive Impact: Career mein smooth growth milegi.

Takeaway:
- Leaders ke respect mein raho
- Trust wisely
- Intentions hide karo

Auto-detected keywords:

• Day X → Day headers (Orange)
• Law X: → Law cards (Yellow)
• Meaning: → Meaning cards (Blue)
• Example: → Example cards (Green)
• Impact: / Positive Impact: / Negative Impact: → Impact cards (Pink)
• Takeaway: → Takeaway cards (Purple)
• Bullet points (-, •, *)

Method 2: Visual Card Builder

1. Click ➕ Create button
2. Style Tab: Choose color preset, effect, and attachment
3. Effects Tab: Select from 18 card effects
4. Content Tab: Select type, add title and content
5. Advanced Tab: Pick font, size, rotation
6. Preview Tab: See live preview
7. Click ✅ Add Note

Method 3: JSON Import 🆕

1. Click 📋 JSON button
2. Paste your JSON array
3. Click 📥 Import from JSON
4. Notes are instantly created!

Method 4: Quick Presets

Click 🎨 Presets for one-click styled notes:

• ⚖️ Law Card (Yellow + Fold)
• 💡 Meaning (Blue + Curved)
• 📌 Example (Green + Stacked)
• ✨ Impact (Pink + Fold)
• 🎯 Takeaway (Purple + Notebook)
• And more...

---

⚙️ Customization

Settings Panel

Access via ⚙️ Settings button:

Setting	Options	Default
Author Name	Any text	Sudhir Kumar
Username	Any text	SudhirDevOps1
Image Quality	1x - 5x	3x
Cards Per Row	1 - 3	2
Export Background	Color picker	#0a0a0f
Default Font	18 fonts	Inter
Default Effect	18 effects	Fold
Show Watermark	Toggle	On
Random Rotation	Toggle	On

Custom Text Color

1. Open Create Modal
2. Go to Style Tab
3. Check "Use custom color"
4. Pick color from color picker

Hindi/Multilingual Support 🇮🇳

1. Open Create Modal
2. Go to Advanced Tab
3. Select Hindi font:
   • Noto Sans Devanagari
   • Tiro Devanagari Hindi
   • Mukta
4. Type in Hindi: आप हिंदी में लिख सकते हैं 🎉

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl + N	Open Create Modal
Ctrl + J	Open JSON Editor 🆕
Ctrl + D	Download All Cards
Ctrl + L	Load Example
Escape	Close Modal

---

🔧 Configuration

JavaScript Config Object

let CONFIG = {
    author: 'Sudhir Kumar',      // Your name
    username: 'SudhirDevOps1',   // Your username
    quality: 3,                   // Export quality (1-5)
    columns: 2,                   // Cards per row
    exportBg: '#0a0a0f',         // Export background
    watermark: true,              // Show watermark
    rotation: true,               // Random rotation
    defaultFont: 'inter',         // Default font
    defaultEffect: 'fold'         // Default card effect
};

Adding Custom Color Presets

const PRESETS = {
    'custom-name': { 
        bg: 'linear-gradient(135deg, #color1 0%, #color2 100%)', 
        text: '#textcolor', 
        border: '#bordercolor' 
    }
};

Adding Custom Effects

.effect-custom {
    border-radius: 8px;
    box-shadow: /* your shadow */;
    /* additional styles */
}

---

🌐 Browser Support

Browser	Version	Status
Chrome	80+	✅ Full Support
Firefox	75+	✅ Full Support
Safari	13+	✅ Full Support
Edge	80+	✅ Full Support
Opera	67+	✅ Full Support
IE	All	❌ Not Supported

---

📱 Responsive Breakpoints

Device	Width	Columns
Mobile	< 480px	1
Tablet	480px - 768px	1-2
Laptop	768px - 1024px	2
Desktop	> 1024px	2-3

---

📝 Changelog

v6.0 (Current) 🆕

• ✅ Added 18 card effect styles (Fold, Curved, Torn, Stacked, etc.)
• ✅ Added JSON Editor for direct paste import
• ✅ Added copy individual note JSON
• ✅ Added 4 new color presets (Cream, Slate, Red, Gold)
• ✅ Added 5 new attachments (Green Pin, Rose Clip, Binder, String)
• ✅ Added default effect setting
• ✅ Improved modal responsiveness
• ✅ Fixed all download issues

v5.0

• ✅ Fixed modal overlap issues
• ✅ Fixed download functionality
• ✅ Added 25+ color presets
• ✅ Added 12 attachment styles
• ✅ Added 18 fonts (including Hindi)
• ✅ Added manual text color picker
• ✅ Improved responsive design
• ✅ Tabbed modal interface

v4.0

• Added realistic sticky note effects
• Added presets modal
• Added settings panel

v3.0

• Added custom card creator
• Added export/import functionality

v2.0

• Added dark terminal theme
• Added matrix background

v1.0

• Initial release
• Basic text parsing
• Simple card rendering

---

🤝 Contributing

Contributions are welcome! Here's how:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request

🎯 Contribution Ideas

• More card effects
• More color presets
• Drag and drop reordering
• Multiple export formats (PDF, SVG)
• Cloud sync functionality
• Templates gallery
• Animation effects
• Dark/Light theme toggle

---

👨‍💻 Author

Sudhir Kumar

DevOps Engineer | Full Stack Developer | Open Source Contributor

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 Sudhir Kumar (@SudhirDevOps1)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

🙏 Acknowledgments

• Tailwind CSS - Utility-first CSS framework
• html2canvas - Screenshot library
• Google Fonts - Beautiful fonts
• All contributors and users!

---

⭐ Star this repo if you find it useful!

Made with ❤️ by Sudhir Kumar

---

🎴 Card Effects Gallery

📄 Fold	🌊 Curved	📃 Torn	📚 Stacked
📓 Notebook	📸 Polaroid	✉️ Postcard	🎯 3D
📋 Taped	🎟️ Ticket	📮 Stamp	📌 Cork
🎀 Washi	🌈 Gradient	⬜ Minimal	💡 Neon

---

⬆ Back to Top