render.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visor de Datos Airbnb</title>
    <style>
        :root {
            --primary: #ff385c;
            --text: #222222;
            --gray: #717171;
            --bg: #ffffff;
            --input-bg: #f8f8f8;
        }
        
        body {
            font-family: 'Circular', -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
            color: var(--text);
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f7f7f7;
        }

        /* Sección de Entrada de Datos */
        .input-section {
            max-width: 1120px;
            margin: 0 auto 40px auto;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            text-align: center;
        }

        textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: var(--input-bg);
            font-family: monospace;
            font-size: 12px;
            resize: vertical;
            box-sizing: border-box;
            margin-bottom: 15px;
        }

        button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.1s;
        }

        button:active { transform: scale(0.98); }
        button:hover { opacity: 0.9; }

        /* Contenedor de Resultados (Oculto al inicio) */
        #result-container {
            display: none; /* Se muestra con JS */
            max-width: 1120px;
            margin: 0 auto;
            background: var(--bg);
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        }

        /* Estilos del contenido renderizado */
        header { border-bottom: 1px solid #dddddd; padding-bottom: 24px; margin-bottom: 24px; }
        h1 { font-size: 26px; margin-bottom: 10px; color: var(--text); }
        .location { color: var(--text); text-decoration: underline; font-weight: 500; }
        
        .stats { display: flex; gap: 15px; color: var(--text); margin-top: 10px; font-size: 16px; flex-wrap: wrap; }
        .stats span::after { content: " · "; margin-left: 15px; }
        .stats span:last-child::after { content: ""; }

        .content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
        
        .amenities-list {
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px;
        }
        .amenity-item { display: flex; align-items: center; gap: 8px; font-size: 15px; }

        /* Galería */
        .gallery-section { margin-top: 40px; border-top: 1px solid #ddd; padding-top: 40px; }
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }
        .photo-card {
            border-radius: 12px;
            overflow: hidden;
            height: 200px;
            background-color: #eee;
            transition: opacity 0.3s;
        }
        .photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
        .photo-card:hover img { transform: scale(1.05); }

        .host-info { background-color: #f0efe9; padding: 24px; border-radius: 12px; }
        .error-msg { color: red; font-weight: bold; margin-top: 10px; display: none; }

        @media (max-width: 768px) {
            .content-grid { grid-template-columns: 1fr; }
            .amenities-list { grid-template-columns: 1fr; }
            .container { padding: 20px; }
        }
    </style>
</head>
<body>

    <div class="input-section">
        <h2>🛠️ Generador de Vista Airbnb</h2>
        <p>Pega el código JSON completo en el recuadro y pulsa el botón.</p>
        <textarea id="jsonInput" placeholder='{"pdp_listing_detail": { ... }}'></textarea>
        <br>
        <button onclick="renderListing()">Generar Vista</button>
        <div id="errorMsg" class="error-msg">Error: El JSON no es válido. Revisa que esté copiado correctamente.</div>
    </div>

    <div id="result-container">
        <header>
            <h1 id="title">Titulo</h1>
            <p id="address" class="location">Ubicación</p>
            <div id="stats" class="stats">
                </div>
        </header>

        <div class="content-grid">
            <div class="main-info">
                <section>
                    <h3>Descripción</h3>
                    <p id="description">...</p>
                </section>

                <section>
                    <h3>Lo que ofrece este lugar</h3>
                    <div id="amenities" class="amenities-list">
                        </div>
                </section>
            </div>

            <aside>
                <div class="host-info">
                    <h3 id="host-name">Anfitrión</h3>
                    <p id="host-badges">🏅 Superhost</p>
                    <p><em id="host-about"></em></p>
                </div>
            </aside>
        </div>

        <section class="gallery-section">
            <h3>Galería de Imágenes</h3>
            <div id="gallery" class="gallery-grid">
                </div>
        </section>
    </div>

    <script>
        function renderListing() {
            const input = document.getElementById('jsonInput').value;
            const errorMsg = document.getElementById('errorMsg');
            const container = document.getElementById('result-container');

            try {
                // 1. Parsear el JSON
                const dataRoot = JSON.parse(input);
                
                // Asegurarnos de que accedemos a la raiz correcta (a veces viene dentro de pdp_listing_detail o data)
                const data = dataRoot.pdp_listing_detail ? dataRoot.pdp_listing_detail : dataRoot;

                if (!data) throw new Error("Estructura JSON no reconocida");

                // 2. Extraer datos básicos
                document.getElementById('title').textContent = data.p3_summary_title || "Sin título";
                document.getElementById('address').textContent = data.p3_summary_address || data.location_title;
                
                // 3. Estadísticas
                const statsHTML = `
                    <span>${data.guest_label || ''}</span>
                    <span>${data.bedroom_label || ''}</span>
                    <span>${data.bed_label || ''}</span>
                    <span>${data.bathroom_label || ''}</span>
                `;
                document.getElementById('stats').innerHTML = statsHTML;

                // 4. Descripción (Limpiamos saltos de línea)
                let desc = "Sin descripción";
                if (data.sectioned_description && data.sectioned_description.description) {
                    desc = data.sectioned_description.description.replace(/\n/g, '<br>');
                }
                document.getElementById('description').innerHTML = desc;

                // 5. Servicios (Amenities) - Tomamos los presentes
                const amenitiesContainer = document.getElementById('amenities');
                amenitiesContainer.innerHTML = '';
                if (data.listing_amenities) {
                    // Filtramos solo los que están presentes y mostramos máximo 14 para no saturar
                    data.listing_amenities
                        .filter(a => a.is_present)
                        .slice(0, 14) 
                        .forEach(amenity => {
                            const div = document.createElement('div');
                            div.className = 'amenity-item';
                            div.innerHTML = `✓ ${amenity.name}`;
                            amenitiesContainer.appendChild(div);
                        });
                }

                // 6. Información del Anfitrión
                if (data.primary_host) {
                    document.getElementById('host-name').textContent = `Anfitrión: ${data.primary_host.name}`;
                    document.getElementById('host-about').textContent = data.primary_host.about || "";
                }

                // 7. Galería de Imágenes
                const galleryContainer = document.getElementById('gallery');
                galleryContainer.innerHTML = '';
                
                if (data.photos) {
                    data.photos.forEach(photo => {
                        // Buscamos la URL grande
                        const imgUrl = photo.large || photo.picture_large_url || '';
                        if(imgUrl) {
                            const card = document.createElement('div');
                            card.className = 'photo-card';
                            const img = document.createElement('img');
                            img.src = imgUrl;
                            img.loading = "lazy"; // Carga diferida para rendimiento
                            card.appendChild(img);
                            galleryContainer.appendChild(card);
                        }
                    });
                }

                // 8. Mostrar resultado y ocultar error
                errorMsg.style.display = 'none';
                container.style.display = 'block';
                // Hacer scroll hacia el resultado
                container.scrollIntoView({ behavior: 'smooth' });

            } catch (e) {
                console.error(e);
                errorMsg.style.display = 'block';
                container.style.display = 'none';
            }
        }
    </script>

</body>
</html>