añadimos referencias de diseño y unos skills

This commit is contained in:
luriasb
2026-10-19 00:15:36 -06:00
parent 4f2691f8da
commit 3c92761dc6
29 changed files with 3964 additions and 0 deletions
@@ -0,0 +1,63 @@
<!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;1,400&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Nunito',system-ui,sans-serif;background:#FBF4EC;color:#3F362E;-webkit-font-smoothing:antialiased}
input,button{font-family:inherit}
input:focus{outline:none}
::placeholder{color:#B6A99B}
a{text-decoration:none}
</style>
</helmet>
<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;background:#FBF4EC;padding:40px">
<div style="width:100%;max-width:440px">
<div style="width:58px;height:58px;border-radius:18px;background:linear-gradient(155deg,#F8C3A8,#F2937A);display:flex;align-items:center;justify-content:center;margin-bottom:22px;box-shadow:0 12px 26px -10px rgba(238,129,100,.65)">
<svg width="30" height="30" 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>
<h1 style="font-family:'Fredoka';font-weight:600;font-size:32px;line-height:1.15;margin:0 0 8px;color:#3F362E">Bienvenida a OpenDayCare</h1>
<p style="margin:0 0 26px;color:#94887B;font-size:15.5px;line-height:1.55">Te invitaron a seguir el día de tu hijo. Creá tu contraseña para activar la cuenta.</p>
<div style="display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid #EADFD0;border-radius:16px;padding:14px 16px;margin-bottom:22px">
<div style="width:44px;height:44px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center">M</div>
<div><div style="font-size:13px;color:#94887B">Te invitaron a seguir a</div><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E">Mateo · Sala Soles</div></div>
</div>
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:8px">CÓDIGO DE INVITACIÓN</div>
<input value="7K4P9" style="width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:18px;letter-spacing:3px;font-weight:700;color:#3F362E;margin-bottom:18px;font-family:'Fredoka'">
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:8px">EMAIL</div>
<input value="lucia.fernandez@gmail.com" type="email" style="width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:8px">CREAR CONTRASEÑA</div>
<input type="password" value="contraseña" style="width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #F2A78E;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
<label style="display:flex;align-items:flex-start;gap:12px;background:#FBF1D6;border-radius:14px;padding:14px 16px;margin-bottom:24px;cursor:pointer">
<span style="flex:none;width:24px;height:24px;border-radius:8px;background:#5FB97E;display:flex;align-items:center;justify-content:center;margin-top:1px">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span style="font-size:14px;color:#8A7234;line-height:1.45">Autorizo a la guardería a tomar y compartir fotos de mi hijo dentro de la app.</span>
</label>
<a href="familia-feed.dc.html" style="display:block;text-align:center;width:100%;padding:15px;border-radius:15px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:16px;box-shadow:0 10px 22px -8px rgba(238,129,100,.7)">Activar mi cuenta</a>
<p style="text-align:center;margin:22px 0 0;color:#94887B;font-size:14.5px">¿Ya tenés cuenta? <a href="login.dc.html" style="color:#C5503A;font-weight:800">Iniciar sesión</a></p>
</div>
</div>
<template id="__bundler_thumbnail" data-bg-color="#F2937A">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F2937A"/><g transform="translate(600 400)" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round" stroke-linejoin="round"><circle cx="0" cy="0" r="78"/><path d="M0 -150 L0 -118 M0 118 L0 150 M-106 -106 L-83 -83 M83 83 L106 106 M-150 0 L-118 0 M118 0 L150 0 M-106 106 L-83 83 M83 -83 L106 -106"/></g></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>
+53
View File
@@ -0,0 +1,53 @@
<!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}
input,textarea{font-family:inherit}
input:focus,textarea:focus{outline:none}
::placeholder{color:#B6A99B}
</style>
</helmet>
<div style="min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:40px 24px">
<div style="width:100%;max-width:520px;background:#FBF4EC;border:1px solid #ECE0D0;border-radius:24px;box-shadow:0 20px 50px -24px rgba(63,54,46,.35);overflow:hidden">
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid #ECE0D0">
<a href="ninos.dc.html" style="color:#94887B;font-weight:700;font-size:15px">Cancelar</a>
<span style="font-family:'Fredoka';font-weight:600;font-size:18px;color:#3F362E">Agregar niño</span>
<a href="ninos.dc.html" style="color:#D9583C;font-weight:800;font-size:15px">Guardar</a>
</div>
<div style="padding:24px 26px">
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">NOMBRE COMPLETO</div>
<input placeholder="Ej. Martina López" style="width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
<div style="display:flex;gap:14px;margin-bottom:18px">
<div style="flex:1"><div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">FECHA DE NACIMIENTO</div><input placeholder="dd/mm/aaaa" style="width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E"></div>
<div style="flex:1"><div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">SALA</div><div style="display:flex;align-items:center;gap:8px;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;font-weight:700">Soles<span style="flex:1"></span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B0A290" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></div></div>
</div>
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">ALERGIAS (ETIQUETAS)</div>
<input placeholder="Ej. Maní, Lactosa" style="width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">NOTAS MÉDICAS</div>
<textarea placeholder="Indicaciones, medicación, contactos…" style="width:100%;min-height:90px;resize:vertical;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;line-height:1.5"></textarea>
</div>
</div>
</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"/><rect x="320" y="120" width="560" height="560" rx="36" fill="#FBF4EC" stroke="#ECE0D0" stroke-width="5"/><rect x="380" y="280" width="440" height="56" rx="16" fill="#fff" stroke="#EADFD0" stroke-width="4"/><rect x="380" y="380" width="200" height="56" rx="16" fill="#fff" stroke="#EADFD0" stroke-width="4"/><rect x="620" y="380" width="200" height="56" rx="16" fill="#fff" stroke="#EADFD0" 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>
+63
View File
@@ -0,0 +1,63 @@
<!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: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"><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:#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"><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:680px;width:100%;margin:0 auto;padding:34px 40px 80px">
<div style="margin-bottom:22px"><div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">ACTIVIDAD</div><h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Avisos</h1></div>
<div style="display:flex;flex-direction:column;gap:12px">
<a href="detalle-publicacion.dc.html" style="display:flex;gap:13px;align-items:flex-start;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px"><div style="width:40px;height:40px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;display:flex;align-items:center;justify-content:center;flex:none">L</div><div style="flex:1"><div style="font-size:14.5px;color:#4A4038"><b>Lucía Fernández</b> comentó en la publicación de Mateo.</div><div style="font-size:12.5px;color:#A89A8B;margin-top:3px">Hace 12 min</div></div></a>
<div style="display:flex;gap:13px;align-items:flex-start;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px"><div style="width:40px;height:40px;border-radius:50%;background:#CFEBD8;color:#3E9B6C;display:flex;align-items:center;justify-content:center;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></div><div style="flex:1"><div style="font-size:14.5px;color:#4A4038"><b>Diego Fernández</b> activó su cuenta y ya sigue a Mateo.</div><div style="font-size:12.5px;color:#A89A8B;margin-top:3px">Hace 1 h</div></div></div>
<a href="detalle-publicacion.dc.html" style="display:flex;gap:13px;align-items:flex-start;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px"><div style="width:40px;height:40px;border-radius:50%;background:#FBD8CC;color:#D9684A;display:flex;align-items:center;justify-content:center;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="#D9684A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg></div><div style="flex:1"><div style="font-size:14.5px;color:#4A4038"><b>Carla Méndez</b> reaccionó a la publicación de Sofía.</div><div style="font-size:12.5px;color:#A89A8B;margin-top:3px">Hace 2 h</div></div></a>
<div style="display:flex;gap:13px;align-items:flex-start;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px"><div style="width:40px;height:40px;border-radius:50%;background:#F4DC8E;color:#9A7B1E;display:flex;align-items:center;justify-content:center;flex:none"><svg width="20" height="20" 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></div><div style="flex:1"><div style="font-size:14.5px;color:#4A4038">Recordá enviar el <b>resumen del día</b> de la sala Soles.</div><div style="font-size:12.5px;color:#A89A8B;margin-top:3px">Hoy 17:00</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"/><rect x="180" y="200" width="840" height="90" rx="20" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="180" y="320" width="840" height="90" rx="20" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="180" y="440" width="840" height="90" rx="20" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="240" cy="245" r="28" fill="#C9B6E8"/><circle cx="240" cy="365" r="28" fill="#CFEBD8"/><circle cx="240" cy="485" r="28" fill="#FBD8CC"/></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>
@@ -0,0 +1,67 @@
<!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}
input,textarea,button{font-family:inherit}
textarea:focus,input:focus{outline:none}
::placeholder{color:#B6A99B}
</style>
</helmet>
<div style="min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:40px 24px">
<div style="width:100%;max-width:580px;background:#FBF4EC;border:1px solid #ECE0D0;border-radius:24px;box-shadow:0 20px 50px -24px rgba(63,54,46,.35);overflow:hidden">
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid #ECE0D0">
<a href="feed.dc.html" style="color:#94887B;font-weight:700;font-size:15px">Cancelar</a>
<span style="font-family:'Fredoka';font-weight:600;font-size:18px;color:#3F362E">Nueva publicación</span>
<a href="feed.dc.html" style="color:#D9583C;font-weight:800;font-size:15px">Publicar</a>
</div>
<div style="padding:24px 26px">
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:10px">PARA</div>
<div style="display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px">
<button style="display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1.5px solid #3F362E;background:#3F362E;color:#fff;font-weight:700;font-size:14px;cursor:pointer"><span style="width:26px;height:26px;border-radius:50%;background:#A9D9E8;color:#1F7A93;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">M</span>Mateo</button>
<button style="display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer"><span style="width:26px;height:26px;border-radius:50%;background:#F4B8CC;color:#C44A7A;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">S</span>Sofía</button>
<button style="display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer"><span style="width:26px;height:26px;border-radius:50%;background:#B9DEC4;color:#3E8B62;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">B</span>Benjamín</button>
<button style="padding:6px 16px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer">Toda la sala</button>
</div>
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:10px">TIPO</div>
<div style="display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px">
<button style="padding:8px 16px;border-radius:999px;border:none;background:#9A7B1E;color:#fff;font-weight:800;font-size:13.5px;cursor:pointer">Comida</button>
<button style="padding:8px 16px;border-radius:999px;border:none;background:#E7DCF6;color:#7B5FC0;font-weight:800;font-size:13.5px;cursor:pointer">Siesta</button>
<button style="padding:8px 16px;border-radius:999px;border:none;background:#2E89A6;color:#fff;font-weight:800;font-size:13.5px;cursor:pointer">Actividad</button>
<button style="padding:8px 16px;border-radius:999px;border:none;background:#CFEBD8;color:#3E9B6C;font-weight:800;font-size:13.5px;cursor:pointer">Logro</button>
<button style="padding:8px 16px;border-radius:999px;border:none;background:#F9D2DE;color:#C56486;font-weight:800;font-size:13.5px;cursor:pointer">Ánimo</button>
<button style="padding:8px 16px;border-radius:999px;border:none;background:#FBD8CC;color:#D9684A;font-weight:800;font-size:13.5px;cursor:pointer">Foto</button>
<button style="padding:8px 16px;border-radius:999px;border:none;background:#CCD8F4;color:#4E72C8;font-weight:800;font-size:13.5px;cursor:pointer">Anuncio</button>
</div>
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:10px">DESCRIPCIÓN</div>
<textarea placeholder="Contá cómo le fue hoy…" style="width:100%;min-height:120px;resize:vertical;padding:14px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;line-height:1.5;margin-bottom:22px">Pintamos con témperas esta mañana. Mateo eligió el azul para todo y se concentró un montón.</textarea>
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:10px">FOTOS</div>
<div style="display:flex;gap:12px">
<div style="width:96px;height:96px;border-radius:14px;background:#F4ECE1;border:1px solid #ECE0D0;display:flex;align-items:center;justify-content:center;color:#CBB89F"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg></div>
<div style="width:96px;height:96px;border-radius:14px;border:1.5px dashed #DBCDBA;background:#F4ECE1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#B0A290;cursor:pointer"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#C5503A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg><span style="font-size:12px">Agregar</span></div>
</div>
</div>
</div>
</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"/><rect x="300" y="140" width="600" height="520" rx="36" fill="#FBF4EC" stroke="#ECE0D0" stroke-width="5"/><rect x="360" y="320" width="480" height="130" rx="18" fill="#fff" stroke="#EADFD0" stroke-width="4"/><rect x="360" y="240" width="120" height="40" rx="20" fill="#2E89A6"/></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>
@@ -0,0 +1,79 @@
<!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}
input,button{font-family:inherit}
input:focus{outline:none}
::placeholder{color:#B6A99B}
::-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">Familia</div></div>
</a>
<nav style="display:flex;flex-direction:column;gap:4px;flex:1;margin-top:4px">
<a href="familia-feed.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"><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="resumen-dia.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"><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>
<a href="familia-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:#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:14px;color:#3F362E">Lucía Fernández</div><div style="font-size:12px;color:#A89A8B">Mamá de Mateo</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:680px;width:100%;margin:0 auto;padding:34px 40px 40px">
<a href="familia-feed.dc.html" style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px;margin-bottom:18px"><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 al feed</a>
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:22px;padding:24px 26px;box-shadow:0 6px 22px -14px rgba(120,90,60,.5)">
<div style="display:flex;align-items:center;gap:13px;margin-bottom:16px"><div style="width:48px;height:48px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none">M</div><div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:17px;color:#3F362E">Mateo</div><div style="font-size:13px;color:#A89A8B">09:40 · Maestra Caro · Sala Soles</div></div><div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#C7E7F1"><span style="width:8px;height:8px;border-radius:50%;background:#2E89A6"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#2E89A6">ACTIVIDAD</span></div></div>
<p style="font-size:16px;line-height:1.6;color:#4A4038;margin:0 0 4px">Pintamos con témperas esta mañana. Mateo eligió el azul para todo y se concentró un montón mezclando colores.</p>
<a href="foto.dc.html" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-top:16px;border:1.5px dashed #DBCDBA;border-radius:16px;background:#F4ECE1;height:280px;color:#B0A290"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg><span style="font-size:14px">Foto · pintando con témperas</span></a>
<div style="display:flex;align-items:center;gap:10px;margin-top:18px;color:#94887B;font-size:14px"><span style="display:flex"><span style="width:24px;height:24px;border-radius:50%;background:#F8D2DE;border:2px solid #FFFDF9"></span><span style="width:24px;height:24px;border-radius:50%;background:#F7E7A6;border:2px solid #FFFDF9;margin-left:-9px"></span><span style="width:24px;height:24px;border-radius:50%;background:#CFEBD8;border:2px solid #FFFDF9;margin-left:-9px"></span></span>A 5 personas les gusta</div>
<div style="display:flex;gap:12px;margin-top:16px">
<button style="flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:14px;border:1.5px solid #F2A78E;background:#FBD8CC;color:#D9583C;font-weight:800;font-size:15px;cursor:pointer"><svg width="19" height="19" viewBox="0 0 24 24" fill="#D9583C" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>Me encanta</button>
<div style="flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:14px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:800;font-size:15px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>Comentar</div>
</div>
</div>
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin:24px 0 14px">COMENTARIOS · 2</div>
<div style="display:flex;flex-direction:column;gap:14px;margin-bottom:18px">
<div style="display:flex;gap:12px;align-items:flex-start"><div style="width:38px;height:38px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none">L</div><div style="flex:1;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:14px;padding:12px 15px"><div style="display:flex;gap:8px;align-items:baseline;margin-bottom:3px"><span style="font-weight:800;font-size:14px;color:#3F362E">Lucía Fernández</span><span style="font-size:12px;color:#A89A8B">· mamá</span><span style="flex:1"></span><span style="font-size:12px;color:#A89A8B">10:02</span></div><div style="font-size:14.5px;color:#4A4038;line-height:1.45">¡Qué hermoso! En casa también le encanta el azul.</div></div></div>
<div style="display:flex;gap:12px;align-items:flex-start"><div style="width:38px;height:38px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none">C</div><div style="flex:1;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:14px;padding:12px 15px"><div style="display:flex;gap:8px;align-items:baseline;margin-bottom:3px"><span style="font-weight:800;font-size:14px;color:#3F362E">Maestra Caro</span><span style="font-size:12px;color:#A89A8B">· maestra</span><span style="flex:1"></span><span style="font-size:12px;color:#A89A8B">10:15</span></div><div style="font-size:14.5px;color:#4A4038;line-height:1.45">¡Se nota mucho! Le guardamos la obra 🎨</div></div></div>
</div>
<div style="display:flex;gap:12px;align-items:center;position:sticky;bottom:0;background:#F6ECDF;padding:8px 0">
<div style="width:38px;height:38px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none">L</div>
<input placeholder="Escribí un comentario…" style="flex:1;padding:13px 16px;border-radius:14px;border:1.5px solid #ECE0D0;background:#fff;font-size:15px;color:#3F362E">
<button style="width:46px;height:46px;border-radius:14px;border:none;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg></button>
</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"/><rect x="200" y="120" width="800" height="360" rx="28" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="260" y="300" width="680" height="130" rx="16" fill="#F4ECE1" stroke="#DBCDBA" stroke-width="3" stroke-dasharray="10 8"/><rect x="200" y="520" width="800" height="80" rx="18" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="250" cy="180" r="28" fill="#A9D9E8"/></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>
@@ -0,0 +1,77 @@
<!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">Familia</div></div>
</a>
<nav style="display:flex;flex-direction:column;gap:4px;flex:1;margin-top:4px">
<a href="familia-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="resumen-dia.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"><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>
<a href="familia-cuenta.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"><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:#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:14px;color:#3F362E">Lucía Fernández</div><div style="font-size:12px;color:#A89A8B">Mamá de Mateo</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:680px;width:100%;margin:0 auto;padding:34px 40px 80px">
<div style="margin-bottom:22px"><div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">AJUSTES</div><h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Mi cuenta</h1></div>
<div style="display:flex;align-items:center;gap:18px;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:20px 22px;margin-bottom:18px">
<div style="width:64px;height:64px;border-radius:50%;background:#C9B6E8;color:#fff;font-family:'Fredoka';font-weight:600;font-size:26px;display:flex;align-items:center;justify-content:center;flex:none">L</div>
<div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:20px;color:#3F362E">Lucía Fernández</div><div style="font-size:14px;color:#94887B">lucia.fernandez@gmail.com</div><div style="font-size:13px;color:#A89A8B;margin-top:2px">Mamá de Mateo y Sofía</div></div>
<button style="border:1.5px solid #ECE0D0;background:#fff;color:#6E6359;font-weight:700;font-size:14px;padding:9px 16px;border-radius:12px;cursor:pointer;font-family:inherit">Editar</button>
</div>
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:18px 22px;margin-bottom:18px">
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin-bottom:14px">MIS HIJOS</div>
<div style="display:flex;flex-direction:column;gap:16px">
<div style="display:flex;align-items:center;gap:13px"><div style="width:42px;height:42px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">M</div><div style="flex:1"><div style="font-weight:800;font-size:15px;color:#3F362E">Mateo Fernández</div><div style="font-size:13px;color:#A89A8B">3 años · Sala Soles</div></div><span style="font-size:13px;color:#94887B">Fotos</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
<div style="display:flex;align-items:center;gap:13px"><div style="width:42px;height:42px;border-radius:50%;background:#F4B8CC;color:#C44A7A;font-family:'Fredoka';font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none">S</div><div style="flex:1"><div style="font-weight:800;font-size:15px;color:#3F362E">Sofía Méndez</div><div style="font-size:13px;color:#A89A8B">2 años · Sala Soles</div></div><span style="font-size:13px;color:#94887B">Fotos</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
</div>
</div>
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:18px 22px;margin-bottom:18px">
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin-bottom:14px">NOTIFICACIONES</div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #F0E6D8"><span style="font-size:15px;color:#4A4038">Avisos cuando se publica algo</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0"><span style="font-size:15px;color:#4A4038">Resumen diario (19:00)</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
</div>
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;overflow:hidden;margin-bottom:18px">
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #F0E6D8"><span style="font-size:15px;color:#4A4038;font-weight:600">Cambiar contraseña</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 22px"><span style="font-size:15px;color:#4A4038;font-weight:600">Ayuda y soporte</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></div>
</div>
<a href="login.dc.html" style="display:block;text-align:center;width:100%;padding:14px;border-radius:14px;border:1.5px solid #F2C4B6;background:#FBEAE3;color:#D9583C;font-weight:800;font-size:15px">Cerrar sesión</a>
</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"/><rect x="180" y="170" width="840" height="130" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="270" cy="235" r="42" fill="#C9B6E8"/><rect x="180" y="340" width="840" height="180" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="245" cy="400" r="26" fill="#A9D9E8"/><circle cx="245" cy="465" r="26" fill="#F4B8CC"/></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>
+84
View File
@@ -0,0 +1,84 @@
<!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">Familia</div></div>
</a>
<nav style="display:flex;flex-direction:column;gap:4px;flex:1;margin-top:4px">
<a href="familia-feed.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"><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="resumen-dia.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"><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>
<a href="familia-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:#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:14px;color:#3F362E">Lucía Fernández</div><div style="font-size:12px;color:#A89A8B">Mamá de Mateo</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:720px;width:100%;margin:0 auto;padding:34px 40px 80px">
<div style="margin-bottom:20px">
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">TU FAMILIA</div>
<h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Hola, Lucía</h1>
<p style="margin:5px 0 0;color:#94887B;font-size:14.5px">Así va el día de hoy</p>
</div>
<div style="display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap">
<button style="display:flex;align-items:center;gap:8px;padding:7px 15px 7px 8px;border-radius:999px;border:1.5px solid #3F362E;background:#3F362E;color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit"><span style="width:26px;height:26px;border-radius:50%;background:#A9D9E8;color:#1F7A93;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">M</span>Mateo</button>
<button style="display:flex;align-items:center;gap:8px;padding:7px 15px 7px 8px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit"><span style="width:26px;height:26px;border-radius:50%;background:#F4B8CC;color:#C44A7A;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">S</span>Sofía</button>
<button style="padding:7px 16px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit">Todos</button>
</div>
<div style="display:flex;align-items:center;gap:14px;margin-bottom:14px"><span style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D">HOY · MARTES 17 JUN</span><span style="flex:1;height:1px;background:#E7DAC8"></span></div>
<div style="display:flex;flex-direction:column;gap:16px">
<a href="detalle-publicacion.dc.html" style="display:block;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><div style="width:44px;height:44px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none">M</div><div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Mateo</div><div style="font-size:12.5px;color:#A89A8B">14:20 · Maestra Caro · Sala Soles</div></div><div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#CFEBD8"><span style="width:8px;height:8px;border-radius:50%;background:#3E9B6C"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#3E9B6C">LOGRO</span></div></div>
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">¡Usó el orinal solito por primera vez! Estaba feliz de contárselo a todos. Un gran paso.</p>
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8"><span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>3</span><span style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>1</span></div>
</a>
<a href="detalle-publicacion.dc.html" style="display:block;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><div style="width:44px;height:44px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none">M</div><div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Mateo</div><div style="font-size:12.5px;color:#A89A8B">09:40 · Maestra Caro · Sala Soles</div></div><div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#C7E7F1"><span style="width:8px;height:8px;border-radius:50%;background:#2E89A6"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#2E89A6">ACTIVIDAD</span></div></div>
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">Pintamos con témperas esta mañana. Mateo eligió el azul para todo y se concentró un montón mezclando colores.</p>
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-top:14px;border:1.5px dashed #DBCDBA;border-radius:16px;background:#F4ECE1;height:200px;color:#B0A290"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg><span style="font-size:13.5px">Foto · pintando con témperas</span></div>
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8"><span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>5</span><span style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>2</span></div>
</a>
<a href="detalle-publicacion.dc.html" style="display:block;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><div style="width:44px;height:44px;border-radius:50%;background:#CCD8F4;color:#4E72C8;display:flex;align-items:center;justify-content:center;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3zM11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg></div><div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Anuncio general</div><div style="font-size:12.5px;color:#A89A8B">07:50 · Maestra Caro</div></div><div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#CCD8F4"><span style="width:8px;height:8px;border-radius:50%;background:#4E72C8"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#4E72C8">ANUNCIO</span></div></div>
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">El viernes salimos al parque por la mañana. Recuerden mandar gorra y una botellita de agua.</p>
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8"><span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>8</span><span style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>0</span></div>
</a>
</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"/><rect x="160" y="160" width="120" height="44" rx="22" fill="#3F362E"/><rect x="300" y="160" width="110" height="44" rx="22" fill="#fff" stroke="#ECE0D0" stroke-width="3"/><rect x="160" y="250" width="880" height="200" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="160" y="480" width="880" height="200" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="230" cy="310" r="30" fill="#A9D9E8"/></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>
+121
View File
@@ -0,0 +1,121 @@
<!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;1,400&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:#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"><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: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"><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:760px;width:100%;margin:0 auto;padding:34px 40px 80px">
<div style="margin-bottom:24px">
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">GUARDERÍA · SALA SOLES</div>
<h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Buenas, Caro</h1>
<p style="margin:5px 0 0;color:#94887B;font-size:14.5px">12 niños · martes 17 jun</p>
</div>
<a href="crear-publicacion.dc.html" style="display:flex;align-items:center;gap:14px;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:14px 18px;margin-bottom:24px;box-shadow:0 4px 14px -10px rgba(120,90,60,.4)">
<div style="width:40px;height:40px;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>
<span style="flex:1;color:#A89A8B;font-size:15px">Compartí un momento…</span>
<span style="width:38px;height:38px;border-radius:12px;background:#FBE3D8;color:#E0654A;display:flex;align-items:center;justify-content:center"><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="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg></span>
</a>
<div style="display:flex;align-items:center;gap:14px;margin-bottom:14px"><span style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D">PUBLICADO HOY</span><span style="flex:1;height:1px;background:#E7DAC8"></span></div>
<div style="display:flex;flex-direction:column;gap:16px">
<!-- post: logro -->
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
<div style="width:44px;height:44px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none">M</div>
<div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Mateo</div><div style="font-size:12.5px;color:#A89A8B">14:20 · publicado por vos</div></div>
<div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#CFEBD8"><span style="width:8px;height:8px;border-radius:50%;background:#3E9B6C"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#3E9B6C">LOGRO</span></div>
</div>
<div style="font-size:12.5px;color:#A89A8B;margin-bottom:10px">Para: familia de Mateo</div>
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">¡Usó el orinal solito por primera vez! Estaba feliz de contárselo a todos. Un gran paso.</p>
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8">
<span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>3</span>
<a href="detalle-publicacion.dc.html" style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>1</a>
<span style="flex:1"></span>
<a href="crear-publicacion.dc.html" style="color:#C5503A;font-weight:800;font-size:14px">Editar</a>
</div>
</div>
<!-- post: actividad with photo -->
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
<div style="width:44px;height:44px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none">M</div>
<div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Mateo</div><div style="font-size:12.5px;color:#A89A8B">09:40 · publicado por vos</div></div>
<div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#C7E7F1"><span style="width:8px;height:8px;border-radius:50%;background:#2E89A6"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#2E89A6">ACTIVIDAD</span></div>
</div>
<div style="font-size:12.5px;color:#A89A8B;margin-bottom:10px">Para: familia de Mateo</div>
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">Pintamos con témperas esta mañana. Mateo eligió el azul para todo y se concentró un montón mezclando colores.</p>
<a href="foto.dc.html" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-top:14px;border:1.5px dashed #DBCDBA;border-radius:16px;background:#F4ECE1;height:200px;color:#B0A290"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg><span style="font-size:13.5px">Foto · pintando con témperas</span></a>
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8">
<span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>5</span>
<a href="detalle-publicacion.dc.html" style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>2</a>
<span style="flex:1"></span>
<a href="crear-publicacion.dc.html" style="color:#C5503A;font-weight:800;font-size:14px">Editar</a>
</div>
</div>
<!-- post: anuncio -->
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:20px;padding:20px 22px;box-shadow:0 4px 16px -12px rgba(120,90,60,.5)">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
<div style="width:44px;height:44px;border-radius:50%;background:#CCD8F4;color:#4E72C8;display:flex;align-items:center;justify-content:center;flex:none"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3zM11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg></div>
<div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:16.5px;color:#3F362E">Anuncio general</div><div style="font-size:12.5px;color:#A89A8B">07:50 · publicado por vos</div></div>
<div style="display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:#CCD8F4"><span style="width:8px;height:8px;border-radius:50%;background:#4E72C8"></span><span style="font-size:12px;font-weight:800;letter-spacing:.5px;color:#4E72C8">ANUNCIO</span></div>
</div>
<div style="font-size:12.5px;color:#A89A8B;margin-bottom:10px">Para: toda la sala</div>
<p style="font-size:15.5px;line-height:1.55;color:#4A4038;margin:0">El viernes salimos al parque por la mañana. Recuerden mandar gorra y una botellita de agua.</p>
<div style="display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #F0E6D8">
<span style="display:flex;align-items:center;gap:7px;color:#E0654A;font-weight:700;font-size:14px"><svg width="19" height="19" viewBox="0 0 24 24" fill="#E0654A" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>8</span>
<a href="detalle-publicacion.dc.html" style="display:flex;align-items:center;gap:7px;color:#94887B;font-weight:700;font-size:14px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>0</a>
<span style="flex:1"></span>
<a href="crear-publicacion.dc.html" style="color:#C5503A;font-weight:800;font-size:14px">Editar</a>
</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"/><rect x="120" y="200" width="420" height="160" rx="28" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="120" y="400" width="420" height="200" rx="28" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="200" cy="280" r="34" fill="#A9D9E8"/><rect x="660" y="200" width="420" height="400" rx="28" 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>
+43
View File
@@ -0,0 +1,43 @@
<!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:#1A1714;color:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
</style>
</helmet>
<div style="min-height:100vh;display:flex;flex-direction:column;background:#1A1714">
<div style="display:flex;align-items:center;justify-content:space-between;padding:22px 26px">
<a href="detalle-publicacion.dc.html" style="width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg></a>
<div style="text-align:center"><div style="font-family:'Fredoka';font-weight:600;font-size:16px">Mateo</div><div style="font-size:13px;color:rgba(255,255,255,.6)">09:40 · Maestra Caro · Sala Soles</div></div>
<a href="detalle-publicacion.dc.html" title="Descargar" style="width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center"><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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg></a>
</div>
<div style="flex:1;display:flex;align-items:center;justify-content:center;padding:0 26px">
<div style="width:100%;max-width:760px;aspect-ratio:4/3;border-radius:20px;background:linear-gradient(160deg,#2A2521,#211D19);border:1.5px dashed rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.4)">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg>
<span style="font-size:15px">Foto · pintando con témperas</span>
</div>
</div>
<div style="padding:24px 26px 34px;text-align:center"><p style="font-size:15px;color:rgba(255,255,255,.85);margin:0;max-width:560px;margin-inline:auto;line-height:1.55">Pintamos con témperas esta mañana. Mateo eligió el azul para todo y se concentró un montón mezclando colores.</p></div>
</div>
<template id="__bundler_thumbnail" data-bg-color="#1A1714">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#1A1714"/><rect x="280" y="200" width="640" height="400" rx="24" fill="#2A2521" stroke="rgba(255,255,255,0.16)" stroke-width="4" stroke-dasharray="12 10"/><circle cx="470" cy="360" r="34" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="5"/><path d="M400 500 L520 400 L640 500" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="5"/></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>
+593
View File
@@ -0,0 +1,593 @@
<!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;
}
.scrn {
display: flex;
align-items: center;
gap: 13px;
background: #fffdf9;
border: 1px solid #ece0d0;
border-radius: 16px;
padding: 15px 17px;
box-shadow: 0 4px 14px -12px rgba(120, 90, 60, 0.5);
transition: 0.15s;
}
.scrn:hover {
border-color: #f2a78e;
transform: translateY(-2px);
box-shadow: 0 10px 22px -14px rgba(120, 90, 60, 0.6);
}
</style>
</helmet>
<div style="max-width: 920px; margin: 0 auto; padding: 56px 40px 90px">
<div
style="
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 8px;
"
>
<div
style="
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(155deg, #f8c3a8, #f2937a);
display: flex;
align-items: center;
justify-content: center;
flex: none;
"
>
<svg
width="26"
height="26"
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>
<h1
style="
font-family: 'Fredoka';
font-weight: 600;
font-size: 30px;
margin: 0;
color: #3f362e;
"
>
OpenDayCare · Pantallas
</h1>
<p style="margin: 3px 0 0; color: #94887b; font-size: 15px">
Haz click en la pantalla que quieras ver
</p>
</div>
</div>
<div
style="
display: flex;
align-items: center;
gap: 12px;
margin: 36px 0 16px;
"
>
<span
style="
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.8px;
color: #d9583c;
"
>ACCESO</span
><span style="flex: 1; height: 1px; background: #e7dac8"></span>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
"
>
<a class="scrn" href="login.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #fbe3d8;
color: #d9583c;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>01</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Iniciar sesión
</div>
<div style="font-size: 13px; color: #a89a8b">
Acceso staff o familia
</div>
</div></a
>
<a class="scrn" href="activar-cuenta.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #fbe3d8;
color: #d9583c;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>02</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Activar cuenta
</div>
<div style="font-size: 13px; color: #a89a8b">
Padre · código de invitación
</div>
</div></a
>
</div>
<div
style="
display: flex;
align-items: center;
gap: 12px;
margin: 36px 0 16px;
"
>
<span
style="
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.8px;
color: #2e89a6;
"
>GUARDERÍA · STAFF</span
><span style="flex: 1; height: 1px; background: #e7dac8"></span>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
"
>
<a class="scrn" href="feed.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #c7e7f1;
color: #2e89a6;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>03</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Feed de la guardería
</div>
<div style="font-size: 13px; color: #a89a8b">
Muro de publicaciones
</div>
</div></a
>
<a class="scrn" href="crear-publicacion.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #c7e7f1;
color: #2e89a6;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>04</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Crear publicación
</div>
<div style="font-size: 13px; color: #a89a8b">Nuevo momento</div>
</div></a
>
<a class="scrn" href="ninos.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #c7e7f1;
color: #2e89a6;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>05</span
>
<div>
<div style="font-weight: 800; font-size: 15px">Niños</div>
<div style="font-size: 13px; color: #a89a8b">
Gestión de la sala
</div>
</div></a
>
<a class="scrn" href="perfil-nino.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #c7e7f1;
color: #2e89a6;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>06</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Perfil del niño
</div>
<div style="font-size: 13px; color: #a89a8b">
Datos, alergias, padres
</div>
</div></a
>
<a class="scrn" href="agregar-nino.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #c7e7f1;
color: #2e89a6;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>07</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Agregar / editar niño
</div>
<div style="font-size: 13px; color: #a89a8b">Formulario</div>
</div></a
>
<a class="scrn" href="vincular-padre.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #c7e7f1;
color: #2e89a6;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>08</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Vincular padre
</div>
<div style="font-size: 13px; color: #a89a8b">
Invitación por código
</div>
</div></a
>
<a class="scrn" href="avisos.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #c7e7f1;
color: #2e89a6;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>09</span
>
<div>
<div style="font-weight: 800; font-size: 15px">Avisos</div>
<div style="font-size: 13px; color: #a89a8b">
Actividad reciente
</div>
</div></a
>
<a class="scrn" href="mi-cuenta.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #c7e7f1;
color: #2e89a6;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>10</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Mi cuenta (staff)
</div>
<div style="font-size: 13px; color: #a89a8b">Ajustes</div>
</div></a
>
</div>
<div
style="
display: flex;
align-items: center;
gap: 12px;
margin: 36px 0 16px;
"
>
<span
style="
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.8px;
color: #7b5fc0;
"
>FAMILIA · PADRE</span
><span style="flex: 1; height: 1px; background: #e7dac8"></span>
</div>
<div
style="
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
"
>
<a class="scrn" href="familia-feed.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #e7dcf6;
color: #7b5fc0;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>11</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Feed del padre
</div>
<div style="font-size: 13px; color: #a89a8b">
El día de sus hijos
</div>
</div></a
>
<a class="scrn" href="detalle-publicacion.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #e7dcf6;
color: #7b5fc0;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>12</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Detalle de publicación
</div>
<div style="font-size: 13px; color: #a89a8b">
Reacciones y comentarios
</div>
</div></a
>
<a class="scrn" href="foto.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #e7dcf6;
color: #7b5fc0;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>13</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Foto a pantalla completa
</div>
<div style="font-size: 13px; color: #a89a8b">Visor de imagen</div>
</div></a
>
<a class="scrn" href="resumen-dia.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #e7dcf6;
color: #7b5fc0;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>14</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Resumen del día
</div>
<div style="font-size: 13px; color: #a89a8b">Cierre del día</div>
</div></a
>
<a class="scrn" href="familia-cuenta.dc.html"
><span
style="
width: 38px;
height: 38px;
border-radius: 11px;
background: #e7dcf6;
color: #7b5fc0;
display: flex;
align-items: center;
justify-content: center;
flex: none;
font-family: 'Fredoka';
font-weight: 600;
"
>15</span
>
<div>
<div style="font-weight: 800; font-size: 15px">
Mi cuenta (familia)
</div>
<div style="font-size: 13px; color: #a89a8b">
Ajustes y consentimiento
</div>
</div></a
>
</div>
</div>
<template id="__bundler_thumbnail" data-bg-color="#F2937A">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
<rect width="1200" height="800" fill="#F2937A" />
<g
transform="translate(600 400)"
fill="none"
stroke="#fff"
stroke-width="26"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="0" cy="0" r="78" />
<path
d="M0 -150 L0 -118 M0 118 L0 150 M-106 -106 L-83 -83 M83 83 L106 106 M-150 0 L-118 0 M118 0 L150 0 M-106 106 L-83 83 M83 -83 L106 -106"
/>
</g>
</svg>
</template>
</x-dc>
<script
type="text/x-dc"
data-dc-script
data-props='{"$preview":{"width":"100%","height":"100%"}}'
></script>
</body>
</html>
+94
View File
@@ -0,0 +1,94 @@
<!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;1,400&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Nunito',system-ui,sans-serif;background:#FBF4EC;color:#3F362E;-webkit-font-smoothing:antialiased}
input,textarea,button{font-family:inherit}
input:focus{outline:none}
::placeholder{color:#B6A99B}
a{text-decoration:none}
</style>
</helmet>
<div style="min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:#FBF4EC">
<div style="position:relative;overflow:hidden;background:linear-gradient(155deg,#F6A98E 0%,#F2937A 45%,#EC7E62 100%);display:flex;flex-direction:column;justify-content:space-between;padding:56px 60px;color:#fff">
<div style="position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.12);top:-140px;right:-120px"></div>
<div style="position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.10);bottom:-110px;left:-80px"></div>
<div style="display:flex;align-items:center;gap:13px;position:relative">
<div style="width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center">
<svg width="26" height="26" 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>
<span style="font-family:'Fredoka';font-weight:600;font-size:21px;letter-spacing:.5px">OpenDayCare</span>
</div>
<div style="position:relative">
<h1 style="font-family:'Fredoka';font-weight:600;font-size:42px;line-height:1.12;margin:0 0 18px">El día de cada niño,<br>compartido con su familia.</h1>
<p style="font-size:17px;line-height:1.6;margin:0;max-width:430px;color:rgba(255,255,255,.92)">Publicá momentos, gestioná las salas y mantené a las familias cerca, desde un solo lugar.</p>
</div>
<div style="position:relative;font-size:14px;color:rgba(255,255,255,.9)">🌿 Guardería Sala Soles</div>
</div>
<div style="display:flex;align-items:center;justify-content:center;padding:40px">
<div style="width:100%;max-width:392px">
<h2 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0 0 6px;color:#3F362E">Iniciar sesión</h2>
<p style="margin:0 0 28px;color:#94887B;font-size:15px">Ingresá para ver el día de hoy.</p>
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:9px">INGRESO COMO</div>
<div style="display:flex;gap:10px;margin-bottom:22px">
<button onClick="{{ pickStaff }}" style="flex:1;display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:14px;border:1.5px solid {{ staffBorder }};background:{{ staffBg }};color:{{ staffFg }};cursor:pointer;font-weight:700;font-size:14px;transition:.15s">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
Personal
</button>
<button onClick="{{ pickParent }}" style="flex:1;display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:14px;border:1.5px solid {{ parentBorder }};background:{{ parentBg }};color:{{ parentFg }};cursor:pointer;font-weight:700;font-size:14px;transition:.15s">
<svg width="18" height="18" 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>
Familia
</button>
</div>
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:8px">EMAIL</div>
<input value="{{ email }}" type="email" style="width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
<div style="font-size:12px;font-weight:700;letter-spacing:.7px;color:#94887B;margin-bottom:8px">CONTRASEÑA</div>
<input type="password" placeholder="••••••••" style="width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:10px">
<div style="text-align:right;margin-bottom:20px"><span style="color:#C5503A;font-size:13.5px;font-weight:700;cursor:pointer">¿Olvidaste tu contraseña?</span></div>
<a href="{{ loginHref }}" style="display:block;text-align:center;width:100%;padding:15px;border-radius:15px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 10px 22px -8px rgba(238,129,100,.7)">Iniciar sesión</a>
<p style="text-align:center;margin:24px 0 0;color:#94887B;font-size:14.5px">¿Te invitó la guardería? <a href="activar-cuenta.dc.html" style="color:#C5503A;font-weight:800">Activá tu cuenta</a></p>
</div>
</div>
</div>
<template id="__bundler_thumbnail" data-bg-color="#F2937A">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><rect width="1200" height="800" fill="#F2937A"/><g transform="translate(600 400)" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round" stroke-linejoin="round"><circle cx="0" cy="0" r="78"/><path d="M0 -150 L0 -118 M0 118 L0 150 M-106 -106 L-83 -83 M83 83 L106 106 M-150 0 L-118 0 M118 0 L150 0 M-106 106 L-83 83 M83 -83 L106 -106"/></g></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;}}">
class Component extends DCLogic {
state = { role: 'staff', email: 'caro@opendaycare.com' };
pickStaff = () => this.setState({ role: 'staff', email: 'caro@opendaycare.com' });
pickParent = () => this.setState({ role: 'parent', email: 'lucia.fernandez@gmail.com' });
renderVals() {
const r = this.state.role;
return {
email: this.state.email,
pickStaff: this.pickStaff, pickParent: this.pickParent,
loginHref: r === 'staff' ? 'feed.dc.html' : 'familia-feed.dc.html',
staffBg: r === 'staff' ? '#FBE3D8' : '#fff', staffBorder: r === 'staff' ? '#F2937A' : '#EADFD0', staffFg: r === 'staff' ? '#D9583C' : '#6E6359',
parentBg: r === 'parent' ? '#FBE3D8' : '#fff', parentBorder: r === 'parent' ? '#F2937A' : '#EADFD0', parentFg: r === 'parent' ? '#D9583C' : '#6E6359',
};
}
}
</script>
</body>
</html>
+72
View File
@@ -0,0 +1,72 @@
<!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: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"><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:#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"><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:680px;width:100%;margin:0 auto;padding:34px 40px 80px">
<div style="margin-bottom:22px"><div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">AJUSTES</div><h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Mi cuenta</h1></div>
<div style="display:flex;align-items:center;gap:18px;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:20px 22px;margin-bottom:18px">
<div style="width:64px;height:64px;border-radius:50%;background:#F2937A;color:#fff;font-family:'Fredoka';font-weight:600;font-size:26px;display:flex;align-items:center;justify-content:center;flex:none">C</div>
<div style="flex:1"><div style="font-family:'Fredoka';font-weight:600;font-size:20px;color:#3F362E">Caro Giménez</div><div style="font-size:14px;color:#94887B">caro@opendaycare.com</div><div style="font-size:13px;color:#A89A8B;margin-top:2px">Maestra · Sala Soles</div></div>
<button style="border:1.5px solid #ECE0D0;background:#fff;color:#6E6359;font-weight:700;font-size:14px;padding:9px 16px;border-radius:12px;cursor:pointer;font-family:inherit">Editar</button>
</div>
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:18px 22px;margin-bottom:18px">
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin-bottom:14px">NOTIFICACIONES</div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #F0E6D8"><span style="font-size:15px;color:#4A4038">Nuevos comentarios de familias</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0"><span style="font-size:15px;color:#4A4038">Recordatorio de resumen (17:00)</span><span style="width:42px;height:24px;border-radius:999px;background:#5FB97E;position:relative;flex:none"><span style="position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;right:3px"></span></span></div>
</div>
<div style="background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;overflow:hidden;margin-bottom:18px">
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #F0E6D8"><span style="font-size:15px;color:#4A4038;font-weight:600">Cambiar contraseña</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 22px"><span style="font-size:15px;color:#4A4038;font-weight:600">Ayuda y soporte</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></div>
</div>
<a href="login.dc.html" style="display:block;text-align:center;width:100%;padding:14px;border-radius:14px;border:1.5px solid #F2C4B6;background:#FBEAE3;color:#D9583C;font-weight:800;font-size:15px">Cerrar sesión</a>
</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"/><rect x="180" y="180" width="840" height="130" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="270" cy="245" r="42" fill="#F2937A"/><rect x="180" y="350" width="840" height="180" 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>
+80
View File
@@ -0,0 +1,80 @@
<!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}
input{font-family:inherit}
input:focus{outline:none}
::placeholder{color:#B6A99B}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#E4D6C4;border-radius:8px;border:3px solid transparent;background-clip:content-box}
.kid:hover{border-color:#F2A78E;transform:translateY(-2px)}
.kid{transition:.15s}
</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:880px;width:100%;margin:0 auto;padding:34px 40px 80px">
<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px">
<div><div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:4px">GESTIÓN</div><h1 style="font-family:'Fredoka';font-weight:600;font-size:30px;margin:0;color:#3F362E">Niños</h1></div>
<a href="agregar-nino.dc.html" style="display:flex;align-items:center;gap:8px;padding:11px 18px;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,.7)"><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>Agregar niño</a>
</div>
<div style="display:flex;align-items:center;gap:11px;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:14px;padding:12px 16px;margin-bottom:22px">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B0A290" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
<input placeholder="Buscar niño…" style="flex:1;border:none;background:none;font-size:15px;color:#3F362E">
</div>
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px"><span style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#3F362E">SALA SOLES</span><span style="font-size:13px;color:#A89A8B">8 niños</span><span style="flex:1;height:1px;background:#E7DAC8"></span></div>
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px">
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">M</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Mateo Fernández</div><div style="font-size:13px;color:#A89A8B">3 años · 2 padres vinculados</div></div><span style="flex:none;font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;background:#FBD8CC;color:#D9684A">MANÍ</span></a>
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#F4B8CC;color:#C44A7A;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">S</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Sofía Méndez</div><div style="font-size:13px;color:#A89A8B">2 años · 1 padre vinculado</div></div><svg style="flex:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#B9DEC4;color:#3E8B62;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">B</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Benjamín Ruiz</div><div style="font-size:13px;color:#A89A8B">3 años · 2 padres vinculados</div></div><svg style="flex:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#F4DC8E;color:#9A7B1E;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">V</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Valentina Soto</div><div style="font-size:13px;color:#A89A8B">2 años · sin padres vinculados</div></div><span style="flex:none;font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;background:#F9D2DE;color:#C56486">VINCULAR</span></a>
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#C9B6E8;color:#7B5FC0;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">T</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Tomás Díaz</div><div style="font-size:13px;color:#A89A8B">3 años · 1 padre vinculado</div></div><span style="flex:none;font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;background:#FBD8CC;color:#D9684A">LACTOSA</span></a>
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#F4B8CC;color:#C44A7A;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">E</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Emma Castro</div><div style="font-size:13px;color:#A89A8B">2 años · 1 padre vinculado</div></div><svg style="flex:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#A9D9E8;color:#1F7A93;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">L</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Lucas Romero</div><div style="font-size:13px;color:#A89A8B">3 años · 1 padre vinculado</div></div><svg style="flex:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
<a class="kid" href="perfil-nino.dc.html" style="display:flex;align-items:center;gap:14px;min-width:0;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:18px;padding:16px;box-shadow:0 4px 14px -12px rgba(120,90,60,.5)"><div style="width:48px;height:48px;border-radius:50%;background:#B9DEC4;color:#3E8B62;font-family:'Fredoka';font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;flex:none">O</div><div style="flex:1;min-width:0"><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3F362E">Olivia Vega</div><div style="font-size:13px;color:#A89A8B">2 años · 1 padre vinculado</div></div><svg style="flex:none" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#CBB89F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></a>
</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"/><rect x="120" y="180" width="440" height="120" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="640" y="180" width="440" height="120" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="120" y="340" width="440" height="120" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><rect x="640" y="340" width="440" height="120" rx="24" fill="#fff" stroke="#ECE0D0" stroke-width="4"/><circle cx="200" cy="240" r="32" fill="#A9D9E8"/><circle cx="720" cy="240" r="32" fill="#F4B8CC"/><circle cx="200" cy="400" r="32" fill="#B9DEC4"/><circle cx="720" cy="400" r="32" fill="#F4DC8E"/></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>
+86
View File
@@ -0,0 +1,86 @@
<!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>
+74
View File
@@ -0,0 +1,74 @@
<!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">Familia</div></div>
</a>
<nav style="display:flex;flex-direction:column;gap:4px;flex:1;margin-top:4px">
<a href="familia-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="resumen-dia.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="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>
<a href="familia-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:#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:14px;color:#3F362E">Lucía Fernández</div><div style="font-size:12px;color:#A89A8B">Mamá de Mateo</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:700px;width:100%;margin:0 auto;padding:34px 40px 80px">
<div style="display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap">
<button style="display:flex;align-items:center;gap:8px;padding:7px 15px 7px 8px;border-radius:999px;border:1.5px solid #3F362E;background:#3F362E;color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit"><span style="width:26px;height:26px;border-radius:50%;background:#A9D9E8;color:#1F7A93;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">M</span>Mateo</button>
<button style="display:flex;align-items:center;gap:8px;padding:7px 15px 7px 8px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit"><span style="width:26px;height:26px;border-radius:50%;background:#F4B8CC;color:#C44A7A;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:600;font-size:13px">S</span>Sofía</button>
</div>
<div style="background:linear-gradient(160deg,#FBE0D2,#F9D2DE);border-radius:22px;padding:28px 30px;margin-bottom:22px">
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#D9583C;margin-bottom:6px">RESUMEN DEL DÍA</div>
<h1 style="font-family:'Fredoka';font-weight:600;font-size:32px;margin:0;color:#3F362E">El día de Mateo</h1>
<p style="margin:6px 0 0;color:#9A6A6A;font-size:15px">martes 17 de junio</p>
</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px">
<div style="background:#F7E7A6;border-radius:18px;padding:20px;text-align:center"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#9A7B1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:8px"><path d="M3 11h18a8 8 0 0 1-16 0M12 3v3"/></svg><div style="font-family:'Fredoka';font-weight:600;font-size:26px;color:#9A7B1E">3</div><div style="font-size:13px;color:#9A7B1E;font-weight:600">comidas</div></div>
<div style="background:#E7DCF6;border-radius:18px;padding:20px;text-align:center"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#7B5FC0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:8px"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z"/></svg><div style="font-family:'Fredoka';font-weight:600;font-size:26px;color:#7B5FC0">1h 30</div><div style="font-size:13px;color:#7B5FC0;font-weight:600">de siesta</div></div>
<div style="background:#C7E7F1;border-radius:18px;padding:20px;text-align:center"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#2E89A6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:8px"><path d="m12 3 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 17l-5.2 2.1 1-5.8-4.3-4.1 5.9-.9z"/></svg><div style="font-family:'Fredoka';font-weight:600;font-size:26px;color:#2E89A6">4</div><div style="font-size:13px;color:#2E89A6;font-weight:600">momentos</div></div>
</div>
<div style="display:flex;align-items:center;gap:14px;background:#FFFDF9;border:1px solid #ECE0D0;border-radius:16px;padding:16px 18px;margin-bottom:24px"><div style="width:44px;height:44px;border-radius:50%;background:#F9D2DE;display:flex;align-items:center;justify-content:center;flex:none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#C56486" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg></div><div><div style="font-size:13px;color:#A89A8B">Ánimo del día</div><div style="font-family:'Fredoka';font-weight:600;font-size:18px;color:#3F362E">Contento y participativo</div></div></div>
<div style="font-size:12.5px;font-weight:800;letter-spacing:.8px;color:#8A7C6D;margin-bottom:14px">LO MÁS LINDO DE HOY</div>
<div style="display:flex;flex-direction:column;gap:18px">
<a href="detalle-publicacion.dc.html" style="display:flex;gap:14px;align-items:flex-start"><div style="width:38px;height:38px;border-radius:50%;background:#CFEBD8;display:flex;align-items:center;justify-content:center;flex:none"><span style="width:12px;height:12px;border-radius:50%;background:#3E9B6C"></span></div><div><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#3E9B6C">¡Usó el orinal solito!</div><div style="font-size:14px;color:#94887B;margin-top:2px">14:20 · Un gran paso, estaba feliz de contarlo.</div></div></a>
<a href="detalle-publicacion.dc.html" style="display:flex;gap:14px;align-items:flex-start"><div style="width:38px;height:38px;border-radius:50%;background:#C7E7F1;display:flex;align-items:center;justify-content:center;flex:none"><span style="width:12px;height:12px;border-radius:50%;background:#2E89A6"></span></div><div><div style="font-family:'Fredoka';font-weight:600;font-size:16px;color:#2E89A6">Pintó con témperas</div><div style="font-size:14px;color:#94887B;margin-top:2px">09:40 · Eligió el azul para todo.</div></div></a>
</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"/><rect x="180" y="150" width="840" height="150" rx="28" fill="#F9D2DE"/><rect x="180" y="340" width="260" height="150" rx="22" fill="#F7E7A6"/><rect x="470" y="340" width="260" height="150" rx="22" fill="#E7DCF6"/><rect x="760" y="340" width="260" height="150" rx="22" fill="#C7E7F1"/></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>
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,59 @@
<!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}
input,button{font-family:inherit}
input:focus{outline:none}
::placeholder{color:#B6A99B}
</style>
</helmet>
<div style="min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:40px 24px">
<div style="width:100%;max-width:480px;background:#FBF4EC;border:1px solid #ECE0D0;border-radius:24px;box-shadow:0 20px 50px -24px rgba(63,54,46,.35);overflow:hidden">
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid #ECE0D0">
<div><div style="font-family:'Fredoka';font-weight:600;font-size:18px;color:#3F362E">Vincular padre</div><div style="font-size:13px;color:#A89A8B">a Mateo Fernández</div></div>
<a href="perfil-nino.dc.html" style="width:34px;height:34px;border-radius:10px;background:#F0E6D8;color:#94887B;display:flex;align-items:center;justify-content:center"><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="M18 6 6 18M6 6l12 12"/></svg></a>
</div>
<div style="padding:22px 26px">
<div style="display:flex;gap:11px;background:#E3ECFB;border-radius:14px;padding:13px 16px;margin-bottom:20px"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4E72C8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:1px"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg><span style="font-size:13.5px;color:#3F5694;line-height:1.45">Le enviaremos un correo con un código para que active su cuenta. Solo verá el feed de Mateo.</span></div>
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">NOMBRE DEL PADRE/MADRE</div>
<input placeholder="Ej. Diego Fernández" style="width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:8px">EMAIL</div>
<input type="email" placeholder="correo@ejemplo.com" style="width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid #EADFD0;background:#fff;font-size:15px;color:#3F362E;margin-bottom:18px">
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#94887B;margin-bottom:10px">PARENTESCO</div>
<div style="display:flex;gap:9px;margin-bottom:20px">
<button style="flex:1;padding:11px;border-radius:999px;border:1.5px solid #9FB8EC;background:#CCD8F4;color:#4E72C8;font-weight:800;font-size:14px;cursor:pointer">Mamá</button>
<button style="flex:1;padding:11px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:800;font-size:14px;cursor:pointer">Papá</button>
<button style="flex:1;padding:11px;border-radius:999px;border:1.5px solid #ECE0D0;background:#FFFDF9;color:#6E6359;font-weight:800;font-size:14px;cursor:pointer">Tutor/a</button>
</div>
<div style="background:#FBF1D6;border:1.5px dashed #E6D08A;border-radius:16px;padding:18px;text-align:center;margin-bottom:20px">
<div style="font-size:12px;font-weight:800;letter-spacing:.7px;color:#A88526;margin-bottom:8px">CÓDIGO DE INVITACIÓN</div>
<div style="font-family:'Fredoka';font-weight:600;font-size:34px;letter-spacing:7px;color:#8A7234">7K4P9</div>
<div style="font-size:13px;color:#A88526;margin-top:6px">Vence en 7 días</div>
</div>
<a href="perfil-nino.dc.html" style="display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px;border-radius:14px;background:linear-gradient(180deg,#F4977E,#EE8164);color:#fff;font-weight:800;font-size:15.5px;box-shadow:0 10px 22px -8px rgba(238,129,100,.7)"><svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>Enviar invitación</a>
</div>
</div>
</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"/><rect x="340" y="130" width="520" height="540" rx="36" fill="#FBF4EC" stroke="#ECE0D0" stroke-width="5"/><rect x="400" y="420" width="400" height="130" rx="20" fill="#FBF1D6" stroke="#E6D08A" stroke-width="4" stroke-dasharray="12 10"/><text x="600" y="505" text-anchor="middle" font-family="Verdana" font-size="56" font-weight="bold" fill="#8A7234" letter-spacing="8">7K4P9</text></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>
Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB