forked from Pawdia/sobani
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (119 loc) · 5.12 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sobani</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link href="./src/assets/css/main.css" rel="stylesheet">
</head>
<body style='background-image:url(https://i.loli.net/2020/04/10/3ORse1XIAKd4twh.jpg); background-repeat:no-repeat; background-size:cover'>
<div class="nonecentered">
<div class="indicator">
<div id="connection-indicator"></div>
<a class="connection-text" id="connection-not">未连接</a>
</div>
</div>
<center>
<div class="container" style="line-height: 1em; padding-top: 40px;">
<div style="width: 250px; height: 250px;"></div>
<br>
<h2 style="font-weight: bold;">欢迎使用Sobani！</h2>
<p>目前版本：0.1.2_beta</p>
<div id="shareid-field"></div>
<div id="loading"></div>
<input type="button" class="disconnect-button" value="Disconnect" onclick="disconnect()" style="display: none;">
<div class="form-group field" style="display: block;">
<input type="text" class="form-field" id="remote-id" placeholder="ShareID" required>
<input type="button" class="connect-button" id="connect-button" value="Link Start!" onclick="connect()"
style="display: block;">
<br>
<label for="name" class="form-label">朋友的ID</label>
</div>
</div>
<div style="position: absolute; bottom: 0; left: 205px">
<p>©2020 Sobani. Made with ♥ by AyakaNeko & Oniyakun</p>
</div>
</center>
<div class="logger"></div>
<div class="lastseen" style="display: none">
Last Seen: <span id="lastseen-time"></span>
</div>
<script type="text/javascript" src="./src/assets/js/jquery-3.4.1.min.js"></script>
<script>
let input = document.getElementById("remote-id");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("connect-button").click();
}
});
// Announced
window.api.response("announced", shareId => {
$("#shareid-field").append(`<p>你的ID是： <span>${shareId}</span></p>`)
})
// Controlling
window.api.response("control", status => {
$(".load")[0].remove()
$(".container").append(`<p class="log">${status}<p>`)
})
// Indicator
window.api.response("indicator", update => {
var timer
switch (update.status) {
// If Connected
case "connected":
timer === undefined ? 0 : clearTimeout(timer)
// Toggle Indicator
document.getElementById("connection-indicator").style.background = "#4CDA7B";
$("#connection-not")[0].remove();
$(".indicator").append(`<a class="connection-text" id="connection-true">已连接！</a>`);
$("#shareid-field").append(`<p id="connected-user">你已经与 <span>${update.id}</span> 建立连接</p>`);
// document.getElementsByClassName("lastseen")[0].style.display = "block";
// Remove Connect
document.getElementsByClassName("form-label")[0].style.display = "none";
document.getElementsByClassName("form-field")[0].style.display = "none";
document.getElementsByClassName("connect-button")[0].style.display = "none"
document.getElementsByClassName("disconnect-button")[0].style.display = "block";
break;
// If Disconnected
case "disconnected":
// Toggle Indicator
document.getElementById("connection-indicator").style.background = "#ff2f5c";
$("#connection-true")[0].remove();
$(".indicator").append(`<a class="connection-text" id="connection-not">未连接</a>`);
$("#connected-user")[0].remove();
// Remove Disconnect
document.getElementsByClassName("form-label")[0].style.display = "block";
document.getElementsByClassName("form-field")[0].style.display = "block";
document.getElementsByClassName("connect-button")[0].style.display = "block"
document.getElementsByClassName("disconnect-button")[0].style.display = "none";
// Remove all logs
$(".log").remove();
break;
}
})
window.api.response("lastseen", function (lastseen) {
$("#lastseen-time")[0].text = lastseen;
})
// Connect Action
function connect() {
let text = $("#remote-id")[0].value;
if (text === "" || text === undefined || text.trim() === "") {
alert("请输入一个来自朋友的ID噢");
}
else {
document.getElementsByClassName("form-label")[0].style.display = "none";
document.getElementsByClassName("form-field")[0].style.display = "none";
document.getElementsByClassName("connect-button")[0].style.display = "none"
$("#loading").append("<div class='load'></div>");
window.api.request("connect", text.trim());
}
}
function disconnect() {
document.getElementsByClassName("form-group")[0].style.display = "block";
window.api.request("disconnect", false)
}
</script>
</body>
</html>