Mercurial > hg > serpentron
annotate index.html @ 21:d0b6f5635d85 default tip
Added tag 1.0.2 for changeset c8162ac60edc
| author | Mikhail Kryshen <mikhail@kryshen.net> |
|---|---|
| date | Fri, 13 Mar 2020 15:19:58 +0300 (2020-03-13) |
| parents | 392c2a5ebab4 |
| children |
| rev | line source |
|---|---|
| 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 } | |
| 9 | 43 #fullscreen-button { |
| 44 float: right; | |
| 45 padding: 0; | |
|
11
a6bde9cde187
Icon for the fullscreen button.
Mikhail Kryshen <mikhail@kryshen.net>
parents:
9
diff
changeset
|
46 margin: 5px 0 0 0; |
| 9 | 47 border: none; |
| 48 cursor: pointer; | |
| 49 } | |
| 0 | 50 #serpentron canvas { |
| 51 position: absolute; | |
| 52 width: 100%; | |
| 53 height: 100%; | |
|
14
c86e88127e13
CSS: image rendering mode, overflows.
Mikhail Kryshen <mikhail@kryshen.net>
parents:
11
diff
changeset
|
54 image-rendering: -moz-crisp-edges; |
|
c86e88127e13
CSS: image rendering mode, overflows.
Mikhail Kryshen <mikhail@kryshen.net>
parents:
11
diff
changeset
|
55 image-rendering: -webkit-crisp-edges; |
|
c86e88127e13
CSS: image rendering mode, overflows.
Mikhail Kryshen <mikhail@kryshen.net>
parents:
11
diff
changeset
|
56 image-rendering: pixelated; |
| 0 | 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; | |
|
14
c86e88127e13
CSS: image rendering mode, overflows.
Mikhail Kryshen <mikhail@kryshen.net>
parents:
11
diff
changeset
|
67 box-sizing: border-box; |
|
c86e88127e13
CSS: image rendering mode, overflows.
Mikhail Kryshen <mikhail@kryshen.net>
parents:
11
diff
changeset
|
68 width: 100%; |
|
c86e88127e13
CSS: image rendering mode, overflows.
Mikhail Kryshen <mikhail@kryshen.net>
parents:
11
diff
changeset
|
69 height: 100%; |
|
c86e88127e13
CSS: image rendering mode, overflows.
Mikhail Kryshen <mikhail@kryshen.net>
parents:
11
diff
changeset
|
70 white-space: nowrap; |
|
c86e88127e13
CSS: image rendering mode, overflows.
Mikhail Kryshen <mikhail@kryshen.net>
parents:
11
diff
changeset
|
71 overflow: auto; |
| 0 | 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'> | |
| 18 | 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 }); | |
| 0 | 170 </script> |
| 171 </body> | |
| 172 </html> |