diff --git a/views/ngXosViews/subscriberPortal/.bowerrc b/views/ngXosViews/subscriberPortal/.bowerrc
new file mode 100644
index 0000000..bfd1e92
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "src/bower_components/"
+}
diff --git a/views/ngXosViews/.gitignore b/views/ngXosViews/subscriberPortal/.gitignore
similarity index 100%
rename from views/ngXosViews/.gitignore
rename to views/ngXosViews/subscriberPortal/.gitignore
diff --git a/views/ngXosViews/.gitignore b/views/ngXosViews/subscriberPortal/README.md
similarity index 100%
copy from views/ngXosViews/.gitignore
copy to views/ngXosViews/subscriberPortal/README.md
diff --git a/views/ngXosViews/subscriberPortal/bower.json b/views/ngXosViews/subscriberPortal/bower.json
new file mode 100644
index 0000000..97332ba
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/bower.json
@@ -0,0 +1,25 @@
+{
+  "name": "subscriber-portal",
+  "description": "Demo implementation for a subscriber portal in XOS",
+  "main": "index.js",
+  "authors": [
+    "Matteo Scandolo"
+  ],
+  "license": "ISC",
+  "homepage": "https://github.com/open-cloud/xos",
+  "moduleType": [],
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "angular-animate": "~1.4.9",
+    "jquery": "~2.2.0",
+    "angular-resource": "~1.4.9",
+    "angular-route": "~1.4.9"
+  }
+}
diff --git a/views/ngXosViews/subscriberPortal/bs-config.js b/views/ngXosViews/subscriberPortal/bs-config.js
new file mode 100644
index 0000000..70f476a
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/bs-config.js
@@ -0,0 +1,63 @@
+
+/*
+ |--------------------------------------------------------------------------
+ | Browser-sync config file
+ |--------------------------------------------------------------------------
+ |
+ | For up-to-date information about the options:
+ |   http://www.browsersync.io/docs/options/
+ |
+ | There are more options than you see here, these are just the ones that are
+ | set internally. See the website for more info.
+ |
+ |
+ */
+
+var httpProxy = require('http-proxy');
+var environment = process.env.NODE_ENV;
+
+if (environment){
+    var conf = require(`./env/${environment}.js`);
+}
+else{
+    var conf = require('./env/default.js')
+}
+
+var proxy = httpProxy.createProxyServer({
+    target: conf.host || 'http://0.0.0.0:9999'
+});
+
+proxy.on('error', function(error, req, res) {
+    res.writeHead(500, {
+        'Content-Type': 'text/plain'
+    });
+    console.error('[Proxy]', error);
+});
+
+module.exports = {
+    "files": [
+        './src/**/*'
+    ],
+    "server": {
+        baseDir: './src',
+        middleware: function(req, res, next){
+            if(
+              req.url.indexOf('/xos/') !== -1 ||
+              req.url.indexOf('/xoslib/') !== -1 ||
+              req.url.indexOf('/hpcapi/') !== -1 ||
+              req.url.indexOf('/rs/') !== -1
+            ){
+                if(conf.xoscsrftoken && conf.xossessionid){
+                    req.headers.cookie = `xoscsrftoken=${conf.xoscsrftoken}; xossessionid=${conf.xossessionid}`;
+                    req.headers['x-csrftoken'] = conf.xoscsrftoken;
+                }
+                proxy.web(req, res);
+            }
+            else{
+                next();
+            }
+        }
+    },
+    "port": 3000,
+    "open": "local"
+};
\ No newline at end of file
diff --git a/views/ngXosViews/subscriberPortal/env/default.js b/views/ngXosViews/subscriberPortal/env/default.js
new file mode 100644
index 0000000..a4c949a
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/env/default.js
@@ -0,0 +1,13 @@
+// This is a default configuration for your development environment.
+// You can duplicate this configuration for any of your Backend Environments.
+// Different configurations are loaded setting a NODE_ENV variable that contain the config file name.
+// `NODE_ENV=local npm start`
+//
+// If xoscsrftoken or xossessionid are not specified the browser value are used
+// (works only for local environment as both application are served on the same domain)
+
+module.exports = {
+  host: 'http://clnode078.clemson.cloudlab.us:9999/',
+  xoscsrftoken: 'jhkNhrGWS7FyvzPAWEsJtVkgwYSODDhm',
+  xossessionid: 'dr26sgw3bixae7pqyy7soydf864a554u'
+};
diff --git a/views/ngXosViews/subscriberPortal/package.json b/views/ngXosViews/subscriberPortal/package.json
new file mode 100644
index 0000000..d1be078
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "subscriber-portal",
+  "version": "1.0.0",
+  "description": "Demo implementation for a subscriber portal in XOS",
+  "main": "index.js",
+  "scripts": {
+    "test": "karma start",
+    "start": "browser-sync start --config bs-config.js"
+  },
+  "author": "Matteo Scandolo",
+  "license": "ISC",
+  "devDependencies": {
+    "browser-sync": "^2.11.1",
+    "http-proxy": "^1.12.1"
+  }
+}
diff --git a/views/ngXosViews/subscriberPortal/src/app/data/pc_cats.json b/views/ngXosViews/subscriberPortal/src/app/data/pc_cats.json
new file mode 100644
index 0000000..299fc13
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/data/pc_cats.json
@@ -0,0 +1,135 @@
+{
+  "_comment_": "Parental Control Categories - data file",
+
+  "level_order": [
+    "NONE", "G", "PG", "PG_13", "R", "ALL"
+  ],
+
+  "category_order": [
+    "Safe", "Search", "Shopping", "Sports", "Privacy", "Dating", "Games",
+    "Social", "Illegal", "Weapons", "Drugs", "Gambling", "Cyberbully",
+    "Pornography", "Adult", "Anonymizers", "Suicide", "Malware"
+  ],
+
+  "descriptions": {
+    "Safe": [
+      "."
+    ],
+    "Search": [
+      "Sites which provide the ability to perform searches for specific ",
+      "topics or websites across the entire Internet, and which display ",
+      "results in a multi-page format that allows material to be sorted ",
+      "based on content, topic, or file type."
+    ],
+    "Shopping": [
+      "."
+    ],
+    "Sports": [
+      "Sites which analyze, promote, or providing information about ",
+      "competitive sports and its fans whether official or unofficial."
+    ],
+    "Privacy": [
+      "Sites which provide hosted online advertising intended to attract ",
+      "web traffic, deliver marketing messages or capture email addresses."
+    ],
+    "Dating": [
+      "Sites which promote or provide the opportunity for establishing ",
+      "romantic relationship."
+    ],
+    "Games": [
+      "Sites which related to the development, promotion, review, and ",
+      "enjoyment of online, PC, and console videogaming."
+    ],
+    "Social": [
+      "Sites which facilitate online socializing and the development or ",
+      "maintenance of personal and professional relationships across ",
+      "geographical and organizational boundaries."
+    ],
+    "Illegal": [
+      "Sites which promote or provide the means to practice illegal or ",
+      "unauthorized acts using computer-programming skills. And sites ",
+      "which offer custom academic writing services for free or for ",
+      "purchase. These sites are geared toward students who do not want ",
+      "to write their own papers, but will download or buy previously ",
+      "written or custom written papers."
+    ],
+    "Weapons": [
+      "Sites which sell, manufacture, or describe the manufacture of weapons."
+    ],
+    "Drugs": [
+      "Sites which promote, offer, sell, supply, encourage or otherwise ",
+      "advocate the recreational or illegal use, cultivation, manufacture, ",
+      "or distribution of drugs, pharmaceuticals, intoxicating plants or ",
+      "chemicals and their related paraphernalia. And sites which glamorize, ",
+      "glorify, tout or otherwise encourage the consumption of alcohol. And ",
+      "sites which sell, glamorize, enable or encourage the use of tobacco ",
+      "and tobacco-related products."
+    ],
+    "Gambling": [
+      "."
+    ],
+    "Cyberbully": [
+      "Sites or pages where people post targeted, deliberate and slanderous ",
+      "or offensive content about other people with the INTENT to torment, ",
+      "threaten, humiliate or defame them. Content is often sexual, ",
+      "malicious or hostile in nature and is submitted via interactive ",
+      "digital technology. And sites which advocate hostility, aggression ",
+      "and the denigration of an individual or group on the basis of race, ",
+      "religion, gender, nationality, ethnic origin, or other involuntary ",
+      "characteristics. Sites that use purported scientific or commonly ",
+      "accredited methods to justify inequality, aggression, and hostility."
+    ],
+    "Pornography": [
+      "Sites which contain explicit material for the purpose of causing ",
+      "sexual excitement or arousing lascivious interest."
+    ],
+    "Adult": [
+      "Sites which contain sexually explicit information that is not ",
+      "medical or scientific nature and yet are also not pornographic. ",
+      "And sites which feature social or family nudism/naturism, nudist ",
+      "camps/resorts, or „nudist-only‟ travel."
+    ],
+    "Anonymizers": [
+      "Sites which provide anonymous access to websites through a PHP or ",
+      "CGI proxy, allowing users to gain access to websites blocked by ",
+      "corporate and school proxies as well as parental control filtering ",
+      "solutions."
+    ],
+    "Suicide": [
+      "Sites which advocate, normalize, or glamourize repetitive and ",
+      "deliberate ways to inflict non-fatal harm to oneself. And sites ",
+      "advocating or glorifying suicide as well as educating people on how ",
+      "to commit suicide."
+    ],
+    "Malware": [
+      "Sites where the domain was found to either contain malware or take ",
+      "advantage of other exploits to deliver adware, spyware or malware. ",
+      "And Sites that contain direct links to malware file downloads: ",
+      ".exe, .dll, .ocx, and others. These URLs are generally highly malicious."
+    ]
+  },
+
+  "_prohibited_comment_": [
+    "Note: Level NONE allows nothing (prohibits everything)",
+    "      level ALL allows everything (prohibits nothing)",
+    "      Levels G, PG, PG_13, R prohibitions listed below:"
+  ],
+
+  "prohibited": {
+    "G": [
+      "Games", "Social", "Illegal", "Weapons", "Drugs", "Gambling",
+      "Cyberbully", "Pornography", "Adult", "Anonymizers", "Suicide", "Malware"
+    ],
+    "PG": [
+      "Social", "Illegal", "Weapons", "Drugs", "Gambling",
+      "Cyberbully", "Pornography", "Adult", "Anonymizers", "Suicide", "Malware"
+    ],
+    "PG_13": [
+      "Illegal", "Weapons", "Drugs", "Gambling",
+      "Cyberbully", "Pornography", "Adult", "Anonymizers", "Suicide", "Malware"
+    ],
+    "R": [
+      "Pornography", "Adult", "Anonymizers", "Suicide", "Malware"
+    ]
+  }
+}
diff --git a/views/ngXosViews/subscriberPortal/src/app/fw/foot/foot.css b/views/ngXosViews/subscriberPortal/src/app/fw/foot/foot.css
new file mode 100644
index 0000000..b8746d6
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/fw/foot/foot.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+div.foot {
+    width: 100%;
+    height: 30px;
+    background-color: white;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
+    z-index: 100;
+    box-shadow: 0 10px 5px 10px gray;
+}
+
+.foot div {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    font-style: italic;
+    font-size: 12px;
+    color: #3C3C3C;
+}
+
+.foot div.left {
+    left: 25px;
+}
+
+.foot div.right {
+    right: 25px;
+}
diff --git a/views/ngXosViews/subscriberPortal/src/app/fw/foot/foot.html b/views/ngXosViews/subscriberPortal/src/app/fw/foot/foot.html
new file mode 100644
index 0000000..ac21269
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/fw/foot/foot.html
@@ -0,0 +1,10 @@
+<!--Foot partial html-->
+<div class="foot">
+    <div class="left">
+
+    </div>
+
+    <div class="right">
+        © ONOS Project. All rights reserved.
+    </div>
+</div>
diff --git a/views/ngXosViews/subscriberPortal/src/app/fw/foot/foot.js b/views/ngXosViews/subscriberPortal/src/app/fw/foot/foot.js
new file mode 100644
index 0000000..fdaabb8
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/fw/foot/foot.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+angular.module('cordFoot', [])
+    .directive('foot', function () {
+        return {
+            restrict: 'E',
+            templateUrl: 'app/fw/foot/foot.html'
+        };
+    });
diff --git a/views/ngXosViews/subscriberPortal/src/app/fw/icon/icon.js b/views/ngXosViews/subscriberPortal/src/app/fw/icon/icon.js
new file mode 100644
index 0000000..b0d48fa
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/fw/icon/icon.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+    'use strict';
+
+    angular.module('cordGui')
+
+        .directive('icon', [function () {
+            return {
+                restrict: 'E',
+                compile: function (element, attrs) {
+                    var html =
+                        '<svg class="embedded-icon" width="' + attrs.size + '" ' +
+                        'height="' + attrs.size + '" viewBox="0 0 50 50">' +
+                            '<g class="icon">' +
+                                '<circle cx="25" cy="25" r="25"></circle>' +
+                                '<use width="50" height="50" class="glyph '
+                                + attrs.id + '" xlink:href="#' + attrs.id +
+                                '"></use>' +
+                            '</g>' +
+                        '</svg>';
+                    element.replaceWith(html);
+                }
+            };
+        }]);
+}());
diff --git a/views/ngXosViews/subscriberPortal/src/app/fw/mast/mast.css b/views/ngXosViews/subscriberPortal/src/app/fw/mast/mast.css
new file mode 100644
index 0000000..b79d89e
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/fw/mast/mast.css
@@ -0,0 +1,63 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+div.mast {
+    width: 100%;
+    height: 85px;
+    background-color: white;
+    position: relative;
+    box-shadow: 0 10px 5px -7px gray;
+    z-index: 100;
+}
+
+.mast div {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+.mast div.left {
+    left: 25px;
+}
+
+.mast div.right {
+    right: 7%;
+    width: 37%;
+}
+
+.mast img {
+    width: 220px;
+}
+
+.mast a,
+.mast a:visited {
+    text-decoration: none;
+    color: #3C3C3C;
+}
+
+.mast li.logout {
+    list-style-type: none;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+    font-size: 90%;
+}
+.mast li.logout:hover {
+    font-weight: bold;
+    list-style-type: none;
+    cursor: pointer;
+}
diff --git a/views/ngXosViews/subscriberPortal/src/app/fw/mast/mast.html b/views/ngXosViews/subscriberPortal/src/app/fw/mast/mast.html
new file mode 100644
index 0000000..2ff7f94
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/fw/mast/mast.html
@@ -0,0 +1,14 @@
+<!--Mast HTML-->
+
+<div class="mast" ng-controller="CordMastCtrl">
+    <div class="left">
+        <img src="/imgs/logo.png">
+    </div>
+
+    <div class="right">
+        <nav ng-show="page.curr !== 'login'"></nav>
+        <li class="logout"
+           ng-show="page.curr !== 'login'"
+           ng-click="logout()">LOGOUT</li>
+    </div>
+</div>
diff --git a/views/ngXosViews/subscriberPortal/src/app/fw/mast/mast.js b/views/ngXosViews/subscriberPortal/src/app/fw/mast/mast.js
new file mode 100644
index 0000000..090cb59
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/fw/mast/mast.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+    'use strict';
+
+    var urlSuffix = '/rs/logout';
+
+    angular.module('cordMast', [])
+        .controller('CordMastCtrl',
+        ['$log','$scope', '$resource', '$location', '$window',
+            function ($log, $scope, $resource, $location, $window) {
+                var LogoutData, resource;
+
+                $scope.logout = function () {
+                    $log.debug('Logging out...');
+                    LogoutData = $resource($scope.shared.url + urlSuffix);
+                    resource = LogoutData.get({},
+                        function () {
+                            $location.path('/login');
+                            $window.location.href = $location.absUrl();
+                            $log.debug('Resource received:', resource);
+                        });
+                };
+            }])
+
+        .directive('mast', function () {
+            return {
+                restrict: 'E',
+                templateUrl: 'app/fw/mast/mast.html'
+            };
+        });
+}());
diff --git a/views/ngXosViews/subscriberPortal/src/app/fw/nav/nav.css b/views/ngXosViews/subscriberPortal/src/app/fw/nav/nav.css
new file mode 100644
index 0000000..464f95b
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/fw/nav/nav.css
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.nav ul {
+    display: table;
+    table-layout: fixed;
+    list-style-type: none;
+    width: 80%;
+}
+
+.nav li {
+    padding: 2.5% 0;
+    color: #3C3C3C;
+}
+.nav li:hover {
+    border-bottom: 2px solid #CE5650;
+    color: black;
+}
+.nav li.selected {
+    font-weight: bolder;
+    color: #3C3C3C;
+    letter-spacing: 0.03em;
+    border-bottom: 2px solid #CE5650;
+}
+
+.nav a,
+.nav a:visited {
+    display: table-cell;
+    text-align: center;
+    text-decoration: none;
+    color: black;
+}
diff --git a/views/ngXosViews/subscriberPortal/src/app/fw/nav/nav.html b/views/ngXosViews/subscriberPortal/src/app/fw/nav/nav.html
new file mode 100644
index 0000000..d87f961
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/fw/nav/nav.html
@@ -0,0 +1,17 @@
+<!--Nav HTML-->
+<div class="nav">
+    <ul>
+        <a href="#/home">
+            <li ng-class="{selected: page.curr === 'dashboard'}"
+                ng-click="$route.reload()">Home</li>
+        </a>
+        <a href="#/user">
+            <li ng-class="{selected: page.curr === 'user'}"
+                ng-click="$route.reload()">Users</li>
+        </a>
+        <a href="#/bundle">
+            <li ng-class="{selected: page.curr === 'bundle'}"
+                ng-click="$route.reload()">Bundles</li>
+        </a>
+    </ul>
+</div>
diff --git a/views/ngXosViews/subscriberPortal/src/app/fw/nav/nav.js b/views/ngXosViews/subscriberPortal/src/app/fw/nav/nav.js
new file mode 100644
index 0000000..9ba3e37
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/fw/nav/nav.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+angular.module('cordNav', [])
+    .directive('nav', function () {
+        return {
+            restrict: 'E',
+            templateUrl: 'app/fw/nav/nav.html'
+        };
+    });
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/bundle/available.html b/views/ngXosViews/subscriberPortal/src/app/view/bundle/available.html
new file mode 100644
index 0000000..6f300d4
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/bundle/available.html
@@ -0,0 +1,5 @@
+<div ng-cloak class="ng-hide ng-cloak" ng-show="show" id="available">
+    <h3>{{available.name}}</h3>
+    <p>{{available.desc}}</p>
+    <button ng-click="changeBundle(available.id)">Apply</button>
+</div>
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/bundle/bundle.css b/views/ngXosViews/subscriberPortal/src/app/view/bundle/bundle.css
new file mode 100644
index 0000000..84fa842
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/bundle/bundle.css
@@ -0,0 +1,105 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+div#bundle div.main-left {
+    width: 61%;
+    padding: 4% 0 0 1%;
+}
+div#bundle div.main-right {
+    width: 37%;
+    padding-top: 4%;
+}
+
+#bundle table {
+    width: 95%;
+    margin-top: 5%;
+    margin-left: 2%;
+    border-radius: 3px;
+}
+
+#bundle td {
+    font-size: 90%;
+}
+#bundle td.icon {
+    text-align: center;
+    width: 50px;
+    height: 50px;
+    padding: 4%;
+}
+#bundle td.name {
+    border-left: solid 1px rgba(136, 0, 0, 0.25);
+    padding-left: 3%;
+}
+#bundle td.desc {
+    width: 60%;
+    text-align: left;
+    font-style: italic;
+}
+/* animation specific */
+#bundle tr.fadein.ng-leave td.name,
+#bundle tr.fadein.ng-leave-active td.name {
+    opacity: 0;
+    border: none;
+}
+
+#bundle img {
+    width: 100%;
+}
+
+#bundle h2 {
+    text-align: center;
+    padding: 3%;
+    font-weight: lighter;
+    border: 1px solid #3C3C3C;
+    cursor: pointer;
+}
+#bundle h2:hover {
+    color: #CE5650;
+    border-color: #CE5650;
+}
+
+div#bundles {
+    position: relative;
+}
+
+div#available.ng-hide-add.ng-hide-add-active,
+div#available.ng-hide-remove.ng-hide-remove-active {
+    -webkit-transition: all linear 0.5s;
+    transition: all linear 0.5s;
+}
+div#available.ng-hide {
+    opacity: 0;
+    top: -80px;
+}
+
+div#available {
+    position: absolute;
+    padding: 5%;
+    opacity: 1;
+    top: -10px;
+    width: 100%;
+}
+
+#available p {
+    text-indent: initial;
+    text-align: initial;
+}
+
+#available button {
+    float: right;
+    width: 33%;
+    margin-top: 5%;
+}
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/bundle/bundle.html b/views/ngXosViews/subscriberPortal/src/app/view/bundle/bundle.html
new file mode 100644
index 0000000..8852d86
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/bundle/bundle.html
@@ -0,0 +1,24 @@
+<!-- Bundle page partial html -->
+<div id="bundle" class="container">
+    <div class="main-left">
+        <h4>You are subscribed to the</h4>
+        <h3>{{name}}</h3>
+        <p>{{desc}}</p>
+        <table>
+            <tr ng-repeat="func in funcs" class="fadein">
+                <td class="icon">
+                    <img ng-src="{{'/imgs/' + func.id + '.png'}}">
+                </td>
+                <td class="name">{{func.name}}</td>
+                <td class="desc">{{func.desc}}</td>
+            </tr>
+        </table>
+    </div>
+    <div class="main-right">
+        <img src="imgs/bundle.jpg">
+        <div ng-click="showBundles()">
+            <h2>Available Bundles</h2>
+        </div>
+        <div id="bundles" bundle-available></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/bundle/bundle.js b/views/ngXosViews/subscriberPortal/src/app/view/bundle/bundle.js
new file mode 100644
index 0000000..a5b59d0
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/bundle/bundle.js
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+    'use strict';
+
+    var urlSuffix = '/rs/bundle';
+
+    var basic = 'basic',
+        family = 'family';
+
+    angular.module('cordBundle', [])
+        .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
+            function ($log, $scope, $resource) {
+                var BundleData, resource,
+                    getData;
+                $scope.page.curr = 'bundle';
+                $scope.show = false;
+
+                getData = function (id) {
+                    if (!id) { id = ''; }
+
+                    BundleData = $resource($scope.shared.url + urlSuffix + '/' + id);
+                    resource = BundleData.get({},
+                        // success
+                        function () {
+                            var current, availId;
+                            current = resource.bundle.id;
+                            $scope.name = resource.bundle.name;
+                            $scope.desc = resource.bundle.desc;
+                            $scope.funcs = resource.bundle.functions;
+
+                            availId = (current === basic) ? family : basic;
+                            resource.bundles.forEach(function (bundle) {
+                                if (bundle.id === availId) {
+                                    $scope.available = bundle;
+                                }
+                            });
+                        },
+                        // error
+                        function () {
+                            $log.error('Problem with resource', resource);
+                        });
+                };
+
+                getData();
+
+                $scope.changeBundle = function (id) {
+                    getData(id);
+                };
+
+                $scope.showBundles = function () {
+                    $scope.show = !$scope.show;
+                };
+
+                $log.debug('Cord Bundle Ctrl has been created.');
+            }])
+
+        .directive('bundleAvailable', [function () {
+            return {
+                templateUrl: 'app/view/bundle/available.html'
+            };
+        }]);
+}());
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/common/common.css b/views/ngXosViews/subscriberPortal/src/app/view/common/common.css
new file mode 100644
index 0000000..c2bc96d
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/common/common.css
@@ -0,0 +1,176 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+[ng\:cloak], [ng-cloak], .ng-cloak {
+    display: none !important;
+}
+
+html, body, div#frame, div#view {
+    height: 100%;
+}
+
+head, body, footer,
+h1, h2, h3, h4, h5, h6, p,
+a, ul, li, div,
+table, tr, td, th, thead, tbody,
+form, select, input, option, label {
+    padding: 0;
+    margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6,
+p, a, li, th, td,
+select, input, option, label {
+    font-family: sans-serif, "Droid Sans", "Lucida Grande", Arial, Helvetica;
+    color: #3C3C3C;
+}
+
+body {
+    background-color: white;
+    overflow: hidden;
+}
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+th, td {
+    color: rgba(0, 0, 0, 0.8);
+}
+h3 {
+    margin-bottom: 4%;
+    font-size: xx-large;
+    font-weight: lighter;
+}
+h4 {
+    font-size: large;
+    font-weight: lighter;
+}
+h5 {
+    color: rgb(107, 107, 107);
+    font-style: italic;
+    font-weight: normal;
+    font-size: 90%;
+    margin-bottom: 1%;
+}
+p {
+    font-size: 100%;
+    color: rgba(0,0,0, 0.8);
+    text-indent: 20px;
+    text-align: justify;
+    padding-right: 5%;
+}
+th {
+    background-color: #7AB6EA;
+    color: white;
+    letter-spacing: 0.05em;
+    font-weight: lighter;
+}
+
+button,
+input[type="button"],
+input[type="reset"] {
+    height: 30px;
+    box-shadow: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    letter-spacing: 0.02em;
+    font-size: 14px;
+    background-color: lightgray;
+    transition: background-color 0.4s;
+}
+button:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+    color: white;
+    background-color: rgb(122, 188, 229);
+}
+
+button[disabled],
+input[type="button"][disabled],
+input[type="reset"][disabled] {
+    background-color: lightgray;
+    color: graytext;
+}
+
+
+button[disabled]:hover,
+input[type="button"][disabled]:hover,
+input[type="reset"][disabled]:hover {
+    cursor: default;
+}
+
+div.container {
+    width: 85%;
+    margin: 0 auto;
+    min-height: 100%;
+}
+div.main-left, div.main-right {
+    float: left;
+}
+div.main-left {
+    width: 37%;
+    padding-left: 1%;
+}
+div.main-right {
+    width: 61%;
+}
+
+svg#icon-defs {
+    display: none;
+}
+
+g.icon circle {
+    fill: none;
+}
+g.icon use.glyph.checkMark {
+    fill: rgb(68, 189, 83)
+}
+g.icon use.glyph.xMark {
+    fill: #CE5650;
+}
+
+th.user-pic {
+    background-color: white;
+}
+th.user-pic,
+td.user-pic {
+    width: 30px;
+    padding-left: 4%;
+}
+td.user-pic img {
+    width: 25px;
+}
+
+/* animation */
+.fadein {
+    transition: all linear 0.5s;
+}
+.fadein.ng-enter-stagger,
+.fadein.ng-leave-stagger {
+    transition-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+.fadein.ng-enter {
+    opacity: 0;
+}
+.fadein.ng-enter.ng-enter-active {
+    opacity: 1;
+}
+.fadein.ng-leave,
+.fadein.ng-leave-active {
+    opacity: 0;
+}
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/home/home.css b/views/ngXosViews/subscriberPortal/src/app/view/home/home.css
new file mode 100644
index 0000000..58f07a5
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/home/home.css
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#home div.main-left {
+    width: 55%;
+    padding: 0;
+}
+#home div.main-right {
+    padding: 1% 0 0 3%;
+    width: 42%;
+}
+#home div.move-down {
+    margin-top: 5%;
+}
+
+#home div.image-holder {
+    width: 100%;
+    position: relative;
+}
+
+#home div.main-left img {
+    width: 100%;
+}
+
+#home div.main-right div.bundle-title {
+    padding: 2% 0;
+}
+
+#home h4 {
+    padding-bottom: 2%;
+}
+
+#home p {
+    margin-bottom: 3%;
+}
+
+#home table {
+    width: 94%;
+    table-layout: fixed;
+    margin-left: 6%;
+    border-left: 1px solid #CE5650;
+}
+
+#home table.users th,
+#home table.users td {
+    font-size: 90%;
+}
+
+#home td, #home th {
+    text-align: left;
+    padding: 2%;
+}
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/home/home.html b/views/ngXosViews/subscriberPortal/src/app/view/home/home.html
new file mode 100644
index 0000000..27f0d96
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/home/home.html
@@ -0,0 +1,40 @@
+<!-- Home page partial html -->
+<div id="home" class="container">
+    <div class="main-left">
+        <img src="/imgs/home.jpg">
+    </div>
+
+    <div class="main-right">
+        <div class="move-down">
+            <div class="bundle-title">
+                <h4>Welcome Dad!</h4>
+                <h5>You are subscribed to the</h5>
+                <h3>{{bundle_name}}</h3>
+            </div>
+
+            <p>{{bundle_desc}}</p>
+
+
+            <h4>Users</h4>
+            <table class="users">
+                <thead>
+                    <tr>
+                        <th class="user-pic"></th>
+                        <th>Name</th>
+                        <th>Last Login</th>
+                    </tr>
+                </thead>
+                <tbody>
+
+                <tr ng-repeat="user in users" class="fadein">
+                        <td class="user-pic">
+                            <img ng-src="{{'/imgs/' + user.icon_id + '.jpg'}}">
+                        </td>
+                        <td>{{user.name}}</td>
+                        <td>{{shared.userActivity[user.id]}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/home/home.js b/views/ngXosViews/subscriberPortal/src/app/view/home/home.js
new file mode 100644
index 0000000..8e009d9
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/home/home.js
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+    'use strict';
+
+    var urlSuffix = '/rs/dashboard';
+
+    function randomDate(start, end) {
+        return new Date(
+            start.getTime() + Math.random() * (end.getTime() - start.getTime())
+        );
+    }
+
+    angular.module('cordHome', [])
+        .controller('CordHomeCtrl', ['$log', '$scope', '$resource', '$filter',
+            function ($log, $scope, $resource, $filter) {
+                var DashboardData, resource;
+                $scope.page.curr = 'dashboard';
+
+                DashboardData = $resource($scope.shared.url + urlSuffix);
+                resource = DashboardData.get({},
+                    // success
+                    function () {
+                        $scope.bundle_name = resource.bundle_name;
+                        $scope.bundle_desc = resource.bundle_desc;
+                        $scope.users = resource.users;
+
+                        if ($.isEmptyObject($scope.shared.userActivity)) {
+                            $scope.users.forEach(function (user) {
+                                var date = randomDate(new Date(2015, 0, 1),
+                                    new Date());
+
+                                $scope.shared.userActivity[user.id] =
+                                    $filter('date')(date, 'mediumTime');
+                            });
+                        }
+                    },
+                    // error
+                    function () {
+                        $log.error('Problem with resource', resource);
+                    });
+                $log.debug('Resource received:', resource);
+
+                $log.debug('Cord Home Ctrl has been created.');
+        }]);
+}());
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/login/login.css b/views/ngXosViews/subscriberPortal/src/app/view/login/login.css
new file mode 100644
index 0000000..f7d5f67
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/login/login.css
@@ -0,0 +1,119 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+div#login {
+    background: url("/imgs/login.jpg") no-repeat center;
+    background-size: contain;
+    position: absolute;
+    top: 3%;
+    left: 5%;
+}
+
+div#login-wrapper {
+    text-align: center;
+}
+
+#login h2 {
+    margin: 1%;
+    color: rgb(115, 115, 115);
+    font-size: xx-large;
+    font-weight: lighter;
+    text-align: left;
+    position: absolute;
+    top: -140px;
+}
+
+div#login-form {
+    display: inline-block;
+}
+
+#login div.outline {
+    position: absolute;
+    border: 1px solid rgba(115, 115, 115, 0.7);
+    background-color: white;
+    opacity: .6;
+    top: -160px;
+    left: -25px;
+    width: 300px;
+    height: 245px;
+    border-radius: 1px;
+}
+
+div#login-form {
+    margin-left: 2.5%;
+    position: relative;
+    width: 255px;
+    margin-top: 33.5%;
+}
+
+#login-form form {
+    line-height: 250%;
+}
+
+#login-form input {
+    display: block;
+    height: 40px;
+    width: 230px;
+    font-size: 19px;
+    padding: 0 5px;
+    margin-bottom: 3.5%;
+    border-radius: 1px;
+    position: absolute;
+}
+#login-form input[type="text"] {
+    top: -90px;
+}
+#login-form input[type="password"] {
+    top: -35px;
+}
+
+#login-form input[type="text"],
+#login-form input[type="password"] {
+    border: 2px solid rgba(115, 115, 115, 0.7);
+    transition: border 0.1s;
+}
+#login-form input[type="text"]:focus,
+#login-form input[type="password"]:focus,
+#login-form input[type="button"]:focus {
+    outline: none;
+    border: solid 2px rgba(122, 188, 229, 0.5);
+}
+
+#login-form a {
+    text-decoration: none;
+}
+
+#login-form input[type="button"] {
+    top: 25px;
+    width: 245px;
+    height: 30px;
+    cursor: pointer;
+    letter-spacing: 0.02em;
+    font-size: 100%;
+    color: #3C3C3C;
+    background-color: lightgray;
+    transition: background-color 0.4s;
+}
+
+#login-form input[type="button"]:hover {
+    color: white;
+    background-color: rgb(122, 188, 229);
+}
+
+#login-form input.ng-invalid.ng-touched {
+    background-color: #CE5650;
+    color: white;
+}
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/login/login.html b/views/ngXosViews/subscriberPortal/src/app/view/login/login.html
new file mode 100644
index 0000000..19c5940
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/login/login.html
@@ -0,0 +1,14 @@
+<!-- Login page partial html -->
+<div id="login" class="container">
+    <div id="login-wrapper">
+        <div id="login-form">
+            <div class="outline"></div>
+            <h2>Subscriber Portal</h2>
+            <form>
+                <input ng-model="email" type="text" placeholder="email" required>
+                <input ng-model="password" type="password" placeholder="password" required>
+                <input ng-click="login()" type="button" value="Log In">
+            </form>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/login/login.js b/views/ngXosViews/subscriberPortal/src/app/view/login/login.js
new file mode 100644
index 0000000..eae16d5
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/login/login.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+    'use strict';
+    var urlSuffix = '/rs/login';
+
+    angular.module('cordLogin', [])
+        .controller('CordLoginCtrl',
+        ['$log', '$scope', '$resource', '$location', '$window',
+            function ($log, $scope, $resource, $location, $window) {
+                var LoginData, resource;
+                $scope.page.curr = 'login';
+
+                function getResource(email) {
+                    LoginData = $resource($scope.shared.url + urlSuffix + '/' + email);
+                    resource = LoginData.get({},
+                        function () {
+                            $location.url('/home');
+                            $window.location.href = $location.absUrl();
+                        });
+                }
+
+                $scope.login = function () {
+                    if ($scope.email && $scope.password) {
+                        getResource($scope.email);
+                        $scope.shared.login = $scope.email;
+                    }
+                };
+
+                $log.debug('Cord Login Ctrl has been created.');
+        }]);
+}());
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/user/ratingPanel.html b/views/ngXosViews/subscriberPortal/src/app/view/user/ratingPanel.html
new file mode 100644
index 0000000..04ee430
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/user/ratingPanel.html
@@ -0,0 +1,22 @@
+<!--Partial HTML for rating panel directive-->
+<div id="rating-panel">
+    <div ng-cloak class="ng-hide ng-cloak panel" ng-show="ratingsShown">
+        <table>
+            <tr>
+                <th class="title">Category</th>
+                <th ng-repeat="rating in level_order">{{rating}}</th>
+            </tr>
+            <tr ng-repeat="cat in category_order">
+                <td class="title">{{cat}}</td>
+                <td ng-repeat="r in level_order">
+                    <div ng-if="prohibitedSites[r][cat]">
+                        <icon size="15" id="xMark"></icon>
+                    </div>
+                   <div ng-if="!prohibitedSites[r][cat]">
+                       <icon size="15" id="checkMark"></icon>
+                   </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/user/user.css b/views/ngXosViews/subscriberPortal/src/app/view/user/user.css
new file mode 100644
index 0000000..8539238
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/user/user.css
@@ -0,0 +1,180 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#user div {
+    padding-top: 2%;
+}
+
+#user div.main-left {
+    width: 98%;
+    padding-left: 1%;
+}
+#user div.main-left.family {
+    width: 62%;
+    padding-left: 1%;
+}
+
+#user div.main-right {
+    width: 0;
+}
+#user div.main-right.family {
+    width: 37%;
+}
+
+#user table.user-info,
+#user table.user-form {
+    float: left;
+    width: 100%;
+}
+
+#user table.user-info th,
+#user table.user-form th {
+    text-align: left;
+    padding: 2% 1%;
+}
+
+#user span.help:hover {
+    cursor: pointer;
+    color: #CE5650;
+}
+
+#user div.main-left.family table.user-info th,
+#user div.main-right.family table.user-form th {
+    padding: 17px;
+}
+
+#user div.main-left.family table.user-info td,
+#user div.main-right.family table.user-form td {
+    padding: 10px;
+    height: 23px;
+}
+#user table.user-info td {
+    padding: 1%;
+}
+
+#user table.user-form td {
+    border-left: 1px solid #CE5650;
+}
+
+#user table.user-form td.buttons {
+    text-align: right;
+    border: none;
+}
+
+#user table.user-form tr.options td {
+    padding-left: 5%;
+}
+
+#user select,
+#user select:focus {
+    border: none;
+}
+
+#user select {
+    font-size: 95%;
+}
+
+#user option,
+#user option:focus {
+    border: none;
+}
+
+#user option[selected] {
+    background-color: rgb(122, 188, 229);
+}
+
+#user label {
+    font-weight: bold;
+    display: block;
+    text-align: center;
+    padding: 5%;
+}
+
+#user input[type="button"],
+#user input[type="reset"] {
+    width: 30%;
+}
+
+#user td.buttons div {
+    display: inline;
+}
+#user td.buttons svg {
+    vertical-align: middle;
+}
+
+#rating-panel th,
+#rating-panel td {
+    text-align: center;
+    padding: 1%;
+    font-weight: lighter;
+}
+
+#rating-panel th.title,
+#rating-panel td.title {
+    width: 125px;
+    text-align: left;
+}
+
+#rating-panel th {
+    background-color: white;
+    padding-top: 3%;
+    border-bottom: 1px solid #CE5650;
+    color: #3C3C3C;
+    font-weight: normal;
+}
+
+#rating-panel tr th:first-child,
+#rating-panel tr td:first-child {
+    padding-left: 5%;
+}
+#rating-panel tr th:last-child,
+#rating-panel tr td:last-child {
+    padding-right: 5%;
+}
+
+div#rating-panel {
+    position: relative;
+    pointer-events: none;
+}
+
+#rating-panel div.ng-hide-add.ng-hide-add-active,
+#rating-panel div.ng-hide-remove.ng-hide-remove-active {
+    -webkit-transition: all linear 0.75s;
+    transition: all linear 0.75s;
+}
+
+#rating-panel div.panel {
+    position: absolute;
+    top: 0;
+    left: -6%;
+    height: 545px;
+    overflow: auto;
+    padding: 0;
+    pointer-events: auto;
+    box-shadow: 0 3px 23px 7px rgb(118, 118, 118);
+    border-radius: 3px;
+}
+#rating-panel table {
+    table-layout: fixed;
+    width: 500px;
+    background-color: white;
+    opacity: 1;
+}
+
+#rating-panel div.ng-hide {
+    opacity: 0;
+    left: -55%;
+}
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/user/user.html b/views/ngXosViews/subscriberPortal/src/app/view/user/user.html
new file mode 100644
index 0000000..d8a0620
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/user/user.html
@@ -0,0 +1,60 @@
+<!-- Users page partial html -->
+<div class="container">
+    <div id="user">
+        <div class="main-left" ng-class="{family: isFamily}">
+            <table class="user-info">
+                <tr>
+                    <th class="user-pic"></th>
+                    <th>Name</th>
+                    <th>Last Login</th>
+                </tr>
+                <tr ng-repeat="user in users" class="fadein">
+                    <td class="user-pic">
+                        <img ng-src="{{'/imgs/' + user.icon_id + '.jpg'}}">
+                    </td>
+                    <td>{{user.name}}</td>
+                    <td>{{shared.userActivity[user.id]}}</td>
+                </tr>
+            </table>
+        </div>
+
+        <div class="main-right" ng-class="{family: isFamily}">
+            <form ng-if="isFamily"
+                  name="changeLevels">
+                <table class="user-form">
+                    <tr>
+                        <th>
+                            Select Site Rating
+                            <span class="help"
+                                  ng-click="showRatings()"> (?)</span>
+                        </th>
+                    </tr>
+                    <tr ng-repeat="user in users" class="options">
+                        <td>
+                            <select ng-init="newLevels[user.id]=user.profile.url_filter.level"
+                                    ng-model="newLevels[user.id]"
+                                    ng-options="l for l in levels">
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="buttons">
+                            <div ng-show="showCheck">
+                                <icon size="20px" id="checkMark"></icon>
+                            </div>
+                            <input type="reset" value="Cancel"
+                                   ng-click="cancelChanges(changeLevels)"
+                                   ng-disabled="changeLevels.$pristine">
+                            <input type="button" value="Apply"
+                                   ng-click="applyChanges(changeLevels)"
+                                   ng-disabled="changeLevels.$pristine">
+                        </td>
+                    </tr>
+                </table>
+            </form>
+        </div>
+        <div ng-if="isFamily">
+            <ratings-panel></ratings-panel>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/ngXosViews/subscriberPortal/src/app/view/user/user.js b/views/ngXosViews/subscriberPortal/src/app/view/user/user.js
new file mode 100644
index 0000000..bb44fec
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/app/view/user/user.js
@@ -0,0 +1,165 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+    'use strict';
+
+    var bundleUrlSuffix = '/rs/bundle',
+        userUrlSuffix = '/rs/users',
+        family = 'family',
+        url_filter = 'url_filter';
+
+    angular.module('cordUser', [])
+        .controller('CordUserCtrl', ['$log', '$scope', '$resource', '$timeout',
+            function ($log, $scope, $resource, $timeout) {
+                var BundleData, bundleResource;
+                $scope.page.curr = 'user';
+                $scope.isFamily = false;
+                $scope.newLevels = {};
+                $scope.showCheck = false;
+                $scope.ratingsShown = false;
+
+                // === Get data functions ---
+
+                BundleData = $resource($scope.shared.url + bundleUrlSuffix);
+                bundleResource = BundleData.get({},
+                    // success
+                    function () {
+                        var result;
+                        $scope.isFamily = (bundleResource.bundle.id === family);
+                        if ($scope.isFamily) {
+                            result = $.grep(
+                                bundleResource.bundle.functions,
+                                function (elem) {
+                                    if (elem.id === url_filter) { return true; }
+                                }
+                            );
+                            $scope.levels = result[0].params.levels;
+                        }
+                    },
+                    // error
+                    function () {
+                        $log.error('Problem with resource', bundleResource);
+                    }
+                );
+
+                function getUsers(url) {
+                    var UserData, userResource;
+                    UserData = $resource(url);
+                    userResource = UserData.get({},
+                        // success
+                        function () {
+                            $scope.users = userResource.users;
+                        },
+                        // error
+                        function () {
+                            $log.error('Problem with resource', userResource);
+                        }
+                    );
+                }
+
+                getUsers($scope.shared.url + userUrlSuffix);
+
+                // === Form functions ---
+
+                function levelUrl(id, level) {
+                    return $scope.shared.url +
+                        userUrlSuffix + '/' + id + '/apply/url_filter/level/' + level;
+                }
+
+                $scope.applyChanges = function (changeLevels) {
+                    var requests = [];
+
+                    if ($scope.users) {
+                        $.each($scope.users, function (index, user) {
+                            var id = user.id,
+                                level = user.profile.url_filter.level;
+                            if ($scope.newLevels[id] !== level) {
+                                requests.push(levelUrl(id, $scope.newLevels[id]));
+                            }
+                        });
+
+                        $.each(requests, function (index, req) {
+                            getUsers(req);
+                        });
+                    }
+                    changeLevels.$setPristine();
+                    $scope.showCheck = true;
+                    $timeout(function () {
+                        $scope.showCheck = false;
+                    }, 3000);
+                };
+
+                $scope.cancelChanges = function (changeLevels) {
+                    if ($scope.users) {
+                        $.each($scope.users, function (index, user) {
+                            $scope.newLevels[user.id] = user.profile.url_filter.level;
+                        });
+                    }
+                    changeLevels.$setPristine();
+                    $scope.showCheck = false;
+                };
+
+                $scope.showRatings = function () {
+                    $scope.ratingsShown = !$scope.ratingsShown;
+                };
+
+            $log.debug('Cord User Ctrl has been created.');
+        }])
+
+        .directive('ratingsPanel', ['$log', function ($log) {
+            return  {
+                templateUrl: 'app/view/user/ratingPanel.html',
+                link: function (scope, elem, attrs) {
+                    function fillSubMap(order, bool) {
+                        var result = {};
+                        $.each(order, function (index, cat) {
+                            result[cat] = bool;
+                        });
+                        return result;
+                    }
+                    function processSubMap(prhbSites) {
+                        var result = {};
+                        $.each(prhbSites, function (index, cat) {
+                            result[cat] = true;
+                        });
+                        return result;
+                    }
+
+                    function preprocess(data, order) {
+                        return {
+                            ALL: fillSubMap(order, false),
+                            G: processSubMap(data.G),
+                            PG: processSubMap(data.PG),
+                            PG_13: processSubMap(data.PG_13),
+                            R: processSubMap(data.R),
+                            NONE: fillSubMap(order, true)
+                        };
+                    }
+
+                    $.getJSON('/app/data/pc_cats.json', function (data) {
+                        scope.level_order = data.level_order;
+                        scope.category_order = data.category_order;
+                        scope.prohibitedSites = preprocess(
+                            data.prohibited, data.category_order
+                        );
+                        scope.$apply();
+                    });
+                }
+            };
+        }]);
+
+}());
diff --git a/views/ngXosViews/subscriberPortal/src/cord.js b/views/ngXosViews/subscriberPortal/src/cord.js
new file mode 100644
index 0000000..16bf3cd
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/cord.js
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+    'use strict';
+
+    var modules = [
+            'ngRoute',
+            'ngResource',
+            'ngAnimate',
+            'cordMast',
+            'cordFoot',
+            'cordNav'
+        ],
+        viewIds = [
+            'login',
+            'home',
+            'user',
+            'bundle'
+        ],
+        viewDependencies = [],
+        dependencies;
+
+    function capitalize(word) {
+        return word ? word[0].toUpperCase() + word.slice(1) : word;
+    }
+
+    viewIds.forEach(function (id) {
+        if (id) {
+            viewDependencies.push('cord' + capitalize(id));
+        }
+    });
+
+    dependencies = modules.concat(viewDependencies);
+
+    angular.module('cordGui', dependencies)
+        .config(['$routeProvider', function ($routeProvider) {
+            $routeProvider
+                .otherwise({
+                    redirectTo: '/login'
+                });
+
+            function viewCtrlName(vid) {
+                return 'Cord' + capitalize(vid) + 'Ctrl';
+            }
+
+            function viewTemplateUrl(vid) {
+                return 'app/view/' + vid + '/' + vid + '.html';
+            }
+
+            viewIds.forEach(function (vid) {
+                if (vid) {
+                    $routeProvider.when('/' + vid, {
+                        controller: viewCtrlName(vid),
+                        controllerAs: 'ctrl',
+                        templateUrl: viewTemplateUrl(vid)
+                    });
+                }
+            });
+        }])
+        .controller('CordCtrl', ['$scope', '$location',
+            function ($scope, $location) {
+                $scope.shared = {
+                    url: 'http://' + $location.host() + ':' + $location.port(),
+                    userActivity: {}
+                };
+                $scope.page = {};
+            }]);
+}());
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/bird.png b/views/ngXosViews/subscriberPortal/src/imgs/bird.png
new file mode 100644
index 0000000..8688cd6
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/bird.png
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/boy2.jpg b/views/ngXosViews/subscriberPortal/src/imgs/boy2.jpg
new file mode 100644
index 0000000..8b8ea58
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/boy2.jpg
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/bundle.jpg b/views/ngXosViews/subscriberPortal/src/imgs/bundle.jpg
new file mode 100644
index 0000000..8ea09f9
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/bundle.jpg
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/dad.jpg b/views/ngXosViews/subscriberPortal/src/imgs/dad.jpg
new file mode 100644
index 0000000..f7b84ad
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/dad.jpg
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/firewall.png b/views/ngXosViews/subscriberPortal/src/imgs/firewall.png
new file mode 100644
index 0000000..2da59f0
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/firewall.png
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/girl1.jpg b/views/ngXosViews/subscriberPortal/src/imgs/girl1.jpg
new file mode 100644
index 0000000..aeb9f64
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/girl1.jpg
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/home.jpg b/views/ngXosViews/subscriberPortal/src/imgs/home.jpg
new file mode 100644
index 0000000..050da93
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/home.jpg
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/internet.png b/views/ngXosViews/subscriberPortal/src/imgs/internet.png
new file mode 100644
index 0000000..0644c59
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/internet.png
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/login.jpg b/views/ngXosViews/subscriberPortal/src/imgs/login.jpg
new file mode 100644
index 0000000..5acb7bd
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/login.jpg
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/logo.png b/views/ngXosViews/subscriberPortal/src/imgs/logo.png
new file mode 100644
index 0000000..f8b11df
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/logo.png
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/mom.jpg b/views/ngXosViews/subscriberPortal/src/imgs/mom.jpg
new file mode 100644
index 0000000..c56e869
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/mom.jpg
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/imgs/url_filter.png b/views/ngXosViews/subscriberPortal/src/imgs/url_filter.png
new file mode 100644
index 0000000..c5c8960
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/imgs/url_filter.png
Binary files differ
diff --git a/views/ngXosViews/subscriberPortal/src/index.html b/views/ngXosViews/subscriberPortal/src/index.html
new file mode 100644
index 0000000..61f7507
--- /dev/null
+++ b/views/ngXosViews/subscriberPortal/src/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+~ Copyright 2015 Open Networking Laboratory
+~
+~ Licensed under the Apache License, Version 2.0 (the "License");
+~ you may not use this file except in compliance with the License.
+~ You may obtain a copy of the License at
+~
+~     http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+~
+-->
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="imgs/bird.png">
+
+    <title>CORD Subscriber Portal</title>
+
+    <script src="bower_components/angular/angular.js"></script>
+    <script src="bower_components/angular-route/angular-route.js"></script>
+    <script src="bower_components/angular-animate/angular-animate.js"></script>
+    <script src="bower_components/angular-resource/angular-resource.js"></script>
+    <script src="bower_components/jquery/dist/jquery.js"></script>
+
+    <script src="cord.js"></script>
+    <link rel="stylesheet" href="app/view/common/common.css">
+
+    <script src="app/fw/mast/mast.js"></script>
+    <link rel="stylesheet" href="app/fw/mast/mast.css">
+    <script src="app/fw/foot/foot.js"></script>
+    <link rel="stylesheet" href="app/fw/foot/foot.css">
+
+    <script src="app/fw/nav/nav.js"></script>
+    <link rel="stylesheet" href="app/fw/nav/nav.css">
+
+    <script src="app/fw/icon/icon.js"></script>
+
+    <script src="app/view/login/login.js"></script>
+    <link rel="stylesheet" href="app/view/login/login.css">
+
+    <script src="app/view/home/home.js"></script>
+    <link rel="stylesheet" href="app/view/home/home.css">
+
+    <script src="app/view/user/user.js"></script>
+    <link rel="stylesheet" href="app/view/user/user.css">
+
+    <script src="app/view/bundle/bundle.js"></script>
+    <link rel="stylesheet" href="app/view/bundle/bundle.css">
+
+</head>
+<body ng-app="cordGui">
+<div id="frame" ng-controller="CordCtrl as cordCtrl">
+
+<mast></mast>
+<foot></foot>
+    <div id="view" ng-view></div>
+
+        <svg id="icon-defs">
+            <defs>
+                <symbol id="bird" viewBox="352 224 113 112">
+                    <path d="M427.7,300.4 c-6.9,0.6-13.1,5-19.2,7.1c-18.1,6.2-33.9,
+                    9.1-56.5,4.7c24.6,17.2,36.6,13,63.7,0.1c-0.5,0.6-0.7,1.3-1.3,
+                    1.9c1.4-0.4,2.4-1.7,3.4-2.2c-0.4,0.7-0.9,1.5-1.4,1.9c2.2-0.6,
+                    3.7-2.3,5.9-3.9c-2.4,2.1-4.2,5-6,8c-1.5,2.5-3.1,4.8-5.1,6.9c-1,
+                    1-1.9,1.9-2.9,2.9c-1.4,1.3-2.9,2.5-5.1,2.9c1.7,0.1,3.6-0.3,6.5
+                    -1.9c-1.6,2.4-7.1,6.2-9.9,7.2c10.5-2.6,19.2-15.9,25.7-18c18.3
+                    -5.9,13.8-3.4,27-14.2c1.6-1.3,3-1,5.1-0.8c1.1,0.1,2.1,0.3,3.2,
+                    0.5c0.8,0.2,1.4,0.4,2.2,0.8l1.8,0.9c-1.9-4.5-2.3-4.1-5.9-6c-2.3
+                    -1.3-3.3-3.8-6.2-4.9c-7.1-2.6-11.9,11.7-11.7-5c0.1-8,4.2-14.4,
+                    6.4-22c1.1-3.8,2.3-7.6,2.4-11.5c0.1-2.3,0-4.7-0.4-7c-2-11.2-8.4
+                    -21.5-19.7-24.8c-1-0.3-1.1-0.3-0.9,0c9.6,17.1,7.2,38.3,3.1,54.2
+                    C429.9,285.5,426.7,293.2,427.7,300.4z"></path>
+                </symbol>
+                <symbol id="checkMark" viewBox="0 0 10 10">
+                    <path d="M2.6,4.5c0,0,0.7-0.4,1.2,0.3l1.0,1.8c0,0,2.7-5.4,2.8-5.7c
+                    0,0,0.5-0.9,1.4-0.1c0,0,0.5,0.5,0,1.3S6.8,7.3,5.6,9.2c0,0-0.4,0.5
+                    -1.2,0.1S2.2,5.4,2.2,5.4S2.2,4.7,2.6,4.5z"></path>
+                </symbol>
+                <symbol id="xMark" viewBox="0 0 10 10">
+                    <path d="M9.0,7.2C8.2,6.9,7.4,6.1,6.7,5.2c0.4-0.5,0.7-0.8,0.8-1.0C
+                    7.8,3.5,9.4,1.6,8.1,1.1C6.8,0.6,6.6,1.7,6.6,1.7C6.4,2.1,6.0,2.7,
+                    5.4,3.4C4.9,2.5,4.5,1.9,4.5,1.9S3.8,0.2,2.9,0.7C1.9,1.1,2.3,2.3,
+                    2.3,2.3c0.3,1.1,0.8,2.1,1.4,2.9C2.5,6.4,1.3,7.4,1.3,7.4S0.8,7.8,
+                    0.8,8.1C0.9,8.3,0.9,9.6,2.4,9.1C3.1,8.8,4.1,7.9,5.1,7.0c1.3,1.3,
+                    2.5,1.9,2.5,1.9s0.5,0.5,1.4-0.2C9.8,7.9,9.0,7.2,9.0,7.2z"></path>
+                </symbol>
+            </defs>
+        </svg>
+    </div>
+
+    <script type='text/javascript' id="__bs_script__">
+        //<![CDATA[
+        document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));
+        //]]>
+    </script>
+</body>
+</html>