# data[].attributes.headline
La gente ya no pesca a sus perros por estar en el celular

# data[].attributes.subject
La gente ya no pesca a sus perros por estar en el celular

# data[].attributes.body
Solución: crear una aplicación que cada 1 hora te mande notificaciones de animales tristes para generar conciencia.

Usuarios beneficiados: los perros y los dueños.

# data[].attributes.body
Esta aplicación esta basada en contra del abuso animal.

Su propósito es poder reportar casos de abuso animal en publicaciones para que mas gente pueda enterarse.

Cuando publicas sobre un abuso, puedes dar información sobre en que lugar fue, quien es el responsable para que lo metan preso, etc.

Esta aplicacion despues de instalarla te mandara notificaciones cada 1 hora sobre casos de maltrato hacia los animales y tambien te mandara imagenes de perros tristes.

https://www.canva.com/design/DAGxTeyfVw4/p-oE8b1MJpejlnRUJIYkww/edit

# data[].attributes.body
La pantalla clasica de cualquier aplicacion, "iniciar sesion" para acceder a una cuenta y "registrarse" para crear una cuenta.

# data[].attributes.body
Aqui ya tienes acceso a la app, te dan 2 opciones:

1: Leer sobre casos

Esta opcion funciona como un twitter, puedes ver posts, darle like y compartirlos con demas personas.

2: Publicar tu caso

Tambien funciona como un twitter, pero puedes hacer hilos mas customizables y ya.

# data[].attributes.headline
Los micreros son pésimos y ponen en peligro a la gente (saltándose semáforos en rojo, yendo mas rápido de lo habitual, etc)

# data[].attributes.subject
Los micreros son pésimos y ponen en peligro a la gente (saltándose semáforos en rojo, yendo mas rápido de lo habitual, etc)

# data[].attributes.body
Solución: inventar una app que vaya recopilando las micros que vayas tomando junto con su patente y mas información sobre quien manejo esa micro para poder realizar una denuncia mas fácil.

Usuarios beneficiados: gente de mayor edad o adolescentes que sufren un mayor peligro al enfrentarse a estos problemas.

# data[].attributes.headline
La gente se queda perdida lejos de su casa y no saben como volver

# data[].attributes.subject
La gente se queda perdida lejos de su casa y no saben como volver

# data[].attributes.body
Solucion: Crear una aplicacion que su unico proposito sea que puedas guardar ubicaciones en ella (funciona sin internet)

Usuarios beneficiados: gente de mayor edad y adolescentes.

# data[].attributes.headline
Las personas que se ponen alarma para despertar pero que al despertar en vez de levantarse se quedan viendo redes sociales.

# data[].attributes.subject
Las personas que se ponen alarma para despertar pero que al despertar en vez de levantarse se quedan viendo redes sociales.

# data[].attributes.body
Solución: crear una app de alarmas mas personalizadas y que tenga la opción de spamearte/llenarte de alarmas cada vez que apagas una cada 10 minutos si es que no te has levantado de la cama.

Usuarios beneficiados: gente sedentaria o con sueño.

# data[].attributes.body
Una aplicacion de alarmas pero mas customizable.

Te dan la opcion de poner la alarma en un bucle el cual solo se desactiva si prendes tu celular y accedes a la aplicacion para asi poder hacer que el usuario se pueda despertar mejor.

https://www.canva.com/design/DAGz7JQFbWY/YDt7KIJUWFoBbn6POtDC_w/edit

# data[].attributes.body
Es una muy basica, la clasica de siempre en donde pones la hora a la que quieras despertar, pero tambien puedes mover los iconos de los relojes si lo quieres mas ordenado, pero esto no influye en que alarma se vaya a activar primero.

# data[].attributes.body
Esta pantalla es la que llama la atención ya que tiene un modo "estricto" el cual lo que hace es que a la hora de que suene la alarma, en vez de deslizar el dedo y apagarla, la tienes que apagar entrando a la aplicación y desactivando esa opcion.

