Design for trust

.wrap = container (width: 90%) with fadein

` {.aligncenter} Optional · 500+ icons {.text-subtitle} ## [:fa-flag: Font Awesome](http://fontawesome.io/icons/) as **SVG icons** {.animated.bounceIn} ```markdown :fa-flag: ``` ## Quote > I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers. > ==Zaha Hadid== > {.text-quote} :::div {.content-right} > "There is something only a CEO uniquely can do, which is set that tone, which can then capture the soul of the collective." > ==Satya Nadella, CEO of Microsoft.== ::: :::card {.quote} ![](https://webslides.tv/static/images/davinci.png) --- > “WebSlides helped us build a culture of innovation and excellence.” > ==Leonardo da Vinci== ## Plugins ## echarts {.aligncenter} ```echarts {style="height:100%;width:100%;"} { tooltip: { trigger: 'item', formatter: "{a}
{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他'] }, series: [ { name:'访问来源', type:'pie', selectedMode: 'single', radius: [0, '30%'], label: { normal: { position: 'inner' } }, labelLine: { normal: { show: false } }, data:[ {value:335, name:'直达', selected:true}, {value:679, name:'营销广告'}, {value:1548, name:'搜索引擎'} ] }, { name:'访问来源', type:'pie', radius: ['40%', '55%'], label: { normal: { formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ', backgroundColor: '#eee', borderColor: '#aaa', borderWidth: 1, borderRadius: 4, // shadowBlur:3, // shadowOffsetX: 2, // shadowOffsetY: 2, // shadowColor: '#999', // padding: [0, 7], rich: { a: { color: '#999', lineHeight: 22, align: 'center' }, // abg: { // backgroundColor: '#333', // width: '100%', // align: 'right', // height: 22, // borderRadius: [4, 4, 0, 0] // }, hr: { borderColor: '#aaa', width: '100%', borderWidth: 0.5, height: 0 }, b: { fontSize: 16, lineHeight: 33 }, per: { color: '#eee', backgroundColor: '#334455', padding: [2, 4], borderRadius: 2 } } } }, data:[ {value:335, name:'直达'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1048, name:'百度'}, {value:251, name:'谷歌'}, {value:147, name:'必应'}, {value:102, name:'其他'} ] } ] } ``` ## Plugins: mermaid ## Basic sequence diagram {.aligncenter} ```mermaid sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you? ``` ## Message to self in loop {.aligncenter} ```mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ``` ## Gantt {.aligncenter} ```mermaid gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h ``` ## Flowchart support for fontawesome {.aligncenter} ```mermaid graph TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); B-->E(A fa:fa-camera-retro perhaps?); ``` ## Plugins: KaTex ## KaTex {.aligncenter} | equation | description | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero | | $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ | | $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ | ## Others ::: {.content-left} ## Button [.button](){.button} [.button.radius](){.button.radius} [.button.ghost](){.button.ghost} [:fa-github: svg-icon](){.button} ::: ::: {.content-left} ## Avatar ![](https://avatars2.githubusercontent.com/u/1073262?s=40&v=4){.avatar-40} ![](https://avatars2.githubusercontent.com/u/1073262?s=40&v=4){.avatar-48} ![](https://avatars2.githubusercontent.com/u/1073262?s=40&v=4){.avatar-56} ![](https://avatars2.githubusercontent.com/u/1073262?s=40&v=4){.avatar-64} ![](https://avatars2.githubusercontent.com/u/1073262?s=40&v=4){.avatar-72} ![](https://avatars2.githubusercontent.com/u/1073262?s=40&v=4){.avatar-80} (80, 72, 64, 56, 48, and 40). ::: ## List ---- * Niubility！ * WebSlides * Webpack build in * Markdown-it * Posthtml * Prismjs ## Table | Left-aligned | Center-aligned | Right-aligned | | :----------- | :------------: | ------------: | | git status | git status | git status | | git diff | git diff | git diff | | git status | git status | git status | ## Speaker Mode Click **Url + [?mode=speaker](./?mode=speaker){.bg-primary style="font-size:120%"}** to show Speaker Mode. ## View More Demos? {.text-serif.aligncenter} \* \* \* {.text-symbols} ## U work so hard, **but** 干不过 write PPTs {.animated.tada} 快使用 [nodeppt](https://github.com/ksky521/nodeppt) 轻松搞定高大上 PPT
nodeppt 助力你的人生逆袭之路！ {.text-into.animated.delay-800.fadeIn} [:fa-cloud-download: Github](https://github.com/ksky521/nodeppt){.button.animated.delay-1s.fadeInUp}