dokumentacija - aleksajovanovic.com ... php,html, css, javascript, jquery, ajax, xml, xsl,json. opis...

Visoka skola strukovnih studija za informacione i komunikacione tehnologije

Predmet: Web programiranje PHP 1

Dokumentacija

http://aleksajovanovic.com/sites/tictactoe/

Student: Aleksa Jovanovic

Broj indeksa: 179/15

Smer: Internet tehnologije-Web programiranje

Sadrzaj Uvod ...................................................................................................................... 3

Korisceni programski jezici ................................................................................. 3

Opis funkcionalnosti .......................................................................................... 3

Template ............................................................................................................ 5

Tudj CSS ............................................................................................................. 7

Organizacija ........................................................................................................... 7

Organizaciona sema ........................................................................................... 7

Mapa sajta ......................................................................................................... 8

Slike stranica I opisi funkcionalnosti ................................................................... 9

Kodovi .................................................................................................................. 20

Dizajn baze podataka ........................................................................................... 78

Uvod

Korisceni programski jezici

Korisceni programski: PHP,HTML, CSS, JavaScript, jQuery, Ajax, XML, XSL,JSON.

Opis funkcionalnosti

1. Registracija- posetilac sajta moze da se registruje tako sto ce mu se klikom na register link u meniju otvoriti stranica za registraciju, gde moze da unese svoje podatke. Klikom na register pomocu regularnih izraza na strani klijenta (javascript) se proverava unos podataka , a zatim ajaxom salje do php stranice za proveru unosa gde se jos dodatno povecava nivo zastite zbog moguceg sql injection-a. Posle uspesnog upisa u bazu podataka salje se mail za potvrdu registracije.

2. Logovanje- posetilac koji je uspesno prosao fazu registracije mora prvo da potvrdi registraciju klikom na link u poruci koja mu je poslata , pa kada to uradi moze slobodno da se uloguje na svoj nalog. Naravno I ovde su primenjeni regularni izrazi na klijentskoj strani kao I na serverskoj.

3. Uredjivanje profila- kada je posetilac uspesno prosao fazu logovanja sajt ga

direktno redirektuje ka stranici njegovog profila. Tu moze da vidi svoje podatke koje je uneo , datum registracije I profilnu sliku. Na profilnoj stranici se takodje nalazi I dugme za uredjivanje profila. Klikom na dugme prikazuju se dodatna polja u koja upisuje nove podatke za izmenu postojecih. Takodje moze promeniti I profilnu sliku.

4. Pretraga- posetiocu je omogucena pretraga galerije slika koja je ukombinovana zajedno sa tekstom. Princip rada pretrage je takav da se ajaxom samo jednom kontaktira baza, selektuju se sve slike iz baze I skladite u JSON object, a zatim se radi pretraga JSON objecta u zavisnosti sta je korisnik uneo uz minimalno opterecenje baze.

5. Admin panel- pristup admin panelu imaju samo oni korisnici cija je uloga

administrator ili moderator. Ceo admin panel radi pomocu ajax-a. Pomocu admin panela je moguce menjati ceo sadrzaj sajta sem statickih stranica kao sto su stranice za registraciju, pretragu I igricu.

6. Galerija slika- nad galerijom slika primenjeno je stranicenje gde je u

zavisnosti od broja slika prikazana navigacija sa brojevima. Potpuno je dinamicno, a ono najbitnije jeste sto se pomocu ajaxa dohvata limitiran broj slika I prikazuje ih korisniku bez ikakvog osvezavanja stranice. Takodje nad galerijom je primenjen I jquery gallery plugin.

7. Anketa- realizovana je pomocu tekstualnog fajla, php-a I ajaxa. Kada

posetilac udje na sajt (na bilo koju stranu) nakon par sekundi pojavljuje se anketa. Klikom na dugme submit ajaxom se kontaktira php stranica pomocu koje se upisuje ip adresa korisnika zajedno sa njegovim glasom. Sledeci put kada bude ulazio taj isti korisnik proverom njegovog ip-a kod ce odluciti da ne prikaze anketu.

8. Igrica iks oks- najsladje za kraj Igrica iks oks koja je realizovana pomocu

javascripta (jQuery). Moguce je igrati u modovima Single player I Multiplayer. Single player mod gde korisnik igra protiv kompjutera tj. (protiv mog koda!.. uvek ga pobede ). Sa druge strane postoji I

multiplayer mod gde registrovani korisnik moze da generise link a zatim taj link posalje svom prijatelju protiv kojeg hoce da igra.

Template

Meni

Wrapper

Footer

<!DOCTYPE html> <html> <head> <?php include("header.php"); ?> </head> <body> <?php include("menu.php");?> <div id="omot"> <div id="menu-icon"><span id='ikOnicaMenu'><i class="material-icons">menu</i> Menu</span><span id='siteLogoResp'><a href="index.php?idStr=1"><img src="slike/logo.png" alt="tic-tac-toeLogo"/></a></span></div> <div id="contents"> </div> <div id="modalBox"> <h3>Message</h3> <p class="messageModal"> Here is some message! </p> <span class="closeModal">×</span> </div> <div id='voteBoxx'> <p>Do you like to play Tic Tac Toe ?!</p> <ul id="voteList"> <li><label for="yees">Yes</label><input id="yees" type="radio" name="voteSite" value="yes" class='voteOption'/><div class='check'></div></li> <li><label for="noo">No</label><input id="noo" type="radio" name="voteSite" value="no" class='voteOption'/><div class='check'></div></li> </ul> <p class='voteError'>You must select something!</p> <span id="voteCloseButt">x</span> <span id="submitVote">Submit vote</span> </div> <?php include("footer.php");?>

</div> </body> </html>

Tudj CSS

Nije koriscen tudj CSS kod za template sajta.

Organizacija

Organizaciona sema

Mapa sajta <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="sitemap.xsl"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"> <url> <loc>http://aleksajovanovic.com/sites/tictactoe/index.php</loc> <lastmod>2016-11-26T04:40:01+00:00</lastmod> <changefreq>yearly</changefreq> <priority>1.00</priority> </url> </urlset>

Slike stranica I opisi funkcionalnosti

Pocetna.php

1. Dinamicki sadrzaj (text) koji se dovlaci iz baze podataka. Ovaj text I text na svim ostalim stranicama je moguce menjati , dodavati ili brisati pomocu admin panela.

2. Da ne bih ponavljao na svakoj stranici se nalazi isti meni: Klikom na meni ikonicu prikazuje se meni koji sadrzi dinamicke linkove koje takodje dovlaci iz baze I isto tako ih je moguce menjati, dodavati, brisati. Takodje se nalazi forma za logovanje I forma za pretragu.

3. Na svakoj stranici ce se prikazivati anketa koja je realizovana pomocu text fajla, php-a I ajax-a. Radi po principu uzmi ip posetioca, proveri u da li postoji takav ip unutar text fajla ako ne postoji prikazi anketu odnosno ako postoji sakrij. Odmah posle glasanja izlaze rezultati koji se isto dovlace pomocu ajaxa.

4. Footer u kome se nalazi dinamicki meni.

About.php

1. Dinamicki sadrzaj. Sav text se dovlaci iz baze.

Strategies.php

1. Dinamicka galerija sa stranicenjem. Cela logika se zasniva na tome da se ajaxom kontaktira php stranica koja uzima svaka tri zapisa iz baze podataka, vrati javascriptu a on prikaze u stranici. Donja navigacija sa brojevima se racuna na osnovu broja zapisa I broj koliko ce se njih prikazati.

2. Koriscen je gallery jquery plugin koji uvelicava sliku kada se klikne na nju. A dodatna opcija je navigacija do ostalih slika sa opcijama next I prev. Ovaj kod vezan za plugin sam preuzeo.

Author.php

1. Na ovoj stranici se dovlaci dinamicki text o autoru. On se moze menjati, brisati ili dodavati.

2. Kontakt forma pomocu koje posetilac moze da kontaktira autora. Unos forme se provera pomocu regularnih izraza na klijentskoj strani (jquery), ako je sve dobro uneto podaci se salju na php stranicu putem ajax-a gde se dodatno proveravaju regularnim izrazima, a onda se prosledjuju mail funkciji koja salje mail autoru.

Register.php

1. Omogucena registracija posetilaca. Radi pomocu ajax-a koji zajedno sa php-om kontaktira bazu I pri tacnom unosu podataka upisuje podatke u bazu. Svi podaci se proveravaju sa obe strane (I klijentske I serverske) vrsi se dodatna zastita protiv sql injection-a. Ono sto je bitno jeste to da Email mora biti unikatan pri registraciji. Ako Email vec postoji u bazi , posetilacu se ispisuje dodatna poruka koja ga obavestava da promeni unos za mail, jer je taj vec zauzet. Kada se izvrsi upis u bazu pomocu mail funkcije se salje mail novoregistrovanom korisniku da potvrdi u suprotnom nece moci da se uloguje. Link koji se generise pri slanju maila nastaje pomocu njegovog mail-a I slucajnog broja.

AdminPanel.php

1. Admin panel- se sastoji od cetiri sekcije (Menu manager,Page text manager,Gallery manager,User manager). Kao sto I sama imena sekcija govore moguce je upravljati celim sadrzajem sajta. Ceo admin panel radi pomocu ajax-a. Admin unese,ako je dobar unos ajax prosledi php-u, php takodje proverava unos poveze se sa bazom I upise,izbrise ili izmeni odredjenu kolonu u tabeli unutar bazi podataka.

2. Menu manager- izmena,dodavanje I brisanje meni stavki iz menija. Takodje je dodata opcija za promenu rasporeda meni stavki.

3. Page text manager- izmena, dodavanje I brisanje texta sa stranica. Pri pokretanju ove kartice prikaze se dijalog koji trazi da admin izabere stranicu koju zeli da menja. Putem ajax-a se dohvataju postojece kolone unutar tabele za izabranu stranicu. A onda admin moze da pocne sa administriranjem te stranice.

4. Gallery manager – dozvoljava brisanje I dodavanje novih slika u galeriju. Putanja I ime slike se cuva unutar baze podataka. Kada se otvori kartica za administriranje galerije I stisne na dugme load gallery pocinju da se prikazuju sve slike iz baze pomocu ajax-a. Kada admin pokusava da upload-uje sliku, vrsi se provera formata slike na klijentskoj strani, isto tako I na serverskoj strani samo sto se jos dodatno proverava I velicina pa ako je sve uredu, vrsi se upload slike na server, a putanja slike I ime slike se cuvaju unutar baze.

5. User manager- Potpuna administracija korisnika. Dodavanje,brisanje izmena postojecih pomocu ajax-a. Moguca je promena lozinke( koristi se

posebna biblioteka javascripta..Napomena : da bi se menjala lozinka mora se cekirati jos jedno dodatno polje) kao I promena uloge korisnika.

Search.php

1. Omogucena pretraga galerije slika zajedno sa text-om. Pretrazi se pristupa pomocu forme iz menija gde se takodje proverava unos sa klijentske strane. Pretraga je zasnovana po principu korisnik unese nesto unutar forme. Javascript putem ajax-a posalje zahtev php stranici koja dohvati sve redove iz baze podataka I vrati ih javascriptu. Javascript skladisti odgovor php stranice u JSON objekat I onda krece u pretragu tog JSON objekta. Pretraga na stranici pretraga radi sa dogadjajem onkeyup, sto znaci da bi ajax-om svaki put kada je stisnuto dugme kontaktirali bazu i samim tim bi je preopteretili. Pa sam zato izvrsio jedan upit i ceo odgovor stavio u JSON objekat a zatim radio pretragu tog objekta.

Profile.php

1. Prikaz profila korisnika-svi vezani podaci za ulogovanog korisnika se prikazuju na ovoj stranici zajedno sa profilnom slikom. Korisnik ima mogucnost da promeni svoje podatke klikom na dugme edit profile. Prikazuju se dodatna polja u koja moze da unese nove podatke. Ovi podaci se proveravaju na obe strane I upisuju u bazu. Upload slike vrsi se pomocu ajax-a, a pri upload-u se proverava tip slike kao I velicina slike.

generateLink.php

1. Ovoj stranici pristupaju samo autorizovani korisnici. Klikom na generate link dugme generise se link a samim tim I vrsi upis u bazu za multiplayer iks oks. Link se generise na osnovu korisnickog id-a I slucajnog broja. Dalje se prikazuje dugme za kopiranje link-a da bi korisnik mogao da posalje to svom prijatelju protiv kojeg bi igrao. Kada je onaj korisnik kojem je prosledjen link klikne na njega. Unutar baze se upise slucajni broj kao njego identifikator I igra moze da pocne.

ticTacToe.php

1. Single-player- ovaj mod omogucava korisniku da igra protiv kompjutera. Celu logiku igranja kompjutera sam ja osmislio I napisao u javascriptu(jQuery). Korisnik prvi igra I svaki put kada odigra svoj potez kod proracuna sledeci korak, upise u matricu tj. odigra ga I pomocu ajax-a ispise znak oks na tabli. Nakon odigrane partije pokazuje se dijalog koji vodi u dva pravca ili na pocetnu stranicu ili igranje ispocetka.

2. Multiplayer- ovaj mod omogucava korisniku da generise link na stranici generateLink.php I posalje prijatelju protiv kojeg hoce da igra. Kada oba korisnika pristupe stranici za igranje igre, od tog trenutka otpocinje njihova sesija u koju se upisuje svaki potez odigran na tabli. Logika ovog koda je takva da kada korisnik 1 odigra potez taj potez se upise u bazu pomocu ajax-a I php-a zatim upise prethodni potez u sesiju I ceka na potez korisnika 2. Da bi korisnik 2 video sta je korisnik 1 odigrao prisutna je funkcija refreshTable koja vrsi ajax long pooling. To znaci da na svakih 2-3 sekunde salje ajax zahtev php stranici koja kontaktira bazu I tako proverava da li je korisnik 1 odigrao svoj potez ako jeste prikaze ga I omogucava korisniku 2 da odigra svoj potez I tako u krug dok se partija ne zavrsi. Kada se partija zavrsi, opet putem ajaxa I php-a kontaktira se baza I brise se red koji je bio vezan za tu partiju nakon toga se prikazuje dijalog koji vodi u jednom smeru a to je pocetna stranica.

Kodovi About.php

<?php include("konekcija.php"); $query="SELECT * FROM tekst WHERE stranicaId=".$str; $rez=mysqli_query($konekcija,$query); mysqli_close($konekcija);

?> <div id="aboutGameContent"> <h1>About</h1> <div id="aboutgameContainerContent"> <div id="aboutGame-text"> <?php while($txt=mysqli_fetch_assoc($rez)){ echo("<article class='aboutGame-text-block'> <h2>".$txt['naslov']."</h2> <p>".$txt['sadrzaj']."</p> </article>"); } ?> </div> <div id="image-toon-container"> <img src="slike/iksokstoon.png" /> </div> </div> </div>

User.php

