A modern, responsive web application for tracking student fund collections with a beautiful dark-themed interface, real-time statistics, and comprehensive payment management.

Campus Fund Tracker HTML5 CSS3 JavaScript Bootstrap

• Student login using admission numbers with auto-formatting
• Login attempt limiting (3 attempts with 24-hour lockout)
• Secure session management with cookie-based lockout protection

• Live overview of total students, collections, and payment status
• Animated statistics cards with gradient backgrounds
• Monthly payment tracking and analysis

• Complete student database with search and filtering
• Sortable columns for easy data organization
• Pagination for large datasets
• Individual student payment history tracking

• Detailed payment history modal for each student
• Month-wise payment breakdown
• Visual payment status indicators
• Last payment date tracking

• Dark-themed interface with gradient backgrounds
• Smooth CSS animations and transitions
• Fully responsive design for all devices
• Professional card-based layout
• Font Awesome icons throughout

• Mobile-first approach
• Tablet and desktop optimized
• Touch-friendly interface elements
• Adaptive navigation and layouts

• Web browser (Chrome, Firefox, Safari, Edge)
• Local web server (for CSV data loading)
• Google Sheets CSV file (for student data)

1. Clone the repository

   git clone https://github.com/kanishkaGayan/campus-fund-tracker.git
   cd campus-fund-tracker

2. Start a local server

   # Using Python 3
   python3 -m http.server 8000
   # Using Python 2
   python -m SimpleHTTPServer 8000
   # Using Node.js
   npx http-server

3. Open in browser Navigate to http://localhost:8000

1. Create a Google Sheet with the following columns:

   Name | Admission Number | January | February | March | April | May | June | 
   July | August | September | October | November | December
   

2. Publish as CSV

   • File → Share → Publish to web
   • Choose "Comma-separated values (.csv)"
   • Copy the published URL

3. Update the CSV URL

   • Open script.js
   • Find CSV_URL variable
   • Replace with your Google Sheets CSV URL

campus-fund-tracker/
├── index.html # Main application file
├── script.js # Core JavaScript functionality
├── README.md # This file
└── assets/ # (Optional) Additional assets

Ensure your CSV file follows this structure:

Name,Admission Number,January,February,March,April,May,June,July,August,September,October,November,December
John Doe,2023001,500,500,0,500,500,0,500,500,500,0,500,500
Jane Smith,2023002,500,500,500,500,0,500,500,0,500,500,500,500

// In script.js, modify the expected payment amount
const MONTHLY_PAYMENT = 500; // Change this value

// In script.js, adjust login attempt limits
const MAX_LOGIN_ATTEMPTS = 3;
const LOCKOUT_DURATION = 24 * 60 * 60 * 1000; // 24 hours

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Framework: Bootstrap 5.3.0
• Icons: Font Awesome 6.0.0
• Data Handling: jQuery 3.6.0
• Animations: CSS3 Transitions & Keyframes
• Data Source: Google Sheets CSV

• Auto-formatting: Admission numbers are automatically formatted as you type
• Security: Failed login attempts are tracked and users are locked out after 3 failed attempts
• Session Management: Secure login state management with proper logout functionality

• Real-time Updates: Statistics update automatically when data changes
• Visual Indicators: Color-coded cards for different metrics
• Animated Counters: Smooth number animations for better UX

• Monthly Breakdown: Track payments for each month individually
• Status Indicators: Visual indicators for paid/unpaid status
• History Modal: Detailed payment history in an easy-to-read modal

• Login attempt limiting with lockout mechanism
• Secure session management
• XSS protection through proper data sanitization
• CSRF protection for form submissions

• Responsive table design with horizontal scrolling
• Touch-optimized buttons and interactions
• Adaptive navigation for small screens
• Mobile-first CSS approach

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

Kanishka Meddegoda

• GitHub: @kanishkaGayan
• Email: gayanMedde2022@gmail.com

• Bootstrap team for the excellent CSS framework
• Font Awesome for the comprehensive icon library
• Google Sheets for providing easy CSV data integration
• jQuery team for DOM manipulation utilities

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Contact the maintainer at gayanMedde2022@gmail.com

⭐ Star this repository if you find it helpful!