سكريبت من أجل البحث عن فيلم أو مسلسل باستخدام TMDB API

    <style>
        
        .conntainer {
            width: 90%;
            margin: 0 auto;
            padding-top: 50px;
        }
        h1 {
         text-align: center!important;
         color: green;
        }
        .search-box {
            display: block;
            justify-content: center;
          align-items:center;
            margin-bottom: 20px;
          
        }
        .search-input {
            padding: 10px;
            width: 100%;
            max-width: auto;
            font-size: 16px;
            border: 1px solid gray;
            border-radius: 5px;
          margin: 10px auto;
        }
        .search-button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            background-color: #007BFF;
            color: white;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px auto;
          width:90%;
            transition: background-color 0.3s;
        }
        .search-button:hover {
            background-color: #0056b3;
        }
        .results-container {
          margin-top: 20px;
          height:auto;
          max-height:500px;
          overflow:scroll;
          width:80%;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          
        }
        .movie-details {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            animation: fadeIn 0.5s ease-in-out;
        }
        .movie-details h2 {
            margin-top: 0;
        }
        .movie-details p {
            font-size: 16px;
            color: #555;
        }
        iframe {
            margin-top: 20px;
            border-radius: 10px;
        }
        .movie-item {
            padding: 15px;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            border-radius: 8px;
            background-color: #fff;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            cursor: pointer;
            transition: transform 0.3s, background-color 0.3s;
        }
        .movie-item:hover {
            background-color: #f0f0f0;
            transform: scale(1.02);
        }
        .movie-item img {
            width: 100px;
            height: auto;
            margin-right: 15px;
            border-radius: 5px;
        }
        .movie-item div {
            flex: 1;
        }
        .movie-title {
            font-size: 18px;
            font-weight: bold;
        }
        .movie-overview {
            font-size: 14px;
            color: #555;
        }

        /* Animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* استعلامات الوسائط لجعل الصفحة responsive */
        @media (max-width:auto) {
            .container {
                width: auto;
            }
            .search-input {
                width: 100%;
            }
            .search-button {
                width: 100%;
                margin-top: 10px;
            }
            .movie-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .movie-item img {
                width: 80px;
                margin-right: 0;
                margin-bottom: 10px;
            }
            .movie-title {
                font-size: 16px;
            }
            .movie-overview {
                font-size: 12px;
            }
        }

        @media (max-width: 480px) {
            .search-input {
                font-size: 14px;
                padding: 8px;
            }
            .search-button {
                font-size: 14px;
                padding: 8px;
            }
            .movie-title {
                font-size: 14px;
            }
            .movie-overview {
                font-size: 12px;
            }
        }
    </style>


    <div class="container" dir="rtl" style="text-align:right;">
        <h1>بحث عن فيلم أو مسلسل</h1>

        <!-- مربع البحث -->
        <div class="search-box">
            <input type="text" id="movie-name" class="search-input" placeholder="أدخل اسم الفيلم أو المسلسل">
            <button class="search-button" onclick="searchMovie()">بحث</button>
        </div>

        <!-- عرض النتائج هنا -->
        <div id="results-container" class="results-container"></div>
    </div>

    <script>
        async function searchMovie() {
            const apiKey = 'YOUR API '; // استبدل بمفتاح API الخاص بك
            const movieName = document.getElementById('movie-name').value;
            const searchUrlMovie = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${movieName}`;
            const searchUrlTV = `https://api.themoviedb.org/3/search/tv?api_key=${apiKey}&query=${movieName}`;

            // إرسال الطلب للحصول على الأفلام
            const movieResponse = await fetch(searchUrlMovie);
            const movieData = await movieResponse.json();

            // إرسال الطلب للحصول على المسلسلات
            const tvResponse = await fetch(searchUrlTV);
            const tvData = await tvResponse.json();

            const resultsContainer = document.getElementById('results-container');
            resultsContainer.innerHTML = ''; // تفريغ النتائج السابقة

            let resultsFound = false;

            // التعامل مع نتائج الأفلام
            if (movieData.results && movieData.results.length > 0) {
                resultsFound = true;
                movieData.results.forEach(movie => {
                    resultsContainer.innerHTML += generateMovieItem(movie, 'movie', apiKey);
                });
            }

            // التعامل مع نتائج المسلسلات
            if (tvData.results && tvData.results.length > 0) {
                resultsFound = true;
                tvData.results.forEach(tv => {
                    resultsContainer.innerHTML += generateMovieItem(tv, 'tv', apiKey);
                });
            }

            if (!resultsFound) {
                resultsContainer.innerHTML = '<p>لم يتم العثور على نتائج.</p>';
            }
        }

        function generateMovieItem(item, type, apiKey) {
            const title = type === 'movie' ? item.title : item.name;
            const overview = item.overview;
            const itemId = item.id;
            const itemType = type;
            const itemPoster = `https://image.tmdb.org/t/p/w500${item.poster_path || ''}`;

            return `
                <div class="movie-item" onclick="showDetails(${itemId}, '${itemType}', '${apiKey}')">
                    <img src="${itemPoster}" alt="${title}">
                    <div>
                        <div class="movie-title">${title}</div>
                        <div class="movie-overview">${overview.substring(0, 150)}...</div>
                    </div>
                </div>
            `;
        }

        async function showDetails(itemId, itemType, apiKey) {
            const detailsUrl = `https://api.themoviedb.org/3/${itemType}/${itemId}?api_key=${apiKey}`;
            const videoUrl = `https://api.themoviedb.org/3/${itemType}/${itemId}/videos?api_key=${apiKey}`;

            const detailsResponse = await fetch(detailsUrl);
            const detailsData = await detailsResponse.json();

            const videoResponse = await fetch(videoUrl);
            const videoData = await videoResponse.json();

            const trailer = videoData.results.find(video => video.type === 'Trailer' && video.site === 'YouTube');
            const trailerEmbed = trailer
                ? `<iframe width="100%" height="400" src="https://www.youtube.com/embed/${trailer.key}" frameborder="0" allowfullscreen></iframe>`
                : '<p>لا يتوفر مقطع دعائي.</p>';

            const movieDetails = `
                <div class="movie-details">
                    <h2>${itemType === 'movie' ? detailsData.title : detailsData.name}</h2>
                    <p><strong>الوصف:</strong> ${detailsData.overview}</p>
                    ${trailerEmbed}
                </div>
            `;

            document.getElementById('results-container').innerHTML = movieDetails;
        }
    </script>