Files
open-daycare/references/pantallas/foto.dc.html
T

44 lines
3.7 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:#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>