Skip to content
This repository has been archived by the owner on Aug 15, 2024. It is now read-only.

Commit

Permalink
stable v1.6.1
Browse files Browse the repository at this point in the history
  • Loading branch information
LateDreamXD committed Apr 20, 2024
1 parent 9976cd5 commit 4fcd95c
Show file tree
Hide file tree
Showing 7 changed files with 284 additions and 190 deletions.
33 changes: 24 additions & 9 deletions css/qtail.css → css/style.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/*
* file: qtail.css
* name:
* file: style.css
* name: 石山css
* author: XiaozhiSans
* create date: 2024/03/29
* update date: 2024/04/18
* update date: 2024/04/20
*/

/* 石山css,不要乱改,很可能牵一发动全身 ( ̄▽ ̄)" */
Expand All @@ -19,7 +19,7 @@ a:hover {
}
body {
color: black;
background-color: black;
background-color: deeppink;
background-repeat: no-repeat;
font-family: "微软雅黑", "Microsoft Yahei";
}
Expand Down Expand Up @@ -199,7 +199,7 @@ input[type="checkbox"] {
display: block;
}
}
} */
}
input#rstr+label#rstr {
user-select: none;
margin-left: 32px;
Expand All @@ -224,6 +224,20 @@ input#rstr:checked+label#rstr {
background: url("../img/checkbox_.webp");
background-size: cover;
}
} */

[tooltip]:hover {
&::after {
position: absolute;
content: attr(tooltip);
display: block;
font-size: 80%;
padding: 5px;
z-index: 10;
background-color: orange;
border-radius: 10px;
box-shadow: 0 10px 20px -5px #0004;
}
}

