You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.3 KiB
74 lines
2.3 KiB
<html ng-app="datingApp">
|
|
<head>
|
|
<title>Dating site</title>
|
|
<link href='https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
|
|
<script type="text/javascript" src="app.js"></script>
|
|
</head>
|
|
|
|
<body ng-controller="MainController as ctrl">
|
|
|
|
|
|
<div id="container">
|
|
|
|
<div id="header">
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Notifications-Thanks-Heart-Icon.png">
|
|
<span id="header-text" ng-click="ctrl.getUsers()">I LOVE TO DATE OTHERS</span>
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Notifications-Thanks-Heart-Icon.png">
|
|
</div>
|
|
|
|
<br/><br/>
|
|
|
|
<div id="users-left">
|
|
<div ng-repeat="user in ctrl.usersOdd | limitTo:3">
|
|
<div class="left-pic" ng-mouseover="ctrl.displayImageL(user.img)">
|
|
<img ng-src="{{ user.img }}"/>
|
|
</div>
|
|
<div class="right-info">
|
|
<p class="username">{{ user.name }}</p>
|
|
<p>Age: {{ user.age }}</p>
|
|
<p ng-if="user.gender=='f'">Female</p>
|
|
<p ng-if="user.gender=='m'">Male</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="match">
|
|
<img class="center-img" ng-src="{{ ctrl.limage }}">
|
|
<img class="center-img" ng-src="{{ ctrl.rimage }}">
|
|
<div ng-if="ctrl.left && ctrl.right">
|
|
<div id="match-button" ng-click="ctrl.match()">CLICK TO MATCH!</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="users-right">
|
|
<div ng-repeat="user in ctrl.usersEven | limitTo:3">
|
|
<div class="left-pic" ng-mouseover="ctrl.displayImageR(user.img)">
|
|
<img ng-src="{{ user.img }}"/>
|
|
</div>
|
|
<div class="right-info">
|
|
<p class="username">{{ user.name }}</p>
|
|
<p>Age: {{ user.age }}</p>
|
|
<p ng-if="user.gender=='f'">Female</p>
|
|
<p ng-if="user.gender=='m'">Male</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="newform">
|
|
<p id="formtitle">ADD A DATER</p>
|
|
<form ng-submit="ctrl.processForm()">
|
|
<input type="text" ng-model="ctrl.formdata.name" placeholder="name">
|
|
<input type="text" ng-model="ctrl.formdata.age"placeholder="age">
|
|
<input type="text" ng-model="ctrl.formdata.gender"placeholder="gender">
|
|
<input type="text" ng-model="ctrl.formdata.img"placeholder="img">
|
|
<input type="submit">
|
|
</form>
|
|
</p>
|
|
</div>
|
|
|
|
</div> <!-- end container -->
|
|
|
|
</body>
|
|
</html> |