-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
203 lines (197 loc) · 15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.block-grid/latest/bootstrap3-block-grid.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
border-radius: 0 !important;
-moz-border-radius: 0 !important;
}
</style>
<style>
.labovi{
border-color:lightgrey;
box-shadow: 0.2rem 0.2rem 0rem #cccccc;
}
.labovi:hover{
transition:all 0.3s ease;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.centar{
margin: 0 auto;
}
.sredina{
float: none;
overflow: auto;
}
.dropdown-menu{
display: inline-block;
}
</style>
</head>
<body ng-app="app">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">OpenLabs</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a uib-popover-template="'forma.html'" popover-placement="bottom-right" href="#">
<span class="glyphicon glyphicon-log-in"></span> Login
</a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid">
<!-- Ovde ide odmah sve ispod navbara -->
<div class="row">
<div class = "col-md-3"></div>
<div class = "col-md-6">
<div class="jumbotron">
<h1 class="text-center">Ovde ide neka slika ili nešto</h1>
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere consectetur dolor ex ab provident aliquam, quibusdam illum recusandae accusamus vel quo debitis facilis minima molestiae nostrum voluptatibus voluptates rerum similique!</div>
<div>Saepe tempore ducimus ipsum libero blanditiis veniam unde facere rem nesciunt provident quo, cumque, doloremque. Placeat cumque eaque ipsam quisquam, assumenda voluptatibus pariatur distinctio, veritatis, sint quia, ex aliquid repudiandae?</div>
<div>Sed expedita fuga esse vero quidem. Sit repudiandae nulla nobis illo, itaque soluta blanditiis dolor corrupti. Consectetur accusantium corrupti dignissimos impedit commodi dolore quisquam suscipit veritatis quam numquam, unde maiores?</div>
</div>
</div>
</div>
<div class = "col-md-3"></div>
</div>
<!-- Glavni deo :) -->
<div class="row">
<!-- Leva strana ekrana-->
<div class = "col-md-3">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sit illum odit cum, molestias reiciendis officia quae distinctio provident, eveniet repudiandae eaque minus dolorum perferendis, architecto sapiente. Ad, quaerat, delectus.</div>
<div>Ducimus accusamus incidunt, natus! Voluptatum modi deleniti facere blanditiis dolores, culpa impedit fuga nisi corrupti, doloribus in sint unde voluptates ratione accusamus perferendis eligendi sequi quia recusandae exercitationem provident. Similique!</div>
<div>Placeat impedit, voluptatem perferendis, et deleniti at quidem unde quibusdam laudantium hic itaque, eveniet dignissimos quasi reprehenderit omnis, quas est nemo odio quam. Dolore ad autem, quo porro sapiente cum.</div>
<div>Totam nam culpa magni ad, consequatur praesentium voluptas adipisci molestias, debitis ducimus at, reprehenderit esse ipsa optio quis tempora! Quibusdam, similique beatae magni, eligendi culpa natus quis et? Atque, voluptatum.</div>
<div>Dolore sunt ipsum nostrum autem aliquam obcaecati quos, recusandae ducimus reiciendis quo rerum consequuntur fugit reprehenderit quod laudantium dolorem cumque eius. Eligendi maxime odio dolor illo fuga minima deleniti reprehenderit?</div>
<div>Necessitatibus quasi natus dolores, eaque voluptatibus recusandae labore fuga incidunt facilis optio a placeat adipisci excepturi possimus deserunt libero quisquam quae consectetur qui. Deserunt voluptatum natus error sequi vel libero!</div>
<div>Nemo est aliquid ducimus earum deserunt mollitia id enim ea modi maiores! Repellat quo quibusdam alias? Fuga recusandae, delectus cum tenetur blanditiis laborum neque quidem ratione quod et quia nam.</div>
<div>Tempora quidem quia amet, ex quos molestias soluta corporis optio quibusdam voluptatem, molestiae nulla minus quisquam fugit inventore perspiciatis eos dignissimos odit sapiente. Modi eveniet ratione quisquam rerum, amet tenetur.</div>
<div>Tempora officiis nisi harum, voluptatem nam amet asperiores accusamus. Soluta, ratione fugiat tenetur, voluptates repudiandae nobis culpa eius sequi amet temporibus quam officia error ipsam molestiae in ad molestias nisi!</div>
<div>Voluptas doloribus in blanditiis suscipit facere excepturi aliquid fugiat facilis iste molestias deleniti voluptatibus, autem, alias culpa, quaerat rerum, totam maiores tenetur dolores possimus dolorum perspiciatis. Explicabo velit sequi voluptates.</div>
<div>Tempora recusandae nemo illo at eveniet quod placeat neque ullam accusantium aperiam, error vero enim possimus quos magni doloribus aspernatur qui? Laudantium eum autem, magnam unde impedit, ex odit tempore!</div>
<div>Rerum labore eius, culpa, suscipit laborum error harum neque dolorem odit possimus vero quis vitae saepe accusamus consequuntur quo nobis perspiciatis tempore magni consectetur incidunt. Officiis aliquid consequatur iste, reprehenderit.</div>
<div>Commodi dicta nisi, et. Nostrum reiciendis placeat voluptates nisi assumenda delectus, in sint eos possimus, cupiditate nam ut dolores, consectetur veniam. Consectetur voluptas enim perspiciatis quibusdam, voluptates soluta sunt dolorum.</div>
<div>Nam, ea quos nemo modi blanditiis illo optio fuga at, natus enim reprehenderit non sed. Nisi nemo qui, voluptatibus quisquam ipsa nulla minima, libero illum nihil officia delectus voluptas unde!</div>
<div>Velit temporibus, cumque neque, doloribus sapiente aspernatur quia architecto dolorum natus nemo sit fuga, nostrum. Quod, nostrum! Beatae itaque ut harum, atque dolores nam, veritatis animi assumenda facilis, in obcaecati!</div>
</div>
<!-- U ovom divu je aplikacija koja god -->
<div class = "col-md-6">
<div class="block-grid-xs-1 block-grid-sm-2 block-grid-md-4 block-grid-lg-4" ng-controller="LabsCtrl" data-ng-init="init()">
<div class = "text-center" ng-repeat="i in labs |filter: pretraga">
<a href = {{i.labLinks}}>
<div class="panel panel-default labovi">
<div class="panel-heading"> {{i.name}} </div>
<div class="panel-body">
<img class = "img-responsive centar" src={{i.tumb}}> <br>
{{i.description}}
</div>
</div>
</a>
</div>
</div>
</div>
<!-- Desna strana ekrana-->
<div class="col-md-3">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, sit illum odit cum, molestias reiciendis officia quae distinctio provident, eveniet repudiandae eaque minus dolorum perferendis, architecto sapiente. Ad, quaerat, delectus.</div>
<div>Ducimus accusamus incidunt, natus! Voluptatum modi deleniti facere blanditiis dolores, culpa impedit fuga nisi corrupti, doloribus in sint unde voluptates ratione accusamus perferendis eligendi sequi quia recusandae exercitationem provident. Similique!</div>
<div>Placeat impedit, voluptatem perferendis, et deleniti at quidem unde quibusdam laudantium hic itaque, eveniet dignissimos quasi reprehenderit omnis, quas est nemo odio quam. Dolore ad autem, quo porro sapiente cum.</div>
<div>Totam nam culpa magni ad, consequatur praesentium voluptas adipisci molestias, debitis ducimus at, reprehenderit esse ipsa optio quis tempora! Quibusdam, similique beatae magni, eligendi culpa natus quis et? Atque, voluptatum.</div>
<div>Dolore sunt ipsum nostrum autem aliquam obcaecati quos, recusandae ducimus reiciendis quo rerum consequuntur fugit reprehenderit quod laudantium dolorem cumque eius. Eligendi maxime odio dolor illo fuga minima deleniti reprehenderit?</div>
<div>Necessitatibus quasi natus dolores, eaque voluptatibus recusandae labore fuga incidunt facilis optio a placeat adipisci excepturi possimus deserunt libero quisquam quae consectetur qui. Deserunt voluptatum natus error sequi vel libero!</div>
<div>Nemo est aliquid ducimus earum deserunt mollitia id enim ea modi maiores! Repellat quo quibusdam alias? Fuga recusandae, delectus cum tenetur blanditiis laborum neque quidem ratione quod et quia nam.</div>
<div>Tempora quidem quia amet, ex quos molestias soluta corporis optio quibusdam voluptatem, molestiae nulla minus quisquam fugit inventore perspiciatis eos dignissimos odit sapiente. Modi eveniet ratione quisquam rerum, amet tenetur.</div>
<div>Tempora officiis nisi harum, voluptatem nam amet asperiores accusamus. Soluta, ratione fugiat tenetur, voluptates repudiandae nobis culpa eius sequi amet temporibus quam officia error ipsam molestiae in ad molestias nisi!</div>
<div>Voluptas doloribus in blanditiis suscipit facere excepturi aliquid fugiat facilis iste molestias deleniti voluptatibus, autem, alias culpa, quaerat rerum, totam maiores tenetur dolores possimus dolorum perspiciatis. Explicabo velit sequi voluptates.</div>
<div>Tempora recusandae nemo illo at eveniet quod placeat neque ullam accusantium aperiam, error vero enim possimus quos magni doloribus aspernatur qui? Laudantium eum autem, magnam unde impedit, ex odit tempore!</div>
<div>Rerum labore eius, culpa, suscipit laborum error harum neque dolorem odit possimus vero quis vitae saepe accusamus consequuntur quo nobis perspiciatis tempore magni consectetur incidunt. Officiis aliquid consequatur iste, reprehenderit.</div>
<div>Commodi dicta nisi, et. Nostrum reiciendis placeat voluptates nisi assumenda delectus, in sint eos possimus, cupiditate nam ut dolores, consectetur veniam. Consectetur voluptas enim perspiciatis quibusdam, voluptates soluta sunt dolorum.</div>
<div>Nam, ea quos nemo modi blanditiis illo optio fuga at, natus enim reprehenderit non sed. Nisi nemo qui, voluptatibus quisquam ipsa nulla minima, libero illum nihil officia delectus voluptas unde!</div>
<div>Velit temporibus, cumque neque, doloribus sapiente aspernatur quia architecto dolorum natus nemo sit fuga, nostrum. Quod, nostrum! Beatae itaque ut harum, atque dolores nam, veritatis animi assumenda facilis, in obcaecati!</div>
</div>
</div>
</div>
<script>
var app=angular.module('app', ['ui.bootstrap']);
app.controller('LabsCtrl', function($scope, $http){
$scope.init = function(){
$http.get('http://localhost:3000/api/labs/labslist').success(function(labs){
$scope.labs = labs;
})
}
})
app.controller('LoginCtrl', function ($scope, $http) {
$scope.signIn = function(){
$http({
method: 'POST',
url: 'http://localhost:3000/api/login/',
data: {email: $scope.email,
password: $scope.pass}
}).then(function(res){
$scope.loginLabel = res.data;
});
}
$scope.signUp = function(){
$http({
method: 'POST',
url: 'http://localhost:3000/api/register',
data: {email: $scope.email,
password: $scope.pass,
type: "register"
}
}).then(function(res){
$scope.loginLabel = res.data;
});
}
});
</script>
<script type="text/ng-template" id="forma.html" >
<div ng-controller="LoginCtrl">
<div class = "row sredina">
<form>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" ng-model = "email" class="form-control" placeholder="uneti e-mail adresu">
</div>
<div class="form-group">
<label for="inputPass">Lozinka</label>
<input type="password" ng-model= "pass" class="form-control" placeholder="uneti lozinku">
</div>
</form>
</div>
<div class = "row">
<div class = "col-md-2">
</div>
<div class = "col-md-4">
<button ng-click="signIn()" class="btn btn-primary">Sign In</button>
</div>
<div class = "col-md-4">
<button ng-click="signUp()" class="btn btn-danger">Sign Up</button>
</div>
<div class = "col-md-2">
</div>
</div>
<div class="row"><label>odg: {{loginLabel}}</label></div>
</div>
</script>
</body>
</html>