Paseadores APP

<style>

:root { --pcv-color: #0B697A; --pcv-light: #F0F8F9; --pcv-dark: #07353D; }

body { margin: 0; padding: 0; background-color: #f8f9fa; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.app-container { width: 100%; max-width: 100%; margin: 0 auto; background: #fff; min-height: 100vh; display: flex; flex-direction: column; }

/* Cabecera */

.header { background: var(--pcv-color); color: white; padding: 25px 15px; text-align: center; }

.header h1 { margin: 0; font-size: 24px; text-transform: uppercase; letter-spacing: 1px; }

/* Buscador Fijo */

.sticky-search { position: sticky; top: 0; z-index: 100; background: white; padding: 15px; border-bottom: 2px solid var(--pcv-color); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

input#breedSearch { width: 100% !important; height: 55px !important; border: 3px solid var(--pcv-color); border-radius: 12px; padding: 0 15px !important; font-size: 18px !important; font-weight: bold; outline: none; box-sizing: border-box; }

/* Menú de Grupos Vertical */

.vertical-menu { padding: 15px; display: flex; flex-direction: column; gap: 12px; }

.group-card {

background: white; border: 2px solid #eee; border-radius: 15px; padding: 20px;

display: flex; justify-content: space-between; align-items: center;

transition: 0.2s; cursor: pointer; border-left: 8px solid var(--pcv-color);

}

.group-card:active { background: var(--pcv-light); transform: scale(0.98); }

.group-name { font-weight: 800; color: var(--pcv-dark); font-size: 16px; text-transform: uppercase; }

.group-count { font-size: 12px; color: var(--pcv-color); font-weight: bold; }/* Vista de Lista de Perros (Dentro del grupo) */

.list-view { display: none; padding: 0; }

.breed-row {

padding: 20px 15px; border-bottom: 1px solid #eee;

display: flex; justify-content: space-between; align-items: center;

}

.breed-row:active { background: var(--pcv-light); }

.b-main-name { font-size: 18px; font-weight: bold; color: #222; }

/* Ficha Técnica Expandida */

.full-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 2000; overflow-y: auto; }

.modal-nav { background: var(--pcv-color); color: white; padding: 20px; position: sticky; top: 0; display: flex; align-items: center; gap: 15px; z-index: 10; }

.back-btn { background: white; color: var(--pcv-color); border: none; padding: 10px 18px; border-radius: 10px; font-weight: 900; font-size: 14px; }

.content-area { padding: 20px; line-height: 1.8; font-size: 17px; }

.content-area img { width: 100%; border-radius: 20px; margin-bottom: 25px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

.wiki-section { margin-bottom: 25px; padding: 15px; background: #f9f9f9; border-radius: 12px; }

.wiki-section h3 { color: var(--pcv-color); margin-top: 0; border-bottom: 2px solid var(--pcv-color); display: inline-block; }

.google-btn {

display: block; width: 100%; background: #4285F4; color: white;

text-align: center; padding: 20px; border-radius: 15px;

text-decoration: none; font-weight: bold; margin: 30px 0; font-size: 18px;

}

</style>

<h1>Canipedia PCV</h1>

</div>

</div>

</div>

<p style="font-size:12px; font-weight:bold; color:#999; text-transform:uppercase;">Lista Alfabética Completa:</p>

<option value="">Selecciona una raza...</option>

</select>

</div>

<button class="back-btn" onclick="showHome()">← VOLVER</button>

</div>

</div>

<button class="back-btn" onclick="closeBreed()">← VOLVER</button>

</div>

<button class="google-btn" style="background:#666;" onclick="closeBreed()">VOLVER AL MENÚ</button>

</div>

{n:"Pastor alemán", g:1, a:"Ovejero Alemán"}, {n:"Pastor belga (Malinois)", g:1, a:"Malinois"}, {n:"Pastor belga (Groenendael)", g:1, a:"Groenendael"}, {n:"Pastor belga (Tervueren)", g:1, a:"Tervueren"}, {n:"Pastor belga (Laekenois)", g:1, a:"Laekenois"}, {n:"Schipperke", g:1, a:""}, {n:"Pastor de Beauce", g:1, a:"Beauceron"}, {n:"Pastor de Brie", g:1, a:"Briard"}, {n:"Pastor de Picardía", g:1, a:""}, {n:"Pastor de los Pirineos de pelo largo", g:1, a:""}, {n:"Border Collie", g:1, a:""}, {n:"Bearded Collie", g:1, a:""}, {n:"Collie de pelo largo", g:1, a:"Rough Collie"}, {n:"Collie de pelo corto", g:1, a:"Smooth Collie"}, {n:"Shetland Sheepdog", g:1, a:"Sheltie"}, {n:"Old English Sheepdog", g:1, a:"Bobtail"}, {n:"Welsh Corgi Cardigan", g:1, a:""}, {n:"Welsh Corgi Pembroke", g:1, a:"Corgi"},{n:"Kelpie australiano", g:1, a:""}, {n:"Pastor australiano", g:1, a:"Aussie"}, {n:"Boyero de Australia", g:1, a:"Heeler"}, {n:"Pastor blanco suizo", g:1, a:""}, {n:"Saarloos wolfdog", g:1, a:""}, {n:"Perro lobo checoslovaco", g:1, a:""}, {n:"Pastor holandés", g:1, a:""}, {n:"Kuvasz", g:1, a:""}, {n:"Puli", g:1, a:""}, {n:"Pumi", g:1, a:""}, {n:"Mudi", g:1, a:""}, {n:"Komondor", g:1, a:""}, {n:"Bergamasco", g:1, a:""}, {n:"Pastor de Maremma", g:1, a:""}, {n:"Pastor polaco de las llanuras", g:1, a:""}, {n:"Pastor de Tatra", g:1, a:""}, {n:"Pastor mallorquín", g:1, a:"Ca de Bestiar"}, {n:"Pastor catalán", g:1, a:"Gos d'Atura"},{n:"Doberman", g:2, a:""}, {n:"Pinscher alemán", g:2, a:""}, {n:"Pinscher miniatura", g:2, a:""}, {n:"Affenpinscher", g:2, a:""}, {n:"Pinscher austriaco", g:2, a:""}, {n:"Schnauzer gigante", g:2, a:""}, {n:"Schnauzer estándar", g:2, a:""}, {n:"Schnauzer miniatura", g:2, a:""}, {n:"Smoushond holandés", g:2, a:""}, {n:"Terrier ruso negro", g:2, a:""}, {n:"Dogo argentino", g:2, a:""}, {n:"Fila brasileiro", g:2, a:""}, {n:"Shar Pei", g:2, a:""}, {n:"Boxer", g:2, a:""}, {n:"Gran danés", g:2, a:"Dogo Alemán"}, {n:"Rottweiler", g:2, a:""},{n:"Perro de presa canario", g:2, a:"Dogo Canario"}, {n:"Dogo de Burdeos", g:2, a:""}, {n:"Bulldog inglés", g:2, a:""}, {n:"Bullmastiff", g:2, a:""}, {n:"Mastín inglés", g:2, a:""}, {n:"Mastín napolitano", g:2, a:""}, {n:"Cane Corso", g:2, a:"Mastín Italiano"}, {n:"Tosa Inu", g:2, a:""}, {n:"Mastín español", g:2, a:""}, {n:"Mastín del Pirineo", g:2, a:""}, {n:"Perro de montaña de los Pirineos", g:2, a:""}, {n:"Terranova (perro)", g:2, a:""}, {n:"Leonberger", g:2, a:""}, {n:"Landseer", g:2, a:""}, {n:"San Bernardo (perro)", g:2, a:""}, {n:"Pastor del Cáucaso", g:2, a:""}, {n:"Pastor de Asia Central", g:2, a:""}, {n:"Mastín tibetano", g:2, a:""}, {n:"Boyero de Berna", g:2, a:""}, {n:"Hovawart", g:2, a:""},{n:"Airedale terrier", g:3, a:""}, {n:"Irish terrier", g:3, a:""}, {n:"Kerry blue terrier", g:3, a:""}, {n:"Soft Coated Wheaten Terrier", g:3, a:""}, {n:"Bedlington terrier", g:3, a:""}, {n:"Border terrier", g:3, a:""}, {n:"Fox terrier", g:3, a:""}, {n:"Lakeland terrier", g:3, a:""}, {n:"Manchester terrier", g:3, a:""}, {n:"Parson Russell terrier", g:3, a:""}, {n:"Jack Russell terrier", g:3, a:""}, {n:"Scottish terrier", g:3, a:""}, {n:"Skye terrier", g:3, a:""}, {n:"Cairn terrier", g:3, a:""}, {n:"Welsh terrier", g:3, a:""}, {n:"Sealyham terrier", g:3, a:""}, {n:"West Highland white terrier", g:3, a:"Westie"},{n:"Staffordshire bull terrier", g:3, a:"Staffy"}, {n:"American Staffordshire Terrier", g:3, a:"Amstaff"}, {n:"Bull terrier", g:3, a:""}, {n:"American Hairless Terrier", g:3, a:""}, {n:"Yorkshire terrier", g:3, a:"Yorkie"}, {n:"Australian Terrier", g:3, a:""}, {n:"Silky terrier", g:3, a:""}, {n:"Norwich terrier", g:3, a:""}, {n:"Norfolk terrier", g:3, a:""}, {n:"Cesky terrier", g:3, a:""}, {n:"Jagdterrier", g:3, a:""},{n:"Dachshund", g:4, a:"Teckel, Salchicha, Perro Salchicha"}, {n:"Teckel miniatura", g:4, a:""}, {n:"Teckel para la caza del conejo", g:4, a:""},{n:"Siberian Husky", g:5, a:"Husky"}, {n:"Alaskan Malamute", g:5, a:""}, {n:"Samoyedo (perro)", g:5, a:""}, {n:"Perro de Groenlandia", g:5, a:""}, {n:"Akita Inu", g:5, a:""}, {n:"Akita Americano", g:5, a:""}, {n:"Shiba Inu", g:5, a:""}, {n:"Chow Chow", g:5, a:""}, {n:"Eurasier", g:5, a:""}, {n:"Kishu", g:5, a:""}, {n:"Shikoku Inu", g:5, a:""}, {n:"Kai Ken", g:5, a:""}, {n:"Jindo coreano", g:5, a:""}, {n:"Pomerania (perro)", g:5, a:"Spitz Enano"}, {n:"Spitz alemán", g:5, a:""}, {n:"Volpino italiano", g:5, a:""},{n:"Basenji", g:5, a:""}, {n:"Xoloitzcuintle", g:5, a:""}, {n:"Perro sin pelo del Perú", g:5, a:""}, {n:"Podenco ibicenco", g:5, a:""}, {n:"Podenco canario", g:5, a:""}, {n:"Cirneco del Etna", g:5, a:""}, {n:"Pharaoh hound", g:5, a:""}, {n:"Thai ridgeback", g:5, a:""}, {n:"Perro de Taiwán", g:5, a:""}, {n:"Canaan Dog", g:5, a:""},{n:"Bloodhound", g:6, a:"Perro de San Huberto"}, {n:"Beagle", g:6, a:""}, {n:"Basset hound", g:6, a:""}, {n:"Dálmata (perro)", g:6, a:""}, {n:"Rhodesian Ridgeback", g:6, a:""}, {n:"Sabueso español", g:6, a:""}, {n:"Foxhound inglés", g:6, a:""}, {n:"Foxhound americano", g:6, a:""}, {n:"Black and Tan Coonhound", g:6, a:""}, {n:"Sabueso artesiano", g:6, a:""}, {n:"Poitevin", g:6, a:""}, {n:"Billy (perro)", g:6, a:""}, {n:"Harrier (perro)", g:6, a:""}, {n:"Otterhound", g:6, a:""}, {n:"Drever", g:6, a:""},{n:"Pointer inglés", g:7, a:""}, {n:"Setter inglés", g:7, a:""}, {n:"Setter irlandés rojo", g:7, a:""}, {n:"Setter irlandés rojo y blanco", g:7, a:""}, {n:"Setter gordon", g:7, a:""}, {n:"Braco alemán de pelo corto", g:7, a:""}, {n:"Braco alemán de pelo duro", g:7, a:""}, {n:"Weimaraner", g:7, a:"Braco de Weimar"}, {n:"Vizsla", g:7, a:"Braco húngaro"}, {n:"Braco de Auvernia", g:7, a:""}, {n:"Epagneul breton", g:7, a:""}, {n:"Perdiguero de Burgos", g:7, a:""}, {n:"Spinone", g:7, a:""}, {n:"Braco francés", g:7, a:""},{n:"Labrador retriever", g:8, a:""}, {n:"Golden retriever", g:8, a:""}, {n:"Flat-coated retriever", g:8, a:""}, {n:"Curly-coated retriever", g:8, a:""}, {n:"Chesapeake Bay retriever", g:8, a:""}, {n:"Nova Scotia Duck Tolling Retriever", g:8, a:""}, {n:"Cocker spaniel inglés", g:8, a:""}, {n:"Cocker spaniel americano", g:8, a:""}, {n:"English Springer Spaniel", g:8, a:""}, {n:"Welsh Springer Spaniel", g:8, a:""}, {n:"Perro de agua español", g:8, a:"Turco Andaluz"}, {n:"Perro de agua portugués", g:8, a:""}, {n:"Perro de agua francés", g:8, a:"Barbet"}, {n:"Lagotto romagnolo", g:8, a:""}, {n:"American Water Spaniel", g:8, a:""},{n:"Bichón maltés", g:9, a:""}, {n:"Bichón habanero", g:9, a:""}, {n:"Bichón frisé", g:9, a:""}, {n:"Bolognese", g:9, a:""}, {n:"Coton de Tuléar", g:9, a:""}, {n:"Caniche", g:9, a:"Poodle"}, {n:"Grifón de Bruselas", g:9, a:""}, {n:"Perro crestado chino", g:9, a:""}, {n:"Lhasa apso", g:9, a:""}, {n:"Shih Tzu", g:9, a:""}, {n:"Tibetan terrier", g:9, a:""}, {n:"Tibetan spaniel", g:9, a:""}, {n:"Chihuahua (perro)", g:9, a:""}, {n:"Cavalier King Charles Spaniel", g:9, a:""}, {n:"King Charles spaniel", g:9, a:""},{n:"Pequinés", g:9, a:""}, {n:"Chin japonés", g:9, a:""}, {n:"Bulldog francés", g:9, a:"Frenchie"}, {n:"Pug", g:9, a:"Carlino"}, {n:"Boston terrier", g:9, a:""}, {n:"Papillon (perro)", g:9, a:""}, {n:"Kromfohrländer", g:9, a:""}, {n:"Galgo afgano", g:10, a:""}, {n:"Saluki", g:10, a:""}, {n:"Borzoi", g:10, a:""}, {n:"Irish Wolfhound", g:10, a:"Lobero Irlandés"}, {n:"Deerhound", g:10, a:""}, {n:"Galgo español", g:10, a:""}, {n:"Greyhound", g:10, a:"Galgo Inglés"}, {n:"Whippet", g:10, a:""}, {n:"Pequeño lebrel italiano", g:10, a:""}, {n:"Azawakh", g:10, a:""}, {n:"Sloughi", g:10, a:""}, {n:"Magyar agár", g:10, a:""}, {n:"Chart polski", g:10, a:""}];

const GROUP_NAMES = [

"Pastoreo y Boyeros", "Pinscher, Schnauzer y Molosos", "Terriers", "Teckels (Salchichas)",

"Spitz y Primitivos", "Sabuesos y Rastreadores", "Muestra (Cazadores)",

"Cobradores y de Agua", "Compañía y Falda", "Lebreles (Galgos)"

];

function init() {

const groupContainer = document.getElementById('groupContainer');

const azSelect = document.getElementById('azSelect');

// Generar Menú de Grupos Vertical

GROUP_NAMES.forEach((name, i) => {

const count = BREEDS.filter(b => b.g === (i+1)).length;

const div = document.createElement('div');

div.className = 'group-card';

div.onclick = () => showListView(i + 1);

div.innerHTML = `

<div class="group-count">${count} Razas</div>

groupContainer.appendChild(div);

});

// Cargar Select A-Z

const sorted = [...BREEDS].sort((a,b) => a.n.localeCompare(b.n));

sorted.forEach(breed => {

let opt = document.createElement('option');

opt.value = breed.n;

opt.text = breed.n;

azSelect.add(opt);

});

}function showHome() {

document.getElementById('homeView').style.display = 'block';

document.getElementById('listView').style.display = 'none';

window.scrollTo(0, 0);

}

function showListView(groupId) {

document.getElementById('homeView').style.display = 'none';

document.getElementById('listView').style.display = 'block';

document.getElementById('listTitle').innerText = GROUP_NAMES[groupId - 1];

const results = document.getElementById('breedResults');

results.innerHTML = '';

const filtered = BREEDS.filter(b => b.g === groupId);

filtered.forEach(breed => {

const row = document.createElement('div');

row.className = 'breed-row';

row.onclick = () => openBreed(breed.n);

row.innerHTML = `

<span class="b-main-name">${breed.n.split(' (')[0]}</span>

results.appendChild(row);

});

window.scrollTo(0, 0);

}function handleSearch() {

const query = document.getElementById('breedSearch').value.toLowerCase().trim();

if(query.length < 2) return;

const filtered = BREEDS.filter(b =>

b.n.toLowerCase().includes(query) || (b.a && b.a.toLowerCase().includes(query))

);

if(filtered.length > 0) {

document.getElementById('homeView').style.display = 'none';

document.getElementById('listView').style.display = 'block';

document.getElementById('listTitle').innerText = "Resultados de búsqueda";

const results = document.getElementById('breedResults');

results.innerHTML = '';

filtered.forEach(breed => {

const row = document.createElement('div');

row.className = 'breed-row';

row.onclick = () => openBreed(breed.n);

row.innerHTML = `

<span class="b-main-name">${breed.n.split(' (')[0]}</span>

<small style="color:#777;">Grupo ${breed.g}: ${GROUP_NAMES[breed.g-1]}</small>

</div>

results.appendChild(row);

});

}

}async function openBreed(name) {

const modal = document.getElementById('breedModal');

const content = document.getElementById('modalContent');

document.getElementById('modalTitle').innerText = name.split(' (')[0];

modal.style.display = 'block';

content.innerHTML = '<div style="text-align:center; padding:50px;">Extrayendo toda la información técnica...</div>';

const cleanName = name.replace(/ /g, '_');

try {

// Intentamos obtener el contenido móvil formateado de Wikipedia

const r = await fetch(`https://es.wikipedia.org/api/rest_v1/page/mobile-sections/${encodeURIComponent(cleanName)}`);

const data = await r.json();

let htmlContent = '';

// Imagen principal

if(data.lead.image) {

htmlContent += `<img src="${data.lead.image.urls[640] || data.lead.image.urls[320]}" alt="${name}">`;

}

// Secciones de información (Historia, Temperamento, Características)

data.lead.sections.forEach(sec => {

if(sec.text) htmlContent += `<div class="wiki-section">${sec.text}</div>`;

});

if(data.remaining && data.remaining.sections) {

data.remaining.sections.forEach(sec => {

if(sec.anchor === "Historia" || sec.anchor === "Temperamento" || sec.anchor === "Características" || sec.anchor === "Carácter") {

htmlContent += `

<h3 style="text-transform:uppercase;">${sec.anchor}</h3>

</div>`;

}

});

}

content.innerHTML = htmlContent + `

<a href="https://www.google.com/search?q=${encodeURIComponent(name + ' raza de perro características y cuidados')}"

target="_blank" class="google-btn">

BUSCAR MÁS DETALLES EN GOOGLE

</a>

} catch (e) {

content.innerHTML = `

<p>No se pudo cargar la ficha automática completa.</p>

<a href="https://www.google.com/search?q=${encodeURIComponent(name + ' características')}"

target="_blank" class="google-btn">

BUSCAR ESTA RAZA EN GOOGLE

</a>

}

window.scrollTo(0, 0);

}function closeBreed() {

document.getElementById('breedModal').style.display = 'none';

}

// Iniciar aplicación al cargar la ventana

window.onload = init;

</script>