<?php if(isset($_SESSION['korisnikPodaci'])){ $nizKorisnikPodaci=array_values($_SESSION['korisnikPodaci']); echo "<div id='user-container-profile'> <h1>Welcome back {$nizKorisnikPodaci[0]} !</h1> <div id='userContainer'> <h2>Profile view</h2> <div id='image-holder-user'>"; if($_SESSION['korisnikPodaci']['slikaKor']!='0'){ echo "<img src='slike/userSlike/".$_SESSION['korisnikPodaci']['slikaKor']."' alt='korisnikSlika' />"; }else{ echo "<i class='material-icons'>account_box</i>"; } echo '</div> <span id="pchnagePicture">Change picture</span> <input type="file" name="uploadProfileImageUser" id="uploadProfileImageUser" />

<div id="tableProfileHolder"> <table id="userTableProfile">'; $arrayTableTdNames=array("First name","Last name","Email","Registred"); foreach($nizKorisnikPodaci as $ind=>$val){ if($ind<4){ echo ("<tr><td>$arrayTableTdNames[$ind]</td><td>$val </td><td class='inputchngProfile'></td></tr>"); } } echo '<tr><td colspan="3"><button id="editProfile">Edit profile</button></td></tr></table></div></div></div>'; }else{ header("Location:error.php"); } ?>

voteLogic.php

<?php if(isset($_POST['votePrikazi'])){ $ip = getenv('HTTP_CLIENT_IP')?: getenv('HTTP_X_FORWARDED_FOR')?: getenv('HTTP_X_FORWARDED')?: getenv('HTTP_FORWARDED_FOR')?: getenv('HTTP_FORWARDED')?: getenv('REMOTE_ADDR'); $voteFile="vote.txt"; if(proveriVisitora($voteFile,$ip)){ if(isset($_POST['voteOption'])){ $voteResult=$_POST['voteOption']; upisiVote($voteFile,$ip,$voteResult); //ISPISATI REZULTATEEEEEEE ispisiRezultate($voteFile); }else{ echo "1"; } }else{ echo "0"; } }else{header("Location:error.php");} function upisiVote($voteFile,$ip,$voteResult){ $voteHandle=fopen("$voteFile","a"); fwrite($voteHandle,"$ip%$voteResult".",\n"); fclose($voteHandle); } function proveriVisitora($voteFile,$ip){ $voteHandle=fopen("$voteFile","r"); $procitaj=fread($voteHandle,filesize($voteFile)); $voteArray=explode(",",$procitaj);

fclose($voteHandle); foreach($voteArray as $val){ $docIp=substr($val,0,strpos($val,'%')); if(trim($docIp)==$ip){ return false; } } return true; } function ispisiRezultate($voteFile){ $voteHandle=fopen($voteFile,"r"); $procitaj=fread($voteHandle,filesize($voteFile)); $voteArray=explode(",",$procitaj); fclose($voteHandle); $yes=0; $no=0; foreach($voteArray as $val){ $option=substr($val,strpos($val,'%')+1); if(trim($option)=="yes"){ $yes++; }else if(trim($option)=="no"){ $no++; } } $total=$yes+$no; echo "$yes,$no,$total"; } ?>

admin.php

<?php if(isset($_SESSION['korisnikPodaci'])){ if($_SESSION['korisnikPodaci']['naziv']=="Administrator" || $_SESSION['korisnikPodaci']['naziv']=="Moderator"){ include("konekcija.php"); $query="SELECT * FROM stranice ORDER BY pozicija ASC"; $rez=mysqli_query($konekcija,$query); $menuArray= array(); while($txt=mysqli_fetch_assoc($rez)){ $menuArray[]=$txt; } }}else{die();} ?> <div id="panelContainer"> <h1>Admin Panel</h1>

<div id = "tabs-1"> <ul id="tabs-menu"> <li><a href = "#tabs-4">Menu manager</a></li> <li><a href = "#tabs-2">Page text manager</a></li> <li><a href = "#tabs-5">Gallery manager</a></li> <li><a href = "#tabs-3">User manager</a></li> </ul> <div id = "tabs-2"> <div class="div-admin-holder"> <h2>Page text manager</h2> <p>Choose the page you want to edit</p> <form name="birajStranicu" id="birajStranicu" action="adminPanel.php" method="GET"> <ul id="page-list-admin"> <?php foreach($menuArray as $txt){ if($txt['stranicaId']==3 || $txt['stranicaId']==5){continue;} echo("<li><label for='".$txt['stranicaId']."'>".$txt['ime']."</label> <input type='radio' name='stranica' id='".$txt['stranicaId']."' class='RBstranica' value='".$txt['stranicaId']."'/> <div class='check'><div class='inside'></div></div></li>"); } ?> </ul> <input type="submit" name="submitEPage" id="submitEPage" value="Select page"/> </form> <div id="page-txt-manager-output"> </div> <button id="addAdminBut" class="admButt">Add text</button> <button id="editAdminBut" class="admButt">Edit text</button> <button id="deleteAdminBut" class="admButt">Delete text</button> </div> </div> <div id = "tabs-3"> <div class="div-admin-holder"> <h2>Users</h2> <p>Manage users</p> <p class='noteWarning'>Important: When you want to update/change password of user you must check additional checkbox!</p> <button id="loadUsersTable" class="admButtUser">Load users</button> <div id="usersTableButt-holder"> <div id="usersTable-holder"> </div> <button id='addAdminUser' class='admButtUser'>Add user</button> <button id='editAdminUser' class='admButtUser'>Edit users</button> <button id='deleteAdminUser' class='admButtUser'>Delete users</button>

</div> </div> </div> <div id = "tabs-4"> <div class="div-admin-holder"> <h2>Manage menu</h2> <p>Here you can edit text that will display as menu and change position of menu elements by dragging it!</p> <p class='noteWarning'>Note: When you want to update/change position of menu-item you can do it by clicking on draggable object with the mouse and dragging it to top or bottom!</p> <form name="forma-menu-admin" id="forma-menu-admin" action="" method="post"> <ul id="sortable"> <?php foreach($menuArray as $txt){ echo("<li class='ui-state-default'> <input type='text' class='inputChangeMenu' value='".$txt['ime']. "'/><b class='obicanTxtMenuAdm'>".$txt['ime']. "</b><input type='checkbox'class='hidChkBox hidMenu ' value='".$txt['stranicaId']."'/></li>"); } ?> </ul> </form> <button id="addMenu" class="changeMenuBut">Add menu item</button> <button id="changeMenuName" class="changeMenuBut">Edit menu</button> <button id="deleteMenu" class="changeMenuBut">Delete menu item</button> <button id="changeMenuPosition" class="changeMenuBut">Change item order</button> </div> </div> <div id = "tabs-5"> <div class="div-admin-holder"> <h2>Gallery manager</h2> <p>Here you can edit gallery. You can upload pictures to gallery and connect them with text!</p> <button class="galleryAdmBut imgButHidd" id="uploadImageAdm">Choose image to upload</button> <button class="galleryAdmBut" id="loadGalleryAdm">Load gallery</button> <button class="galleryAdmBut imgButHidd" id="removeImageAdm">Remove image</button> <form name="uplAdmGallery" action="" id="uplAdmGallery" method="post" enctype="multipart/form-data"> <input id="InpUploadImageAdm" name="InpUploadImageAdm" type="file"/> <input type="submit" name="submitUplImg" id="submitUplImg"/> </form> <div id="gallery-containerAdminP"> </div> </div> </div> </div> </div>

Author.php

<?php include("konekcija.php"); $query="SELECT naslov,sadrzaj FROM tekst WHERE stranicaId=".$str; $rez=mysqli_query($konekcija,$query); mysqli_close($konekcija); ?> <div id="author-container"> <h1>About author</h1> <div id="imageContainer"> <div id="image-holder"> <a href="http://www.aleksajovanovic.com"><img src="slike/aleksajovanovic.jpg" alt="Aleksa Jovanovic"/></a> </div> </div> <?php while($txt=mysqli_fetch_assoc($rez)){ echo("<div id='text-holder'> <h2>".$txt['naslov']."</h2> <p>".$txt['sadrzaj']."</p> </div>");} ?> <div id='contact-holder'> <h2>Contact Form</h2> <form name='contForm' id='contForm' action='' method='POST'> <input type='text' name='contName' id='contName' placeholder='Name'/> <input type='text' name='contEmail' id='contEmail' placeholder='Email'/> <textarea name='contMess' id='contMess' rows='5' maxlength='200' placeholder='Message'></textarea> <span id='authorF-Greske'></span> <input type='submit' name='contButton' id='contButton' value='SUBMIT'/> </form> </div> </div>

Error.php

<section id="page-container" style="width:100%; background:url() color:#222;text-align:center; font-family:arial;"> <div id="image-container" style="width:100%; padding-top:50px;"> <img style="width:300px; height:300px;" src="http://aleksajovanovic.com/plaky.svg" alt="plaky-smiley"> </div> <div id="text-container" style="width:100%; height:200px;"> <h1 style="padding-top:20px; font-size:35px;">Ooops SORRY! <br/>We couldn't find the page you were looking for!</h1> <p style="width:100%; padding-top:10px; font-size:20px;"> Back to Home page <a style="color:#222; font-weight:bold;" href="http://aleksajovanovic.com">Aleksa Jovanovic</a></p>

</div> </section>

Footer.php

<footer id="footer"> <div id="scroll-to-top"><img src="slike/scrollToTop.png" alt="scrollToTop"></div> <div id="footer-menu-container"> <nav id="footer-menu"> <ul> <?php include("konekcija.php"); $query="SELECT * FROM stranice ORDER BY pozicija ASC;"; $rez=mysqli_query($konekcija,$query); mysqli_close($konekcija); while($red=mysqli_fetch_assoc($rez)){ if($red['stranicaId']==5){ if(isset($_SESSION['korisnikPodaci'])){ continue; }} echo ("<li><a href='index.php?idStr=".$red['stranicaId']."'>".$red['ime']."</a></li>"); } ?> </ul> </nav> <div id="social-container"> <span id="face"><a href="http://www.facebook.com"></a></span> <span id="twit"><a href="http://www.twitter.com"></a></span> <span id="youtube"><a href="http://www.youtube.com"></a></span> </div> <div id="coppy"><h3>Copyrights © All rights reserved. <a href="http://www.aleksajovanovic.com">Aleksa Jovanovic</a> </h3> </div> </div> </footer>

ticTacToe.php

<div id="gameSingle-container"> <h1>TIC-TAC-TOE Single player</h1> <div id="table-container"> <div class="row-container">

<div class="board" id="left-top"></div> <div class="board" id="center-top"></div> <div class="board" id="right-top"></div> </div> <div class="row-container"> <div class="board" id="left-center"></div> <div class="board" id="center-center"></div> <div class="board" id="right-center"></div> </div> <div class="row-container"> <div class="board" id="left-bot"></div> <div class="board" id="center-bot"></div> <div class="board" id="right-bot"></div> </div> </div> </div>

Header.php

<link rel="icon" href="slike/favicon.ico" type="image/x-icon"/> <link rel="stylesheet" type="text/css" href="stil.css" media="screen"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/jquery-3.1.1.min.js"></script> <?php if(isset($_GET['searchSubmit'])){ echo("<title>Tic Tac Toe | Search </title><script src='js/highlight.js'></script>");} ?> <script src="js/main.js"></script> <?php if(isset($_GET['idStr'])){ $str=$_GET['idStr']; switch($str){ case "1":echo("<title>Tic Tac Toe</title>");break; case "2":echo("<title>Tic Tac Toe | About</title>");break; case "3":echo("<title>Tic Tac Toe | Strategy Gallery</title><link href='simplelightbox.min.css' rel='stylesheet'>");break; case "4":echo("<title>Tic Tac Toe | Author Aleksa Jovanovic</title>");break; case "5":echo("<title>Tic Tac Toe | Register</title>");break; case "6":echo("<title>Tic Tac Toe | Admin Panel</title><script src='js/jquery-ui.min.js'></script><script src='js/md5.min.js'></script><script src='js/admin.js'></script>");break; case "7":echo("<title>Tic Tac Toe | Single Player</title><script src='js/singleP.js'></script>");break; case "8":echo("<title>Tic Tac Toe | Multiplayer</title>");break; default:echo("<title>Tic Tac Toe</title>"); break; } }else{ $str=1;

echo("<title>Tic Tac Toe</title>"); } ?> <meta name="keywords" content="playTicTacToe,TicTacToe,Tic Tac Toe,tictactoe,multiplayer tictactoe"/> <meta name="copyright" content="Tic Tac Toe 2017"/> <meta name="description" content="Welcome to Tic Tac Toe dynamic website. Here you can learn something more about Tic Tac Toe gameplay,strategies and how it will help us to better reflect in the future. You can play Tic Tac Toe in singleplayer mode(against computer) and multiplayer mode(against friend). This site was created by Aleksa Jovanovic in the purpose of learning Procedural PHP alongside with MYSQL database."/> <meta name="author" content="Jovanovic Aleksa"> <meta charset="UTF-8">  <meta property="og:site_name" content="Tic Tac Toe"/> <meta property="og:title" content="Tic Tac Toe | Home" /> <meta property="og:url" content="http://aleksajovanovic.com/sites/tictactoe/index.php" /> <meta property="og:type" content="website" /> <meta property="og:description" content="Welcome to Tic Tac Toe dynamic website. Here you can learn something more about Tic Tac Toe gameplay,strategies and how it will help us to better reflect in the future. This site was created by Aleksa Jovanovic in the purpose of learning Procedural PHP alongside with MYSQL database." /> <meta property="og:image" content="http://aleksajovanovic.com/sites/tictactoe/slike/logo.png" />  <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@TicTacToe"/> <meta name="twitter:title" content='Tic Tac Toe | Home'/> <meta name="twitter:description" content="Welcome to Tic Tac Toe dynamic website. Here you can learn something more about Tic Tac Toe gameplay,strategies and how it will help us to better reflect in the future. This site was created by Aleksa Jovanovic in the purpose of learning Procedural PHP alongside with MYSQL database."/>  <meta itemprop="title" content='Tic Tac Toe | Home'/> <meta itemprop="description" content="Welcome to Tic Tac Toe dynamic website. Here you can learn something more about Tic Tac Toe gameplay,strategies and how it will help us to better reflect in the future. This site was created by Aleksa Jovanovic in the purpose of learning Procedural PHP alongside with MYSQL database"/>

Index.php

<?php ob_start(); include("sesija.php");//ini_set('display_errors',0);error_reporting(E_ALL|E_STRICT);?> <!DOCTYPE html> <html> <head> <?php include("header.php"); ?> </head> <body>

<?php include("menu.php");?> <div id="omot"> <div id="menu-icon"><span id='ikOnicaMenu'><i class="material-icons">menu</i> Menu</span><span id='siteLogoResp'><a href="index.php?idStr=1"><img src="slike/logo.png" alt="tic-tac-toeLogo"/></a></span></div> <div id="contents"> <?php if(isset($_GET['idStr'])){ $str=$_GET['idStr']; switch($str){ case "1":include("pocetna.php");break; case "2":include("aboutGame.php");break; case "3":include("strategies.php");break; case "4":include("author.php");break; case "5":include("register.php");break; case "6": isset($_SESSION['korisnikPodaci']) ? $_SESSION['korisnikPodaci']['naziv']=="Administrator" ? include("adminPanel.php"):($_SESSION['korisnikPodaci']['naziv']=="Moderator"?include("adminPanel.php"):header("Location:index.php?idStr=1")):header("Location:index.php?idStr=1"); break; case "7":include("gameSingle.php");break; case "8":include("gameIndex.php");break; case "9": (isset($_SESSION['korisnikPodaci'])) ? include("user.php") : header("Location:index.php?idStr=1"); break; case "10":$proc=new XsltProcessor;$proc->importStylesheet(DOMDocument::load("sitemap.xsl"));echo $proc->transformToXML(DOMDocument::load("sitemap.xml"));break; default: header("Location:index.php?idStr=1");} }else if(isset($_GET['searchSubmit'])){ include("search.php"); }else{ if(isset($_SESSION['confirmMessEmail'])){ $mess=$_SESSION['confirmMessEmail']; echo "<script> $(document).ready(function(){modalBoxMessage('$mess');}); </script>"; session_destroy(); } $str=1; include("pocetna.php"); } ?> </div> <div id="modalBox"> <h3>Message</h3> <p class="messageModal"> Here is some message! </p> <span class="closeModal">×</span>

</div> <div id='voteBoxx'> <p>Do you like to play Tic Tac Toe ?!</p> <ul id="voteList"> <li><label for="yees">Yes</label><input id="yees" type="radio" name="voteSite" value="yes" class='voteOption'/><div class='check'></div></li> <li><label for="noo">No</label><input id="noo" type="radio" name="voteSite" value="no" class='voteOption'/><div class='check'></div></li> </ul> <p class='voteError'>You must select something!</p> <span id="voteCloseButt">x</span> <span id="submitVote">Submit vote</span> </div> <?php include("footer.php");?> </div> </body> </html> <?php ob_end_flush(); ?>

Konekcija.php

<?php if(isset($_SESSION['korisnikPodaci'])){ if(($_SESSION['korisnikPodaci']['naziv']=='Administrator')||($_SESSION['korisnikPodaci']['naziv']=='Moderator')){ $konekcija=mysqli_connect("localhost"," bla "," bla ","bla"); }else{ $konekcija=mysqli_connect("localhost"," bla "," bla "," bla "); } }else{ $konekcija=mysqli_connect("localhost"," bla "," bla "," bla "); } ?>

Menu.php

<div id="menu-container"> <div id="siteLogo"><a href="index.php?idStr=1"><img src="slike/logo.png" alt="tic-tac-toeLogo"/></a></div> <nav id="menu"> <ul> <?php include("konekcija.php"); $query="SELECT * FROM stranice ORDER BY pozicija ASC"; $rez=mysqli_query($konekcija,$query);

mysqli_close($konekcija); while($txt=mysqli_fetch_assoc($rez)){ if($txt['stranicaId']==5){ if(isset($_SESSION['korisnikPodaci'])){ continue; } } echo ("<li><a href='index.php?idStr=".$txt['stranicaId']."'>".$txt['ime']."</a></li>"); } if(isset($_SESSION['korisnikPodaci'])){ if($_SESSION['korisnikPodaci']['naziv']=="Administrator" || $_SESSION['korisnikPodaci']['naziv']=="Moderator"){ echo ("<li><a href='index.php?idStr=6'>Admin panel</a></li>"); } } ?> </ul> </nav> <div id="search-container"> <form name="searchForma" id="searchForma" action="index.php" method="GET"> <button id="searchSubmit" name="searchSubmit" type="submit"><i class="material-icons">search</i></button> <input type="text" name="searchInput" id="searchInput" placeholder="Search.."/> </form> </div> <?php if(isset($_SESSION['korisnikPodaci'])){ echo " <div id='menuKorisnikProfile'> <span>"; if ($_SESSION['korisnikPodaci']['slikaKor']=='0'){ echo "<i class='material-icons'>account_box</i>"; }else{ echo "<img src='slike/userSlike/{$_SESSION['korisnikPodaci']['slikaKor']}' alt='profilePicture' />"; } echo "</span> <p> {$_SESSION['korisnikPodaci']['firstName']} {$_SESSION['korisnikPodaci']['lastName']}</p> </div> <div id='logoutBox'> <form method='POST' action='login.php' > <span><a href='index.php?idStr=9'>Profile</a></span> <input type='submit' name='logout' value='Log out' /> </form> </div>"; }else{ echo '<div id="login-box"> <p>Log in</p>

<form action="login.php" name="loginForma" id="loginForma" method="POST"> <span><i class="icon material-icons">account_circle</i><input type="text" name="loginUsername" id="loginUsername" placeholder="Email"/></span> <span><i class="icon material-icons">lock</i><input type="password" name="loginPass" id="loginPass" placeholder="Password"/></span> <input type="submit" name="loginButton" id="loginButton" value="Log in"/> </form> </div>'; } ?> </div>

MulLogic.php

<?php session_start(); if(isset($_POST['idGame'])){ $idGame=$_POST['idGame']; include("konekcija.php"); $auth=uniqid()."_".rand(0,2000); $query="INSERT INTO mulgame(idGame,auth) VALUES($idGame,'$auth')"; if(mysqli_query($konekcija,$query)){ echo $auth; $_SESSION['auth']=$auth; }else{ if(mysqli_errno($konekcija)==1062){ echo "1"; $_SESSION['auth']=$auth; }else{ echo "0"; } } mysqli_close($konekcija); }else if(isset($_POST['brisiIdGame'])){ $idGame=$_POST['brisiIdGame']; $query="DELETE FROM mulgame WHERE auth='$idGame'"; include("konekcija.php"); mysqli_query($konekcija,$query); mysqli_close($konekcija); unset($_SESSION['auth']); unset($_SESSION['idPlayer']); unset($_SESSION['storedMoves']); }else{ header("Location:error.php"); } ?>

Pocetna.php

<?php include("konekcija.php"); $query="SELECT naslov,sadrzaj,opis FROM tekst WHERE stranicaId=".$str; $rez=mysqli_query($konekcija,$query); mysqli_close($konekcija); $rules=""; while($txt=mysqli_fetch_assoc($rez)){ if($txt['opis']=='bodyText'){ $naslov=$txt['naslov'];$p=$txt['sadrzaj']; }else{ $rules.=$txt['sadrzaj']."="; } } ?> <div id="container-home"> <div id="content-home"> <div id="home-table-holder"> <div class="letter-row"> <span class="letter" >T</span> <span class="letter" >I</span> <span class="letter" >C</span> </div> <div class="letter-row"> <span class="letter" >T</span> <span class="letter" >A</span> <span class="letter" >C</span> </div> <div class="letter-row"> <span class="letter" >T</span> <span class="letter" >O</span> <span class="letter" >E</span> </div> <div id="home-rowOne"></div> <div id="home-rowTwo"></div> </div> <div id="buttons"> <a href="index.php?idStr=7" class="navigate" >Play against computer</a> <a href="index.php?idStr=8" class="navigate" >Play with friend</a> </div> </div> <div id="homepage-text"> <div class="home-text-box"> <h1><?php echo $naslov; ?></h1> <p><?php echo $p; ?></p> <span class="playButton"><a href="index.php?idStr=7">Play game!</a></span> </div> <div id="rules-home"> <h2>Rules for TIC-TAC-TOE</h2> <div id="rules-box"> <?php

$nizPravila=explode("=",$rules); $nizPravila=array_filter($nizPravila); foreach($nizPravila as $i=>$val){ $rdBr=$i+1; echo ("<div class='rulesind'><h2>".$rdBr."</h2><p>".$val."</p></div>"); } ?> </div> </div> </div> </div> <div id="loadingDiv"> <p>Loading...</p> <div id="loadCircle-cont"> <span class="loadCircle" id="o"></span> <span class="loadCircle" id="tw"></span> <span class="loadCircle" id="t"></span> </div> </div>

Register.php

<?php if(isset($_SESSION['korisnikPodaci'])){header("Location:index.php?idStr=9");} ?> <div id="regForm-container"> <h1>Sign Up</h1> <div id="regformSadr"> <h2>Fill in the form below to play Tic-Tac-Toe in multiplayer!</h2> <form name="regForm" id="regForm" action="" method="GET"> <div class="label-input"> <span><input type="text" id="regName" name="regName" placeholder="First Name" /></span> </div> <div class="label-input"> <span><input type="text" id="regUsername" name="regUsername" placeholder="Last Name"/></span> </div> <div class="label-input"> <span><input type="password" id="regPassword" name="regPassword" placeholder="Password" /></span> </div> <div class="label-input"> <span><input type="password" id="regRetypePassword" name="regRetypePassword" placeholder="Retype password" /></span> </div>

<div class="label-input"> <span><input type="text" id="regEmail" name="regEmail" placeholder="Email" /></span> </div> <div class="label-input"> <span><input type="checkbox" name="regTerms" id="regTerms"/><label for="regTerms">I have read and agreed to the Tic-Tac-Toe <a href="#">Terms of Service.</a></label></span> </div> <div class="label-input"><input type="submit" value="REGISTER" name="regButton" id="regButton"></div> </form> </div> </div>

Search.php

<?php if(isset($_GET['searchInput'])){ echo '<script></script>'; } ?> <div id="search-container-page" class="srchClassforPost"> <h1>Search results</h1> <span id="spanTextSearch">Search through gallery text</span> <input type="text" id="search-inputFromSearchPage" placeholder='Search..' value="<?php if (isset($_GET['searchInput'])){echo $_GET['searchInput'];} ?>" /> <span id='itemsFoundSearch'></span> <div id='searchResults'> </div> </div>

Simplelightbox.min.css

.sl-wrapper .sl-close,.sl-wrapper .sl-navigation button{height:44px;line-height:44px;font-

family:Arial,Baskerville,monospace}body.hidden-scroll{overflow:hidden}.sl-

overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#fff;opacity:.7;display:none;z-index:1006}.sl-

wrapper .sl-close,.sl-wrapper .sl-counter{top:30px;display:none;color:#000;position:fixed}.sl-wrapper{z-

index:1000}.sl-wrapper button{border:0;background:0 0;font-size:28px;padding:0;cursor:pointer}.sl-wrapper

button:hover{opacity:.7}.sl-wrapper .sl-close{right:30px;z-index:1015;margin-top:-14px;margin-right:-

14px;width:44px;font-size:3rem}.sl-wrapper .sl-counter{left:30px;z-index:1015;font-size:1rem}.sl-wrapper .sl-

navigation{width:100%;display:none}.sl-wrapper .sl-navigation button{position:fixed;top:50%;margin-top:-

22px;width:22px;text-align:center;display:block;z-index:1015;color:#000}.sl-wrapper .sl-navigation button.sl-

next{right:5px;font-size:2rem}.sl-wrapper .sl-navigation button.sl-prev{left:5px;font-size:2rem}.sl-wrapper .sl-

image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:10000}.sl-wrapper .sl-image

img{margin:0;padding:0;display:block;border:0}.sl-wrapper .sl-image iframe{background:#000;border:0}@media

(min-width:35.5em){.sl-wrapper .sl-navigation button{width:44px}.sl-wrapper .sl-navigation button.sl-

next{right:10px;font-size:3rem}.sl-wrapper .sl-navigation button.sl-prev{left:10px;font-size:3rem}.sl-wrapper .sl-

image iframe,.sl-wrapper .sl-image img{border:0}}@media (min-width:50em){.sl-wrapper .sl-navigation

button{width:44px}.sl-wrapper .sl-navigation button.sl-next{right:20px;font-size:3rem}.sl-wrapper .sl-navigation

button.sl-prev{left:20px;font-size:3rem}.sl-wrapper .sl-image iframe,.sl-wrapper .sl-image img{border:0}}.sl-

wrapper .sl-image .sl-

caption{display:none;padding:10px;color:#fff;background:#000;opacity:.8;position:absolute;bottom:0;left:0;right:0}

.sl-wrapper .sl-image .sl-caption.pos-top{bottom:auto;top:0}.sl-wrapper .sl-image .sl-caption.pos-

outside{bottom:auto}.sl-wrapper .sl-image .sl-

download{display:none;position:absolute;bottom:5px;right:5px;color:#000;z-index:1005}.sl-

spinner{display:none;border:5px solid #333;border-radius:40px;height:40px;left:50%;margin:-20px 0 0 -

20px;opacity:0;position:fixed;top:50%;width:40px;z-index:1007;-webkit-animation:pulsate 1s ease-out infinite;-

moz-animation:pulsate 1s ease-out infinite;-ms-animation:pulsate 1s ease-out infinite;-o-animation:pulsate 1s ease-

out infinite;animation:pulsate 1s ease-out infinite}.sl-scrollbar-measure{position:absolute;top:-

9999px;width:50px;height:50px;overflow:scroll}@-webkit-keyframes

pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes

pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-moz-

keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-o-

keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2);opacity:0}}@-ms-

keyframes pulsate{0%,100%{opacity:0}0%{transform:scale(.1)}50%{opacity:1}100%{transform:scale(1.2)}}

Stil.css

*{margin:0px; padding:0px;} body{overflow-x:hidden; font-family: supF,sans-serif;} /*FONTOVI*/ @font-face{font-family: supF; src: url(fonts/EngelLight_ltd.ttf);} @font-face { font-family: 'Indie Flower'; font-style: normal; font-weight: 400; src: local('Indie Flower'), local('IndieFlower'), url(fonts/indieFlower.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(fonts/materialIcons.woff2) format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;

} /*WEBSITE LOADING DIV*/ #loadingDiv{width:100%; height:100%; background:#202f39; position:fixed; top:0; left:0; z-index:2000; font-size:100px; display:flex; align-items:center; justify-content: center; flex-wrap:wrap; flex-direction:column; } #loadingDiv p{color:#ccc; text-align:center; padding-left:60px; font-style:italic;} #loadCircle-cont{width:400px; margin-top:20px; height:120px;display:flex; align-items:center; justify-content:center;} .loadCircle{display:block;width:45px; height:45px; margin:3px; background-color:#FFF; border-radius:50%; } #o{animation: skoci 1s ease-in-out infinite ; -webkit-animation:skoci 1s ease-in-out infinite; will-change: transform;} #tw{animation: skoci 1s ease-in-out infinite 0.23s; -webkit-animation:skoci 1s ease-in-out infinite 0.23s; will-change: transform; background-color:#69c9ba;} #t{animation: skoci 1s ease-in-out infinite 0.33s; -webkit-animation:skoci 1s ease-in-out infinite 0.33s; will-change: transform;} @keyframes skoci{ 0%, 50%, 100%{ transform: translateY(0px)} 25%{ transform: translateY(-30px)} } @-webkit-keyframes skoci{ 0%, 50%, 100%{ transform: translateY(0px)} 25%{ transform: translateY(-30px)} } /* SVE U VEZI FOOTERA HEADERA*/ #omot{width:100%;position:relative; transition:all 0.4s ease-in-out;} #menu-icon{width:120px;font-size:30px; user-select: none; color:#FFF; padding:10px; display:block; position:absolute; top:0px; left:20px; z-index:20; transition:all 0.4s ease-in-out;} #menu-icon:hover{color: #333; cursor:pointer;} #menu-icon i {font-size:35px; display:inline-block; vertical-align:bottom; } #menu-icon span{ vertical-align:top; display:inline-block;} .menu-open{width:220px !important;} .omot-push{margin-left:220px; } .redBorderMenu{border-top: 2px solid #ce392e !important;border-bottom: 2px solid #ce392e !important;}

#menu-container{width:0px; overflow-x: hidden; height:100%; position:fixed; white-space: nowrap; top:0; left:0; background:#202f39; font-size:20px; text-align:left;z-index:20;transition:all 0.4s ease-in-out; } #siteLogo{width:100%; border-bottom:1px #69c9ba solid;} #siteLogo img{width:210px; display:block; margin:0 auto; padding:10px 0px;} #siteLogoResp{max-width:300px !important; display:none !important; height:70px;} #siteLogoResp img{width:100%; } #siteLogoResp a{display:block;} #ikOnicaMenu{ width:100%; padding-top:10px;} #menu-container nav ul{list-style:none; margin-top:10px; padding-bottom:10px;} #menu-container ul li{ margin:0 auto;display:block; width:200px;border-radius:15px; border:1px dashed #202f39; transition:all 0.4s ease-in-out;} #menu-container ul li:hover{border-color:#FFF; } #menu-container ul li a{padding:15px 20px; text-decoration:none; text-align:center;display:block; color:#FFF; transition:all 0.4s ease-in-out; } #menu-container ul li a:hover{ color: #69c9ba; } #menu{ border-bottom: 1px #69c9ba solid;} #menuKorisnikProfile{width:100%;} #menuKorisnikProfile span{display:block; text-align:center; margin-top:10px;} #menuKorisnikProfile span img{width:60px;} #menuKorisnikProfile span i{font-size:80px; color:#fff; margin:0 auto;} #menuKorisnikProfile p{color:#fff; padding:0px 10px 15px; text-align:center;} #logoutBox span{display:block; width:190px; height:30px; background:rgba(255,255,255,0.1); text-align:center; transition: 0.5s; margin:0 auto; border:1px solid #69c9ba !important; } #logoutBox span a{color:#FFF; display:block; margin-top:5px; text-decoration:none; font-size:20px; font-family:supF, sans-serif;} #logoutBox span:hover{background:rgba(255,255,255,0.3); cursor:pointer;} #logoutBox input[type="submit"]{width:192px; height:32px; font-size:20px; transition: 0.5s; display:block; background:rgba(255,255,255,0.1); border:1px solid #69c9ba !important; color:#FFF; margin:10px auto 0px; font-family:supF, sans-serif;} #logoutBox input[type="submit"]:hover{cursor:pointer; background:rgba(255,255,255,0.3);} #search-container{margin-top:15px;width:100%; border-bottom:1px solid #333; position:relative;} #searchSubmit{position:absolute; right:10px; width:30px; height:30px; background:none; border:none; z-index:30; margin-top:6px;} #searchSubmit:hover{cursor:pointer;} #search-container i{ top:-3px; left:0; margin:0; font-size:25px;} #searchInput{width:180px; padding:10px 20px 10px 20px; height:20px; font-size:20px; color:#666; border:none; font-family:supF, sans-serif;} #searchInput:focus{outline:none;} #login-box{margin-top:20px; color:#FFF;} #login-box p{text-align:center; margin-bottom:10px;} #login-box span{position:relative; display:block;} .icon{display:block; color:#202f39; width:20px; height:20px; position:absolute; z-index:20; margin-left:1px; margin-top:8px;} #loginForma input{width:190px; color:#666; padding:10px 0px 10px 30px; height:20px; transition:all 0.4s ease-in-out;border:none; border-top:1px solid #CCC; border-bottom:1px solid #CCC; font-size:20px;display:block; font-family:supF, sans-serif; margin:10px 0px;}

#loginForma input[type="submit"]{height:35px; padding:0px; border:1px solid #69c9ba !important; margin:0 auto !important;} #loginForma input:focus{outline:none; border-color:#69c9ba;} #loginButton{color:#FFF !important; background:rgba(255,255,255,0.1); transition:all 0.4s ease-in-out;} #loginButton:hover{cursor:pointer; background:rgba(255,255,255,0.3);} #footer{width:100%; background:#202f39; display:flex; flex-direction:column; } #footer hr{width:50%; margin:0 auto; border:1px solid #FFF;} #scroll-to-top{width:50px; height:50px; margin:0 auto; overflow:hidden;} #scroll-to-top img{width:40px; opacity:0.8; transition: all 0.4s ease-in-out; margin:10px auto 0px; display:block;} #scroll-to-top img:hover{opacity:1; cursor:pointer; margin-top:0px;} #footer-menu-container{width:100%; text-align:center; margin:0 auto; } #footer-menu{width:100%;} #footer-menu ul{list-style:none;} #footer-menu ul li{display:inline-block;} #footer-menu ul li a{color:#FFF; text-decoration:none; display:block; padding:20px 25px;} #footer-menu ul li a:hover{text-decoration:underline;} #social-container{width:100%; margin:30px 0px 40px;display:flex; justify-content:center; align-items:center; } #social-container span{display:inline-block; width:50px; margin:0px 30px; height:50px; background-image:url(slike/socials.png); background-repeat:no-repeat; background-size:150px;} #social-container span:hover{ opacity:0.7; transition:all 0.4s ease-in-out;} #face{background-position:0px 0px; } #twit{background-position:-50px 0px;} #youtube{background-position:-100px 0px;} #social-container span a{display:block; height:50px;} #social-container span a:hover{cursor:pointer;} #coppy{width:100%; color:#FFF;} #coppy h3{font-size:16px; padding-bottom:30px;} #coppy a{text-decoration:underline;color:#69c9ba;} /*VOTE BOX*/ #voteBoxx{width:330px; display:none; height:340px;border:1px dashed #69c9ba;text-align:center; border-radius:4px;background:#202f39; position:fixed; bottom:30px; right:30px; color:#69c9ba;} #voteBoxx p{font-size:20px; padding:30px 20px 20px; margin-bottom:20px;} .voteOption{visibility: hidden; position:absolute;} #voteCloseButt{position:absolute; top:10px; right:10px; color:#FFF; font-size:22px; font-weight:bold;} #voteCloseButt:hover{color:#69c9ba; cursor:pointer;} #voteList li {position:relative; margin:0 auto; width:200px; list-style:none;} #voteList li label{

color:#FFF; width:150px; text-align:left; display: block; position: relative; z-index:9; padding-top:16px; padding-left:75px; height: 50px; cursor: pointer; font-size:21px; } #voteList li:hover label{ color: #69c9ba; } #voteList li .check{ display: block; cursor: pointer; position: absolute; border: 7px solid #AAAAAA; border-radius: 100%; height: 25px; width: 25px; top: 5px; left:10px; z-index: 5; transition: all 0.4s ease-in-out; } #voteList li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 15px; width: 15px; top: 5px; left: 5px; transition: all 0.4s ease-in-out; } #voteList input[type=radio]:checked ~ .check { border: 7px solid #69c9ba; } #voteList input[type=radio]:checked ~ .check::before{ background: #69c9ba; } #voteList input[type=radio]:checked ~ label{ color: #333;

} .voteError{color:#FF0000; padding:0px !important; display:none;margin:10px auto !important; font-size:15px !important;} #submitVote{ width:100px; margin:0 auto; color:#FFF;padding:15px 30px; margin-top:20px; display:block;font-size:18px; border:1px solid #FFF;} #submitVote:hover{color:#69c9ba; cursor:pointer;} .spanVoteRez{width:0%; height:50px; display:flex; align-items:center; justify-content: center; font-size:22px; margin:10px 0px 0px 0px; color:#202f39;background:#69c9ba; transition:1s ease-in-out;} #RezPvote{width:95%;margin: 0 auto; } #RezPvote b{margin-top:10px; font-size:17px;display:block; color:#FFF;} #RezPvote p{margin:5px auto; color:#FFF; padding:20px 15px;} /* ZA TIC TAC TOE IGRICU*/ #gameSingle-container{background:url(slike/confectionary.png);} #gameSingle-container h1{padding:20px; background:#69c9ba; color:#333; text-align:center;} #table-container{width:576px;margin:0px auto; padding:75px 0px;display:flex; flex-direction: row; flex-wrap:wrap; justify-content:center; position:relative; animation:comingGame 1.2s;} #table-holder{width:100%; height:100%; position:absolute; z-index:10;top:0;left:0; opacity:0;} .row-container{width:100%; height:190px; display:flex; flex-direction: row;} .board{width:190px; height:190px;} .board:hover{cursor:pointer;} .row-container:nth-child(2){border-top:1px solid #333; border-bottom:1px solid #333; border-width:3px;} .row-container .board:nth-child(even){border-left:1px solid #333; border-right:1px solid #333;border-width:3px;} .xo-container{width:100%; height:100%; position:relative; display:block; } .o:before{content:""; display:block;width:70%; height:70%; border-radius:50%; border:10px solid #69c9ba; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); animation:bloopo 0.9s;} .x:before{content:""; background:#202f39;display:block; width:100%; height:10px; transform:rotate(50deg); position:absolute; top:50%; animation:bloopx 0.9s; } .x:after{content:""; background:#202f39; display:block; width:100%; height:10px; transform:rotate(-50deg); position:absolute; top:50%; animation:bloopx 0.9s;} @keyframes bloopx{ 0%{width:80%} 25%{width:70%;} 50%{width:100%;} 75%{width:90%;} 100%{width:100%;} } @keyframes bloopo{

0%{width:60%; height:60%;} 25%{width:50%; height:50%;} 50%{width:70%; height:70%;} 75%{width:60%; height:60%;} 100%{width:70%; height:70%;} } @keyframes comingGame{ 0%{opacity:0;} 25%{opacity:0.3;} 50%{opacity:0.6;} 75%{opacity:0.8;} 100%{opacity:1;} } /*MULTIPLAYER STYLE*/ #gameIndex-container{width:100%; background:url("slike/confectionary.png");} #gameIndex-container h1{text-align:center;padding:30px;color:#333; background:#69c9ba; margin:0 auto;} #divGenLinkova{width:1000px;height:500px;padding-top:100px; margin:0 auto; text-align:center;} #divGenLinkova p{width :100%; padding:20px; font-size:19px;} #genLink{width:650px; height:35px; border:2px solid #bdbdbd; color:#666; display:none; outline:none; transition:0.5s; padding:10px;margin:60px auto 20px; font-size:23px; border-radius:4px;font-family: supF,sans-serif;} #genLink:focus{border-color:#333;} .mulButtan{width:300px; text-decoration:none; color:#FFF; height:50px; border:1px solid #333; margin:60px auto 10px;transition:all 0.4s ease-in-out; display:flex; justify-content:center; align-items:center; background-color:#202f39;} .mulButtan:hover{ cursor:pointer; color:#69c9ba;} #copyLink{display:none; height:57px; vertical-align:top; font-size:20px; width:200px;} #playMultiPButt{display:none; height:auto; padding:20px;} #turn{width:100%; text-align:center; padding-top:25px; font-size:30px; height:40px; animation:blinkTurn 1s infinite;} @keyframes blinkTurn{ 0%{color:#69c9ba} 25%{color:#666} 50%{color:#69c9ba} 75%{color:#999} 100%{color:#69c9ba} } /*BUTTONS FOR SINLE PLAYER*/ .single-popup-buttons{width:300px; text-decoration:none; color:#FFF; height:50px;transition:all 0.4s ease-in-out; border:1px solid #333; margin:10px auto; display:flex; justify-content:center; align-items:center; background-color:#202f39;} .single-popup-buttons:hover{ cursor:pointer; color:#69c9ba;} /*HOME PAGEEEEEEEEEEEEE*/

#container-home{width:100%; background:url(slike/patternBaner.jpg); text-align:center; animation:comingGame 1.2s; background-attachment:fixed;} #content-home{width:100%; height:800px; background:rgba(105,201,186,0.9); font-family: 'Indie Flower', cursive; position:relative; overflow:hidden; } #buttons{width:0px; position:absolute; top:260px; right:0; margin-right:5%; overflow:hidden;} #buttons a{text-decoration:none; display:block; width:220px; background:transparent;margin-bottom:10px; color:#FFF; font-size:20px;border:2px solid #FFF; padding:10px; transition:all 0.4s ease-in-out; font-family:"Comic Sans MS", cursive, sans-serif;} #buttons a:hover{ color:#202f39; border-color:#202f39; } #home-table-holder{display:flex; flex-direction:column;width:100%; height:550px; margin:45px auto 0px; position:relative; letter-spacing:50px; font-size:140px; color:#EEE; overflow:hidden;} #home-rowOne{width:200px; animation:homeRowOne 1.5s; height:100%; border-left:3px solid;border-right:3px solid;border-color:#FFF; position:absolute; top:0; left:50%; transform:translateX(-50%);} #home-rowTwo{width:550px; animation:homeRowTwo 2.5s;height:200px; border-top:3px solid;border-bottom:3px solid; border-color:#FFF;position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%);} .letter-row{display:flex; justify-content:center; padding-left:15px;position:relative;width:100%; height:204px;} .letter{ width:220px;float:left;opacity:0; transform:translateX(-180%); transition:1s cubic-bezier(0.05,-1.06, 0, 1.85);} .letterAnimate{transform:translateX(0%); opacity:1;} .chngColorLetter{color:#202f39;} @keyframes homeRowOne{ 0%{width:0%;height:0%;} 50%{width:0px;height:100%;} 100%{width:200px;} } @keyframes homeRowTwo{ 0%{width:0%;height:0%;} 50%{width:0px;height:200px;} 100%{width:550px;} } #homepage-text{width:100%; position:relative; margin:0px auto; color:#202f39;background:#fff; padding:40px 0px 0px; font-size:100%; display:flex; flex-wrap:wrap; justify-content:center; } .home-text-box{width:100%; margin:0 auto; text-align:center; overflow:hidden; padding:30px 0px 50px; display:block; display:flex; flex-direction:column; justify-content:center;} .home-text-box h1{ text-align:center; color:#69c9ba; padding:10px; text-transform:uppercase; } .home-text-box p{ width:60%; padding:20px; margin:0 auto; font-size:19px; color:#333; line-height:25px; word-spacing:2px;word-wrap: break-word; } .playButton{background:#202f39;border: 1px solid #e0e0e8;display:block; width:300px; margin:50px auto;} .playButton a{display:block;padding:20px; color:#FFF; transition:0.7s ease; text-decoration:none; } .playButton a:hover{color:#69c9ba; -webkit-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1);

-moz-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); box-shadow: 0px 3px 28px 1px rgba(117,148,147,1);} #rules-home{width:100%; background:#f3f3f3; border-top:2px dashed #333; padding:30px 0px 60px; text-align:center;} #rules-home h2{text-align:center; color:#69c9ba; padding:15px 15px 50px 15px; text-transform:uppercase; } #rules-box{ display:flex; justify-content:center; flex-direction: row; align-items:baseline; flex-wrap:wrap;} .rulesind{ background:#FFF;position:relative;display:flex; flex-direction:column; align-items:center; width:250px; height:300px; margin:10px;border: 1px solid #e0e0e8; transition:0.3s ease; } .rulesind:hover{transform:scale(1.1); -webkit-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); -moz-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); box-shadow: 0px 3px 28px 1px rgba(117,148,147,1);} .rulesind h2{ color:#333 !important;font-size:25px;display:flex; margin-top:40px; align-items:center; justify-content: center; width:30px; height:30px; border-radius:50px; padding:15px !important;border:1px solid #69c9ba; position:relative;} .rulesind p{padding:15px; text-align:left;font-size:19px; color:#333; line-height:25px; word-spacing:2px;word-wrap: break-word;} /*ABOUTGAME PHP*/ #aboutGameContent{width:100%; padding-bottom:70px;background:url("slike/confectionary.png"); } #aboutgameContainerContent{ animation:comingGame 1.2s;display:flex; align-items: center; justify-content: center; flex-wrap:wrap;} #aboutGame-text{max-width:1024px; margin:20px 15px 50px 0px; padding-top:20px;} #aboutGameContent h1{text-align:center;padding:30px;color:#333; background:#69c9ba;} #aboutGame-text h2{text-align:center; padding:15px 10px 10px; color:#69c9ba; font-size:30px;} .aboutGame-text-block{max-width:700px; background:#f5f7f8; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); margin:20px 0px 0px 25px; border-top:1px solid #FFF; } .aboutGame-text-block p{padding:0px 20px 20px; font-size:19px; color:#333; line-height:25px; word-spacing:2px;word-wrap: break-word;} .aboutGame-text-block-heading{width:100%;} #image-toon-container{max-width:580px;} /*REGISTER STRANICAAAAAAAAAAAAAAAA*/ .redBorderReg{border-color:#FF0000 !important;} #regForm-container{width:100%; background:url("slike/confectionary.png"); margin:0px auto; padding-bottom:70px; color:#333; text-align:center; animation:comingGame 1.2s; display:flex; flex-direction:column;} #regForm-container h1{color:#333; padding:30px; background:#69c9ba;}

#regformSadr{max-width:600px; margin:20px auto; background:#f5f7f8; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); } #regformSadr h2{color:#69c9ba; padding:15px 10px 25px;} #regformSadr p{padding-bottom:10px;} .label-input{width:100%; margin:10px 0px 20px;} .label-input span{display:block; max-width:400px; margin:0 auto; position:relative; } .warningRegister{display:block; font-size:45px !important; color:#ce392e; position:absolute; top:5%; right:15px; width:45px; height:45px;background-size:200px; background-position:-42px 3px;} .warningRegister i{font-size:45px;} .warningRegister span{top:-10px; right:-280px;font-weight:400; font-size:16px !important; font-style:normal; display:none; background-color: #ce392e;width:260px;min-height:60px; border-radius:25px 15px;text-align:center;position:absolute !important; color:#FFF; border:2px solid #333;} .warningRegister span:before{display:block; content:""; top:55%; transform:translateY(-50%); left:-21px;position:absolute; width:0px; height:0px; border:0px solid transparent; border-right-color:#333; border-width:10px;} .warningRegister span p{padding:22px 0px !important;} .label-input input{width:100%;} .label-input input{max-width:350px; height:50px; padding: 0px 15px; border-radius:4px; border:2px solid #bdbdbd; font-size:20px; color:#666; transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; outline:none;} .label-input input:focus{border-color:#333;} .label-input input[type="checkbox"]{height:20px; width:20px;display:inline-block; } .label-input span label{width:310px;font-size:15px;display:inline-block; margin:0px 10px; height:50px; vertical-align:top; word-wrap: break-word;} .label-input span a{color:#69c9ba;} #regButton{width:300px; font-size:20px; font-family:supF,sans-serif; color:#FFF;background:#202f39;border: 1px solid #e0e0e8;transition:all 0.4s ease-in-out;} #regButton:hover{color:#69c9ba;cursor:pointer;-webkit-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); -moz-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); box-shadow: 0px 3px 28px 1px rgba(117,148,147,1);} /*ABOUT AUTHOR*/ #author-container{width:100%; background:url("slike/confectionary.png");margin:0 auto; text-align:center; animation:comingGame 1.2s; display:flex; flex-direction:column; padding-bottom:70px;} #author-container h1{color:#333; background:#69c9ba; padding:30px; text-align:center;} #author-container h2{color:#69c9ba; font-size:30px; padding:30px 30px 0px; text-align:center;} #imageContainer{position:relative; width:200px; height:200px; margin:50px auto 20px;} #image-holder{width:200px; height:200px; border-radius:50%; overflow:hidden; margin:0 auto;} #image-holder a::after{content:""; z-index:30;position:absolute; top:-3px; left:-3px;width:200px; height:200px; border:3px dashed #333; border-radius:50%; transition: all 0.4s ease;} #image-holder:hover a::after{transform:rotate(40deg);} #image-holder img{width:200px;} #text-holder{max-width:700px; margin:0 auto; text-align:left; background:#f5f7f8; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);} #text-holder p{padding:10px; font-size:19px; color:#333; line-height:25px; word-spacing:2px;word-wrap: break-word;}

#contact-holder{max-width:625px; margin:40px auto; text-align:center; background:#f5f7f8; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);} #contForm{padding-top:20px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content: center; align-items: center;} #contact-holder input{border-radius:4px; margin:0 auto; border:2px solid #bdbdbd; color:#666; padding:10px; font-size:16px; transition: all 0.4s ease-in-out; outline:none;} #contact-holder input:focus{border-color:#333;} #contact-holder input[type="text"]{width:240px; height:25px; display:inline-block; color:#666;} #contact-holder textarea{display:block; width:90%; border:2px solid #bdbdbd; outline:none; transition: all 0.4s ease-in-out;} #contact-holder textarea:focus{border-color:#333;} #contMess{height:100px; padding:5px; margin-top:20px; font-size:16px; color:#666;} #contButton{display:block; background:#202f39 !important; border:none !important; margin:50px auto !important; width:300px; height:50px; color:#FFF !important; background:rgba(255,255,255,0); transition:all 0.4s ease-in-out; } #contButton:hover{color:#69c9ba !important; cursor:pointer; -webkit-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); -moz-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); box-shadow: 0px 3px 28px 1px rgba(117,148,147,1);} #authorF-Greske{ width:100%; display:none; color:red; margin:20px 0px 0px; } /*STRATEGIES STRANAAAAAAAAAAAA*/ .gallery{padding-top:50px;} #strategy-gallery{width:100%; background:url("slike/confectionary.png");animation:comingGame 1.2s; padding-bottom:70px;} .image-box-gallery{max-width:1100px; overflow:hidden; display:flex; align-items:baseline; flex-direction: row; flex-wrap:wrap;margin:0 auto;} /*ZA RESPONSIVE SAMO PROMENITI 1024PX U 100%*/ #strategy-gallery h1{text-align:center; color:#333; padding:30px; background:#69c9ba;} .image-text-gallery{ display:flex; animation:comingGame 1.5s; transition:0.7s ease-in-out; background:#f5f7f8; align-items:center; justify-content:center;flex-wrap: wrap; flex-direction:row; margin:10px; width:350px;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); } .image-text-gallery h2{text-align:center; color:#69c9ba; padding:20px 15px 15px; } .image-text-gallery img{max-height:260px;transition:0.5s ease;} .image-text-gallery p{max-width:450px; padding:15px; font-size:17px; line-height:24px;word-wrap: break-word; color:#202f39; word-spacing:3px;} .image-text-gallery a{position:relative; height:260px;overflow:hidden; width:100%;} .image-text-gallery a i{ display:none;z-index:50;position:absolute; font-size:50px; color:#FFF; top:50%; left:50%; transform:translate(-50%,-50%);} .galleryZoom::after{content:""; transition:0.5s ease; display:block; position:absolute; top:50%; left:50%; width:100%; height:100%; background:rgba(0,0,0,0.54); transform:translate(-50%,-50%);}

.image-box-gallery-gal{width:100%; min-height:760px;display:flex; align-items:baseline; flex-direction: row; flex-wrap:nowrap;} .activeNavNumGallery{color:#69c9ba !important;} .moveImage{transform:translateX(-350%); } #navGalleryContainer{width:300px;height:150px; margin:0 auto; display:flex; align-items:center; justify-content:space-around;} .navGallery{width:50px; background:#202f39; color:#FFF; height:50px; border:1px solid #000; transition:0.5s ease-in-out; display:flex; justify-content: center; align-items: center; font-size:23px;} .navGallery:hover{color:#69c9ba; cursor:pointer;} /*ADMIN PANEL STRANICAAAAAAAAAAAAAAAAAAAAAAA*/ #panelContainer{width:100%; padding-bottom:150px; animation:comingGame 1.2s; background:url("slike/confectionary.png");} #panelContainer h1{color:#333; background:#69c9ba;text-align:center; padding:30px;} #tabs-1{max-width:1100px; margin:50px auto;} #tabs-menu{list-style:none; margin:0 auto; width:100%; background:#2c3e50; display:flex; justify-content:left; align-items:center;} #tabs-menu li a{color:#FFF; text-decoration:none; padding:15px 35px; display:block; outline:none; border-right:2px solid #364d63;} .ui-state-active a{color:#69c9ba !important; background:#364d63; } .div-admin-holder{width:100%;background:#34495e; color:#FFF; padding-bottom:30px; text-align:center;} .div-admin-holder h2{ padding:40px 0px 15px;} .div-admin-holder p{padding:10px 0px 25px;} #page-list-admin{position:relative; list-style:none; display:flex;flex-wrap:wrap; flex-direction:row; align-items:center;justify-content:center; } #page-list-admin li{position:relative; margin:20px; width:130px;} #page-list-admin li input[type=radio]{ position: absolute; visibility: hidden; } #page-list-admin li label{ display: block; position: relative; z-index:9; padding-left:60px; margin: 10px auto; height: 30px; cursor: pointer; } #page-list-admin li:hover label{

color: #FFFFFF; } #page-list-admin li .check{ display: block; cursor: pointer; position: absolute; border: 7px solid #AAAAAA; border-radius: 100%; height: 25px; width: 25px; top: 0px; left:0px; z-index: 5; transition: all 0.4s ease-in-out; } #page-list-admin li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 15px; width: 15px; top: 5px; left: 5px; margin: auto; transition: all 0.4s ease-in-out; } #page-list-admin input[type=radio]:checked ~ .check { border: 7px solid #69c9ba; } #page-list-admin input[type=radio]:checked ~ .check::before{ background: #69c9ba; } #submitEPage{display:block; margin:0 auto; border:1px solid #FFF; width:250px; height:40px; color:#FFF; background:rgba(255,255,255,0); transition:all 0.4s ease-in-out;} #submitEPage:hover{color:#69c9ba; background:rgba(255,255,255,0.2);cursor:pointer;} .div-admin-holder table { animation:comingGame 1.2s; border-collapse: collapse; width: 95%; margin:40px auto 0px; border:1px solid #FFF; } .div-admin-holder table td{ width:452px;

max-height:95px; } .div-admin-holder th, td { text-align: center; padding: 8px; } .div-admin-holder tr:nth-child(even){background-color:#3f5a73;} .div-admin-holder th { background-color: #2c3e50; color: white; } .div-admin-holder table textarea{width:250px; height:70px;} .admButt{display:none; margin:30px 20px 0px; border:1px solid #FFF; width:250px; height:40px; color:#FFF; background:rgba(255,255,255,0); transition:all 0.4s ease-in-out;} .admButt:hover{color:#69c9ba; background:rgba(255,255,255,0.2);cursor:pointer;} .markCheck{ opacity:0;vertical-align: top; display:inline-block; height:20px; width:20px; margin:25px 0px 0px 10px;} /*MENU ADMINISTRATION*/ #sortable{ overflow:auto; list-style:none;display:flex; align-items:center; justify-content:center; flex-direction:column;} #sortable li{ display:flex; align-items:center; justify-content:center; min-width:350px;height:30px; padding:5px;margin:5px 0px; border:1px solid #69c9ba; background:#2c3e50; transition:background 0.7s ease-in-out; position:relative;} #sortable li:hover{cursor:pointer; background:#69c9ba; } .hidChkBox{display:none;position:absolute; right:-30px; height:20px; width:20px;} .inputChangeMenu{display:none;width:95%;font-family: supF,sans-serif;font-size: 15px; height:35px; background-color:#2c3e50; border:none; color:#FFF; text-align:center; outline:none; } .obicanTxtMenuAdm{font-weight:200;} .changeMenuBut{margin:30px 20px 0px; border:1px solid #FFF; width:250px; height:40px; color:#FFF; background:rgba(255,255,255,0); transition:all 0.4s ease-in-out;} .changeMenuBut:hover{color:#69c9ba; background:rgba(255,255,255,0.2);cursor:pointer;} .galleryAdmBut{margin:30px 20px 0px; border:1px solid #FFF; width:250px; height:40px; color:#FFF; background:rgba(255,255,255,0); transition:all 0.4s ease-in-out;} .galleryAdmBut:hover{color:#69c9ba; background:rgba(255,255,255,0.2);cursor:pointer;} #gallery-containerAdminP{width:100%; display:flex; opacity: 0; transition: all 1s; justify-content:space-around; align-items: center; flex-wrap: wrap; flex-direction: row;}

.image-boxAdmPanel{width:45%; margin:20px 0px;height:400px; padding:10px; border:1px solid #69c9ba; position:relative;} .image-boxAdmPanel span{width:95%; margin:0 auto; display:block; font-size:14px;} .image-boxAdmPanel img{height:225px;} #uplAdmGallery input{display:none;} .imgButHidd{display:none;} .galleryDeleteCheck{width:20px; height:20px; position:absolute; top:25px; right:30px; display:none;} .hereWillBeImage{width:300px; height:225px; background-color:#2c3e50; margin:0px auto 40px;} .hereWillBeImage span{padding-top:100px; display:block; font-size:20px;} .txtAreaGallery{width:300px; height:120px; margin:0 auto;} /*USERS PANEL*/ .admButtUser{margin:30px 20px 0px; border:1px solid #FFF; width:250px; height:40px; color:#FFF; background:rgba(255,255,255,0); transition:all 0.4s ease-in-out;} .admButtUser:hover{color:#69c9ba; background:rgba(255,255,255,0.2);cursor:pointer;} #usersTableButt-holder{display:none;} #usersTable-holder{display:none;} #loadUsersTable{display:block; margin:0 auto;} .obicanTxtUserAdm{font-weight:200;} .hiddenUtxtUsers{display:none;} .listaUloga{display:none;} .checkBoxUsers{display:none;width:20px; height:20px; float:right;vertical-align: top;} .chkPassPro{display:none; width:15px; height:15px; float:right;} .redWarningBorder{border-color:red;} #modalBox{display:none; border:2px solid #333; min-height:200px; opacity:0;color:#333;border-radius:20px;background:#f3f3f3; position:fixed; text-align:center; width:500px; top:50%; left:50%; transform:translate(-50%,-50%);} #modalBox h3{padding:30px; color:#69c9ba; font-size:25px;} .messageModal{padding:20px; font-size:22px;} .closeModal{position:absolute; right:0; top:0; width:50px; height:50px; font-size:30px;} .closeModal:hover{cursor:pointer; color:#69c9ba;} .animateModalEnter{animation:modalEnter 0.5s forwards; display:block !important;} .animateModalExit{animation:modalExit 0.5s forwards;} @keyframes modalEnter{ 0%{opacity:0.2;top:0%; } 25%{opacity:0.4;} 50%{opacity:0.6;} 100%{top:50%;opacity:1;} } @-webkit-keyframes modalEnter{ 0%{opacity:0.2;top:0%;} 25%{opacity:0.4;} 50%{opacity:0.6;} 100%{top:50%;opacity:1;} }

@keyframes modalExit{ 0%{opacity:1;top:50%;} 25%{opacity:0.6;} 50%{opacity:0.4;} 100%{top:0%;opacity:0; } } @-webkit-keyframes modalExit{ 0%{opacity:1;top:50%;} 25%{opacity:0.6;} 50%{opacity:0.4;} 100%{top:0%;opacity:0;} } /*SEARCH STILLLLL*/ #search-container-page{width:100%; min-height:800px; background:url(slike/confectionary.png);} #search-container-page h1{color:#333; background:#69c9ba;text-align:center; padding:30px;} #search-inputFromSearchPage{width:500px; height:35px; border:2px solid #bdbdbd; color:#666; display:block; outline:none; transition:0.5s; padding:10px;margin:60px auto 20px; font-size:23px; border-radius:4px;font-family: supF,sans-serif;} #search-inputFromSearchPage:focus{border-color:#333;} #searchResults{display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:center;} #searchResults div{opacity:1; transform:none; position:relative;} #spanTextSearch{color:#69c9ba; margin:50px auto 10px; display:block; text-align:center; font-size:23px;} #itemsFoundSearch{margin:50px auto; display:block; text-align:center; font-size:20px; } .highlight { background-color:#69c9ba; } /*USER PANEL STILLLLL*/ #user-container-profile{ background:url(slike/confectionary.png); animation:comingGame 1.2s;} #user-container-profile h1{color:#333; background:#69c9ba;text-align:center; padding:30px;} #userContainer{width:100%;text-align:center; margin:0 auto; padding-top:50px;} #userContainer h2{color:#333; padding-bottom:50px;} #image-holder-user{width:250px; height:250px;display:flex; justify-content:center; align-items:center; overflow:hidden; margin:0 auto; border:3px dashed #333; } #image-holder-user img {width:100%;} #image-holder-user i{font-size:200px; color:#333;} #tableProfileHolder{padding:30px 0px 100px; max-width:520px; margin:0 auto; display:flex; } #userTableProfile{width:100%; margin:0 auto; background-color:#f5f7f8; border-collapse: collapse; box-shadow:0 2px 4px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);} #userTableProfile td{padding:15px; border-bottom:1px solid #202f39; color:#333; font-size:20px;} #userTableProfile tr:first-of-type{border-top:1px solid #202f39;} #userTableProfile tr:nth-child(even){background-color: #fff; } #editProfile{width:100%; padding:15px 0px;background:#202f39; font-family:supF,sans-serif; border:none; color:#FFF; font-size:20px;} #editProfile:hover{cursor:pointer;-webkit-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); -moz-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); color:#69c9ba; transition:0.5s;} .inputchngProfile{display:none;}

.inputchngProfile input {width:170px; height:30px; transition:0.5s ease-in-out; font-size:17px; border:2px solid #bdbdbd; font-family:supF,sans-serif;} .inputchngProfile input:focus{outline:none; border-color:#333;} #pchnagePicture{width:250px; display:none; height:20px; background:#202f39; color:#FFF; transition:0.5s; font-size:19px; padding:15px 20px;border:1px solid #000;margin:30px auto 0px;} #pchnagePicture:hover{cursor:pointer;-webkit-box-shadow: 0px 3px 28px 1px rgba(117,148,147,1); color:#69c9ba;} #uploadProfileImageUser{display:none;} /*SITEMAPP*/ #sitemapContainer{width:100%; background:url(slike/confectionary.png); height:700px;} #sitemapContainer h1{color:#333; background:#69c9ba;text-align:center; padding:30px;} #tableSitemapContainer{max-width:1000px; background:#f5f7f8; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);height:400px; margin:50px auto 0px; display:flex;flex-direction:column;} #sitemapContainer h2{text-align:center; padding:30px; color:#69c9ba;} #sitemap-table{width:90%; margin:0 auto;border-collapse: collapse; } #sitemap-table td{padding:20px;border-top:1px solid #000; font-size:18px;} #sitemap-table a{color:#000;text-decoration:none;} #sitemap-table th{padding:20px;font-size:20px;} /*RESPONSIVE*/ @media screen and (max-width:1220px){ #content-home{height:auto;} #home-table-holder{display:none;} #buttons{position:static; margin:100px auto 0px; animation:none;} #rules-box span{margin:0 auto;} .home-text-box p{padding:0px; width:95%;} } @media screen and (max-width:1130px){ .image-box-gallery{justify-content:center;} .image-box-gallery-gal{flex-wrap:wrap;} } @media screen and (max-width:800px){ #tableSitemapContainer{overflow-x:auto;} #social-container{justify-content: space-around;} #social-container span{margin:0;} #menu-icon{width:100%; padding:0px; display:flex; justify-content:space-between; position:fixed; background-color:#202f39; left:0; top:0; } #omot{margin-top:70px;}

#siteLogoResp{display:flex !important; padding-right:15px; justify-content:center; align-items:center;} #ikOnicaMenu{max-width:250px; padding:15px 0px 0px 45px; } #image-toon-container img{width:100%;} #menu-icon:hover{color:#FFF;} #omot{position:static;} } @media screen and (max-width:600px){ #rules-box{flex-direction:column;align-items: center;} #footer-menu ul{display:flex; flex-direction:column;} #image-toon-container{width:100%;} } @media screen and (max-width:540px){ #contact-holder{width:100%; margin: 0px;} #contForm input{display:block !important; margin:0 auto 20px;} #tableProfileHolder{overflow-x:auto;} } @media screen and (max-width:470px){ #table-container{width:90%;} .board{height:100%;} .row-container{height:110px;} } @media screen and (max-width:380px){ .image-text-gallery img{width:100%;} .label-input input{width:90%; padding:0;} .label-input span label{width:auto;} }

Strategies.php

<?php include("konekcija.php"); $query="SELECT count(slikaId) as numRows FROM gallery"; $rez=mysqli_fetch_assoc(mysqli_query($konekcija,$query)); mysqli_close($konekcija); ?> <div id="strategy-gallery"> <h1>Strategy Gallery</h1> <div class="gallery"> <article class="image-box-gallery"> <div class='image-box-gallery-gal'>

</div> <div id="navGalleryContainer"> <?php $brStrGall=floor($rez['numRows']/3); if($brStrGall<$rez['numRows']/3){ $brStrGall++; } for($i=1;$i<=$brStrGall;$i++){ echo "<span class='navGallery'>$i</span>"; } ?> </div> </div> </div>

Sitemap.xsl

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9" version="1.0"> <xsl:template match="/"> <div id="sitemapContainer"> <h1>Sitemap</h1> <div id="tableSitemapContainer"> <h2>The list of pages</h2> <table id="sitemap-table"> <th>Location</th> <th>Last modification</th> <th>Change frequency</th> <th>Priority</th> <xsl:for-each select="sitemap:urlset/sitemap:url"> <tr> <td><a href="{sitemap:loc}"><xsl:value-of select="sitemap:loc"/></a></td> <td><xsl:value-of select="sitemap:lastmod"/></td> <td><xsl:value-of select="sitemap:changefreq"/></td> <td><xsl:value-of select="sitemap:priority"/></td> </tr> </xsl:for-each> </table> </div> </div> </xsl:template> </xsl:stylesheet>

Tictactoe.js

$(document).ready(function(){ // GLOBALNE STO IM SE MAJKI KHM... var potez=0; var pozKlik=0; //MATRICA ZA IKS OKS var mat=new Array(3); for (var i = 0; i < mat.length; i++) { mat[i] = new Array(3); } for(var i=0; i<3;i++){ for(var j=0; j<3;j++) mat[i][j]=0; } //KRAJ MATRICE var pob=3; //POCETAK LOGIKE KOMPA var fun=function(){ if(pob==3){ if($(this).find("div").length==0){ $(".board").off('click');//UNBIND CLICKA U TOKU IGRE RACUNARA $(this).append('<div class="x xo-container"></div>');// KACENJE X U DIV pozKlik=$(".board").index(this); //POZICIJA KLIKA zapisiPoz(pozx(pozKlik),pozy(pozKlik),"i");// DESIFROVANJE POZICIJE I ZAPIS U MATRICU pob=pobeda(); if(pob==3){ //LOGIKA RAZMISLJANJA KOMPA if(juriTri()==0){ if(horizontalnaLogika()==0){ if(vertikalnaLogika()==0){

if(ukosoLogika()==0){ setTimeout(function(){ $(".board").eq(pozMatch(pozKlik,potez)).append('<div class="o xo-container"></div>');},1000); } }}}} pob=pobeda(); //PROVERA IGRE if(pob==1||pob==0||pob==4){ //PROGLASAVANJE POBEDNIKA //TU CE BITI JQUERY KODA zavrsetakIgre(pob); } setTimeout(function(){ $(".board").on('click',fun);//PONOVNO VRACANJE CLICKA COVEK NASTAVLJA },1700); potez++; } } }; //POCETAK MECA RANDOM STAVLJANJE KRUGA function pozMatch(n,p){ if(p!=5){ var pozRand=Math.floor(Math.random()*9); while(proveriMesto(pozx(pozRand),pozy(pozRand))==1){ pozRand=Math.floor(Math.random()*9); } zapisiPoz(pozx(pozRand),pozy(pozRand),"k"); return pozRand;} }

//PROVERI MESTO U MATRICI AKO JE SLOBODNO STAVI KRUG function proveriMesto(x,y){ if(mat[x][y]==1 || mat[x][y]==2){ return 1; } return 0; } //PROVERA POBEDNIKA function pobeda(){ var brF=0; var brK=0; var brH=0; //POBEDA HORIZONTALNO for(var i=0; i<3;i++){ for(var j=0; j<3;j++){ if(mat[i][j]==1){brH++ }else if(mat[i][j]==2){ brK++ } } if(brH==3){return 1;}else if(brK==3){return 0;} brK=0; brH=0; } //POBEDA VERTIKALNO for(var i=0; i<3;i++){ for(var j=0; j<3;j++){ if(mat[j][i]==1){brH++ }else if(mat[j][i]==2){ brK++ } } if(brH==3){return 1;}else if(brK==3){return 0;} brK=0; brH=0; } //POBEDA UKOSO PRVI NACIN for(var i=0; i<3;i++){ if(mat[i][i]==1){brH++ }else if(mat[i][i]==2){ brK++ }

} if(brH==3){return 1;}else if(brK==3){return 0;} brK=0; brH=0; //POBEDA UKOSO DRUGI NACIN var broj=2; for(var i=0; i<3;i++){ if(mat[i][broj]==1){brH++ }else if(mat[i][broj]==2){ brK++ } broj--; } if(brH==3){return 1;}else if(brK==3){return 0; }else{ for(var i=0; i<3;i++){ for(var j=0; j<3;j++){ if(mat[i][j]==0){ brF++; } } } } if(brF!=0){return 3;}else{return 4;} } //LOGIKE ZA UNISTAVANJE OD STRANE KOMPA //HORIZONTALNA LOGIKA function horizontalnaLogika(){ var brX=0; out:for(var i=0;i<3;i++){ if(kolonaRedPun(i,"r")==1){ for(var j=0; j<3;j++){ if(mat[i][j]==1){

brX++; } else if(mat[i][j]==2){brX=0; break;} } if(brX==2){ for(var j=0; j<3;j++){ if(mat[i][j]==0){ postaviKrug(konv(i,j)); zapisiPoz(i,j,"k"); return 1; break out; } } } } brX=0; } return 0; } //VERTIKALNA LOGIKA function vertikalnaLogika(){ var brX=0; out:for(var i=0;i<3;i++){ if(kolonaRedPun(i,"k")==1){ for(var j=0; j<3;j++){ if(mat[j][i]==1){ brX++; } else if(mat[j][i]==2){brX=0; break;} } if(brX==2){ for(var j=0; j<3;j++){ if(mat[j][i]==0){ postaviKrug(konv(j,i)); zapisiPoz(j,i,"k"); return 1; break out; } } }

} brX=0; } return 0; } //UKOSO LOGIKA function ukosoLogika(){ var brX=0; for(var i=0; i<3;i++){ if(mat[i][i]==1){ brX++; }else if(mat[i][i]==2){brX=0;break;} } if(brX==2){ for(var i=0; i<3;i++){ if(mat[i][i]==0){ postaviKrug(konv(i,i)); zapisiPoz(i,i,"k"); return 1; break; } } } //DRUGA UKOSO LOGIKA brX=0; var broj=2; for(var i=0; i<3;i++){ if(mat[i][broj]==1){ brX++; }else if(mat[i][broj]==2){break;} broj--; }if(brX==2){ broj=2; for(var i=0; i<3;i++){ if(mat[i][broj]==0){ postaviKrug(konv(i,broj)); zapisiPoz(i,broj,"k"); return 1; break; } broj--; } } return 0;

} //JURI TRI KRUGA BILO DJE NA BOARDU function juriTri(){ var brX=0; //horizontalno out:for(var i=0;i<3;i++){ for(var j=0; j<3;j++){ if(mat[i][j]==2){ brX++; }else if(mat[i][j]==1){brX=0;break;} } if(brX==2){ for(var j=0; j<3;j++){ if(mat[i][j]==0){ postaviKrug(konv(i,j)); zapisiPoz(i,j,"k"); return 1; break out; } } } brX=0; } //vertikalno brX==0; out:for(var i=0;i<3;i++){ for(var j=0; j<3;j++){ if(mat[j][i]==2){ brX++; }else if(mat[j][i]==1){brX=0;break;} } if(brX==2){ for(var j=0; j<3;j++){ if(mat[j][i]==0){ postaviKrug(konv(j,i)); zapisiPoz(j,i,"k"); return 1; break out;

} } } brX=0; } //ukoso brX=0; for(var i=0; i<3;i++){ if(mat[i][i]==2){ brX++; }else if(mat[i][i]==1){brX=0;break;} } if(brX==2){ for(var i=0; i<3;i++){ if(mat[i][i]==0){ postaviKrug(konv(i,i)); zapisiPoz(i,i,"k"); return 1; break; } } } //ukoso drugi nacin brX=0; var broj=2; for(var i=0; i<3;i++){ if(mat[i][broj]==2){ brX++; }else if(mat[i][broj]==1){break;} broj--; }if(brX==2){ broj=2; for(var i=0; i<3;i++){ if(mat[i][broj]==0){ postaviKrug(konv(i,broj)); zapisiPoz(i,broj,"k"); return 1; break; } broj--; } }

