🔧 Update backend with static frontend

backend/src/main/resources/static/app.js

@@ -0,0 +1,540 @@
+// API Base URL - will use relative URLs in production
+const API_BASE = '/api';
+
+// Current user state
+let currentUser = null;
+let allItems = [];
+let categories = [];
+
+// Initialize app
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if user is logged in
+    const token = localStorage.getItem('token');
+    const user = localStorage.getItem('user');
+
+    if (token && user) {
+        currentUser = JSON.parse(user);
+        updateNavigation();
+    }
+
+    // Load initial data
+    loadCategories();
+
+    // Show home page by default
+    const hash = window.location.hash.slice(1);
+    if (hash) {
+        showPage(hash);
+    }
+});
+
+// Navigation
+function showPage(pageName) {
+    // Hide all pages
+    document.querySelectorAll('.page').forEach(page => {
+        page.classList.remove('active');
+    });
+
+    // Show requested page
+    const page = document.getElementById(pageName + 'Page');
+    if (page) {
+        page.classList.add('active');
+
+        // Load page-specific data
+        if (pageName === 'browse') {
+            loadItems();
+        } else if (pageName === 'my-items') {
+            if (!currentUser) {
+                showPage('login');
+                return;
+            }
+            loadMyItems();
+        } else if (pageName === 'my-bookings') {
+            if (!currentUser) {
+                showPage('login');
+                return;
+            }
+            loadMyBookings();
+        } else if (pageName === 'add-item') {
+            if (!currentUser) {
+                showPage('login');
+                return;
+            }
+            loadCategoriesForForm();
+        }
+
+        // Update URL hash
+        window.location.hash = pageName;
+    }
+}
+
+function updateNavigation() {
+    if (currentUser) {
+        document.getElementById('loginLink').style.display = 'none';
+        document.getElementById('registerLink').style.display = 'none';
+        document.getElementById('logoutLink').style.display = 'block';
+        document.getElementById('myItemsLink').style.display = 'block';
+        document.getElementById('myBookingsLink').style.display = 'block';
+        document.getElementById('heroLoginBtn').style.display = 'none';
+    } else {
+        document.getElementById('loginLink').style.display = 'block';
+        document.getElementById('registerLink').style.display = 'block';
+        document.getElementById('logoutLink').style.display = 'none';
+        document.getElementById('myItemsLink').style.display = 'none';
+        document.getElementById('myBookingsLink').style.display = 'none';
+        document.getElementById('heroLoginBtn').style.display = 'inline-block';
+    }
+}
+
+// API Helper Functions
+async function apiCall(endpoint, options = {}) {
+    const token = localStorage.getItem('token');
+    const headers = {
+        'Content-Type': 'application/json',
+        ...options.headers
+    };
+
+    if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+
+    try {
+        const response = await fetch(API_BASE + endpoint, {
+            ...options,
+            headers
+        });
+
+        if (response.status === 401) {
+            logout();
+            throw new Error('Session expired. Please login again.');
+        }
+
+        if (response.status === 204) {
+            return null;
+        }
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data.message || data.error || 'Request failed');
+        }
+
+        return data;
+    } catch (error) {
+        console.error('API Error:', error);
+        throw error;
+    }
+}
+
+// Auth Functions
+async function handleLogin(event) {
+    event.preventDefault();
+
+    const username = document.getElementById('loginUsername').value;
+    const password = document.getElementById('loginPassword').value;
+    const errorDiv = document.getElementById('loginError');
+
+    try {
+        const response = await apiCall('/auth/login', {
+            method: 'POST',
+            body: JSON.stringify({ username, password })
+        });
+
+        localStorage.setItem('token', response.token);
+        localStorage.setItem('user', JSON.stringify(response.user));
+        currentUser = response.user;
+
+        updateNavigation();
+        showPage('browse');
+
+        // Clear form
+        document.getElementById('loginForm').reset();
+        errorDiv.classList.remove('show');
+    } catch (error) {
+        errorDiv.textContent = error.message;
+        errorDiv.classList.add('show');
+    }
+}
+
+async function handleRegister(event) {
+    event.preventDefault();
+
+    const username = document.getElementById('registerUsername').value;
+    const email = document.getElementById('registerEmail').value;
+    const name = document.getElementById('registerName').value;
+    const phone = document.getElementById('registerPhone').value;
+    const address = document.getElementById('registerAddress').value;
+    const password = document.getElementById('registerPassword').value;
+    const errorDiv = document.getElementById('registerError');
+
+    try {
+        await apiCall('/auth/register', {
+            method: 'POST',
+            body: JSON.stringify({
+                username,
+                email,
+                name,
+                phoneNumber: phone,
+                address,
+                password
+            })
+        });
+
+        // Auto login after registration
+        const loginResponse = await apiCall('/auth/login', {
+            method: 'POST',
+            body: JSON.stringify({ username, password })
+        });
+
+        localStorage.setItem('token', loginResponse.token);
+        localStorage.setItem('user', JSON.stringify(loginResponse.user));
+        currentUser = loginResponse.user;
+
+        updateNavigation();
+        showPage('browse');
+
+        // Clear form
+        document.getElementById('registerForm').reset();
+        errorDiv.classList.remove('show');
+    } catch (error) {
+        errorDiv.textContent = error.message;
+        errorDiv.classList.add('show');
+    }
+}
+
+function logout() {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    currentUser = null;
+    updateNavigation();
+    showPage('home');
+}
+
+// Category Functions
+async function loadCategories() {
+    try {
+        categories = await apiCall('/categories');
+
+        // Update category filter
+        const categoryFilter = document.getElementById('categoryFilter');
+        if (categoryFilter) {
+            categoryFilter.innerHTML = '<option value="">All Categories</option>';
+            categories.forEach(cat => {
+                const option = document.createElement('option');
+                option.value = cat.id;
+                option.textContent = cat.name;
+                categoryFilter.appendChild(option);
+            });
+        }
+    } catch (error) {
+        console.error('Failed to load categories:', error);
+    }
+}
+
+function loadCategoriesForForm() {
+    const itemCategory = document.getElementById('itemCategory');
+    if (itemCategory) {
+        itemCategory.innerHTML = '<option value="">Select a category</option>';
+        categories.forEach(cat => {
+            const option = document.createElement('option');
+            option.value = cat.id;
+            option.textContent = cat.name;
+            itemCategory.appendChild(option);
+        });
+    }
+}
+
+// Items Functions
+async function loadItems() {
+    const grid = document.getElementById('itemsGrid');
+    grid.innerHTML = '<div class="loading">Loading items...</div>';
+
+    try {
+        const categoryId = document.getElementById('categoryFilter').value;
+        let endpoint = '/items';
+        if (categoryId) {
+            endpoint += `/category/${categoryId}`;
+        }
+
+        allItems = await apiCall(endpoint);
+        displayItems(allItems, grid);
+    } catch (error) {
+        grid.innerHTML = '<div class="loading">Failed to load items</div>';
+        console.error('Failed to load items:', error);
+    }
+}
+
+function displayItems(items, container) {
+    if (items.length === 0) {
+        container.innerHTML = '<div class="loading">No items found</div>';
+        return;
+    }
+
+    container.innerHTML = items.map(item => `
+        <div class="item-card" onclick="showItemDetail('${item.id}')">
+            <img src="${item.imageUrl || 'https://via.placeholder.com/280x200?text=No+Image'}"
+                 alt="${item.name}"
+                 class="item-image"
+                 onerror="this.src='https://via.placeholder.com/280x200?text=No+Image'">
+            <div class="item-content">
+                <span class="item-category">${getCategoryName(item.categoryId)}</span>
+                <span class="item-status ${item.availability ? 'available' : 'unavailable'}">
+                    ${item.availability ? 'Available' : 'Unavailable'}
+                </span>
+                <div class="item-name">${item.name}</div>
+                <div class="item-description">${item.description}</div>
+                <div class="item-price">$${item.pricePerDay}/day</div>
+            </div>
+        </div>
+    `).join('');
+}
+
+function getCategoryName(categoryId) {
+    const category = categories.find(c => c.id === categoryId);
+    return category ? category.name : 'Unknown';
+}
+
+function searchItems() {
+    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+    const filtered = allItems.filter(item =>
+        item.name.toLowerCase().includes(searchTerm) ||
+        item.description.toLowerCase().includes(searchTerm)
+    );
+    displayItems(filtered, document.getElementById('itemsGrid'));
+}
+
+async function loadMyItems() {
+    const grid = document.getElementById('myItemsGrid');
+    grid.innerHTML = '<div class="loading">Loading your items...</div>';
+
+    try {
+        const items = await apiCall(`/items/owner/${currentUser.id}`);
+
+        if (items.length === 0) {
+            grid.innerHTML = '<div class="loading">You haven\'t added any items yet</div>';
+            return;
+        }
+
+        grid.innerHTML = items.map(item => `
+            <div class="item-card">
+                <img src="${item.imageUrl || 'https://via.placeholder.com/280x200?text=No+Image'}"
+                     alt="${item.name}"
+                     class="item-image"
+                     onerror="this.src='https://via.placeholder.com/280x200?text=No+Image'">
+                <div class="item-content">
+                    <span class="item-category">${getCategoryName(item.categoryId)}</span>
+                    <span class="item-status ${item.availability ? 'available' : 'unavailable'}">
+                        ${item.availability ? 'Available' : 'Unavailable'}
+                    </span>
+                    <div class="item-name">${item.name}</div>
+                    <div class="item-description">${item.description}</div>
+                    <div class="item-price">$${item.pricePerDay}/day</div>
+                    <button onclick="toggleItemAvailability('${item.id}', ${item.availability})" class="btn btn-secondary">
+                        ${item.availability ? 'Mark Unavailable' : 'Mark Available'}
+                    </button>
+                    <button onclick="deleteItem('${item.id}')" class="btn btn-danger">Delete</button>
+                </div>
+            </div>
+        `).join('');
+    } catch (error) {
+        grid.innerHTML = '<div class="loading">Failed to load your items</div>';
+        console.error('Failed to load my items:', error);
+    }
+}
+
+async function handleAddItem(event) {
+    event.preventDefault();
+
+    const name = document.getElementById('itemName').value;
+    const description = document.getElementById('itemDescription').value;
+    const categoryId = document.getElementById('itemCategory').value;
+    const pricePerDay = parseFloat(document.getElementById('itemPrice').value);
+    const imageUrl = document.getElementById('itemImage').value;
+    const errorDiv = document.getElementById('addItemError');
+
+    try {
+        await apiCall('/items', {
+            method: 'POST',
+            body: JSON.stringify({
+                name,
+                description,
+                categoryId,
+                pricePerDay,
+                imageUrl: imageUrl || null,
+                ownerId: currentUser.id
+            })
+        });
+
+        document.getElementById('addItemForm').reset();
+        errorDiv.classList.remove('show');
+        showPage('my-items');
+    } catch (error) {
+        errorDiv.textContent = error.message;
+        errorDiv.classList.add('show');
+    }
+}
+
+async function toggleItemAvailability(itemId, currentAvailability) {
+    try {
+        await apiCall(`/items/${itemId}/availability`, {
+            method: 'PATCH',
+            body: JSON.stringify({ availability: !currentAvailability })
+        });
+        loadMyItems();
+    } catch (error) {
+        alert('Failed to update item availability');
+        console.error('Failed to toggle availability:', error);
+    }
+}
+
+async function deleteItem(itemId) {
+    if (!confirm('Are you sure you want to delete this item?')) {
+        return;
+    }
+
+    try {
+        await apiCall(`/items/${itemId}`, {
+            method: 'DELETE'
+        });
+        loadMyItems();
+    } catch (error) {
+        alert('Failed to delete item');
+        console.error('Failed to delete item:', error);
+    }
+}
+
+// Item Detail
+async function showItemDetail(itemId) {
+    showPage('itemDetail');
+    const content = document.getElementById('itemDetailContent');
+    content.innerHTML = '<div class="loading">Loading item details...</div>';
+
+    try {
+        const item = await apiCall(`/items/${itemId}`);
+
+        content.innerHTML = `
+            <div class="item-detail">
+                <img src="${item.imageUrl || 'https://via.placeholder.com/800x400?text=No+Image'}"
+                     alt="${item.name}"
+                     class="item-detail-image"
+                     onerror="this.src='https://via.placeholder.com/800x400?text=No+Image'">
+                <h1>${item.name}</h1>
+                <div class="item-detail-info">
+                    <span class="item-category">${getCategoryName(item.categoryId)}</span>
+                    <span class="item-status ${item.availability ? 'available' : 'unavailable'}">
+                        ${item.availability ? 'Available' : 'Unavailable'}
+                    </span>
+                </div>
+                <div class="item-detail-section">
+                    <h3>Description</h3>
+                    <p>${item.description}</p>
+                </div>
+                <div class="item-detail-section">
+                    <h3>Price</h3>
+                    <p class="item-price">$${item.pricePerDay}/day</p>
+                </div>
+                ${currentUser && currentUser.id !== item.ownerId && item.availability ? `
+                    <div class="item-detail-section">
+                        <h3>Book this item</h3>
+                        <form id="bookingForm" onsubmit="handleBooking(event, '${item.id}')">
+                            <div class="form-group">
+                                <label>Start Date</label>
+                                <input type="date" id="bookingStartDate" required min="${new Date().toISOString().split('T')[0]}">
+                            </div>
+                            <div class="form-group">
+                                <label>End Date</label>
+                                <input type="date" id="bookingEndDate" required min="${new Date().toISOString().split('T')[0]}">
+                            </div>
+                            <div class="error-message" id="bookingError"></div>
+                            <button type="submit" class="btn btn-primary">Book Now</button>
+                            <button type="button" onclick="showPage('browse')" class="btn btn-secondary">Back to Browse</button>
+                        </form>
+                    </div>
+                ` : `
+                    <button onclick="showPage('browse')" class="btn btn-secondary">Back to Browse</button>
+                `}
+            </div>
+        `;
+    } catch (error) {
+        content.innerHTML = '<div class="loading">Failed to load item details</div>';
+        console.error('Failed to load item detail:', error);
+    }
+}
+
+async function handleBooking(event, itemId) {
+    event.preventDefault();
+
+    const startDate = document.getElementById('bookingStartDate').value;
+    const endDate = document.getElementById('bookingEndDate').value;
+    const errorDiv = document.getElementById('bookingError');
+
+    try {
+        await apiCall('/bookings', {
+            method: 'POST',
+            body: JSON.stringify({
+                itemId,
+                borrowerId: currentUser.id,
+                startDate,
+                endDate
+            })
+        });
+
+        alert('Booking request submitted successfully!');
+        showPage('my-bookings');
+    } catch (error) {
+        errorDiv.textContent = error.message;
+        errorDiv.classList.add('show');
+    }
+}
+
+// Bookings
+async function loadMyBookings() {
+    const container = document.getElementById('bookingsList');
+    container.innerHTML = '<div class="loading">Loading bookings...</div>';
+
+    try {
+        const bookings = await apiCall(`/bookings/borrower/${currentUser.id}`);
+
+        if (bookings.length === 0) {
+            container.innerHTML = '<div class="loading">You have no bookings yet</div>';
+            return;
+        }
+
+        container.innerHTML = bookings.map(booking => `
+            <div class="booking-card">
+                <h3>${booking.itemName || 'Item'}</h3>
+                <div class="booking-info">
+                    <strong>Start Date:</strong> ${new Date(booking.startDate).toLocaleDateString()}
+                </div>
+                <div class="booking-info">
+                    <strong>End Date:</strong> ${new Date(booking.endDate).toLocaleDateString()}
+                </div>
+                <div class="booking-info">
+                    <strong>Total Price:</strong> $${booking.totalPrice}
+                </div>
+                <span class="booking-status ${booking.status}">${booking.status}</span>
+                ${booking.status === 'PENDING' ? `
+                    <button onclick="cancelBooking('${booking.id}')" class="btn btn-danger">Cancel Booking</button>
+                ` : ''}
+            </div>
+        `).join('');
+    } catch (error) {
+        container.innerHTML = '<div class="loading">Failed to load bookings</div>';
+        console.error('Failed to load bookings:', error);
+    }
+}
+
+async function cancelBooking(bookingId) {
+    if (!confirm('Are you sure you want to cancel this booking?')) {
+        return;
+    }
+
+    try {
+        await apiCall(`/bookings/${bookingId}/cancel`, {
+            method: 'PATCH'
+        });
+        loadMyBookings();
+    } catch (error) {
+        alert('Failed to cancel booking');
+        console.error('Failed to cancel booking:', error);
+    }
+}

