motice
Version:
For Gnome / Growl type non-blocking notifications with Magical Css3 Effects
63 lines (50 loc) • 2.16 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="keywords" content="{{keywords|join(',')}}"/>
<meta name="description" content="{{description}}"/>
<meta name="author" content="{{author|raw}}"/>
<!-- Site Properities -->
<title>{{title}}</title>
<link rel="stylesheet" type="text/css" href="dist/semantic/semantic.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/style.css">
<script src="dist/jquery/dist/jquery.min.js"></script>
<script src="dist/semantic/semantic.min.js"></script>
<!--Motice-->
<link href="dist/css/{{name}}.css" rel="stylesheet" />
<!--/Motice-->
<style>
html,body{height:100%;}
body{background:#fff;position:relative;}
.vhc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.motice-container-center-top{top:10px;}
.motice-container-center-bottom{bottom:10px;}
</style>
</head>
<body id="home">
<!--Motice-->
<script src="dist/js/{{name}}.js"></script>
<!--/Motice-->
<script>
Motice({text:'左上',timeOut:0, theme:'info', width:'120px', position:'left-top'});
Motice({text:'右上',timeOut:0, theme:'info', width:'120px', position:'right-top'});
Motice({text:'上',timeOut:0, theme:'info', width:'120px', position:'center-top'});
Motice({text:'左下',timeOut:0, theme:'info', width:'120px', position:'left-bottom'});
Motice({text:'右下',timeOut:0, theme:'info', width:'120px', position:'right-bottom'});
Motice({text:'下',timeOut:0, theme:'info', width:'120px', position:'center-bottom'});
Motice({text:'中间',timeOut:0, theme:'warning', width:'120px', position:'center'});
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?{{baiduTJCode}}";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>