wx
Version:
W(ei)X(in) -- (minimalist) WeChat Middleware for Express.js
304 lines (262 loc) • 6.98 kB
HTML
<html>
<head>
<title>admin</title>
<link href="https://res.wx.qq.com/mpres/htmledition/images/favicon1ddd38.ico" rel="Shortcut Icon">
<link rel="stylesheet" href="http://cdn.wedocare.com/vendor/prism/0.0.1/prism.css">
<link rel="stylesheet" href="http://cdn.wedocare.com/vendor/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
html,body{
width:100%;
height:100%;
overflow:hidden;
padding:0;
margin:0;
background: #000;
position: relative;
}
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
input[type="submit"]{
width:366px;
height:50px;
position:absolute;
top:620px;
right:108px;
z-index: 1;
background:#fff;
border:none;
font-size: 20px;
}
#div_success,
#div_error{
width:300px;
position:fixed;
top:0;
left:50px;
margin-left:-150px;
color:#fff;
}
#div_success{ background:#f9f2f4; color:#c7254e;}
#div_error{ backgroud:#dff0d8;color:#468847;}
.admin_app_secret{
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.phone{
position: absolute;
top: -200px;
right: 100px;
z-index: 1;
width:385px;
height:800px;
background:url(http://cdn.wedocare.com/img/message/message_iphone.png) no-repeat;
}
.phone>ul{
margin: 250px 0 100px 68px;
padding: 0;
}
.phone>ul li{
width: 100px;
height:25px;
margin-bottom: 10px;
background: #fff;
list-style: none;
}
.phone>ul li:nth-child(1){
width: 110px;
}
.phone>ul li:nth-child(2){
width: 160px;
}
.phone>ul li:nth-child(3){
width: 60px;
}
.phone>ul li:nth-child(4){
width: 200px;
}
/* 按钮组 */
#div_result{
position: absolute;
bottom: 125px;
left: 0;
width: 2000px;
}
#div_result a{
width: 103px;
height: 40px;
line-height: 28px;
border-radius: 0;
font-size: 16px;
color: #fff;
padding: 6px 12px;
}
#div_result a:hover{
background: #d2322d;
}
#div_result a:before,
#div_result a:after{
display: none;
}
#div_result > div:nth-child(1) > a{
width: 104px;
}
#div_result > div:nth-child(1) > a,
#div_result > div:nth-child(2) > a{
border-right: none;
}
/* 1、2、3、*/
#div_result > div[length="1"] > a{
width: 310px;
}
#div_result > div[length="2"] > a{
width: 155px;
}
/* 出现二级菜单：一级菜单的箭头标识 */
#div_result a.option_icon:before{
content: '';
display: inline-block;
width: 14px;
height: 12px;
background: url(http://cdn.wedocare.com/img/edit_button/edit_button_icon.png) no-repeat 0 0;
background-size: 12px;
}
.btn_group_demo{
width: 310px;
overflow: hidden;
position: absolute;
height: 100%;
top:0;
left:39px;
}
/* 出现二级菜单：向下小三角 */
#div_result .dropdown-menu{
bottom: 50px;
}
#div_result .dropdown-menu:empty{
display: none;
}
#div_result .dropdown-menu:before{
content: '';
position: absolute;
bottom: -2px;
left: 40px;
display: inline-block;
width: 0;
height: 0;
border-top: 7px solid;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
color: #ac2925;
}
#div_result > div > ul a{
width: 93px;
height: 40px;
border-radius: 0;
font-size: 16px;
}
#div_result > div > ul {
border: none;
background: none;
box-shadow: none;
margin-left: 5px;
}
#div_result > div > ul li:nth-child(1) + li a{
border-top: none;
}
#textarea_markdown{
display:none;
position:absolute;
}
#div_json{
position: absolute;
top: 0px;
right: 500px;
width: 300px;
z-index: 1;
height: 100%;
}
#div_json pre{
max-height: 90%;
overflow-y: auto;
}
#div_json pre:empty{
display:none;
}
/* Retina device*/
@media (min--moz-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2),
(-ms-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5){
.phone{
background:url(http://cdn.wedocare.com/img/message/message_iphone@2x.png) no-repeat;
background-size: auto 800px;
}
#div_result a.option_icon:before{
background: url(http://cdn.wedocare.com/img/edit_button/edit_button_icon@2x.png) no-repeat 0 0;
background-size: 12px;
}
}
</style>
</head>
<body>
<form method="post" action="">
<div id="editor"></div>
<div class="phone">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="btn_group_demo">
<div id="div_result"></div>
</div>
</div>
<textarea id='textarea_markdown' name="buttons" placeholder="自定义按钮，请输入">MARKDOWN</textarea>
<input type="password" class="admin_app_secret" name="app_secret" value="APPSECRET" />
<input type="submit" name='action' value='更新菜单'></input>
</form>
<div id="div_success"></div>
<div id="div_error"></div>
<div id='div_json'><pre class="language-javascript"></pre></div>
<script id='template_div_result' type='template/mustache'>
{{#.}}<div class='btn-group dropup' length='{{length}}'><a class='btn btn-danger dropdown-toggle {{#sub_button}} option_icon{{/sub_button}}' {{#url}}href='{{.}}' target='blank'{{/url}} {{^url}}data-toggle='dropdown'{{/url}}>{{name}}</a><ul class='dropdown-menu' role='menu'>{{#sub_button}}<li><a class='btn btn-danger' {{#url}}href='{{.}}' target='blank'{{/url}}>{{name}}</a></li>{{/sub_button }}</ul></div>{{/.}}
</script>
<script src="ace/ace.js" type="text/javascript" ></script>
<script src="ace/mode-markdown.js" type="text/javascript" ></script>
<script src="ace/theme-terminal.js" type="text/javascript"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js'></script>
<script src="http://cdn.wedocare.com/vendor/Library/library.min.js"></script>
<script src="http://cdn.wedocare.com/vendor/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
var markdown_2_json = function markdown_2_json() {};
var editor = ace.edit("editor");
var textarea_markdown = document.querySelector('#textarea_markdown');
var div_json = document.querySelector('#div_json pre');
var template_div_result = document.querySelector('#template_div_result').innerHTML;
var div_result = document.querySelector('#div_result');
var update = function () {
var buttons = markdown_2_json(textarea_markdown.value);
div_json.innerHTML = JSON.stringify(buttons, null, ' ');
div_result.innerHTML = Mustache.render(template_div_result, buttons);
};
update();
editor.setTheme("ace/theme/terminal");
editor.getSession().setMode("ace/mode/markdown");
editor.getSession().setValue(textarea_markdown.value);
editor.getSession().on('change', function() {
textarea_markdown.value = editor.getSession().getValue();
update();
});
</script>
</body>
</html>