# Academic LMS Template

A professional, accessible learning management system template designed for educational institutions, online learning platforms, and academic organizations. Built with the Responsive Slot Layout (RSL) framework with a focus on WCAG 2.1 AAA accessibility compliance.

## Overview

The Academic LMS Template showcases a modern, single-page scrolling website that emphasizes:

- **Accessibility Excellence** - WCAG 2.1 AAA compliant with comprehensive keyboard navigation, screen reader optimization, and high contrast support
- **Professional Design** - Clean, authoritative aesthetic inspired by leading LMS platforms (Blackboard, Canvas, Final Site)
- **Inclusive Education** - Universal design principles ensuring every user can access and navigate content
- **Modern UX** - Smooth scrolling, scroll spy navigation, responsive design across all devices

## Features

### Core Functionality
- ✅ **Single-Page Scroll Design** - Smooth navigation between sections with anchor links
- ✅ **Scroll Spy Navigation** - Active section indicator in navbar
- ✅ **Application Modal** - Integrated application form with validation
- ✅ **Responsive Grid Layouts** - Adapts seamlessly from mobile to desktop
- ✅ **Dark Mode Support** - Fully implemented light/dark theme toggle
- ✅ **Back to Top Button** - Convenient navigation for long pages

### Accessibility Features
- ✅ **Full Keyboard Navigation** - Tab, Enter, Space, Escape key support
- ✅ **Screen Reader Optimized** - Semantic HTML, ARIA labels, live regions
- ✅ **High Contrast Ratios** - Meets WCAG AAA standards (7:1 minimum)
- ✅ **Focus Management** - Visible focus indicators and proper focus trapping
- ✅ **Reduced Motion Support** - Respects `prefers-reduced-motion` preference
- ✅ **Skip to Content Link** - Keyboard users can bypass navigation
- ✅ **Form Validation** - Clear error messages and accessible form controls

## Page Sections

### 1. Navigation Bar (Sticky)
- School branding with icon
- Smooth scroll links to all sections
- Theme toggle button (light/dark mode)
- "Apply Now" call-to-action button
- Mobile-responsive hamburger menu

### 2. Hero Section
- Full-viewport hero with background image
- Gradient overlay for text readability
- Main headline and subheading
- Dual call-to-action buttons
- Accessible skip-to-content link

### 3. Quick Stats
- 4-column responsive grid (stacks on mobile)
- Animated counters (respects reduced motion)
- Icon-driven visual hierarchy
- Student count, graduation rate, courses, support availability

### 4. Programs Showcase
- 6 academic program cards
- Responsive 3-column grid (1-column mobile)
- Image + content structure
- Hover effects with accessibility considerations
- "Learn More" buttons for each program

### 5. Student & Faculty Resources
- 2-column layout showcasing resource lists
- Student Resources: library, materials, calendar, tutoring, career services, wellness
- Faculty Portal: LMS, grade management, professional development, research support

### 6. Virtual Campus Tour
- Responsive iframe for embedded video
- RSL iframe component for perfect aspect ratio
- YouTube embed (placeholder - replace with actual tour video)
- Accessible video player with caption support

### 7. Admissions Timeline
- 5-step visual timeline
- Numbered circles with connecting lines
- Step-by-step application process
- Icons for visual reinforcement
- "Start Your Application" CTA

### 8. Student Testimonials
- 3 student testimonial cards
- Student photos, quotes, names, programs
- Responsive grid layout
- Authentic student voices

### 9. Accessibility Features Highlight
- 6-item grid showcasing accessibility features
- Keyboard navigation, screen readers, high contrast, captions, alt text, adjustable text
- Reinforces institutional commitment to inclusion

### 10. Final Call-to-Action
- Full-width section with background image
- Gradient overlay
- Large heading and dual CTAs
- "Apply Now" and "Schedule Tour" buttons

### 11. Footer
- 4-column footer (stacks on mobile)
- About section with accreditation
- Quick links to key pages
- Contact information (address, phone, email, hours)
- Social media links
- Legal links (Privacy, Terms, Accessibility Statement)
- Copyright and RSL attribution

### 12. Application Modal
- Professional modal design with custom styling
- Responsive form with validation
- Fields: First Name, Last Name, Email, Phone, Program, Message
- Real-time validation with error messages
- Success confirmation upon submission
- Keyboard accessible (Escape to close)

## RSL Components Used

This template showcases the following RSL components:

- **Grid System** (`grid.css`, `layout.js`) - Responsive slot-based layouts
- **Navbar** (`navbar.css`, `navbar.js`) - Sticky navigation with mobile toggle
- **Buttons** (`buttons.css`) - Primary, secondary, and ghost button styles
- **Cards** (`cards.css`) - Program cards, stat cards, testimonial cards
- **Modal** (`modal.css`, `modal.js`) - Application form modal
- **Form Elements** (`form-elements.css`, `form-validation.js`) - Modern form styling and validation
- **IFrames** (`iframes.css`) - Responsive video embeds
- **Theme Toggle** (`modern-theme.css`, `theme-toggle.js`) - Light/dark mode
- **Helper Classes** (`helper-classes.css`) - Spacing, typography utilities

