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

DEMO

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

ThinkJS

Reveal.js CodeMirror Mathjax PrismJS

Method-Draw js-sequence-diagrams ECharts

Theme Designer