xw.al前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

277 lines
8.3 KiB

<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>xw.al 小五爱链短网址</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="EverEdit" />
<meta name="author" content="xiaoz<xiaoz93@outlook.com>" />
<meta name="keywords" content="xw.al,小五爱链,小五短链,短链接生成,短链接生成器,短链地址,短网址生成" />
<meta name="description" content="xw.al 小五爱链是一个免费短链接生成工具,链接永久有效。" />
<link rel='stylesheet' href='https://libs.xiaoz.top/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="https://lib.sinaapp.com/js/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css" media="screen">
.menu {
width:100%;
background-color: #343a40!important;
}
.content{
margin-top:2em;
}
.footer{
width:100%;
margin-top:2em;
}
footer {
/*color:#fff;*/
text-align:center;
padding:16px;
line-height:1em;
}
#qrcode{
max-width:200px;
max-width:200px;
}
.err_msg{
position:fixed;
top:0;
text-align:center;
width:100%;
z-index:99;
display: none;
}
.success_msg{
position:fixed;
top:0;
text-align:center;
width:100%;
z-index:99;
display: none;
}
.qr-box{
display:none;
margin-top:2em;
}
.qr-box img{
border:1px solid #EEEEEE;
}
.logo{
padding-top:0;
}
.tos{
margin-top:2em;
}
.promotion{
margin-top:2em;
}
.promotion img{
max-width:100%;
}
.loading{
width:100%;
height:100%;
/*height:30px;*/
position:absolute;
text-align:center;
/*height:30px;
line-height:30px;*/
z-index:999;
display: none;
}
.loading img{
width:30px;
height:30px;
/*margin-left:auto;
margin-left:auto;*/
margin: 0 auto;
position:absolute;
top:30%;
display: inline-block;
vertical-align: middle;
}
.menu i {
padding-right:3px;
}
</style>
</head>
<body>
<!--加载图标-->
<div class="loading">
<img src = 'https://libs.xiaoz.top/material/loading/loading_37.gif' />
</div>
<!--加载图标END-->
<!--错误提示框-->
<div class="alert alert-danger err_msg">
<strong></strong>
</div>
<!--错误提示框END-->
<!--成功的提示-->
<div class="alert alert-success success_msg">
<strong></strong>
</div>
<!--成功的提示END-->
<div class="menu">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand logo" href="/" title = "小五爱链"><i class="fa fa-home"></i> xw.al </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/api" target = "_blank" rel = "nofollow"><i class="fa fa-code"></i> API </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/xiaozblog" target = "_blank" rel = "nofollow"><i class="fa fa-wordpress"></i> Blog </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/onenav" target = "_blank" rel = "nofollow"><i class="fa fa-bookmark-o"></i> OneNav导航 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/imgurl" target = "_blank" rel = "nofollow"><i class="fa fa-image"></i> ImgURL图床 </a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="container">
<!--TOS-->
<div class="row tos">
<div class="col-md-8 offset-md-2">
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
使用条款
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
<p>xw.al我为他取了个很骚气的中文名叫:小五爱链,主要提供短链接转换服务,简称小五,使用中请务必遵守以下协议。</p>
<ul>
<li>不得转换博彩、赌博、色情、政治、暴力、血腥、成人用品等网站。</li>
<li>违法上一条协议,对短链做删除处理,不做任何通知。</li>
<li>单IP每日限制50次转换。</li>
<li>转换后的链接长期有效,直到项目无法维持。</li>
<li>为保持良性发展,您可以进行捐赠:<a href="https://www.xiaoz.me/api/pay/" target = "_blank" rel = "nofollow">捐赠地址</a></li>
</ul>
<p>如有疑问,您可通过以下方式联系我。</p>
<ul>
<li>QQ:337003006</li>
<li>QQ群1:147687134</li>
<li>QQ群2:932795364</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--TOS END-->
<div class="row content">
<!--表但-->
<div class="col-md-8 offset-md-2">
<form>
<div class="input-group mb-3">
<input type="url" id = "url" class="form-control" placeholder="请输入URL">
<div class="input-group-append">
<button type="button" class="btn btn-primary" onclick = "short();">缩短</button>
</div>
</div>
</form>
</div>
<!--表单END-->
</div>
<!--结果-->
<div class="row">
<div class="col-md-8 offset-md-2">
<!--结果左侧-->
<div class="">
<div><label>短网址:</label></div>
<form>
<div class="input-group mb-3">
<input type="text" class="form-control" id="short_url">
<div class="input-group-append">
<button type="button" id = "copy" class="btn btn-primary" onclick = "copy_url();">复制</button>
</div>
</div>
</form>
</div>
<!--结果左侧END-->
<!--结果右侧-->
<div class="qr-box">
<div style = "padding-bottom:16px;text-align:center;">扫码访问:</div>
<div class = "qrcode"><center><img id = "qrcode" src="" alt=""></center></div>
</div>
<!--结果右侧END-->
</div>
</div>
<!--结果END-->
<!--banner-->
<div class="row promotion">
<div class="col-md-8 offset-md-2">
<center><a href="https://xw.al/nodecache" rel = "nofollow" target = "_blank"><img src="https://www.xiaoz.me/wp-content/uploads/2020/12/node_banner.jpg" alt=""></a></center>
</div>
</div>
<!--banner end-->
</div>
<!--底部footer-->
<div class="footer">
<footer class = "">
© 2022 Powered by <a target = "_blank" href="https://xw.al" title = "小五爱链" rel = "nofollow">xw.al</a>.The author is <a href="https://www.xiaoz.me/" target="_blank" title = "小z博客">xiaoz.me</a>
</footer>
</div>
<!--底部footer end-->
</body>
<script src = 'https://libs.xiaoz.top/jquery/2.2.4/jquery.min.js'></script>
<script src = 'https://libs.xiaoz.top/clipBoard.js/clipBoard.min.js'></script>
<script src="https://lib.sinaapp.com/js/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
function short(){
var url = $("#url").val();
$(".loading").show();
$.post("/api.php",{"url":url},function(data,status){
if(data.statusCode == 200) {
$("#short_url").val(data.shorturl);
$('#qrcode').attr('src', 'https://qr.rss.ink/v1/?text=' + data.shorturl);
$(".loading").hide();
$(".qr-box").show();
}
else if( data.code == 403 ) {
$(".err_msg strong").text(data.err_msg);
$("#short_url").val('');
$(".qr-box").hide();
$(".loading").hide();
$(".err_msg").show();
$(".err_msg").fadeOut(5000);
}
});
}
function copy_url(){
var copy = new clipBoard(document.getElementById('copy'), {
beforeCopy: function() {
},
copy: function() {
return document.getElementById('short_url').value;
},
afterCopy: function() {
$(".success_msg strong").text('链接已复制!');
$(".success_msg").show();
$(".success_msg").fadeOut(5000);
}
});
}
</script>
</html>