lab/cacme/app/view/index.html

183 lines
6.2 KiB
HTML
Raw Normal View History

2024-08-05 22:57:28 +08:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="generator" content="pandoc" />
<title>Center ACME Auto SSL</title>
<style type="text/css">code{white-space: pre;}</style>
<link rel="stylesheet" href="normal.css" type="text/css" />
<link rel="stylesheet" href="sakura.css" type="text/css" />
<style>
body {
height: 100%;
}
.wrapper{
position:relative;
box-sizing:border-box;
min-height:100%;
padding-bottom:35px;
}
.footer{
position:absolute;
bottom:0;
left:0;
right:0;
height:35px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 id="sakura-a-minimal-classless-css-framework-theme.">
Center ACME Auto SSL(CAAS) by Laysense
</h1>
<p>[由 <a href="https://lab.laysense.cn/">来笙实验室</a> 出品]</p>
<blockquote>
<p>CAAS将打破你对ssl和acme的认识现在只需要设置一次302重定向就可以直接申请到证书辣</p>
</blockquote>
<button id="back" onclick="skipto('step1')">🔃重设</button>
<div id="step1" style="display: none;">
<center>
<h3>Step1:输入你需要申请SSL的域名</h3>
<input id="domain" type="url" /><br />
<h3>以及你的邮箱</h3>
<input id="email" type="email" />
<button onclick="skipto('step2')">👉下一步</button>
</div>
<div id="step2" style="display: none;">
<center>
<h3>Step2:选择一种证书类型</h3>
<ul>
<li>
<h5>正式使用、公共网站:</h5>
<button onclick="choose('R3')" style="padding:8px;">📃R3(3个月)</button><br>
(即Let's Encrypt)
</li><hr />
<li>
<h5>实验用途、私有网络:</h5>
<button onclick="skipto('step99')" style="background: linear-gradient(135deg, #c850c0, #4158d0);padding:15px;">💎来笙豪华娱乐证书(10年)</button>
</li>
<li>
<h5>5050net、fwnet内部使用</h5>
<button onclick="skipto('step999')">🌐FWNET证书</button>
</li>
</ul>
</center>
</div>
<div id="step3" style="display: none;">
<div width="50%" style="background-color: beige;">
当前证书品牌:<span class="showtype"></span> 域名:<span class="showdomain"></span>
</div>
<center>
<h3>最后一步!</h3>
<p>请将<pre>http://<span class="showdomain"></span>/.well-known/acme-challenge/</pre>重定向到 <pre>http://httpacme.lab.laysense.cn/acme/<span class="showdomain"></span></pre></p>
<button id="checkbutton" onclick="check()">😀我搞定了!</button><br />
<pre id="checknotice" style="background-color: antiquewhite;display: none;"></pre>
<hr><a>🧐不会操作? 查看文档!</a>
</center>
</div>
<div id="step4" style="display: none;">
<div width="50%" style="background-color: beige;">
当前证书品牌:<span class="showtype"></span> 域名:<span class="showdomain"></span>
</div>
<center>
<h3>😍激动人心的时刻</h3>
<button style="background: linear-gradient(135deg, #ff9a9e, #fad0c4);padding:12px;" onclick="skipto('step999')">获取证书</button>
</center>
</div>
<div id="step99" style="display: none;">
<center>
<h3>😳诶呀,所选证书品牌暂时不可用</h3>
<button id="back" onclick="skipto('step2')">🔃重选证书</button>
</center>
</div>
<div id="step999" style="display: none;">
<center>
<h3>😳诶呀,该证书品牌拒绝新的申请</h3>
<button id="back" onclick="skipto('step2')">🔃重选证书</button>
</center>
</div>
<hr />
<div class="footer">
<a>📥下载来笙根证书</a> <a href="https://5050net.cn/fwnet-ecdsa-root-ca-1.crt" target="_blank">📥下载FWNET根证书</a>
<a style="float: right;">📄文档</a>
<a style="float: right;">⏰自动续期</a>
</div>
</div>
<script src="jquery-3.7.1.js"></script>
<script>
changestep();
window.onhashchange=function(){
changestep();
}
function skipto(whichstep){
location.hash=whichstep;
changestep();
}
function choose(type){
window.certtype=type;
location.hash='step3';
changestep();
}
function changestep(){
var domain=$('#domain').val();
var step=location.hash;
if(typeof(step) == "undefined" || !step || !domain || typeof(domain) == "undefined"){
step='#step1';
}else if(step!='#step2'&& !window.certtype || typeof(window.certtype) == "undefined"){
step='#step2';
}else{
$('.showdomain').html(domain);
$('.showtype').html(window.certtype);
}
if(step=='#step4'&&(window.check!='pass'||!window.check)){
step='#step3';
}
//console.log(step);
$(window.laststep).hide();
$(step).show();
window.laststep=step;
}
function check(){
var domain=$('#domain').val();
var email=$('#email').val();
$.ajax({
type: "POST",
url: '/apply/check',
data: {'domain':domain,'email':email,'cert':window.certtype},
async: true,
dataType: 'json',
cache: false,
beforeSend: function () {
$('#checkbutton').attr("disabled","disabled");
$('#checkbutton').hide();
$('#checknotice').show();
$('#checknotice').html('📑检查中,请稍等');
},
success: function (data) {
if (data.code == 200) {
$('#checknotice').html('已通过校验');
changestep('step4');
window.check='pass';
} else {
$('#checkbutton').show();
$('#checknotice').html('校验未通过:'+data.msg);
$('#checkbutton').removeAttr("disabled");
}
},
clearForm: true,
resetForm: false
});
}
</script>
</body>
</html>