This commit is contained in:
alexandrev-tibco
@@ -23,21 +23,12 @@ export const metadata: Metadata = {
|
||||
url: "https://hidden11.app",
|
||||
siteName: "hidden11",
|
||||
locale: "en_US",
|
||||
images: [
|
||||
{
|
||||
url: "https://hidden11.app/og-image.png",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "hidden11 daily football puzzle",
|
||||
},
|
||||
],
|
||||
type: "website",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "hidden11",
|
||||
description: "Beat Easy, Medium and Hard in the daily football lineup puzzle and share the result.",
|
||||
images: ["https://hidden11.app/og-image.png"],
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
@@ -1,231 +0,0 @@
|
||||
import { ImageResponse } from "next/og";
|
||||
|
||||
export const alt = "hidden11";
|
||||
export const contentType = "image/png";
|
||||
export const size = {
|
||||
width: 1200,
|
||||
height: 630,
|
||||
};
|
||||
|
||||
export default function OpenGraphImage() {
|
||||
return new ImageResponse(
|
||||
(
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
background: "linear-gradient(135deg, #04110c 0%, #0d2d1f 42%, #145c3a 100%)",
|
||||
color: "#f7fff9",
|
||||
padding: 42,
|
||||
fontFamily: "Arial",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -90,
|
||||
right: -90,
|
||||
width: 320,
|
||||
height: 320,
|
||||
borderRadius: 999,
|
||||
background: "rgba(62, 230, 150, 0.18)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: -120,
|
||||
left: -80,
|
||||
width: 360,
|
||||
height: 360,
|
||||
borderRadius: 999,
|
||||
background: "rgba(250, 204, 21, 0.12)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
border: "1px solid rgba(255,255,255,0.14)",
|
||||
borderRadius: 34,
|
||||
padding: 34,
|
||||
background: "rgba(2, 14, 10, 0.68)",
|
||||
boxShadow: "0 30px 80px rgba(0,0,0,0.28)",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", flexDirection: "column", flex: 1, justifyContent: "space-between", paddingRight: 22 }}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 148,
|
||||
justifyContent: "center",
|
||||
borderRadius: 999,
|
||||
background: "rgba(255,255,255,0.1)",
|
||||
padding: "10px 18px",
|
||||
fontSize: 18,
|
||||
fontWeight: 900,
|
||||
letterSpacing: 2.4,
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
Daily Puzzle
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", alignItems: "flex-end", gap: 8 }}>
|
||||
<div style={{ display: "flex", fontSize: 102, fontWeight: 900, letterSpacing: -4 }}>hidden</div>
|
||||
<div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 34,
|
||||
height: 74,
|
||||
borderRadius: 16,
|
||||
background: "linear-gradient(180deg, #48e7a0 0%, #10b968 100%)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 34,
|
||||
height: 74,
|
||||
borderRadius: 16,
|
||||
background: "linear-gradient(180deg, #ffe86a 0%, #facc15 100%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", maxWidth: 620, fontSize: 34, lineHeight: 1.18, color: "#d7fbe7" }}>
|
||||
Daily football lineup puzzle with clues, history links and difficulty levels that actually escalate.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", gap: 14 }}>
|
||||
{["Easy", "Medium", "Hard"].map((label, index) => (
|
||||
<div
|
||||
key={label}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 8,
|
||||
width: 172,
|
||||
padding: 18,
|
||||
borderRadius: 22,
|
||||
background:
|
||||
index === 0
|
||||
? "rgba(72, 231, 160, 0.16)"
|
||||
: index === 1
|
||||
? "rgba(255,255,255,0.09)"
|
||||
: "#d4ff4d",
|
||||
color: index === 2 ? "#0b1a12" : "#f7fff9",
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", fontSize: 18, fontWeight: 800, textTransform: "uppercase" }}>{label}</div>
|
||||
<div style={{ display: "flex", fontSize: 16, lineHeight: 1.3, opacity: 0.9 }}>
|
||||
{index === 0 ? "Fast entry" : index === 1 ? "Less obvious pool" : "Career-history riddles"}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 368,
|
||||
marginLeft: 16,
|
||||
borderRadius: 28,
|
||||
padding: 24,
|
||||
background: "linear-gradient(180deg, rgba(8,41,28,0.98), rgba(5,22,15,1))",
|
||||
border: "1px solid rgba(255,255,255,0.12)",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
<div style={{ display: "flex", fontSize: 16, fontWeight: 800, textTransform: "uppercase", letterSpacing: 1.6, color: "#8ddfb6" }}>
|
||||
Today
|
||||
</div>
|
||||
<div style={{ display: "flex", marginTop: 4, fontSize: 26, fontWeight: 900 }}>
|
||||
hidden11 #124
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
borderRadius: 999,
|
||||
background: "#3ee696",
|
||||
color: "#082015",
|
||||
fontSize: 15,
|
||||
fontWeight: 900,
|
||||
padding: "10px 14px",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
Shareable
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
gap: 12,
|
||||
justifyContent: "space-between",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{ label: "Easy", time: "1:24", color: "#3ee696" },
|
||||
{ label: "Medium", time: "2:08", color: "#facc15" },
|
||||
{ label: "Hard", time: "3:41", color: "#ffffff" },
|
||||
].map((card) => (
|
||||
<div
|
||||
key={card.label}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 10,
|
||||
borderRadius: 22,
|
||||
background: "rgba(255,255,255,0.06)",
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
padding: 16,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<div style={{ display: "flex", fontSize: 18, fontWeight: 800, textTransform: "uppercase" }}>{card.label}</div>
|
||||
<div style={{ display: "flex", fontSize: 16, fontWeight: 700, color: "#d7fbe7" }}>{card.time}</div>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
display: "flex",
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
background: card.color,
|
||||
boxShadow: "inset 0 -6px 0 rgba(0,0,0,0.18)",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", marginTop: 16, fontSize: 16, color: "#b8d8c6" }}>hidden11.app</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
size,
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
@@ -1,2 +0,0 @@
|
||||
export { alt, contentType, size } from "./opengraph-image";
|
||||
export { default } from "./opengraph-image";
|
||||
@@ -1,5 +1,6 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
htmlLimitedBots: /.*/,
|
||||
output: "standalone",
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user