return 0; } //POSTAVI KRUG function postaviKrug(poz){ setTimeout(function(){ $(".board").eq(poz).append('<div class="o xo-container"></div>'); },1000) } //PROVERAVANJE REDA I KOLONE function kolonaRedPun(broj,sta){ if(sta=="r"){ for(var i=0;i<3;i++){ if(mat[broj][i]==0){return 1;} } return 0;}else if(sta=="k"){ for(var i=0;i<3;i++){ if(mat[i][broj]==0){return 1;}} return 0; } } //KONVERTUJ XY U POZICIJU function konv(x,y){ var poz=-1; outer:for(var i=0; i<3;i++){ for(var j=0; j<3;j++){ poz++; if(x==i && y==j){ break outer;} } } return poz; }

//POZICIJA X function pozx(n){ var pozx=0; if(n<3){pozx=0; }else if(n<6){ pozx=1; }else{ pozx=2; } return pozx; } //POZICIJA Y function pozy(n){ var pozy=0; if(n<3){ pozy=n }else if(n<6){ pozy=n-3; }else{ pozy=n-6; } return pozy; } //ZAPISI POZICIJU U MATRICU function zapisiPoz(x,y,igrac){ if(igrac=="i"){ mat[x][y]=1; }else{ mat[x][y]=2; } } //OBJAVA POBEDNIKA function zavrsetakIgre(n){ var winText="";