# data[].attributes.body
La tercera pantalla es como se veria al momento de reportar tu caso a las demas personas.

El icono del avion de papel es para mandar el caso, el icono de la galeria es para adjuntar imagenes y el icono que se parece a una aguja pequeña es para señalar la ubicacion del lugar de una manera mas comoda.

# data[].attributes.attachment_link.readable_text
CODIGOS DE MI APLICACION ANIMAL-SOCIAL HTML
App Casos

Iniciar SesiÃ³n

Registrarse

â¬

Iniciar SesiÃ³n

Entrar

â¬

Crear Cuenta

Registrar

Ver Casos

Publicar Caso

Cerrar SesiÃ³n

â¬

Casos Registrados

AquÃ aparecerÃ¡n los casos...

â¬

Publicar Caso

Publicar

---------------------------------------------- CSS :root{ --bg1:#ff6a88; --bg2:#b24592; --accent:#2b1c1c; --card:#ffffffee; } html,body{ height:100%; margin:0; font-family:'Poppins',system-ui,Arial,sans-serif; background:#ececec; } /* phone container */ .phone{ width:360px; height:780px; border-radius:30px; margin:24px auto; box-shadow:0 10px 30px rgba(0,0,0,.25); background:linear-gradient(150deg,var(--bg1),var(--bg2)); position:relative; overflow:hidden; border:8px solid #efefef; } /* screens */ .screen{ height:100%; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; } .hidden{ display:none; } /* top bar */ .top-bar{ width:100%; height:70px; background:var(--card); display:flex; align-items:center; justify-content:center; position:relative; } .logo-top{ height:38px; } .back-btn{ position:absolute; left:14px; padding:10px 13px; background:rgba(0,0,0,0.08); border-radius:50px; cursor:pointer; font-size:17px; } /* home logo */ .logo-home{ width:180px; margin-top:55px; } /* content layout */ .content{ width:100%; padding:20px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; } h2{ color:white; margin-bottom:5px; font-weight:600; } /* big buttons */ .big-btn{ width:82%; background:rgba(43,28,28,0.92); color:white; padding:18px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.25); cursor:pointer; } /* small CTA */ .small-cta{ width:75%; background:var(--accent); color:white; padding:12px; border-radius:10px; text-align:center; font-weight:600; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25); } .logout-btn{ width:75%; background:#b01f1f; color:white; padding:12px; border-radius:10px; text-align:center; font-weight:600; cursor:pointer; margin-top:40px; } /* form inputs */ input, textarea{ width:85%; padding:10px; border-radius:10px; border:1px solid #ddd; font-family:inherit; font-size:15px; outline:none; } textarea{ resize:none; height:120px; } /* responsive */ @media(max-width:420px){ .phone{ transform:scale(.9); margin-top:8px; } } ---------------------------------- JSS let historyStack = []; function goTo(screenId){ let current = document.querySelector(".screen:not(.hidden)"); if(current){ historyStack.push(current.id); current.classList.add("hidden"); } document.getElementById(screenId).classList.remove("hidden"); } function goBack(){ if(historyStack.length === 0){ goTo("homeScreen"); return; } let previous = historyStack.pop(); let current = document.querySelector(".screen:not(.hidden)"); if(current) current.classList.add("hidden"); document.getElementById(previous).classList.remove("hidden"); } function registerUser(){ let email = document.getElementById("regEmail").value.trim(); let pass = document.getElementById("regPassword").value.trim(); if(email === "" || pass === ""){ alert("Completa todos los campos"); return; } localStorage.setItem("userEmail", email); localStorage.setItem("userPass", pass); alert("Registro exitoso. Ahora inicia sesiÃ³n."); goTo("loginScreen"); } function login(){ let email = document.getElementById("loginEmail").value.trim(); let pass = document.getElementById("loginPassword").value.trim(); let savedEmail = localStorage.getItem("userEmail"); let savedPass = localStorage.getItem("userPass"); if(email === savedEmail && pass === savedPass){ localStorage.setItem("logged", "true"); historyStack = []; goTo("menuScreen"); } else { alert("Correo o contraseÃ±a incorrectos"); } } function logout(){ localStorage.removeItem("logged"); historyStack = []; let current = document.querySelector(".screen:not(.hidden)"); if(current) current.classList.add("hidden"); document.getElementById("homeScreen").classList.remove("hidden"); } function checkAccess(screenId){ let logged = localStorage.getItem("logged"); if(!logged){ alert("Primero inicia sesiÃ³n"); goTo("loginScreen"); return false; } goTo(screenId); return true; } // ProtecciÃ³n directa por seguridad document.addEventListener("DOMContentLoaded", () => { let logged = localStorage.getItem("logged"); if(!logged){ document.querySelectorAll("#menuScreen, #viewScreen, #publishScreen") .forEach(s => s.classList.add("hidden")); } });

# data[].attributes.attachment_link.readable_text
CODIGOS MEJORADOS DE MI APLICACION ANIMAL-SOCIAL HTML
App Animal ð¾

ð

â¡ï¸

INICIAR SESIÃN

ð¤â

REGISTRARSE

ð¶

ð

Iniciar SesiÃ³n

Entrar Volver

ð¶

ð

Registrarse

Crear cuenta Volver

ð¶

ð¾

ð¬

LEER SOBRE CASOS

ð

PUBLICAR TU CASO

Cerrar sesiÃ³n

ðâð¦º

â¬ ð¾

ð

â¬ â°

Â¿CuÃ¡l es el problema?

ð¸ ð Publicar

ð

------------------------------------------------- CSS :root{ --pink1:#ff6a88; --pink2:#b24592; --dark:#2c1e1e; --card:#ffffffee; } /* base */ *{box-sizing:border-box} body{ margin:0; font-family: 'Poppins', system-ui, Arial, sans-serif; background: linear-gradient(150deg,var(--pink1),var(--pink2)); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#000; } /* screen full */ .screen{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; } /* visibility */ .hidden{display:none;} /* top & bottom bars */ .top-bar, .bottom-bar{ width:100%; text-align:center; padding:14px 0; font-size:34px; background:var(--card); } /* dark variant */ .top-bar.dark, .bottom-bar.dark{ background:var(--dark); color:#fff; } /* main center area */ .main{ flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; padding:18px 10px; } /* options on home */ .option{cursor:pointer;display:flex;flex-direction:row;align-items:center;gap:18px} .option .emoji{font-size:48px;background:rgba(0,0,0,0.08);padding:14px;border-radius:12px} .option p{font-size:13px;letter-spacing:1px;color:#130d0d} /* menu options */ .menu-option{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer} .emoji.big{font-size:84px} .btn{width:220px;padding:12px;border-radius:12px;text-align:center;font-weight:700} .dark-btn{background:var(--dark);color:#fff} /* form box */ .form-box{width:92%;max-width:420px;background:transparent;padding:14px;display:flex;flex-direction:column;align-items:center;gap:12px} input, textarea{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,0.08);font-size:15px} textarea{height:120px;resize:none} /* buttons */ .row{display:flex;gap:12px;width:100%;justify-content:center} button{cursor:pointer;border-radius:10px;padding:10px 16px;border:none;font-weight:600} .primary{background:#fff;color:var(--pink2)} .ghost{background:rgba(255,255,255,0.85);color:#333} .logout{background:#b01f1f;color:#fff;padding:12px;width:100%;border-radius:10px} /* bubble buttons (back, home) */ .bubble{background:rgba(255,255,255,0.9);border-radius:50%;width:46px;height:46px;border:none;font-size:20px;cursor:pointer} .bubble.back{position:absolute;left:14px;top:10px} .bubble.home{position:relative} /* list / cases */ .content-list{width:94%;max-width:520px;padding:12px;display:flex;flex-direction:column;gap:12px;align-items:center} .case-card{width:100%;background:#fff;border-radius:12px;padding:12px;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-align:left} .case-head{display:flex;gap:12px;align-items:center} .case-title{font-weight:700;color:#2b1c1c} .case-desc{margin-top:8px;color:#333} /* actions row */ .actions{display:flex;gap:12px;margin-top:10px;align-items:center} .like-btn{padding:8px 12px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);background:transparent;cursor:pointer} .like-btn.liked{background:#ffe9ef;border-color:#ff95b1;color:#b0213a} /* report actions */ .report-actions{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:10px} .action-emoji{font-size:22px} /* responsive */ @media (max-width:420px){ .emoji.big{font-size:68px} .btn{width:84%} .main{gap:26px}} ------------------------- JSS // Simple SPA + Auth + Cases (localStorage) // Helpers const el = id => document.getElementById(id); // Navigation helpers function show(id){ document.querySelectorAll('.screen').forEach(s=>s.classList.add('hidden')); el(id).classList.remove('hidden'); } // Auth helpers function currentUser(){ return localStorage.getItem('loggedUser'); } function setUserSession(user){ localStorage.setItem('loggedUser', user); } function clearSession(){ localStorage.removeItem('loggedUser'); } // Users stored as: users_{username} = password (simple demo) function registerUser(username, pass){ if(!username || !pass) return {ok:false, msg:'Completa los campos'}; if(localStorage.getItem('user_'+username)) return {ok:false, msg:'Usuario ya existe'}; localStorage.setItem('user_'+username, pass); return {ok:true}; } // login function loginUser(username, pass){ const stored = localStorage.getItem('user_'+username); if(stored && stored === pass){ setUserSession(username); return {ok:true}; } return {ok:false, msg:'Usuario o contraseÃ±a incorrectos'}; } // --- Cases data & persistence --- const CASES_KEY = 'app_cases_v2'; const META_KEY = 'app_cases_meta_v2'; // seed default cases if none function seedCasesIfNeeded(){ if(!localStorage.getItem(CASES_KEY)){ const seed = [ {id:'c1', title:'Perro perdido en la plaza', desc:'Se perdiÃ³ un perro marrÃ³n, responde a \"Loki\".'}, {id:'c2', title:'Cachorro herido', desc:'Cachorro con pata lastimada cerca del rÃo.'}, {id:'c3', title:'Abandono en terreno baldÃo', desc:'Varios perros vistos en terreno, posible abandono.'} ]; localStorage.setItem(CASES_KEY, JSON.stringify(seed)); const meta = {}; seed.forEach(c=> meta[c.id] = {likes:0, likedBy:[], comments:[]}); localStorage.setItem(META_KEY, JSON.stringify(meta)); } } function getCases(){ return JSON.parse(localStorage.getItem(CASES_KEY) || '[]'); } function getMeta(){ return JSON.parse(localStorage.getItem(META_KEY) || '{}'); } function saveMeta(m){ localStorage.setItem(META_KEY, JSON.stringify(m)); } function saveCases(cs){ localStorage.setItem(CASES_KEY, JSON.stringify(cs)); } // Render cases function renderCases(){ const list = el('casesList'); list.innerHTML = ''; const cases = getCases(); const meta = getMeta(); cases.forEach(c=>{ const m = meta[c.id] || {likes:0, likedBy:[], comments:[]}; const card = document.createElement('div'); card.className = 'case-card'; card.innerHTML = `

ð¶

${escapeHtml(c.title)}

${escapeHtml(c.desc)}

â¤ï¸ ${m.likes} ð¬ ${m.comments.length}

${m.comments.map(cm=>`
ð¾ ${escapeHtml(cm)}
`).join('')}
`; list.appendChild(card); }); // attach listeners document.querySelectorAll('.like-btn').forEach(b=>{ b.onclick = ()=> { const id = b.getAttribute('data-id'); toggleLike(id); renderCases(); }; }); document.querySelectorAll('.comment-btn').forEach(b=>{ b.onclick = ()=> { const id = b.getAttribute('data-id'); const text = prompt('Escribe tu comentario:'); if(text && text.trim()){ addComment(id, text.trim()); renderCases(); } }; }); } function isLiked(caseId){ const user = currentUser(); if(!user) return false; const meta = getMeta(); const m = meta[caseId]; return m && m.likedBy && m.likedBy.includes(user); } function toggleLike(caseId){ const user = currentUser(); if(!user){ alert('Debes iniciar sesiÃ³n para dar like'); show('loginScreen'); return; } const meta = getMeta(); if(!meta[caseId]) meta[caseId] = {likes:0, likedBy:[], comments:[]}; const m = meta[caseId]; if(m.likedBy.includes(user)){ m.likedBy = m.likedBy.filter(u=>u!==user); m.likes = Math.max(0, (m.likes||0)-1); } else { m.likedBy.push(user); m.likes = (m.likes||0)+1; } saveMeta(meta); } function addComment(caseId, text){ const user = currentUser(); if(!user){ alert('Debes iniciar sesiÃ³n para comentar'); show('loginScreen'); return; } const meta = getMeta(); if(!meta[caseId]) meta[caseId] = {likes:0, likedBy:[], comments:[]}; meta[caseId].comments.push(text); saveMeta(meta); } // Publish new case function publishCase(){ const user = currentUser(); if(!user){ alert('Debes iniciar sesiÃ³n'); show('loginScreen'); return; } const desc = el('newCaseDesc').value.trim(); if(!desc){ alert('Describe el caso'); return; } const cases = getCases(); const id = 'c' + (Date.now()); const title = desc.length>40?desc.slice(0,37)+'...':desc; cases.unshift({id, title, desc}); saveCases(cases); const meta = getMeta(); meta[id] = {likes:0, likedBy:[], comments:[]}; saveMeta(meta); el('newCaseDesc').value = ''; alert('Caso publicado â'); show('casesScreen'); renderCases(); } // escape function escapeHtml(s){ return s.replace(/&/g,'&').replace(//g,'>'); } // Wiring UI actions function setupHandlers(){ // home buttons el('btnGoLogin').onclick = ()=> show('loginScreen'); el('btnGoRegister').onclick = ()=> show('registerScreen'); // login/register actions el('btnBackFromLogin').onclick = ()=> show('homeScreen'); el('btnBackFromRegister').onclick = ()=> show('homeScreen'); el('btnRegister').onclick = ()=>{ const u = el('regUser').value.trim(); const p = el('regPass').value.trim(); const res = registerUser(u,p); if(!res.ok) return alert(res.msg); alert('Registro correcto â'); setUserSession(u); show('menuScreen'); }; el('btnLogin').onclick = ()=>{ const u = el('loginUser').value.trim(); const p = el('loginPass').value.trim(); const res = loginUser(u,p); if(!res.ok) return alert(res.msg); alert('Hola, ' + u); show('menuScreen'); }; el('btnLogout').onclick = ()=> { clearSession(); alert('Has cerrado sesiÃ³n'); show('homeScreen'); }; // menu -> cases / publish el('btnViewCases').onclick = ()=> { if(!currentUser()){ alert('Inicia sesiÃ³n'); show('loginScreen'); return; } show('casesScreen'); renderCases(); }; el('btnPublishCase').onclick = ()=> { if(!currentUser()){ alert('Inicia sesiÃ³n'); show('loginScreen'); return; } show('publishScreen'); }; // back/home in cases & publish el('backFromCases').onclick = ()=> show('menuScreen'); el('homeFromCases').onclick = ()=> show('menuScreen'); el('backFromPublish').onclick = ()=> show('menuScreen'); el('homeFromPublish').onclick = ()=> show('menuScreen'); // submit case el('btnSubmitCase').onclick = publishCase; } // Init on load document.addEventListener('DOMContentLoaded', ()=>{ seedCasesIfNeeded(); setupHandlers(); // if already logged show menu if(currentUser()) show('menuScreen'); else show('homeScreen'); });