From c0cc85d9ce2b372b536f2f008a4a838a2e3480e7 Mon Sep 17 00:00:00 2001 From: Levin Dixon Date: Tue, 18 Jun 2013 23:52:13 -0700 Subject: Added html info graphic page. --- Volta.xcodeproj/project.pbxproj | 16 +++++++++++ Volta/Resources/InfoGraphic/dollar.png | Bin 0 -> 11207 bytes Volta/Resources/InfoGraphic/index.html | 28 +++++++++++++------ Volta/Resources/InfoGraphic/main.css | 49 ++++++++++++++++++++++++++++----- Volta/Resources/InfoGraphic/smog.png | Bin 0 -> 6686 bytes Volta/Resources/InfoGraphic/tree.png | Bin 0 -> 6554 bytes Volta/Resources/InfoGraphic/tv.png | Bin 0 -> 3632 bytes Volta/Volta-Info.plist | 1 + 8 files changed, 79 insertions(+), 15 deletions(-) create mode 100644 Volta/Resources/InfoGraphic/dollar.png create mode 100644 Volta/Resources/InfoGraphic/smog.png create mode 100644 Volta/Resources/InfoGraphic/tree.png create mode 100644 Volta/Resources/InfoGraphic/tv.png diff --git a/Volta.xcodeproj/project.pbxproj b/Volta.xcodeproj/project.pbxproj index 7c2f2e5..b11a15a 100644 --- a/Volta.xcodeproj/project.pbxproj +++ b/Volta.xcodeproj/project.pbxproj @@ -7,6 +7,10 @@ objects = { /* Begin PBXBuildFile section */ + 18E1175D1770F85F008F2CF7 /* dollar.png in Resources */ = {isa = PBXBuildFile; fileRef = 18E117591770F85F008F2CF7 /* dollar.png */; }; + 18E1175E1770F85F008F2CF7 /* smog.png in Resources */ = {isa = PBXBuildFile; fileRef = 18E1175A1770F85F008F2CF7 /* smog.png */; }; + 18E1175F1770F85F008F2CF7 /* tree.png in Resources */ = {isa = PBXBuildFile; fileRef = 18E1175B1770F85F008F2CF7 /* tree.png */; }; + 18E117601770F85F008F2CF7 /* tv.png in Resources */ = {isa = PBXBuildFile; fileRef = 18E1175C1770F85F008F2CF7 /* tv.png */; }; A8AF535F0EC94FB7A338F38E /* libPods.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 235B220EC491483D961573DB /* libPods.a */; }; E31FEFFF176A5521009E4D27 /* UIKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = E31FEFFE176A5521009E4D27 /* UIKit.framework */; }; E31FF001176A5521009E4D27 /* Foundation.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = E31FF000176A5521009E4D27 /* Foundation.framework */; }; @@ -148,6 +152,10 @@ /* End PBXBuildFile section */ /* Begin PBXFileReference section */ + 18E117591770F85F008F2CF7 /* dollar.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = dollar.png; sourceTree = ""; }; + 18E1175A1770F85F008F2CF7 /* smog.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = smog.png; sourceTree = ""; }; + 18E1175B1770F85F008F2CF7 /* tree.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = tree.png; sourceTree = ""; }; + 18E1175C1770F85F008F2CF7 /* tv.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = tv.png; sourceTree = ""; }; 235B220EC491483D961573DB /* libPods.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libPods.a; sourceTree = BUILT_PRODUCTS_DIR; }; 27E3918B8EF34D13A0A10AA7 /* Pods.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = Pods.xcconfig; path = Pods/Pods.xcconfig; sourceTree = SOURCE_ROOT; }; E31FEFFB176A5521009E4D27 /* Volta.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Volta.app; sourceTree = BUILT_PRODUCTS_DIR; }; @@ -532,6 +540,10 @@ E3F814781770E52900FFF5C5 /* InfoGraphic */ = { isa = PBXGroup; children = ( + 18E117591770F85F008F2CF7 /* dollar.png */, + 18E1175A1770F85F008F2CF7 /* smog.png */, + 18E1175B1770F85F008F2CF7 /* tree.png */, + 18E1175C1770F85F008F2CF7 /* tv.png */, E3F814791770E52900FFF5C5 /* bootstrap-responsive.css */, E3F8147A1770E52900FFF5C5 /* bootstrap-responsive.min.css */, E3F8147B1770E52900FFF5C5 /* bootstrap.css */, @@ -672,6 +684,10 @@ E3F8148D1770E52900FFF5C5 /* glyphicons-halflings.png in Resources */, E3F8148E1770E52900FFF5C5 /* index.html in Resources */, E3F814901770E52900FFF5C5 /* main.css in Resources */, + 18E1175D1770F85F008F2CF7 /* dollar.png in Resources */, + 18E1175E1770F85F008F2CF7 /* smog.png in Resources */, + 18E1175F1770F85F008F2CF7 /* tree.png in Resources */, + 18E117601770F85F008F2CF7 /* tv.png in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/Volta/Resources/InfoGraphic/dollar.png b/Volta/Resources/InfoGraphic/dollar.png new file mode 100644 index 0000000..f904afc Binary files /dev/null and b/Volta/Resources/InfoGraphic/dollar.png differ 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 @@

999 kWh

of energy

-

$99.99 $

+

$99.99

This is on average

99.9 kWh or

@@ -55,26 +59,34 @@

Reduce your usage by only 5% and you could

save

-

9.9 trees

+

1.9 trees

use a TV for

-

9.9 hours

+

9.5 hours

save

-

2t of greenhouse gas

+

3t of greenhouse gas

-

Switching to Easymax by Enmax would save you an average of

-

$99

+

Switching to Easymax by Enmax would save you an average of

+
+

$34

a month or

+
+
+
-

$999

a month or

+
+

$408

a month or

+
+
+

Tap here to get more information

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 new file mode 100644 index 0000000..498d212 Binary files /dev/null and b/Volta/Resources/InfoGraphic/smog.png differ diff --git a/Volta/Resources/InfoGraphic/tree.png b/Volta/Resources/InfoGraphic/tree.png new file mode 100644 index 0000000..515c274 Binary files /dev/null and b/Volta/Resources/InfoGraphic/tree.png differ diff --git a/Volta/Resources/InfoGraphic/tv.png b/Volta/Resources/InfoGraphic/tv.png new file mode 100644 index 0000000..d5acc15 Binary files /dev/null and b/Volta/Resources/InfoGraphic/tv.png differ 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 @@ UISupportedInterfaceOrientations + UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight -- cgit v1.2.3