ed37d93868
* Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
136 lines
3.4 KiB
HTML
136 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Generated Image</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap");
|
|
|
|
body {
|
|
background: white;
|
|
background-image: radial-gradient(
|
|
circle at 25px 25px,
|
|
lightgray 2%,
|
|
transparent 0%
|
|
),
|
|
radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%);
|
|
background-size: 100px 100px;
|
|
height: 100vh;
|
|
font-family: "Readex Pro", sans-serif;
|
|
}
|
|
|
|
code {
|
|
color: #d400ff;
|
|
font-family: "Vera";
|
|
white-space: pre-wrap;
|
|
letter-spacing: -5px;
|
|
}
|
|
|
|
code:before,
|
|
code:after {
|
|
content: "`";
|
|
}
|
|
|
|
.logo-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
.logo {
|
|
margin: 0 75px;
|
|
}
|
|
|
|
.plus {
|
|
color: #bbb;
|
|
font-family: Times New Roman, Verdana;
|
|
font-size: 100px;
|
|
}
|
|
|
|
.spacer {
|
|
margin: 150px;
|
|
}
|
|
|
|
.emoji {
|
|
height: 1em;
|
|
width: 1em;
|
|
margin: 0 0.05em 0 0.1em;
|
|
vertical-align: -0.1em;
|
|
}
|
|
|
|
.heading {
|
|
font-family: "Major Mono Display", monospace;
|
|
font-size: 100px;
|
|
font-style: normal;
|
|
color: black;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.font-major-mono {
|
|
font-family: "Major Mono Display", monospace;
|
|
}
|
|
|
|
.text-primary {
|
|
color: #11b981;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="px-24">
|
|
<!-- Profile image -->
|
|
<div class="absolute left-24 top-8">
|
|
<div class="flex flex-row align-bottom gap-6">
|
|
<img
|
|
class="h-24 w-24 rounded-full bg-gray-400 flex items-center justify-center"
|
|
src="https://lh3.googleusercontent.com/a-/AOh14GiZyl1lBehuBMGyJYJhZd-N-mstaUtgE4xdI22lLw=s96-c"
|
|
alt=""
|
|
/>
|
|
<div class="flex flex-col">
|
|
<p class="text-gray-900 text-3xl">Austin Chen</p>
|
|
<p class="text-gray-500 text-3xl">@AustinChen</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mantic logo -->
|
|
<div class="absolute right-24 top-8">
|
|
<a class="flex flex-row gap-3" href="/"
|
|
><img
|
|
class="sm:h-12 sm:w-12"
|
|
src="https://manifold.markets/logo.png"
|
|
width="40"
|
|
height="40"
|
|
/>
|
|
<div
|
|
class="hidden sm:flex font-major-mono lowercase mt-1 sm:text-3xl md:whitespace-nowrap"
|
|
>
|
|
Manifold Markets
|
|
</div></a
|
|
>
|
|
</div>
|
|
|
|
<div class="flex flex-row justify-between gap-12 pt-36">
|
|
<div class="text-indigo-700 text-6xl leading-snug">
|
|
Will Manifold switch its logo to a manatee by April?
|
|
</div>
|
|
<div class="flex flex-col text-primary">
|
|
<div class="text-8xl">30%</div>
|
|
<div class="text-4xl">chance</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metadata -->
|
|
<div class="absolute bottom-16">
|
|
<div class="text-gray-500 text-3xl">
|
|
Jan 7 • Closes Mar 31, 9:59pm • M$ 448 pool
|
|
• #ManifoldMarkets #fun
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|