forked from tonsky/rum
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (85 loc) · 21.6 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
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=UTF-8'/>
<title>Rum test page</title>
<link href='http://cloud.webtype.com/css/34a9dbc8-2766-4967-a61f-35675306f239.css' rel='stylesheet' type='text/css' />
<style>
* { box-sizing: border-box; vertical-align: top; text-rendering: optimizelegibility; }
tr, td, table, tbody { padding: 0; margin: 0; border-collapse: collapse; }
body, input, button { font: 16px/20px 'Input Sans Narr', 'Input Sans Narrow', sans-serif;}
.example { border: 2px solid #ccc; border-radius: 2px; padding: 20px; width: 300px; display: inline-block; height: 260px; margin: 10px 5px; line-height: 28px; }
.example-title { border-bottom: 1px solid #ccc; margin: -4px 0 20px; line-height: 30px; }
dt { width: 82px; float: left; }
dt, dd { vertical-align: bottom; line-height: 36px }
input { padding: 6px 6px 2px; border: 1px solid #CCC; }
input:focus { outline: 2px solid #a3ccf7; }
.bclock { margin: -6px 0 0 -4px; }
.bclock td, .bclock th { height: 25px; font-size: 12px; font-weight: normal; }
.bclock th { width: 10px; }
.bclock td { width: 25px; border: 4px solid white; }
.bclock-bit { background-color: #EEE; }
.bclock .stats { text-align: left; padding-left: 8px; }
.artboard { -webkit-user-select: none; line-height: 10px; }
.art-cell { width: 12px; height: 12px; margin: 0 1px 1px 0; display: inline-block; background-color: #EEE; }
.artboard .stats { font-size: 12px; line-height: 14px; margin-top: 8px; }
</style>
</head>
<body>
<div class=example>
<div class=example-title>Timers</div>
<div id=timer-static><div data-reactroot="" data-reactid="1" data-react-checksum="45825312"><!-- react-text: 2 -->Static<!-- /react-text --><!-- react-text: 3 -->: <!-- /react-text --><span style="color:#FA8D97;" data-reactid="4">00:00:00.000</span></div></div>
<div id=timer-reactive><div data-reactroot="" data-reactid="1" data-react-checksum="-1872416242"><!-- react-text: 2 -->Reactive: <!-- /react-text --><span style="color:#FA8D97;" data-reactid="3">00:00:00.000</span></div></div>
</div>
<div class=example>
<div class=example-title>Controls</div>
<div id=controls><dl data-reactroot="" data-reactid="1" data-react-checksum="-948899190"><dt data-reactid="2">Color: </dt><dd data-reactid="3"><input type="text" value="#FA8D97" style="width:100px;" data-reactid="4"/></dd><dt data-reactid="5">Clone: </dt><dd data-reactid="6"><input type="text" value="#FA8D97" style="width:100px;" data-reactid="7"/></dd><dt data-reactid="8">Color: </dt><dd data-reactid="9"><span data-reactid="10">0</span><!-- react-text: 11 --> watches<!-- /react-text --></dd><dt data-reactid="12">Tick: </dt><dd data-reactid="13"><input type="text" value="167" style="width:100px;" data-reactid="14"/><!-- react-text: 15 --> ms<!-- /react-text --></dd><dt data-reactid="16">Time:</dt><dd data-reactid="17"><span data-reactid="18">0</span><!-- react-text: 19 --> watches<!-- /react-text --></dd></dl></div>
</div>
<div class=example>
<div class=example-title>Reactive binary clock</div>
<div id=binary-clock><table class="bclock" data-reactroot="" data-reactid="1" data-react-checksum="1469275114"><tbody data-reactid="2"><tr data-reactid="3"><td data-reactid="4"></td><td class="bclock-bit" data-reactid="5"></td><th data-reactid="6"></th><td data-reactid="7"></td><td class="bclock-bit" data-reactid="8"></td><th data-reactid="9"></th><td data-reactid="10"></td><td class="bclock-bit" data-reactid="11"></td><th data-reactid="12"></th><td class="bclock-bit" data-reactid="13"></td><td class="bclock-bit" data-reactid="14"></td><td class="bclock-bit" data-reactid="15"></td></tr><tr data-reactid="16"><td data-reactid="17"></td><td class="bclock-bit" data-reactid="18"></td><th data-reactid="19"></th><td class="bclock-bit" data-reactid="20"></td><td class="bclock-bit" data-reactid="21"></td><th data-reactid="22"></th><td class="bclock-bit" data-reactid="23"></td><td class="bclock-bit" data-reactid="24"></td><th data-reactid="25"></th><td class="bclock-bit" data-reactid="26"></td><td class="bclock-bit" data-reactid="27"></td><td class="bclock-bit" data-reactid="28"></td></tr><tr data-reactid="29"><td class="bclock-bit" data-reactid="30"></td><td class="bclock-bit" data-reactid="31"></td><th data-reactid="32"></th><td class="bclock-bit" data-reactid="33"></td><td class="bclock-bit" data-reactid="34"></td><th data-reactid="35"></th><td class="bclock-bit" data-reactid="36"></td><td class="bclock-bit" data-reactid="37"></td><th data-reactid="38"></th><td class="bclock-bit" data-reactid="39"></td><td class="bclock-bit" data-reactid="40"></td><td class="bclock-bit" data-reactid="41"></td></tr><tr data-reactid="42"><td class="bclock-bit" data-reactid="43"></td><td class="bclock-bit" data-reactid="44"></td><th data-reactid="45"></th><td class="bclock-bit" data-reactid="46"></td><td class="bclock-bit" data-reactid="47"></td><th data-reactid="48"></th><td class="bclock-bit" data-reactid="49"></td><td class="bclock-bit" data-reactid="50"></td><th data-reactid="51"></th><td class="bclock-bit" data-reactid="52"></td><td class="bclock-bit" data-reactid="53"></td><td class="bclock-bit" data-reactid="54"></td></tr><tr data-reactid="55"><th data-reactid="56">0</th><th data-reactid="57">0</th><th data-reactid="58"></th><th data-reactid="59">0</th><th data-reactid="60">0</th><th data-reactid="61"></th><th data-reactid="62">0</th><th data-reactid="63">0</th><th data-reactid="64"></th><th data-reactid="65">0</th><th data-reactid="66">0</th><th data-reactid="67">0</th></tr><tr data-reactid="68"><th colspan="8" data-reactid="69"><div class="stats" data-reactid="70"><!-- react-text: 71 -->Renders: <!-- /react-text --><!-- react-text: 72 -->32<!-- /react-text --></div></th></tr></tbody></table></div>
</div>
<div class=example>
<div class=example-title>Reactive artboard</div>
<div id=board-reactive><div class="artboard" data-reactroot="" data-reactid="1" data-react-checksum="1285898880"><div class="art-row" data-reactid="2"><div class="art-cell" data-reactid="3"></div><div class="art-cell" data-reactid="4"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="5"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="6"></div><div class="art-cell" data-reactid="7"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="8"></div><div class="art-cell" data-reactid="9"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="10"></div><div class="art-cell" data-reactid="11"></div><div class="art-cell" data-reactid="12"></div><div class="art-cell" data-reactid="13"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="14"></div><div class="art-cell" data-reactid="15"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="16"></div><div class="art-cell" data-reactid="17"></div><div class="art-cell" data-reactid="18"></div><div class="art-cell" data-reactid="19"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="20"></div><div class="art-cell" data-reactid="21"></div></div><div class="art-row" data-reactid="22"><div style="background-color:#FA8D97;" class="art-cell" data-reactid="23"></div><div class="art-cell" data-reactid="24"></div><div class="art-cell" data-reactid="25"></div><div class="art-cell" data-reactid="26"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="27"></div><div class="art-cell" data-reactid="28"></div><div class="art-cell" data-reactid="29"></div><div class="art-cell" data-reactid="30"></div><div class="art-cell" data-reactid="31"></div><div class="art-cell" data-reactid="32"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="33"></div><div class="art-cell" data-reactid="34"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="35"></div><div class="art-cell" data-reactid="36"></div><div class="art-cell" data-reactid="37"></div><div class="art-cell" data-reactid="38"></div><div class="art-cell" data-reactid="39"></div><div class="art-cell" data-reactid="40"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="41"></div></div><div class="art-row" data-reactid="42"><div class="art-cell" data-reactid="43"></div><div class="art-cell" data-reactid="44"></div><div class="art-cell" data-reactid="45"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="46"></div><div class="art-cell" data-reactid="47"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="48"></div><div class="art-cell" data-reactid="49"></div><div class="art-cell" data-reactid="50"></div><div class="art-cell" data-reactid="51"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="52"></div><div class="art-cell" data-reactid="53"></div><div class="art-cell" data-reactid="54"></div><div class="art-cell" data-reactid="55"></div><div class="art-cell" data-reactid="56"></div><div class="art-cell" data-reactid="57"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="58"></div><div class="art-cell" data-reactid="59"></div><div class="art-cell" data-reactid="60"></div><div class="art-cell" data-reactid="61"></div></div><div class="art-row" data-reactid="62"><div class="art-cell" data-reactid="63"></div><div class="art-cell" data-reactid="64"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="65"></div><div class="art-cell" data-reactid="66"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="67"></div><div class="art-cell" data-reactid="68"></div><div class="art-cell" data-reactid="69"></div><div class="art-cell" data-reactid="70"></div><div class="art-cell" data-reactid="71"></div><div class="art-cell" data-reactid="72"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="73"></div><div class="art-cell" data-reactid="74"></div><div class="art-cell" data-reactid="75"></div><div class="art-cell" data-reactid="76"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="77"></div><div class="art-cell" data-reactid="78"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="79"></div><div class="art-cell" data-reactid="80"></div><div class="art-cell" data-reactid="81"></div></div><div class="art-row" data-reactid="82"><div class="art-cell" data-reactid="83"></div><div class="art-cell" data-reactid="84"></div><div class="art-cell" data-reactid="85"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="86"></div><div class="art-cell" data-reactid="87"></div><div class="art-cell" data-reactid="88"></div><div class="art-cell" data-reactid="89"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="90"></div><div class="art-cell" data-reactid="91"></div><div class="art-cell" data-reactid="92"></div><div class="art-cell" data-reactid="93"></div><div class="art-cell" data-reactid="94"></div><div class="art-cell" data-reactid="95"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="96"></div><div class="art-cell" data-reactid="97"></div><div class="art-cell" data-reactid="98"></div><div class="art-cell" data-reactid="99"></div><div class="art-cell" data-reactid="100"></div><div class="art-cell" data-reactid="101"></div></div><div class="art-row" data-reactid="102"><div class="art-cell" data-reactid="103"></div><div class="art-cell" data-reactid="104"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="105"></div><div class="art-cell" data-reactid="106"></div><div class="art-cell" data-reactid="107"></div><div class="art-cell" data-reactid="108"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="109"></div><div class="art-cell" data-reactid="110"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="111"></div><div class="art-cell" data-reactid="112"></div><div class="art-cell" data-reactid="113"></div><div class="art-cell" data-reactid="114"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="115"></div><div class="art-cell" data-reactid="116"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="117"></div><div class="art-cell" data-reactid="118"></div><div class="art-cell" data-reactid="119"></div><div class="art-cell" data-reactid="120"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="121"></div></div><div class="art-row" data-reactid="122"><div class="art-cell" data-reactid="123"></div><div class="art-cell" data-reactid="124"></div><div class="art-cell" data-reactid="125"></div><div class="art-cell" data-reactid="126"></div><div class="art-cell" data-reactid="127"></div><div class="art-cell" data-reactid="128"></div><div class="art-cell" data-reactid="129"></div><div class="art-cell" data-reactid="130"></div><div class="art-cell" data-reactid="131"></div><div class="art-cell" data-reactid="132"></div><div class="art-cell" data-reactid="133"></div><div class="art-cell" data-reactid="134"></div><div class="art-cell" data-reactid="135"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="136"></div><div class="art-cell" data-reactid="137"></div><div class="art-cell" data-reactid="138"></div><div class="art-cell" data-reactid="139"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="140"></div><div class="art-cell" data-reactid="141"></div></div><div class="art-row" data-reactid="142"><div class="art-cell" data-reactid="143"></div><div class="art-cell" data-reactid="144"></div><div class="art-cell" data-reactid="145"></div><div class="art-cell" data-reactid="146"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="147"></div><div class="art-cell" data-reactid="148"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="149"></div><div class="art-cell" data-reactid="150"></div><div class="art-cell" data-reactid="151"></div><div class="art-cell" data-reactid="152"></div><div class="art-cell" data-reactid="153"></div><div class="art-cell" data-reactid="154"></div><div class="art-cell" data-reactid="155"></div><div class="art-cell" data-reactid="156"></div><div class="art-cell" data-reactid="157"></div><div class="art-cell" data-reactid="158"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="159"></div><div class="art-cell" data-reactid="160"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="161"></div></div><div class="art-row" data-reactid="162"><div class="art-cell" data-reactid="163"></div><div class="art-cell" data-reactid="164"></div><div class="art-cell" data-reactid="165"></div><div class="art-cell" data-reactid="166"></div><div class="art-cell" data-reactid="167"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="168"></div><div class="art-cell" data-reactid="169"></div><div class="art-cell" data-reactid="170"></div><div class="art-cell" data-reactid="171"></div><div class="art-cell" data-reactid="172"></div><div class="art-cell" data-reactid="173"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="174"></div><div class="art-cell" data-reactid="175"></div><div class="art-cell" data-reactid="176"></div><div class="art-cell" data-reactid="177"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="178"></div><div class="art-cell" data-reactid="179"></div><div class="art-cell" data-reactid="180"></div><div class="art-cell" data-reactid="181"></div></div><div class="art-row" data-reactid="182"><div class="art-cell" data-reactid="183"></div><div class="art-cell" data-reactid="184"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="185"></div><div class="art-cell" data-reactid="186"></div><div class="art-cell" data-reactid="187"></div><div class="art-cell" data-reactid="188"></div><div class="art-cell" data-reactid="189"></div><div class="art-cell" data-reactid="190"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="191"></div><div class="art-cell" data-reactid="192"></div><div style="background-color:#FA8D97;" class="art-cell" data-reactid="193"></div><div class="art-cell" data-reactid="194"></div><div class="art-cell" data-reactid="195"></div><div class="art-cell" data-reactid="196"></div><div class="art-cell" data-reactid="197"></div><div class="art-cell" data-reactid="198"></div><div class="art-cell" data-reactid="199"></div><div class="art-cell" data-reactid="200"></div><div class="art-cell" data-reactid="201"></div></div><div class="stats" data-reactid="202"><!-- react-text: 203 -->Renders: <!-- /react-text --><!-- react-text: 204 -->0<!-- /react-text --><br data-reactid="205"/><!-- react-text: 206 -->Board watches: <!-- /react-text --><span data-reactid="207">0</span><br data-reactid="208"/><!-- react-text: 209 -->Color watches: <!-- /react-text --><span data-reactid="210">0</span></div></div></div>
</div>
<div class=example>
<div class=example-title>BMI Calculator</div>
<div id=bmi-calculator><div class="bmi" data-reactroot="" data-reactid="1" data-react-checksum="-1811871164"><div data-reactid="2"><!-- react-text: 3 -->Height: <!-- /react-text --><!-- react-text: 4 -->180<!-- /react-text --><!-- react-text: 5 -->cm<!-- /react-text --><input type="range" value="180" min="100" max="220" style="width:100%;" data-reactid="6"/></div><div data-reactid="7"><!-- react-text: 8 -->Weight: <!-- /react-text --><!-- react-text: 9 -->80<!-- /react-text --><!-- react-text: 10 -->kg<!-- /react-text --><input type="range" value="80" min="30" max="150" style="width:100%;" data-reactid="11"/></div><div data-reactid="12"><!-- react-text: 13 -->BMI: <!-- /react-text --><!-- react-text: 14 -->24<!-- /react-text --><!-- react-text: 15 --> <!-- /react-text --><span style="color:inherit;" data-reactid="16">normal</span><input type="range" value="24" min="10" max="50" style="width:100%;" data-reactid="17"/></div></div></div>
</div>
<div class=example>
<div class=example-title>Form validation</div>
<div id=form-validation></div>
</div>
<div class=example>
<div class=example-title>Inputs</div>
<div id=inputs><dl data-reactroot="" data-reactid="1" data-react-checksum="-128412419"><dt data-reactid="2">Input</dt><dd data-reactid="3"><input type="text" style="width:170px;" data-reactid="4"/></dd><dt data-reactid="5">Checks</dt><dd data-reactid="6"><div data-reactid="7"><input type="checkbox" value="1" data-reactid="8"/><input type="checkbox" value="2" data-reactid="9"/><input type="checkbox" value="3" data-reactid="10"/><input type="checkbox" value="4" data-reactid="11"/></div></dd><dt data-reactid="12">Radio</dt><dd data-reactid="13"><div data-reactid="14"><input type="radio" name="inputs_radio" value="1" data-reactid="15"/><input type="radio" name="inputs_radio" value="2" data-reactid="16"/><input type="radio" name="inputs_radio" value="3" data-reactid="17"/><input type="radio" name="inputs_radio" value="4" data-reactid="18"/></div></dd><dt data-reactid="19">Select</dt><dd data-reactid="20"><select data-reactid="21"><option value="1" data-reactid="22">1</option><option value="2" data-reactid="23">2</option><option value="3" data-reactid="24">3</option><option value="4" data-reactid="25">4</option></select></dd><dt data-reactid="26"><code data-reactid="27">nil</code></dt><dd data-reactid="28"><button data-reactid="29">Next value</button></dd></dl></div>
</div>
<div class=example>
<div class=example-title>Refs</div>
<div id=refs><div data-reactroot="" data-reactid="1" data-react-checksum="-207795000"><textarea style="width:100%;padding:10px;font:inherit;outline:none;resize:none;" placeholder="Auto-resizing textarea" data-reactid="2">Auto-resizing
textarea</textarea></div></div>
</div>
<div class=example>
<div class=example-title>Local state</div>
<div id=local-state><div style="-webkit-user-select:none;cursor:pointer;" data-reactroot="" data-reactid="1" data-react-checksum="2012564081"><!-- react-text: 2 -->Clicks count<!-- /react-text --><!-- react-text: 3 -->: <!-- /react-text --><!-- react-text: 4 -->0<!-- /react-text --></div></div>
</div>
<div class=example>
<div class=example-title>Keys</div>
<div id=keys><div data-reactroot="" data-reactid="1" data-react-checksum="-1461176614"><div data-reactid="2">a-1</div><div data-reactid="3">a-2</div><div data-reactid="4">b-1</div><div data-reactid="5">a-1</div></div></div>
</div>
<div class=example>
<div class=example-title>Self-reference</div>
<div id=self-reference><div style="margin-left:0;" class="branch" data-reactroot="" data-reactid="1" data-react-checksum="-1228149812"><div style="margin-left:10px;" class="leaf" data-reactid="2">:a</div><div style="margin-left:10px;" class="branch" data-reactid="3"><div style="margin-left:20px;" class="leaf" data-reactid="4">:b</div><div style="margin-left:20px;" class="branch" data-reactid="5"><div style="margin-left:30px;" class="leaf" data-reactid="6">:c</div><div style="margin-left:30px;" class="leaf" data-reactid="7">:d</div><div style="margin-left:30px;" class="branch" data-reactid="8"><div style="margin-left:40px;" class="leaf" data-reactid="9">:e</div></div><div style="margin-left:30px;" class="leaf" data-reactid="10">:g</div></div></div></div></div>
</div>
<div class=example>
<div class=example-title>Contexts</div>
<div id=context></div>
</div>
<div class=example>
<div class=example-title>Custom Methods and Data</div>
<div id=custom-props></div>
</div>
<script src='target/main.js' type='text/javascript'></script>
</body>
</html>