devlez-gitea/open-daycare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

añadimos referencias de diseño y unos skills

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
references/pantallas/login.dc.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>