namerena_scripts
/
en.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Namerena</title>
	<meta name="description" content="Namerena is a text based fighting game. The result of the game is fully determined by the inputed names.">
    <meta name="keywords" content="Namerena,Game,Name,Predict,Battle,Random">
    <style>
html {
 width:100%;
 height:100%;

}
body {
 margin: 0;
 font-size: 15px;
 width:100%;
 height:100%;
}
*{
 font-family: "Microsoft YaHei", Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
}

.picon {
  width: 28px;
  height: 28px;
  position: relative;
}

.micon {
  width: 32px;
  height: 32px;
  position: relative;
}
.svgicon {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 3px;
  top: 3px;
}

.fastforward {
  background-image: url("data:image/svg+xml;utf8, %3Csvg fill='white' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z'/%3E%3C/svg%3E");
}
.share {
  background-image: url("data:image/svg+xml;utf8, %3Csvg fill='white' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
}
.refresh {
  background-image: url("data:image/svg+xml;utf8, %3Csvg fill='white' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
}
.add {
  left: 1px;
  top: 1px;
  background-image: url("data:image/svg+xml;utf8, %3Csvg fill='white' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}
.rightarrow {
  left: 1px;
  top: 1px;
  background-image: url("data:image/svg+xml;utf8, %3Csvg fill='white' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z'/%3E%3C/svg%3E");
}
.close {
  left: 1px;
  top: 1px;
  background-image: url("data:image/svg+xml;utf8, %3Csvg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

div {
 display:inline-block;
 box-sizing: border-box;
}
iframe {
  border-width: 0;
}
.mdframe {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
#endFrame {
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  width: 320px;
}
.panels {
  position: absolute;
  width:100%;
  height:100%;
  min-height:380px;
  pointer-events:none;
}
.panel {
  position: absolute;
  width: 320px;
  min-height: 320px;
  max-height: 480px;
  margin: auto;
  left:0;
  right:0;
  bottom:0;
  top:0;
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);

  background: #6cc4ec;
  background: linear-gradient(100deg, #6cc4ec 0%, #2AA2D6 100%);
  border-radius: 10px;

  padding: 8px;
  padding-top: 0;
  pointer-events:auto;
}
.panel > * {
  margin-top: 8px;
}
.horizontal {
  display: -ms-flexbox;
  -ms-flex-direction: row;
  display: -webkit-flexbox;
  -webkit-box-orient: horizontal;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  display: flex;
  flex-direction: row;

  align-items:center;
}
.vertical {
  display: -ms-flexbox;
  -ms-flex-direction: column;
  display: -webkit-flexbox;
  -webkit-box-orient: vertical;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;

  flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.vertical > * {
  position:relative;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

.spacer {
  flex: 1 1 auto;
}


.paneltitle {
  color: #FFF;
  white-space: pre;
  text-align: center;
}
#textdiv {
  width:100%;
  height:320px;
  -webkit-flex: 1 1 320px ;
  flex: 1 1 320px;
}
textarea {
  position: absolute;
  top:0;
  bottom:0;
  height: 100%;
  width: 304px;
  resize: none;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 3px 0px rgba(50, 50, 50, 0.5);
  border: none;
  padding: 5px;
  border-radius: 5px;
}

button,.button {
  background: #888;
  border: solid white 1px;
  border-radius: 20px;
  font-style: normal;
  font-size: 16px;
  padding: 4px 8px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
  outline:none;
}
button:hover,.button:hover {
  background: #999;
  background: linear-gradient(0deg, #888 0%,#999 100%);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
.goBar {
  width:100%;
  height:30px;
}
.goBtn {
  font-weight: bold;
  font-size: 16px;
  width: 100px;
  position:absolute;
  left:0;
  right:0;
  margin:auto;
}
.addPlayer {
  position:absolute;
  right: 4px;
}
.closeBtn {
  position:absolute;
  right:4px;
  top:4px;
  margin:0;
}


div.checkBoss {
  color: #fff;
  padding-left: 24px;
  line-height: 23px;
  position:relative;
  width:auto;
  height:24px;
  cursor: pointer;
  opacity: 0.6;
  transition: transform 0.5s,opacity 0.2s;
  background-image: url("data:image/svg+xml;utf8, %3Csvg fill='white' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.checkBoss:hover {
 opacity: 1;
}
div.checkedBoss {
 opacity: 1;
 background-image: url("data:image/svg+xml;utf8, %3Csvg fill='white' height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
 transform: translate(0, -36px);
}

.inputoptions {
  margin-top:0;
  width:100%;
  transition: height 0.5s,opacity 0.5s;
}
.inputoption {
  padding: 4px;
  border-radius: 5px;
  background: rgba(255,255,255,0.25);
  width: 100%;
  height: 32px;
  margin-top: 8px;
  justify-content: flex-end;
}

.weiboBtn {
  font-style: normal;
  font-size: 14px;
  padding:  2px 8px 2px 30px;
  margin: 2px;
  position: relative;
}
.weiboBtn > .weiboIcon {
  position: absolute;
  left: 8px;
  top: 1px;
}

.weiboIcon {
  background-image:url(https://www.weibo.com/favicon.ico);
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  margin: 0 4px 0 0 ;
}

.weiboPreview {
  max-width:100%;
  max-height: calc(100% - 180px);
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
.bossSgl {
  width:16px;
  height:16px;
  margin:4px;
}
.bossName {
  color: #fff;
  text-align: center;
}
.showBossBtn {
 font-style: normal;
 font-size: 14px;
 width:auto;
 height:28px;
 min-width:115px;
 max-width:240px;
 padding: 0 3px;
}
.showBossBtn > .rightarrow {
  transform: rotate(90deg);
  position: relative;
  top:0;
  left:0;
}
.bossList {
  right:0;
  bottom:0;
}
.weiboList {
  right:8px;
  bottom:32px;
  align-items: flex-start;
}
.weiboList > * {
  padding: 2px 6px;
  width:100%
}
.menu {
  position: absolute;
  padding: 4px;
  z-index: 10;
   border-radius: 8px;
  background: #888;
  border: solid white 1px;
  color: #fff;
  display: none;

}
div.menuopen {
  display:block;
    -webkit-animation:  menu-show 0.2s ease-out 0s 1 both;
    animation:  menu-show 0.2s ease-out 0s 1 both;
}
@-webkit-keyframes menu-show {
  0%{
    opacity:0;
    transform: translate(0,100%);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}
@keyframes menu-show {
  0%{
    opacity:0;
    transform: translate(0,100%);
  }
  100% {
    opacity:1;
    transform: translate(0,0);
  }
}


.menu >* {
 border-radius: 12px;
  cursor: pointer;
}
.menu >*:hover {
  background: #999;
  background: linear-gradient(0deg, #888 0%,#999 100%);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}


.bossSelName {
  margin: 0 4px;
}
#qrCanvas {
  box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
  border: 4px solid #FFF;
  border-radius: 5px;
  image-rendering: pixelated;
}
.side_frame {
 position: absolute;
 top:0;
 bottom:0;
 width:300px;
 height:800px;
 border-width: 0;
 overflow-y: hidden;
}

.ad_v {
 right:0;
 width:300px;
 height:100%;
 position: absolute;
 overflow: hidden;
 background: #f8f8f8;
}
.ad_h {
 bottom:0;
 width:100%;
 height:100px;
 position: absolute;
 overflow: hidden;
 background: #f8f8f8;
}

.ad_v > ins {
  bottom:0;
  position: absolute;
}
.ad_h > * {
  left:0;
  right:0;
  position: absolute;
  margin-left:auto;
  margin-right:auto;
}

.body {
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:absolute;
}
.body_v {
  bottom:100px;
}
.body_h {
  right:300px;
}
.controlbar{
  right: 0;
  top: 0;
  position: absolute;
  background: rgba(0,0,0,0.1);
  opacity: 0.9;
  border-width: 0 0 2px 2px;
  padding: 1px 1px 4px 4px;
  border-bottom-left-radius: 20px;
  border-color: rgba(0,0,0,0.1);
  border-style: solid;
}
.controlbar:hover{
  opacity: 1;
}

.loaderbg {
  width:100%;
  height:100%;
  background:white;
  position: absolute;
  transition: opacity 0.5s ease-in-out;
}
.loader {
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:90px;
  height:30px;
  margin:auto;
  position:absolute;
}
.loader > div {
  margin:5px;
  width: 20px;
  height: 20px;
  background-color: #42a8d7;
  border-radius: 50%;
  display: inline-block;
  -webkit-animation: loading-bounce 1.5s ease-in-out 0s infinite both;
          animation: loading-bounce 1.5s ease-in-out 0s infinite both;
}
.loader > div:first-child{
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
}
.loader > div:last-child{
  background-color: #777;
  -webkit-animation-delay: 0.16s;
          animation-delay: 0.16s;
}

@-webkit-keyframes loading-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes loading-bounce {
  0%, 80%, 100% {
   transform: scale(0);
  }
  40% {
   transform: scale(1);
  }
}

    </style>
    <style id="pstyle">
    </style>
    <script>
    var lanfile = "lang/en.json";

    var customlanpos = window.location.search.lastIndexOf("l=");
    if (customlanpos > 0) {
      lanfile = decodeURIComponent(window.location.search.substring(customlanpos+2));
    }
    req0 = new XMLHttpRequest();
    req0.open("GET", lanfile);
    req0.send();
    req1 = new XMLHttpRequest();
    req1.open("GET", "md5.js");
    req1.send();

    req2 = new XMLHttpRequest();
    req2.open("GET", "md5.css");
    req2.send();

    req3 = new XMLHttpRequest();
    req3.open("GET", "md5.html");
    req3.send();


      function cw(){
        return document.querySelector('.mdframe').contentWindow;
      }
      function rld(a){
        a.reload(false);
      }
    </script>
  </head>

  <body>
    <div class='ad_h'></div>
    <div class='ad_v'></div>
    <div class='body'>
    <iframe src='md5.html' class='mdframe'></iframe>
      <div class="panels">
        <div id="inputPanel" class="panel vertical">
          <div id='inputtitle' class='paneltitle'></div>
          <div id='textdiv'>
            <textarea></textarea>
          </div>

          <div class='inputoptions vertical' style='height:0;opacity:0'>
           <div id='addBossBar' class='inputoption horizontal'>
            <div class='addPlayerLabel'></div>
            <div class='spacer'></div>
            <div class='showBossBtn horizontal button' class='picon'>
              <div class='bossSgl'></div>
              <div class='bossName spacer'></div>
              <div class="svgicon rightarrow"></div>
            </div>
           </div>
           <div class='bossList menu'></div>
          </div>

          <div class='weiboList menu vertical'>
            <div id='weiboAdd1' class='horizontal'><div class='weiboIcon'></div></div>
            <div id='weiboAdd2' class='horizontal'><div class='weiboIcon'></div></div>
          </div>
          <div class='goBar'>
            <div class="svgicon checkBoss"></div>
            <button class='goBtn'></button>
            <button class='picon addPlayer' style='display:none'><div class="svgicon add"></div></button>
          </div>

          <button class='picon closeBtn'><div class="svgicon close"></div></button>
        </div>
        <div id="sharePanel" class="panel vertical">
          <div id='sharetitle' class='paneltitle'></div>
          <div id='textdiv'>
            <textarea></textarea>
          </div>
          <canvas id='qrCanvas' style='display:none'></canvas>
          <image class='weiboPreview'></image>
          <div id='shareBar' style='display:none'>
          </div>
          <button class='picon closeBtn'><div class="svgicon close"></div></button>
        </div>
        <div id="endPanel" class="panel vertical">
         <div id='endtitle' class='paneltitle'></div>
         <iframe id='endFrame' class='spacer'></iframe>
         <button id='refreshPageBtn'></button>
        </div>
      </div>
      <div class='controlbar'>
        <button id='shareBtn' class='micon'><div class="svgicon share"></div></button>
        <button id='fastBtn' class='micon'><div class="svgicon fastforward"></div></button>
        <button id='refreshBtn' class='micon'><div class="svgicon refresh"></div></button>
      </div>
    </div>
    <div class='loaderbg'>
      <div class='loader'>
        <div></div><div></div><div></div>
      </div>
    </div>

    <script src="index.dart.js"></script>
    <script src="lzma_worker-min.js"></script>
  </body>
</html>