API tools faq
paste
Advertisement
ayand04

fadein and fadeout

ayand04
Jun 24th, 2016
158
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.28 KB | None | 0 0
raw download clone embed print report
  1. //ACCOUNT.PHP FILE
  2.  
  3. <?php
  4. //include('./assets/connect.php');
  5. include('./assets/mealofday.php');
  6. //include('./assets/listproducts.php');
  7. ?>
  8. <!doctype html>
  9. <html>
  10. <head>
  11. <meta charset="utf-8">
  12. <title>Hungry | Order Online</title>
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14. <link href="css/global.css" rel="stylesheet">
  15. <link href="css/header.css" rel="stylesheet">
  16. <link href="css/account.css" rel="stylesheet">
  17. <!----- UNDER DEVELOPMENT ------------>
  18. <link rel="stylesheet" href="css/panelstyle.css">
  19. <!-------------------------------------->
  20. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
  21. <link href='https://fonts.googleapis.com/css?family=Rancho|Gudea' rel='stylesheet' type='text/css'>
  22. <script src="js/jquery-1.11.3.min.js"></script>
  23. <script src="js/scroll_stick.js"></script>
  24. <script type="text/javascript">
  25. $(document).ready(function(){
  26. $('body').on('click', '.category', function(){
  27. var category = $(this).data('categories');
  28. //alert(category);
  29. $('.category').fadeOut(300);
  30. $.ajax({
  31. type: "POST",
  32. url: "./assets/listproducts.php",
  33. data: {cat: category},
  34. cache: false,
  35. success: function(response){
  36. //console.log(response);
  37. $('#nav').html('Back').addClass('back');
  38. $('.items').html(response).delay(400).fadeIn(300);
  39. }
  40. });
  41. });
  42.  
  43. $('#action_bar').on('click', '.back', function(e){
  44. e.preventDefault();
  45. //alert('click');
  46. $('.items').fadeOut(300);
  47. $('.category').delay(400).fadeIn(300);
  48. $('#nav').html('CATEGORIES').removeClass();
  49. });
  50. });
  51. </script>
  52. </head>
  53.  
  54. <body>
  55. <?php include('./includes/header.php'); ?>
  56.  
  57. <div id="greetings_container">
  58. <div id="greeting_line">Hi<br>USER,</div>
  59. <div id="meal_time"><span><?php echo $message; ?></span></div>
  60. <div id="down_arrow"><i class="fa fa-angle-double-down fa-lg" aria-hidden="true"></i></div>
  61. </div>
  62.  
  63. <div id="sticky-anchor"></div>
  64. <div id="action_bar">
  65. <div id="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i><div class="total">20</div></div>
  66. <a id="nav">CATEGORIES</a>
  67. <div id="filter"><i class="fa fa-filter" aria-hidden="true"></i><div class="total">1</div></div>
  68. </div>
  69.  
  70. <div id="main_container">
  71. <div id="coupon">
  72. <div id="left_content">
  73. <div id="coupon_heading">COUPON&nbsp;&#9733;&#9733;&#9733; </div>
  74. <div id="coupon_text">USE <strong><i>NEW20</i></strong> TO GET AN ADDITIONAL 20% OFF</div>
  75. </div>
  76. <div id="right_content">
  77. <div id="exclamation">OPENING<br>SALE</div>
  78. </div>
  79. </div>
  80.  
  81.  
  82. <div id="content">
  83. <div id="category1" class="category" data-categories="SPL">
  84. <img src="images/c_w.png"><div class="category_description">Chef's Special</div>
  85. </div>
  86.  
  87. <div id="category2" class="category" data-categories="LCH">
  88. <img src="images/l_w.png"><div class="category_description">Lunch</div>
  89. </div>
  90.  
  91. <div id="category3" class="category" data-categories="SNK">
  92. <img src="images/s_w.png"><div class="category_description">Snacks</div>
  93. </div>
  94.  
  95. <div id="category4" class="category" data-categories="DNR">
  96. <img src="images/d_w.png"><div class="category_description">Dinner</div>
  97. </div>
  98. <ul class="items">
  99. <!-- Menu List -->
  100. </ul>
  101. </div>
  102. </div>
  103.  
  104.  
  105.  
  106.  
  107.  
  108.  
  109.  
  110.  
  111. <!----------------------------------------- UNDER CONSTRUCTION STARTS -------------------------------------------------------->
  112.  
  113.  
  114. <div class="cd-panel from-right">
  115. <header class="cd-panel-header">
  116. <h1>Your Cart</h1>
  117. <a href="#0" class="cd-panel-close">Close</a>
  118. </header>
  119.  
  120. <div class="cd-panel-container">
  121. <div class="cd-panel-content">
  122. <p>TEXT HERE</p>
  123. </div> <!-- cd-panel-content -->
  124. </div> <!-- cd-panel-container -->
  125. </div> <!-- cd-panel -->
  126.  
  127.  
  128. <!----------------------------------------- UNDER CONSTRUCTION ENDS -------------------------------------------------------->
  129. </div>
  130. <!-- UNDER CONSTRUCTION ---->
  131. <script src="js/main.js"></script>
  132. <!-------------------------->
  133. </body>
  134. </html>
  135.  
  136.  
  137.  
  138.  
  139. //listproducts.php
  140.  
  141. <?php
  142. include('./connect.php');
  143. $list = '';
  144. $data = array();
  145. if($_POST['cat']){
  146. $filter = $_POST['cat'];
  147. //echo ($filter);
  148. //die();
  149. $sql = "SELECT * FROM menucard WHERE itemcategory='".$filter."'";
  150. $result = mysqli_query($db, $sql);
  151. while($row=mysqli_fetch_array($result)){
  152. $data[] = $row;
  153. }
  154.  
  155. //<?php
  156. foreach($data as $item_details){
  157. /*?>*/
  158. $list.='<li>
  159. <img src="'.$item_details['itemimage'].'">
  160. <div class="right_content">
  161. <h4>'.$item_details['itemname'].'</h4>
  162. <div class="inner_left">
  163. <div class="type">'.$item_details['itemtype'].'</div>
  164. <div class="serves">Serves: '.$item_details['itemserving'].'</div>
  165. <div class="quantity">Qty: <input class="qty" type="number" min="1" value="1"></div>
  166. </div>
  167. <div class="inner_right">
  168. <div class="price">&#8377;&nbsp;'.$item_details['itemprice'].'/-</div>
  169. <button class="add_to_cart" type="button"><i class="fa fa-cart-plus" aria-hidden="true">&nbsp;YUM</i></button>
  170. </div>
  171. </div>
  172. </li>';
  173. /*<?php*/
  174. } /*?>*/
  175.  
  176. if($list == ''){
  177. echo ('We dont have any items under this category!');
  178. }
  179. else{
  180. echo ($list);
  181. }
  182. }
  183. ?>
  184.  
  185.  
  186.  
  187.  
  188. //ACCOUNT.CSS
  189.  
  190. @charset "utf-8";
  191. /* CSS Document */
  192. .stick {
  193. margin-top: 0 !important;
  194. position: fixed;
  195. width:100%;
  196. top: 0;
  197. z-index: 200;
  198. }
  199. /* Animation for the down arrow */
  200. @-webkit-keyframes transform-bounch
  201. {
  202. 0% { -webkit-transform: rotate(0deg); }
  203. 20% { -webkit-transform: rotate(0deg); }
  204. 40% { -webkit-transform: rotate(0deg) translate(0px,-30px); }
  205. 50% { -webkit-transform: rotate(0deg) translate(0px,0px); }
  206. 60% { -webkit-transform: rotate(0deg) translate(0px,-15px); }
  207. 80% { -webkit-transform: rotate(0deg) translate(0px,0px); }
  208. 100% { -webkit-transform: rotate(0deg) translate(0px,0px); }
  209. }
  210. @-moz-keyframes transform-bounch
  211. {
  212. 0% { -moz-transform: rotate(0deg); }
  213. 20% { -moz-transform: rotate(0deg); }
  214. 40% { -moz-transform: rotate(0deg) translate(0px,-30px); }
  215. 50% { -moz-transform: rotate(0deg) translate(0px,0px); }
  216. 60% { -moz-transform: rotate(0deg) translate(0px,-15px); }
  217. 80% { -moz-transform: rotate(0deg) translate(0px,0px); }
  218. 100% { -moz-transform: rotate(0deg) translate(0px,0px); }
  219. }
  220. @-o-keyframes transform-bounch
  221. {
  222. 0% { -o-transform: rotate(0deg); }
  223. 20% { -o-transform: rotate(0deg); }
  224. 40% { -o-transform: rotate(0deg) translate(0px,-30px); }
  225. 50% { -o-transform: rotate(0deg) translate(0px,0px); }
  226. 60% { -o-transform: rotate(0deg) translate(0px,-15px); }
  227. 80% { -o-transform: rotate(0deg) translate(0px,0px); }
  228. 100% { -o-transform: rotate(0deg) translate(0px,0px); }
  229. }
  230. @-ms-keyframes transform-bounch
  231. {
  232. 0% { -ms-transform: rotate(0deg); }
  233. 20% { -ms-transform: rotate(0deg); }
  234. 40% { -ms-transform: rotate(0deg) translate(0px,-30px); }
  235. 50% { -ms-transform: rotate(0deg) translate(0px,0px); }
  236. 60% { -ms-transform: rotate(0deg) translate(0px,-15px); }
  237. 80% { -ms-transform: rotate(0deg) translate(0px,0px); }
  238. 100% { -ms-transform: rotate(0deg) translate(0px,0px); }
  239. }
  240. @keyframes transform-bounch
  241. {
  242. 0% { transform: rotate(0deg); }
  243. 20% { transform: rotate(0deg); }
  244. 40% { transform: rotate(0deg) translate(0px,-30px); }
  245. 50% { transform: rotate(0deg) translate(0px,0px); }
  246. 60% { transform: rotate(0deg) translate(0px,-15px); }
  247. 80% { transform: rotate(0deg) translate(0px,0px); }
  248. 100% { transform: rotate(0deg) translate(0px,0px); }
  249. }
  250.  
  251. /*------------------------- END ANIMATION ----------------------------*/
  252.  
  253. html, body
  254. {
  255. height:100%;
  256. }
  257. #greetings_container
  258. {
  259. background-color: hsla(0,5%,52%,1.00);
  260. background-image: url(../images/bg1.jpg);
  261. background-repeat: no-repeat;
  262. background-position: center center;
  263. background-size: cover;
  264. width:100%;
  265. height:calc(100% - 65px);
  266. word-wrap:break-word;
  267.  
  268. }
  269. #greeting_line
  270. {
  271. text-align:center;
  272. color:#FFFFFF;
  273. font-size:95px;
  274. font-family: 'Rancho', cursive;
  275. padding-top:10%;
  276. padding-left:20px;
  277. padding-right:20px;
  278. margin-bottom:25px;
  279. }
  280.  
  281. #meal_time
  282. {
  283. background-color: #ED734F;
  284. text-align:center;
  285. color:#FFFFFF;
  286. font-size:35px;
  287. font-family: 'Gudea', sans-serif;
  288. border-radius:35px;
  289. margin-left:30%;
  290. margin-right:30%;
  291. word-wrap:break-word;
  292. padding:3px;
  293. }
  294. #down_arrow
  295. {
  296. color:#FFFFFF;
  297. font-size:36px;
  298. text-align:center;
  299. position: absolute;
  300. bottom:20px;
  301. width:100%;
  302. -webkit-animation: transform-bounch 2500ms linear 1000ms infinite normal;
  303. -moz-animation: transform-bounch 2500ms linear 1000ms infinite normal;
  304. animation: transform-bounch 2500ms linear 1000ms infinite normal;
  305. }
  306. #action_bar
  307. {
  308. background-color:#FFFFFF;
  309. color:#20AC76;
  310. clear:both;
  311. overflow:hidden;
  312. width:100%;
  313. text-align:center;
  314. font-family:'Rancho', cursive;
  315. font-size:24px;
  316. }
  317. #nav
  318. {
  319. color:#20AC76;
  320. padding: 10px;
  321. display: inline-block;
  322. }
  323. #cart
  324. {
  325. right:0;
  326. width:15%;
  327. height:10%;
  328. background-color:#20AC76;
  329. color:#FFFFFF;
  330. padding:10px;
  331. float:right;
  332. border:#1C9767 1px solid;
  333. font-size:22px;
  334. text-align:left;
  335. }
  336. .fa fa-shopping-cart
  337. {
  338. float:left;
  339. }
  340. .total
  341. {
  342. float:right;
  343. text-align:center;
  344. border-radius:50%;
  345. -moz-border-radius:50%;
  346. -webkit-border-radius:50%;
  347. background-color:#FFFFFF;
  348. color:#20AC76;
  349. min-width:20px;
  350. height:20px;
  351. font-size:1rem;
  352. padding:2px;
  353. font-family:'Source Sans Pro', sans-serif;
  354. }
  355. #cart:after
  356. {
  357. content:' Cart';
  358. }
  359. .category
  360. {
  361. width:100%;
  362. overflow:hidden;
  363. }
  364. .category_description
  365. {
  366. color:#FFFFFF;
  367. font-family: 'Rancho', cursive;
  368. }
  369. #category1
  370. {
  371. background-color:#2A6B0F;
  372. }
  373. #category2
  374. {
  375. background-color:#A43F12;
  376. }
  377. #category3
  378. {
  379. background-color: #B49B30;
  380. }
  381. #category4
  382. {
  383. background-color: #326FAF;
  384. }
  385. ul.items
  386. {
  387. padding:0;
  388. margin:0;
  389. display:none;
  390. }
  391. .hide
  392. {
  393. display:none;
  394. }
  395. .show
  396. {
  397. display:block;
  398. }
  399. @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait)
  400. {
  401. #greeting_line
  402. {
  403. text-align:center;
  404. color:#FFFFFF;
  405. font-size:78px;
  406. font-family: 'Rancho', cursive;
  407. padding-top:20%;
  408. padding-left:20px;
  409. padding-right:20px;
  410. margin-bottom:25px;
  411. }
  412. #meal_time
  413. {
  414. background-color: #ED734F;
  415. text-align:center;
  416. color:#FFFFFF;
  417. font-size:35px;
  418. font-family: 'Gudea', sans-serif;
  419. border-radius:35px;
  420. margin-left:15%;
  421. margin-right:15%;
  422. word-wrap:break-word;
  423. padding:3px;
  424. }
  425. #filter
  426. {
  427. width:20%;
  428. height:10%;
  429. background-color:#20AC76;
  430. color:#FFFFFF;
  431. padding:10px;
  432. border:#1C9767 1px solid;
  433. font-size:22px;
  434. text-align:center;
  435. float:left;
  436. }
  437. #cart
  438. {
  439. right:0;
  440. width:20%;
  441. height:10%;
  442. background-color:#20AC76;
  443. color:#FFFFFF;
  444. padding:10px;
  445. float:right;
  446. border:#1C9767 1px solid;
  447. font-size:22px;
  448. text-align:center;
  449. }
  450. #cart:after
  451. {
  452. content: normal;
  453. }
  454. .total
  455. {
  456. min-width: 20px;
  457. height: 20px;
  458. font-size: 1rem;
  459. margin-right: 7%;
  460. margin-top:2px;
  461. }
  462. #main_container
  463. {
  464. width:100%;
  465. }
  466. #coupon
  467. {
  468. margin:2px;
  469. color:#FFFFFF;
  470. background-color:#CC787A;
  471. display:inline-block;
  472. border: solid 2px #6E393A;
  473. box-sizing:border-box;
  474. width:calc(100% - 4px);
  475. clear:both;
  476. }
  477. #left_content
  478. {
  479. width:55%;
  480. border-right: dashed 2px #6E393A;
  481. float:left;
  482. word-wrap:break-word;
  483. padding-top:5%;
  484. padding-bottom:4%;
  485. padding-left:10px;
  486. padding-right:6px;
  487. }
  488. #right_content
  489. {
  490. width:33%;
  491. float:left;
  492. font-size:20px;
  493. word-wrap:break-word;
  494. padding-left:6px;
  495. padding-right:10px;
  496. padding-top:5%;
  497. padding-bottom:4%;
  498. }
  499. #coupon_heading
  500. {
  501. font-family: 'Gudea', sans-serif;
  502. font-size:22px;
  503. font-weight:bold;
  504. }
  505. #coupon_text
  506. {
  507. font-family: 'Gudea', sans-serif;
  508. font-size: 14px;
  509. color:#6E393A;
  510. }
  511. #exclamation
  512. {
  513. font-weight:bold;
  514. text-align: center;
  515. }
  516. #content
  517. {
  518. font-size:18px;
  519. text-align:left;
  520. }
  521. ul.items li
  522. {
  523. width:100%;
  524. display:inline-block;
  525. *display:inline;
  526. *zoom:1;
  527. margin-bottom:3px;
  528. border-bottom:#C4C3C3 1px solid;
  529. box-shadow:0px 1px 3px #C4C3C3;
  530. padding-bottom:5px;
  531. background-color:#FFFFFF;
  532. }
  533. .right_content
  534. {
  535. float:right;
  536. color:#000000;
  537. width:65%;
  538. }
  539. ul.items li img
  540. {
  541. width:30%;
  542. height:30%;
  543. float:left;
  544. padding:5px;
  545. }
  546. .inner_left
  547. {
  548. float:left;
  549. width:45%;
  550. }
  551. .inner_right
  552. {
  553. float:right;
  554. width:55%;
  555. text-align:right;
  556. }
  557. .price
  558. {
  559. text-align:right;
  560. font-size:28px;
  561. padding-right:10px;
  562. }
  563. .qty
  564. {
  565. width:40%;
  566. text-align:center;
  567. }
  568. .add_to_cart
  569. {
  570. width:90%;
  571. margin-right:5px;
  572. background-color:#20AC76;
  573. border:#1C9767 1px solid;
  574. color:#FFFFFF;
  575. font-size:20px;
  576. padding:3px;
  577. font-family: 'Gudea', sans-serif;
  578. }
  579. .category img
  580. {
  581. width:17%;
  582. padding:3%;
  583. float:left;
  584. display:inline-block;
  585. }
  586. .category_description
  587. {
  588. font-size:50px;
  589. padding:3%;
  590. }
  591. }
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!