if(pob==1){ winText="You won!" } else if(pob==0){ winText="Computer wins!" }else{ winText="Draw!" } setTimeout(function(){modalBoxMessage(winText);},2500); $(".single-popup-buttons").eq(0).click(function(){ $(".closeModal").trigger('click'); for(var i=0; i<3;i++){ for(var j=0; j<3;j++) mat[i][j]=0;} $(".board").html(""); pob=3;potez=0;pozKlik=0; }); } $("#modalBox").append("<a class='single-popup-buttons'>Play again</a><a href='index.php' class='single-popup-buttons'>Go to homepage</a>"); //BINDOVANJE CLICKA NA POCETKU $(".board").on('click',fun); });

Simple-lightbox.min.js

/* By AndrÃ© Rinas, www.andreknieriem.de Available for use under the MIT License */ !function(a,b,c,d){"use strict";a.fn.simpleLightbox=function(d){var t,d=a.extend({overlay:!0,spinner:!0,nav:!0,navText:["&lsaquo;","&rsaquo;"],captions:!0,captionDelay:0,captionSelector:"img",captionType:"attr",captionsData:"title",captionPosition:"bottom",close:!0,closeText:"×",swipeClose:!0,showCounter:!0,fileExt:"png|jpg|jpeg|gif",animationSlide:!0,animationSpeed:250,preloading:!0,enableKeyboard:!0,loop:!0,rel:!1,docClose:!0,swipeTolerance:50,className:"simple-lightbox",widthRatio:.8,heightRatio:.9,disableRightClick:!1,disableScroll:!0,alertError:!0,alertErrorMessage:"Image not found, next image will be loaded",additionalHtml:!1,history:!0},d),h=(b.navigator.pointerEnabled||b.navigator.msPointerEnabled,0),i=0,j=a(),k=function(){var a=c.body||c.documentElement;return a=a.style,""===a.WebkitTransition?"-webkit-":""===a.MozTransition?"-moz-":""===a.OTransition?"-o-":""===a.transition&&""},l=!1,m=[],n=function(b,c){var d=a(c.selector).filter(function(){return a(this).attr("rel")===b});return d},o=d.rel&&d.rel!==!1?n(d.rel,this):this,k=k(),p=0,q=k!==!1,r="pushState"in history,s=!1,u=b.location,v=function(){return u.hash.substring(1)},w=v(),x=function(){var b=(v(),"pid="+(H+1)),d=u.href.split("#")[0]+"#"+b;r?history[s?"replaceState":"pushState"]("",c.title,d):s?u.replace(d):u.hash=b,s=!0},y=function(){r?history.pushState("",c.title,u.pathname+u.search):u.hash="",clearTimeout(t)},z=function(){s?t=setTimeout(x,800):x()},A="simplelb",B=a("<div>").addClass("sl-overlay"),C=a("<button>").addClass("sl-close").html(d.closeText),D=a("<div>").addClass("sl-spinner").html("<div></div>"),E=a("<div>").addClass("sl-navigation").html('<button class="sl-prev">'+d.navText[0]+'</button><button class="sl-next">'+d.navText[1]+"</button>"),F=a("<div>").addClass("sl-counter").html('<span class="sl-

current"></span>/<span class="sl-total"></span>'),G=!1,H=0,I=a("<div>").addClass("sl-caption pos-"+d.captionPosition),J=a("<div>").addClass("sl-image"),K=a("<div>").addClass("sl-wrapper").addClass(d.className),L=function(b){return!d.fileExt||"a"==a(b).prop("tagName").toLowerCase()&&new RegExp(".("+d.fileExt+")$","i").test(a(b).attr("href"))},M=function(){d.close&&C.appendTo(K),d.showCounter&&o.length>1&&(F.appendTo(K),F.find(".sl-total").text(o.length)),d.nav&&E.appendTo(K),d.spinner&&D.appendTo(K)},N=function(b){b.trigger(a.Event("show.simplelightbox")),d.disableScroll&&(p=W("hide")),K.appendTo("body"),J.appendTo(K),d.overlay&&B.appendTo(a("body")),G=!0,H=o.index(b),j=a("<img/>").hide().attr("src",b.attr("href")),m.indexOf(b.attr("href"))==-1&&m.push(b.attr("href")),J.html("").attr("style",""),j.appendTo(J),R(),B.fadeIn("fast"),a(".sl-close").fadeIn("fast"),D.show(),E.fadeIn("fast"),a(".sl-wrapper .sl-counter .sl-current").text(H+1),F.fadeIn("fast"),O(),d.preloading&&T(),setTimeout(function(){b.trigger(a.Event("shown.simplelightbox"))},d.animationSpeed)},O=function(c){if(j.length){var e=new Image,f=a(b).width()*d.widthRatio,g=a(b).height()*d.heightRatio;e.src=j.attr("src"),a(e).bind("error",function(b){o.eq(H).trigger(a.Event("error.simplelightbox")),G=!1,l=!0,D.hide(),d.alertError&&alert(d.alertErrorMessage),U(1==c||c==-1?c:1)}),e.onload=function(){"undefined"!=typeof c&&o.eq(H).trigger(a.Event("changed.simplelightbox")).trigger(a.Event((1===c?"nextDone":"prevDone")+".simplelightbox")),d.history&&z(),m.indexOf(j.attr("src"))==-1&&m.push(j.attr("src"));var h=e.width,i=e.height;if(h>f||i>g){var k=h/i>f/g?h/f:i/g;h/=k,i/=k}a(".sl-image").css({top:(a(b).height()-i)/2+"px",left:(a(b).width()-h-p)/2+"px"}),D.hide(),j.css({width:h+"px",height:i+"px"}).fadeIn("fast"),l=!0;var r,n="self"==d.captionSelector?o.eq(H):o.eq(H).find(d.captionSelector);if(r="data"==d.captionType?n.data(d.captionsData):"text"==d.captionType?n.html():n.prop(d.captionsData),d.loop||(0===H&&a(".sl-prev").hide(),H>=o.length-1&&a(".sl-next").hide(),H>0&&a(".sl-prev").show(),H<o.length-1&&a(".sl-next").show()),1==o.length&&a(".sl-prev, .sl-next").hide(),1==c||c==-1){var s={opacity:1};d.animationSlide&&(q?(Q(0,100*c+"px"),setTimeout(function(){Q(d.animationSpeed/1e3,"0px"),50})):s.left=parseInt(a(".sl-image").css("left"))+100*c+"px"),a(".sl-image").animate(s,d.animationSpeed,function(){G=!1,P(r)})}else G=!1,P(r);d.additionalHtml&&0===a(".sl-additional-html").length&&a("<div>").html(d.additionalHtml).addClass("sl-additional-html").appendTo(a(".sl-image"))}}},P=function(b){""!==b&&"undefined"!=typeof b&&d.captions&&I.html(b).hide().appendTo(a(".sl-image")).delay(d.captionDelay).fadeIn("fast")},Q=function(b,c){var d={};d[k+"transform"]="translateX("+c+")",d[k+"transition"]=k+"transform "+b+"s linear",a(".sl-image").css(d)},R=function(){a(b).on("resize."+A,O),a(c).on("click."+A+" touchstart."+A,".sl-close",function(a){a.preventDefault(),l&&V()}),d.history&&setTimeout(function(){a(b).on("hashchange."+A,function(){if(l&&v()===w)return void V()})},40),E.on("click."+A,"button",function(b){b.preventDefault(),h=0,U(a(this).hasClass("sl-next")?1:-1)});var e=0,f=0,g=0,j=0,k=!1,m=0;J.on("touchstart."+A+" mousedown."+A,function(a){return!!k||(q&&(m=parseInt(J.css("left"))),k=!0,e=a.originalEvent.pageX||a.originalEvent.touches[0].pageX,g=a.originalEvent.pageY||a.originalEvent.touches[0].pageY,!1)}).on("touchmove."+A+" mousemove."+A+" pointermove MSPointerMove",function(a){return!k||(a.preventDefault(),f=a.originalEvent.pageX||a.originalEvent.touches[0].pageX,j=a.originalEvent.pageY||a.originalEvent.touches[0].pageY,h=e-f,i=g-j,void(d.animationSlide&&(q?Q(0,-h+"px"):J.css("left",m-h+"px"))))}).on("touchend."+A+" mouseup."+A+" touchcancel."+A+" mouseleave."+A+" pointerup pointercancel MSPointerUp MSPointerCancel",function(a){if(k){k=!1;var b=!0;d.loop||(0===H&&h<0&&(b=!1),H>=o.length-1&&h>0&&(b=!1)),Math.abs(h)>d.swipeTolerance&&b?U(h>0?1:-1):d.animationSlide&&(q?Q(d.animationSpeed/1e3,"0px"):J.animate({left:m+"px"},d.animationSpeed/2)),d.swipeClose&&Math.abs(i)>50&&Math.abs(h)<d.swipeTolerance&&V()}})},S=function(){E.off("click","button"),a(c).off("click."+A,".sl-close"),a(b).off("resize."+A),a(b).off("hashchange."+A)},T=function(){var b=H+1<0?o.length-1:H+1>=o.length-1?0:H+1,c=H-1<0?o.length-1:H-1>=o.length-1?0:H-1;a("<img />").attr("src",o.eq(b).attr("href")).on("load",function(){m.indexOf(a(this).attr("src"))==-1&&m.push(a(this).attr("src")),o.eq(H).trigger(a.Event("nextImageLoaded.simplelightbox"))}),a("<img />").attr("src",o.eq(c).attr("href")).on("load",function(){m.indexOf(a(this).attr("src"))==-1&&m.push(a(this).attr("src")),o.eq(H).trigger(a.Event("prevImageLoaded.simplelightbox"))})},U=function(b){o.eq(

H).trigger(a.Event("change.simplelightbox")).trigger(a.Event((1===b?"next":"prev")+".simplelightbox"));var c=H+b;if(!(G||(c<0||c>=o.length)&&d.loop===!1)){H=c<0?o.length-1:c>o.length-1?0:c,a(".sl-wrapper .sl-counter .sl-current").text(H+1);var e={opacity:0};d.animationSlide&&(q?Q(d.animationSpeed/1e3,-100*b-h+"px"):e.left=parseInt(a(".sl-image").css("left"))+-100*b+"px"),a(".sl-image").animate(e,d.animationSpeed,function(){setTimeout(function(){var c=o.eq(H);j.attr("src",c.attr("href")),m.indexOf(c.attr("href"))==-1&&D.show(),a(".sl-caption").remove(),O(b),d.preloading&&T()},100)})}},V=function(){if(!G){var b=o.eq(H),c=!1;b.trigger(a.Event("close.simplelightbox")),d.history&&y(),a(".sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter").fadeOut("fast",function(){d.disableScroll&&W("show"),a(".sl-wrapper, .sl-overlay").remove(),S(),c||b.trigger(a.Event("closed.simplelightbox")),c=!0}),j=a(),l=!1,G=!1}},W=function(d){var e=0;if("hide"==d){var f=b.innerWidth;if(!f){var g=c.documentElement.getBoundingClientRect();f=g.right-Math.abs(g.left)}if(c.body.clientWidth<f){var h=c.createElement("div"),i=parseInt(a("body").css("padding-right"),10);h.className="sl-scrollbar-measure",a("body").append(h),e=h.offsetWidth-h.clientWidth,a(c.body)[0].removeChild(h),a("body").data("padding",i),e>0&&a("body").addClass("hidden-scroll").css({"padding-right":i+e})}}else a("body").removeClass("hidden-scroll").css({"padding-right":a("body").data("padding")});return e};return M(),o.on("click."+A,function(b){if(L(this)){if(b.preventDefault(),G)return!1;N(a(this))}}),a(c).on("click."+A+" touchstart."+A,function(b){l&&d.docClose&&0===a(b.target).closest(".sl-image").length&&0===a(b.target).closest(".sl-navigation").length&&V()}),d.disableRightClick&&a(c).on("contextmenu",".sl-image img",function(a){return!1}),d.enableKeyboard&&a(c).on("keyup."+A,function(a){if(a.preventDefault(),h=0,l){var b=a.keyCode;27==b&&V(),37!=b&&39!=a.keyCode||U(39==a.keyCode?1:-1)}}),this.open=function(b){b=b||a(this[0]),N(b)},this.next=function(){U(1)},this.prev=function(){U(-1)},this.close=function(){V()},this.destroy=function(){a(c).unbind("click."+A).unbind("keyup."+A),V(),a(".sl-overlay, .sl-wrapper").remove(),this.off("click")},this.refresh=function(){this.destroy(),a(this.selector).simpleLightbox(d)},this}}(jQuery,window,document);

