API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 14th, 2019
170
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Mały sklep internetowy</title>
  8. <!-- Bootstrap -->
  9. <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  10. <link href="css/fontello.css" rel="stylesheet" type="text/css" />
  11. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  12. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  15. <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  16. <![endif]-->
  17. <script src="dist/jquery.magnific-popup.js"></script>
  18. <link rel="stylesheet" href="dist/magnific-popup.css">
  19. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  20. <style>
  21. .simpleCart_shelfItem {
  22. padding: 20px;
  23. transition: all .4s;
  24. -webkit-transition: all .4s;
  25. }
  26. .simpleCart_shelfItem:hover {
  27. transform: scale(1.05);
  28. -ms-transform: scale(1.05);
  29. -webkit-transform: scale(1.05);
  30. box-shadow: 0 0 20px #888;
  31. background-color: #fff;
  32. }
  33. .simpleCart_items img {
  34. max-width: 64px;
  35. max-height: 64px;
  36. }
  37. .item-quantity, .item-decrement, .item-increment {
  38. text-align: center;
  39. }
  40. .mix {
  41. display: none;
  42. }
  43. .res {
  44. width: 55%;
  45. heigh: 55%;
  46. }
  47. img.res {
  48. transition: filter .5s;
  49. position:relative;
  50. }
  51. a.btn-gallery:hover > img.res {
  52. filter: brightness(50%);
  53. }
  54. a.btn-gallery > i {
  55. position: absolute;
  56. display: none;
  57. left: 43%;
  58. top: 50%;
  59. z-index: 100;
  60. margin: auto;
  61. text-decoration: none;
  62. color: white;
  63. font-size: 35px;
  64. font-weight: bold;
  65. letter-spacing: 1px;
  66. }
  67. a.btn-gallery:hover > i
  68. {
  69. display: block;
  70. }
  71. .hidden {
  72. overflow: hidden;
  73. display: none;
  74. visibility: hidden;
  75. }
  76. </style>
  77. <script>
  78. $(document).ready(function() {
  79.  
  80. $('a.btn-gallery').on('click', function(event) {
  81. event.preventDefault();
  82.  
  83. var gallery = $(this).attr('href');
  84.  
  85. $(gallery).magnificPopup({
  86. delegate: 'a',
  87. type:'image',
  88. gallery: {
  89. enabled: true
  90. }
  91. }).magnificPopup('open');
  92. });
  93.  
  94. });
  95.  
  96. </script>
  97. <script>
  98. $(document).ready(function(){
  99. $("#myInput").on("keyup", function() {
  100. var value = $(this).val().toLowerCase();
  101. $("#myTable span").filter(function() {
  102. $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  103. });
  104. });
  105. });
  106. </script>
  107. <!-- jQuery (necessary for Bootstrap's JavaScript plugins)-->
  108. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  109. <!-- Include all compiled plugins (below), or include individual files as needed -->
  110. <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  111. <script src="js/simpleCart.js"></script>
  112. <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.2"></script>
  113. <script>
  114. simpleCart({
  115. // array representing the format and columns of the cart,
  116. // see the cart columns documentation
  117. cartColumns: [
  118. { attr: "name", label: "Produkt"},
  119. { view: "currency", attr: "price", label: "Cena"},
  120. { view: "decrement", label: false, text: '<span class="glyphicon glyphicon-minus"></span>'},
  121. { attr: "quantity", label: "Ilość"},
  122. { view: "increment", label: false, text: '<span class="glyphicon glyphicon-plus"></span>'},
  123. { view: "currency", attr: "total", label: "Razem" },
  124. { view: "remove", text: '<span class="glyphicon glyphicon-remove"></span>', label: false}
  125. ],
  126.  
  127. // "div" or "table" - builds the cart as a
  128. // table or collection of divs
  129. cartStyle: "table",
  130.  
  131. // how simpleCart should checkout, see the
  132. // checkout reference for more info
  133. checkout: {
  134. type: "PayPal" ,
  135. email: "poczta@adrianbienias.pl"
  136. },
  137.  
  138. // set the currency, see the currency
  139. // reference for more info
  140. currency: "PLN",
  141.  
  142. // collection of arbitrary data you may want to store
  143. // with the cart, such as customer info
  144. data: {},
  145.  
  146. // set the cart langauge
  147. // (may be used for checkout)
  148. language: "polish-pl",
  149.  
  150. // array of item fields that will not be
  151. // sent to checkout
  152. excludeFromCheckout: [],
  153.  
  154. // custom function to add shipping cost
  155. shippingCustom: null,
  156.  
  157. // flat rate shipping option
  158. shippingFlatRate: 15,
  159.  
  160. // added shipping based on this value
  161. // multiplied by the cart quantity
  162. shippingQuantityRate: 0,
  163.  
  164. // added shipping based on this value
  165. // multiplied by the cart subtotal
  166. shippingTotalRate: 0,
  167.  
  168. // tax rate applied to cart subtotal
  169. taxRate: 0,
  170.  
  171. // true if tax should be applied to shipping
  172. taxShipping: false,
  173.  
  174. // event callbacks
  175. beforeAdd : null,
  176. afterAdd : null,
  177. load : null,
  178. beforeSave : null,
  179. afterSave : null,
  180. update : null,
  181. ready : null,
  182. checkoutSuccess : null,
  183. checkoutFail : null,
  184. beforeCheckout : null,
  185. beforeRemove : null
  186. });
  187.  
  188. // basic callback example
  189. simpleCart.bind( "afterAdd" , function(){
  190. $( ".koszyk" ).fadeOut(500).fadeIn(500);
  191. });
  192.  
  193. simpleCart.bind( 'update' , function(){
  194. if (simpleCart.quantity() == 0)
  195. {
  196. $( ".hideIfEmpty" ).hide();
  197. $( ".showIfEmpty" ).show();
  198. }
  199. else
  200. {
  201. $( ".hideIfEmpty" ).show();
  202. $( ".showIfEmpty" ).hide();
  203. }
  204. });
  205.  
  206.  
  207. $(function(){
  208. $('#Container').mixItUp();
  209. });
  210. </script>
  211.  
  212. </head>
  213. <body>
  214. <div class="container">
  215. <div class="row">
  216. <div class="col-sm-12">
  217. <nav class="navbar navbar-default" role="navigation">
  218. <div class="container-fluid">
  219. <div class="navbar-header">
  220. <a class="navbar-brand" href="#">Souvernir One</a>
  221. </div>
  222. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  223. <ul class="nav navbar-nav navbar-right">
  224. <li class="koszyk"><a href="#" data-toggle="modal" data-target="#myModal">Koszyk (<span class="simpleCart_quantity"></span>)</a></li>
  225. </ul>
  226. </div>
  227. <!-- /.navbar-collapse -->
  228. </div>
  229. <!-- /.container-fluid -->
  230. </nav>
  231. <label>Kategoria:</label>
  232. <div class="controls btn-group">
  233. <div style="float:left;">
  234. <button class="btn btn-default filter" type="button" data-filter=".all">Wszystko </button>
  235. </div>
  236. <div class="dropdown" style="float:left;margin-left: 7px;">
  237. <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">Komunia <span class="caret"></span></button>
  238. <ul class="dropdown-menu">
  239. <li><button class="filter btn btn-link" data-filter=".Komunia_ch">Chłopiec</button></li>
  240. <li><button class="filter btn btn-link" data-filter=".Komunia_dz">Dziewczynka</button></li>
  241. <li><button class="filter btn btn-link" data-filter=".Aniol">Anioł</button></li>
  242. </ul>
  243. </div>
  244. <div class="dropdown" style="float:left;">
  245. <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">Chrzest <span class="caret"></span></button>
  246. <ul class="dropdown-menu">
  247. <li><button class="filter btn btn-link" data-filter=".Dziecko">Dzieciątko</button></li>
  248. <li><button class="filter btn btn-link" data-filter=".Aniol_chrzest">Anioł</button></li>
  249. </ul>
  250. </div>
  251. <div class="dropdown" style="float:left;">
  252. <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">Dewocjonalia <span class="caret"></span></button>
  253. <ul class="dropdown-menu">
  254. <li><button class="filter btn btn-link" data-filter=".Swieci">Święci</button></li>
  255. <li><button class="filter btn btn-link" data-filter=".Maryja">Matka Boska</button></li>
  256. </ul>
  257. </div>
  258. </div>
  259. <p>&nbsp;</p>
  260. </div>
  261. <!-- /col-sm-12 -->
  262. </div>
  263. <!-- /row -->
  264. </div>
  265. <!-- /container -->
  266. <!-- Modal -->
  267. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  268. <div class="modal-dialog">
  269. <div class="modal-content">
  270. <div class="modal-header">
  271. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  272. <h4 class="modal-title" id="myModalLabel">Koszyk <span class="showIfEmpty">jest pusty</span></h4>
  273. </div>
  274. <div class="hideIfEmpty">
  275. <div class="modal-body">
  276. <div class="simpleCart_items"></div>
  277. <table class="table table-striped">
  278. <thead>
  279. <tr>
  280. <th>Łącznie</th>
  281. <th>Koszty przesyłki</th>
  282. <th>Do zapłaty</th>
  283. </tr>
  284. </thead>
  285. <tbody>
  286. <tr>
  287. <td>
  288. <div class="simpleCart_total"></div>
  289. </td>
  290. <td>
  291. <div class="simpleCart_shipping"></div>
  292. </td>
  293. <td>
  294. <div class="simpleCart_grandTotal"></div>
  295. </td>
  296. </tr>
  297. </tbody>
  298. </table>
  299. </div>
  300. <!-- /modal-body -->
  301. <div class="modal-footer">
  302. <!-- button to empty the cart -->
  303. <a href="javascript:;" class="simpleCart_empty btn btn-default">Opróżnij koszyk</a>
  304. <!-- create a checkout button -->
  305. <a href="javascript:;" class="simpleCart_checkout btn btn-primary">Złóż zamówienie</a>
  306. </div>
  307. <!-- /modal-footer -->
  308. </div>
  309. <!-- /hideIfEmpty -->
  310. </div>
  311. <!-- /modal-content -->
  312. </div>
  313. <!-- /modal-dialog -->
  314. </div>
  315. <!-- /modal -->
  316. <div id="Container" class="container">
  317. <input class="form-control" id="myInput" type="text" placeholder="Search..">
  318. <div class="row" id="myTable">
  319. <span>
  320. <div class="col-md-4 text-center mix Aniol_chrzest all" data-price="29.95">
  321. <div class="simpleCart_shelfItem">
  322. <div class="row">
  323. <div class="col-xs-12" >
  324. <h2 class="item_name">Anioł - a101s1</h2>
  325. <a href="#gallery-1" onMouseOver="this.style.cursor='pointer'" class="btn-gallery">
  326. <i class="icon-search"></i>
  327. <img class="res" src="img/a101s1.jpg" alt="">
  328. </a>
  329. </div>
  330. </div>
  331. <!-- /row -->
  332. <div class="row">
  333. <div class="col-xs-12">
  334. <h2 class="item_price">29.95 zł</h2>
  335. </div>
  336. </div>
  337. <!-- /row -->
  338. <div class="row">
  339. <div class="col-xs-4">
  340. </div>
  341. <div class="col-xs-3">
  342. <input type="text" value="1" class="item_Quantity form-control" placeholder="ilość">
  343. </div>
  344. <div class="col-xs-5">
  345. <input type="button" class="item_add btn btn-primary" value="Do koszyka">
  346. </div>
  347. </div>
  348. <!-- /row -->
  349. </div>
  350. <!-- /simpleCart_shelfItem -->
  351. </div>
  352. <!-- /col-md-4 -->
  353. </span>
  354. <span>
  355. <div class="col-md-4 text-center mix Aniol_chrzest all" data-price="29.95">
  356. <div class="simpleCart_shelfItem">
  357. <div class="row">
  358. <div class="col-xs-12">
  359. <h2 class="item_name" >Anioł - a101o1</h2>
  360. <a onMouseOver="this.style.cursor='pointer'" class="btn-gallery">
  361. <i class="icon-search"></i>
  362. <img class="res" src="img/a101o1.jpg" alt="">
  363. </a>
  364. </div>
  365. </div>
  366. <!-- /row -->
  367. <div class="row">
  368. <div class="col-xs-12" >
  369. <h2 class="item_price">29.95 zł</h2>
  370. </div>
  371. </div>
  372. <!-- /row -->
  373. <div class="row">
  374. <div class="col-xs-4">
  375. </div>
  376. <div class="col-xs-3">
  377. <input type="text" value="1" class="item_Quantity form-control" placeholder="ilość">
  378. </div>
  379. <div class="col-xs-5">
  380. <input type="button" class="item_add btn btn-primary" value="Do koszyka">
  381. </div>
  382. </div>
  383. <!-- /row -->
  384. </div>
  385. <!-- /simpleCart_shelfItem -->
  386. </div>
  387. <!-- /col-md-4 -->
  388. </span>
  389. <span>
  390. <div class="col-md-4 text-center mix Komunia_dz all" data-price="29.95">
  391. <div class="simpleCart_shelfItem">
  392. <div class="row">
  393. <div class="col-xs-12">
  394. <h2 class="item_name" >Komunia - k103g1</h2>
  395. <a onMouseOver="this.style.cursor='pointer'" class="btn-gallery">
  396. <i class="icon-search"></i>
  397. <img class="res"src="img/k103g1.jpg" alt="">
  398. </a>
  399. </div>
  400. </div>
  401. <!-- /row -->
  402. <div class="row">
  403. <div class="col-xs-12">
  404. <h2 class="item_price">29.95 zł</h2>
  405. </div>
  406. </div>
  407. <!-- /row -->
  408. <div class="row">
  409. <div class="col-xs-4">
  410. </div>
  411. <div class="col-xs-3">
  412. <input type="text" value="1" class="item_Quantity form-control" placeholder="ilość">
  413. </div>
  414. <div class="col-xs-5">
  415. <input type="button" class="item_add btn btn-primary" value="Do koszyka">
  416. </div>
  417. </div>
  418. <!-- /row -->
  419. </div>
  420. <!-- /simpleCart_shelfItem -->
  421. </div>
  422. <!-- /col-md-4 -->
  423. </span>
  424. </div>
  425. <!-- /row -->
  426. </div>
  427. <!-- /container -->
  428.  
  429. <div id="gallery-1" class="hidden">
  430. <a href="https://images.unsplash.com/photo-1462774603919-1d8087e62cad?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=0ebd884b4d6ac379f42146a2b26fbf2e">Image 1</a>
  431. <a href="https://images.unsplash.com/photo-1460499593944-39e14f96a8c6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=d8bc3d45d5eeaaf4f576665707f4fddb">Image 2</a>
  432. <a href="https://images.unsplash.com/photo-1434434319959-1f886517e1fe?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=218dfdd2c0735dbd6ca0f718064a748b">Image 3</a>
  433. <a href="https://images.unsplash.com/photo-1431576901776-e539bd916ba2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=a0941b28175909ca62f096eb533b0c97">Image 4</a>
  434. </div>
  435. </body>
  436. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!