Files
open-daycare/references/pantallas/perfil-nino.dc.html
T

87 lines
12 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet data-dc-atomics>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
</style>
</helmet>
<div style="display:flex;min-height:100vh;background:#F6ECDF">
<aside style="width:248px;flex:none;background:#FFFDF9;border-right:1px solid #ECE0D0;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh">
<a href="index.dc.html" style="display:flex;align-items:center;gap:11px;padding:4px 8px 22px">
<div style="width:38px;height:38px;border-radius:12px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;flex:none"><svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></div>
<div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E;line-height:1">OpenDayCare</div><div style="font-size:11.5px;color:#A89A8B;margin-top:2px">Sala Soles</div></div>
</a>
<a href="crear-publicacion.dc.html" style="display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:14px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:14.5px;box-shadow:0 8px 18px -8px rgba(238,129,100,.75);margin-bottom:18px"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>Nueva publicación</a>
<nav style="display:flex;flex-direction:column;gap:4px;flex:1">
<a href="feed.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Feed</a>
<a href="ninos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#FBE3D8;color:#D9583C;font-weight:800;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="7" r="3"/><circle cx="17" cy="9" r="2.4"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 20a5 5 0 0 1 5.5-4.9"/></svg>Niños</a>
<a href="avisos.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg>Avisos</a>
<a href="mi-cuenta.dc.html" style="display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:transparent;color:#6E6359;font-weight:600;font-size:14.5px"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Mi cuenta</a>
</nav>
<div style="border-top:1px solid #ECE0D0;padding-top:14px;margin-top:10px"><div style="display:flex;align-items:center;gap:11px;padding:6px 8px">
<div style="width:38px;height:38px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">C</div>
<div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14px;color:#3F362E">Caro Giménez</div><div style="font-size:12px;color:#A89A8B">Maestra · Soles</div></div>
<a href="login.dc.html" title="Cerrar sesión" style="flex:none;width:32px;height:32px;border-radius:10px;background:#F6ECDF;color:#94887B;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
</div></div>
</aside>
<main style="flex:1;min-width:0;height:100vh;overflow-y:auto">
<div style="max-width:820px;width:100%;margin:0 auto;padding:34px 40px 80px">
<a href="ninos.dc.html" style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px;margin-bottom:20px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>Volver a Niños</a>
<div style="display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap">
<div style="flex:1;min-width:300px;display:flex;flex-direction:column;gap:18px">
<div style="display:flex;align-items:center;gap:18px">
<div style="width:84px;height:84px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:34px;display:flex;align-items:center;justify-content:center;flex:none">M</div>
<div style="flex:1"><h1 style="font-family:'Fredoka';font-weight:600;font-size:28px;margin:0;color:#3F362E">Mateo Fernández</h1><p style="margin:3px 0 0;color:#94887B;font-size:15px">3 años · Sala Soles</p></div>
<a href="agregar-nino.dc.html" style="border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;padding:9px 16px;border-radius:12px">Editar</a>
</div>
<div style="display:flex;gap:14px;background:#FBDAD6;border-radius:16px;padding:16px 18px">
<div style="width:40px;height:40px;border-radius:11px;background:#F4A8A0;display:flex;align-items:center;justify-content:center;flex:none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg></div>
<div><div style="font-weight:800;color:#C5413A;font-size:15px;margin-bottom:2px">Alergias y notas</div><div style="color:#B25249;font-size:14.5px;line-height:1.5">Alergia al maní. Evitar frutos secos. Lleva inhalador en la mochila.</div></div>
</div>
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;overflow:hidden">
<div style="display:flex;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #F0E6D8"><span style="color:#94887B;font-size:14.5px">Fecha de nacimiento</span><span style="font-weight:800;color:#3F362E;font-size:14.5px">12 mar 2022</span></div>
<div style="display:flex;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #F0E6D8"><span style="color:#94887B;font-size:14.5px">Sala</span><span style="font-weight:800;color:#3F362E;font-size:14.5px">Soles</span></div>
<div style="display:flex;justify-content:space-between;padding:15px 18px"><span style="color:#94887B;font-size:14.5px">Ingreso</span><span style="font-weight:800;color:#3F362E;font-size:14.5px">feb 2025</span></div>
</div>
</div>
<div style="width:300px;flex:none;display:flex;flex-direction:column;gap:14px">
<a href="resumen-dia.dc.html" style="display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px;border-radius:14px;background:#3F362E;color:#fff;font-weight:800;font-size:15px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>Resumen del día</a>
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px">
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin-bottom:14px">PADRES VINCULADOS</div>
<div style="display:flex;flex-direction:column;gap:14px">
<div style="display:flex;align-items:center;gap:12px"><div style="width:40px;height:40px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">L</div><div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14.5px;color:#3F362E">Lucía Fernández</div><div style="font-size:12.5px;color:#A89A8B">Mamá · activa</div></div><span style="flex:none;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:#CFEBD8;color:#3E9B6C">ACTIVA</span></div>
<div style="display:flex;align-items:center;gap:12px"><div style="width:40px;height:40px;border-radius:50%;background:#A9C7E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">D</div><div style="flex:1;min-width:0"><div style="font-weight:800;font-size:14.5px;color:#3F362E">Diego Fernández</div><div style="font-size:12.5px;color:#A89A8B">Papá · invitación enviada</div></div><span style="flex:none;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:#F7E7A6;color:#9A7B1E">PENDIENTE</span></div>
<a href="vincular-padre.dc.html" style="display:flex;align-items:center;gap:12px;padding:8px 0 0"><span style="width:40px;height:40px;border-radius:50%;border:1.5px dashed #D8CBBA;display:flex;align-items:center;justify-content:center;color:#B0A290;flex:none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></span><span style="font-weight:800;font-size:14.5px;color:#C5503A">Vincular otro padre</span></a>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<template id="__bundler_thumbnail" data-bg-color="#F6ECDF">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F6ECDF"/><circle cx="280" cy="240" r="70" fill="#A9D9E8"/><rect x="380" y="210" width="360" height="30" rx="15" fill="#3F362E"/><rect x="180" y="360" width="560" height="120" rx="24" fill="#FBDAD6"/><rect x="800" y="200" width="280" height="360" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/></svg>
</template>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:&quot;100%&quot;,&quot;height&quot;:&quot;100%&quot;}}"></script>
</body>
</html>