├── script.js ├── index.html ├── style.css └── README.md /script.js: -------------------------------------------------------------------------------- 1 | const networkInput = document.getElementById('network'); 2 | const passwordInput = document.getElementById('password'); 3 | const qrcodeDiv = document.getElementById('qrcode'); 4 | 5 | function generateQR() { 6 | const network = networkInput.value; 7 | const password = passwordInput.value; 8 | const wifiString = `WIFI:T:WPA;S:${network};P:${password};;`; 9 | 10 | qrcodeDiv.innerHTML = ''; 11 | const qr = qrcode(0, 'L'); 12 | qr.addData(wifiString); 13 | qr.make(); 14 | qrcodeDiv.innerHTML = qr.createImgTag(10); 15 | } 16 | 17 | networkInput.addEventListener('input', generateQR); 18 | passwordInput.addEventListener('input', generateQR); 19 | 20 | function printQR(){ 21 | window.print(); 22 | } 23 | 24 | generateQR(); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | QR Code Generator 7 | 8 | 9 | 10 |
11 |

Generate a QR for your WiFi

12 |
13 |
14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |

📱 Point your phone's camera at the QR code to connect to WiFi

22 | 23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 100vh; 7 | margin: 0; 8 | background-color: #f0f0f0; 9 | } 10 | .card { 11 | background-color: white; 12 | border-radius: 8px; 13 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 14 | padding: 50px; 15 | width: 400px; 16 | } 17 | h2 { 18 | text-align: center; 19 | margin-top: 0; 20 | } 21 | #qrcode { 22 | display: flex; 23 | justify-content: center; 24 | margin-bottom: 20px; 25 | } 26 | .input-group { 27 | margin-bottom: 15px; 28 | } 29 | label { 30 | display: block; 31 | margin-bottom: 5px; 32 | } 33 | input { 34 | width: 100%; 35 | padding: 8px; 36 | border: 1px solid #ddd; 37 | border-radius: 4px; 38 | box-sizing: border-box; 39 | } 40 | button { 41 | width: 100%; 42 | padding: 10px; 43 | background-color: #0070f3; 44 | color: white; 45 | border: none; 46 | border-radius: 4px; 47 | cursor: pointer; 48 | font-size: 16px; 49 | } 50 | button:hover { 51 | background-color: #0056b3; 52 | } 53 | .instructions { 54 | text-align: center; 55 | font-size: 14px; 56 | color: #666; 57 | margin-bottom: 15px; 58 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

WiFi Card Generator

3 |
4 | 5 | 6 |
7 |
8 |
9 |
10 | 11 | 12 | 13 |

WiFi Card Generator is a simple web application that generates QR codes for connecting to WiFi networks. Users can scan the QR code to quickly join a network without manually entering the credentials.

14 | 15 |
16 |

17 | 18 | 19 | 20 | 21 | 22 |

23 |
24 | 25 | ## Features 26 | 27 | - **Easy-to-Use Interface**: Generate WiFi QR codes with minimal input. 28 | - **Secure Sharing**: Hide sensitive credentials by only sharing the QR code. 29 | - **Cross-Platform**: Works on all devices with a camera and a QR code scanner. 30 | - **Offline Functionality**: The app can run offline, ensuring secure local generation of QR codes. 31 | 32 | ## Live Demo 33 | 34 | Try it now: [WiFi Card Generator](https://cusaldmsr.github.io/WiFi-Card-Generator/) 35 | 36 | ## Installation 37 | 38 | If you want to host this project locally: 39 | 40 | 1. Clone the repository: 41 | ```bash 42 | git clone https://github.com/cusaldmsr/WiFi-Card-Generator.git 43 | ``` 44 | 2. Navigate to the project directory: 45 | ```bash 46 | cd WiFi-Card-Generator 47 | ``` 48 | 3. Open the `index.html` file in your browser. 49 | 50 | ## How to Use 51 | 52 | 1. Open the application in your browser. 53 | 2. Enter your WiFi credentials: 54 | - **SSID**: The name of your WiFi network. 55 | - **Password**: The password for your network (if applicable). 56 | 3. Click "Generate QR Code." 57 | 4. Scan the QR code with your device to connect to the WiFi network. 58 | 59 | ## Technologies Used 60 | 61 | - **HTML**: Structure of the application. 62 | - **CSS**: Styling for a user-friendly interface. 63 | - **JavaScript**: Core logic for generating QR codes. 64 | - **jsDelivr**: qrcodejs CDN by jsDelivr. 65 | 66 | ## Contributions 67 | 68 | Contributions, issues, and feature requests are welcome! 69 | Feel free to fork the repository and submit a pull request with your enhancements. 70 | 71 | 72 | ## Acknowledgments 73 | 74 | Special thanks to the developers of libraries and tools that make this project possible. 75 | --------------------------------------------------------------------------------