Md5.min.j

!function(n){"use strict";function t(n,t){var r=(65535&n)+(65535&t),e=(n>>16)+(t>>16)+(r>>16);return e<<16|65535&r}function r(n,t){return n<<t|n>>>32-t}function e(n,e,o,u,c,f){return t(r(t(t(e,n),t(u,f)),c),o)}function o(n,t,r,o,u,c,f){return e(t&r|~t&o,n,t,u,c,f)}function u(n,t,r,o,u,c,f){return e(t&o|r&~o,n,t,u,c,f)}function c(n,t,r,o,u,c,f){return e(t^r^o,n,t,u,c,f)}function f(n,t,r,o,u,c,f){return e(r^(t|~o),n,t,u,c,f)}function i(n,r){n[r>>5]|=128<<r%32,n[(r+64>>>9<<4)+14]=r;var e,i,a,h,d,l=1732584193,g=-271733879,v=-1732584194,m=271733878;for(e=0;e<n.length;e+=16)i=l,a=g,h=v,d=m,l=o(l,g,v,m,n[e],7,-680876936),m=o(m,l,g,v,n[e+1],12,-389564586),v=o(v,m,l,g,n[e+2],17,606105819),g=o(g,v,m,l,n[e+3],22,-1044525330),l=o(l,g,v,m,n[e+4],7,-176418897),m=o(m,l,g,v,n[e+5],12,1200080426),v=o(v,m,l,g,n[e+6],17,-1473231341),g=o(g,v,m,l,n[e+7],22,-45705983),l=o(l,g,v,m,n[e+8],7,1770035416),m=o(m,l,g,v,n[e+9],12,-1958414417),v=o(v,m,l,g,n[e+10],17,-42063),g=o(g,v,m,l,n[e+11],22,-1990404162),l=o(l,g,v,m,n[e+12],7,1804603682),m=o(m,l,g,v,n[e+13],12,-40341101),v=o(v,m,l,g,n[e+14],17,-1502002290),g=o(g,v,m,l,n[e+15],22,1236535329),l=u(l,g,v,m,n[e+1],5,-165796510),m=u(m,l,g,v,n[e+6],9,-1069501632),v=u(v,m,l,g,n[e+11],14,643717713),g=u(g,v,m,l,n[e],20,-373897302),l=u(l,g,v,m,n[e+5],5,-701558691),m=u(m,l,g,v,n[e+10],9,38016083),v=u(v,m,l,g,n[e+15],14,-660478335),g=u(g,v,m,l,n[e+4],20,-405537848),l=u(l,g,v,m,n[e+9],5,568446438),m=u(m,l,g,v,n[e+14],9,-1019803690),v=u(v,m,l,g,n[e+3],14,-187363961),g=u(g,v,m,l,n[e+8],20,1163531501),l=u(l,g,v,m,n[e+13],5,-1444681467),m=u(m,l,g,v,n[e+2],9,-51403784),v=u(v,m,l,g,n[e+7],14,1735328473),g=u(g,v,m,l,n[e+12],20,-1926607734),l=c(l,g,v,m,n[e+5],4,-378558),m=c(m,l,g,v,n[e+8],11,-2022574463),v=c(v,m,l,g,n[e+11],16,1839030562),g=c(g,v,m,l,n[e+14],23,-35309556),l=c(l,g,v,m,n[e+1],4,-1530992060),m=c(m,l,g,v,n[e+4],11,1272893353),v=c(v,m,l,g,n[e+7],16,-155497632),g=c(g,v,m,l,n[e+10],23,-1094730640),l=c(l,g,v,m,n[e+13],4,681279174),m=c(m,l,g,v,n[e],11,-358537222),v=c(v,m,l,g,n[e+3],16,-722521979),g=c(g,v,m,l,n[e+6],23,76029189),l=c(l,g,v,m,n[e+9],4,-

640364487),m=c(m,l,g,v,n[e+12],11,-421815835),v=c(v,m,l,g,n[e+15],16,530742520),g=c(g,v,m,l,n[e+2],23,-995338651),l=f(l,g,v,m,n[e],6,-198630844),m=f(m,l,g,v,n[e+7],10,1126891415),v=f(v,m,l,g,n[e+14],15,-1416354905),g=f(g,v,m,l,n[e+5],21,-57434055),l=f(l,g,v,m,n[e+12],6,1700485571),m=f(m,l,g,v,n[e+3],10,-1894986606),v=f(v,m,l,g,n[e+10],15,-1051523),g=f(g,v,m,l,n[e+1],21,-2054922799),l=f(l,g,v,m,n[e+8],6,1873313359),m=f(m,l,g,v,n[e+15],10,-30611744),v=f(v,m,l,g,n[e+6],15,-1560198380),g=f(g,v,m,l,n[e+13],21,1309151649),l=f(l,g,v,m,n[e+4],6,-145523070),m=f(m,l,g,v,n[e+11],10,-1120210379),v=f(v,m,l,g,n[e+2],15,718787259),g=f(g,v,m,l,n[e+9],21,-343485551),l=t(l,i),g=t(g,a),v=t(v,h),m=t(m,d);return[l,g,v,m]}function a(n){var t,r="",e=32*n.length;for(t=0;t<e;t+=8)r+=String.fromCharCode(n[t>>5]>>>t%32&255);return r}function h(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t<r.length;t+=1)r[t]=0;var e=8*n.length;for(t=0;t<e;t+=8)r[t>>5]|=(255&n.charCodeAt(t/8))<<t%32;return r}function d(n){return a(i(h(n),8*n.length))}function l(n,t){var r,e,o=h(n),u=[],c=[];for(u[15]=c[15]=void 0,o.length>16&&(o=i(o,8*n.length)),r=0;r<16;r+=1)u[r]=909522486^o[r],c[r]=1549556828^o[r];return e=i(u.concat(h(t)),512+8*t.length),a(i(c.concat(e),640))}function g(n){var t,r,e="0123456789abcdef",o="";for(r=0;r<n.length;r+=1)t=n.charCodeAt(r),o+=e.charAt(t>>>4&15)+e.charAt(15&t);return o}function v(n){return unescape(encodeURIComponent(n))}function m(n){return d(v(n))}function p(n){return g(m(n))}function s(n,t){return l(v(n),v(t))}function C(n,t){return g(s(n,t))}function A(n,t,r){return t?r?s(t,n):C(t,n):r?m(n):p(n)}"function"==typeof define&&define.amd?define(function(){return A}):"object"==typeof module&&module.exports?module.exports=A:n.md5=A}(this); //# sourceMappingURL=md5.min.js.map

