-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathembed.html
More file actions
163 lines (158 loc) · 6.08 KB
/
Copy pathembed.html
File metadata and controls
163 lines (158 loc) · 6.08 KB
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Embed proxy list</title>
<link rel="icon" type="image/png" href="favicon.png" />
<style>
:root {
--bg: #111111;
--surface: #1a1a1a;
--border: #2e2e2e;
--text: #e8e8e8;
--muted: #9a9a9a;
--accent: #6cb3ff;
--font: "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.5;
padding: 1.25rem 1.5rem 2rem;
max-width: 52rem;
}
h1 { margin: 0 0 0.35rem; font-size: 1.35rem; }
p { margin: 0 0 1rem; color: var(--muted); }
a { color: var(--accent); }
label {
display: block;
font-size: 0.85rem;
color: var(--muted);
margin-bottom: 0.35rem;
}
textarea {
width: 100%;
min-height: 7.5rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.8rem;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem;
resize: vertical;
}
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1.25rem; }
.btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.85rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font: inherit;
cursor: pointer;
text-decoration: none;
}
.btn-primary { background: var(--accent); color: #111111; border-color: transparent; }
.preview {
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--surface);
}
.preview iframe {
display: block;
width: 100%;
height: 520px;
border: 0;
}
ul { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--muted); }
li { margin-bottom: 0.35rem; }
code { font-size: 0.9em; }
</style>
</head>
<body>
<h1>Embed the proxy list</h1>
<p>
Paste the HTML below into your page. It loads the live list in an <code><iframe></code>
(the usual way to embed a full web app). You cannot paste the whole site as inline HTML without
an iframe — the list is loaded from <code>data.json</code> and needs the hosted scripts.
</p>
<p><a href="./">← Back to the list</a></p>
<label for="embedSnippet">Iframe embed code</label>
<textarea id="embedSnippet" readonly spellcheck="false"></textarea>
<div class="row">
<button type="button" class="btn btn-primary" id="copyBtn">Copy code</button>
<a class="btn" id="openEmbedLink" href="./?embed=1" target="_blank" rel="noopener noreferrer">Open embed view</a>
</div>
<h2 style="font-size:1.05rem;margin:1.5rem 0 0.5rem;">Preview</h2>
<div class="preview">
<iframe id="previewFrame" title="Proxy list embed preview" loading="lazy"></iframe>
</div>
<h2 style="font-size:1.05rem;margin:1.5rem 0 0.5rem;">Optional: auto height</h2>
<p>If the parent page and iframe are on the <strong>same origin</strong>, the embed view sends height updates. On a different domain, set a fixed <code>height</code> on the iframe (for example <code>720px</code>).</p>
<label for="resizeSnippet">Parent page listener (same origin only)</label>
<textarea id="resizeSnippet" readonly spellcheck="false"></textarea>
<ul>
<li>Use <code>?embed=1</code> for a compact layout (no bottom ad, no portrait lock screen).</li>
<li>Sign-in and Firebase features may not work inside cross-site iframes (browser third-party cookie rules).</li>
<li>Link to <a href="https://github.com/yourworstnightmare1/proxy-list">the GitHub repo</a> when you embed — thanks!</li>
</ul>
<script>
(function () {
var origin = location.origin + location.pathname.replace(/\/embed\.html$/i, "/");
var embedUrl = origin + "?embed=1";
var snippet =
'<iframe\n' +
' src="' +
embedUrl +
'"\n' +
' title="Proxy list"\n' +
' width="100%"\n' +
' height="720"\n' +
' style="border:0;border-radius:8px;max-width:100%;min-height:480px;"\n' +
' loading="lazy"\n' +
' referrerpolicy="no-referrer-when-downgrade"\n' +
"></iframe>";
var resizeSnippet =
"window.addEventListener(\"message\", function (e) {\n" +
" if (e.origin !== location.origin) return;\n" +
" if (!e.data || e.data.type !== \"proxy-list-embed\") return;\n" +
" var iframe = document.getElementById(\"YOUR_IFRAME_ID\");\n" +
" if (!iframe || e.source !== iframe.contentWindow || typeof e.data.height !== \"number\") return;\n" +
" iframe.style.height = Math.max(480, e.data.height) + \"px\";\n" +
"});";
document.getElementById("embedSnippet").value = snippet;
document.getElementById("resizeSnippet").value = resizeSnippet;
document.getElementById("previewFrame").src = embedUrl;
document.getElementById("openEmbedLink").href = embedUrl;
document.getElementById("copyBtn").addEventListener("click", function () {
var ta = document.getElementById("embedSnippet");
ta.select();
ta.setSelectionRange(0, ta.value.length);
navigator.clipboard.writeText(ta.value).catch(function () {
document.execCommand("copy");
});
document.getElementById("copyBtn").textContent = "Copied!";
setTimeout(function () {
document.getElementById("copyBtn").textContent = "Copy code";
}, 2000);
});
window.addEventListener("message", function (e) {
if (e.origin !== location.origin) return;
if (!e.data || e.data.type !== "proxy-list-embed") return;
var frame = document.getElementById("previewFrame");
if (!frame || e.source !== frame.contentWindow || typeof e.data.height !== "number") return;
frame.style.height = Math.max(480, e.data.height) + "px";
});
})();
</script>
</body>
</html>