/
homepage.mustache
93 lines (79 loc) · 2.55 KB
/
homepage.mustache
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
<!doctype html>
<html>
{{{head}}}
<body class="homepage">
<div class="hero-wrapper">
<div class="body-width-115f6 hero-inner-556fe">
<img src="img/chesspieces/wikipedia/bK.svg" alt="Black King" />
<h1>chessboard.js</h1>
<h3>The easiest way to embed a chess board on your site.</h3>
<a href="releases/chessboardjs-1.0.0.zip">Download v1.0.0</a>
</div>
</div>
<nav id="start" class="homepage-nav-b9ecc">
<div class="body-width-115f6 navbar-a57cc hover-effect">
<a href="#start"><span class="piece">♟</span> Getting Started</a>
<a href="examples"><span class="piece">♛</span> Examples</a>
<a href="docs"><span class="piece">♜</span> Documentation</a>
<a href="download"><span class="piece">♞</span> Download</a>
</div>
</nav>
<main>
<section class="homepage-section-88e4a body-width-115f6">
<div class="col-11bcf">
<h2>As easy as two lines.</h2>
<h4>HTML</h4>
<pre class="prettyprint"><div id="board1" style="width: 400px"></div></pre>
<h4>JavaScript</h4>
<pre class="prettyprint">var board1 = Chessboard('board1', 'start')</pre>
</div>
<div class="col-11bcf">
<div id="board1" style="width: 400px"></div>
</div>
</section>
<section class="homepage-section-88e4a body-width-115f6">
<div class="col-11bcf">
<h2>Customize with a powerful API.</h2>
<h4>HTML</h4>
<pre class="prettyprint">
<div id="board2" style="width: 400px"></div>
<button id="startBtn">Start Position</button>
<button id="clearBtn">Clear Board</button>
</pre>
<h4>JavaScript</h4>
<pre class="prettyprint">{{{example2}}}</pre>
</div>
<div class="col-11bcf">
<div id="board2" style="width: 400px"></div>
<button id="startBtn">Start Position</button>
<button id="clearBtn">Clear Board</button>
</div>
</section>
</main>
{{{footer}}}
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/prettify.min.js"></script>
{{{chessboardJsScript}}}
<script>
;(function () {
function isTouchDevice () {
return ('ontouchstart' in document.documentElement)
}
function init () {
prettyPrint()
// example 1
var board1 = Chessboard('board1', 'start')
// example 2
{{{example2}}}
// prevent "browser drag" of the black king
$('.hero-inner-556fe img').on('mousedown', function (evt) { evt.preventDefault() })
// prevent hover problems on touch devices
if (isTouchDevice()) {
$('.navbar-a57cc').removeClass('hover-effect')
}
}
$(document).ready(init)
})()
</script>
</body>
</html>