Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aymen016/certificate-generator
https://github.com/aymen016/certificate-generator
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/aymen016/certificate-generator
- Owner: Aymen016
- Created: 2024-11-22T16:13:09.000Z (about 2 months ago)
- Default Branch: Main
- Last Pushed: 2024-11-22T16:58:41.000Z (about 2 months ago)
- Last Synced: 2024-11-22T17:37:25.939Z (about 2 months ago)
- Language: HTML
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Certificate Generator ππ
This project is a **Certificate Generator** web application built using **HTML**, **CSS**, and **Python (Flask)**. Users can enter their name, generate a personalized certificate πΌοΈ, and download it as an image.
---
## Features β¨
- **Responsive Design** π±: Modern and visually appealing user interface with gradient backgrounds and interactive elements.
- **Dynamic Certificate Generation** ποΈ: Users can input their name, and the app dynamically adds the name to a certificate template.
- **Animated Background** π: Includes animated elements (e.g., floating spaceship or rocket) for a visually engaging experience.
- **Downloadable Certificates** π₯: Users can download their generated certificate as a PNG file.
- **Customizable Template** π¨: You can replace the default template with your own design!---
## Technologies Used π οΈ
### Frontend
- **HTML**: For the basic structure of the web app.
- **CSS**: For styling and animations.### Backend
- **Python (Flask)**: For handling certificate generation and file downloads.
- **Pillow (PIL)**: For dynamically adding text to the certificate template.---
## File Structure π
```
project-folder/
βββ static/
β βββ images/
β β βββ rocket.png # Rocket image for background
β β βββ certificate_template.png # Certificate template
βββ templates/
β βββ index.html # Main HTML file
βββ app.py # Flask backend
βββ requirements.txt # Python dependencies
```---
## Setup Instructions π οΈ
### Prerequisites
- Python 3.x installed on your system.
- A code editor (e.g., VS Code).### Installation π
1. **Clone the Repository**:
```bash
git clone https://github.com/your-repo/certificate-generator.git
cd certificate-generator
```2. **Set Up Virtual Environment**:
```bash
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
```3. **Install Dependencies**:
```bash
pip install -r requirements.txt
```4. **Place Certificate Template and Assets**:
- Ensure the `certificate_template.png` file is in the `static/images/` folder.
- Add any required images (e.g., rocket) to the same folder.5. **Run the Application**:
```bash
python app.py
```
- The app will run at `http://127.0.0.1:5000`.---
## Usage π‘
1. Open the app in your browser by visiting `http://127.0.0.1:5000`.
2. Enter your name in the input field.
3. Click the **"Generate Certificate"** button.
4. The app generates a certificate preview.
5. Download the certificate by clicking the **Download Certificate** button.---
## Customization π¨
1. **Change the Certificate Template**:
- Replace `certificate_template.png` with your custom design.
- Ensure the template has a blank area where the name will be added.2. **Update Animations**:
- Modify the CSS `@keyframes` rules in `index.html` to adjust the floating effect or add new animated elements.3. **Change Fonts**:
- Update the `FONT_PATH` variable in `app.py` to point to your preferred font file.---
## Dependencies π¦
- **Flask**: Web framework for Python.
- **Pillow**: Python Imaging Library for image manipulation.To install all dependencies:
```bash
pip install -r requirements.txt
```---
Template Example π¨
The default certificate template looks like this:
![certificate_template](https://github.com/user-attachments/assets/c2d3f265-e60e-497b-a926-d30c538afbc2)
You can replace this template with your own design by updating the certificate_template.png file in the static/images/ folder. Ensure the new template has a blank area where the name can be dynamically added!
## Example π
Hereβs how the app looks in action:
![Screenshot 2024-11-22 214542](https://github.com/user-attachments/assets/fc7eb14d-6791-41b8-b3d7-f973b7cd24a6)
---
## Credits π
- **Background Icons**: [Flaticon](https://www.flaticon.com/)
- **Template Design**: Customizable based on user requirements.---
Enjoy building your certificates! πβ¨ Feel free to customize and enhance this project as per your needs.