buscar pelicula

2,252 alqsdeus

Abrir en el editor Publica tu código

Recomendado

17 April 2026

Plantilla HTML para sitio web de películas

31 January 2025

Películas de tarjetas CSS 3D puras

14 September 2024

Interacción con carteles de películas

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();
    }
}