https://github.com/kibuulenoah/wattexs
A Whatsapp text status designer with cool backgrounds, font styles, font colors, text alignment and font sizes
https://github.com/kibuulenoah/wattexs
design flask flask-application fullstack-development python whatsapp whatsapp-web
Last synced: 2 months ago
JSON representation
A Whatsapp text status designer with cool backgrounds, font styles, font colors, text alignment and font sizes
- Host: GitHub
- URL: https://github.com/kibuulenoah/wattexs
- Owner: KibuuleNoah
- License: mit
- Created: 2025-03-31T22:18:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-31T22:46:45.000Z (about 1 year ago)
- Last Synced: 2025-03-31T23:28:39.685Z (about 1 year ago)
- Topics: design, flask, flask-application, fullstack-development, python, whatsapp, whatsapp-web
- Language: JavaScript
- Homepage:
- Size: 3.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Wattexs
A web application that allows users to create custom whatsapp text status on backgrounds and download them as images.
## Features
- 🖼️ **Background Options**:
- Choose from the pre-defined beautiful preset background images
- Text Solid color for text color styling
- Text overlay for better readability on images
- ✏️ **Text Customization**:
- Multiple font styles and sizes
- Custom text color selection
- Four text alignment options (left, center, right, justify)
- Multi-line text support
- 💾 **Export Functionality**:
- Download your creation as a 1000×640 PNG image
- Real-time preview of your design
## How to Use
1. **Enter your text** in the text area
2. **Customize your text**:
- Select font style and size
- Choose text color
- Set text alignment
3. **Select a background**:
- Choose from the grid of background images
4. **Toggle text overlay** if you need better readability on busy backgrounds
5. **Click "Update Canvas" or "Enter key"** to see your changes
6. **Download your image** when you're satisfied with the result
## Technical Details
- **Frontend**:
- HTML5 Canvas for image generation
- Jquery & Vanilla JavaScript for all functionality
- Tailwindcss, daisyUi and custom CSS for styling, layouts and elements
## Setup
### Requirements
- Python 3.8 or higher
- pip (Python package installer)
- Virtualenv (recommended)
### 1. Clone the Repository
```bash
git clone https://github.com/KibuuleNoah/Wattexs.git
```
```bash
cd Wattexs
```
### 2. Create and Activate a Virtual Environment
```bash
python -m venv venv
source venv/bin/activate # On Windows use `venv\Scripts\activate`
```
### 3. Install Dependencies
```bash
pip install -r requirements.txt
```
### 4. Set Up Environment Variables
Create a `.env` file in the root directory and add your environment variables:
### 6. Run the Application
```bash
python main.py
```
## Accessing the Application
Open your web browser and navigate to `http://127.0.0.1:5000/` to see the application running.
## Customization
To add your own background images:
1. Replace the URLs in the `backgroundOptions` array in the JavaScript code
2. Make sure your images are ideally 1000×640 pixels for best results
```javascript
const backgroundOptions = [
"path/to/your/image1.jpg",
"path/to/your/image2.jpg",
// Add more images as needed
];
```
## Browser Support
The application works on all modern browsers including:
- Chrome
- Firefox
- Safari
- Edge
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Contributing
Feel free to fork the repository and submit pull requests. For major changes, please open an issue first to discuss what you would like to change.