Files
open-daycare/references/pantallas/activar-cuenta.dc.html
T

64 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet data-dc-atomics>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;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>