<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=initial:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="selectContact(0,0);profileimg = People[0].img; selectedcontactpersonDescription = People[0].Description; selectedcontactperson = People[01].name" selectContact(0,1)>
<div id="testdiv"></div>
<nav class="navbar navbar-default " style="" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<form class="navbar-form navbar-left">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
<input type="text" id="txtsearch" ng-change="txtsearch()" class="form-control" ng-model="txtsearchmodel" placeholder="Search">
</div>
</form>
</ul>
<center>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" ><div class="txthead" ">Alexies</div></a></li>
<li ><a id="profilepic"><img src="https://lh3.googleusercontent.com/xrBdFN1OD0zu12YP9u42IuWoxQoShka0sIxYLZQp7IQPF6DQtczG4WndBs62S3ST1SHix05SOY-99w=w1920-h950" class="profile-image "></a></li>
</ul>
</center>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row" >
<div class="col-md-2 col-sm-3 col-xs-3">
<br><center><h3><strong><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Contacts</strong></h3></center>
<div class="list-group">
<a href="#" class="list-group-item" ng-repeat="person in People | filter:txtsearchmodel" ng-click="selectContact(person,$index)">
<span class="glyphicon glyphicon-user"></span> <strong>{{$index + 1}}.)</strong> {{person.name}}
</a>
</div>
</div>
<div class=" col-md-10 col-sm-9 col-xs-9" >
<div class="container-fluid">
<div class="row">
<br>
<div class="col-lg-2 col-md-3 col-sm-4"><img class="img-responsive img-rounded" ng-src="{{profileimg}}">
</div>
<div class="col-lg-10 col-md-9 col-sm-8">
<!--<h1>{{selectedcontactperson}}</h1> -->
{{ }}
<h1 id="selectedname" style="">{{selectedcontactperson}}</h1>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myMessage"> <large><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Send Message</large></button>
<br><br>
<div id="heartcontent"></div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="well"><h3 >"{{selectedcontactpersonDescription}}"</h3></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-responsive well">
<thead>
<tr class="success">
<th><span class="glyphicon glyphicon-thumbs-up"></span> Likes <span class="badge">3</span></th>
<th><span class="glyphicon glyphicon-thumbs-up"></span> Dislikes <span class="badge">3</span></th>
</tr>
</thead>
<tbody>
<tr>
<td >
<table class="table table-striped" >
<tr ng-repeat="likes in People[profileindex].Likes">
<td><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"> {{likes}}</td>
</tr>
</table>
</td>
<td>
<table class="table table-striped">
<tr ng-repeat="dislike in People[profileindex].Dislikes">
<td><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"> {{dislike}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Message Send-->
<div class="modal fade" id="myMessage" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Send Message</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</body>
</html>
var myApp = angular.module("myApp",[]);
myApp.controller("myController",function($scope){
$scope.messageInfo="";
$scope.People=[
{
"name": "Andrew Amernante",
"rating": 3,
"img": "http://www.fillmurray.com/200/200",
"Description": "Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes": [
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes": [
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
},
{
"name": "Frank Wang",
"rating": 5,
"img": "http://www.fillmurray.com/200/200",
"Description": "Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
"Likes": [
"Frank",
"Manchester United",
"Football",
"Programming"
],
"Dislikes": [
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
]
},
{
"name": "Sissi Chen",
"rating": 5,
"img": "http://www.fillmurray.com/200/200",
"Description": "Aaah! Natural light! Get it off me! Get it off me! Oh, loneliness and cheeseburgers are a dangerous mix. D'oh. Here's to alcohol, the cause of all life's problems.",
"Likes": [
"Cats",
"the beach",
"Chopin",
"Blue things"
],
"Dislikes": [
"Birds"
]
},
{
"name": "Diego Garcia",
"rating": 2,
"img": "http://www.fillmurray.com/200/200",
"Description": "Facts are meaningless. You could use facts to prove anything that's even remotely true! I prefer a vehicle that doesn't hurt Mother Earth. It's a gocart, powered by my ownsense of selfsatisfaction. You don't win friends with salad.",
"Likes": [
"Talking Spanish",
"Spanish food",
"Spanish things",
"Football"
],
"Dislikes": [
"Not talking spanish",
"Chopin"
]
},
{
"name": "Fuad Rashid",
"rating": 4,
"img": "http://www.fillmurray.com/200/200",
"Description": "Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes": [
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes": [
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
}
]
$scope.saveUser = function(){
$scope.users.push($scope.newUser);
$scope.newUser = {};
$scope.messageInfo="Records Saved";
};
$scope.selectUser=function(user){
$scope.clickedUser=user;
};
$scope.updateUser=function(){
$scope.messageInfo="Record was edited";
};
$scope.deleteUser = function(){
$scope.users.splice($scope.users.indexOf($scope.clickedUser),1);
$scope.messageInfo="Record has been deleted";
};
$scope.selectContact = function(data1,data2){
//alert(data1.name);
//alert(data2);
$scope.selectedcontactperson = data1.name;
$scope.selectedcontactpersonDescription = data1.Description;
$scope.profileindex=data2;
$scope.profileimg=data1.img;
document.getElementById('heartcontent').innerHTML = "";
for (i = 0; i < data1.rating; i++) {
//alert('hello');
document.getElementById('heartcontent').innerHTML+='<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>';
}
for (i = 0; i < (5 - data1.rating) ; i++) {
//alert('hello');
document.getElementById('heartcontent').innerHTML+='<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>';
}
}
//ng-change="txtsearc()" ng-model="myValue"
$scope.txtsearch = function(){
a= document.getElementById('txtsearch').value
$scope.selectContact(1,1)
}
});
/* Styles go here */
h1, h2, h3, h4, h5, h6 {
font-family: 'cursive';
}
p, div {
font-family: 'Cursive';
}
@media only screen and (min-width: 768px) {
.navbar {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
a#profilepic {
padding-top: 0px;
padding-bottom: 0px;
padding-left: : 0px;
}
.profile-image {
height: 50px;
}
div#myNavbar.collapse.navbar-collapse{
padding-left: 0px;
}
form.navbar-form.navbar-left.ng-pristine.ng-valid{
padding-left: 0px;
}
}
@media only screen and (max-width: 768px) {
div.input-group{
margin-left: 10px;margin-right: 10px;
}
img.profile-image{
width: 150px
}
div.txthead{
}
}
nav.navbar.navbar-default{
margin-bottom: 0px;
}
div.col-md-2.col-sm-3.col-xs-3{
background-color: WhiteSmoke ;
}
table.table.table-responsive thead tr th{
width: 50%
}
body {
}
div#myNavbar.collapse.navbar-collapse{-webkit-box-shadow: 10px 10px 22px -1px rgba(0,0,0,0.2);
-moz-box-shadow: 10px 10px 22px -1px rgba(0,0,0,0.2);
box-shadow: 10px 10px 22px -1px rgba(0,0,0,0.2);
}
div.col-md-2.col-sm-3.col-xs-3{
-webkit-box-shadow: 10px 10px 22px -1px rgba(0,0,0,0.2);
-moz-box-shadow: 10px 10px 22px -1px rgba(0,0,0,0.2);
box-shadow: 10px 10px 22px -1px rgba(0,0,0,0.2);
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border: 0px solid #000000
}
img.img-responsive.img-rounded{
-webkit-box-shadow: 10px 10px 22px -1px rgba(0,0,0,0.2);
-moz-box-shadow: 10px 10px 22px -1px rgba(0,0,0,0.2);
box-shadow: 10px 10px 22px -1px rgba(0,0,0,0.2);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 3px solid #ffffff;
}
div.col-lg-10.col-md-9.col-sm-8.ng-binding h1.ng-binding{
font-family: arial black; color: white; -webkit-text-stroke: 1.0px #000000;
-webkit-text-fill-color: #f0ad4e; text-shadow:2px 2px 2px #333333
}
[
{
"name": "Andrew Amernante",
"rating": 3,
"img": "http://www.fillmurray.com/200/200",
"Description": "Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes": [
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes": [
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
},
{
"name": "Frank Wang",
"rating": 5,
"img": "http://www.fillmurray.com/200/200",
"Description": "Before errors, mails were only pressures. This is not to discredit the idea that a magic is the prose of anelizabeth. This could be, or perhaps some posit the outmost coil to be less than dedal. Some assert that those treatments are nothing more than carp.",
"Likes": [
"Frank",
"Manchester United",
"Football",
"Programming"
],
"Dislikes": [
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
]
},
{
"name": "Sissi Chen",
"rating": 5,
"img": "http://www.fillmurray.com/200/200",
"Description": "Aaah! Natural light! Get it off me! Get it off me! Oh, loneliness and cheeseburgers are a dangerous mix. D'oh. Here's to alcohol, the cause of all life's problems.",
"Likes": [
"Cats",
"the beach",
"Chopin",
"Blue things"
],
"Dislikes": [
"Birds"
]
},
{
"name": "Diego Garcia",
"rating": 2,
"img": "http://www.fillmurray.com/200/200",
"Description": "Facts are meaningless. You could use facts to prove anything that's even remotely true! I prefer a vehicle that doesn't hurt Mother Earth. It's a gocart, powered by my ownsense of selfsatisfaction. You don't win friends with salad.",
"Likes": [
"Talking Spanish",
"Spanish food",
"Spanish things",
"Football"
],
"Dislikes": [
"Not talking spanish",
"Chopin"
]
},
{
"name": "Fuad Rashid",
"rating": 4,
"img": "http://www.fillmurray.com/200/200",
"Description": "Glutenfree cray cardigan vegan. Lumbersexual pork belly blog, fanny pack put a bird on it selvage",
"Likes": [
"Dogs",
"Long walks on the beach",
"Chopin",
"Tacos"
],
"Dislikes": [
"Birds",
"Red things",
"Danish food",
"Dead Batteries"
]
}
]