lsongdev · May 4, 2016 06:22
diff --git a/maoyan-toolbox.html b/maoyan-toolbox.html
 <html>
 <head>
 <meta charset="utf8" />
 <meta name="viewport" content="width=device-width">
 <title>MaoYan Toolbox</title>
 <style>
 body{
  width: 50%;
  margin: auto;
  text-align: center;
 }
 ul.nav{
  display: inline-block;
 }

 ul.nav li{
  display: inline-block;
  background: #efefef;
  border-radius: 3px;
 }

 ul.nav li a {
  color: #333;
  padding: 3px;
  border: 0 rgba(0,0,0,0);
  text-decoration: none;
  
 }

 ul.nav li.active a{
  color: #fff;
  border-radius: 3px;
  background-color: skyblue;
 }

 input, textarea {
  outline: 0;
  width: 100%;
  display: block;
  font-size: 23px;
  text-align: center;
  font-family: monospace;
 }

 h1 {
  margin-top: 100px;
  text-transform: uppercase;
 }

 img {
  margin: auto;
  display: block;
  text-align: center;
 }

 input{
  padding: 0 20px;
  line-height: 50px;
  border-radius: 30px;
  border: 1px solid #ccc;
 }

 textarea {
  border: none;
  margin-top: 10px;
 }

 footer {
  text-align: center;
 }

 @media screen and (max-width: 768px){
 	body {
 		width: 80%;
    font-size: 60%;
 	}
 	.header{
 		text-align: center;
 	}
 	.nav{
 		float: none;
 		display: block;
 	}
 }

 .ribbons {
  top: 49px;
  right: -50px;
  width: 200px;
  position: fixed;
  transform: rotate(45deg);
  background-color: #e00;
 }

 .ribbons-inner {
  color: #fff;
  margin: 2px;
  display: block;
  border: 2px dotted #eee;
 }

 </style>
 </head>
 <body>
  <h1 id="title" >MaoYan Toolbox</h1>
  <p id="description" ></p>
  <nav>
    <ul id="tab" class="nav" >
      <li><a href="#app">功能1</a></li>
      <li><a href="#webview">功能2</a></li>
    </ul>
  </nav>
  <input id='txt-input' type="text" placeholder="Put your link here">
  <img id='img-qrcode' />
  <textarea id="txt-output" name="name" rows="8" cols="40" readonly ></textarea>
  
  <div class="ribbons">
    <a class="ribbons-inner" href="https://github.com/myfe" >MYFE</a>
  </div>
  
  <footer>
    <p>Author by<a href="http://wiki.sankuai.com/display/~liusong02"> 刘松(liusong02)</a></p>
    Copyright (c) 2016 <a href="https://m.maoyan.com" >MAOYAN</a> Copyright Holder All Rights Reserved.
  </footer>
 </body>
 <script>
 ;(function fn(){
  'use strict';
  
  window.addEventListener('hashchange', fn);
    
  var lnkApp = ({
    '#app'      : {
      title       : 'Open App or Download',
      description : '「调起应用并到达指定页面，如果没有安装则下载」',
      url         : 'http://m.maoyan.com/app?_v_=yes&to=',
      placeholder : 'Put native app link here, eg: imeituan://'
    },
    '#webview'  : {
      title       : 'Open Link in Webview or Direct',
      description : '「打开链接，如果在应用内则在新的Webview中打开」',
      url         : 'http://m.maoyan.com/redirect/webview?_v_=yes&to=',
      placeholder : 'Put web link here, eg: http://'
    }
  })[ location.hash ];
  
  if(!lnkApp) {
    location.hash = '#app';
    return;
  }
  
  var el = document.querySelector('a[href="' + location.hash + '"]');
  if(el) {
    el = el.parentNode;
    [].slice.call(document.querySelectorAll('ul.nav > li.active')).forEach(function(li){
      li.className = '';
    });
    el.className = 'active';
  }
  
  var title       = document.getElementById('title');
  var description = document.getElementById('description');
  
  var txtInput   = document.getElementById('txt-input');
  var txtOutput  = document.getElementById('txt-output');
  var imgQRCode  = document.getElementById('img-qrcode');
  
  title.innerText       = lnkApp.title;
  description.innerText = lnkApp.description;
  txtInput.placeholder  = lnkApp.placeholder;
  
  txtInput.addEventListener('keyup', function(ev){
    txtOutput.value = [ lnkApp.url, encodeURIComponent(txtInput.value) ].join('');
    imgQRCode.src = 'https://api.lsong.org/qr?text=' + encodeURIComponent(txtOutput.value);
  });
  
  txtOutput.addEventListener('click', function(ev){
    txtOutput.select();
  });
  
 })();
 </script>
 </html>
	<html>
	<head>
	<meta charset="utf8" />
	<meta name="viewport" content="width=device-width">
	<title>MaoYan Toolbox</title>
	<style>
	body{
	width: 50%;
	margin: auto;
	text-align: center;
	}
	ul.nav{
	display: inline-block;
	}

	ul.nav li{
	display: inline-block;
	background: #efefef;
	border-radius: 3px;
	}

	ul.nav li a {
	color: #333;
	padding: 3px;
	border: 0 rgba(0,0,0,0);
	text-decoration: none;

	}

	ul.nav li.active a{
	color: #fff;
	border-radius: 3px;
	background-color: skyblue;
	}

	input, textarea {
	outline: 0;
	width: 100%;
	display: block;
	font-size: 23px;
	text-align: center;
	font-family: monospace;
	}

	h1 {
	margin-top: 100px;
	text-transform: uppercase;
	}

	img {
	margin: auto;
	display: block;
	text-align: center;
	}

	input{
	padding: 0 20px;
	line-height: 50px;
	border-radius: 30px;
	border: 1px solid #ccc;
	}

	textarea {
	border: none;
	margin-top: 10px;
	}

	footer {
	text-align: center;
	}

	@media screen and (max-width: 768px){
	body {
	width: 80%;
	font-size: 60%;
	}
	.header{
	text-align: center;
	}
	.nav{
	float: none;
	display: block;
	}
	}

	.ribbons {
	top: 49px;
	right: -50px;
	width: 200px;
	position: fixed;
	transform: rotate(45deg);
	background-color: #e00;
	}

	.ribbons-inner {
	color: #fff;
	margin: 2px;
	display: block;
	border: 2px dotted #eee;
	}

	</style>
	</head>
	<body>
	<h1 id="title" >MaoYan Toolbox</h1>
	<p id="description" ></p>
	<nav>
	<ul id="tab" class="nav" >
	<li><a href="#app">功能1</a></li>
	<li><a href="#webview">功能2</a></li>
	</ul>
	</nav>
	<input id='txt-input' type="text" placeholder="Put your link here">
	<img id='img-qrcode' />
	<textarea id="txt-output" name="name" rows="8" cols="40" readonly ></textarea>

	<div class="ribbons">
	<a class="ribbons-inner" href="https://github.com/myfe" >MYFE</a>
	</div>

	<footer>
	<p>Author by<a href="http://wiki.sankuai.com/display/~liusong02"> 刘松(liusong02)</a></p>
	Copyright (c) 2016 <a href="https://m.maoyan.com" >MAOYAN</a> Copyright Holder All Rights Reserved.
	</footer>
	</body>
	<script>
	;(function fn(){
	'use strict';

	window.addEventListener('hashchange', fn);

	var lnkApp = ({
	'#app' : {
	title : 'Open App or Download',
	description : '「调起应用并到达指定页面，如果没有安装则下载」',
	url : 'http://m.maoyan.com/app?_v_=yes&to=',
	placeholder : 'Put native app link here, eg: imeituan://'
	},
	'#webview' : {
	title : 'Open Link in Webview or Direct',
	description : '「打开链接，如果在应用内则在新的Webview中打开」',
	url : 'http://m.maoyan.com/redirect/webview?_v_=yes&to=',
	placeholder : 'Put web link here, eg: http://'
	}
	})[ location.hash ];

	if(!lnkApp) {
	location.hash = '#app';
	return;
	}

	var el = document.querySelector('a[href="' + location.hash + '"]');
	if(el) {
	el = el.parentNode;
	[].slice.call(document.querySelectorAll('ul.nav > li.active')).forEach(function(li){
	li.className = '';
	});
	el.className = 'active';
	}

	var title = document.getElementById('title');
	var description = document.getElementById('description');

	var txtInput = document.getElementById('txt-input');
	var txtOutput = document.getElementById('txt-output');
	var imgQRCode = document.getElementById('img-qrcode');

	title.innerText = lnkApp.title;
	description.innerText = lnkApp.description;
	txtInput.placeholder = lnkApp.placeholder;

	txtInput.addEventListener('keyup', function(ev){
	txtOutput.value = [ lnkApp.url, encodeURIComponent(txtInput.value) ].join('');
	imgQRCode.src = 'https://api.lsong.org/qr?text=' + encodeURIComponent(txtOutput.value);
	});

	txtOutput.addEventListener('click', function(ev){
	txtOutput.select();
	});

	})();
	</script>
	</html>