Twibbon Rodja - Idul Fitri Greeting Card Generator

Ucapan Ied Rodja TV - https://ucapan.rodja.co.id

Overview

Twibbon Rodja is a simple web-based application that allows users to generate personalized Idul Fitri greeting cards. Users can input their name, and the application will render a custom flyer with their name centered on a festive Idul Fitri background. The generated image can be downloaded or shared directly.

Features

• Custom Name Input: Users can personalize the card with their name.
• Auto-Centering Text: Ensures that the text is properly aligned within the design.
• Text Wrapping Support: Handles long names gracefully by breaking them into multiple lines.
• Live Preview: The flyer is generated dynamically on a canvas element.
• Download & Share: Users can download the final image or share it directly using the Web Share.
• Beautiful UI: A simple and elegant design inspired by traditional Islamic themes.

Technologies Used

• HTML5
• CSS3 (Custom Fonts & Gradient Styling)
• JavaScript (Canvas for dynamic image generation)

Installation & Usage

1. Clone the Repository

 git clone https://github.com/CreatorB/twibbon-rodja.git
 cd twibbon-rodja

2. Open the Application

Simply open the index.html file in any modern web browser.

3. Personalize Your Flyer

• Enter your name in the input field.
• Click the "Buat Flyer" button.
• Wait for the image to generate.
• Download or share the image.

File Structure

I've provide the inline code, but for standart structure you can following below :

/ twibbon-rodja
 ├── index.html        # Main HTML file
 ├── style.css         # CSS styles
 ├── script.js         # JavaScript logic
 ├── twibbon.png       # Background image
 ├── ClashDisplay-sb.ttf # Custom font

Contributing

Contributions are welcome! Please submit a pull request if you want to enhance the project.

License

This project is licensed under the MIT License. Feel free to modify and distribute it.

---

If you need further customization, let me know! 🚀

Hasan IT Support / Syathiby 2024 | CreatorB