Skip to content

Commit ddf0a71

Browse files
crisdosaygocrisdosaygo
committed
Add landing page to docs/
1 parent e5a25b1 commit ddf0a71

1 file changed

Lines changed: 186 additions & 0 deletions

File tree

‎docs/index.html‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Hyper-Frame — An iframe that can frame any website</title>
7+
<style>
8+
:root {
9+
--bg: #0f172a;
10+
--text: #f8fafc;
11+
--text-dim: #94a3b8;
12+
--primary: #3b82f6;
13+
--primary-hover: #60a5fa;
14+
--accent: #10b981;
15+
--card-bg: #1e293b;
16+
--border: #334155;
17+
}
18+
19+
body {
20+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
21+
background-color: var(--bg);
22+
color: var(--text);
23+
line-height: 1.6;
24+
margin: 0;
25+
padding: 0;
26+
display: flex;
27+
flex-direction: column;
28+
min-height: 100vh;
29+
}
30+
31+
.container {
32+
max-width: 900px;
33+
margin: 0 auto;
34+
padding: 4rem 2rem;
35+
flex: 1;
36+
}
37+
38+
header {
39+
text-align: center;
40+
margin-bottom: 4rem;
41+
}
42+
43+
h1 {
44+
font-size: 3.5rem;
45+
font-weight: 800;
46+
margin: 0 0 1rem;
47+
letter-spacing: -0.025em;
48+
background: linear-gradient(to right, var(--primary), var(--accent));
49+
-webkit-background-clip: text;
50+
-webkit-text-fill-color: transparent;
51+
}
52+
53+
.tagline {
54+
font-size: 1.5rem;
55+
color: var(--text-dim);
56+
max-width: 600px;
57+
margin: 0 auto;
58+
}
59+
60+
.grid {
61+
display: grid;
62+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
63+
gap: 2rem;
64+
margin-bottom: 4rem;
65+
}
66+
67+
.card {
68+
background: var(--card-bg);
69+
border: 1px solid var(--border);
70+
border-radius: 1rem;
71+
padding: 2rem;
72+
transition: transform 0.2s ease, border-color 0.2s ease;
73+
}
74+
75+
.card:hover {
76+
transform: translateY(-4px);
77+
border-color: var(--primary);
78+
}
79+
80+
.card h2 {
81+
margin-top: 0;
82+
font-size: 1.25rem;
83+
color: var(--primary);
84+
}
85+
86+
.btn {
87+
display: inline-block;
88+
background: var(--primary);
89+
color: white;
90+
text-decoration: none;
91+
padding: 0.75rem 1.5rem;
92+
border-radius: 0.5rem;
93+
font-weight: 600;
94+
transition: background 0.2s ease;
95+
margin-top: 1rem;
96+
}
97+
98+
.btn:hover {
99+
background: var(--primary-hover);
100+
}
101+
102+
.license-banner {
103+
background: rgba(59, 130, 246, 0.1);
104+
border-left: 4px solid var(--primary);
105+
padding: 1.5rem;
106+
border-radius: 0.5rem;
107+
margin-bottom: 4rem;
108+
}
109+
110+
.license-banner h3 {
111+
margin-top: 0;
112+
color: var(--primary);
113+
}
114+
115+
footer {
116+
text-align: center;
117+
padding: 4rem 2rem;
118+
border-top: 1px solid var(--border);
119+
color: var(--text-dim);
120+
font-size: 0.875rem;
121+
}
122+
123+
footer a {
124+
color: var(--primary);
125+
text-decoration: none;
126+
}
127+
128+
code {
129+
background: #000;
130+
padding: 0.2rem 0.4rem;
131+
border-radius: 0.25rem;
132+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
133+
font-size: 0.9em;
134+
}
135+
</style>
136+
</head>
137+
<body>
138+
<div class="container">
139+
<header>
140+
<h1>Hyper-Frame</h1>
141+
<p class="tagline">The <code>&lt;hyper-frame&gt;</code> custom element — an iframe that can frame any website.</p>
142+
</header>
143+
144+
<div class="license-banner">
145+
<h3>Proprietary & Commercial</h3>
146+
<p>Hyper-Frame is proprietary, closed-source software powered by the <strong>BrowserBox</strong> engine. It is designed for secure, isolated remote browsing and automation. Use of this software requires a valid commercial license from <strong>DOSAYGO</strong>.</p>
147+
<a href="https://browserbox.io" class="btn">Get a License at BrowserBox.io</a>
148+
</div>
149+
150+
<div class="grid">
151+
<div class="card">
152+
<h2>Developer Console</h2>
153+
<p>Explore the full API surface, test automation commands, and view live metrics in our canonical developer console.</p>
154+
<a href="https://hyper-frame.art" class="btn">Launch Console</a>
155+
</div>
156+
157+
<div class="card">
158+
<h2>Windows 98½ Demo</h2>
159+
<p>Experience Hyper-Frame integrated into a nostalgic desktop environment. See how it handles complex embedding scenarios.</p>
160+
<a href="https://win9-5.com" class="btn">Try the Demo</a>
161+
</div>
162+
163+
<div class="card">
164+
<h2>Documentation</h2>
165+
<p>Learn how to install the <code>@browserbox/hyper-frame</code> package and integrate it into your own applications.</p>
166+
<a href="https://github.com/BrowserBox/hyper-frame" class="btn">View on GitHub</a>
167+
</div>
168+
</div>
169+
170+
<section>
171+
<h2>Overview</h2>
172+
<p>Hyper-Frame bypasses traditional iframe restrictions like <code>X-Frame-Options: DENY</code> and <code>Content-Security-Policy</code> by leveraging a secure remote browser isolation (RBI) backend. It allows developers to embed any website, interact with it programmatically, and capture its state in real-time.</p>
173+
<ul>
174+
<li><strong>Navigate:</strong> Control the remote browser's URL and history.</li>
175+
<li><strong>Automate:</strong> Click, type, and evaluate JavaScript within the frame.</li>
176+
<li><strong>Capture:</strong> Stream live frames or take high-quality screenshots.</li>
177+
<li><strong>Secure:</strong> Keep high-risk browsing activity isolated from your users' local environments.</li>
178+
</ul>
179+
</section>
180+
</div>
181+
182+
<footer>
183+
<p>&copy; 2026 DOSAYGO Corporation. Powered by <a href="https://browserbox.io">BrowserBox</a>.</p>
184+
</footer>
185+
</body>
186+
</html>

0 commit comments

Comments
 (0)