|
|
| Line 2: |
Line 2: |
| | <html> | | <html> |
| | <style> | | <style> |
| − | $color-paid: #7fdbff;
| |
| − | $color-sent: #39cccc;
| |
| − |
| |
| − | body, html {
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | display: flex;
| |
| − | flex-direction: column;
| |
| − | justify-content: center;
| |
| − | align-items: center;
| |
| − | font-family: "fira-sans-2", Verdana, sans-serif;
| |
| − | }
| |
| − |
| |
| − | #q-graph {
| |
| − | display: block; /* fixes layout wonkiness in FF1.5 */
| |
| − | position: relative;
| |
| − | width: 600px;
| |
| − | height: 300px;
| |
| − | margin: 1.1em 0 0;
| |
| − | padding: 0;
| |
| − | background: transparent;
| |
| − | font-size: 11px;
| |
| − | }
| |
| − |
| |
| − | #q-graph caption {
| |
| − | caption-side: top;
| |
| − | width: 600px;
| |
| − | text-transform: uppercase;
| |
| − | letter-spacing: .5px;
| |
| − | top: -40px;
| |
| − | position: relative;
| |
| − | z-index: 10;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | #q-graph tr, #q-graph th, #q-graph td {
| |
| − | position: absolute;
| |
| − | bottom: 0;
| |
| − | width: 150px;
| |
| − | z-index: 2;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | #q-graph td {
| |
| − | transition: all .3s ease;
| |
| − |
| |
| − | &:hover {
| |
| − | background-color: desaturate(#85144b, 100);
| |
| − | opacity: .9;
| |
| − | color: white;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #q-graph thead tr {
| |
| − | left: 100%;
| |
| − | top: 50%;
| |
| − | bottom: auto;
| |
| − | margin: -2.5em 0 0 5em;}
| |
| − | #q-graph thead th {
| |
| − | width: 7.5em;
| |
| − | height: auto;
| |
| − | padding: 0.5em 1em;
| |
| − | }
| |
| − | #q-graph thead th.sent {
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | line-height: 2;
| |
| − | }
| |
| − | #q-graph thead th.paid {
| |
| − | top: 2.75em;
| |
| − | line-height: 2;
| |
| − | left: 0;
| |
| − | }
| |
| − |
| |
| − | #q-graph tbody tr {
| |
| − | height: 296px;
| |
| − | padding-top: 2px;
| |
| − | border-right: 1px dotted #C4C4C4;
| |
| − | color: #AAA;
| |
| − | }
| |
| − | #q-graph #q1 {
| |
| − | left: 0;
| |
| − | }
| |
| − | #q-graph #q2 {left: 150px;}
| |
| − | #q-graph #q3 {left: 300px;}
| |
| − | #q-graph #q4 {left: 450px; border-right: none;}
| |
| − | #q-graph tbody th {bottom: -1.75em; vertical-align: top;
| |
| − | font-weight: normal; color: #333;}
| |
| − | #q-graph .bar {
| |
| − | width: 60px;
| |
| − | border: 1px solid;
| |
| − | border-bottom: none;
| |
| − | color: #000;
| |
| − | }
| |
| − | #q-graph .bar p {
| |
| − | margin: 5px 0 0;
| |
| − | padding: 0;
| |
| − | opacity: .4;
| |
| − | }
| |
| − | #q-graph .sent {
| |
| − | left: 13px;
| |
| − | background-color: $color-sent;
| |
| − | border-color: transparent;
| |
| − | }
| |
| − | #q-graph .paid {
| |
| − | left: 77px;
| |
| − | background-color: $color-paid;
| |
| − | border-color: transparent;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #ticks {
| |
| − | position: relative;
| |
| − | top: -300px;
| |
| − | left: 2px;
| |
| − | width: 596px;
| |
| − | height: 300px;
| |
| − | z-index: 1;
| |
| − | margin-bottom: -300px;
| |
| − | font-size: 10px;
| |
| − | font-family: "fira-sans-2", Verdana, sans-serif;
| |
| − | }
| |
| − |
| |
| − | #ticks .tick {
| |
| − | position: relative;
| |
| − | border-bottom: 1px dotted #C4C4C4;
| |
| − | width: 600px;
| |
| − | }
| |
| − |
| |
| − | #ticks .tick p {
| |
| − | position: absolute;
| |
| − | left: -5em;
| |
| − | top: -0.8em;
| |
| − | margin: 0 0 0 0.5em;
| |
| − | }
| |
| − | VIEW COMPILED
| |
| | .myintro { | | .myintro { |
| | display: table; | | display: table; |
| Line 244: |
Line 104: |
| | <div class="col-lg-8 col-lg-offset-2"> | | <div class="col-lg-8 col-lg-offset-2"> |
| | <h2>Modeling.</h2> | | <h2>Modeling.</h2> |
| − | <p>Under construction...</p> | + | <p>Under construction... |
| − | <table id="q-graph"> | + | <canvas id="lineChart"></canvas></p> |
| − | <caption>Quarterly Results</caption>
| + | |
| − | <thead>
| + | |
| − | <tr>
| + | |
| − | <th></th>
| + | |
| − | <th class="sent">Invoiced</th>
| + | |
| − | <th class="paid">Collected</th>
| + | |
| − | </tr>
| + | |
| − | </thead>
| + | |
| − | <tbody>
| + | |
| − | <tr class="qtr" id="q1">
| + | |
| − | <th scope="row">Q1</th>
| + | |
| − | <td class="sent bar" style="height: 111px;"><p>$18,450.00</p></td>
| + | |
| − | <td class="paid bar" style="height: 99px;"><p>$16,500.00</p></td>
| + | |
| − | </tr>
| + | |
| − | <tr class="qtr" id="q2">
| + | |
| − | <th scope="row">Q2</th>
| + | |
| − | <td class="sent bar" style="height: 206px;"><p>$34,340.72</p></td>
| + | |
| − | <td class="paid bar" style="height: 194px;"><p>$32,340.72</p></td>
| + | |
| − | </tr>
| + | |
| − | <tr class="qtr" id="q3">
| + | |
| − | <th scope="row">Q3</th>
| + | |
| − | <td class="sent bar" style="height: 259px;"><p>$43,145.52</p></td>
| + | |
| − | <td class="paid bar" style="height: 193px;"><p>$32,225.52</p></td>
| + | |
| − | </tr>
| + | |
| − | <tr class="qtr" id="q4">
| + | |
| − | <th scope="row">Q4</th>
| + | |
| − | <td class="sent bar" style="height: 110px;"><p>$18,415.96</p></td>
| + | |
| − | <td class="paid bar" style="height: 195px;"><p>$32,425.00</p></td>
| + | |
| − | </tr>
| + | |
| − | </tbody>
| + | |
| − | </table>
| + | |
| | | | |
| − | <div id="ticks">
| |
| − | <div class="tick" style="height: 59px;"><p>$50,000</p></div>
| |
| − | <div class="tick" style="height: 59px;"><p>$40,000</p></div>
| |
| − | <div class="tick" style="height: 59px;"><p>$30,000</p></div>
| |
| − | <div class="tick" style="height: 59px;"><p>$20,000</p></div>
| |
| − | <div class="tick" style="height: 59px;"><p>$10,000</p></div>
| |
| − | </div>
| |
| | | | |
| | </div> | | </div> |
