FlowZee

by William Green

HTML

<body ng-controller="index">
 <div ng-app>
    <!--Start Header-->
    <!-- Start Content -->
    <script src="angular.min.js"></script>
    <div id="container">
        <div class="navbar">
            	<h1 id="logo">Flow Zee</h1>

            	<h4 class="beta">Beta 1.4</h4>

            <!-- Tool Buttons -->
            <div class="tools">	<a href=""><button>Template</button></a>
	<a href="#style"><button>Style</button></a>
	<a href=""><button>Save</button></a>

                <button onclick="printContent('flowZee')">Print</button>
            </div>
            <div id="user-info">
                <img id="profile-image" src="img/user-demo-me.png" alt="User-photo">
                	<h2>Hi, William</h2>

            </div>
        </div>
        <div id="sidebar-left">
            	<h2 class="help" title="Need Help?"><a href="">?</a></h2>

            <form>
                <label>Title:</label>
                <br>
                <input type="text" ng-model="titleTag">
                <label>Flow #1:</label>
                <br>
                <input type="text" ng-model="flowOne">
                <label>Flow #2:</label>
                <br>
                <input type="text" ng-model="flowTwo">
                <label>Flow #3:</label>
                <br>
                <input type="text" ng-model="flowThree">
                <label>Flow #4:</label>
                <br>
                <input type="text" ng-model="flowFour">
                <label>Flow #5:</label>
                <br>
                <input type="text" ng-model="flowFive">
                <label>Flow #6:</label>
                <br>
                <input type="text" ng-model="flowSix">
                <label>Flow #7:</label>
                <br>
                <input type="text" ng-model="flowSeven">
                <label>Flow #8:</label>
                <br>
                <input type="text" ng-model="flowEight">
                <div id="style">
                   ...

CSS

@charset"UTF-8";
 body {
    color: #525252;
    background: #eeeeee;
}
#container {
}
.body-expanded, .modal-open {
    overflow-y:hidden;
    margin-right: 15px;
}
.modal-open #content {
    z-index: inherit;
}
.body-expanded .expanded-panel, .fancybox-margin .expanded-panel, .modal-open .expanded-panel {
    margin-right: 15px;
}
h1, .h1, h2, .h2, h3, .h3 {
    margin:0;
}
#logo {
    font-family:Arial, Helvetica, sans-serif;
    font-size:24px;
    color:rgb(62, 69, 76);
    margin: 11px 0 0 36px;
}
#logo a:hover {
    background-position: right 25px;
    text-decoration: none;
}
.navbar {
    margin: 0;
    border: 0;
    position: fixed;
    top:0;
    left: 0;
    width:100%;
    height: 55px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    z-index: 2000;
    background-color: #ffffff;
}
.beta {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #3E454C;
    padding-left: 118px;
    margin-top: -1px;
}
.body-expanded .navbar {
    z-index: 9;
}
a.show-sidebar:hover {
    color:#000;
}
button {
    background-color:rgb(221, 221, 221);
    width:79px;
    height:37px;
    -moz-border-radius:3%;
    -webkit-border-radius:2%/5%;
    border-radius:2%/5%;
    border: none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:rgb(62, 69, 76);
    margin-left: 26px;
}
.tools {
    margin-top: -51px;
    margin-left: 250px;
}
#user-info {
}
#user-info img {
    float: right;
    clear: both;
    margin-right: 190px;
    margin-top: -45px;
    width: 52px;
    height: 53px;
    border-radius: 75%;
}
#user-info h1, h2, h3 {
    float: right;
    clear: both;
    margin-right: 84px;
    margin-top: -37px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:rgb(62, 69, 76);
}
#sidebar-left {
    background-color:rgb(62, 69, 76);
    width:200px;
    height:1000px;
}
.help {
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
    color:rgb(255,...

JavaScript

document.getElementById("profile-image").src = "file:///C:/Users/Chintana/Desktop/IMG_3719.JPG";


// Print Export Function
function printContent(el) {
    var restorePage = document.body.innerHTML;
    var printContent = document.getElementById(el).innerHTML;
    document.body.innerHTML = printContent;
    window.print();
    document.body.innerHTML = restorePage;
}

// App $rootScope

angular.module("flowZee", [])
    .controller("index", ["$scope", function ($scope) {
    $scope.titleTag;
    $scope.flowOne;
    $scope.flowTwo;
    $scope.flowThree;
    $scope.flowFour;
    $scope.flowFive;
    $scope.flowSix;
    $scope.flowSeven;
    $scope.flowEight;
}]);

// Template Bubble

angular.module("flowZee_temp_bubble", [])
    .controller("temp_bubble", ["$scope", function ($scope) {
    $scope.titleTag;
    $scope.userName;
    $scope.bubbleOne;
    $scope.bubbleTwo;
}]);