API tools faq
paste
Guest User

Untitled

a guest
Nov 27th, 2018
557
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.92 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en" class="no-js">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6.  
  7. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
  8. <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  9. <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
  10. <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
  11. <link rel="stylesheet" href="css/search.css"> <!-- Resource style -->
  12. <script src="js/modernizr.js"></script> <!-- Modernizr -->
  13.  
  14.  
  15. <title>Nasz sklep</title>
  16. </head>
  17. <body>
  18. <header class="cd-header">
  19. <h1>Nasz sklep</h1>
  20. </header>
  21.  
  22. <main class="cd-main-content">
  23. <div class="cd-tab-filter-wrapper">
  24. <div class="cd-tab-filter">
  25. <ul class="cd-filters">
  26. <li class="placeholder">
  27. <a data-type="all" href="#0">Komponenty</a> <!-- selected option on mobile -->
  28. </li>
  29. <li class="filter"> <a href="procesor.php" >Procesor</a></li>
  30. <li class="filter" data-filter=".color-1"><a href="ram.php" >Pamięć RAM</a></li>
  31. <li class="filter" data-filter=".color-2"><a href="grafika.php" >Karta graficzna</a></li>
  32. <li class="filter"><a class="selected" href="plyta.php" >Płyta główna</a></li>
  33. <li class="filter" data-filter=".dysk"><a href="dysk.php" >Dyski twarde </a></li>
  34. <li class="filter" data-filter=".color-2"><a href="zasilacz.php" >Zasilacz </a></li>
  35. <li class="filter" data-filter=".color-2"><a href="obudowa.php" >Obudowa </a></li>
  36. </ul> <!-- cd-filters -->
  37. </div> <!-- cd-tab-filter -->
  38. </div> <!-- cd-tab-filter-wrapper -->
  39.  
  40. <?php
  41. $polacz=mysqli_connect('localhost','root','','online_shop');
  42.  
  43. if (mysqli_connect_errno()){
  44. echo "Failed to connect to MySQL: " . mysqli_connect_error();
  45. }
  46. ?>
  47.  
  48.  
  49.  
  50. <section class="cd-gallery">
  51.  
  52. <div class="cd-filter-block">
  53. <h4> Obecnie wybrane komponenty</h4>
  54. <ul class="cd-filter-content cd-filters list">
  55. <?php
  56. $sql="SELECT procesor.nazwa, procesor.zdjecie, dysk.nazwa, dysk.zdjecie
  57. FROM tmp inner JOIN procesor on tmp.ID_procesora=procesor.ID_procesora inner join dysk on tmp.ID_dysku=dysk.ID_dysku";
  58. if ($result=mysqli_query($polacz,$sql))
  59. {
  60. $row=mysqli_num_rows($result);
  61. while($row = mysqli_fetch_array($result, MYSQLI_ASSOC))
  62. {
  63. $nazwa1=$row["procesor.zdjecie"];
  64. $nazwa2=$row["procesor.zdjecie"];
  65. echo('<li class="mix">
  66. <div class="card-panel hoverable">
  67. <img src="'.$nazwa1.'" width="100%" height="100%"> <br>
  68. <h5 class="center"> <u> '.$row["procesor.nazwa"].'</u> </h5>
  69. <img src="'.$nazwa2.'" width="100%" height="100%"> <br>
  70. <h5 class="center"> <u> '.$row["dysk.nazwa"].'</u> </h5>
  71. <center> <a class="waves-effect waves-light btn" href="#0">Dodaj do zestawu</a>
  72. </center>
  73. </div>
  74. </li>');
  75. }
  76. }
  77.  
  78. ?>
  79.  
  80.  
  81. </ul> <!-- cd-filter-content -->
  82. </div> <!-- cd-filter-block -->
  83. </section>
  84. <div class=mucha" data-ref="mucha">
  85. <section class="cd-gallery">
  86. <ul>
  87. <?php
  88. $sql="
  89. Select ID_plyta, nazwa, producent, cena,standard_plyty,gniazdo_procesora,
  90. chipset,crossfire,sli,typ_obslugiwanej_pamieci,
  91. ilosc_gniazd_pamieci,maks_pojemnosc_pamieci,obsluga_raid,karta_sieciowa,
  92. karta_dzwiekowa,zlacza_tylne,wtyczka_zasilania,zdjecie FROM plyta";
  93. if ($result=mysqli_query($polacz,$sql))
  94. {
  95. $row=mysqli_num_rows($result);
  96. while($row = mysqli_fetch_array($result, MYSQLI_ASSOC))
  97. {
  98.  
  99. $nazwa=$row["zdjecie"];
  100. echo('
  101. <li class="mix '.$row["nazwa"].' '.$row["producent"].' '.$row["standard_plyty"].' '.$row["gniazdo_procesora"].' '.$row["chipset"].'">
  102. <div class="card-panel hoverable"> <img src="'.$nazwa.'" width="100%" height="100%"> <br>
  103. <h5 class="center"> <u> '.$row["nazwa"].'</u> </h5>
  104. <p class="light">
  105. <b>Cena: </b> '.$row["cena"].' zł <br>
  106. <b>Producent: </b> '.$row["producent"].'<br>
  107. <b>Standard płyty głównej: </b>'.$row["standard_plyty"].'<br>
  108. <b>Gniazdo procesora:</b>'.$row["gniazdo_procesora"].'<br>
  109. <b>Chipset:</b>'.str_replace('_', ' ', $row["chipset"]).'<br>
  110. <b>Obsługa Crossfire: </b>'.$row["crossfire"].',5"<br>
  111. <b>Obsługa SLI:</b>'.$row["sli"].'<br>
  112. <b>Typ obsługiwanej pamięci:</b>'.$row["typ_obslugiwanej_pamieci"].',5"<br>
  113. <b>Maksymalna pojemność pamięci:</b>'.$row["maks_pojemnosc_pamieci"].'<br>
  114. <b>Obsługa RAID:</b>'.$row["obsluga_raid"].',5"<br>
  115. <b>Karta sieciowa:</b>'.$row["karta_sieciowa"].'<br>
  116. <b>Karta dźwiękowa::</b>'.$row["karta_dzwiekowa"].',5"<br>
  117. <b>Złącza tylne:</b>'.$row["zlacza_tylne"].'<br>
  118. <b>Wtyczka zasilania:</b>'.$row["wtyczka_zasilania"].',5"<br>
  119. <br /> <br />
  120. </p>
  121. <center>
  122. <form action="koszyk.php" method="post">
  123. <button class="btn waves-effect waves-light" type="submit" name="action">Dodaj do zestawu
  124. </button>
  125. </form>
  126. </center>
  127. </div>
  128. </li>
  129. ');
  130. }
  131. }
  132.  
  133. ?>
  134.  
  135. <li class="gap"></li>
  136. <li class="gap"></li>
  137. <li class="gap"></li>
  138. </ul>
  139. <div class="cd-fail-message">Brak produktów spełniających oczekiwania </div>
  140. </section> <!-- cd-gallery -->
  141. </div>
  142.  
  143. <div class="cd-filter">
  144. <form>
  145. <div class="cd-filter-block">
  146. <h4>Wyszukaj po nazwie</h4>
  147. <div class="cd-filter-content">
  148. <input type="search" placeholder="Wpisz nazwę komponentu">
  149. </div> <!-- cd-filter-content -->
  150. </div> <!-- cd-filter-block -->
  151.  
  152. <div class="cd-filter-block input-field col s12">
  153. <h4>Producent</h4>
  154. <ul class="cd-filter-content cd-filters list ">
  155. <select class="filter input-field" name="selectThis" id="selectThis">
  156. <option value="" selected>Producent</option>
  157. <option value=".MSI">MSI</option>
  158. <option value=".ASUS">ASUS</option>
  159. <option value=".Gigabyte">Gigabyte</option>
  160. <option value=".ASRock">ASRock</option>
  161. </select>
  162. </ul>
  163. </div>
  164.  
  165. <div class="cd-filter-block">
  166. <h4>Standard płyty</h4>
  167. <ul class="cd-filter-content cd-filters list">
  168. <li>
  169. <input class="filter" data-filter=".BT" type="checkbox" id="checkbox1">
  170. <label class="checkbox-label" for="checkbox1"><span>BT</span></label>
  171. </li>
  172. <li>
  173. <input class="filter" data-filter=".ATX" type="checkbox" id="checkbox2">
  174. <label class="checkbox-label" for="checkbox2">ATX</label>
  175. </li>
  176. <li>
  177. <input class="filter" data-filter=".micro-ATX" type="checkbox" id="checkbox3">
  178. <label class="checkbox-label" for="checkbox3"><span>micro-ATX</span></label>
  179. </li>
  180. </ul>
  181. </div>
  182.  
  183. <div class="cd-filter-block input-field col s12">
  184. <h4>Gniazdo procesora</h4>
  185. <ul class="cd-filter-content cd-filters list ">
  186. <select class="filter input-field" name="selectThis" id="selectThis" multiple>
  187. <option value=".1151">Socket 1151</option>
  188. <option value=".2066">Socket 2066</option>
  189. <option value=".AM3+">Socket AM3+</option>
  190. <option value=".AM4">Socket AM4</option>
  191. <option value=".FM2">Socket FM2</option>
  192. <option value=".TR4">Socket TR4</option>
  193. </select>
  194. </ul>
  195. </div>
  196.  
  197.  
  198. <div class="cd-filter-block">
  199. <h4>Typ chipsetu</h4>
  200. <ul class="cd-filter-content cd-filters list">
  201. <select class="filter" name="selectThis" id="selectThis">
  202. <option value="" selected>Typ chipsetu</option>
  203. <option value=".AMD_A320">AMD A320</option>
  204. <option value=".Intel_Z370">Intel Z270</option>
  205. <option value=".AMD_990X">AMD 990X</option>
  206. </select>
  207. </ul>
  208. </div>
  209.  
  210. <div class="cd-filter-block">
  211. <h4>Suwaczek</h4>
  212. <div class="cd-filter-content">
  213. <div class="range-slider">
  214. <label>Min</label>
  215. <p class="range-field">
  216. <input name="minSize" class="range-slider-input" type="range" min="0" max="1000" value="0" />
  217. </p>
  218. </div>
  219.  
  220. <div class="range-slider">
  221. <label>Max</label>
  222. <p class="range-field">
  223. <input name="maxSize" class="range-slider-input" type="range" min="0" max="1000" value="1000"/>
  224. </p>
  225. </div>
  226. </div> <!-- cd-filter-content -->
  227. </div> <!-- cd-filter-block -->
  228.  
  229. </form>
  230.  
  231. <a href="#0" class="cd-close" style="background-color: #ff0000;">X</a>
  232. </div> <!-- cd-filter -->
  233.  
  234. <a href="#0" class="cd-filter-trigger"> Wyszukiwanie</a>
  235. </main> <!-- cd-main-content -->
  236. <script src="js/jquery-2.1.1.js"></script>
  237. <script src="js/jquery.mixitup.min.js"></script>
  238. <script src="js/main.js"></script> <!-- Resource jQuery -->
  239. <script src="js/materialize.js"></script>
  240. <script src="js/materialize.js"></script>
  241. <script src="js/init.js"></script>
  242. <script src="js/mixitup.min.js"></script>
  243.  
  244. <script>
  245. var containerEl = document.querySelector('.mucha');
  246.  
  247. var mixer = mixitup(containerEl);
  248. var container = document.querySelector('[data-ref="mucha"]');
  249. var minSizeRangeInput = document.querySelector('[name="minSize"]');
  250. var maxSizeRangeInput = document.querySelector('[name="maxSize"]');
  251.  
  252. var mixer = mixitup(container, {
  253. animation: {
  254. duration: 350
  255. },
  256. callbacks: {
  257. onMixClick: function() {
  258. // Reset the search if a filter is clicked
  259.  
  260. if (this.matches('[data-filter]')) {
  261. inputSearch.value = '';
  262. }
  263. }
  264. }
  265. });
  266. function getRange() {
  267. var min = Number(minSizeRangeInput.value);
  268. var max = Number(maxSizeRangeInput.value);
  269.  
  270. return {
  271. min: min,
  272. max: max
  273. };
  274. }
  275. function handleRangeInputChange() {
  276. mixer.filter(mixer.getState().activeFilter);
  277. }
  278.  
  279. function filterTestResult(testResult, target) {
  280. var size = Number(target.dom.el.getAttribute('data-size'));
  281. var range = getRange();
  282.  
  283. if (size < range.min || size > range.max) {
  284. testResult = false;
  285. }
  286.  
  287. return testResult;
  288. }
  289.  
  290. mixitup.Mixer.registerFilter('testResultEvaluateHideShow', 'range', filterTestResult);
  291.  
  292.  
  293. minSizeRangeInput.addEventListener('change', handleRangeInputChange);
  294. maxSizeRangeInput.addEventListener('change', handleRangeInputChange);
  295.  
  296. </script>
  297.  
  298. </body>
  299. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!