Main.js

$(document).ready(function() { //SCROLL TO TOP $("#scroll-to-top img").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); }); // ANIMACIJA DUGMICA HOME $("#buttons").delay(5500).animate({ width: '245' }, 550); //MENU PUSH OFF CANVAS $("#ikOnicaMenu").click(function() { $("#menu-container").toggleClass("menu-open"); $("#omot").toggleClass("omot-push") }); //VOTE SYSTEM votePrikazi(); function votePrikazi(){ $.ajax({ url:"voteLogic.php", type:"post",

data:{"votePrikazi":true}, success:function(data){ if(data!="0"){ setTimeout(function(){$("#voteBoxx").fadeIn("slow");},4000); } } }); } $("#voteCloseButt").click(function(){ $(this).parent().fadeOut(); }); $("#submitVote").click(function(){ option=$(".voteOption:checked").val(); if(option!=undefined){ $(".voteError").fadeOut(); $.ajax({ url:"voteLogic.php", type:"post", data:{"votePrikazi":true,"voteOption":option}, success:function(data){ var rez=data.split(","); var yes=Math.floor((rez[0]*100)/rez[2])+"%"; var no=Math.floor((rez[1]*100)/rez[2])+"%"; $("#voteBoxx").html("<div id='RezPvote'><p>Vote Results!</p><b>Yes</b><span class='spanVoteRez' id='yes'>"+yes+"</span><b>No</b><span class='spanVoteRez' id='no'>"+no+"</span><p>Total votes:"+rez[2]+"</p></div>"); setTimeout(function(){ $("#yes").css("width",yes); $("#no").css("width",no); },1000); setTimeout(function(){ $("#voteBoxx").fadeOut(); },5000); } }); }else{ $(".voteError").fadeIn(); } }); //SEARCH AJAX $("#searchForma").submit(function(e){ var searchReg=/^[A-z\d\s]{2,40}$/; var searchInput=$("#searchInput"); if(searchReg.test(searchInput.val())){

