Mercurial > hg > serpentron
view index.html @ 5:c02b5a225a10
Serpentron 1.0-beta2.
| author | Mikhail Kryshen <mikhail@kryshen.net> |
|---|---|
| date | Thu, 18 Feb 2016 01:35:39 +0300 |
| parents | |
| children | 8c7e910cb328 |
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 #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>