## Installation & Usage

### Quick Start

1. **Extract the Template**
   ```bash
   unzip academic-lms-template.zip
   cd academic-lms-template
   ```

2. **Open in Browser**
   - Simply open `index.html` in any modern web browser
   - No build process or server required - works completely offline

3. **View Different Sections**
   - Use the navigation bar to jump to different sections
   - Try the "Apply Now" button to see the application modal
   - Toggle between light and dark modes with the theme button

### File Structure

```
academic-lms-template/
├── index.html                      # Main template file
├── academic-lms-style.css          # Custom template styles
├── academic-lms-script.js          # Custom template JavaScript
├── README.md                       # This file
├── LICENSE                         # MIT License
├── styles/                         # RSL CSS files (35+ files)
├── javascript/                     # RSL JS files (31+ files)
└── images/                         # Images and icons
```

### Dependencies

All dependencies are included in the template:

- **RSL Framework** - Complete CSS and JavaScript files
- **Font Awesome** - Icon library (CDN)
- **Images** - Sample images for hero, programs, testimonials

No additional installations or package managers required.

## Customization Guide

### 1. Update Content

**School Name and Branding:**
```html
<!-- In index.html, find: -->
<a href="#home" class="rsl-navbar-brand">
    <i class="fas fa-graduation-cap"></i> Academic Excellence
</a>

<!-- Replace with your school name -->
```

**Program Names:**
Edit the program cards in the Programs section to reflect your actual academic offerings.

**Contact Information:**
Update address, phone, email in the footer section.

### 2. Customize Colors

Edit `academic-lms-style.css` to change the color scheme:

```css
:root {
    /* Change these values to your brand colors */
    --academic-navy: #1e3a5f;          /* Primary color - nav, headings */
    --academic-royal-blue: #3b82f6;     /* Accent color - buttons, links */
    --academic-success: #10b981;        /* Success messages */
    --academic-alert: #f59e0b;          /* Alerts and warnings */
}
```

### 3. Replace Images

Replace placeholder images in the `images/` folder:

- **Hero Background**: `image-01.png` (1920x1080px recommended)
- **Program Images**: `image-02.png` through `image-07.png` (800x600px recommended)
- **Testimonial Photos**: `image-08.png`, `image-09.png`, `image-10.png` (400x400px recommended)
- **CTA Background**: `image-11.png` (1920x1080px recommended)

**Image Optimization Tips:**
- Use WebP format for better compression
- Compress images to reduce file size
- Maintain aspect ratios for consistency
- Add descriptive alt text for accessibility

### 4. Configure Virtual Tour

Replace the YouTube embed with your actual campus tour video:

```html
<!-- In index.html, Virtual Campus Tour section: -->
<iframe
    src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    title="Your School Campus Virtual Tour"
    ...>
</iframe>
```

### 5. Form Integration

Connect the application form to your backend:

**Option 1: Email Service (Formspree, etc.)**
```html
<form id="apply-form" action="https://formspree.io/f/YOUR_ID" method="POST">
```

**Option 2: Custom Backend**
Edit `academic-lms-script.js` in the form submission handler:
```javascript
if (isValid) {
    // Add your API call here
    fetch('/api/applications', {
        method: 'POST',
        body: JSON.stringify(formData)
    });
}
```

### 6. Add Google Analytics

Add tracking code before closing `</head>` tag:
```html
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
</script>
```

## Accessibility Compliance

This template meets WCAG 2.1 Level AAA standards:

### Keyboard Navigation
- **Tab** - Navigate through interactive elements
- **Enter/Space** - Activate buttons and links
- **Escape** - Close modal dialogs
- **Shift+Tab** - Navigate backwards

### Screen Reader Support
- Semantic HTML elements (`<nav>`, `<main>`, `<section>`, `<article>`, etc.)
- ARIA labels and roles for dynamic content
- Live regions for form validation messages
- Proper heading hierarchy (H1 → H6)

### Color Contrast
- Text: 7:1 contrast ratio (AAA)
- Large text: 4.5:1 contrast ratio (AAA)
- Interactive elements: Clear visual indicators

### Testing Tools
- **WAVE** - Web accessibility evaluation tool
- **axe DevTools** - Browser extension for accessibility testing
- **NVDA/JAWS** - Screen reader testing
- **Keyboard Only** - Navigate without mouse

## Browser Support

✅ Chrome 90+
✅ Firefox 88+
✅ Safari 14+
✅ Edge 90+
✅ Opera 76+

Mobile browsers:
✅ iOS Safari 14+
✅ Chrome Mobile
✅ Samsung Internet

