httpsuite.dev/og-image.html at main · uRadical/httpsuite.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>httpsuite — OG image</title>
<!--
  Social preview card. Render this to og-image.png at 1200×630, e.g.:
    npx playwright screenshot --viewport-size=1200,630 og-image.html og-image.png
  (or any headless-Chrome screenshot tool). Referenced by the og:image meta tags.
-->
<link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
<style>
:root {
    --navy: #0C1A50; --sky: #5DB1FF; --purple: #9F72E1; --pink: #F659A8; --gold: #E1C631;
    --serif: "Sen", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1200px; height: 630px; }
body {
    background: #FBFBFD;
    font-family: var(--serif);
    color: var(--navy);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 84px 90px;
}
.glow {
    position: absolute; inset: -30% -10% auto -10%; height: 720px;
    background: radial-gradient(ellipse at 30% 10%,
        color-mix(in srgb, var(--sky) 50%, transparent) 0%,
        color-mix(in srgb, var(--purple) 34%, transparent) 26%,
        color-mix(in srgb, var(--pink) 24%, transparent) 44%,
        color-mix(in srgb, var(--gold) 14%, transparent) 60%,
        transparent 78%);
    filter: blur(50px); opacity: 0.6; z-index: 0;
}
.row { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; margin-bottom: 30px; }
.mark { width: 76px; height: 76px; }
.name { font-weight: 800; font-size: 46px; letter-spacing: -0.02em; }
.pill {
    font-family: var(--mono); font-size: 15px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(12,26,80,0.5);
    background: #F5F3ED; border: 1px solid rgba(12,26,80,0.12);
    border-radius: 8px; padding: 6px 12px; margin-left: 4px;
}
h1 {
    position: relative; z-index: 1;
    font-weight: 800; font-size: 92px; line-height: 1.02; letter-spacing: -0.04em;
    max-width: 1000px; margin-bottom: 30px;
    background: linear-gradient(92deg, var(--sky) 0%, var(--purple) 30%, var(--pink) 60%, var(--gold) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
p.lead {
    position: relative; z-index: 1;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 30px; line-height: 1.35; letter-spacing: -0.01em;
    color: rgba(12,26,80,0.72); max-width: 940px;
}
p.lead b { color: var(--navy); font-weight: 700; }
</style>
</head>
<body>
<div class="glow"></div>
<div class="row">
    <svg class="mark" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#5DB1FF"/><stop offset="0.35" stop-color="#9F72E1"/>
            <stop offset="0.7" stop-color="#F659A8"/><stop offset="1" stop-color="#E1C631"/>
        </linearGradient></defs>
        <rect x="2" y="2" width="60" height="60" rx="15" fill="#0C1A50"/>
        <path d="M15 24 L21 32 L15 40" fill="none" stroke="url(#g)" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.55"/>
        <path d="M28 33 L35 41 L50 22" fill="none" stroke="url(#g)" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <span class="name">httpsuite</span>
</div>
<h1>Your .http tests,<br>without the JVM.</h1>
<p class="lead">Run the <b>.http</b> files you author in GoLand as CI tests — no JDK, no JVM. <b>JetBrains HTTP Client compatible</b>, verified against its own ijhttp.</p>
</body>
</html>