Mercurial > hg > serpentron
view index.html @ 21:d0b6f5635d85
Added tag 1.0.2 for changeset c8162ac60edc
| author | Mikhail Kryshen <mikhail@kryshen.net> |
|---|---|
| date | Fri, 13 Mar 2020 15:19:58 +0300 |
| parents | c86e88127e13 |
| children |
line source
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 #fullscreen-button {
44 float: right;
45 padding: 0;
46 margin: 5px 0 0 0;
47 border: none;
48 cursor: pointer;
49 }
50 #serpentron canvas {
51 position: absolute;
52 width: 100%;
53 height: 100%;
54 image-rendering: -moz-crisp-edges;
55 image-rendering: -webkit-crisp-edges;
56 image-rendering: pixelated;
57 }
58 #field {
59 position: relative;
60 clear: both;
61 }
62 #start-screen {
63 background: rgba(0, 0, 0, 0.7);
64 margin: 0;
65 padding: 15px;
66 position: absolute;
67 box-sizing: border-box;
68 width: 100%;
69 height: 100%;
70 white-space: nowrap;
71 overflow: auto;
72 }
73 #message {
74 color: white;
75 text-shadow: 1px 1px 1px #000;
76 background: rgba(0, 0, 0, 0.8);
77 font-size: 28px;
78 font-weight: bold;
79 text-align: center;
80 padding: 1em;
81 position: absolute;
82 top: 50%;
83 left: 50%;
84 transform: translateX(-50%) translateY(-50%);
85 -webkit-transform: translateX(-50%) translateY(-50%);
86 border: 2px solid #aaa;
87 border-radius: 1em;
88 }
89 #message .player-color {
90 filter: brightness(150%) saturate(90%);
91 }
92 .player {
93 margin: 10px 0;
94 }
95 .color-selector {
96 margin-right: 5px;
97 vertical-align: center;
98 }
99 .player input,
100 .player select {
101 vertical-align: middle;
102 background: rgba(60, 60, 60, 0.7);
103 color: white;
104 border: solid 2px grey;
105 outline: none;
106 margin: 0 5px;
107 }
108 .color-button,
109 .selected-color-button {
110 display: inline-block;
111 vertical-align: middle;
112 text-align: center;
113 width: 21px;
114 height: 21px;
115 }
116 .color-button span,
117 .selected-color-button span {
118 color: white;
119 vertical-align: middle;
120 }
121 .color-button {
122 padding: 2px;
123 }
124 .selected-color-button {
125 padding: 0;
126 border: solid 2px white;
127 }
128 .color-button:hover {
129 padding: 0;
130 border: solid 2px #ccc;
131 }
132 #start-screen button {
133 background: white;
134 color: black;
135 border: none;
136 padding: 2px 5px;
137 margin: 5px 10px 5px 0;
138 }
139 .visible {
140 visibility: visible;
141 opacity: 1;
142 transition: visibility 0s, opacity 0.2s linear;
143 -moz-transition: visibility 0s, opacity 0.2s linear;
144 }
145 .hidden {
146 visibility: hidden;
147 opacity: 0;
148 transition: visibility 0.2s, opacity 0.2s linear;
149 -moz-transition: visibility 0.2s, opacity 0.2s linear;
150 }
151 </style>
152 </head>
153 <body>
154 <div id="serpentron"></div>
155 <script type='text/javascript'>
156 var global = typeof global === "undefined" ? window : global || window;
157 new Promise(function (resolve, reject) {
158 require(['app'], resolve, reject);
159 }).then(function (amber) {
160 return amber.initialize({
161 //used for all new packages in IDE
162 'transport.defaultAmdNamespace': "amber-serpentron"
163 }).then(function () {
164 require(["amber-ide-starter-dialog"], function (dlg) {
165 dlg.start();
166 });
167 amber.globals.Serpentron._start();
168 });
169 });
170 </script>
171 </body>
172 </html>