backend/src/main/resources/static/index.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LocalLend - Lend and Borrow Locally</title>
+    <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="container">
+            <div class="nav-brand">LocalLend</div>
+            <div class="nav-links" id="navLinks">
+                <a href="#" onclick="showPage('home')">Home</a>
+                <a href="#" onclick="showPage('browse')" id="browseLink">Browse</a>
+                <a href="#" onclick="showPage('my-items')" id="myItemsLink" style="display:none;">My Items</a>
+                <a href="#" onclick="showPage('my-bookings')" id="myBookingsLink" style="display:none;">My Bookings</a>
+                <a href="#" onclick="showPage('login')" id="loginLink">Login</a>
+                <a href="#" onclick="showPage('register')" id="registerLink">Register</a>
+                <a href="#" onclick="logout()" id="logoutLink" style="display:none;">Logout</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Container -->
+    <div class="container main-content">
+
+        <!-- Home Page -->
+        <div id="homePage" class="page active">
+            <div class="hero">
+                <h1>Welcome to LocalLend</h1>
+                <p>Lend and borrow items within your local community</p>
+                <button onclick="showPage('browse')" class="btn btn-primary">Browse Items</button>
+                <button onclick="showPage('login')" class="btn btn-secondary" id="heroLoginBtn">Get Started</button>
+            </div>
+
+            <div class="features">
+                <div class="feature-card">
+                    <h3>🏠 Local</h3>
+                    <p>Connect with people in your community</p>
+                </div>
+                <div class="feature-card">
+                    <h3>💰 Save Money</h3>
+                    <p>Borrow instead of buying</p>
+                </div>
+                <div class="feature-card">
+                    <h3>🌱 Sustainable</h3>
+                    <p>Reduce waste by sharing</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Login Page -->
+        <div id="loginPage" class="page">
+            <div class="auth-container">
+                <h2>Login</h2>
+                <form id="loginForm" onsubmit="handleLogin(event)">
+                    <div class="form-group">
+                        <label>Username</label>
+                        <input type="text" id="loginUsername" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Password</label>
+                        <input type="password" id="loginPassword" required>
+                    </div>
+                    <div class="error-message" id="loginError"></div>
+                    <button type="submit" class="btn btn-primary">Login</button>
+                </form>
+                <p class="auth-switch">Don't have an account? <a href="#" onclick="showPage('register')">Register</a></p>
+            </div>
+        </div>
+
+        <!-- Register Page -->
+        <div id="registerPage" class="page">
+            <div class="auth-container">
+                <h2>Register</h2>
+                <form id="registerForm" onsubmit="handleRegister(event)">
+                    <div class="form-group">
+                        <label>Username</label>
+                        <input type="text" id="registerUsername" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Email</label>
+                        <input type="email" id="registerEmail" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Full Name</label>
+                        <input type="text" id="registerName" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Phone</label>
+                        <input type="tel" id="registerPhone" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Address</label>
+                        <input type="text" id="registerAddress" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Password</label>
+                        <input type="password" id="registerPassword" required minlength="6">
+                    </div>
+                    <div class="error-message" id="registerError"></div>
+                    <button type="submit" class="btn btn-primary">Register</button>
+                </form>
+                <p class="auth-switch">Already have an account? <a href="#" onclick="showPage('login')">Login</a></p>
+            </div>
+        </div>
+
+        <!-- Browse Items Page -->
+        <div id="browsePage" class="page">
+            <h2>Browse Items</h2>
+            <div class="search-bar">
+                <input type="text" id="searchInput" placeholder="Search items..." onkeyup="searchItems()">
+                <select id="categoryFilter" onchange="loadItems()">
+                    <option value="">All Categories</option>
+                </select>
+            </div>
+            <div class="items-grid" id="itemsGrid">
+                <div class="loading">Loading items...</div>
+            </div>
+        </div>
+
+        <!-- My Items Page -->
+        <div id="myItemsPage" class="page">
+            <div class="page-header">
+                <h2>My Items</h2>
+                <button onclick="showPage('add-item')" class="btn btn-primary">Add Item</button>
+            </div>
+            <div class="items-grid" id="myItemsGrid">
+                <div class="loading">Loading your items...</div>
+            </div>
+        </div>
+
+        <!-- Add Item Page -->
+        <div id="addItemPage" class="page">
+            <div class="auth-container">
+                <h2>Add New Item</h2>
+                <form id="addItemForm" onsubmit="handleAddItem(event)">
+                    <div class="form-group">
+                        <label>Item Name</label>
+                        <input type="text" id="itemName" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Description</label>
+                        <textarea id="itemDescription" required rows="4"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Category</label>
+                        <select id="itemCategory" required></select>
+                    </div>
+                    <div class="form-group">
+                        <label>Price Per Day ($)</label>
+                        <input type="number" id="itemPrice" required min="0" step="0.01">
+                    </div>
+                    <div class="form-group">
+                        <label>Image URL</label>
+                        <input type="url" id="itemImage" placeholder="https://...">
+                    </div>
+                    <div class="error-message" id="addItemError"></div>
+                    <button type="submit" class="btn btn-primary">Add Item</button>
+                    <button type="button" onclick="showPage('my-items')" class="btn btn-secondary">Cancel</button>
+                </form>
+            </div>
+        </div>
+
+        <!-- My Bookings Page -->
+        <div id="myBookingsPage" class="page">
+            <h2>My Bookings</h2>
+            <div class="bookings-list" id="bookingsList">
+                <div class="loading">Loading bookings...</div>
+            </div>
+        </div>
+
+        <!-- Item Detail Page -->
+        <div id="itemDetailPage" class="page">
+            <div id="itemDetailContent"></div>
+        </div>
+
+    </div>
+
+    <script src="/app.js"></script>
+</body>
+</html>

