-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
85 lines (84 loc) · 3.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>华容道</title>
<style>
html, body { margin: 0; padding: 0; }
.container { display: flex; background-color: #fffbe8; }
.content { flex: 3; text-align: center; }
.content h1 { color: #d64c28; font-size: 40px; }
#code {
height: 150px;
width: 150px;
margin: 0 auto;
display: block;
}
.custom a {
font-size: 16px;
color: #f44;
text-decoration: none;
}
.custom a:hover { color: #0a0; }
.custom a:active { color: #f00; }
.custom input { height: 25px; }
.game { flex: 2; }
.tip { color: #666; }
.tip a { color: #00f; text-decoration: none; }
#demo {
margin: 20px auto;
width: 375px;
height: 547px;
border-width: 0;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>华 容 道
<span style="position: relative;">
<iframe style="position: absolute; top: 15px; left: 10px;"
src="https://ghbtns.com/github-btn.html?user=conwnet&repo=huarongdao&type=star&count=true&v=2"
frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</span>
</h1>
<div>
<img id="code" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https%3A//conwnet.github.io/huarongdao/dist/" />
<p style="color: #666;">手机端扫码体验</p>
</div>
<h2>
<span style="color: #f22;">解不出来了？</span>
点击<span style="color: #0a0;">绿色方块</span>可以自动求解</h2>
<div class="custom">
<h2>你也可以
<span style="color: #00a;">自定义布局</span>
<a href="https://github.com/conwnet/huarongdao#自定义布局" target="_blank">(怎么做？)</a>
</h2>
<div>
<input type="text" id="state" placeholder="自定义序列" maxlength="20" />
<input type="button" value="自定义" onclick="changeState()" />
</div>
</div>
<p class="tip">大多数布局来自
<a href="https://zh.wikipedia.org/wiki/%E8%8F%AF%E5%AE%B9%E9%81%93_(%E9%81%8A%E6%88%B2)" target="_blank">维基百科</a>
</p>
<p class="tip">顺便吐槽，原文《雨声淅沥》布局有误</p>
</div>
<div class="game">
<iframe id="demo" src="https://conwnet.github.io/huarongdao/dist/"></iframe>
</div>
</div>
<script>
function changeState () {
var state = document.getElementById('state').value;
let gameUrl = 'https://conwnet.github.io/huarongdao/dist/#' + state;
document.getElementById('demo').src = gameUrl;
document.getElementById('code').src = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + escape(gameUrl);
}
</script>
</body>
</html>