diff --git a/.grunt/grunt-gh-pages/gh-pages/src b/.grunt/grunt-gh-pages/gh-pages/src new file mode 160000 index 0000000..96417b1 --- /dev/null +++ b/.grunt/grunt-gh-pages/gh-pages/src @@ -0,0 +1 @@ +Subproject commit 96417b1836232740cc63c448573d77b1f2562f99 diff --git a/Gruntfile.js b/Gruntfile.js index 1f514ec..8a67b15 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -11,6 +11,7 @@ module.exports = function (grunt) { // Time how long tasks take. Can help when optimizing build times require('time-grunt')(grunt); + grunt.loadNpmTasks('grunt-gh-pages'); // Automatically load required Grunt tasks require('jit-grunt')(grunt, { @@ -224,7 +225,7 @@ module.exports = function (grunt) { src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], ignorePath: /(\.\.\/){1,2}bower_components\// } - }, + }, // Compiles Sass to CSS and generates necessary files if requested compass: { @@ -413,7 +414,8 @@ module.exports = function (grunt) { '*.{ico,png,txt}', '*.html', 'images/{,*/}*.{webp}', - 'styles/fonts/{,*/}*.*' + 'styles/fonts/{,*/}*.*', + 'CNAME', ] }, { expand: true, @@ -456,7 +458,15 @@ module.exports = function (grunt) { configFile: 'test/karma.conf.js', singleRun: true } - } + }, + + ghpages: { + options: { + base: 'dist' + }, + src: ['**'] + }, + }); @@ -513,4 +523,19 @@ module.exports = function (grunt) { 'test', 'build' ]); + + grunt.registerTask('deploy', [ + 'ghpages', + ]); + +/* + grunt.initConfig({ + 'gh-pages': { + options: { + base: 'dist' + }, + src: ['**'] + } + }); +*/ }; diff --git a/app/CNAME b/app/CNAME new file mode 100644 index 0000000..1f33774 --- /dev/null +++ b/app/CNAME @@ -0,0 +1 @@ +happybots.io diff --git a/app/favicon.ico b/app/favicon.ico index 6527905..bb70245 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/images/alex.png b/app/images/alex.png new file mode 100644 index 0000000..480ded3 Binary files /dev/null and b/app/images/alex.png differ diff --git a/app/images/alexBg.jpg b/app/images/alexBg.jpg new file mode 100644 index 0000000..7b5fdf4 Binary files /dev/null and b/app/images/alexBg.jpg differ diff --git a/app/images/alexBg5.jpg b/app/images/alexBg5.jpg new file mode 100644 index 0000000..b68f555 Binary files /dev/null and b/app/images/alexBg5.jpg differ diff --git a/app/images/alexIco.png b/app/images/alexIco.png new file mode 100644 index 0000000..918cd43 Binary files /dev/null and b/app/images/alexIco.png differ diff --git a/app/images/alexIcoNoBorder.png b/app/images/alexIcoNoBorder.png new file mode 100644 index 0000000..314fd32 Binary files /dev/null and b/app/images/alexIcoNoBorder.png differ diff --git a/app/images/happybotsIco.png b/app/images/happybotsIco.png new file mode 100644 index 0000000..edcb17d Binary files /dev/null and b/app/images/happybotsIco.png differ diff --git a/app/images/hbIcoL.png b/app/images/hbIcoL.png new file mode 100644 index 0000000..95be07f Binary files /dev/null and b/app/images/hbIcoL.png differ diff --git a/app/images/hbIcoM.png b/app/images/hbIcoM.png new file mode 100644 index 0000000..d7bfe1a Binary files /dev/null and b/app/images/hbIcoM.png differ diff --git a/app/images/hbIcoS.png b/app/images/hbIcoS.png new file mode 100644 index 0000000..391c9c1 Binary files /dev/null and b/app/images/hbIcoS.png differ diff --git a/app/images/hbIcoWhite.png b/app/images/hbIcoWhite.png new file mode 100644 index 0000000..ac60a84 Binary files /dev/null and b/app/images/hbIcoWhite.png differ diff --git a/app/images/hbIcoXL.png b/app/images/hbIcoXL.png new file mode 100644 index 0000000..136058a Binary files /dev/null and b/app/images/hbIcoXL.png differ diff --git a/app/images/hbIcoXS.png b/app/images/hbIcoXS.png new file mode 100644 index 0000000..3afc71d Binary files /dev/null and b/app/images/hbIcoXS.png differ diff --git a/app/images/hbIcoXXL.png b/app/images/hbIcoXXL.png new file mode 100644 index 0000000..00e2128 Binary files /dev/null and b/app/images/hbIcoXXL.png differ diff --git a/app/images/hbIcoXXS.png b/app/images/hbIcoXXS.png new file mode 100644 index 0000000..bc08049 Binary files /dev/null and b/app/images/hbIcoXXS.png differ diff --git a/app/images/messenger.png b/app/images/messenger.png new file mode 100644 index 0000000..5e70347 Binary files /dev/null and b/app/images/messenger.png differ diff --git a/app/images/modelo-expediente-academico.xls b/app/images/modelo-expediente-academico.xls new file mode 100644 index 0000000..954387d Binary files /dev/null and b/app/images/modelo-expediente-academico.xls differ diff --git a/app/images/patricia.jpeg b/app/images/patricia.jpeg new file mode 100644 index 0000000..081574a Binary files /dev/null and b/app/images/patricia.jpeg differ diff --git a/app/images/sandoche.jpeg b/app/images/sandoche.jpeg new file mode 100644 index 0000000..31a9a27 Binary files /dev/null and b/app/images/sandoche.jpeg differ diff --git a/app/images/wip.png b/app/images/wip.png new file mode 100644 index 0000000..82749f0 Binary files /dev/null and b/app/images/wip.png differ diff --git a/app/images/wipBg2.png b/app/images/wipBg2.png new file mode 100644 index 0000000..cc97f47 Binary files /dev/null and b/app/images/wipBg2.png differ diff --git a/app/images/wipIco.png b/app/images/wipIco.png new file mode 100644 index 0000000..2c95e59 Binary files /dev/null and b/app/images/wipIco.png differ diff --git a/app/images/wipIco3.png b/app/images/wipIco3.png new file mode 100644 index 0000000..6a55c18 Binary files /dev/null and b/app/images/wipIco3.png differ diff --git a/app/index.html b/app/index.html index 491f9cc..b34cde3 100644 --- a/app/index.html +++ b/app/index.html @@ -2,7 +2,7 @@ - + HAPPYBOTS @@ -13,6 +13,13 @@ + + + + + + +
- -
- + + - - @@ -78,13 +74,18 @@ + - + + + + + diff --git a/app/scripts/app.js b/app/scripts/app.js index 9064018..48f2aeb 100644 --- a/app/scripts/app.js +++ b/app/scripts/app.js @@ -13,21 +13,35 @@ angular 'ngAnimate', 'ngRoute', 'ngSanitize', - 'ngTouch' + 'ngTouch', + 'typer', ]) .config(function ($routeProvider) { $routeProvider - .when('/', { - templateUrl: 'views/main.html', - controller: 'MainCtrl', - controllerAs: 'main' + .when('/wip', { + templateUrl: 'views/wip.html', + controller: 'WipCtrl', + controllerAs: 'wip' }) .when('/about', { templateUrl: 'views/about.html', controller: 'AboutCtrl', controllerAs: 'about' }) + .when('/:name', { + templateUrl: 'views/bot.html', + controller: 'BotCtrl', + controllerAs: 'bot' + }) .otherwise({ - redirectTo: '/' + redirectTo: '/alex' + }); + }).run(['$rootScope', '$location', '$window', function($rootScope, $location, $window){ + $rootScope + .$on('$stateChangeSuccess', + function(event){ + if (!$window.ga) + return; + $window.ga('send', 'pageview', { page: $location.path() }); }); - }); +}]); diff --git a/app/scripts/controllers/bot.js b/app/scripts/controllers/bot.js new file mode 100644 index 0000000..8e17ae8 --- /dev/null +++ b/app/scripts/controllers/bot.js @@ -0,0 +1,21 @@ +'use strict'; + +/** + * @ngdoc function + * @name happybotsApp.controller:BotCtrl + * @description + * # BotCtrl + * Controller of the happybotsApp + */ +angular.module('happybotsApp') + .controller('BotCtrl', ['$scope', '$routeParams', '$location', 'botsData', function ($scope, $routeParams, $location, botsData) { + + var botName = $routeParams.name; + $scope.Bot = botsData[botName]; + + // Redirect if no bot found + if(angular.isUndefined(botsData[botName])) { + $location.path('/') + } + + }]); diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js deleted file mode 100644 index 6ecc2ac..0000000 --- a/app/scripts/controllers/main.js +++ /dev/null @@ -1,17 +0,0 @@ -'use strict'; - -/** - * @ngdoc function - * @name happybotsApp.controller:MainCtrl - * @description - * # MainCtrl - * Controller of the happybotsApp - */ -angular.module('happybotsApp') - .controller('MainCtrl', function () { - this.awesomeThings = [ - 'HTML5 Boilerplate', - 'AngularJS', - 'Karma' - ]; - }); diff --git a/app/scripts/controllers/wip.js b/app/scripts/controllers/wip.js new file mode 100644 index 0000000..ef2369c --- /dev/null +++ b/app/scripts/controllers/wip.js @@ -0,0 +1,16 @@ +'use strict'; + +/** + * @ngdoc function + * @name happybotsApp.controller:WipCtrl + * @description + * # WipCtrl + * Controller of the happybotsApp + */ +angular.module('happybotsApp') + .controller('WipCtrl', ['$scope', function ($scope) { + + $scope.feature = "Image Face Recognition"; + $scope.newBotName = "Eeve"; + + }]); diff --git a/app/scripts/directives/botbar.js b/app/scripts/directives/botbar.js new file mode 100644 index 0000000..9df6706 --- /dev/null +++ b/app/scripts/directives/botbar.js @@ -0,0 +1,18 @@ +'use strict'; + +/** + * @ngdoc directive + * @name happybotsApp.directive:botBar + * @description + * # botBar + */ +angular.module('happybotsApp') + .directive('botBar', ['botsData', function (botsData) { + return { + templateUrl: 'views/shared/botbar.html', + restrict: 'E', + link: function postLink(scope, element, attrs) { + scope.Bots = botsData; + } + }; + }]); diff --git a/app/scripts/services/botsdata.js b/app/scripts/services/botsdata.js new file mode 100644 index 0000000..70cf418 --- /dev/null +++ b/app/scripts/services/botsdata.js @@ -0,0 +1,22 @@ +'use strict'; + +/** + * @ngdoc service + * @name happybotsApp.botsData + * @description + * # botsData + * Value in the happybotsApp. + */ +angular.module('happybotsApp') + .value('botsData', { + "alex" : { + name: "Alex", + id: "alex", + description: "A Wikipedia bot for messenger", + imageSrc:"images/alex.png", + imageBgSrc:"images/alexBg5.jpg", + icoSrc:"images/alexIcoNoBorder.png", + messengerUrl: "http://m.me/alex.wikimessenger", + githubUrl: "https://github.com/patriciamayo/Alex-wikiMessenger" + }, + }); diff --git a/app/styles/_about.scss b/app/styles/_about.scss new file mode 100644 index 0000000..274c1a3 --- /dev/null +++ b/app/styles/_about.scss @@ -0,0 +1,76 @@ +.about { + + margin-top: $navbar-height; + text-align: center; + + h1, h2, h3, h4, p { + color: #333; + } + + h2 { + margin-bottom: 35px; + } + + h4 { + font-weight: 300; + margin-top: 20px; + margin-bottom: 20px; + font-size: 2rem; + } + + img { + display: block; + margin: 0 auto; + } + + .center { + display: block; + margin: 0 auto; + } + + + .colored-block { + width: 100%; + padding-top: 100px; + padding-bottom: 90px; + padding-left: 0; + padding-right: 0; + color:#fff; + } + + .white{ + background: white; + } + + .grey{ + background: $gray-lighter; + } + + .blue{ + background:blue; + } + + .block { + margin-top: $navbar-height; + margin-bottom: $navbar-height; + } + + .text-block { + text-align: center; + } + + .love { + color: $red !important; + } + + + .about-logo { + height:150px; + width: 150px; + } + + .team-section { + padding-bottom: 130px; + } + +} diff --git a/app/styles/_blinking.scss b/app/styles/_blinking.scss new file mode 100644 index 0000000..20a1acb --- /dev/null +++ b/app/styles/_blinking.scss @@ -0,0 +1,31 @@ +.typer__cursor--blink, .typer__cursor { + -webkit-animation: blink 1s infinite; + -moz-animation: blink 1s infinite; + animation: blink 1s infinite; +} + +@-webkit-keyframes blink { +0% { + opacity: 1; +} +100% { + opacity: 0; +} +} +@-moz-keyframes blink { +0% { + opacity: 1; +} +100% { + opacity: 0; +} +} + +@keyframes blink { +0% { + opacity: 1; +} +100% { + opacity: 0; +} +} diff --git a/app/styles/_bot.scss b/app/styles/_bot.scss new file mode 100644 index 0000000..370a5a2 --- /dev/null +++ b/app/styles/_bot.scss @@ -0,0 +1,36 @@ + +.bot { + + h1, h2 { + color: #333; + } + + h1 { + text-transform: uppercase; + font-size: 5rem; + } + + h2 { + margin-bottom: 30px; + } + + .img-bg { + height: 20px; + width: 20px; + } + + min-height: 100vh; + +} + + +@media (max-width: $screen-sm-min) { + + .bot { + h1 { + text-transform: uppercase; + font-size: 3rem; + } + } + +} diff --git a/app/styles/_botbar.scss b/app/styles/_botbar.scss new file mode 100644 index 0000000..04f6fe4 --- /dev/null +++ b/app/styles/_botbar.scss @@ -0,0 +1,17 @@ +footer { + position: fixed; + bottom: 0; + width: 100%; + border-bottom: 40px solid $accent; +} + +.botbar { + +} + +.icon-messenger { + height: 75px; + width: 75px; + position: relative; + top: 34px; +} diff --git a/app/styles/_flexbox.scss b/app/styles/_flexbox.scss new file mode 100644 index 0000000..f1cdc14 --- /dev/null +++ b/app/styles/_flexbox.scss @@ -0,0 +1,26 @@ +@media (min-width: $screen-sm-min) { + + .center { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + } + + .vcenter { + display: inline-block; + vertical-align: middle; + float: none; + } + +} + +@media (max-width: $screen-sm-min) { + + .center, .text-block { + text-align: center !important; + } + + + +} diff --git a/app/styles/_fonts.scss b/app/styles/_fonts.scss new file mode 100644 index 0000000..6c1a6a1 --- /dev/null +++ b/app/styles/_fonts.scss @@ -0,0 +1,11 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,800); + +h1, h2 { + font-family: 'Roboto', sans-serif; + font-weight: 300; +} + +h3 { + font-family: 'Roboto', sans-serif; + font-weight: 300; +} diff --git a/app/styles/_global.scss b/app/styles/_global.scss new file mode 100644 index 0000000..57a2b2c --- /dev/null +++ b/app/styles/_global.scss @@ -0,0 +1,29 @@ +.cursor-link { + cursor:pointer; +} + +.logo { + height: 40px; + margin-right: 5px; + margin-top: 5px; + float: left; + padding-left: 10px; +} + + + +.text-block { + margin-top: 30px; + margin-bottom: 30px; + text-align: justify; + font-size: 2rem; +} + +.love { + color: $red !important; +} + + +.btn { + margin-bottom: 5px; +} diff --git a/app/styles/_socialbuttons.scss b/app/styles/_socialbuttons.scss new file mode 100644 index 0000000..500ea9d --- /dev/null +++ b/app/styles/_socialbuttons.scss @@ -0,0 +1,52 @@ +.social-center { + padding-top: 15px; + padding-left: 0; +} + +.parent-center { + .social { text-align: center; } + .social ul { display:inline-table; } + .social li { display:inline; } +} + + + + +@media (max-width: $screen-sm-min) { + + .social-center { + .social { text-align: center; } + .social ul { display:inline-table; } + .social li { display:inline; } + margin-bottom: 100px; + } + +} + +.social { + ul { + overflow: auto; + } + + ul li { + list-style-type: none; + float: left; + } + + ul li a i { + background: $gray-light; + color: #fff; + width: 40px; + height: 40px; + border-radius: 20px; + font-size: 25px; + text-align: center; + margin-right: 10px; + padding-top: 15%; + + &:hover { + background: $gray; + } + } + +} diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss new file mode 100644 index 0000000..40b2944 --- /dev/null +++ b/app/styles/_variables.scss @@ -0,0 +1,880 @@ +$bootstrap-sass-asset-helper: false !default; +// +// Variables +// -------------------------------------------------- + + +//== Colors +// +//## Gray and brand colors for use across Bootstrap. + +$gray-base: #000 !default; +$gray-darker: lighten($gray-base, 13.5%) !default; // #222 +$gray-dark: lighten($gray-base, 20%) !default; // #333 +$gray: lighten($gray-base, 33.5%) !default; // #555 +$gray-light: lighten($gray-base, 46.7%) !default; // #777 +$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee +$red: #ED5565; +$accent: #06a8e1; +$accent-secondary: #25c079; + + +$brand-primary: #0084ff !default; // #337ab7 +$brand-success: #5cb85c !default; +$brand-info: #5bc0de !default; +$brand-warning: #f0ad4e !default; +$brand-danger: #d9534f !default; + + +//== Scaffolding +// +//## Settings for some of the most global styles. + +//** Background color for ``. +$body-bg: #fff !default; +//** Global text color on ``. +$text-color: $gray-dark !default; + +//** Global textual link color. +$link-color: $accent !default; +//** Link hover color set via `darken()` function. +$link-hover-color: darken($link-color, 15%) !default; +//** Link hover decoration. +$link-hover-decoration: underline !default; + + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. + +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +//** Default monospace fonts for ``, ``, and `
`.
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base:        $font-family-sans-serif !default;
+
+$font-size-base:          14px !default;
+$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
+$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
+$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
+$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-h5:            $font-size-base !default;
+$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base:        1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
+
+//** By default, this inherits from the ``.
+$headings-font-family:    inherit !default;
+$headings-font-weight:    500 !default;
+$headings-line-height:    1.1 !default;
+$headings-color:          inherit !default;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+
+// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
+// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
+$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
+
+//** File name for all font files.
+$icon-font-name:          "glyphicons-halflings-regular" !default;
+//** Element ID within SVG icon file.
+$icon-font-svg-id:        "glyphicons_halflingsregular" !default;
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base-vertical:     6px !default;
+$padding-base-horizontal:   12px !default;
+
+$padding-large-vertical:    10px !default;
+$padding-large-horizontal:  16px !default;
+
+$padding-small-vertical:    5px !default;
+$padding-small-horizontal:  10px !default;
+
+$padding-xs-vertical:       1px !default;
+$padding-xs-horizontal:     5px !default;
+
+$line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$line-height-small:         1.5 !default;
+
+$border-radius-base:        0px !default;
+$border-radius-large:       0px !default;
+$border-radius-small:       0px !default;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color:    #fff !default;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg:       $brand-primary !default;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base:          4px !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large:         5px !default;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for ``s and ``s.
+$table-cell-padding:            8px !default;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding:  5px !default;
+
+//** Default background color used for all tables.
+$table-bg:                      transparent !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent:               #f9f9f9 !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover:                #f5f5f5 !default;
+$table-bg-active:               $table-bg-hover !default;
+
+//** Border color for table and cell borders.
+$table-border-color:            #ddd !default;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight:                normal !default;
+
+$btn-default-color:              #333 !default;
+$btn-default-bg:                 #fff !default;
+$btn-default-border:             #ccc !default;
+
+$btn-primary-color:              #fff !default;
+$btn-primary-bg:                 $brand-primary !default;
+$btn-primary-border:             $btn-primary-bg !default;
+
+$btn-success-color:              #fff !default;
+$btn-success-bg:                 $brand-success !default;
+$btn-success-border:             darken($btn-success-bg, 5%) !default;
+
+$btn-info-color:                 #fff !default;
+$btn-info-bg:                    $brand-info !default;
+$btn-info-border:                darken($btn-info-bg, 5%) !default;
+
+$btn-warning-color:              #fff !default;
+$btn-warning-bg:                 $brand-warning !default;
+$btn-warning-border:             darken($btn-warning-bg, 5%) !default;
+
+$btn-danger-color:               #fff !default;
+$btn-danger-bg:                  $brand-danger !default;
+$btn-danger-border:              darken($btn-danger-bg, 5%) !default;
+
+$btn-link-disabled-color:        $gray-light !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius-base:         $border-radius-base !default;
+$btn-border-radius-large:        $border-radius-large !default;
+$btn-border-radius-small:        $border-radius-small !default;
+
+
+//== Forms
+//
+//##
+
+//** `` background color
+$input-bg:                       #fff !default;
+//** `` background color
+$input-bg-disabled:              $gray-lighter !default;
+
+//** Text color for ``s
+$input-color:                    $gray !default;
+//** `` border color
+$input-border:                   #ccc !default;
+
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on ``s in CSS.
+$input-border-radius:            $border-radius-base !default;
+//** Large `.form-control` border radius
+$input-border-radius-large:      $border-radius-large !default;
+//** Small `.form-control` border radius
+$input-border-radius-small:      $border-radius-small !default;
+
+//** Border color for inputs on focus
+$input-border-focus:             #66afe9 !default;
+
+//** Placeholder text color
+$input-color-placeholder:        #999 !default;
+
+//** Default `.form-control` height
+$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+
+//** `.form-group` margin
+$form-group-margin-bottom:       15px !default;
+
+$legend-color:                   $gray-dark !default;
+$legend-border-color:            #e5e5e5 !default;
+
+//** Background color for textual input addons
+$input-group-addon-bg:           $gray-lighter !default;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border !default;
+
+//** Disabled cursor for form controls and buttons.
+$cursor-disabled:                not-allowed !default;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg:                    #fff !default;
+//** Dropdown menu `border-color`.
+$dropdown-border:                rgba(0,0,0,.15) !default;
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border:       #ccc !default;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg:            #e5e5e5 !default;
+
+//** Dropdown link text color.
+$dropdown-link-color:            $gray-dark !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:         #f5f5f5 !default;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color:     $component-active-color !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:        $component-active-bg !default;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color:   $gray-light !default;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color:          $gray-light !default;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color:           #000 !default;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar:            1000 !default;
+$zindex-dropdown:          1000 !default;
+$zindex-popover:           1060 !default;
+$zindex-tooltip:           1070 !default;
+$zindex-navbar-fixed:      1030 !default;
+$zindex-modal-background:  1040 !default;
+$zindex-modal:             1050 !default;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs:                  480px !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min:              $screen-xs !default;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone:               $screen-xs-min !default;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet:              $screen-sm-min !default;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md:                  992px !default;
+$screen-md-min:              $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop:             $screen-md-min !default;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg:                  1200px !default;
+$screen-lg-min:              $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop:          $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1) !default;
+$screen-sm-max:              ($screen-md-min - 1) !default;
+$screen-md-max:              ($screen-lg-min - 1) !default;
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns:              12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width:         30px !default;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint:     $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet:             (720px + $grid-gutter-width) !default;
+//** For `$screen-sm-min` and up.
+$container-sm:                 $container-tablet !default;
+
+// Medium screen / desktop
+$container-desktop:            (940px + $grid-gutter-width) !default;
+//** For `$screen-md-min` and up.
+$container-md:                 $container-desktop !default;
+
+// Large screen / wide desktop
+$container-large-desktop:      (1140px + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg:                 $container-large-desktop !default;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height:                    50px !default;
+$navbar-margin-bottom:             0 !default;
+$navbar-border-radius:             $border-radius-base !default;
+$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-collapse-max-height:       340px !default;
+
+//$navbar-default-color:             #777 !default;
+$navbar-default-color:             $accent-secondary !default;
+//$navbar-default-bg:                #f8f8f8 !default;
+$navbar-default-bg:                $accent-secondary !default;
+$navbar-default-border:            $accent-secondary !default;
+
+// Navbar links
+$navbar-default-link-color:                #ffffff !default;
+$navbar-default-link-hover-color:          #333 !default;
+$navbar-default-link-hover-bg:             transparent !default;
+$navbar-default-link-active-color:         #555 !default;
+$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color:       #ccc !default;
+$navbar-default-link-disabled-bg:          transparent !default;
+
+// Navbar brand label
+$navbar-default-brand-color:               $navbar-default-link-color !default;
+$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg:            transparent !default;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg:           #ddd !default;
+$navbar-default-toggle-icon-bar-bg:        #888 !default;
+$navbar-default-toggle-border-color:       #ddd !default;
+
+
+//=== Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color:                      lighten($gray-light, 15%) !default;
+$navbar-inverse-bg:                         #222 !default;
+$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
+
+// Inverted navbar links
+$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
+$navbar-inverse-link-hover-color:           #fff !default;
+$navbar-inverse-link-hover-bg:              transparent !default;
+$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color:        #444 !default;
+$navbar-inverse-link-disabled-bg:           transparent !default;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color:          #fff !default;
+$navbar-inverse-brand-hover-bg:             transparent !default;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg:            #333 !default;
+$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
+$navbar-inverse-toggle-border-color:        #333 !default;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding:                          10px 15px !default;
+$nav-link-hover-bg:                         $gray-lighter !default;
+
+$nav-disabled-link-color:                   $gray-light !default;
+$nav-disabled-link-hover-color:             $gray-light !default;
+
+//== Tabs
+$nav-tabs-border-color:                     #ddd !default;
+
+$nav-tabs-link-hover-border-color:          $gray-lighter !default;
+
+$nav-tabs-active-link-hover-bg:             $body-bg !default;
+$nav-tabs-active-link-hover-color:          $gray !default;
+$nav-tabs-active-link-hover-border-color:   #ddd !default;
+
+$nav-tabs-justified-link-border-color:            #ddd !default;
+$nav-tabs-justified-active-link-border-color:     $body-bg !default;
+
+//== Pills
+$nav-pills-border-radius:                   $border-radius-base !default;
+$nav-pills-active-link-hover-bg:            $component-active-bg !default;
+$nav-pills-active-link-hover-color:         $component-active-color !default;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color:                     $link-color !default;
+$pagination-bg:                        #fff !default;
+$pagination-border:                    #ddd !default;
+
+$pagination-hover-color:               $link-hover-color !default;
+$pagination-hover-bg:                  $gray-lighter !default;
+$pagination-hover-border:              #ddd !default;
+
+$pagination-active-color:              #fff !default;
+$pagination-active-bg:                 $brand-primary !default;
+$pagination-active-border:             $brand-primary !default;
+
+$pagination-disabled-color:            $gray-light !default;
+$pagination-disabled-bg:               #fff !default;
+$pagination-disabled-border:           #ddd !default;
+
+
+//== Pager
+//
+//##
+
+$pager-bg:                             $pagination-bg !default;
+$pager-border:                         $pagination-border !default;
+$pager-border-radius:                  15px !default;
+
+$pager-hover-bg:                       $pagination-hover-bg !default;
+
+$pager-active-bg:                      $pagination-active-bg !default;
+$pager-active-color:                   $pagination-active-color !default;
+
+$pager-disabled-color:                 $pagination-disabled-color !default;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding:              30px !default;
+$jumbotron-color:                inherit !default;
+$jumbotron-bg:                   $gray-lighter !default;
+$jumbotron-heading-color:        inherit !default;
+$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
+$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:             #3c763d !default;
+$state-success-bg:               #dff0d8 !default;
+$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
+
+$state-info-text:                #31708f !default;
+$state-info-bg:                  #d9edf7 !default;
+$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
+
+$state-warning-text:             #8a6d3b !default;
+$state-warning-bg:               #fcf8e3 !default;
+$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+
+$state-danger-text:              #a94442 !default;
+$state-danger-bg:                #f2dede !default;
+$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width:           200px !default;
+//** Tooltip text color
+$tooltip-color:               #fff !default;
+//** Tooltip background color
+$tooltip-bg:                  #000 !default;
+$tooltip-opacity:             .9 !default;
+
+//** Tooltip arrow width
+$tooltip-arrow-width:         5px !default;
+//** Tooltip arrow color
+$tooltip-arrow-color:         $tooltip-bg !default;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg:                          #fff !default;
+//** Popover maximum width
+$popover-max-width:                   276px !default;
+//** Popover border color
+$popover-border-color:                rgba(0,0,0,.2) !default;
+//** Popover fallback border color
+$popover-fallback-border-color:       #ccc !default;
+
+//** Popover title background color
+$popover-title-bg:                    darken($popover-bg, 3%) !default;
+
+//** Popover arrow width
+$popover-arrow-width:                 10px !default;
+//** Popover arrow color
+$popover-arrow-color:                 $popover-bg !default;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg:            $gray-light !default;
+//** Primary label background color
+$label-primary-bg:            $brand-primary !default;
+//** Success label background color
+$label-success-bg:            $brand-success !default;
+//** Info label background color
+$label-info-bg:               $brand-info !default;
+//** Warning label background color
+$label-warning-bg:            $brand-warning !default;
+//** Danger label background color
+$label-danger-bg:             $brand-danger !default;
+
+//** Default label text color
+$label-color:                 #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color:      #fff !default;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding:         15px !default;
+
+//** Padding applied to the modal title
+$modal-title-padding:         15px !default;
+//** Modal title line-height
+$modal-title-line-height:     $line-height-base !default;
+
+//** Background color of modal content area
+$modal-content-bg:                             #fff !default;
+//** Modal content border color
+$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color:          #999 !default;
+
+//** Modal backdrop background color
+$modal-backdrop-bg:           #000 !default;
+//** Modal backdrop opacity
+$modal-backdrop-opacity:      .5 !default;
+//** Modal header border color
+$modal-header-border-color:   #e5e5e5 !default;
+//** Modal footer border color
+$modal-footer-border-color:   $modal-header-border-color !default;
+
+$modal-lg:                    900px !default;
+$modal-md:                    600px !default;
+$modal-sm:                    300px !default;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding:               15px !default;
+$alert-border-radius:         $border-radius-base !default;
+$alert-link-font-weight:      bold !default;
+
+$alert-success-bg:            $state-success-bg !default;
+$alert-success-text:          $state-success-text !default;
+$alert-success-border:        $state-success-border !default;
+
+$alert-info-bg:               $state-info-bg !default;
+$alert-info-text:             $state-info-text !default;
+$alert-info-border:           $state-info-border !default;
+
+$alert-warning-bg:            $state-warning-bg !default;
+$alert-warning-text:          $state-warning-text !default;
+$alert-warning-border:        $state-warning-border !default;
+
+$alert-danger-bg:             $state-danger-bg !default;
+$alert-danger-text:           $state-danger-text !default;
+$alert-danger-border:         $state-danger-border !default;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg:                 #f5f5f5 !default;
+//** Progress bar text color
+$progress-bar-color:          #fff !default;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius:      $border-radius-base !default;
+
+//** Default progress bar color
+$progress-bar-bg:             $brand-primary !default;
+//** Success progress bar color
+$progress-bar-success-bg:     $brand-success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg:     $brand-warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg:      $brand-danger !default;
+//** Info progress bar color
+$progress-bar-info-bg:        $brand-info !default;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg:                 #fff !default;
+//** `.list-group-item` border color
+$list-group-border:             #ddd !default;
+//** List group border radius
+$list-group-border-radius:      $border-radius-base !default;
+
+//** Background color of single list items on hover
+$list-group-hover-bg:           #f5f5f5 !default;
+//** Text color of active list items
+$list-group-active-color:       $component-active-color !default;
+//** Background color of active list items
+$list-group-active-bg:          $component-active-bg !default;
+//** Border color of active list elements
+$list-group-active-border:      $list-group-active-bg !default;
+//** Text color for content within active list items
+$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+
+//** Text color of disabled list items
+$list-group-disabled-color:      $gray-light !default;
+//** Background color of disabled list items
+$list-group-disabled-bg:         $gray-lighter !default;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color:         #555 !default;
+$list-group-link-hover-color:   $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+
+
+//== Panels
+//
+//##
+
+$panel-bg:                    #fff !default;
+$panel-body-padding:          15px !default;
+$panel-heading-padding:       10px 15px !default;
+$panel-footer-padding:        $panel-heading-padding !default;
+$panel-border-radius:         $border-radius-base !default;
+
+//** Border color for elements within panels
+$panel-inner-border:          #ddd !default;
+$panel-footer-bg:             #f5f5f5 !default;
+
+$panel-default-text:          $gray-dark !default;
+$panel-default-border:        #ddd !default;
+$panel-default-heading-bg:    #f5f5f5 !default;
+
+$panel-primary-text:          #fff !default;
+$panel-primary-border:        $brand-primary !default;
+$panel-primary-heading-bg:    $brand-primary !default;
+
+$panel-success-text:          $state-success-text !default;
+$panel-success-border:        $state-success-border !default;
+$panel-success-heading-bg:    $state-success-bg !default;
+
+$panel-info-text:             $state-info-text !default;
+$panel-info-border:           $state-info-border !default;
+$panel-info-heading-bg:       $state-info-bg !default;
+
+$panel-warning-text:          $state-warning-text !default;
+$panel-warning-border:        $state-warning-border !default;
+$panel-warning-heading-bg:    $state-warning-bg !default;
+
+$panel-danger-text:           $state-danger-text !default;
+$panel-danger-border:         $state-danger-border !default;
+$panel-danger-heading-bg:     $state-danger-bg !default;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding:           4px !default;
+//** Thumbnail background color
+$thumbnail-bg:                $body-bg !default;
+//** Thumbnail border color
+$thumbnail-border:            #ddd !default;
+//** Thumbnail border radius
+$thumbnail-border-radius:     $border-radius-base !default;
+
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color:     $text-color !default;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding:   9px !default;
+
+
+//== Wells
+//
+//##
+
+$well-bg:                     #f5f5f5 !default;
+$well-border:                 darken($well-bg, 7%) !default;
+
+
+//== Badges
+//
+//##
+
+$badge-color:                 #fff !default;
+//** Linked badge text color on hover
+$badge-link-hover-color:      #fff !default;
+$badge-bg:                    $gray-light !default;
+
+//** Badge text color in active nav link
+$badge-active-color:          $link-color !default;
+//** Badge background color in active nav link
+$badge-active-bg:             #fff !default;
+
+$badge-font-weight:           bold !default;
+$badge-line-height:           1 !default;
+$badge-border-radius:         10px !default;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical:   8px !default;
+$breadcrumb-padding-horizontal: 15px !default;
+//** Breadcrumb background color
+$breadcrumb-bg:                 #f5f5f5 !default;
+//** Breadcrumb text color
+$breadcrumb-color:              #ccc !default;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color:       $gray-light !default;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator:          "/" !default;
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color:                      #fff !default;
+$carousel-control-width:                      15% !default;
+$carousel-control-opacity:                    .5 !default;
+$carousel-control-font-size:                  20px !default;
+
+$carousel-indicator-active-bg:                #fff !default;
+$carousel-indicator-border-color:             #fff !default;
+
+$carousel-caption-color:                      #fff !default;
+
+
+//== Close
+//
+//##
+
+$close-font-weight:           bold !default;
+$close-color:                 #000 !default;
+$close-text-shadow:           0 1px 0 #fff !default;
+
+
+//== Code
+//
+//##
+
+$code-color:                  #c7254e !default;
+$code-bg:                     #f9f2f4 !default;
+
+$kbd-color:                   #fff !default;
+$kbd-bg:                      #333 !default;
+
+$pre-bg:                      #f5f5f5 !default;
+$pre-color:                   $gray-dark !default;
+$pre-border-color:            #ccc !default;
+$pre-scrollable-max-height:   340px !default;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px !default;
+//** Text muted color
+$text-muted:                  $gray-light !default;
+//** Abbreviations and acronyms border color
+$abbr-border-color:           $gray-light !default;
+//** Headings small color
+$headings-small-color:        $gray-light !default;
+//** Blockquote small color
+$blockquote-small-color:      $gray-light !default;
+//** Blockquote font size
+$blockquote-font-size:        ($font-size-base * 1.25) !default;
+//** Blockquote border color
+$blockquote-border-color:     $gray-lighter !default;
+//** Page header border color
+$page-header-border-color:    $gray-lighter !default;
+//** Width of horizontal description list titles
+$dl-horizontal-offset:        $component-offset-horizontal !default;
+//** Point at which .dl-horizontal becomes horizontal
+$dl-horizontal-breakpoint:    $grid-float-breakpoint !default;
+//** Horizontal line color.
+$hr-border:                   $gray-lighter !default;
diff --git a/app/styles/_wip.scss b/app/styles/_wip.scss
new file mode 100644
index 0000000..f4955e6
--- /dev/null
+++ b/app/styles/_wip.scss
@@ -0,0 +1,76 @@
+.wip {
+
+			h2 {
+		      margin-bottom: 30px;
+					font-size: 3rem;
+		    }
+
+
+			.text-block {
+				margin-top: 30px;
+				margin-bottom: 30px;
+				text-align: justify;
+				font-size: 2rem;
+			}
+
+			.love {
+				color: $red !important;
+			}
+
+		.moving-animation {
+			position: relative;
+			left:0px;
+			-webkit-animation: shake 2s linear infinite;
+			-moz-animation:    shake 2s linear infinite;  /* Fx 5+ */
+			-o-animation:      shake 2s linear infinite;  /* Opera 12+ */
+			animation:         shake 2s linear infinite;  /* IE 10+ */
+		}
+
+		@-webkit-keyframes shake {
+			0% { left: -10px; }
+			5% { left: 10px; }
+			10% { left: -10px; }
+			15% { left: 10px; }
+			17% { left: 0px; }
+			100% { left: 0px; }
+		}
+
+		@-moz-keyframes shake {
+			0% { left: -10px; }
+			5% { left: 10px; }
+			10% { left: -10px; }
+			15% { left: 10px; }
+			17% { left: 0px; }
+			100% { left: 0px; }
+		}
+		@-o-keyframes shake {
+			0% { left: -10px; }
+			5% { left: 10px; }
+			10% { left: -10px; }
+			15% { left: 10px; }
+			17% { left: 0px; }
+			100% { left: 0px; }
+		}
+		@keyframes shake {
+			0% { left: -10px; }
+			5% { left: 10px; }
+			10% { left: -10px; }
+			15% { left: 10px; }
+			17% { left: 0px; }
+			100% { left: 0px; }
+		}
+
+
+}
+
+
+@media (max-width: $screen-sm-min) {
+
+  .wip {
+      h2 {
+        font-size: 2rem;
+      }
+
+  }
+
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index f3f5429..48054f9 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -1,91 +1,19 @@
 $icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
+
+//Boostrap
+@import "_variables.scss";
+
 // bower:scss
 @import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
 // endbower
 
-.browsehappy {
-  margin: 0.2em 0;
-  background: #ccc;
-  color: #000;
-  padding: 0.2em 0;
-}
-
-body {
-  padding: 0;
-}
-
-/* Everything but the jumbotron gets side spacing for mobile first views */
-.header,
-.marketing,
-.footer {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-/* Custom page header */
-.header {
-  border-bottom: 1px solid #e5e5e5;
-  margin-bottom: 10px;
-
-  /* Make the masthead heading the same height as the navigation */
-  h3 {
-    margin-top: 0;
-    margin-bottom: 0;
-    line-height: 40px;
-    padding-bottom: 19px;
-  }
-}
-
-/* Custom page footer */
-.footer {
-  padding-top: 19px;
-  color: #777;
-  border-top: 1px solid #e5e5e5;
-}
-
-.container-narrow > hr {
-  margin: 30px 0;
-}
-
-/* Main marketing message and sign up button */
-.jumbotron {
-  text-align: center;
-  border-bottom: 1px solid #e5e5e5;
-
-  .btn {
-    font-size: 21px;
-    padding: 14px 24px;
-  }
-}
-
-/* Supporting marketing content */
-.marketing {
-  margin: 40px 0;
-
-  p + h4 {
-    margin-top: 28px;
-  }
-}
-
-/* Responsive: Portrait tablets and up */
-@media screen and (min-width: 768px) {
-  .container {
-    max-width: 730px;
-  }
-
-  /* Remove the padding we set earlier */
-  .header,
-  .marketing,
-  .footer {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  /* Space out the masthead */
-  .header {
-    margin-bottom: 30px;
-  }
-  /* Remove the bottom border on the jumbotron for visual effect */
-  .jumbotron {
-    border-bottom: 0;
-  }
-}
+// Happybots
+@import "_bot.scss";
+@import "_botbar.scss";
+@import "_fonts.scss";
+@import "_flexbox.scss";
+@import "_wip.scss";
+@import "_about.scss";
+@import "_blinking.scss";
+@import "_global.scss";
+@import "_socialbuttons.scss";
diff --git a/app/views/about.html b/app/views/about.html
index d21bf89..5ccad38 100644
--- a/app/views/about.html
+++ b/app/views/about.html
@@ -1 +1,77 @@
-

This is the about view.

+
+
+
+
+ + +
+

Bip Bip... We are HAPPYBOTS

+

We develop bots for fun and for companies.
+ We love artificial intelligence and disruptive technologies.

+
+
+
+
+ +
+
+
+
+
+

Need a Bot?

+

We build bots with
Contact us if you need a bot for your company :)

+
+
+
+ +
+
+
+
+ +
+
+
+
+

Get to know us

+
+ +
+
+ Sandoche Picture +

+ Sandoche Adittane +

+
+ + +
+
+
+ +
+
+ Patricia Picture +

+ Patricia Mayo Tejedor +

+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+
diff --git a/app/views/bot.html b/app/views/bot.html new file mode 100644 index 0000000..0c80a72 --- /dev/null +++ b/app/views/bot.html @@ -0,0 +1,16 @@ +
+
+
+
+ +
+
+

Hello,

+ +

{{ Bot.description }}

+ Message Me Fork on github +
+
+
+
+ diff --git a/app/views/main.html b/app/views/main.html deleted file mode 100644 index 787f33e..0000000 --- a/app/views/main.html +++ /dev/null @@ -1,23 +0,0 @@ -
-

'Allo, 'Allo!

-

- I'm Yeoman
- Always a pleasure scaffolding your apps. -

-

Splendid!

-
- -
-

HTML5 Boilerplate

-

- HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. -

- -

Angular

-

- AngularJS is a toolset for building the framework most suited to your application development. -

- -

Karma

-

Spectacular Test Runner for JavaScript.

-
diff --git a/app/views/shared/botbar.html b/app/views/shared/botbar.html new file mode 100644 index 0000000..3f2d33c --- /dev/null +++ b/app/views/shared/botbar.html @@ -0,0 +1,10 @@ +
+
+
+
+ + +
+
+
+
diff --git a/app/views/shared/navbar.html b/app/views/shared/navbar.html new file mode 100644 index 0000000..e2fe78c --- /dev/null +++ b/app/views/shared/navbar.html @@ -0,0 +1,24 @@ + diff --git a/app/views/shared/newsletter.html b/app/views/shared/newsletter.html new file mode 100644 index 0000000..d0c98e9 --- /dev/null +++ b/app/views/shared/newsletter.html @@ -0,0 +1,20 @@ +
+
+
+
+ + +
+ +
+ +
+ + + + +
+
+
+
+
diff --git a/app/views/shared/socialbuttons.html b/app/views/shared/socialbuttons.html new file mode 100644 index 0000000..352e22d --- /dev/null +++ b/app/views/shared/socialbuttons.html @@ -0,0 +1,7 @@ + diff --git a/app/views/wip.html b/app/views/wip.html new file mode 100644 index 0000000..b804f73 --- /dev/null +++ b/app/views/wip.html @@ -0,0 +1,21 @@ +
+
+
+
+ +
+
+

Oh my god! {{ newBotName }} is hatching! It will grow up to be the best {{ feature }} bot!

+ +
+

We build bots with
Contact us if you need a bot for your company :)

+
+ + + + + +
+
+
+ diff --git a/bower.json b/bower.json index 0693793..78c3ef7 100644 --- a/bower.json +++ b/bower.json @@ -7,7 +7,8 @@ "angular-animate": "^1.4.0", "angular-route": "^1.4.0", "angular-sanitize": "^1.4.0", - "angular-touch": "^1.4.0" + "angular-touch": "^1.4.0", + "angular-typer": "^0.5.6" }, "devDependencies": { "angular-mocks": "^1.4.0" diff --git a/package.json b/package.json index 4bf6f48..6fbd254 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "grunt-contrib-uglify": "^0.7.0", "grunt-contrib-watch": "^0.6.1", "grunt-filerev": "^2.1.2", + "grunt-gh-pages": "^1.1.0", "grunt-google-cdn": "^0.4.3", "grunt-jscs": "^1.8.0", "grunt-newer": "^1.1.0", @@ -27,8 +28,8 @@ "grunt-usemin": "^3.0.0", "grunt-wiredep": "^2.0.0", "jit-grunt": "^0.9.1", - "time-grunt": "^1.0.0", - "jshint-stylish": "^1.0.0" + "jshint-stylish": "^1.0.0", + "time-grunt": "^1.0.0" }, "engines": { "node": ">=0.10.0" diff --git a/test/karma.conf.js b/test/karma.conf.js index c64a174..b174fed 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -29,6 +29,7 @@ module.exports = function(config) { 'bower_components/angular-route/angular-route.js', 'bower_components/angular-sanitize/angular-sanitize.js', 'bower_components/angular-touch/angular-touch.js', + 'bower_components/angular-typer/dist/typer.min.js', 'bower_components/angular-mocks/angular-mocks.js', // endbower "app/scripts/**/*.js", diff --git a/test/spec/controllers/bot.js b/test/spec/controllers/bot.js new file mode 100644 index 0000000..c3751e1 --- /dev/null +++ b/test/spec/controllers/bot.js @@ -0,0 +1,23 @@ +'use strict'; + +describe('Controller: BotCtrl', function () { + + // load the controller's module + beforeEach(module('happybotsApp')); + + var BotCtrl, + scope; + + // Initialize the controller and a mock scope + beforeEach(inject(function ($controller, $rootScope) { + scope = $rootScope.$new(); + BotCtrl = $controller('BotCtrl', { + $scope: scope + // place here mocked dependencies + }); + })); + + it('should attach a list of awesomeThings to the scope', function () { + expect(BotCtrl.awesomeThings.length).toBe(3); + }); +}); diff --git a/test/spec/controllers/contact.js b/test/spec/controllers/contact.js new file mode 100644 index 0000000..2d469ad --- /dev/null +++ b/test/spec/controllers/contact.js @@ -0,0 +1,23 @@ +'use strict'; + +describe('Controller: ContactCtrl', function () { + + // load the controller's module + beforeEach(module('happybotsApp')); + + var ContactCtrl, + scope; + + // Initialize the controller and a mock scope + beforeEach(inject(function ($controller, $rootScope) { + scope = $rootScope.$new(); + ContactCtrl = $controller('ContactCtrl', { + $scope: scope + // place here mocked dependencies + }); + })); + + it('should attach a list of awesomeThings to the scope', function () { + expect(ContactCtrl.awesomeThings.length).toBe(3); + }); +}); diff --git a/test/spec/controllers/wip.js b/test/spec/controllers/wip.js new file mode 100644 index 0000000..10c2809 --- /dev/null +++ b/test/spec/controllers/wip.js @@ -0,0 +1,23 @@ +'use strict'; + +describe('Controller: WipCtrl', function () { + + // load the controller's module + beforeEach(module('happybotsApp')); + + var WipCtrl, + scope; + + // Initialize the controller and a mock scope + beforeEach(inject(function ($controller, $rootScope) { + scope = $rootScope.$new(); + WipCtrl = $controller('WipCtrl', { + $scope: scope + // place here mocked dependencies + }); + })); + + it('should attach a list of awesomeThings to the scope', function () { + expect(WipCtrl.awesomeThings.length).toBe(3); + }); +}); diff --git a/test/spec/directives/botbar.js b/test/spec/directives/botbar.js new file mode 100644 index 0000000..8d9d71d --- /dev/null +++ b/test/spec/directives/botbar.js @@ -0,0 +1,20 @@ +'use strict'; + +describe('Directive: botBar', function () { + + // load the directive's module + beforeEach(module('happybotsApp')); + + var element, + scope; + + beforeEach(inject(function ($rootScope) { + scope = $rootScope.$new(); + })); + + it('should make hidden element visible', inject(function ($compile) { + element = angular.element(''); + element = $compile(element)(scope); + expect(element.text()).toBe('this is the botBar directive'); + })); +}); diff --git a/test/spec/services/botsdata.js b/test/spec/services/botsdata.js new file mode 100644 index 0000000..ec6fe8c --- /dev/null +++ b/test/spec/services/botsdata.js @@ -0,0 +1,18 @@ +'use strict'; + +describe('Service: botsData', function () { + + // load the service's module + beforeEach(module('happybotsApp')); + + // instantiate service + var botsData; + beforeEach(inject(function (_botsData_) { + botsData = _botsData_; + })); + + it('should do something', function () { + expect(!!botsData).toBe(true); + }); + +});