710 lines
20 KiB
HTML
710 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>名字竞技场
|
|
-- 十年前的MD5大作战出新版了,快来试试你的名字有多厉害！</title>
|
|
<meta name="description"
|
|
content="名字竞技场是一款基于文本的对战游戏。在文本框中输入几个名字点击开始就可以进入战斗，之后不需要任何操作，战斗的过程和结果由输入的名字直接决定。每次输入相同的名字都会得到相同结果，即使改变名字的顺序结果也不会变。">
|
|
<meta name="keywords" content="竞技场,名字,姓名,打架,PK,MD5大作战,游戏,随机,预测,对战,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(//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 = "./assets/zh.json";
|
|
var adfile = "./assets/gAd.md";
|
|
var ls = window.localStorage;
|
|
|
|
var customlanpos = window.location.search.lastIndexOf("l=");
|
|
if (customlanpos > 0) {
|
|
lanfile = decodeURIComponent(window.location.search.substring(customlanpos + 2));
|
|
}
|
|
// for (let key in ls) {
|
|
// if (key.indexOf('e_e') === 6 && ls[key].length % 100 === 0) {
|
|
// adfile = '.' + adfile;
|
|
// }
|
|
// }
|
|
reqO = new XMLHttpRequest();
|
|
reqO.open("GET", adfile);
|
|
reqO.send();
|
|
|
|
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 id="done_target" class="done_target" style="display: none;"></div>
|
|
<!-- 用于标记是否完事 默认隐藏-->
|
|
<img src="thumb.jpg" width="0" height="0" />
|
|
<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 id="input_name"></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'>
|
|
<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'>
|
|
</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> |