backend/src/main/resources/static/styles.css

@@ -0,0 +1,448 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: #f5f5f5;
+    color: #333;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Navigation */
+.navbar {
+    background: #1976d2;
+    color: white;
+    padding: 1rem 0;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.navbar .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.nav-brand {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.nav-links {
+    display: flex;
+    gap: 1.5rem;
+}
+
+.nav-links a {
+    color: white;
+    text-decoration: none;
+    transition: opacity 0.2s;
+}
+
+.nav-links a:hover {
+    opacity: 0.8;
+}
+
+/* Main Content */
+.main-content {
+    padding: 2rem 20px;
+}
+
+.page {
+    display: none;
+}
+
+.page.active {
+    display: block;
+    animation: fadeIn 0.3s;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* Hero Section */
+.hero {
+    text-align: center;
+    padding: 4rem 0;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    margin-bottom: 2rem;
+}
+
+.hero h1 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    color: #1976d2;
+}
+
+.hero p {
+    font-size: 1.25rem;
+    color: #666;
+    margin-bottom: 2rem;
+}
+
+/* Features */
+.features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.feature-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+.feature-card h3 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+
+/* Buttons */
+.btn {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    margin: 0.5rem;
+}
+
+.btn-primary {
+    background: #1976d2;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #1565c0;
+}
+
+.btn-secondary {
+    background: #f5f5f5;
+    color: #333;
+    border: 1px solid #ddd;
+}
+
+.btn-secondary:hover {
+    background: #e0e0e0;
+}
+
+.btn-danger {
+    background: #d32f2f;
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #c62828;
+}
+
+/* Auth Forms */
+.auth-container {
+    max-width: 500px;
+    margin: 2rem auto;
+    background: white;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.auth-container h2 {
+    margin-bottom: 1.5rem;
+    color: #1976d2;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #1976d2;
+}
+
+.error-message {
+    color: #d32f2f;
+    margin-bottom: 1rem;
+    padding: 0.75rem;
+    background: #ffebee;
+    border-radius: 4px;
+    display: none;
+}
+
+.error-message.show {
+    display: block;
+}
+
+.success-message {
+    color: #2e7d32;
+    margin-bottom: 1rem;
+    padding: 0.75rem;
+    background: #e8f5e9;
+    border-radius: 4px;
+    display: none;
+}
+
+.success-message.show {
+    display: block;
+}
+
+.auth-switch {
+    text-align: center;
+    margin-top: 1rem;
+}
+
+.auth-switch a {
+    color: #1976d2;
+    text-decoration: none;
+}
+
+/* Search Bar */
+.search-bar {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.search-bar input {
+    flex: 1;
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+.search-bar select {
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+/* Items Grid */
+.items-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.5rem;
+}
+
+.item-card {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    overflow: hidden;
+    transition: transform 0.2s;
+    cursor: pointer;
+}
+
+.item-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.item-image {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    background: #f5f5f5;
+}
+
+.item-content {
+    padding: 1rem;
+}
+
+.item-name {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+.item-description {
+    color: #666;
+    margin-bottom: 0.5rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.item-price {
+    font-size: 1.25rem;
+    color: #1976d2;
+    font-weight: bold;
+}
+
+.item-category {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: #e3f2fd;
+    color: #1976d2;
+    border-radius: 12px;
+    font-size: 0.875rem;
+    margin-bottom: 0.5rem;
+}
+
+.item-status {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.875rem;
+    margin-left: 0.5rem;
+}
+
+.item-status.available {
+    background: #e8f5e9;
+    color: #2e7d32;
+}
+
+.item-status.unavailable {
+    background: #ffebee;
+    color: #d32f2f;
+}
+
+/* Page Header */
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+/* Loading */
+.loading {
+    text-align: center;
+    padding: 2rem;
+    color: #666;
+}
+
+/* Item Detail */
+.item-detail {
+    background: white;
+    border-radius: 8px;
+    padding: 2rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.item-detail-image {
+    width: 100%;
+    max-height: 400px;
+    object-fit: cover;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+}
+
+.item-detail h1 {
+    margin-bottom: 1rem;
+    color: #1976d2;
+}
+
+.item-detail-info {
+    margin-bottom: 1.5rem;
+}
+
+.item-detail-section {
+    margin-bottom: 1.5rem;
+}
+
+.item-detail-section h3 {
+    margin-bottom: 0.5rem;
+}
+
+/* Bookings */
+.booking-card {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    margin-bottom: 1rem;
+}
+
+.booking-card h3 {
+    color: #1976d2;
+    margin-bottom: 0.5rem;
+}
+
+.booking-info {
+    margin-bottom: 0.5rem;
+    color: #666;
+}
+
+.booking-status {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+}
+
+.booking-status.PENDING {
+    background: #fff3e0;
+    color: #f57c00;
+}
+
+.booking-status.CONFIRMED {
+    background: #e8f5e9;
+    color: #2e7d32;
+}
+
+.booking-status.CANCELLED {
+    background: #ffebee;
+    color: #d32f2f;
+}
+
+.booking-status.COMPLETED {
+    background: #e3f2fd;
+    color: #1976d2;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .hero h1 {
+        font-size: 2rem;
+    }
+
+    .search-bar {
+        flex-direction: column;
+    }
+
+    .items-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .nav-links {
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+}