tools/perf/page_sets/key_silk_cases/silk_finance.html

   1 <!DOCTYPE html>
   2
   3 <meta name="viewport" content="width=device-width, user-scalable=no">
   4
   5 <h1><b>silk</b> finance</h1>
   6 <h2>Live Quotes</h2>
   7 <sf-stock id="VVR">
   8     <sf-ticker>VVR</sf-ticker>
   9     <sf-companyname>Viverra Inc.</sf-companyname>
  10     <sf-quote>541.08</sf-quote>
  11     <sf-change positive>+0.77%</sf-change>
  12 </sf-stock>
  13 <sf-stock id="MSA">
  14     <sf-ticker>MSA</sf-ticker>
  15     <sf-companyname>Maecenas Sit Amet, Inc.</sf-companyname>
  16     <sf-quote>41.30</sf-quote>
  17     <sf-change positive>+3.52%</sf-change>
  18 </sf-stock>
  19 <sf-stock id="CRB">
  20     <sf-ticker>CRB</sf-ticker>
  21     <sf-companyname>Curabitur Corporation</sf-companyname>
  22     <sf-quote>214.36</sf-quote>
  23     <sf-change positive>+0.09%</sf-change>
  24 </sf-stock>
  25 <sf-stock id="FGL.A">
  26     <sf-ticker>FGL.A</sf-ticker>
  27     <sf-companyname>Fringilla Labortis Inc.</sf-companyname>
  28     <sf-quote>2,411.00</sf-quote>
  29     <sf-change positive>+0.81%</sf-change>
  30 </sf-stock>
  31 <sf-stock id="RSUS">
  32     <sf-ticker>RSUS</sf-ticker>
  33     <sf-companyname>Risus Inc.</sf-companyname>
  34     <sf-quote>132.11</sf-quote>
  35     <sf-change negative>-0.67%</sf-change>
  36 </sf-stock>
  37 <sf-stock id="LBR">
  38     <sf-ticker>LBR</sf-ticker>
  39     <sf-companyname>Libero Neque Corporation</sf-companyname>
  40     <sf-quote>88.48</sf-quote>
  41     <sf-change negative>-0.22%</sf-change>
  42 </sf-stock>
  43 <sf-stock id="ADP">
  44     <sf-ticker>ADP</sf-ticker>
  45     <sf-companyname>Adipiscing</sf-companyname>
  46     <sf-quote>90.31</sf-quote>
  47     <sf-change negative>-0.41%</sf-change>
  48 </sf-stock>
  49 <sf-stock id="PM">
  50     <sf-ticker>PM</sf-ticker>
  51     <sf-companyname>Parturient Montes Company</sf-companyname>
  52     <sf-quote>39.30</sf-quote>
  53     <sf-change positive>+0.78%</sf-change>
  54 </sf-stock>
  55 <sf-stock id="U">
  56     <sf-ticker>U</sf-ticker>
  57     <sf-companyname>Ultrices Erat Company</sf-companyname>
  58     <sf-quote>14.99</sf-quote>
  59     <sf-change positive>+1.83%</sf-change>
  60 </sf-stock>
  61 <sf-stock id="CN">
  62     <sf-ticker>CN</sf-ticker>
  63     <sf-companyname>Commodo Nasectur Company</sf-companyname>
  64     <sf-quote>30.70</sf-quote>
  65     <sf-change negative>-0.39%</sf-change>
  66 </sf-stock>
  67 <sf-stock id="PLC">
  68     <sf-ticker>PLC</sf-ticker>
  69     <sf-companyname>Placerat Aptent Corporation</sf-companyname>
  70     <sf-quote>55.01</sf-quote>
  71     <sf-change negative>-0.18%</sf-change>
  72 </sf-stock>
  73 <sf-stock id="Q">
  74     <sf-ticker>Q</sf-ticker>
  75     <sf-companyname>FS-Q Inc.</sf-companyname>
  76     <sf-quote>78.44</sf-quote>
  77     <sf-change positive>+0.50%</sf-change>
  78 </sf-stock>
  79 <sf-stock id="DDF">
  80     <sf-ticker>DDF</sf-ticker>
  81     <sf-companyname>DDF Pretium Corp</sf-companyname>
  82     <sf-quote>60.28</sf-quote>
  83     <sf-change positive>+0.89%</sf-change>
  84 </sf-stock>
  85 <sf-stock id="ESVA">
  86     <sf-ticker>ESVA</sf-ticker>
  87     <sf-companyname>Efficitur Scelerisque Venenatis Association (Effisoc)</sf-companyname>
  88     <sf-quote>1.70</sf-quote>
  89     <sf-change negative>-4.11%</sf-change>
  90 </sf-stock>
  91 <sf-stock id="HDV">
  92     <sf-ticker>HDV</sf-ticker>
  93     <sf-companyname>HendreritVivamus Group Inc.</sf-companyname>
  94     <sf-quote>91.10</sf-quote>
  95     <sf-change positive>+2.33%</sf-change>
  96 </sf-stock>
  97 <h2>Recent Financial News</h2>
  98 <h3>DDF Pretium (KSE:DDF), Fringilla Labortis (KSE:FGL.A) Praesent Placerate $3M</h3>
  99 <p>DIAM LACINIA - Nulla euismod lacus vel rutrum finibus. Proin dapibus lorem nec lacus porttitor, ut pretium metus vestibulum. Curabitur a venenatis ante. Duis placerat ante vel ipsum tincidunt, quis maximus libero sodales. Mauris et ex enim. Nam tempus dui ac mauris congue mattirs.</p>
 100 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo ac massa in auctor. Pellentesque id posuere ligula. Suspendisse venenatis tortor sit amet mollis vehicula. Aenean pellentesque lacinia nunc, sed auctor nisi dictum a. Duis fermentum ligula in sapien placerat, vitae laoreet massa bibendum. In luctus nibh quis pretium maximus. Pellentesque at ex aliquam, bibendum lectus ac, viverra mi. Aliquam pellentesque massa in ullamcorper rhoncus. Ut at felis ac turpis dictum eleifend. Duis congue tristique ligula.</p>
 101 <p>Donec et lacus ultrices, efficitur risus vel, commodo velit. Donec magna quam, rutrum ac augue sed, aliquet fermentum elit. Duis neque neque, efficitur vitae dictum varius, pharetra pretium est. Mauris condimentum lacinia maximus. Quisque interdum ligula non arcu aliquam, sit amet congue lectus congue. Pellentesque bibendum placerat diam vitae volutpat. Aliquam sit amet euismod ex. Sed id odio tempor, venenatis dui eu, tempor sem. Vestibulum sed tempor leo. Fusce rutrum libero pulvinar tellus semper, at fringilla mi molestie. Proin tempor, tortor id sodales lacinia, enim nisi eleifend enim, sit amet scelerisque est ipsum ac odio. Pellentesque venenatis nisi ex, at lobortis quam aliquam quis. Duis viverra, purus eget pretium dignissim, mi est dapibus sapien, quis rutrum sem lorem et tortor. Donec cursus enim id felis ultricies, sit amet consectetur arcu sagittis. Donec ut vestibulum nisi, quis aliquam erat.</p>
 102 <p>Vivamus imperdiet hendrerit scelerisque. Maecenas sit amet erat in diam lacinia eleifend at nec diam. Praesent placerat massa nec risus lacinia commodo. Morbi scelerisque enim at diam fringilla luctus. Cras feugiat finibus pharetra. Proin feugiat, libero sit amet faucibus egestas, arcu orci egestas turpis, non maximus purus purus non dolor. Nunc magna orci, rutrum at ante et, ultricies semper nulla. Nulla nunc purus, iaculis id pretium non, ullamcorper ac mauris.</p>
 103 <h3>Vitae Nibh Saggtis Sed Vitae Ultrices (KSE:U) Tellus</h3>
 104 <p>TEMPUS - Sed in sapien cursus "diam luctus" iaculis. Sed id ullamcorper massa, id auctor massa. Donec maximus quam non condimentum mollis. Nulla ex uma, pulvinar id ex sit amet, accumsan porttitor metus.</p>
 105 <p>Maecenas ac lorem eu turpis elementum placerat. Sed vitae massa vitae nibh sagittis luctus. In tempus venenatis elit sit amet aliquet. Nunc imperdiet in purus sit amet gravida. Maecenas non malesuada magna. Suspendisse potenti. Nullam euismod, purus eu consequat porttitor, arcu ante fringilla nisi, eu suscipit orci ex id odio. Nulla vestibulum metus id metus porttitor tincidunt. Curabitur aliquam risus sit amet suscipit tincidunt.</p>
 106 <p>Sed at quam sed tellus viverra viverra. Duis fringilla ipsum nec placerat pretium. Curabitur laoreet lobortis lobortis. Sed a libero neque. Proin vel pulvinar lorem, a molestie justo. Aenean nibh metus, varius ac auctor vel, gravida eu diam. Duis finibus sodales risus, auctor ullamcorper justo elementum ac. Suspendisse purus mi, elementum eget dui sed, elementum tempus velit. Duis ex diam, lacinia id porta dignissim, accumsan at sem. Cras fermentum ornare massa in accumsan. Fusce aliquam mauris ac leo dignissim ultrices.</p>
 107 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec molestie odio arcu. Proin tempus faucibus nunc, ac viverra turpis tristique eget. Etiam quis ullamcorper nisl. Praesent sapien lorem, tempor ut purus eu, posuere feugiat quam. Quisque sit amet ex vel nisl pharetra maximus quis in lectus. Cras vel aliquam risus. Nam aliquam leo at neque vehicula, et hendrerit ipsum interdum. Mauris suscipit lobortis mauris a porttitor. Donec nisl ante, eleifend at sapien commodo, scelerisque blandit eros.</p>
 108
 109
 110 <style>
 111 html, body {
 112     font: 14px Arial;
 113     margin: 0;
 114 }
 115
 116 h1 {
 117     background-color: #259b24;
 118     color: white;
 119     font-size: 18px;
 120     font-weight: normal;
 121     margin: 0;
 122     padding: 10px;
 123 }
 124
 125 h2 {
 126     background-color: #0a7e07;
 127     color: white;
 128     font-size: 12px;
 129     font-weight: normal;
 130     margin: 0;
 131     padding: 5px 10px;
 132     text-transform: uppercase;
 133 }
 134
 135 sf-stock {
 136     display: flex;
 137     background: #f5f5f5;
 138     padding: 6px 0;
 139     border-bottom: 1px solid #e0e0e0;
 140 }
 141
 142 sf-stock > * {
 143     display: inline-block;
 144     padding: 0 10px;
 145     min-width: 60px;
 146 }
 147
 148 sf-companyname { flex: 1; }
 149 sf-quote, sf-change { text-align: right; }
 150 sf-change[positive] { color: #259b24;}
 151 sf-change[negative] { color: #e51c23; }
 152
 153 h3, p {
 154     margin: 10px;
 155     padding: 0;
 156 }
 157 </style>
 158 <script>
 159 var animationScript = [
 160     /* [ticker, highlightColor, newQuote, newChange], */
 161     ['LBR', '#72d572', '88.71', '-0.20%'],
 162     ['CRB', '#f69988', '214.33', '+0.08%'],
 163     ['LBR', '#f69988', '88.48', '-0.22%'],
 164     ['CRB', '#72d572', '214.36', '+0.09%'],
 165 ];
 166
 167 function updateStock(id, color, newQuote, newChange) {
 168     return new Promise(function(resolve, reject) {
 169         var element = document.getElementById(id);
 170         function onTransitionEnd() {
 171             element.removeEventListener(element, onTransitionEnd);
 172             resolve();
 173         }
 174         element.querySelector('sf-quote').textContent = newQuote;
 175         element.querySelector('sf-change').textContent = newChange;
 176         element.style.transition = '';
 177         element.style.backgroundColor = color;
 178         setTimeout(function() {
 179             element.style.transition = 'background-color 1000ms ease-out';
 180             element.style.backgroundColor = '';
 181             element.addEventListener('webkitTransitionEnd', onTransitionEnd);
 182         }, 0);
 183     });
 184 }
 185
 186 function animate() {
 187     var promise = Promise.resolve();
 188     animationScript.forEach(function(args) {
 189         promise = promise.then(Function.prototype.bind.apply(updateStock, [this].concat(args)));
 190     });
 191     return promise.then(animate);
 192 }
 193 window.onload = animate;
 194 </script>