## Responsive Breakpoints

- **Mobile**: < 480px (1-column layouts)
- **Tablet**: 480px - 767px (2-column layouts)
- **Desktop**: 768px - 1023px (3-column layouts)
- **Large Desktop**: 1024px+ (4-column layouts)

## 🎯 Icons

This template uses **Font Awesome 6** icons for easy local preview. Icons work immediately when you open the HTML file directly in your browser.

### Why Font Awesome?

RSL includes its own zero-dependency icon system (300+ SVG icons), but SVG sprite icons require a web server to work due to browser security restrictions. Font Awesome works without a server, making it easier for you to preview and customize templates locally.

### Migrating to RSL Icons (Optional)

For true zero-dependency deployment, you can convert to RSL Icons:

**1. Include RSL Icons CSS:**
```html
<link rel="stylesheet" href="styles/rsl-icons.css">
```

**2. Replace Font Awesome icons:**
```html
<!-- Before (Font Awesome) -->
<i class="fas fa-check"></i>

<!-- After (RSL Icons) -->
<svg class="rsl-icon" aria-hidden="true">
    <use href="images/rsl-icons.svg#rsl-icon-check"></use>
</svg>
```

**3. Common icon mappings:**
| Font Awesome | RSL Icon |
|--------------|----------|
| `fa-check` | `rsl-icon-check` |
| `fa-times` | `rsl-icon-times` |
| `fa-chevron-down` | `rsl-icon-chevron-down` |
| `fa-graduation-cap` | `rsl-icon-graduation-cap` |
| `fa-book` | `rsl-icon-book` |
| `fa-users` | `rsl-icon-users` |
| `fa-calendar` | `rsl-icon-calendar` |
| `fa-envelope` | `rsl-icon-envelope` |
| `fa-phone` | `rsl-icon-phone` |
| `fa-map-marker-alt` | `rsl-icon-map-marker` |

**4. Run a local server** (required for RSL Icons):
```bash
python3 -m http.server 8000
# Then visit http://localhost:8000
```

**Note:** RSL Icons work perfectly on any web hosting - the server requirement is only for local development.

See the [RSL Icons Documentation](../../docs/components/icons/index.html) for the full icon list and API reference.

## Performance Optimization

### Already Optimized
- ✅ No external dependencies (self-contained)
- ✅ Minimal JavaScript (vanilla, no frameworks)
- ✅ CSS custom properties for theming
- ✅ Lazy loading for images below fold
- ✅ Optimized animations with GPU acceleration

### Recommendations
- Compress images with tools like TinyPNG
- Enable GZIP compression on server
- Implement browser caching
- Consider using a CDN for static assets
- Minify CSS and JavaScript for production

## Troubleshooting

### Modal Not Opening
**Issue**: "Apply Now" button doesn't open modal
**Solution**: Ensure `modal.js` is loaded before `academic-lms-script.js`

### Smooth Scrolling Not Working
**Issue**: Navigation links jump instead of smooth scroll
**Solution**: Check if `prefers-reduced-motion` is enabled in browser settings

### Images Not Loading
**Issue**: Broken image icons
**Solution**: Verify images are in the `images/` folder and paths are correct

### Dark Mode Not Persisting
**Issue**: Theme doesn't save on page refresh
**Solution**: Ensure `theme-toggle.js` is included and browser allows localStorage

### Form Validation Not Working
**Issue**: Form submits without validation
**Solution**: Check that `form-validation.js` is loaded and form has `id="apply-form"`

## Support & Updates

### Getting Help
- Review RSL documentation at repository
- Check accessibility guidelines at [WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/)
- Test with accessibility tools (WAVE, axe)

### Extending the Template
- Add new sections by copying existing section structure
- Maintain consistent class naming (follow RSL conventions)
- Test accessibility after any changes
- Preserve semantic HTML structure

## Credits

**Template Created By**: RSL Framework Team
**Built With**: [Responsive Slot Layout (RSL)](https://github.com/anthropics/rsl)
**Icons**: [Font Awesome](https://fontawesome.com/)
**Inspiration**: Leading LMS platforms (Blackboard, Canvas, Final Site)

## License

MIT License - Free to use for personal and commercial projects.

See [LICENSE](LICENSE) file for full details.

---

## Quick Customization Checklist

Before deploying, update:

- [ ] School name and branding in navbar
- [ ] Hero section headline and subheading
- [ ] Program names and descriptions
- [ ] Contact information (address, phone, email)
- [ ] Social media links in footer
- [ ] Virtual tour video embed URL
- [ ] Replace placeholder images
- [ ] Update color scheme in CSS
- [ ] Configure form submission endpoint
- [ ] Add Google Analytics (if desired)
- [ ] Test on multiple devices and browsers
- [ ] Run accessibility audit (WAVE, axe)
- [ ] Review and update meta tags

---

**Built with ❤️ and a commitment to accessible education for all.**