$(this).submit(); }else{ $(searchInput).addClass("redBorderMenu"); e.preventDefault(); modalBoxMessage("Search term must have at least two letters or numbers!"); } }); //POZIVANJE SEARCHLOGIC.PHP if($("#contents > div").eq(0).hasClass("srchClassforPost")){ $.post('searchLogic.php',{"searchSubmit":true}, function(data) { var jsonSearchPodaci=data; $("#search-inputFromSearchPage").keyup(function(){ var searchTxt=$(this).val(); var searchObjectsGallery=''; if(searchTxt.length>=2){ var regForSearch = new RegExp(searchTxt, "i"); var brTip=0; $.each(jsonSearchPodaci, function(x,val) { if (regForSearch.test(val.txt)) { brTip=x+1; searchObjectsGallery +="<div class='image-text-gallery'> <h2>Tip "+brTip+"</h2>"; searchObjectsGallery += "<img src='"+val.src+"' alt='Tip"+brTip+"' />"; searchObjectsGallery +="<p>"+val.txt+"</p></div>"; } }); $("#searchResults").html(searchObjectsGallery); $(".image-text-gallery p").highlight(searchTxt); $("#itemsFoundSearch").text($("#searchResults").children().length+" items found!"); }else{ $("#searchResults").html(" "); $("#itemsFoundSearch").text(" 0 items found!"); } }); $("#search-inputFromSearchPage").trigger("keyup"); }, 'json'); } //GALLERY PAGINATION $(".navGallery").click(function(){ $(this).addClass("activeNavNumGallery"); $(".navGallery").not(this).removeClass("activeNavNumGallery"); var numb=$(this).text(); var limitStart=0; for(var i=0;i<$(this).index();i++){ limitStart+=3; } pozoviSlike(limitStart).done(function(){

