├── README.md
├── index.html
└── main.css
/README.md:
--------------------------------------------------------------------------------
1 | # chessApp
2 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Chess
6 |
7 |
8 |
9 | Chess
10 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | width: 960px;
3 | margin-left: auto;
4 | margin-right: auto;
5 |
6 | text-align: left;
7 |
8 | font-size: 12pt;
9 | font-family: Arial, sans-serif;
10 | color: black;
11 |
12 | background: #303030 repeat fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAFUlEQVQImWNgYGD4D8UMDEgMFIH/AGu7Bfvz8g82AAAAAElFTkSuQmCC");
13 | }
14 |
15 | h1 {
16 | text-transform: lowercase;
17 | text-shadow: 0 1px 0 white;
18 | letter-spacing: 0.5ex;
19 | font-weight: bold;
20 | font-size: 100%;
21 |
22 | background: white;
23 | text-shadow: 0 0 5px black;
24 |
25 | margin: 0;
26 | padding: 14px;
27 | border-top-left-radius: 14px;
28 | border-top-right-radius: 14px;
29 | }
30 |
31 | #content {
32 | background: white;
33 | padding: 14px 40px;
34 | }
35 |
36 | #help {
37 | cursor: help;
38 | }
39 |
40 | #dim {
41 | position: fixed;
42 | top: 0;
43 | left: 0;
44 | width: 100%;
45 | height: 100%;
46 | background: rgba(0, 0, 0, 0.6);
47 | z-index: 10;
48 | display: none;
49 | cursor: wait;
50 | }
51 |
52 | #chessboard {
53 | width: 700px;
54 | height: 700px;
55 | float: left;
56 | padding: 0;
57 | }
58 |
59 | #moves {
60 | border: 1px solid silver;
61 | border-radius: 14px;
62 | width: 138px;
63 | /* max-width: 168px; */
64 | padding: 5px;
65 | padding-left: 15px;
66 | float: right;
67 | overflow: auto;
68 | height: 688px;
69 | }
70 |
71 | #moves button {
72 | width: 100%;
73 | }
74 |
75 | #clear {
76 | clear: both;
77 | width: 0;
78 | height: 0;
79 | }
80 |
81 | #footer {
82 | background: white;
83 | margin: 0;
84 | padding: 14px;
85 | border-bottom-left-radius: 14px;
86 | border-bottom-right-radius: 14px;
87 | }
88 |
89 | #chessboard table {
90 | border-spacing: 0;
91 | border-collapse: collapse;
92 | border: none;
93 | cursor: default;
94 |
95 | /* see http://goo.gl/1dTy7 (css rule to disable text selection highlighting) */
96 | -webkit-touch-callout: none;
97 | -webkit-user-select: none;
98 | -khtml-user-select: none;
99 | -moz-user-select: none;
100 | -ms-user-select: none;
101 | user-select: none;
102 | }
103 |
104 | #chessboard table tr th, #chessboard table tr td {
105 | padding: 0;
106 | margin: 0;
107 | text-align: center;
108 | vertical-align: middle;
109 | }
110 |
111 | #chessboard table tr th {
112 | background: silver;
113 | font-size: small;
114 | font-weight: normal;
115 | }
116 |
117 | #chessboard table tr th.file {
118 | width: 80px;
119 | height: 30px;
120 | }
121 |
122 | #chessboard table tr th.rank {
123 | width: 30px;
124 | height: 80px;
125 | }
126 |
127 | #chessboard table tr:first-child th:first-child {
128 | border-top-left-radius: 14px;
129 | }
130 |
131 | #chessboard table tr:first-child th:last-child {
132 | border-top-right-radius: 14px;
133 | }
134 |
135 | #chessboard table tr:last-child th:first-child {
136 | border-bottom-left-radius: 14px;
137 | }
138 |
139 | #chessboard table tr:last-child th:last-child {
140 | border-bottom-right-radius: 14px;
141 | }
142 |
143 | #chessboard table tr td {
144 | width: 80px;
145 | height: 80px;
146 | }
147 |
148 | #chessboard table tr td.light {
149 | text-shadow: 0 0 10px black;
150 | background: #E0E0E0;
151 | background: -moz-linear-gradient(-45deg, #ffffff 0%, #c0c0c0 100%);
152 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #c0c0c0));
153 | background: -webkit-linear-gradient(-45deg, #ffffff 0%, #c0c0c0 100%);
154 | background: -o-linear-gradient(-45deg, #ffffff 0%, #c0c0c0 100%);
155 | background: -ms-linear-gradient(-45deg, #ffffff 0%, #c0c0c0 100%);
156 | background: linear-gradient(135deg, white, silver);
157 |
158 | }
159 |
160 | #chessboard table tr td.dark {
161 | text-shadow: 0 0 10px white;
162 | background: #404040;
163 | background: -moz-linear-gradient(-45deg, #808080 0%, #000000 100%);
164 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #808080), color-stop(100%, #000000));
165 | background: -webkit-linear-gradient(-45deg, #808080 0%, #000000 100%);
166 | background: -o-linear-gradient(-45deg, #808080 0%, #000000 100%);
167 | background: -ms-linear-gradient(-45deg, #808080 0%, #000000 100%);
168 | background: linear-gradient(135deg, gray, black);
169 | }
170 |
171 | #chessboard table tr td div {
172 | font-size: 50px;
173 | }
174 |
175 | #chessboard table tr td.white {
176 | color: white;
177 | }
178 |
179 | #chessboard table tr td.black {
180 | color: black;
181 | }
182 |
183 | #chessboard table tr td.from {
184 | font-weight: bold;
185 | }
186 |
187 | #chessboard table tr td.to {
188 | box-shadow: inset 0 0 10px 1px green;
189 | }
190 |
191 | #chessboard table tr td.to.capture {
192 | box-shadow: inset 0 0 10px 1px red;
193 | }
194 |
195 | #chessboard table tr td.to.en-passant:after {
196 | color: red;
197 | content: "e.p.";
198 | }
199 |
200 | #chessboard table tr td.to.king-castle:after {
201 | color: magenta;
202 | content: "0-0";
203 | }
204 |
205 | #chessboard table tr td.to.queen-castle:after {
206 | color: magenta;
207 | content: "0-0-0";
208 | }
209 |
210 | #chessboard table tr td.to.positional:after, #chessboard table tr td.to.double-push:after {
211 | color: gray;
212 | content: "\2022";
213 | }
214 |
215 | #chessboard table tr td.turn {
216 | cursor: move;
217 | }
218 |
219 | #chessboard table tr td div.turn:not(.can-move) {
220 | cursor: not-allowed;
221 | }
222 |
223 | #chessboard table tr td.last-move {
224 | box-shadow: inset 0 0 10px 1px yellow;
225 | }
226 |
227 | #moves a {
228 | color: gray;
229 | font-size: 8pt;
230 | text-decoration: none;
231 | }
232 |
233 | #moves a.cannot {
234 | color: silver;
235 | pointer-events: none;
236 | cursor: default;
237 | }
238 |
--------------------------------------------------------------------------------