Mercurial > hg > serpentron

<!DOCTYPE html>
<html>
    <head>
        <title>Serpentron</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Mikhail Kryshen" />
        <script type='text/javascript' src='the.js'></script>
        <style>
         body {
             margin: 0;
             background: #333;
             color: #fff;
         }
         #serpentron {
             font-family: 'PT Sans', 'Helvetica', sans-serif;
         }
         #title {
             overflow: auto;
             padding: 5px 10px;
             height: 25px;
             background: #ddd;
             color: black;
         }
         #title h1 {
             display: inline;
             margin: 0 15px 0 0;
             padding: 0;
             line-height: 24px;
             font-size: 22px;
             font-weight: bold;
         }
         #title h1 a,
         #title h1 a:visited {
             color: #00c;
         }
         #status {
             display: inline;
             font-weight: bold;
         }
         #status .player-color {
             filter: brightness(60%) saturate(180%);
         }
         #fullscreen-button {
             float: right;
             padding: 0;
             border: none;
             background: transparent;
             cursor: pointer;
         }
         #serpentron canvas {
             position: absolute;
             width: 100%;
             height: 100%;
             /* image-rendering: optimizeSpeed;
                image-rendering: -moz-crisp-edges;
                image-rendering: -webkit-optimize-contrast;
                image-rendering: -o-crisp-edges; */
             image-rendering: pixelated;
             /* -ms-interpolation-mode: nearest-neighbor; */
         }
         #field {
             position: relative;
             clear: both;
         }
         #start-screen {
             background: rgba(0, 0, 0, 0.7);
             margin: 0;
             padding: 15px;
             position: absolute;
             top: 0;
             left: 0;
             bottom: 0;
             right: 0;
         }
         #message {
             color: white;
             text-shadow: 1px 1px 1px #000;
             background: rgba(0, 0, 0, 0.8);
             font-size: 28px;
             font-weight: bold;
             text-align: center;
             padding: 1em;
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translateX(-50%) translateY(-50%);
             -webkit-transform: translateX(-50%) translateY(-50%);
             border: 2px solid #aaa;
             border-radius: 1em;
         }
         #message .player-color {
             filter: brightness(150%) saturate(90%);
         }
         .player {
             margin: 10px 0;
         }
         .color-selector {
             margin-right: 5px;
             vertical-align: center;
         }
         .player input,
         .player select {
             vertical-align: middle;
             background: rgba(60, 60, 60, 0.7);
             color: white;
             border: solid 2px grey;
             outline: none;
             margin: 0 5px;
         }
         .color-button,
         .selected-color-button {
             display: inline-block;
             vertical-align: middle;
             text-align: center;
             width: 21px;
             height: 21px;
         }
         .color-button span,
         .selected-color-button span {
             color: white;
             vertical-align: middle;
         }
         .color-button {
             padding: 2px;
         }
         .selected-color-button {
             padding: 0;
             border: solid 2px white;
         }
         .color-button:hover {
             padding: 0;
             border: solid 2px #ccc;
         }
         #start-screen button {
             background: white;
             color: black;
             border: none;
             padding: 2px 5px;
             margin: 5px 10px 5px 0;
         }
         .visible {
             visibility: visible;
             opacity: 1;
             transition: visibility 0s, opacity 0.2s linear;
             -moz-transition: visibility 0s, opacity 0.2s linear;
         }
         .hidden {
             visibility: hidden;
             opacity: 0;
             transition: visibility 0.2s, opacity 0.2s linear;
             -moz-transition: visibility 0.2s, opacity 0.2s linear;
         }
        </style>
    </head>
    <body>
        <div id="serpentron"></div>
        <script type='text/javascript'>
         require(['app'], function (amber) {
             amber.initialize({
                 //used for all new packages in IDE
                 'transport.defaultAmdNamespace': "amber-serpentron"
             }).then(function () {
                 require(["amber-ide-starter-dialog"], function (dlg) { dlg.start(); });
                 amber.globals.Serpentron._start();
             });
         });
        </script>
    </body>
</html>
author	Mikhail Kryshen <mikhail@kryshen.net>
date	Tue, 29 Mar 2016 22:15:05 +0300
parents	27280b550d56
children	a6bde9cde187