Remix

Make your own version of GBHSS ID Studio

Edit the prompt below and generate a customized version in seconds.

Original by P Kannan

Describe your app

Create a modern ID Card Generation Website for Government Boys Higher Secondary School, Kunnam, Perambalur District.

Website Name: GBHSS Kunnam ID Card Generator

Main Features:
1. Admin Login Page
   - Username field
   - Password field
   - Login button
   - Use placeholder login values:
     Username: ADMIN_USERNAME
     Password: ADMIN_PASSWORD
   - Show error message for wrong login
   - After successful login, open ID Card Generator Dashboard

2. School Details
   - School Name: Government Boys Higher Secondary School
   - Place: Kunnam
   - District: Perambalur
   - State: Tamil Nadu
   - Add these details automatically on every ID card

3. ID Card Generator Dashboard
   - Student Name
   - Class / Grade
   - Section
   - Roll Number
   - Date of Birth
   - Blood Group
   - Phone Number
   - Address
   - Academic Year
   - Upload Student Photo
   - Upload School Logo
   - Upload Headmaster Signature
   - Generate ID Card button
   - Download as JPG button
   - Download as PDF button
   - Print button

4. ID Card Design
   - Professional Tamil Nadu government school ID card style
   - Vertical ID card layout
   - Size suitable for printing
   - School name at top: Government Boys Higher Secondary School
   - Location line: Kunnam, Perambalur District, Tamil Nadu
   - School logo area at top
   - Student photo box
   - Student details in clean table format
   - Blood group highlighted
   - QR code style design at bottom
   - Headmaster signature area
   - Text: Headmaster Signature
   - Modern colorful design
   - Rounded corners
   - Soft shadows
   - Premium clean UI

5. Website Design Style
   - Modern 3D dashboard UI
   - Glassmorphism + neumorphism design
   - Clean pastel background
   - Tamil Nadu school theme
   - Blue, white, and green color combination
   - Mobile responsive
   - Smooth hover animations
   - Professional and simple interface

6. Important Requirements
   - Fully client-side website
   - No backend required
   - Use only HTML, CSS, and vanilla JavaScript
   - All code should be in one single HTML file
   - The generated ID card preview should update after clicking Generate
   - Uploaded student photo must appear correctly inside the ID card
   - Do not change the uploaded student face/photo
   - Downloaded JPG/PDF should be high quality
   - Make the website beginner-friendly and attractive

Create the complete working code in a single HTML file.

Free to use. No credit card required.