A modern, responsive web-based library management system with an intuitive user interface for managing books, members, checkouts, and analytics.
- Real-time statistics display for borrowed books, returned books, overdue books, and missing books
- Total books count, visitor tracking, new member registration, and pending fees overview
- Overdue history table with member details and fine information
- Recent checkouts tracking with comprehensive book and member information
- Top books and new arrivals showcase
- Add, view, and manage library members
- Track member borrowing history
- Monitor member status and activity
- Add new books to the library catalog
- Track book availability status
- Monitor book circulation and popularity
- ISBN-based book identification
- Book checkout and return processing
- Due date tracking
- Overdue book management
- Fine calculation and tracking
- Visual data representation using Chart.js
- Borrowing trends and patterns
- Member activity statistics
- Book popularity metrics
- System configuration options
- User preferences management
- Library policy settings
- User documentation
- System guides
- Support resources
- HTML5 - Semantic markup structure
- CSS3 - Custom styling with Tailwind CSS framework
- JavaScript - Interactive functionality and dynamic content
- Tailwind CSS - Utility-first CSS framework for responsive design
- Lucide Icons - Modern icon library for UI elements
- Chart.js - Data visualization library for analytics
- Google Fonts (Inter) - Typography
LIb UI/
├── index.html # Main dashboard page
├── members.html # Member management page
├── add-books.html # Book addition interface
├── checkout-books.html # Checkout management page
├── analytics.html # Analytics and reports page
├── settings.html # System settings page
├── help.html # Help and documentation page
├── script.js # JavaScript functionality
├── styles.css # Custom CSS styles
└── README.md # Project documentation
- Clone or download the repository to your local machine
- No build process or dependencies installation required
- Open
index.htmlin a modern web browser
# Navigate to project directory
cd "LIb UI"
# Open in browser (example for Windows)
start index.html- Use the sidebar menu to navigate between different sections
- Click on any menu item to access specific functionality
- The active page is highlighted in the navigation menu
- View key metrics at a glance through stat cards
- Monitor overdue books and pending fines
- Track recent checkout activity
- Browse top books and new arrivals
- Use the search bar in the header to find books, members, or ISBN numbers
- Real-time search with debounced input handling
- Select time ranges using the date filter dropdown
- Options include last week, last month, last 3 months, and last 6 months
- Fully responsive layout that adapts to different screen sizes
- Mobile-friendly navigation with collapsible sidebar
- Optimized for desktop, tablet, and mobile devices
- Smooth page transitions with swipe effects
- Hover animations on cards and buttons
- Ripple effects on interactive elements
- Animated statistics counters
- Color-coded status indicators (Available, Borrowed, Overdue)
- Notification system for user actions
- Loading states for asynchronous operations
- Hover effects for better user experience
- Semantic HTML structure
- Keyboard navigation support
- Focus states for interactive elements
- Screen reader friendly markup
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
The project uses a green-based color scheme with Tailwind CSS. To customize colors, modify the color classes in HTML files or add custom CSS in styles.css.
Icons are provided by Lucide. To change icons, update the data-lucide attribute values. Available icons can be found at lucide.dev.
Modify the grid layouts and spacing by adjusting Tailwind CSS utility classes in the HTML files.
- Debounced search input for reduced processing
- Intersection Observer for scroll animations
- CSS transitions for smooth animations
- Optimized image loading
- Minimal external dependencies
- Backend integration for data persistence
- User authentication and authorization
- Advanced search and filtering options
- Export functionality for reports
- Email notifications for overdue books
- Barcode scanning for book checkout
- Multi-language support
- Dark mode toggle
- Print-friendly views
- Create a new HTML file following the existing structure
- Include the sidebar navigation and header
- Add the page reference to the navigation menu in all HTML files
- Update the
getPageIndex()function inscript.jsto include the new page
- Global styles: Edit
styles.css - Component-specific styles: Use Tailwind CSS utility classes in HTML
- Custom animations: Add keyframes in
styles.css
- Page-specific JavaScript: Add functions in
script.js - Event handlers: Use the
initializeInteractionsForElement()function - Animations: Utilize existing animation functions or create new ones
- Search functionality is currently a demo implementation
- Data is static and not persisted
- Charts in analytics page require implementation
- Mobile menu toggle needs enhancement for better UX
Contributions are welcome. Please follow these guidelines:
- Maintain consistent code style
- Test across multiple browsers
- Ensure responsive design is preserved
- Document new features or changes
This project is available for educational and personal use.
For questions or issues, please refer to the Help section within the application or contact the development team.
- Tailwind CSS for the utility-first CSS framework
- Lucide for the icon library
- Chart.js for data visualization capabilities
- Unsplash for placeholder images
- Google Fonts for the Inter typeface