diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..7ca5eac --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +deltalumin.com diff --git a/about/index.html b/about/index.html index 0a84f4f..648ce93 100644 --- a/about/index.html +++ b/about/index.html @@ -28,6 +28,7 @@

DELTALUMIN

@@ -69,5 +70,17 @@

Helping you make smarter decisions about energy use.

+ + + diff --git a/css/main.css b/css/main.css index 46f52d1..37adbf5 100644 --- a/css/main.css +++ b/css/main.css @@ -42,12 +42,21 @@ body { #idForm * { margin: 10px 0px; - color: #fff; font-weight: 600; } -#idForm #submit-button { +#idForm span { + height: 40px; + margin: 10px 0px; +} + +#idForm #survey-button { font-weight: 600; + color: #fff; +} + +.textInput { + color: #000; } /*.shadow { @@ -144,7 +153,7 @@ header h4 { padding: 12px 19px; border: 4px solid #fff; display: inline-block; - margin: 0px 0px 35px 0px; + /*margin: 0px 0px 35px 0px;*/ background-color: #98bdce; transition-duration: 200ms; } diff --git a/doc/resources.md b/doc/resources.md new file mode 100644 index 0000000..9f70f68 --- /dev/null +++ b/doc/resources.md @@ -0,0 +1,9 @@ +## On getting URL variables + +- http://css-tricks.com/snippets/javascript/get-url-variables/ +- http://w3lessons.info/2013/02/25/how-to-get-url-parameters-values-using-jquery/ + +## On D3 + +- Binding data - http://alignedleft.com/tutorials/d3/binding-data/ +- Simple example of working with JSON in a variable - http://jsfiddle.net/fg9MU/1/ \ No newline at end of file diff --git a/index.html b/index.html index 4cb8132..50de9ed 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@

DELTALUMIN

@@ -66,5 +67,16 @@

Questions?

+ + \ No newline at end of file diff --git a/js/main.js b/js/main.js index ca71ce8..8333f2b 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,20 @@ $('#idForm').submit(function( e ) { e.preventDefault(); - console.log( $(this).serialize() ); - location.href = 'http://deltalumin.com/webpage/?' + $(this).serialize(); - console.log(ID); -}); \ No newline at end of file + // check for valid ID. During testing, only < 5. + if( ( parseInt($('#idForm .textInput').val()) > 0 ) && ( parseInt($('#idForm .textInput').val() ) < 5 )) { + console.log( $(this).serialize() ); + location.href = 'http://deltalumin.com/webpage/?' + $(this).serialize(); + console.log(ID); + } else { + document.getElementById('warningText').innerHTML = "Please enter a valid ID number (1-4 for now)."; + } +}); + +// put text box in focus on page load +function setup() { + var textInput; + textInput = $('#idForm .textInput'); + textInput.focus(); +} + +$(window).on('load', setup()); \ No newline at end of file diff --git a/user-portal/index.html b/user-portal/index.html index fbc7555..ae05c66 100644 --- a/user-portal/index.html +++ b/user-portal/index.html @@ -27,7 +27,8 @@

DELTALUMIN

@@ -46,7 +47,9 @@

Helping you make smarter decisions about energy use.

User ID:
- + +
+
@@ -70,7 +73,18 @@

Helping you make smarter decisions about energy use.

1-312-487-1087 - hello@deltalumin.com

- - + + + + diff --git a/webpage/css/customTheme.css b/webpage/css/customTheme.css index c3b9640..f04e788 100644 --- a/webpage/css/customTheme.css +++ b/webpage/css/customTheme.css @@ -15,13 +15,22 @@ body { } .make-it-proper-width{ - width: 95%; + width: 100%; +} + +.container, .navbar, .navbar-inverse { + background-color: #687079; + background-image: none; } + .container-fluid{ border-style: none; width: 100%; padding-right: 0px; padding-left: 0px; + float: left; + width: 48%; + margin: 1%; } .navbar-default{ /* assigning the top bar to the entire navbar div element */ text-align: center; @@ -43,7 +52,6 @@ body { } .navbar-inverse{ - background-color: #00ff00; border:none; margin-bottom: 0; } @@ -58,12 +66,11 @@ body { .visualizationSection { - padding: 0px 0px; - text-align: center; - background: #ffffff; - margin-left: auto; + padding: 0px 0px; + text-align: center; + background: #ffffff; + margin-left: auto; margin-right: auto; - width: 95%; } .vizDivider { margin-left: auto; @@ -175,7 +182,7 @@ border-radius: 0px; } .nav-tabs-app-tab{ - width: 33.333%; + width: 50%; height: 30px; } @@ -338,3 +345,16 @@ border-radius: 0px; .c3-chart-text{ c } + + +/*=========================================== +MEDIA QUERIES +===========================================*/ + +@media screen and (max-width: 620px) { + .container-fluid{ + float: none; + width: 97%; + margin: 1%; + } +} \ No newline at end of file diff --git a/webpage/index.html b/webpage/index.html index cf8e144..64e371e 100644 --- a/webpage/index.html +++ b/webpage/index.html @@ -31,7 +31,7 @@
@@ -66,53 +66,45 @@
- +
-
-
Usage History
- - - -
-
- -
- -
-
-
-
-
-
-
-
+
+
+
Usage History
+ + + +
+ +
+
+
+
-
-
-
-
-
+
+
+
+
+
+
-
- -
+
+
-
@@ -144,6 +136,17 @@ --> + + diff --git a/webpage/js/user.js b/webpage/js/user.js index 34f16f6..a7cc4da 100644 --- a/webpage/js/user.js +++ b/webpage/js/user.js @@ -1,12 +1,12 @@ // Load the data with Tabletop, the app is in the showInfo callback -var URL = '1kL43OgvgJVpEdylU2mX-kPUwHpyCPBCITgP-mLWVRx0'; +var sheetsURL = '1kL43OgvgJVpEdylU2mX-kPUwHpyCPBCITgP-mLWVRx0'; Tabletop.init( { - key: URL, + key: sheetsURL, callback: showInfo, debug: true, parseNumbers: true, - simpleSheet: true + simpleSheet: true } ); function showInfo(data, tabletop){ @@ -74,7 +74,7 @@ below ======================================== */ -var vizWidth=$(window).width()*0.95; +var vizWidth=$('.visualizationSection').width()*0.95; $(".vizDivider").css("height",$(window).width()*0.025); var date = new Date(); @@ -192,6 +192,7 @@ function createPieChart(jsonFile, label, money) { } var svg = d3.select("#pieChart").append("svg") + .attr("class", "pie-chart" + ( userID + 1 )) .attr("width", cDim.width) .attr("height", cDim.height) .append("g") @@ -468,7 +469,7 @@ below ======================================== */ -var dayChartDim = { +/*var dayChartDim = { AMOffsetX: 15, PMOffsetX: (vizWidth / 25) * 14, AMPMOffsetY: 10, @@ -591,18 +592,18 @@ var chart1 = c3.generate({ } } } -}); +});*/ -var svgSoFar = d3.select("#soFarHighlight").append("svg") +/*var svgSoFar = d3.select("#soFarHighlight").append("svg") .attr("width", vizWidth) - .attr("height", dayChartDim.height + dayChartDim.soFarNotificationHeight); + .attr("height", dayChartDim.height + dayChartDim.soFarNotificationHeight);*/ // NEED TO BE FIXED TO ALIGN THE SO FAR // LOOK AT THE soFarDim variables to align the line // var percentageOffDayPassed = ((new Date().getHours() + 1) / 24 + new Date().getMinutes() / (60 * 24)); -var percentageOffDayPassed = ((new Date().getHours() + 1) / 24); +/*var percentageOffDayPassed = ((new Date().getHours() + 1) / 24); var soFarXPosition = (vizWidth - dayChartDim.paddingLeft) * percentageOffDayPassed; var soFarDim = { @@ -612,9 +613,9 @@ var soFarDim = { topOffset: 0, textLineHeight: 14, textLineOffset: 10, -} +};*/ -svgSoFar.append("line") +/*svgSoFar.append("line") .attr({ x1: function(d, i) { @@ -667,7 +668,7 @@ svgSoFar.append("text") }) .text(function(d) { return "$" + getDayTotal(); - }); + });*/ @@ -1026,6 +1027,7 @@ var calDim = { $("#calendarChart").css("height", (calDim.boxHeight+calDim.boxPadding)*7+calDim.boxHeight/2+"px"); ; var calendarSVG = d3.select("#calendarChart").append("svg") + .attr("class", "calendar-chart" + (userID + 1)) .attr("width", vizWidth) .attr("height", $("#calendarChart").css("height")); @@ -1034,7 +1036,7 @@ function drawCalendar() { var calendarDate = new Date(); var firstDay = new Date(calendarDate.getFullYear(), calendarDate.getMonth(), 1); - var lastDay = new Date(calendarDate.getFullYear(), calendarDate.getMonth(), 0); + var lastDay = new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 0); // make sure it's not the end of NEXT month by using calendarDate.getMonth() + 1 var numDays = new Date(calendarDate.getFullYear(), calendarDate.getMonth(), 0).getDate(); var daysPerWeek = 7; @@ -1141,7 +1143,7 @@ function drawCalendar() { .style('fill', calDim.lastDayColor) .attr({ 'x': (calDim.boxWidth + calDim.boxPadding) * boxController.x + calDim.leftPadding + calDim.boxWidth / 2, - 'y': (calDim.boxHeight + calDim.boxPadding) * boxController.y + calDim.topPadding + calDim.boxHeight / 2 + calDim.labelSpacing + 20, + 'y': (calDim.boxHeight + calDim.boxPadding) * boxController.y + calDim.topPadding + calDim.boxHeight / 2 + calDim.labelSpacing + 30, 'class': 'label-text-center-calendar', }) .text(function(d) { @@ -1154,7 +1156,7 @@ function drawCalendar() { .style('fill', calDim.lastDayColor) .attr({ 'x': (calDim.boxWidth + calDim.boxPadding) * boxController.x + calDim.leftPadding + calDim.boxWidth / 2, - 'y': (calDim.boxHeight + calDim.boxPadding) * boxController.y + calDim.topPadding + calDim.boxHeight / 2 + calDim.labelSpacing + 35, + 'y': (calDim.boxHeight + calDim.boxPadding) * boxController.y + calDim.topPadding + calDim.boxHeight / 2 + calDim.labelSpacing + 45, 'class': 'label-text-center-calendar-speechBubble', }) .text(function(d) { @@ -1170,7 +1172,7 @@ function drawCalendar() { 'class': 'label-text-center-calendar', }) .text(function(d) { - return monthNames[lastDay.getMonth() + 1]; + return monthNames[lastDay.getMonth()]; // remove +1 here because we fixed it above when lastDay was declared }); calendarSVG.append("text") .attr("dy", ".35em")