-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (159 loc) · 10.7 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
e<!DOCTYPE html>
<html lang="sr_RS">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 minimum-scale=1.0 user-scalable=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="author" content="Dusan Milojkovic">
<meta name="description" content="Jednostavna JavaScript igrica.">
<!-- Sledeca tri reda su za PhoneGap tj Cordova -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<!-- Ova sekcija je za OpenGraph tj. Facebook i sl social media s...nja -->
<meta property="og:title" content="Zvekno Medu!">
<meta property="og:description" content="Jednostavna Javacript igrica.">
<meta property="og:locale" content="sr_RS" />
<meta property="og:type" content="website">
<meta property="og:image" content="http://zveknimedu.co.nf/igm/social.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Zvekni Medu!">
<meta property="og:url" content="http://zveknimedu.co.nf">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.png" type="image/png">
<title>Zvekni Medu!</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/cover.css" rel="stylesheet">
<!-- Moji stilovi -->
<link href="css/zveknimedu.css" rel="stylesheet">
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div id="header" class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Zvekni Medu!</h3>
<nav>
<ul class="nav masthead-nav">
<li id="home-b" class="active"><a href="#">Početna</a></li>
<li id="features-b"><a href="#">Karakteristike</a></li>
<li id="contact-b"><a href="#">Kontakt</a></li>
</ul>
</nav>
</div>
</div>
<div class="inner cover">
<div class="cssload-loader">Loading...</div>
<div id="intro-c" class="hidden">
<h1 class="cover-heading">Zvekni Medu!</h1>
<p class="lead">Jednostavna igrica za test <a href="http://getbootstrap.com/">Bootstrap-a</a>, <a href="http://jquery.com/">JQuery-a</a> i <a href="http://greensock.com/">GSAP-a</a>.</p>
<p class="lead">
<a href="#" id="start-b" class="btn btn-lg btn-default">Start!</a>
</p>
<p><a href="http://zveknimedu.co.nf">zveknimedu.co.nf</a> | <a href="https://github.com/dmilojkovic76/zvekni_medu_igrica.git">Link ka projektu na GitHub-u.</a></p>
</div>
<div id="game" class="container-fluid game hidden">
<div class="zvek" id="zvek1"><img href="img/zvek.png"></div>
<div class="meda" id="meda1">
<div class="lear"></div>
<div class="rear"></div>
</div>
<div class="meda" id="meda2">
<div class="lear"></div>
<div class="rear"></div>
</div>
<div class="meda" id="meda3">
<div class="lear"></div>
<div class="rear"></div>
</div>
<div class="zvukOnOff glyphicon glyphicon-volume-off" aria-hidden="true"></div>
<div class="iskljuci glyphicon glyphicon-off" aria-hidden="true"></div>
<div class="scores">
<div class="text-left score" id="score">Rezultat: 0</div>
<div class="text-center level" id="level">Nivo: 0</div>
<div class="text-right hiscore" id="hiscore">Rekord: 0</div>
</div>
<div class="resetScore" id="resetScore">
Da li zaista želite da obrišete najbolji rezultat?
<br />
<button type="button" class="obrisi btn btn-default" id="obrisi">Obriši</button>
<a href="#" id="nemoj">Otkaži.</a>
</div>
<div class="krajigre" id="krajigre">
<p>KRAJ IGRE!</p>
<p>Pokušajte ponovo.</p>
<p></p>
<a href="#" id="novaIgra" class="btn btn-lg btn-default">Start!</a>
<a href="#" id="izlaz" class="btn btn-lg btn-default">Kraj!</a>
</div>
</div>
<div id="features-c" class="hidden">
<h1 class="cover-heading">Karakteristike</h1>
<p class="lead">Mala igrica urađena kao projekat provežbavanja kodiranja u</p>
<a href="https://en.wikipedia.org/wiki/HTML5" class="lead">HTML5<img src="img/logo-html.png"></a>standardu.
<p></p>
<p>Osnovni zadatak je bio da se napravi funkcionalna igrica samo uz pomoć <a href="https://en.wikipedia.org/wiki/HTML">HTML elemenata</a>, <a href="http://www.w3schools.com/js/js_intro.asp"> JavaScript-a <img src="img/logo-js.png"></a> i <a href="http://www.w3schools.com/css/css3_intro.asp"> CSS-a <img src="img/logo-css3.png"></a></p>
<p>Da bi strana imala dinamičnost i automatski se adaptirala raznim veličinama ekrana ili browsera, korišćen je <a href="http://getbootstrap.com/">Bootstrap 3.3.7 <img src="img/logo-bootstrap.png"></a></p>
<p>Za lakšu interakciju sa DOM-om korišćen je <a href="http://jquery.com/">JQuery 3.1.0 <img src="img/logo-jquery.png"></a></p>
<p>Za brze animacije umesto jQuery.animate() korišćen je GreenSock-ov <a href="http://greensock.com/">GSAP 1.19.0 <img src="img/logo-greensock.svg"></a></p>
<p>Muzika koja je korišćena, preuzeta je sa: <a href="http://www.bensound.com/royality-free-music">http://www.bensound.com/royality-free-music</a></p>
</div>
<div id="contact-c" class="hidden">
<h1 class="cover-heading">Kontakt strana</h1>
<p>Poruku možete poslati na: <u>dmilojkovic76 et gmail tačka com</u></p>
<div id="form">
<p id="head" class="alert alert-danger hidden" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Greška:</span><span id="headErr">* Sva polja su obavezna! *</span>
</p>
<form id="kontakt_form" action="" method="post">
<fieldset>
<label for="ime" class="">Vaše ime:</label>
<input id="ime" name="ime" type="text" maxlength="50" class="form-control" placeholder="Pera Perić">
<p id="p1" class="alert alert-danger hidden" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Greška:</span><span id="p1Err">* Molio bih vas da koristite samo slova prilikom unosa vašeg imena. *</span>
</p>
<label for="email" class="margin-20">Email:</label>
<input id="email" name="email" type="email" maxlength="50" class="form-control" placeholder="pera@peric.com">
<p id="p2" class="alert alert-danger hidden" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Greška:</span><span id="p2Err">* Molio bih vas da unesete ispravnu email adresu. *</span>
</p>
<label for="tekst-poruke" class="margin-20">Vaša poruka:</label>
<textarea id="tekst-poruke" name="tekst-poruke" class="form-control" rows="2" placeholder="Tekst poruke."></textarea>
<input type="submit" id="submit-b" name="submit-b" class="btn btn-default margin-20" value="Slanje">
<p class="margin-20"></p>
</fieldset>
</form>
</div>
</div>
</div>
<div class="debug hidden" id="debugDiv">
Debug info: <span id="debugData"></span>
</div>
<div id="footer" class="mastfoot">
<div class="inner">
<p>Septembar 2016 - d00mil, odobrila i testirala - Katarina =)</p>
<p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/greensock/easing/EasePack.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>
<!-- <script type="text/javascript" src="js/greensock/jquery.gsap.min.js"></script>-->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>