Helpdesk Location Search
A lightweight, fast search tool for UHCW (University Hospitals Coventry and Warwickshire) helpdesk that combines room location search with a knowledge base for helpdesk information.
What This Skill Does
This skill helps you build and modify a static web application that provides:
Real-time search across CSV location data (rooms, buildings, departments)Integrated knowledge base articles from JSONSite filtering via radio buttonsDark/light theme switchingResponsive mobile designModern hero section with animated backgroundArchitecture
Core Files
**index.html**: Main page structure with hero section, search interface, site filter radio buttons, and results area**script.js**: Main application logic (CSV/JSON parsing, unified search, site filters, theme switching)**rainAnimation.js**: Rain animation class triggered by "make it rain" easter egg**knowledge-base.json**: Helpdesk knowledge base articles in JSON format**styles.css**: All styling including hero section, cards, tables, dark mode, mobile responsive**locations.csv**: Location data from Concept system (Facilities > Locations)**uhcw_image.png**: Hospital image used as hero backgroundInstructions for AI Agent
1. Understanding the Data Sources
**CSV Location Data Structure:**
```javascript
{
Site: string, // Column 0
Building: string, // Column 1
Floor: string, // Column 2
Description: string, // Column 4
'Room Num': string, // Column 5
Department: string // Column 9
}
```
**JSON Knowledge Base Structure:**
```javascript
{
id: string,
title: string,
category: string,
keywords: string[],
summary: string,
content: string,
contacts: array,
lastUpdated: string
}
```
2. Search Functionality
When modifying search:
Location search covers: Site, Building, Department, Description, Room Number, FloorKnowledge base search covers: title, summary, content, category, keywordsSearch is debounced to 300ms in `script.js`Site filter applies to locations only (knowledge base shows all matches)Results display knowledge base cards first, then location table3. Styling and Design Philosophy
**Hero Section:**
Dark blue gradient (#1e4fb5) with 0.65-0.70 alpha overlayHospital image (uhcw_image.png) as animated backgroundAnimation: 70-second vertical pan using GPU-accelerated CSS transformsDesktop: `background-size: 100% auto` (show full width)Mobile: `background-size: auto 100%` (show full height)Animation disabled on mobile (≤768px) and for `prefers-reduced-motion`**Animation Technical Details:**
CSS `::before` pseudo-element with `transform: translateY()`Three layers: animated image (z-index: 0), gradient (z-index: 1), content (z-index: 2)Pseudo-element height: 320%, translates -69% at midpointTiming: ease-in-out for subtle, slow movement**Results Section:**
Light background with distinct visual separation from heroKnowledge base: card layout with category badgesLocations: table on desktop, transforms to cards on mobile (≤768px)**Theme Toggle:**
Fixed position with glass-morphism effectPersisted in localStorage with key 'theme'Dark mode uses CSS custom properties4. Mobile Responsive Breakpoints
**@media (max-width: 768px):**
Scale down radio buttonsTransform location table to cardsScale hero sectionAdjust knowledge base card sizingDisable background animation**@media (max-width: 480px):**
Further adjust hero title, subtitle, search barAdjust theme toggle sizing5. Modifying Search Logic
Search logic is in `script.js`. Key points:
Custom CSV parser handles quoted values and trims whitespace (script.js:100-117)Unified search function combines location and knowledge base resultsActive site filter stored in `activeFilters.site`Knowledge base articles appear once per search; cleared between searches to avoid duplication6. Adding Knowledge Base Articles
Edit `knowledge-base.json`:
```json
{
"id": "unique-id",
"title": "Article Title",
"category": "Services",
"keywords": ["keyword1", "keyword2"],
"summary": "Brief one-line summary",
"content": "Full article content with detailed information",
"contacts": [
{
"name": "Contact Name",
"role": "Role",
"phone": "12345",
"email": "[email protected]"
}
],
"lastUpdated": "2024-01-15"
}
```
7. Development Workflow
**No build tools required:**
1. Open `index.html` directly in browser
2. Make changes to HTML/CSS/JS
3. Refresh browser to see changes
4. Test both desktop and mobile viewports
**Testing checklist:**
Search functionality across both data sourcesSite filter radio buttonsTheme toggle persistenceMobile responsive layout (tables to cards)Background animation (desktop only)Easter egg: "make it rain"8. Known Constraints
**No package manager**: No package.json, npm, or build tools**Static site**: No server-side processing**Data malformation**: Some CSV data is malformed but results remain accurate (e.g., "rainsbrook" shows obsolete rooms first)**Column mapping**: CSV column mapping is hardcoded in script.js:100-1179. Important Technical Details
**Data Loading:**
CSV loaded and parsed synchronously in script.jsJSON loaded via fetch APIBoth must complete before search is available**Filter State Management:**
Active site filter stored in `activeFilters.site` objectOnly applies to location searchesKnowledge base ignores site filter and shows all matches**Theme Management:**
Theme stored in localStorage with key 'theme'Applied to `<html>` element's `data-theme` attributeCSS custom properties handle color switching**Performance Optimizations:**
300ms debounce on search inputGPU-accelerated transforms for background animationAnimation disabled on mobile devicesRespects `prefers-reduced-motion` accessibility settingExamples
**Example 1: Adding a new site filter**
1. Read `index.html` to find radio button section
2. Add new radio input with appropriate value
3. Read `script.js` to find filter handling logic
4. Update filter logic to handle new site value
5. Test search with new filter active
**Example 2: Modifying hero background animation**
1. Read `styles.css` to find `.hero::before` animation
2. Adjust animation duration, timing function, or transform values
3. Test on desktop (animation should work) and mobile (animation should be disabled)
4. Verify `prefers-reduced-motion` still disables animation
**Example 3: Adding a new knowledge base article**
1. Read `knowledge-base.json` to see existing structure
2. Add new article object with all required fields
3. Test search using keywords from new article
4. Verify card displays correctly with category badge, summary, contacts
Constraints
Maintain vanilla JavaScript approach - no frameworks or build toolsPreserve mobile responsive breakpoints and table-to-card transformationsKeep background animation GPU-accelerated and disabled on mobileEnsure theme persistence in localStorageMaintain separation between location and knowledge base search resultsKeep debounce timing at 300ms for optimal UX