60 lines
5.4 KiB
HTML
60 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet data-dc-atomics>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*{box-sizing:border-box}
|
|
html,body{margin:0;padding:0}
|
|
body{font-family:'Nunito',system-ui,sans-serif;background:#F6ECDF;color:#3F362E;-webkit-font-smoothing:antialiased}
|
|
a{text-decoration:none;color:inherit}
|
|
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="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
|
</body>
|
|
</html>
|