Matrix
Allow you to create your own website to share your html5 slides to all users.
Based on reveal.js (The HTML Presentation Framework).
Quick start
installation
git clone https://github.com/akira-cn/matrix.git
cd matrix
npm install
start server
npm start
visit website
http://127.0.0.1:9360
administrator panel
http://127.0.0.1:9360/admin
- login user:
admin
- default password:
123456
demo
## Diagram
- [Grammar](https://bramp.github.io/js-sequence-diagrams/)
<!--.elements style="display:block;"-->
<div class="diagram" style="font-size:28px">
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
</div>
---
@echart,html
<h2>Chart <a href="http://echarts.baidu.com/">echarts</a></h2>
<script type="text/template">
option = {
title : {
text: 'Temperature',
subtext: 'in a week'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['Max','Min']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['MON','TUE','WED','THU','FRI','STA','SUN']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [
{
name:'Max',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {
data : [
{type : 'max', name: 'Max'},
{type : 'min', name: 'Min'}
]
},
markLine : {
data : [
{type : 'average', name: 'Aver'}
]
}
},
{
name:'Min',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : 'Week Min', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : 'Average'}
]
}
}
]
};
</script>
---
@stage:white
## Change Background <!--.elements style="color:black"-->
---
## Login to Admin
- http://matrix.qiwoo.org/admin
---
## More Features
Thanks
Reveal.js CodeMirror Mathjax PrismJS