Added html info graphic page.

8 files changed, 79 insertions, 15 deletions

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 = "<group>"; };
+		18E1175A1770F85F008F2CF7 /* smog.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = smog.png; sourceTree = "<group>"; };
+		18E1175B1770F85F008F2CF7 /* tree.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = tree.png; sourceTree = "<group>"; };
+		18E1175C1770F85F008F2CF7 /* tv.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = tv.png; sourceTree = "<group>"; };
 		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
--- /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
new 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
new 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
new 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>