diff options
Diffstat (limited to 'Volta')
| -rw-r--r-- | Volta/Resources/InfoGraphic/dollar.png | bin | 0 -> 11207 bytes | |||
| -rwxr-xr-x | Volta/Resources/InfoGraphic/index.html | 28 | ||||
| -rwxr-xr-x | Volta/Resources/InfoGraphic/main.css | 49 | ||||
| -rw-r--r-- | Volta/Resources/InfoGraphic/smog.png | bin | 0 -> 6686 bytes | |||
| -rw-r--r-- | Volta/Resources/InfoGraphic/tree.png | bin | 0 -> 6554 bytes | |||
| -rw-r--r-- | Volta/Resources/InfoGraphic/tv.png | bin | 0 -> 3632 bytes | |||
| -rw-r--r-- | Volta/Volta-Info.plist | 1 |
7 files changed, 63 insertions, 15 deletions
diff --git a/Volta/Resources/InfoGraphic/dollar.png b/Volta/Resources/InfoGraphic/dollar.png Binary files differnew file mode 100644 index 0000000..f904afc --- /dev/null +++ b/Volta/Resources/InfoGraphic/dollar.png diff --git a/Volta/Resources/InfoGraphic/index.html b/Volta/Resources/InfoGraphic/index.html index ee86d89..8be97ec 100755 --- a/Volta/Resources/InfoGraphic/index.html +++ b/Volta/Resources/InfoGraphic/index.html @@ -26,7 +26,11 @@ { // Update UI... - + console.log(totalkWh, totalCost) + document.getElementById("totalCost").innerHTML = totalCost; + document.getElementById("totalUsage").innerHTML = totalkWh; + document.getElementById("averageCost").innerHTML = Math.round(totalCost/30*100)/100; + document.getElementById("averageUsage").innerHTML = Math.round(totalkWh/30*100)/100; } @@ -42,7 +46,7 @@ <h2 class='lineHeight'><span id='totalUsage'>999</span> <span class='medium'>kWh</span></h2> <p>of energy</p> <hr class='yellow'/> - <h2>$<span id='totalCost'>99.99</span> $</h2> + <h2>$<span id='totalCost'>99.99</span></h2> <hr class='yellow'/> <p>This is on average</p> <h2><span id='averageUsage'>99.9</span> <span class='small'>kWh</span> <span class='small light'>or</span></h2> @@ -55,26 +59,34 @@ <div class="span4 green"> <p>Reduce your usage by only <span class='bold'>5%</span> and you could</p> <p class='save'>save</p> - <h2 class='bottomfix floatLeft'><span id='treeCount'>9.9</span> <span class='medium'>trees</span></h2> + <h2 class='bottomfix floatLeft'><span id='treeCount'>1.9</span> <span class='medium'>trees</span></h2> <div id='trees'></div> <div class='clearfix'></div> <hr class='green'/> <p class='subhead'>use a TV for</p> - <h2><span id='tvHours'>9.9</span> <span class='medium'>hours</span></h2> + <h2><span id='tvHours'>9.5</span> <span class='medium'>hours</span></h2> <div id='tvs'></div> <hr class='green'/> <p class='subhead'>save</p> - <h2><span id='gasCount'>2</span><span class='medium'>t of greenhouse gas</span></h2> + <h2><span id='gasCount'>3</span><span class='medium'>t of greenhouse gas</span></h2> <div id='factories'></div> <hr class='green'/> </div> <div class="span4"> - <p>Switching to Easymax by Enmax would save you an average of</p> - <h2>$<span id='monthlySavings'>99</span></h2> + <p class='enmax'>Switching to Easymax by Enmax would save you an average of</p> + <div class='floatLeft'> + <h2>$<span id='monthlySavings'>34</span></h2> <p>a month or</p> + </div> + <div id='monthlyDollar'></div> + <div class='clearfix'></div> <hr class='red'/> - <h2>$<span id='yearlySavings'>999</span></h2><p>a month or</p> + <div class='floatLeft'> + <h2>$<span id='yearlySavings'>408</span></h2><p>a month or</p> + </div> + <div id='yearlyDollar'></div> + <div class='clearfix'></div> <hr class='red'/> <p class='infolink'>Tap <a href="#">here</a> to get more information</p> </div> diff --git a/Volta/Resources/InfoGraphic/main.css b/Volta/Resources/InfoGraphic/main.css index 2ef3056..fff48db 100755 --- a/Volta/Resources/InfoGraphic/main.css +++ b/Volta/Resources/InfoGraphic/main.css @@ -26,29 +26,59 @@ hr { } #trees { + background-image: url('tree.png'); + background-size: 30px 35px; + display: inline-block; + margin-left: 10px; + margin-top: 10px; + height: 35px; + width: 50px; + +} + +#trees { + background-image: url('tree.png'); + background-size: 30px 35px; display: inline-block; margin-left: 10px; margin-top: 10px; height: 35px; width: 50px; - background-color: rgb(57, 181, 157); } #factories { + background-image: url('smog.png'); + background-size: 20px 20px; margin-bottom: 10px; margin-top: -10px; - width: 100%; + width: 260px; height: 20px; - background-color: rgb(57, 181, 157); } #tvs { + background-image: url('tv.png'); + background-size: 24px 20px; margin-bottom: 10px; margin-top: -10px; - width: 100%; + width: 180px; height: 20px; - background-color: rgb(57, 181, 157); +} + +#yearlyDollar { + background-image: url('dollar.png'); + background-size: 27px 50px; + float: right; + height: 50px; + width: 55px; +} + +#monthlyDollar { + background-image: url('dollar.png'); + background-size: 27px 50px; + float: right; + height: 50px; + width: 25px; } .lineHeight { @@ -99,7 +129,7 @@ hr { } .medium { - font-size: 30px; + font-size: 29px; } hr { @@ -140,8 +170,13 @@ hr { color: rgb(238, 106, 35); } +.floatLeft h2 { + margin-bottom: 0px; +} - +.enmax { + margin-bottom: 30px; +} diff --git a/Volta/Resources/InfoGraphic/smog.png b/Volta/Resources/InfoGraphic/smog.png Binary files differnew file mode 100644 index 0000000..498d212 --- /dev/null +++ b/Volta/Resources/InfoGraphic/smog.png diff --git a/Volta/Resources/InfoGraphic/tree.png b/Volta/Resources/InfoGraphic/tree.png Binary files differnew file mode 100644 index 0000000..515c274 --- /dev/null +++ b/Volta/Resources/InfoGraphic/tree.png diff --git a/Volta/Resources/InfoGraphic/tv.png b/Volta/Resources/InfoGraphic/tv.png Binary files differnew file mode 100644 index 0000000..d5acc15 --- /dev/null +++ b/Volta/Resources/InfoGraphic/tv.png diff --git a/Volta/Volta-Info.plist b/Volta/Volta-Info.plist index d992a35..ade1231 100644 --- a/Volta/Volta-Info.plist +++ b/Volta/Volta-Info.plist @@ -47,6 +47,7 @@ </array> <key>UISupportedInterfaceOrientations</key> <array> + <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationLandscapeRight</string> </array> |