$(".image-text-gallery").each(function(){ $(this).addClass("moveImage"); }); }); }); function pozoviSlike(limitStart){ return $.ajax({ url:"searchLogic.php", type:"POST", data:{"limitStart":limitStart}, success:function(data){ setTimeout(function(){ $(".image-box-gallery-gal").html(data); var gallery = $('.image-text-gallery a').simpleLightbox(); //OVDE JE GALERIJE I EFEKTI ZA SLIKUU! $(".image-text-gallery a").hover(function(){ $(this).addClass("galleryZoom"); $(this).find("i").stop(true).fadeIn(); $(this).find("img").css("transform","scale(1.2)"); return false; },function(){ $(this).removeClass("galleryZoom"); $(this).find("img").css("transform","scale(1)"); $(this).find("i").stop(true).fadeOut(); }); },850); } }); } //LOGIN FORMA PROVERA $("#loginForma").submit(function(e){ var emailPatt = /^[A-z\d\-\.\_]{3,35}@[A-z\.0-9]{3,20}\.[a-z]{1,6}$/,passPatt = /^[A-z\d]{3,20}$/,greske=""; var mail=$("#loginUsername"); var pass=$("#loginPass"); if(!emailPatt.test($(mail).val())){ greske+="Email is not in good format!</br></br>"; $(mail).addClass("redBorderMenu"); }else{$(mail).removeClass("redBorderMenu");} if(!passPatt.test($(pass).val())){ greske+="Password must have at least 3 letters or numbers!"; $(pass).addClass("redBorderMenu"); }else{$(pass).removeClass("redBorderMenu");} if(greske==""){ $(this).submit(); }else{ e.preventDefault(); modalBoxMessage(greske);

} }); jQuery.fn.clickToggle = function(a, b) { function cb() { [b, a][this._tog ^= 1].call(this); $("#submitEPage").toggle(); } return this.on("click", cb); }; //EDIT PROFILAAAA $("#editProfile").clickToggle(function(){ $("#pchnagePicture").css("display","block"); $(this).text("Save changes"); $(".inputchngProfile").fadeIn(); $(".inputchngProfile").each(function(i){ if(i==3)return false; $(this).html("<input type='text' value='"+$(this).parent().find("td:eq(1)").text().trim()+"'/>"); }); },function(){ $("#pchnagePicture").css("display","none"); $(this).text("Edit profile"); var nizUpdUserProf=new Array(); var nizRegExp=new Array(/^[A-z]{2,20}$/,/^[A-z]{2,20}$/,/^[A-z\d\-\.\_]{3,35}@[A-z\.0-9]{3,20}\.[a-z]{1,6}$/); var userInput,txtGreske=''; $(".inputchngProfile input").each(function(i){ userInput=$(this).val(); if(!nizRegExp[i].test(userInput)){ txtGreske+=$(this).closest("tr").find("td:eq(0)").text()+" is not in good format!</br>"; }else{ nizUpdUserProf.push(userInput); } }); $(".inputchngProfile").fadeOut(); if(txtGreske==''){ $.ajax({ url:"login.php", type:"POST", data:{"nizUpdUserProf":nizUpdUserProf}, success:function(data){ modalBoxMessage(data); setTimeout(function(){location.reload();},2000); } }); }else{ txtGreske+='Please try again with correct input!'; modalBoxMessage(txtGreske); } });

$("#pchnagePicture").clickToggle(function(){ $(this).text("Upload picture!"); $("#uploadProfileImageUser").trigger('click'); },function(){ $(this).text("Change picture"); var imgPatt = /\.(jpg|png|gif|bmp|jpeg)$/i; if(imgPatt.test($('#uploadProfileImageUser').val())){ var profDataSlika = new FormData(); profDataSlika.append('fileUser', $('#uploadProfileImageUser')[0].files[0]); $.ajax({ type:'POST', url: "login.php", data:profDataSlika, cache:false, contentType: false, processData: false, success:function(data){ modalBoxMessage(data); } }); }else{ modalBoxMessage("Supported image formats are (jpg,png,gif,bmp)"); } }); //REGULARNI IZRAZI REGISTER FORM $("#regButton").click(function(e) { e.preventDefault(); $(".warningRegister").hide(); var nizGreske=new Array(); var nizPodataka=new Array(); if (proveraPodatakaRegister(nizGreske,nizPodataka) == 0) { $.ajax({ url:"registracijaPr.php", type:"post", data:{"nizRegister":nizPodataka}, success:function(data){ //PROZOR SA OBAVESTENJEM SUCCESSFULLY REGISTRED modalBoxMessage(data); } });

} else { $(".redBorderReg").each(function(index){ $(this).parent().append("<div class='warningRegister'><i class='material-icons'> warning</i><span class='regErrorMessage'><p>"+nizGreske[index]+"</p></span></div>") }); $(".redBorderReg").focus(function(){ $(this).parent().find("span").fadeIn(); }); $(".redBorderReg").blur(function(){ $(".warningRegister").not(this).parent().find("span").fadeOut(); }); } }); //REGULARNI IZRAZI CONTACT FORM $("#contButton").click(function(e) { var greske ="",nizContact=new Array(); var namePatt = /^[A-z]{2,20}$/, email = /^[A-z\d\-\.\_]{3,35}@[A-z\.0-9]{3,20}\.[a-z]{1,6}$/, messPatt = /^([A-z\d\W]{1,25}|\s)+$/; e.preventDefault(); if (namePatt.test($("#contName").val())) { $("#contName").removeClass("redBorderReg"); nizContact.push($("#contName").val()) } else { $("#contName").addClass("redBorderReg"); greske+=" Name must contain at least 2 letters! </br>"; } if (email.test($("#contEmail").val())) { $("#contEmail").removeClass("redBorderReg"); nizContact.push($("#contEmail").val()) } else { $("#contEmail").addClass("redBorderReg"); greske+=" Bad email format! </br>"; } if (messPatt.test($("#contMess").val())) { $("#contMess").removeClass("redBorderReg"); nizContact.push($("#contMess").val()) } else { $("#contMess").addClass("redBorderReg"); greske+=" Message is empty!</br> "; } if (greske == "") { $("#authorF-Greske").fadeOut(); $.ajax({ url:"registracijaPr.php", type:"post", data:{"nizContact":nizContact},

success:function(data){ modalBoxMessage(data); } }); } else { $("#authorF-Greske").html(greske).fadeIn(); } }); //REGULARNI IZRAZI function proveraPodatakaRegister(nizGreske,nizPodataka){ var namePatt = /^[A-z]{3,20}$/, passPatt = /^[A-z\d]{3,20}$/, emailPatt = /^[A-z\d\-\.\_]{3,35}@[A-z\.0-9]{3,20}\.[a-z]{1,6}$/; //PODACI var name=$("#regName"), username=$("#regUsername"), pass=$("#regPassword"), passRe=$("#regRetypePassword"), email=$("#regEmail"), terms=$("#regTerms"); if(namePatt.test(name.val())){ $(name).removeClass("redBorderReg"); nizPodataka.push(name.val()); }else{$(name).addClass("redBorderReg");nizGreske.push("Your First name? minimum 3 letters!");} if(namePatt.test(username.val())){ $(username).removeClass("redBorderReg"); nizPodataka.push(username.val()); }else{$(username).addClass("redBorderReg");nizGreske.push("Your Last name? minimum 3 letters!");} if(passPatt.test(pass.val())){ $(pass).removeClass("redBorderReg"); nizPodataka.push(pass.val()); }else{$(pass).addClass("redBorderReg");nizGreske.push("Come on feel me up!");} if(pass.val()==passRe.val()&&passRe.val().length!=0){ $(passRe).removeClass("redBorderReg"); }else{$(passRe).addClass("redBorderReg");nizGreske.push("Password mismatch!");} if(emailPatt.test(email.val())){ $(email).removeClass("redBorderReg"); nizPodataka.push(email.val()); }else{$(email).addClass("redBorderReg");nizGreske.push("Bad email format! [email protected]");}

if($(terms).is(":checked")){ $(terms).parent().find("label").css("color","#333"); }else{$(terms).parent().find("label").css("color","#FF0000");nizGreske.push("not checked");} return nizGreske.length; } $("#generateMulLink").click(function(){ var idGame=$("#idGame").val(); $(this).fadeOut(); $.ajax({ url: 'mulLogic.php', data: {'idGame' : idGame}, type: 'post', success:function(data){ if(data=='1'){ modalBoxMessage("You already created link!"); $("#playMultiPButt").css("display","block"); }else if(data=='0'){ modalBoxMessage("Error occurred please try again later!"); }else{ $("#genLink").val("192.168.1.2/praviSajt/index.php?idStr=8&auth="+data); $("#genLink").fadeIn(); $("#copyLink").fadeIn(); $("#playMultiPButt").css("display","block"); modalBoxMessage("Successfully created link!"); } } }); }); $("#copyLink").click(function(){ //COPY LINKA ZA GENERSIANJE $("#genLink").select(); document.execCommand("copy"); }); $(".closeModal").click(function(){ $("#modalBox").addClass("animateModalExit"); setTimeout(function(){$("#modalBox").removeClass("animateModalEnter");},800); }); }); //MODAL BOX ZA OBAVESTENJA function modalBoxMessage(mess){ $(".messageModal").html(mess); $("#modalBox").addClass("animateModalEnter"); $("#modalBox").removeClass("animateModalExit");

}

Dizajn baze podataka

dokumentacija - aleksajovanovic.com ... php,html, css, javascript, jquery, ajax, xml, xsl,json. opis...

Documents