succBtn {
Expand Down Expand Up @@ -272,6 +286,7 @@ copyBtn {
padding: 1px;
cursor: pointer;
user-select: none;
position: absolute;
border-radius: 10% 10% 10% 10%;
}

Expand Down Expand Up @@ -312,7 +327,7 @@ img#visitor-counter {
body {
background-size: auto 200%;
/* 桌面端默认桌面壁纸 */
background-image: url("https://s21.ax1x.com/2024/04/12/pFXqo7R.jpg");
background-image: url("https://cdn.jsdelivr.net/gh/XiaozhiSans/imgbed@2024-04-20-01/XiaozhiSans/background.jpg");
}

copyBtn {
Expand All @@ -338,14 +353,14 @@ img#visitor-counter {
body {
background-size: auto 125%;
/* 移动端默认桌面壁纸 */
background-image: url("https://s21.ax1x.com/2024/04/18/pFzwM6O.png");
background-image: url("https://cdn.jsdelivr.net/gh/XiaozhiSans/imgbed@2024-04-20-01/XiaozhiSans/115323172_p0.png");
}
div.qtailBox,
div.resultBox,
div.tabPnl {
width: 95%;
width: 88%;
margin-top: -1%;
margin-left: -3px;
margin-left: -2px;
}
/*div.tabPnl {
margin-top: -1%;
Expand Down
50 changes: 28 additions & 22 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
name: qtail homepage
author: XiaozhiSans
creative date: 2024/03/30
update date: 2024/04/18
update date: 2024/04/20
-->

<!DOCTYPE html>
Expand All @@ -17,11 +17,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qtail | qq昵称小尾巴生成器</title>
<link rel="shortcut icon" type="image/png" href="img/qtail.png">
<link rel="stylesheet" type="text/css" href="css/qtail.css">
<!-- 提前载入的脚本和层叠样式表 -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/qtail.js"></script>
<style id="customBg" type="text/css">
/* 更改壁纸接口 */
</style>
<script type="text/javascript" src="js/qtail.html.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<!-- 对苹果设备以及 pwa 的支持 -->
<link rel="apple-touch-icon" href="img/qtail.png">
<meta name="apple-mobile-web-app-title" content="qtail">
<link rel="bookmark" href="img/qtail.png">
Expand All @@ -30,77 +31,82 @@
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- 没有脚本权限显示的内容 -->
<noscript>
<div class="noscriptPnl">
JavaScript is required for this site, but your browser does'nt support JavaScript<br>
or JavaScript was disabled.<br>
Please check your browser settings and try again.
</div>
</noscript>
<!-- end 没有脚本权限显示的内容 -->

<!-- 主窗口 -->
<div>
<div id="mainWindow">
<div class="tabPnl">
<!-- 窗口顶栏内容 -->
<!-- 窗口顶栏 -->
<p id="tabText">qq昵称小尾巴生成器</p>
<div class="tabBtnPnl">
<tabBtn class="share" onclick="qtail.share();" title="分享">📲</tabBtn>
<tabBtn class="donation" onclick="qtail.donation();" title="喜欢"></tabBtn>
<tabBtn class="exit" onclick="qtail.exit();" title="关闭"></tabBtn>
<tabBtn class="share" onclick="qtailHtml.share();" tooltip="分享">📲</tabBtn>
<tabBtn class="donation" onclick="qtailHtml.donation();" tooltip="喜欢"></tabBtn>
<tabBtn class="exit" onclick="qtailHtml.exit();" tooltip="关闭"></tabBtn>
</div>
</div>
<div class="qtailBox">
<p id="verText">Loading...</p>
<script type="text/javascript">qtail.getVer();</script>
<!-- [一言] <p id="sentence">:D 一言获取中...</p> -->
<p class="atext">互联网很美好,但你下载不了爱。<i> —— 游戏《破碎现实》</i></p>
<form id="qtail" action="" method="">
<div>
<label for="name">你的昵称(最大20字符)</label>
<label for="name" tooltip="(最大20字符)">*你的昵称</label>
<input type="text" id="name" name="name" required value="qtail" maxlength="20">
</div><div>
<label for="tail">你想要的小尾巴(最大70字符)</label>
<label for="tail" tooltip="(最大70字符)">*你想要的小尾巴</label>
<input type="text" id="tail" name="tail" required value="喵~" maxlength="70">
</div> <!-- <br>
<div>
<input type="checkbox" id="rstr" name="rstr" value="true" hidden>
<label for="rstr" id="rstr" title="当生成的昵称中尾巴没有按预期显示时开启。">rstr 模式(仅支持半角符号)</label>
</div> -->
<succBtn onclick="qtail.main();">生成</succBtn>
<succBtn onclick="qtailHtml.main();">生成</succBtn>
</form><br>
<img id="visitor-counter" src="https://count.getloli.com/get/@qtail?theme=rule34" alt="页面累计被访问次数">
<img id="visitor-counter" src="https://count.getloli.com/get/@qtail?theme=rule34" alt="页面累计被访问次数" tooltip="页面累计被访问次数">
</div>
<div class="resultBox">
<div>
<label for="result">这就是你的新昵称哒 ~( ̄▽ ̄)~</label>
<copyBtn onclick="qtail.copy();" title="复制">📋</copyBtn>
<copyBtn onclick="qtailHtml.copy();" tooltip="复制">📋</copyBtn>
<textarea id="result" readonly>(x_x) 还没有生成昵称呢,快去试试吧</textarea>
</div>
</div>
</div>
<!-- end 主窗口 -->

<!-- 底栏窗口 -->
<footer>
<footer id="bottomWindow">
<div class="footerBox">
<div class="tabPnl" id="footerTabFix">
<p id="tabText">底栏</p>
<div class="tabBtnPnl">
<tabBtn id="disabled"></tabBtn>
<tabBtn id="disabled"></tabBtn>
<tabBtn id="hide" onclick="qtail.hideFooter();" title="隐藏"></tabBtn>
<tabBtn id="hide" onclick="page.hideFooter();" tooltip="隐藏"></tabBtn>
</div>
</div>
<div class="footerPnl" id="footerPnl">
<p>
<a href="https://github.com/XiaozhiSans/qtail">开放源代码</a> | <a href="#" onclick="qtail.changeBoxAlpha();">窗口透明度</a><br>
<a href="#" onclick="qtail.randBg();" title="请期待下个版本(" id="disabled">随机桌面壁纸</a> | <a href="#" onclick="qtail.changeBg();">更改桌面壁纸</a><br>
<a href="https://github.com/XiaozhiSans/qtail">开放源代码</a> | <a href="#" onclick="page.changeBoxAlpha();">窗口透明度</a><br>
<a href="#" onclick="page.randBg();" tooltip="请期待下个版本(" id="disabled">随机桌面壁纸</a> | <a href="#" onclick="page.changeBg();">更改桌面壁纸</a><br>
Copyright (c) 2024 <a href="https://github.com/XiaozhiSans">XiaozhiSans</a>
</p>
</div>
</div>
</footer>
<!-- end 底栏窗口 -->


<!-- 最后加载的脚本 -->
<script type="text/javascript">qtail.getVer();</script>
<!-- end 最后加载的脚本 -->

</body>
</html>
</html>
89 changes: 89 additions & 0 deletions js/page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
console.log("page.js has been loaded.")

const page = {
appName: "",
appNameShort: "",
version: "v1.0.0",
versionCode: 10020240420,
buildVer: "(20240420)",
buildType: "",
license: "",
author: "XiaozhiSans",
url: "",
changeBg: function() {
var bgUrl = prompt("请输入图片url:", "https://eg.web/imgs/img0.jpg");
if((bgUrl != null)&&(bgUrl != "")) {
document.getElementById("body").style.backgroundImage = bgUrl;
document.getElementById("body").style.backgroundSize = auto;
}
else {
console.error("page.js: on changeBg, error code: -1");
return -1;
}
alert("更改成功 ( ̄﹃ ̄)");
return 0;
},
changeBoxAlpha: function() {
var alpha = prompt("请输入透明度(0 ~ 1.0):", "1.0");
if((alpha > 1.0)||(alpha < 0.0)||(alpha == NaN)) {
alert("更改失败 Σ(っ °Д °;)っ \n 无效的数值。");
console.error("page.js: on changeBoxAlpha, error code: -1");
return -1;
}
if((typeof alpha) != "string") {
alert("更改失败 Σ(っ °Д °;)っ \n 输入的内容不合法。");
console.error("page.js: on changeBoxAlpha, error code: -2");
return -2;
}
document.getElementById("mainWindow").style.opacity = alpha;
alert("更改成功 ( ̄﹃ ̄)");
return 0;
},/*
changeBoxBg: function() {
const box = document.getElementById("bg");
var bgUrl = prompt("请输入图片url:", "https://eg.web/imgs/img0.jpg");
if((bgUrl != null)&&(bgUrl != "")) {
box.setAttribute("style", "background-image: url(" + bgUrl + ");\nmargin: auto;");
}
else return -1;
alert("更改成功 ( ̄﹃ ̄)");
return 0;
},*/
hideFooter: function() {
const hideBtn = document.getElementById("hide");
document.getElementById("footerPnl").style.display = "none";
hideBtn.setAttribute("onclick", "page.displayFooter();");
hideBtn.setAttribute("tooltip", "显示")
hideBtn.innerHTML = "➕";
return 0;
},
displayFooter: function() {
const hideBtn = document.getElementById("hide");
document.getElementById("footerPnl").style.display = '';
hideBtn.setAttribute("onclick", "page.hideFooter();");
hideBtn.setAttribute("tooltip", "隐藏");
hideBtn.innerHTML = "➖";
return 0;
}/*,
sentence: function() {
},
randBg: function() {
const url = "https://s21.ax1x.com/";
if (device.mobile()){
const bgList = [
"2024/04/18/pFzwE79.jpg"
]
}
else {
const bgList = [
"2024/04/18/pFzwQXD.jpg",
"2024/04/18/pFzwmfx.jpg",
"2024/04/18/pFzwE79.jpg",
"2024/04/18/pFzwZkR.jpg",
"2024/04/18/pFzwup6.jpg"
]
}
document.getElementById("customBg").style.background = bgUrl + bgList[Math.floor(Math.random() * 6)];
}*/
}
77 changes: 77 additions & 0 deletions js/qtail.html.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
document.addEventListener("keydown", function(event) {
// 热键绑定
if (event.code == "Enter") {
qtailHtml.main();
}
if (event.code == "Escape") {
qtailHtml.exit();
}
if (event.key == "F8") {
qtailHtml.copy();
}
});

const qtailHtml = {
appName: "qtail.js html module",
appNameShort: "qtail-html-module",
version: "v1.0.0",
versionCode: 10020240420,
buildVer: "(20240420)",
buildType: "Stable",
license: "MIT License",
author: "XiaozhiSans",
url: "",
main: function() {
console.log("开始生成新昵称 ( ̄﹃ ̄)");
console.log("获取表单内容 ( ̄﹃ ̄)");
const qtailForm = document.querySelector("#qtail");
const qtailData = new FormData(qtailForm);

var name = qtailData.get("name");
var tail = qtailData.get("tail");
if (name == "" || tail == "") {
alert("生成已取消 ( ̄﹃ ̄) \n 昵称或尾巴不能为空.");
console.error("qtail.js: on main, error code: -1");
return -1;
}
console.log("获取到昵称:" + name + " 获取到尾巴:" + tail);

var result = qtail.generation(name, tail);

console.log("将结果返回页面 ( ̄﹃ ̄)");
document.getElementById("result").innerHTML = result;
alert("生成完毕 ( ̄﹃ ̄)");
},
copy: function() { // 复制结果 ( ̄﹃ ̄)
const result = document.querySelector("#result");
result.select();
document.execCommand("copy");
alert("复制成功 ( ̄﹃ ̄) \n 快去 qq 试试吧");
return 0;
},
share: function() {
if(!navigator.share) {alert("您的浏览器不支持分享功能! ( ̄﹃ ̄)"); return -1;}
else {navigator.share({title: location.title, url: location.href, text: "hi,我发现了一个超有意思的昵称生成器 —— qtail"}); return 0;}
},
donation: function() {
if(confirm("感谢您的支持!! ✪ ω ✪")) {return 0;}
else {return -1;}
},
exit: function() {
if(confirm("您确定要关闭 qtail 吗? >︿<")) {
history.back();
}
}
}

console.log(
"\n" +
" %c " + qtailHtml.appName + ' ' + qtailHtml.version + " by " + qtail.author +
" %c License: " + qtailHtml.license +
" %c " + qtailHtml.url +
"\n" +
"\n",
"color: #fff; background: #fd79a8; padding: 5px 0;",
"color: black; background-color: #999; padding: 5px 0;",
"background: #FFF; padding: 5px 0;"
);
Loading

0 comments on commit 4fcd95c

Please sign in to comment.