<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:js='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale.language' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/>
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[body {
background-color: #333;
color: #fff;
font-family: Arial, sans-serif;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.search-section, .results-section {
margin: 10px;
text-align: center;
}
#poster {
max-width: 100%;
max-height: 500px;
}
label {
margin-right: 20px;
color: #fff;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #0056b3;
}
textarea {
width: 100%;
height: 150px;
margin-top: 10px;
background-color: #222;
color: #fff;
border: 1px solid #555;
padding: 10px;
resize: none;
}
#trailer-container {
margin-top: 10px;
}
]]></b:skin>
</head>
<body>
<center><h1>Buscar Películas y Series</h1></center>
<div class='content'>
<div class='search-section'>
<input checked='checked' id='serie' name='tipo' type='radio' value='tv'/>
<label for='serie'>Serie</label>
<input id='pelicula' name='tipo' type='radio' value='movie'/>
<label for='pelicula'>Película</label>
<input id='search-input' placeholder='Buscar...' type='search'/>
<button id='search-btn' type='button'>Buscar</button>
</div>
<div class='results-section'>
<h2>Poster</h2>
<img alt='Poster' id='poster' src=''/>
<h2>Resultado</h2>
<textarea id='result-text'/>
<h2>Tráiler</h2>
<div id='trailer-container'/>
<textarea id='html-content' style='display:none;'/>
<button onclick='copiarHTMLAlPortapapeles()'>Copiar HTML</button>
</div>
</div>
<b:section id='FranOrrego' showaddelement='false'/>
<script type='text/javascript'>/*<![CDATA[*/ document.getElementById("search-btn").addEventListener("click", function() {
const tipo = document.querySelector('input[name="tipo"]:checked').value;
const query = document.getElementById("search-input").value;
buscar(tipo, query);
});
function buscar(tipo, query) {
const apiKey = "f6cd5c1a9e6c6b965fdcab0fa6ddd38a";
const url = `https://api.themoviedb.org/3/search/${tipo}?api_key=${apiKey}&language=es-ES&query=${encodeURIComponent(query)}`;
fetch(url)
.then(response => response.json())
.then(data => {
if (data.results.length > 0) {
const firstResultId = data.results[0].id;
obtenerDetalles(tipo, firstResultId, apiKey);
} else {
document.getElementById("result-text").value = "No se encontraron resultados.";
}
})
.catch(error => console.error('Error:', error));
}
function obtenerDetalles(tipo, id, apiKey) {
const urlDetalles = `https://api.themoviedb.org/3/${tipo}/${id}?api_key=${apiKey}&language=es-ES`;
fetch(urlDetalles)
.then(response => response.json())
.then(data => {
const posterPath = `https://image.tmdb.org/t/p/w500${data.poster_path}`;
document.getElementById("poster").src = posterPath;
const description = `
Título: ${data.title || data.name}
Título Original: ${data.original_title || data.original_name}
Sinopsis: ${data.overview}
${tipo === 'movie' ? `Duración: ${data.runtime} minutos` : ''}
${tipo === 'tv' ? `Número de Temporadas: ${data.number_of_seasons}, Episodios: ${data.number_of_episodes}` : ''}
Géneros: ${data.genres.map(genre => genre.name).join(', ')}
Año: ${data.release_date ? data.release_date.substring(0, 4) : data.first_air_date.substring(0, 4)}
Fecha de Lanzamiento: ${data.release_date || data.first_air_date}
Calificación: ${data.vote_average}
Estado: ${data.status}
Países de producción: ${data.production_countries.map(country => country.name).join(', ')}
`;
document.getElementById("result-text").value = description.trim();
obtenerTrailer(tipo, id, apiKey, data);
})
.catch(error => console.error('Error:', error));
}
function obtenerTrailer(tipo, id, apiKey, movieData) {
const urlVideos = `https://api.themoviedb.org/3/${tipo}/${id}/videos?api_key=${apiKey}&language=es-ES`;
fetch(urlVideos)
.then(response => response.json())
.then(data => {
const trailers = data.results.filter(video => video.type === "Trailer" && video.iso_639_1 === "es");
let trailerUrl = "";
if (trailers.length > 0) {
trailerUrl = `https://www.youtube.com/embed/${trailers[0].key}`;
const trailerContainer = document.getElementById("trailer-container");
trailerContainer.innerHTML = `<iframe width="560" height="315" src="${trailerUrl}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
} else {
document.getElementById("trailer-container").innerHTML = "Tráiler no disponible en español.";
}
generarHTMLParaCopiar(movieData, trailerUrl);
})
.catch(error => console.error('Error:', error));
}
function generarHTMLParaCopiar(data, trailerUrl) {
const htmlContent = `
<div>
<h2>${data.title || data.name}</h2>
<img src="https://image.tmdb.org/t/p/w500${data.poster_path}" alt="${data.title || data.name}">
<p>${data.overview}</p>
${trailerUrl ? `<iframe width="560" height="315" src="${trailerUrl}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>` : ''}
</div>
`;
document.getElementById("html-content").value = htmlContent;
}
function copiarHTMLAlPortapapeles() {
const htmlContent = document.getElementById("html-content");
htmlContent.style.display = "block";
htmlContent.select();
document.execCommand("copy");
htmlContent.style.display = "none";
alert("HTML copiado al portapapeles.");
}
/*]]>*/</script>
</body>
</html>
