recherche film

2,103 alqsdeus

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 January 2026

Modèle HTML de site web de films

26 February 2026

Modèle HTML de jeux débloqués avec recherche et paramètres

1 April 2026

Modèle HTML de jeux débloqués avec recherche et paramètres

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>follow me on github alqsdeuss :D</title>
    <link rel="stylesheet" href="cfind.movie.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div id="gradient-canvas"></div>
    <header>
        <h1>about movie</h1>
        <div class="search-container">
            <input type="text" id="searchInput" placeholder="search" onkeypress="handleKeyPress(event)">
            <button id="searchButton">
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </div>
        <p id="error-message" class="hidden">there is no movie with that name</p>
    </header>

<footer>
        <p class="footer-text">© website build by alqsdeuss</p>
    </footer>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: linear-gradient(120deg, #0f0c29, #302b63, #24243e);
}

#gradient-canvas {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, #0c0d0d, #0c0d0d, #656a95, #0c0d0d);
    background-size: 200% 200%;
    animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

header {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 20px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.search-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

input {
    padding: 12px;
    width: 100%;
    max-width: 350px;
    font-size: 16px;
    border-radius: 30px;
    border: none;
    background-color: #333;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

input:focus {
    background-color: #444;
    outline: none;
}

button {
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 30px;
    background-color: #656a95;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

button:hover {
    transform: scale(1.05);
    background-color: #656a95;
}

button i {
    font-size: 20px;
}

#error-message {
    margin-top: 10px;
    color: #656a95;
    font-size: 18px;
    display: none;
    text-align: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.movie-card {
    background-color: #2a2a2a;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.movie-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
}

.movie-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-bottom: 4px solid #656a95;
}

.movie-card h3 {
    margin: 10px 0;
    font-size: 18px;
    color: #e5e5e5;
}

.movie-card p {
    font-size: 14px;
    color: #aaa;
}

#movieDetails {
    display: none;
    padding: 20px;
    background-color: #333;
    border-radius: 15px;
    margin: 20px auto;
    max-width: 900px;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#movieDetails.show {
    display: block;
    opacity: 1;
    transform: scale(1.05);
}

#movieDetails img {
    float: left;
    margin-right: 20px;
    border-radius: 10px;
    max-width: 150px;
    height: auto;
}

#movieDetails .info {
    margin-bottom: 20px;
}

#movieDetails .close-btn {
    background-color: #656a95;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 20px;
    float: right;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

#movieDetails .close-btn:hover {
    background-color: #656a95;
}

footer {
    background-color: transparent;
    color: #777;
    padding: 20px;
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer-text {
    color: #777;
    font-size: 14px;
}

@media (max-width: 768px) {
    header {
        padding: 15px;
    }

.search-container {
        flex-direction: column;
    }

input, button {
        width: 100%;
    }

.movie-card img {
        height: 200px;
    }
}

document.getElementById('searchButton').addEventListener('click', searchMovies);
document.getElementById('searchInput').addEventListener('keypress', handleKeyPress);

const apiKey = 'c3e1d0d7';

function searchMovies() {
    const query = document.getElementById('searchInput').value.trim();
    const errorMessage = document.getElementById('error-message');
    const movieResults = document.getElementById('movieResults');

if (query) {
        fetchMovies(query);
        errorMessage.style.display = 'none';
    } else {
        showErrorMessage('enter a movie');
    }
}

async function fetchMovies(query) {
    const url = `https://www.omdbapi.com/?apikey=${apiKey}&s=${query}`;

try {
        const response = await fetch(url);
        const data = await response.json();
        if (data.Response === 'True') {
            displayMovies(data.Search);
        } else {
            showErrorMessage('no movie found with this name');
        }
    } catch (error) {
        console.error('error to find movies:', error);
        showErrorMessage('help me womp womp');
    }
}

function displayMovies(movies) {
    const movieResults = document.getElementById('movieResults');
    movieResults.innerHTML = '';

movies.forEach(movie => {
        const movieCard = document.createElement('div');
        movieCard.classList.add('movie-card');
        
        movieCard.innerHTML = `
            <img src="${movie.Poster !== 'N/A' ? movie.Poster : 'alqsdeuss.jpg'}" alt="${movie.Title}">
            <h3>${movie.Title}</h3>
        `;
        
        movieCard.addEventListener('click', () => fetchMovieDetails(movie.imdbID));

movieResults.appendChild(movieCard);
    });

movieResults.classList.add('fade-in');
}

async function fetchMovieDetails(imdbID) {
    const url = `https://www.omdbapi.com/?apikey=${apiKey}&i=${imdbID}`;

try {
        const response = await fetch(url);
        const data = await response.json();
        if (data.Response === 'True') {
            displayMovieDetails(data);
        } else {
            showErrorMessage('movie details not found');
        }
    } catch (error) {
        console.error('error movie details:', error);
        showErrorMessage('help me womp womp');
    }
}

function displayMovieDetails(movie) {
    const movieDetails = document.getElementById('movieDetails');
    const movieResults = document.getElementById('movieResults');

movieDetails.innerHTML = `
        <button class="close-btn" onclick="closeMovieDetails()">close</button>
        <img src="${movie.Poster !== 'N/A' ? movie.Poster : 'alqsdeuss.jpg'}" alt="${movie.Title}">
        <div class="info">
            <h2>${movie.Title} (${movie.Year})</h2>
            <p><strong>ratings:</strong> ${movie.imdbRating}/10</p>
            <p><strong>runtime:</strong> ${movie.Runtime}</p>
            <p><strong>genre:</strong> ${movie.Genre}</p>
            <p><strong>director:</strong> ${movie.Director}</p>
            <p><strong>actors:</strong> ${movie.Actors}</p>
            <p><strong>language:</strong> ${movie.Language}</p>
            <p><strong>country:</strong> ${movie.Country}</p>
            <p><strong>awards:</strong> ${movie.Awards}</p>
        </div>
    `;

movieResults.style.display = 'none';
    movieDetails.style.display = 'block';
    movieDetails.classList.add('show');
}

function closeMovieDetails() {
    const movieDetails = document.getElementById('movieDetails');
    const movieResults = document.getElementById('movieResults');

movieDetails.style.display = 'none';
    movieResults.style.display = 'grid';
    movieDetails.classList.remove('show');
}

function showErrorMessage(message) {
    const errorMessage = document.getElementById('error-message');
    errorMessage.textContent = message;
    errorMessage.style.display = 'block';
}

function handleKeyPress(event) {
    if (event.key === 'Enter') {
        searchMovies();
    }
}