🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../../../587164.klas4s23.mid-ica.nl/public_html/ELearner/list_hub.php

<?php
session_start();
include "db.php";

// Check if user is logged in
$logged_in = isset($_SESSION['user_id']);
$user_id = $logged_in ? $_SESSION['user_id'] : 0;

// Get search query if exists
$search_query = isset($_GET['search']) ? trim($_GET['search']) : '';

// Handle list copying when user is logged in
$success_message = "";
$error_message = "";

if ($logged_in && isset($_POST['copy_list'])) {
    $list_id = (int)$_POST['list_id'];
    
    try {
        // Start transaction
        $conn->beginTransaction();
        
        // Get original list data
        $stmt = $conn->prepare("
            SELECT id, name, user_id 
            FROM word_lists 
            WHERE id = ? AND public = 1
        ");
        $stmt->execute([$list_id]);
        $original_list = $stmt->fetch();
        
        if (!$original_list) {
            throw new Exception("List not found or is not public");
        }
        
        // Create new list for current user - mark it as a copy (is_copy = 1)
        $new_list_name = $original_list['name'] . " (copied)";
        $stmt = $conn->prepare("
            INSERT INTO word_lists (user_id, name, created_at, is_copy, original_list_id) 
            VALUES (?, ?, NOW(), 1, ?)
        ");
        $stmt->execute([$user_id, $new_list_name, $list_id]);
        $new_list_id = $conn->lastInsertId();
        
        // Copy words from original list
        $stmt = $conn->prepare("
            INSERT INTO list_words (list_id, dutch, english)
            SELECT ?, dutch, english FROM list_words WHERE list_id = ?
        ");
        $stmt->execute([$new_list_id, $list_id]);
        
        // Commit transaction
        $conn->commit();
        
        $success_message = "List added to your favorites!";
    } catch (Exception $e) {
        // Rollback on error
        $conn->rollBack();
        $error_message = "Error copying list: " . $e->getMessage();
    }
}

// Get all public lists with creator username and word count
try {
    $query = "
        SELECT wl.id, wl.name, wl.created_at, wl.score, wl.like_count, wl.dislike_count,
               u.id AS creator_id, u.username AS creator_name, u.profile_photo, 
               COUNT(lw.id) AS word_count
        FROM word_lists wl
        JOIN users u ON wl.user_id = u.id
        LEFT JOIN list_words lw ON wl.id = lw.list_id
        WHERE wl.public = 1
    ";
    
    // Add search condition if search query exists
    if (!empty($search_query)) {
        $query .= " AND (wl.name LIKE ? OR u.username LIKE ?)";
        $search_param = "%" . $search_query . "%";
        $stmt = $conn->prepare($query . " GROUP BY wl.id ORDER BY wl.created_at DESC");
        $stmt->execute([$search_param, $search_param]);
    } else {
        $stmt = $conn->prepare($query . " GROUP BY wl.id ORDER BY wl.created_at DESC");
        $stmt->execute();
    }
    
    $public_lists = $stmt->fetchAll();

    // If user is logged in, get their likes/dislikes and copied lists with scores
    $user_likes = [];
    $user_list_scores = [];
    
    if ($logged_in) {
        // Get likes/dislikes
        $stmt = $conn->prepare("
            SELECT list_id, is_like FROM list_likes WHERE user_id = ?
        ");
        $stmt->execute([$user_id]);
        while ($row = $stmt->fetch()) {
            $user_likes[$row['list_id']] = $row['is_like'];
        }
        
        // Get user's copied lists with scores
        $stmt = $conn->prepare("
            SELECT original_list_id, score FROM word_lists 
            WHERE user_id = ? AND original_list_id IS NOT NULL
        ");
        $stmt->execute([$user_id]);
        while ($row = $stmt->fetch()) {
            if (!empty($row['original_list_id'])) {
                $user_list_scores[$row['original_list_id']] = $row['score'];
            }
        }
    }
} catch (PDOException $e) {
    $error_message = "Error fetching public lists: " . $e->getMessage();
    $public_lists = [];
}

// Function to get preview of list words (limited to first few)
function getListPreview($conn, $list_id, $limit = 5) {
    // Cast limit to integer for security and to fix the SQL error
    $limit = (int)$limit;
    $stmt = $conn->prepare("
        SELECT dutch, english FROM list_words 
        WHERE list_id = ? 
        ORDER BY id 
        LIMIT $limit
    ");
    $stmt->execute([$list_id]);
    return $stmt->fetchAll();
}

// Get list preview if requested
$preview_list = null;
$preview_words = [];
if (isset($_GET['preview']) && is_numeric($_GET['preview'])) {
    $preview_id = (int)$_GET['preview'];
    
    // Get list details
    $stmt = $conn->prepare("
        SELECT wl.id, wl.name, wl.created_at, wl.score, wl.like_count, wl.dislike_count,
               u.id AS creator_id, u.username AS creator_name, u.profile_photo,
               (SELECT COUNT(*) FROM list_words WHERE list_id = wl.id) AS word_count
        FROM word_lists wl
        JOIN users u ON wl.user_id = u.id
        WHERE wl.id = ? AND wl.public = 1
    ");
    $stmt->execute([$preview_id]);
    $preview_list = $stmt->fetch();
    
    if ($preview_list) {
        // Get all words in this list
        $stmt = $conn->prepare("
            SELECT dutch, english FROM list_words
            WHERE list_id = ?
            ORDER BY id
        ");
        $stmt->execute([$preview_id]);
        $preview_words = $stmt->fetchAll();
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List Hub - ELearner</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="font-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        .preview-button {
            transition: all 0.2s;
        }
        .preview-button:hover {
            transform: scale(1.05);
        }
        .list-card {
            transition: all 0.3s;
        }
        .list-card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .rating-button {
            transition: all 0.2s;
            cursor: pointer;
        }
        .rating-button:hover {
            transform: scale(1.2);
        }
        .rating-button.active {
            color: #3B82F6;
        }
        .rating-button.active.dislike {
            color: #EF4444;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
    <div class="main-content flex-1">
    <div class="container mx-auto px-4 py-4 sm:py-8">
        <header class="bg-white rounded-lg shadow-md p-4 sm:p-6 mb-6 sm:mb-8">
            <div class="flex flex-wrap items-center justify-between">
                <div class="flex items-center">
                    <a href="homepage.php">
                        <img src="images/icon-e-learner-blue.png" alt="ELearner Logo" class="h-10 sm:h-12 mr-3 sm:mr-4">
                    </a>
                    <div>
                        <h1 class="text-2xl sm:text-3xl font-bold text-blue-600">ELearner</h1>
                        <p class="text-sm sm:text-base text-gray-600">Public Word Lists Hub</p>
                    </div>
                </div>
                
                <!-- Mobile menu button -->
                <button id="mobileMenuBtn" class="md:hidden p-2 rounded text-blue-600 hover:bg-blue-100">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
                
                <nav id="desktopMenu" class="hidden md:block">
                    <ul class="flex space-x-4 sm:space-x-6">
                        <li><a href="homepage.php" class="text-blue-500 font-medium hover:underline">Home</a></li>
                        <?php if($logged_in): ?>
                            <li><a href="index.php" class="text-blue-500 font-medium hover:underline">Vocabulary Tool</a></li>
                            <li><a href="my_lists.php" class="text-blue-500 font-medium hover:underline">My Lists</a></li>
                            <li><a href="list_hub.php" class="text-blue-500 font-medium hover:underline">List Hub</a></li>
                            <li><a href="profile.php" class="text-blue-500 font-medium hover:underline">My Profile</a></li>
                            <?php if(isset($_SESSION['is_admin']) && $_SESSION['is_admin'] == 1): ?>
                                <li><a href="admin.php" class="text-purple-500 font-medium hover:underline">Admin</a></li>
                            <?php endif; ?>
                            <li><a href="logout.php" class="text-red-500 font-medium hover:underline">Logout</a></li>
                        <?php else: ?>
                            <li><a href="login.php" class="text-blue-500 font-medium hover:underline">Login</a></li>
                            <li><a href="register.php" class="text-blue-500 font-medium hover:underline">Register</a></li>
                        <?php endif; ?>
                        <li>
                            <button id="fontToggleBtn" class="bg-purple-500 text-white px-3 py-1 rounded hover:bg-purple-600">
                                Toggle Font
                            </button>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <!-- Mobile menu, hidden by default -->
            <nav id="mobileMenu" class="md:hidden hidden mt-4 pb-2">
                <ul class="flex flex-col space-y-3">
                    <li><a href="homepage.php" class="block text-blue-500 font-medium hover:underline">Home</a></li>
                    <?php if($logged_in): ?>
                        <li><a href="index.php" class="block text-blue-500 font-medium hover:underline">Vocabulary Tool</a></li>
                        <li><a href="my_lists.php" class="block text-blue-500 font-medium hover:underline">My Lists</a></li>
                        <li><a href="list_hub.php" class="block text-blue-500 font-medium hover:underline">List Hub</a></li>
                        <li><a href="profile.php" class="block text-blue-500 font-medium hover:underline">My Profile</a></li>
                        <?php if(isset($_SESSION['is_admin']) && $_SESSION['is_admin'] == 1): ?>
                            <li><a href="admin.php" class="block text-purple-500 font-medium hover:underline">Admin</a></li>
                        <?php endif; ?>
                        <li><a href="logout.php" class="block text-red-500 font-medium hover:underline">Logout</a></li>
                    <?php else: ?>
                        <li><a href="login.php" class="block text-blue-500 font-medium hover:underline">Login</a></li>
                        <li><a href="register.php" class="block text-blue-500 font-medium hover:underline">Register</a></li>
                    <?php endif; ?>
                    <li>
                        <button id="mobileFontToggleBtn" class="bg-purple-500 text-white px-3 py-1 rounded hover:bg-purple-600">
                            Toggle Font
                        </button>
                    </li>
                </ul>
            </nav>
        </header>
        
        <?php if ($success_message): ?>
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6" role="alert">
                <p><?php echo $success_message; ?></p>
            </div>
        <?php endif; ?>
        
        <?php if ($error_message): ?>
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6" role="alert">
                <p><?php echo $error_message; ?></p>
            </div>
        <?php endif; ?>
        
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- Main content -->
            <div class="w-full <?php echo $preview_list ? 'lg:w-2/3' : ''; ?>">
                <div class="bg-white rounded-lg shadow-md p-4 sm:p-6 mb-6">
                    <div class="flex flex-wrap justify-between items-center mb-4">
                        <h2 class="text-xl font-bold mb-2 sm:mb-0">Public Word Lists</h2>
                        
                        <!-- Search box -->
                        <div class="w-full sm:w-auto mt-2 sm:mt-0">
                            <form action="" method="GET" class="flex">
                                <input type="text" name="search" placeholder="Search lists or creators..." 
                                       value="<?php echo htmlspecialchars($search_query); ?>"
                                       class="border p-2 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500 w-full sm:w-64 text-base">
                                <button type="submit" class="bg-blue-500 text-white p-2 rounded-r hover:bg-blue-600">
                                    <i class="fas fa-search"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    
                    <?php if (count($public_lists) === 0): ?>
                        <div class="text-center py-10 bg-gray-50 rounded-lg">
                            <?php if(!empty($search_query)): ?>
                                <i class="fas fa-search text-gray-400 text-5xl mb-3"></i>
                                <h3 class="text-lg font-medium text-gray-700 mb-2">No Lists Found</h3>
                                <p class="text-gray-500 mb-4">No lists match your search for "<?php echo htmlspecialchars($search_query); ?>"</p>
                                <a href="list_hub.php" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                                    View All Lists
                                </a>
                            <?php else: ?>
                                <i class="fas fa-list-ul text-gray-400 text-5xl mb-3"></i>
                                <h3 class="text-lg font-medium text-gray-700 mb-2">No Public Lists Available</h3>
                                <p class="text-gray-500 mb-4">Be the first to share your word lists with the community!</p>
                                
                                <?php if($logged_in): ?>
                                    <a href="my_lists.php" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                                        Go to My Lists
                                    </a>
                                <?php else: ?>
                                    <a href="login.php" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                                        Login to Create Lists
                                    </a>
                                <?php endif; ?>
                            <?php endif; ?>
                        </div>
                    <?php else: ?>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="listsGrid">
                            <?php foreach($public_lists as $list): ?>
                                <div class="list-card bg-white border rounded-lg shadow-sm overflow-hidden">
                                    <div class="p-4">
                                        <h3 class="font-bold text-lg mb-1 truncate" title="<?php echo htmlspecialchars($list['name']); ?>">
                                            <?php echo htmlspecialchars($list['name']); ?>
                                        </h3>
                                        <p class="text-sm text-gray-600 mb-3 flex items-center">
                                            <a href="user_profile.php?id=<?php echo $list['creator_id']; ?>" class="flex items-center hover:underline" title="View <?php echo htmlspecialchars($list['creator_name']); ?>'s profile">
                                                <?php if (!empty($list['profile_photo']) && file_exists($list['profile_photo'])): ?>
                                                    <img src="<?php echo htmlspecialchars($list['profile_photo']); ?>" alt="Creator" class="w-6 h-6 rounded-full object-cover mr-2">
                                                <?php else: ?>
                                                    <span class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center mr-2">
                                                        <i class="fas fa-user text-gray-400 text-xs"></i>
                                                    </span>
                                                <?php endif; ?>
                                                By <span class="font-medium ml-1"><?php echo htmlspecialchars($list['creator_name']); ?></span>
                                            </a>
                                        </p>
                                        
                                        <div class="flex justify-between text-sm text-gray-500 mb-4">
                                            <span><?php echo $list['word_count']; ?> words</span>
                                            <span><?php echo date('M j, Y', strtotime($list['created_at'])); ?></span>
                                        </div>
                                        
                                        <?php 
                                        // Get preview of first few words
                                        $preview = getListPreview($conn, $list['id'], 3);
                                        if(count($preview) > 0):
                                        ?>
                                            <div class="bg-gray-50 p-2 rounded text-sm mb-3">
                                                <div class="font-medium mb-1">Preview:</div>
                                                <?php foreach($preview as $index => $word): ?>
                                                    <?php if($index < 2): ?>
                                                        <div class="mb-1 truncate">
                                                            <?php echo htmlspecialchars($word['dutch']); ?> → <?php echo htmlspecialchars($word['english']); ?>
                                                        </div>
                                                    <?php endif; ?>
                                                <?php endforeach; ?>
                                                <?php if(count($preview) > 2): ?>
                                                    <div class="text-gray-500">...and more</div>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                        
                                        <!-- Score section -->
                                        <div class="mb-3">
                                            <?php if($list['score'] !== null): ?>
                                                <div class="flex items-center mb-1">
                                                    <span class="text-sm font-medium">Creator's Score: </span>
                                                    <span class="<?php echo $list['score'] >= 80 ? 'text-green-600' : ($list['score'] >= 50 ? 'text-yellow-600' : 'text-red-600'); ?> font-medium ml-1">
                                                        <?php echo $list['score']; ?>%
                                                    </span>
                                                </div>
                                            <?php endif; ?>
                                            
                                            <?php if(isset($user_list_scores[$list['id']])): ?>
                                                <div class="flex items-center">
                                                    <span class="text-sm font-medium">Your Score: </span>
                                                    <span class="<?php echo $user_list_scores[$list['id']] >= 80 ? 'text-green-600' : ($user_list_scores[$list['id']] >= 50 ? 'text-yellow-600' : 'text-red-600'); ?> font-medium ml-1">
                                                        <?php echo $user_list_scores[$list['id']]; ?>%
                                                    </span>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                        
                                        <div class="flex flex-wrap justify-between items-center gap-y-2 pt-2 border-t border-gray-100">
                                            <div class="flex items-center gap-3">
                                                <?php if ($logged_in): ?>
                                                    <button class="rating-button like flex items-center <?php echo isset($user_likes[$list['id']]) && $user_likes[$list['id']] == 1 ? 'active' : ''; ?>" 
                                                            data-list-id="<?php echo $list['id']; ?>" 
                                                            data-action="1" 
                                                            title="Like this list">
                                                        <i class="fas fa-thumbs-up"></i>
                                                        <span class="like-count ml-1"><?php echo $list['like_count']; ?></span>
                                                    </button>
                                                    <span class="text-gray-300">|</span>
                                                    <button class="rating-button dislike flex items-center <?php echo isset($user_likes[$list['id']]) && $user_likes[$list['id']] == 0 ? 'active' : ''; ?>" 
                                                            data-list-id="<?php echo $list['id']; ?>" 
                                                            data-action="0" 
                                                            title="Dislike this list">
                                                        <i class="fas fa-thumbs-down"></i>
                                                        <span class="dislike-count ml-1"><?php echo $list['dislike_count']; ?></span>
                                                    </button>
                                                <?php else: ?>
                                                    <a href="login.php" class="flex items-center text-gray-500" title="Login to like">
                                                        <i class="fas fa-thumbs-up"></i>
                                                        <span class="ml-1"><?php echo $list['like_count']; ?></span>
                                                    </a>
                                                    <span class="text-gray-300">|</span>
                                                    <a href="login.php" class="flex items-center text-gray-500" title="Login to dislike">
                                                        <i class="fas fa-thumbs-down"></i>
                                                        <span class="ml-1"><?php echo $list['dislike_count']; ?></span>
                                                    </a>
                                                <?php endif; ?>
                                            </div>
                                            
                                            <div class="flex items-center gap-3">
                                                <a href="?preview=<?php echo $list['id']; ?>" class="preview-button inline-flex items-center text-blue-600 hover:text-blue-800 text-sm">
                                                    <i class="fas fa-eye mr-1"></i> View
                                                </a>
                                                
                                                <?php if($logged_in): ?>
                                                    <!-- Learn right away button -->
                                                    <a href="learn_copied_list.php?list_id=<?php echo $list['id']; ?>" class="inline-flex items-center text-purple-600 hover:text-purple-800 text-sm">
                                                        <i class="fas fa-graduation-cap mr-1"></i> Learn
                                                    </a>
                                                    
                                                    <!-- Changed Save to Favorite with star icon -->
                                                    <form method="post" class="inline">
                                                        <input type="hidden" name="list_id" value="<?php echo $list['id']; ?>">
                                                        <button type="submit" name="copy_list" class="inline-flex items-center text-yellow-600 hover:text-yellow-800 text-sm">
                                                            <i class="fas fa-star mr-1"></i> Favorite
                                                        </button>
                                                    </form>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
            
            <!-- Preview panel - Only show when a list is being previewed -->
            <?php if ($preview_list): ?>
                <div class="w-full lg:w-1/3">
                    <div class="bg-white rounded-lg shadow-md p-4 sm:p-6 sticky top-4">
                        <div class="flex justify-between items-start mb-4">
                            <h2 class="text-xl font-bold"><?php echo htmlspecialchars($preview_list['name']); ?></h2>
                            <a href="list_hub.php" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-times"></i>
                            </a>
                        </div>
                        
                        <p class="text-sm text-gray-600 mb-3 flex items-center">
                            <a href="user_profile.php?id=<?php echo $preview_list['creator_id']; ?>" class="flex items-center hover:underline" title="View <?php echo htmlspecialchars($preview_list['creator_name']); ?>'s profile">
                                <?php if (!empty($preview_list['profile_photo']) && file_exists($preview_list['profile_photo'])): ?>
                                    <img src="<?php echo htmlspecialchars($preview_list['profile_photo']); ?>" alt="Creator" class="w-6 h-6 rounded-full object-cover mr-2">
                                <?php else: ?>
                                    <span class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center mr-2">
                                        <i class="fas fa-user text-gray-400 text-xs"></i>
                                    </span>
                                <?php endif; ?>
                                By <span class="font-medium ml-1"><?php echo htmlspecialchars($preview_list['creator_name']); ?></span>
                            </a>
                        </p>
                        
                        <div class="flex justify-between text-sm text-gray-500 mb-4">
                            <span><?php echo $preview_list['word_count']; ?> words</span>
                            <span><?php echo date('M j, Y', strtotime($preview_list['created_at'])); ?></span>
                        </div>
                        
                        <?php if ($preview_list['score'] !== null): ?>
                            <div class="mb-3">
                                <span class="text-sm font-medium">Creator's Score: </span>
                                <span class="<?php echo $preview_list['score'] >= 80 ? 'text-green-600' : ($preview_list['score'] >= 50 ? 'text-yellow-600' : 'text-red-600'); ?> font-medium">
                                    <?php echo $preview_list['score']; ?>%
                                </span>
                            </div>
                        <?php endif; ?>
                        
                        <?php if (isset($user_list_scores[$preview_list['id']])): ?>
                            <div class="mb-3">
                                <span class="text-sm font-medium">Your Score: </span>
                                <span class="<?php echo $user_list_scores[$preview_list['id']] >= 80 ? 'text-green-600' : ($user_list_scores[$preview_list['id']] >= 50 ? 'text-yellow-600' : 'text-red-600'); ?> font-medium">
                                    <?php echo $user_list_scores[$preview_list['id']]; ?>%
                                </span>
                            </div>
                        <?php endif; ?>
                        
                        <?php if (count($preview_words) > 0): ?>
                            <div class="mt-4">
                                <h3 class="font-medium mb-2">All Words in This List:</h3>
                                <div class="bg-gray-50 p-3 rounded max-h-96 overflow-y-auto">
                                    <table class="w-full">
                                        <thead class="text-sm font-medium bg-gray-100">
                                            <tr>
                                                <th class="p-2 text-left">Dutch</th>
                                                <th class="p-2 text-left">English</th>
                                            </tr>
                                        </thead>
                                        <tbody class="text-sm">
                                            <?php foreach ($preview_words as $word): ?>
                                                <tr class="border-b">
                                                    <td class="p-2"><?php echo htmlspecialchars($word['dutch']); ?></td>
                                                    <td class="p-2"><?php echo htmlspecialchars($word['english']); ?></td>
                                                </tr>
                                            <?php endforeach; ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        <?php endif; ?>
                        
                        <?php if ($logged_in): ?>
                            <div class="mt-4 flex flex-col space-y-2">
                                <!-- Learn right away button -->
                                <a href="learn_copied_list.php?list_id=<?php echo $preview_list['id']; ?>" class="bg-purple-500 text-white px-4 py-2 rounded text-center hover:bg-purple-600 flex items-center justify-center">
                                    <i class="fas fa-graduation-cap mr-2"></i> Learn Right Away
                                </a>
                                
                                <!-- Changed to Favorite with star icon -->
                                <form method="post" class="w-full">
                                    <input type="hidden" name="list_id" value="<?php echo $preview_list['id']; ?>">
                                    <button type="submit" name="copy_list" class="w-full bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 flex items-center justify-center">
                                        <i class="fas fa-star mr-2"></i> Add to Favorites
                                    </button>
                                </form>
                            </div>
                        <?php else: ?>
                            <div class="mt-4 p-3 bg-blue-50 rounded text-center">
                                <p class="text-blue-700 mb-2">Sign in to copy this list or start learning</p>
                                <a href="login.php" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                                    Login
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
    </div>
    
    <?php include "footer.php"; ?>
    
    <script>
        // Mobile menu toggle
        document.getElementById("mobileMenuBtn").addEventListener("click", function() {
            const mobileMenu = document.getElementById("mobileMenu");
            mobileMenu.classList.toggle("hidden");
        });
        
        // Copy font toggle functionality to mobile button
        if (document.getElementById("mobileFontToggleBtn")) {
            document.getElementById("mobileFontToggleBtn").addEventListener("click", function() {
                document.getElementById("fontToggleBtn").click();
            });
        }
        
        // Rating system functionality
        document.addEventListener('DOMContentLoaded', function() {
            const ratingButtons = document.querySelectorAll('.rating-button');
            
            ratingButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const listId = this.getAttribute('data-list-id');
                    const isLike = this.getAttribute('data-action');
                    
                    // Send rating to server
                    fetch('toggle_list_like.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: `list_id=${listId}&is_like=${isLike}`
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            // Update like/dislike counts
                            const likeCountElement = document.querySelector(`.rating-button.like[data-list-id="${listId}"] .like-count`);
                            const dislikeCountElement = document.querySelector(`.rating-button.dislike[data-list-id="${listId}"] .dislike-count`);
                            
                            if (likeCountElement) likeCountElement.textContent = data.like_count;
                            if (dislikeCountElement) dislikeCountElement.textContent = data.dislike_count;
                            
                            // Update button styling
                            const likeButton = document.querySelector(`.rating-button.like[data-list-id="${listId}"]`);
                            const dislikeButton = document.querySelector(`.rating-button.dislike[data-list-id="${listId}"]`);
                            
                            if (data.action === 'added') {
                                // Added new rating
                                if (isLike === '1') {
                                    likeButton.classList.add('active');
                                    dislikeButton.classList.remove('active');
                                } else {
                                    dislikeButton.classList.add('active');
                                    likeButton.classList.remove('active');
                                }
                            } else if (data.action === 'removed') {
                                // Removed existing rating
                                if (isLike === '1') {
                                    likeButton.classList.remove('active');
                                } else {
                                    dislikeButton.classList.remove('active');
                                }
                            } else if (data.action === 'changed') {
                                // Changed from like to dislike or vice versa
                                if (isLike === '1') {
                                    likeButton.classList.add('active');
                                    dislikeButton.classList.remove('active');
                                } else {
                                    dislikeButton.classList.add('active');
                                    likeButton.classList.remove('active');
                                }
                            }
                        } else {
                            console.error('Error:', data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
                });
            });
        });
    </script>
    <script src="font-toggle.js"></script>
</body>
</html>

🎯 Available Actions