Revision of Relay-Frontend

MomentQYC revised this gist 1697449172. Go to revision

1 file changed, 1 insertion

index.html

			@@ -110,6 +110,7 @@
110	110		<div class="mdui-bottom-nav mdui-color-theme mdui-shadow-10 mdui-hoverable">
111	111		<a href="https://github.com/yukimochi/Activity-Relay" class="mdui-ripple">Relay Github</a>
112	112		<a href="https://nya.codes/nyaone/relay" class="mdui-ripple">Inspiration</a>
	113	+	<a href="https://codeproxy.net/MomentQYC/3261073c99e24d808bd161f618e693b6" class="mdui-ripple">Source Code</a>
113	114		<a href="#" class="mdui-ripple">non-SLA</a>
114	115		</div>
115	116		</div>

MomentQYC revised this gist 1697449120. Go to revision

1 file changed, 155 insertions

index.html(file created)

		@@ -0,0 +1,155 @@
1	+	<!DOCTYPE html>
2	+	<html>
3	+	<head>
4	+	<meta charset="UTF-8">
5	+	<title>橋中继 / Hashi Relay</title>
6	+	<link rel="icon" type="image/png" href="https://img.yateam.cc/img/2023/10/11/hashid59ff7816f045287ad29011a2a630e77.png">
7	+	<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
8	+	<link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" />
9	+	<style>
10	+	html, body {
11	+	height: 100%;
12	+	margin: 0;
13	+	padding: 0;
14	+	}
15	+	.global {
16	+	height: 100%;
17	+	width: 100%;
18	+	background-image: url("https://www.loliapi.com/acg/");
19	+	background-repeat: no-repeat;
20	+	background-position: center;
21	+	background-size: cover;
22	+	}
23	+	.overlay {
24	+	position: absolute;
25	+	top: 0;
26	+	left: 0;
27	+	width: 100%;
28	+	height: 100%;
29	+	transition: background-color 0.5s ease;
30	+	}
31	+
32	+	.overlay.light-mode {
33	+	background-color: rgba(255, 255, 255, 0.6);
34	+	color: black;
35	+	}
36	+
37	+	.overlay.dark-mode {
38	+	background-color: rgba(0, 0, 0, 0.6);
39	+	color: white;
40	+	}
41	+	</style>
42	+	<script>
43	+	window.addEventListener('load', function() {
44	+	var spinner = document.querySelector('.mdui-spinner');
45	+	spinner.style.display = 'none';
46	+	});
47	+	function setThemeMode() {
48	+	var overlay = document.querySelector('.overlay');
49	+	var currentMode = overlay.classList.contains('light-mode') ? 'light' : 'dark';
50	+
51	+	var date = new Date();
52	+	var hours = date.getHours();
53	+
54	+	if ((hours >= 18 \|\| hours < 6) && currentMode !== 'dark') {
55	+	overlay.classList.remove('light-mode');
56	+	overlay.classList.add('dark-mode');
57	+	} else if ((hours >= 6 && hours < 18) && currentMode !== 'light') {
58	+	overlay.classList.remove('dark-mode');
59	+	overlay.classList.add('light-mode');
60	+	}
61	+	}
62	+	</script>
63	+	</head>
64	+	<body>
65	+	<div class="global">
66	+	<div id="ol-change" class="overlay light-mode mdui-theme-layout-auto">
67	+	<div class="mdui-appbar mdui-shadow-10 mdui-hoverable mdui-ripple">
68	+	<div class="mdui-toolbar mdui-theme-layout-auto">
69	+	<a href="#" class="mdui-typo-title mdui-center">Hashi Relay</a>
70	+	</div>
71	+	</div>
72	+	<div class="mdui-spinner mdui-spinner-colorful"></div>
73	+	<div class="container p-toolbar mdui-container">
74	+	<center><h1 class="title mdui-text-color-theme">橋中继 / Hashi Relay</h1></center>
75	+	<h2 class="title mdui-text-color-theme">关于 / About</h2>
76	+	<div class="intro mdui-typo">
77	+	<p>欢迎来自Fediverse的好朋友们！愿我们能借由Fediverse实现真正的世界范围内的友好交流！</p>
78	+	<p>Welcome good friends from Fediverse! May we use the Fediverse to realize a truly world-wide friendly exchange!</p>
79	+	<br />
80	+	<ul>
81	+	<li>
82	+	<p>对于使用Mastodon，Misskey等兼容中继协议的平台的朋友们，您可以使用这个链接：<span class="sel" title="点击复制">https://relay.hashi.icu/inbox</span></p>
83	+	<p>For those of you using Mastodon, Misskey, and other platforms that are compatible with the relay protocol, you can use this link:<span class="sel" title="Copy">https://relay.hashi.icu/inbox</span></p>
84	+	</li>
85	+	<br />
86	+	<li>
87	+	<p>对于暂时没有支持中继协议的朋友们，您可以关注这位用户：<span class="sel" title="点击复制">https://relay.hashi.icu/actor</span></p>
88	+	<p>For those of you who don't have support for the relay protocol at the moment, you can follow this user:<span class="sel" title="Copy">https://relay.hashi.icu/actor</span></p>
89	+	</li>
90	+	</ul>
91	+	<br />
92	+	<p>如果有什么问题，欢迎联系<a href="https://hi.hashi.icu/@MomentQYC" target="_blank">@MomentQYC</a>。</p>
93	+	<p>If you have any questions, feel free to contact <a href="https://hi.hashi.icu/@MomentQYC" target="_blank">@MomentQYC</a>.</p>
94	+	<br />
95	+	<p>目前橋中继采用自动通过申请的策略，一般情况下不会含有任何限制，所以如果您由于一些奇怪的原因未成功加入时，可以试试退出再加入。让我们一同连接来自世界各地的朋友们！</p>
96	+	<p>Currently Hashi Relay uses an automatic pass-through policy and generally does not contain any restrictions, so if for some strange reason you don't succeed in joining, try exiting and joining again. Let's connect with friends from all over the world!</p>
97	+	<h2 class="title mdui-text-color-theme">总计 / Total <span id="stats-server-count">...</span></h2>
98	+	<button class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-center" mdui-dialog="{target: '#showInst'}">显示 / Show</button>
99	+	<br />
100	+	<div class="mdui-dialog" id="showInst">
101	+	<div class="mdui-dialog-title">列表（每5分钟刷新一次） / List (refreshed every 5 minutes)</div>
102	+	<div class="mdui-dialog-content"><ul id="stats-server-list"></ul></div>
103	+	<div class="mdui-dialog-actions">
104	+	<button class="mdui-btn mdui-ripple" mdui-dialog-confirm>关闭 / Close</button>
105	+	</div>
106	+	</div>
107	+	<small></small>
108	+	</div>
109	+	</div>
110	+	<div class="mdui-bottom-nav mdui-color-theme mdui-shadow-10 mdui-hoverable">
111	+	<a href="https://github.com/yukimochi/Activity-Relay" class="mdui-ripple">Relay Github</a>
112	+	<a href="https://nya.codes/nyaone/relay" class="mdui-ripple">Inspiration</a>
113	+	<a href="#" class="mdui-ripple">non-SLA</a>
114	+	</div>
115	+	</div>
116	+	</div>
117	+	<script>
118	+	const loadStats = () => {
119	+	fetch('./domains.txt')
120	+	.then((res) => {
121	+	return res.text();
122	+	})
123	+	.then((data) => {
124	+	// Collect data
125	+	const instances = data.split('\n').filter(line => line.startsWith("[]")).map(line => line.replace("[] ", ""));
126	+
127	+	// Update DOM
128	+	const dataCount = document.getElementById('stats-server-count');
129	+	dataCount.innerText = instances.length;
130	+	const dataList = document.getElementById('stats-server-list');
131	+	let inH = '';
132	+	instances.forEach((domain) => {
133	+	inH += `<li><a target="_blank" href="https://${domain}">${domain}</a></li>`;
134	+	});
135	+	dataList.innerHTML = inH;
136	+	});
137	+	};
138	+
139	+	const initSel = () => {
140	+	document.querySelectorAll(".sel").forEach(el => {
141	+	el.addEventListener('click', () => {
142	+	navigator.clipboard.writeText(el.innerText);
143	+	alert('Copied~');
144	+	});
145	+	});
146	+	}
147	+
148	+	window.onload = () => {
149	+	loadStats();
150	+	initSel();
151	+	};
152	+	setInterval(setThemeMode, 5000);
153	+	</script>
154	+	</body>
155	+	</html>

Newer Older