<?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[
/*
Name: Generador de Peliculas
Autor: jcduranm
Modificado: RandomThemes
*/
* {
margin: 0;
padding: 0px;
}
.search-results>h2 {
}
body,html {
margin:0;
padding:0;
}
.title {
margin-left:10px;
font-size:16px;
font-family:cursive;
}
.title>h2>span{
font-size:15px;
font-family:cursive;
color:#c23;
}
body{
color:#fff;
font-family:cursive;
background:#000;
}
.content{
font-family:cursive;
display:flex;
height:100vh;
margin-bottom:40px;
width:100%;
justify-content:space-between;
}
.search-action,.search-results{
padding:5px;
}
.search-action {
height:170vh;
width:200vh;
}
.search-results{
margin-left:50px;
height:170vh;
width:100%;
margin:0;
align-content:center;
}
textarea{
border-radius:5px;
margin:0;
padding:30px;
margin-left:20px;
width:150vh;
height:120vh;
resize:none;
background:#111;
color:#fff;
}
.search-results>button{
background:linear-gradient(45deg, green, lime);
color: white;
width:975px;
padding: 10px 8px;
display: block;
font-size: 16px;
margin: 20px;
cursor: pointer;
border-radius: 10px;
}
.search-results>button:hover{
cursor:pointer;
}
.search-action>button{
padding: 1px 4px;
font-family:cursive;
background:linear-gradient(45deg, green, lime);
color:#fff;
font-family:bold,cursive;
font-size:20px;
border-radius:8px;
}
::-webkit-scrollbar {
width: 15px;
border-radius: 5px;
background-color: green;
}
::-webkit-scrollbar-thumb {
background-color: lime;
border-radius: 20px;
}
.search-action>h2,span{
font-family:Georgina;
}
input{
border-radius:5px;
}
.poster {
width: 185px; /* Ancho del póster según el tamaño de TMDB */
height: 278px; /* Altura del póster según el tamaño de TMDB */
border-radius: 10px; /* Define el radio de las esquinas de la imagen */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Agrega una sombra */
transition: transform 0.3s ease-in-out; /* Agrega una transición suave */
}
.poster:hover {
transform: scale(1.05); /* Escala ligeramente la imagen al pasar el mouse sobre ella */
}
.qximg {
aspect-ratio :-1;
max-width:800px;
max-height:150px;
border-radius:5px;
}
.tipes {
flex-direction: column;
right: 10px;
padding:5px;
}
.qx-img {
width:300px;
height:100%;
display: flex;
align-items: flex-start;
font-size:11px;
font-family:cursive;
}
.qx-img > h3 {
}
.qxmg {
max-width: 500px;
max-height:80px;
object-fit: cover;
margin-right: 0px;
}
.searchinput{
width:100px;
height:40px;
background:#111;
padding:5px 0px 5px 10px;
color:#fff;
margin:2px;
text-align:left;
}
iframe {
border-radius: 5px;
}
/* Media Query para ajustes en pantallas más pequeñas */
@media screen and (max-width: 768px) {
.content {
flex-direction: column;
}
.search-action, .search-results {
padding: 2%;
}
textarea {
height: 30vh;
}
}
]]></b:skin>
</head>
<body>
<main>
<div class='title'>
<center style='padding:10px;font-size:28px'>GENERADOR RANDOM <span style='font-family:cursive;color:green;padding:10px;'>THEMES</span></center>
</div>
<div class='content'>
<div class='search-action' style='border:2px solid #111'>
<h3 style='padding:10px;'>Tipo</h3>
<button id='pelicula' name='tipo' style='padding:10px;' type='button' value='movie'>Pelicula</button>
<button id='serie' name='tipo' style='padding:10px;' type='button' value='tv'>Serie</button>
<h3 style='padding:8px;'>ID</h3>
<input class='searchinput' id='search-input' placeholder='Buscar...' style='padding:10px;' type='search'/>
<button id='search-btn' style='display:flex;margin:5px;padding:10px 5px;' type='button'>Buscar</button>
<h2 style='padding:10px;'>Poster 📷</h2>
<div class='qx-img'>
<img class='qximg' id='poster' src=''/>
<div class='tipes'>
<h2 id='title'/>
<h3 id='año'/>
</div>
</div>
</div>
<div class='search-results'>
<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>
</main>
<footer>
<b:section id='Footer' showaddelement='true'/>
</footer>
<b:section id='JAVASCRIPT'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<script>
document.addEventListener("DOMContentLoaded", function() {
let tipo = ''; // Variable global para almacenar el tipo seleccionado
// Agregar controladores de eventos para los botones de tipo
document.getElementById('pelicula').addEventListener('click', function() {
tipo = 'movie';
});
document.getElementById('serie').addEventListener('click', function() {
tipo = 'tv';
});
document.getElementById("search-btn").addEventListener("click", function() {
const id = document.getElementById("search-input").value.trim(); // Obtener el ID proporcionado por el usuario
// Verificar si el tipo está seleccionado y el ID no está vacío
if (tipo !== '' && id !== "") {
buscarPorID(tipo, id); // Llamar a la función para buscar por ID con el tipo seleccionado
} else {
alert("Por favor seleccione el tipo y/o ingrese un ID válido.");
}
});
// Resto del código...
});
function buscarPorID(tipo, id) {
const apiKey = "f6cd5c1a9e6c6b965fdcab0fa6ddd38a";
const url = `https://api.themoviedb.org/3/${tipo}/${id}?api_key=${apiKey}&language=es-ES`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
if (data) {
obtenerDetalles(tipo, id, apiKey);
} else {
document.getElementById("result-text").value = "No se encontraron resultados.";
}
})
.catch(error => {
console.error('Error:', error);
document.getElementById("result-text").value = "Error al buscar la película o serie.";
});
}
// El resto de tu código permanece igual...
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;
document.getElementById("title").innerText = data.title || data.name;
document.getElementById("año").innerText = `Año: ${data.release_date ? data.release_date.substring(0, 4) : data.first_air_date.substring(0, 4)}`;
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 .";
}
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>]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
forobeta.com
