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