-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (134 loc) · 5.61 KB
/
index.html
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
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="utf-8" />
<title>悬浮窗向导</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/normalize/8.0.1/normalize.min.css" crossorigin="anonymous">
<style>
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
color: white;
font-size: 16px;
padding: 12px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 1), 0px 0px 2px rgba(0, 0, 0, 1);
cursor: auto;
user-select: none;
}
h3 {
margin: 0;
}
a {
color: white;
text-decoration: underline;
}
#loading {
display: none;
}
</style>
</head>
<body>
<div id="guide">
<h3>请选择你喜欢的悬浮窗模板</h3>
<ul>
<li>
<button name="url" value="https://overlays.ffcafe.cn/kagerou/overlay/">Kagerou 悬浮窗</button>
<span> - 最常见，高定制，细节多，漂亮的模板</span>
</li>
<li>
<button name="url" value="https://overlays.ffcafe.cn/faceroll/">faceroll 悬浮窗</button>
<span> - 仅有文本，超级精简的模板</span>
</li>
<li>
<button name="url" value="https://overlays.ffcafe.cn/horizoverlay/">Horizoverlay 悬浮窗</button>
<span> - 横板，菱形亮色设计，素素直播同款模板</span>
</li>
<li>
<button name="url" value="https://overlays.ffcafe.cn/canisminor/">CMSkin 悬浮窗</button>
<span> - 酷炫，FF14 风格的实体模板，带统计图标</span>
</li>
<li>
<button name="url" value="https://overlays.ffcafe.cn/mopimopi2/" data-act-ws="true">MopiMopi2 悬浮窗</button>
<span> - 高定制，大额头的精美模板(v2)</span>
</li>
<li>
<button name="url" value="https://overlays.ffcafe.cn/mopimopi/" data-act-ws="true">MopiMopi 悬浮窗</button>
<span> - 高定制，大额头的精美模板(v1)</span>
</li>
<li>
<button name="url" value="https://overlays.ffcafe.cn/ikegami/">ikegami 悬浮窗</button>
<span> - 方形横条，扁平暗色调，可手动点人显示详情</span>
</li>
<li>
<button name="url" value="https://overlays.ffcafe.cn/skyline/">Skyline 悬浮窗</button>
<span> - 方形横板，扁平浅色，时尚简洁的模板</span>
</li>
<li>
<button name="url" value="https://overlays.ffcafe.cn/ember/">ember 悬浮窗</button>
<span> - FF14 风格，带大量自定义功能的实体模板</span>
</li>
<li>
<button name="url" value="https://overlays.ffcafe.cn/amethyst/" data-act-ws="true">amethyst 悬浮窗</button>
<span> - 紫色韩风，细节多的模板</span>
</li>
</ul>
<p>查找更多模板或者更详细的使用教程请<a href="https://www.yuque.com/ffcafe/act/overlay" target="_blank">点我</a>。</p>
<p>选过之后想换怎么办？在 ACT 的 “插件” - “ngld 悬浮窗设置”，左侧找 “DPS 统计”，然后右边“悬浮窗路径”下拉即可修改。</p>
</div>
<div id="loading">
<h2 id="loadingText">正在加载你选择的模板，请稍候。</h2>
</div>
<script>
function openExternalLink(url) {
if (window.OverlayPluginApi && window.OverlayPluginApi.openUrlInBrowser) {
window.OverlayPluginApi.openUrlInBrowser(url);
} else {
window.open(url);
}
}
function hookAllExternal() {
document.addEventListener('click', e => {
const el = e.target;
if (el.tagName === 'A') {
if (el.target === '_blank') {
openExternalLink(el.href);
e.preventDefault();
}
}
});
}
function showLoading() {
document.getElementById('guide').style.display = 'none';
document.getElementById('loading').style.display = 'block';
}
hookAllExternal();
document.body.addEventListener('click', function (e) {
if (e.target.tagName !== 'BUTTON') {
return;
}
if (e.target.name === 'url' && e.target.value) {
showLoading();
var actws = !!e.target.dataset.actWs;
if (window.OverlayPluginApi && window.OverlayPluginApi.setOverlayUrl) {
var url = e.target.value;
if (actws) {
url += "?HOST_PORT=ws://127.0.0.1/fake/";
}
window.OverlayPluginApi.setOverlayUrl(url, actws);
e.preventDefault();
} else {
if (actws) {
document.getElementById('loadingText').innerText = "无法加载该模板。";
}
window.location = e.target.value;
e.preventDefault();
}
}
});
</script>
</body>
</html>