-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
95 lines (86 loc) · 4.05 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="author" content="Manfred Kaul">
<meta name="description" content="ccm web component">
<meta name="keywords" content="ccm,HTML,CSS,JavaScript,web-components">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ccm components M.Kaul</title>
<style>
* {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
border: thin solid black;
margin: 1em;
padding: 1em;
background-color: darkgray;
color: white;
}
ul {
border: thin solid black;
border-radius: 2em;
margin: 1.5em;
padding: 1em;
background-color: lightgrey;
}
li {
margin-left: 1em;
font-size: 1.2em;
line-height: 1.3em;
}
ccm-clock {
float: right;
margin-right: 2em;
}
</style>
<script src="https://ccmjs.github.io/mkaul-components/clock/ccm.clock.js"></script>
<ccm-clock></ccm-clock>
<h1>Demos of <i>ccm</i> components developed by Manfred Kaul</h1>
<p>All software MIT license available via <a target="_blank" rel="noopener" href="https://github.com/ccmjs/mkaul-components">GitHub Repo</a></p>
<h2>HTML based <i>ccm</i> components</h2>
<ul>
<li><a href="cryptoblock">Cryptoblock (<i>Blockchain Demo</i>)</a>
<li><a href="digital_clock">Digital Clock</a>
<li><a href="exercise">Exercise</a>
<li><a href="fast_poll">Fast Poll</a>
<li><a href="form">HTML form</a>
<li><a href="game_chooser">Game for rapidly choosing between two options</a>
<li><a href="group_team">Grouping teams</a>
<li><a href="highlight">Highlight</a>
<li><a href="loader">Explicit Loader for <i>ccm</i> components</a>
<li><a href="parkhaus">Simulation for a parking garage</a>
<li><a href="regex">Regex Simulator and Tester</a>
<li><a href="router">Router for windows.location</a>
<li><a href="show_solutions">Student View on all solutions: Checkbox for showing all solutions</a>
<li><a href="solutions_view">Teacher View on all solutions</a>
<li><a href="upload">Upload</a>
<li><a href="wikipedia_search">Wikipedia Search using Wikipedia API for autocompletion using <a target="_blank" rel="noopener" href="https://github.com/Reactive-Extensions/RxJS">Reactive-Extensions/RxJS</a></a>
</ul>
<h2>SVG based <i>ccm</i> components</h2>
<ul>
<li><a href="clock">Analog Clock</a>
<li><a href="connect4">Connect 4 Game (<i>"4 gewinnt!"</i>)</a>
<li><a href="d3_bar_chart">Bar Chart based on <a target="_blank" rel="noopener" href="https://d3js.org/">d3.js</a> library</a>
<li><a href="d3_donut">Donut Chart based on <a target="_blank" rel="noopener" href="https://d3js.org/">d3.js</a> library</a>
<li><a href="difference_chart">Difference Chart</a>
<li><a href="histogram">Histogram Chart</a>
<li><a href="plotly">Plotly</a>
<li><a href="radar_chart">Radar Chart</a>
<li><a href="tetris">Tetris</a>
</ul>
<h2>WebGL based <i>ccm</i> components</h2>
<ul>
<li><a href="webgl_three_js">WebGL based <i>ccm</i> component using three.js library</a>
</ul>
<h2><i>ccm</i> connectors and adapters</h2>
<ul>
<li><a href="fine_upload">fine_upload</a> adapting <a target="_blank" rel="noopener" href="https://fineuploader.com/">fine uploader</a>
<li><a href="g_pie_chart">pie_chart</a> adapting <a target="_blank" rel="noopener" href="https://developers.google.com/chart/interactive/docs/gallery/piechart">Google Pie Chart</a>
<li><a href="geogebra">geogebra</a> adapting <a target="_blank" rel="noopener" href="https://www.geogebra.org/">Geogebra</a>
<li><a href="learning_app">learning_app</a> adapting <a target="_blank" rel="noopener" href="https://learningapps.org/">learningapps.org</a>
<li><a href="uml">UML Web Editor and Web Visualizer</a> based on <a target="_blank" rel="noopener" href="http://plantuml.com/">plantuml</a>
</ul>
<h2>Einführung in Digital Maker Space (<i>DMS</i>)</h2>
<video controls width="100%" height="auto">
<source src="https://akless.github.io/akless/dms/DMS-Kurzbeschreibung.mp4" type="video/mp4">
</video>