film_recom_sys/templates/recommendations.html

    <style>
            /* 容器样式 */
    .results-container {
        background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
        margin: 20px 0;
    }
            /* 分割线样式 */
    .custom-divider {
        border: none;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.1); /* 半透明黑色 */
        margin: 20px 0;
    }

        /* 电影卡片容器样式 */
    .re-cards-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px;
        gap: 10px;
    }

    /* 电影卡片样式 */
    .re-card {
        width: calc(20% - 20px); /* 每行5个，包含间距 */
        margin: 10px;
        padding: 15px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
    }

    .re-card:hover {
        transform: translateY(-5px);
    }

    .re-card h3 a {
        color: #333;
        text-decoration: none;
    }

    .re-card h3 a:hover {
        text-decoration: underline;
    }

        /* 按钮的基础样式 */
    .load-more-btn {
        display: block;
        margin: 20px auto; /* 水平居中 */
        padding: 10px 20px;
        font-size: 1em;
        font-weight: bold;
        color: #fff;
        background-color: #4f5252; /* 初始背景色 */
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    /* 悬浮效果 */
    .load-more-btn:hover {
        background-color: #323336; /* 悬浮时背景色 */
        transform: scale(1.05); /* 微放大 */
    }

    /* 点击效果 */
    .load-more-btn:active {
        background-color: #252222; /* 点击时背景色 */
        transform: scale(0.98); /* 微缩小 */
    }

    .results-container .bighead {
        font-size: 2.5em;
    }

    .results-container h4 {
        font-size: 2em;
    }

    .re-rating {
        font-weight: bold;
        color: red;
    }
    </style>
<div class="results-container">

    <h3 class="bighead">👍Recommended for You</h3>

    <!-- 你常搜的部分 -->
    <div>
        <h4>Your Frequent Search</h4>
        <div id="common-search-container" class="re-cards-container">
            <!-- 页面加载时默认展示前12条 -->
        </div>
        <button id="load-more-common" class="load-more-btn" onclick="loadMoreCommonSearch()">Load More</button>
    </div>

    <!-- 分割线 -->
    <hr class="custom-divider">

    <!-- 你喜欢的类型部分 -->
    <div>
        <h4>Genres You Like</h4>
        <div id="liked-genres-container" class="re-cards-container">
            <!-- 页面加载时默认展示前12条 -->
        </div>
        <button id="load-more-liked" class="load-more-btn" onclick="loadMoreLikedGenres()">Load More</button>
    </div>
</div>


<script>
    let commonSearchOffset = 0;
    let likedGenresOffset = 0;

    // 页面加载时初始化数据
    document.addEventListener('DOMContentLoaded', () => {
        loadMoreCommonSearch();
        loadMoreLikedGenres();
    });

// 加载更多“你常搜的”卡片
function loadMoreCommonSearch() {
    fetch(`/load_more_common_search?offset=${commonSearchOffset}`)
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById("common-search-container");

            if (data.movies_data.length === 0 && commonSearchOffset === 0) {
                container.innerHTML = "<p>搜索后使用此功能。</p>";
            }

            data.movies_data.forEach(movie => {
                const card = document.createElement("div");
                card.classList.add("re-card");

                // 使用 HTML 结构创建带有样式的卡片
                card.innerHTML = `
                    <h3><a href="/detail?id=${movie.id}" target="_blank">${movie.title}</a></h3>
                    <p class="re-rating">Average Rating: ${movie.average_rating}</p>
                    <p>Release Date: ${movie.release_date}</p>
                    <p>Genres: ${movie.genres}</p>
                    <p>Rating Count: ${movie.rating_count}</p>
                    <p>Actors: ${movie.actor}</p>
                `;

                container.appendChild(card);
            });

            commonSearchOffset += 12;

            if (!data.has_more) {
                document.getElementById("load-more-common").style.display = "none";
            }
        })
        .catch(error => console.error("Error loading more common search recommendations:", error));
}

// 加载更多“你喜欢的类型”卡片
function loadMoreLikedGenres() {
    fetch(`/load_more_liked_genres?offset=${likedGenresOffset}`)
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById("liked-genres-container");

            if (data.movies_data.length === 0 && likedGenresOffset === 0) {
                container.innerHTML = "<p>搜索后使用此功能。</p>";
            }

            data.movies_data.forEach(movie => {
                const card = document.createElement("div");
                card.classList.add("re-card");

                // 使用 HTML 结构创建带有样式的卡片
                card.innerHTML = `
                    <h3><a href="/detail?id=${movie.id}" target="_blank">${movie.title}</a></h3>
                    <p class="re-rating">Average Rating: ${movie.average_rating}</p>
                    <p>Release Date: ${movie.release_date}</p>
                    <p>Genres: ${movie.genres}</p>
                    <p>Rating Count: ${movie.rating_count}</p>
                    <p>Actors: ${movie.actor}</p>
                `;

                container.appendChild(card);
            });

            likedGenresOffset += 12;

            if (!data.has_more) {
                document.getElementById("load-more-liked").style.display = "none";
            }
        })
        .catch(error => console.error("Error loading more liked genres recommendations:", error));
}

</script>