forked from tonsky/rum
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
2 lines (2 loc) · 14.2 KB
/
index.html
1
2
<html><head><meta http-equiv="content-type" content="text/html;charset=UTF-8"/><title>Rum test page</title><link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"/><style>*{box-sizing:border-box;vertical-align:top;text-rendering:optimizelegibility;}tr, td, table, tbody{padding:0px;margin:0px;border-collapse:collapse;}body, input, button{font:16px/20px 'Fira Code', 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:130px;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="">Static<!-- -->: <span style="color:#FA8D97">00:00:00.000</span></div></div><div id="timer-reactive"><div data-reactroot="">Reactive: <span style="color:#FA8D97">00:00:00.000</span></div></div></div><div class="example"><div class="example-title">Controls</div><div id="controls"><dl data-reactroot=""><dt>Color: </dt><dd><input type="text" value="#FA8D97" style="width:100px"/></dd><dt>Clone: </dt><dd><input type="text" value="#FA8D97" style="width:100px"/></dd><dt>Color: </dt><dd><span>0</span> watches</dd><dt>Tick: </dt><dd><input type="text" value="167" style="width:100px"/> ms</dd><dt>Time:</dt><dd><span>0</span> watches</dd></dl></div></div><div class="example"><div class="example-title">Reactive binary clock</div><div id="binary-clock"><table class="bclock" data-reactroot=""><tbody><tr><td></td><td class="bclock-bit"></td><th></th><td></td><td class="bclock-bit"></td><th></th><td></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><td></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><th></th><td class="bclock-bit"></td><td class="bclock-bit"></td><td class="bclock-bit"></td></tr><tr><th>0</th><th>0</th><th></th><th>0</th><th>0</th><th></th><th>0</th><th>0</th><th></th><th>0</th><th>0</th><th>0</th></tr><tr><th colSpan="8"><div class="stats">Renders: <!-- -->32</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=""><div class="art-row"><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div></div><div class="art-row"><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div></div><div class="art-row"><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div></div><div class="art-row"><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div></div><div class="art-row"><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div></div><div class="art-row"><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div></div><div class="art-row"><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div></div><div class="art-row"><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div></div><div class="art-row"><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div></div><div class="art-row"><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div style="background-color:#FA8D97" class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div><div class="art-cell"></div></div><div class="stats">Renders: <!-- -->0<br/>Board watches: <span>0</span><br/>Color watches: <span>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=""><div>Height: <!-- -->180<!-- -->cm<input type="range" value="180" min="100" max="220" style="width:100%"/></div><div>Weight: <!-- -->80<!-- -->kg<input type="range" value="80" min="30" max="150" style="width:100%"/></div><div>BMI: <!-- -->24<!-- --> <span style="color:inherit">normal</span><input type="range" value="24" min="10" max="50" style="width:100%"/></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=""><dt>Input</dt><dd><input type="text" value="1" style="width:170px"/></dd><dt>Checks</dt><dd><div><input type="checkbox" checked="" value="1"/><input type="checkbox" value="2"/><input type="checkbox" value="3"/><input type="checkbox" value="4"/></div></dd><dt>Radio</dt><dd><div><input type="radio" name="inputs_radio" checked="" value="1"/><input type="radio" name="inputs_radio" value="2"/><input type="radio" name="inputs_radio" value="3"/><input type="radio" name="inputs_radio" value="4"/></div></dd><dt>Select</dt><dd><select><option selected="" value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></dd><dt><code>1</code></dt><dd><button>Next value</button></dd></dl></div></div><div class="example"><div class="example-title">Refs</div><div id="refs"><div data-reactroot=""><textarea style="width:100%;padding:10px;font:inherit;outline:none;resize:none" placeholder="Auto-resizing textarea">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="">Clicks count<!-- -->: <!-- -->0</div></div></div><div class="example"><div class="example-title">Keys</div><div id="keys"><div data-reactroot=""><div>a-1</div><div>a-2</div><div>b-1</div><div>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=""><div style="margin-left:10px" class="leaf">:a</div><div style="margin-left:10px" class="branch"><div style="margin-left:20px" class="leaf">:b</div><div style="margin-left:20px" class="branch"><div style="margin-left:30px" class="leaf">:c</div><div style="margin-left:30px" class="leaf">:d</div><div style="margin-left:30px" class="branch"><div style="margin-left:40px" class="leaf">:e</div></div><div style="margin-left:30px" class="leaf">: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><div class="example"><div class="example-title">Multiple Return</div><div id="multiple-return"><ul data-reactroot=""><li>Item #0</li><li>Item #1</li><li>Item #2</li><li>Item #3</li><li>Item #4</li></ul></div></div><div class="example"><div class="example-title">Portals</div><div id="portal-off-root"></div><div id="portal-root"></div></div><div class="example"><div class="example-title">Error boundaries</div><p>Server: <span id="server-errors"><span data-reactroot=""><span>CAUGHT: <!-- -->clojure.lang.ExceptionInfo: render error {}</span></span></span></p><p>Client: <span id="client-errors"></span></p></div><div class="example"><div class="example-title">JavaScript components</div><div id="js-components"><div data-reactroot=""><h1>This is Rum component</h1><h2>This is JS component</h2></div></div></div><script src="target/main.js"></script></body></html>