namerena-work/branch/fight/index.html

716 lines
20 KiB
HTML
Raw Normal View History

2024-03-24 19:56:44 +08:00
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2024-03-25 20:47:19 +08:00
<title>名字竞技场-FTL by shenjackyuanjie</title>
2024-03-24 19:56:44 +08:00
<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% {
2024-04-20 21:51:11 +08:00
transform: scale(0)
2024-03-24 19:56:44 +08:00
}
40% {
2024-04-20 21:51:11 +08:00
transform: scale(1)
2024-03-24 19:56:44 +08:00
}
}
2024-04-20 21:51:11 +08:00
#version-marker {
background-color: white;
position: absolute;
top: 20px;
left: 20px;
border-radius: 5px;
/* border: 2px solid marker_color */
padding: 10px;
}
2024-03-24 19:56:44 +08:00
</style>
<style id="pstyle">
</style>
<script>
2024-03-24 21:30:48 +08:00
var lanfile = "./assets/zh.json";
var adfile = "./assets/gAd.md";
2024-03-24 19:56:44 +08:00
var ls = window.localStorage;
2024-03-24 21:30:48 +08:00
2024-03-24 19:56:44 +08:00
var customlanpos = window.location.search.lastIndexOf("l=");
if (customlanpos > 0) {
lanfile = decodeURIComponent(window.location.search.substring(customlanpos + 2));
}
2024-08-14 18:39:44 +08:00
2024-03-24 19:56:44 +08:00
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>
<!-- 用于标记是否完事 默认隐藏-->
2024-04-20 21:51:11 +08:00
<div id="version-marker" style="display: none;"></div>
<!-- 左上角一个用于标记版本号的 div, 默认状况下不显示, 部署时使用脚本替换内容, 颜色同理 -->
2024-03-24 19:56:44 +08:00
<img src="thumb.jpg" width="0" height="0" />
<div class='ad_h'></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>