|
0
|
1 <!DOCTYPE html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <title>Serpentron</title>
|
|
|
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
6 <meta name="author" content="Mikhail Kryshen" />
|
|
|
7 <script type='text/javascript' src='the.js'></script>
|
|
|
8 <style>
|
|
|
9 body {
|
|
|
10 margin: 0;
|
|
|
11 background: #333;
|
|
|
12 color: #fff;
|
|
|
13 }
|
|
|
14 #serpentron {
|
|
|
15 font-family: 'PT Sans', 'Helvetica', sans-serif;
|
|
|
16 }
|
|
|
17 #title {
|
|
|
18 overflow: auto;
|
|
|
19 padding: 5px 10px;
|
|
|
20 height: 25px;
|
|
|
21 background: #ddd;
|
|
|
22 color: black;
|
|
|
23 }
|
|
|
24 #title h1 {
|
|
|
25 display: inline;
|
|
|
26 margin: 0 15px 0 0;
|
|
|
27 padding: 0;
|
|
|
28 line-height: 24px;
|
|
|
29 font-size: 22px;
|
|
|
30 font-weight: bold;
|
|
|
31 }
|
|
|
32 #title h1 a,
|
|
|
33 #title h1 a:visited {
|
|
|
34 color: #00c;
|
|
|
35 }
|
|
|
36 #status {
|
|
|
37 display: inline;
|
|
|
38 font-weight: bold;
|
|
|
39 }
|
|
|
40 #status .player-color {
|
|
|
41 filter: brightness(60%) saturate(180%);
|
|
|
42 }
|
|
|
43 #serpentron canvas {
|
|
|
44 position: absolute;
|
|
|
45 width: 100%;
|
|
|
46 height: 100%;
|
|
|
47 /* image-rendering: optimizeSpeed;
|
|
|
48 image-rendering: -moz-crisp-edges;
|
|
|
49 image-rendering: -webkit-optimize-contrast;
|
|
|
50 image-rendering: -o-crisp-edges; */
|
|
|
51 image-rendering: pixelated;
|
|
|
52 /* -ms-interpolation-mode: nearest-neighbor; */
|
|
|
53 }
|
|
|
54 #field {
|
|
|
55 position: relative;
|
|
|
56 clear: both;
|
|
|
57 }
|
|
|
58 #start-screen {
|
|
|
59 background: rgba(0, 0, 0, 0.7);
|
|
|
60 margin: 0;
|
|
|
61 padding: 15px;
|
|
|
62 position: absolute;
|
|
|
63 top: 0;
|
|
|
64 left: 0;
|
|
|
65 bottom: 0;
|
|
|
66 right: 0;
|
|
|
67 }
|
|
|
68 #message {
|
|
|
69 color: white;
|
|
|
70 text-shadow: 1px 1px 1px #000;
|
|
|
71 background: rgba(0, 0, 0, 0.8);
|
|
|
72 font-size: 28px;
|
|
|
73 font-weight: bold;
|
|
|
74 text-align: center;
|
|
|
75 padding: 1em;
|
|
|
76 position: absolute;
|
|
|
77 top: 50%;
|
|
|
78 left: 50%;
|
|
|
79 transform: translateX(-50%) translateY(-50%);
|
|
|
80 -webkit-transform: translateX(-50%) translateY(-50%);
|
|
|
81 border: 2px solid #aaa;
|
|
|
82 border-radius: 1em;
|
|
|
83 }
|
|
|
84 #message .player-color {
|
|
|
85 filter: brightness(150%) saturate(90%);
|
|
|
86 }
|
|
|
87 .player {
|
|
|
88 margin: 10px 0;
|
|
|
89 }
|
|
|
90 .color-selector {
|
|
|
91 margin-right: 5px;
|
|
|
92 vertical-align: center;
|
|
|
93 }
|
|
|
94 .player input,
|
|
|
95 .player select {
|
|
|
96 vertical-align: middle;
|
|
|
97 background: rgba(60, 60, 60, 0.7);
|
|
|
98 color: white;
|
|
|
99 border: solid 2px grey;
|
|
|
100 outline: none;
|
|
|
101 margin: 0 5px;
|
|
|
102 }
|
|
|
103 .color-button,
|
|
|
104 .selected-color-button {
|
|
|
105 display: inline-block;
|
|
|
106 vertical-align: middle;
|
|
|
107 text-align: center;
|
|
|
108 width: 21px;
|
|
|
109 height: 21px;
|
|
|
110 }
|
|
|
111 .color-button span,
|
|
|
112 .selected-color-button span {
|
|
|
113 color: white;
|
|
|
114 vertical-align: middle;
|
|
|
115 }
|
|
|
116 .color-button {
|
|
|
117 padding: 2px;
|
|
|
118 }
|
|
|
119 .selected-color-button {
|
|
|
120 padding: 0;
|
|
|
121 border: solid 2px white;
|
|
|
122 }
|
|
|
123 .color-button:hover {
|
|
|
124 padding: 0;
|
|
|
125 border: solid 2px #ccc;
|
|
|
126 }
|
|
|
127 #start-screen button {
|
|
|
128 background: white;
|
|
|
129 color: black;
|
|
|
130 border: none;
|
|
|
131 padding: 2px 5px;
|
|
|
132 margin: 5px 10px 5px 0;
|
|
|
133 }
|
|
|
134 .visible {
|
|
|
135 visibility: visible;
|
|
|
136 opacity: 1;
|
|
|
137 transition: visibility 0s, opacity 0.2s linear;
|
|
|
138 -moz-transition: visibility 0s, opacity 0.2s linear;
|
|
|
139 }
|
|
|
140 .hidden {
|
|
|
141 visibility: hidden;
|
|
|
142 opacity: 0;
|
|
|
143 transition: visibility 0.2s, opacity 0.2s linear;
|
|
|
144 -moz-transition: visibility 0.2s, opacity 0.2s linear;
|
|
|
145 }
|
|
|
146 </style>
|
|
|
147 </head>
|
|
|
148 <body>
|
|
|
149 <div id="serpentron"></div>
|
|
|
150 <script type='text/javascript'>
|
|
|
151 require(['app'], function (amber) {
|
|
|
152 amber.initialize({
|
|
|
153 //used for all new packages in IDE
|
|
|
154 'transport.defaultAmdNamespace': "amber-serpentron"
|
|
|
155 }).then(function () {
|
|
|
156 require(["amber-ide-starter-dialog"], function (dlg) { dlg.start(); });
|
|
|
157 amber.globals.Serpentron._start();
|
|
|
158 });
|
|
|
159 });
|
|
|
160 </script>
|
|
|
161 </body>
|
|
|
162 </html>
|
