68 lines
6.8 KiB
HTML
68 lines
6.8 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,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="{"$preview":{"width":"100%","height":"100%"}}"></script>
|
|
</body>
|
|
</html>
|