├── .gitattributes ├── img ├── img1.png ├── img2.png ├── img3.png └── img4.png ├── README.md ├── css ├── orderPlaced.css ├── cart.css ├── footer.css ├── content.css ├── contetDetails.css └── header.css ├── orderPlaced.js ├── content.html ├── contentDetails.html ├── cart.html ├── orderPlaced.html ├── header.html ├── footer.html ├── slider.html ├── content.js ├── index.html ├── cart.js ├── contentDetails.js └── js └── jQuery3.4.1.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /img/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Crypto27dev/bag_eCommerce/HEAD/img/img1.png -------------------------------------------------------------------------------- /img/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Crypto27dev/bag_eCommerce/HEAD/img/img2.png -------------------------------------------------------------------------------- /img/img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Crypto27dev/bag_eCommerce/HEAD/img/img3.png -------------------------------------------------------------------------------- /img/img4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Crypto27dev/bag_eCommerce/HEAD/img/img4.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # E-CommerceWebsite 2 | A mobile responsive sample of E-Commerce Website using HTML, CSS, JavaScript and API's 3 | 4 | 5 | 6 | ### Home page 7 | ![1](https://user-images.githubusercontent.com/17312616/65086776-b1beb080-d9d0-11e9-9983-143d61ed8fdc.png) 8 | 9 | 10 | 11 | ### Content Description page 12 | ![2](https://user-images.githubusercontent.com/17312616/65086777-b1beb080-d9d0-11e9-9e2b-af3b7210bdf3.png) 13 | 14 | 15 | 16 | ### Ordered List page 17 | ![3](https://user-images.githubusercontent.com/17312616/65086778-b2574700-d9d0-11e9-9377-8e4886f582a8.png) 18 | 19 | 20 | 21 | ### Order confirm page 22 | ![4](https://user-images.githubusercontent.com/17312616/65086779-b2efdd80-d9d0-11e9-95d5-4b1a48eafe04.png) 23 | -------------------------------------------------------------------------------- /css/orderPlaced.css: -------------------------------------------------------------------------------- 1 | 2 | #orderContainer 3 | { 4 | font-family: 'Lato', sans-serif; 5 | width: 80%; 6 | padding-top: 250px; 7 | padding-bottom: 150px; 8 | margin: auto; 9 | text-align: center; 10 | } 11 | #orderContainer i 12 | { 13 | color: rgb(5, 187, 5); 14 | padding-bottom: 30px; 15 | font-size: 10em; 16 | } 17 | #aboutCheck p 18 | { 19 | font-weight: 100; 20 | letter-spacing: 1px; 21 | } 22 | #aboutCheck h1 23 | { 24 | letter-spacing: 1px; 25 | word-spacing: 1px; 26 | } 27 | 28 | /* ----------------------------- MEDIA QUERY --------------------------- */ 29 | 30 | @media(max-width: 700px) 31 | { 32 | #orderContainer i 33 | { 34 | font-size: 8em; 35 | padding-bottom: 30px; 36 | } 37 | h1 38 | { 39 | font-size: 18px; 40 | } 41 | p 42 | { 43 | font-size: 15px; 44 | } 45 | } -------------------------------------------------------------------------------- /orderPlaced.js: -------------------------------------------------------------------------------- 1 | document.cookie = "orderId="+0 +",counter="+0 2 | 3 | let httpRequest = new XMLHttpRequest(), 4 | jsonArray, 5 | method = "GET", 6 | jsonRequestURL = "https://5d76bf96515d1a0014085cf9.mockapi.io/order"; 7 | 8 | httpRequest.open(method, jsonRequestURL, true); 9 | httpRequest.onreadystatechange = function() 10 | { 11 | if(httpRequest.readyState == 4 && httpRequest.status == 200) 12 | { 13 | // convert JSON into JavaScript object 14 | jsonArray = JSON.parse(httpRequest.responseText) 15 | console.log(jsonArray) 16 | jsonArray.push( 17 | { 18 | "id": (jsonArray.length)+1, "amount": 200,"product":["userOrder"] 19 | }) 20 | 21 | // send with new request the updated JSON file to the server: 22 | httpRequest.open("POST", jsonRequestURL, true) 23 | httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") 24 | httpRequest.send(jsonArray) 25 | } 26 | } 27 | httpRequest.send(null); 28 | -------------------------------------------------------------------------------- /content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CONTENT | E-COMMERCE WEBSITE BY EDYODA 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |

clothing for men and women

19 |
20 | 21 |
22 | 23 |

accessories for men and women

24 |
25 | 26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /contentDetails.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CONTENT DETAILS | E-COMMERCE WEBSITE BY EDYODA 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 32 | 33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 |
41 | 51 | 52 | -------------------------------------------------------------------------------- /cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cart | E-COMMERCE WEBSITE BY EDYODA 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 29 | 30 | 31 |
32 |

Checkout

33 |

Total Items: 0

34 | 35 |
36 | 37 |
38 | 39 |
40 | 41 | 42 | 43 |
44 | 54 | 55 | -------------------------------------------------------------------------------- /orderPlaced.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ORDER PLACED | E-COMMERCE WEBSITE BY EDYODA 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 29 | 30 | 31 |
32 |
33 | 34 |
35 |

Order Placed Successfully!

36 |

We've sent you an email with the Order details.

37 |
38 |
39 | 40 |
41 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HEADER | E-COMMERCE WEBSITE 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 |
21 | 22 | 23 | 24 | 28 | 29 | 33 | 34 |
35 |
0
36 | 37 |
38 |
39 | 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FOOTER | E-COMMERCE WEBSITE BY EDYODA 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /css/cart.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | margin: 0; 4 | font-family: 'Lato', sans-serif; 5 | } 6 | #cartMainContainer 7 | { 8 | padding: 90px 50px; 9 | } 10 | #cartContainer 11 | { 12 | display: grid; 13 | grid-template-columns: 1fr 1fr; 14 | grid-gap: 20px; 15 | } 16 | img 17 | { 18 | width: 80px; 19 | float: left; 20 | border-radius: 10px; 21 | margin-right: 50px; 22 | } 23 | #boxContainer 24 | { 25 | display: grid; 26 | grid-gap: 20px; 27 | padding: 20px; 28 | width: 100%; 29 | /* float: left; */ 30 | } 31 | #box 32 | { 33 | background-color: white; 34 | box-shadow: 1px 2px 6px 2px rgb(219, 219, 219); 35 | border-radius: 10px; 36 | width: 100%; 37 | /* margin: auto */ 38 | padding: 20px 10px; 39 | } 40 | #box:hover 41 | { 42 | box-shadow: 0px 1px 3px 2px rgb(185, 185, 185); 43 | } 44 | #totalContainer 45 | { 46 | width: 50%; 47 | padding: 20px; 48 | margin: auto; 49 | background-color: white; 50 | border-radius: 10px; 51 | box-shadow: 1px 2px 6px 2px rgb(219, 219, 219); 52 | } 53 | #totalContainer:hover 54 | { 55 | box-shadow: 0px 1px 3px 2px rgb(185, 185, 185); 56 | } 57 | button 58 | { 59 | padding: 8px 12px; 60 | background-color: rgb(3, 122, 122); 61 | border: none; 62 | border-radius: 5px; 63 | cursor: pointer; 64 | } 65 | button a 66 | { 67 | text-decoration: none; 68 | color: white; 69 | font-size: 15px; 70 | } 71 | button:hover 72 | { 73 | background-color: rgb(3, 94, 94); 74 | } 75 | button a:focus 76 | { 77 | outline: none; 78 | } 79 | 80 | /* ----------------------------- MEDIA QUERY --------------------------- */ 81 | 82 | @media(max-width: 800px) 83 | { 84 | img 85 | { 86 | width: 60px; 87 | margin-right: 20px; 88 | } 89 | h3, h4 90 | { 91 | font-size: 14px; 92 | } 93 | h2 94 | { 95 | font-size: 18px; 96 | } 97 | #cartMainContainer 98 | { 99 | padding: 90px 20px; 100 | } 101 | } 102 | @media(max-width: 555px) 103 | { 104 | #cartContainer 105 | { 106 | display: grid; 107 | grid-template-columns: 1fr; 108 | } 109 | #boxContainer 110 | { 111 | padding: 20px; 112 | width: 80%; 113 | } 114 | } -------------------------------------------------------------------------------- /css/footer.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | margin: 0; 4 | font-family: 'Lato', sans-serif; 5 | } 6 | 7 | #containerFooter 8 | { 9 | width: 100%; 10 | background-color: rgb(29, 29, 29); 11 | color: white; 12 | letter-spacing: 1px; 13 | display: grid; 14 | grid-template-columns: repeat(4, 1fr); 15 | text-transform: uppercase; 16 | font-size: 15px; 17 | padding: 15px 300px; 18 | box-sizing: border-box; 19 | } 20 | #containerFooter h3:hover, #containerFooter p:hover 21 | { 22 | color: lightslategray; 23 | cursor: pointer; 24 | } 25 | #webFooter 26 | { 27 | padding-top: 30px; 28 | font-size: 12px; 29 | } 30 | #credit 31 | { 32 | width: 100%; 33 | margin: auto; 34 | padding: 20px 0; 35 | text-align: center; 36 | background-color: rgb(29, 29, 29); 37 | color: white; 38 | font-size: 11px; 39 | letter-spacing: 1px; 40 | } 41 | 42 | #credit a 43 | { 44 | color: white; 45 | text-decoration: none; 46 | position: relative; 47 | } 48 | #credit a::after 49 | { 50 | content: ""; 51 | background: white; 52 | mix-blend-mode: exclusion; 53 | width: calc(100% + 18px); 54 | height: 0; 55 | position: absolute; 56 | bottom: -4px; 57 | left: -10px; 58 | transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95); 59 | } 60 | #credit a:hover::after 61 | { 62 | height: calc(100% + 8px) 63 | } 64 | 65 | /* ----------------------------- MEDIA QUERY --------------------------- */ 66 | 67 | @media(max-width: 1350px) 68 | { 69 | #containerFooter 70 | { 71 | padding: 15px 200px; 72 | } 73 | } 74 | @media(max-width: 1166px) 75 | { 76 | #containerFooter 77 | { 78 | padding: 15px 100px; 79 | } 80 | } 81 | @media(max-width: 950px) 82 | { 83 | #containerFooter 84 | { 85 | padding: 15px 50px; 86 | } 87 | } 88 | @media(max-width: 850px) 89 | { 90 | #containerFooter 91 | { 92 | font-size: 13px; 93 | } 94 | #webFooter 95 | { 96 | font-size: 10px; 97 | } 98 | } 99 | @media(max-width: 750px) 100 | { 101 | #containerFooter 102 | { 103 | display: grid; 104 | grid-template-columns: 1fr 1fr; 105 | padding: 15px 100px; 106 | } 107 | #webFooter 108 | { 109 | padding: 15px 20px; 110 | } 111 | } 112 | @media(max-width: 540px) 113 | { 114 | #containerFooter 115 | { 116 | padding: 0 25px; 117 | } 118 | } -------------------------------------------------------------------------------- /css/content.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | margin: 0; 4 | font-family: 'Lato', sans-serif; 5 | } 6 | h1 7 | { 8 | width: 90%; 9 | margin: auto; 10 | padding: 50px 0; 11 | letter-spacing: 2px; 12 | font-weight: 700; 13 | text-transform: capitalize; 14 | } 15 | #containerClothing, #containerAccessories 16 | { 17 | display: grid; 18 | grid-gap: 70px 20px; 19 | grid-template-columns: repeat(5, 1fr); 20 | width: 90%; 21 | margin: auto; 22 | padding-bottom: 40px; 23 | } 24 | #box 25 | { 26 | width: 100%; 27 | background-color: white; 28 | align-content: center; 29 | border-radius: 10px; 30 | box-shadow: 1px 2px 6px 2px rgb(219, 219, 219); 31 | } 32 | #box:hover 33 | { 34 | box-shadow: 1px 6px 3px 0 rgb(185, 185, 185); 35 | } 36 | #containerClothing img 37 | { 38 | width: 100%; 39 | border-top-left-radius: 10px; 40 | border-top-right-radius: 10px; 41 | } 42 | #containerAccessories img 43 | { 44 | width: 100%; 45 | border-top-left-radius: 10px; 46 | border-top-right-radius: 10px; 47 | } 48 | #details 49 | { 50 | padding: 0 15px; 51 | text-transform: capitalize; 52 | } 53 | #box a 54 | { 55 | text-decoration: none; 56 | color: rgb(29, 29, 29); 57 | } 58 | h3 59 | { 60 | font-size: 16px; 61 | } 62 | h4 63 | { 64 | font-weight: 100; 65 | } 66 | h2 67 | { 68 | color: rgb(3, 94, 94); 69 | } 70 | 71 | /* ----------------------------- MEDIA QUERY --------------------------- */ 72 | 73 | @media(max-width: 1070px) 74 | { 75 | h1 76 | { 77 | font-size: 25px; 78 | } 79 | #containerClothing, #containerAccessories 80 | { 81 | width: 95%; 82 | grid-gap: 10px; 83 | } 84 | } 85 | @media(max-width: 850px) 86 | { 87 | h1 88 | { 89 | width: 80%; 90 | } 91 | #containerClothing, #containerAccessories 92 | { 93 | display: grid; 94 | grid-gap: 70px 20px; 95 | grid-template-columns: repeat(3, 1fr); 96 | width: 80%; 97 | } 98 | } 99 | @media(max-width: 650px) 100 | { 101 | h1 102 | { 103 | font-size: 20px; 104 | } 105 | h1 106 | { 107 | width: 90%; 108 | } 109 | #containerClothing, #containerAccessories 110 | { 111 | width: 90%; 112 | } 113 | } 114 | @media(max-width: 600px) 115 | { 116 | h1 117 | { 118 | width: 70%; 119 | } 120 | #containerClothing, #containerAccessories 121 | { 122 | width: 70%; 123 | } 124 | } 125 | @media(max-width: 505px) 126 | { 127 | h1 128 | { 129 | width: 80%; 130 | } 131 | #containerClothing, #containerAccessories 132 | { 133 | width: 80%; 134 | grid-template-columns: repeat(2, 1fr); 135 | } 136 | } -------------------------------------------------------------------------------- /slider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SLIDER | E-COMMERCE WEBSITE 8 | 9 | 10 | 11 | 12 | 13 | 14 | 49 | 50 | 51 | 52 |
53 |
54 |
image1
55 |
image2
56 |
image3
57 |
image4
58 |
59 |
60 | 61 | 62 | 63 | 76 | -------------------------------------------------------------------------------- /content.js: -------------------------------------------------------------------------------- 1 | // console.clear(); 2 | 3 | let contentTitle; 4 | 5 | console.log(document.cookie); 6 | function dynamicClothingSection(ob) { 7 | let boxDiv = document.createElement("div"); 8 | boxDiv.id = "box"; 9 | 10 | let boxLink = document.createElement("a"); 11 | // boxLink.href = '#' 12 | boxLink.href = "/contentDetails.html?" + ob.id; 13 | // console.log('link=>' + boxLink); 14 | 15 | let imgTag = document.createElement("img"); 16 | // imgTag.id = 'image1' 17 | // imgTag.id = ob.photos 18 | imgTag.src = ob.preview; 19 | 20 | let detailsDiv = document.createElement("div"); 21 | detailsDiv.id = "details"; 22 | 23 | let h3 = document.createElement("h3"); 24 | let h3Text = document.createTextNode(ob.name); 25 | h3.appendChild(h3Text); 26 | 27 | let h4 = document.createElement("h4"); 28 | let h4Text = document.createTextNode(ob.brand); 29 | h4.appendChild(h4Text); 30 | 31 | let h2 = document.createElement("h2"); 32 | let h2Text = document.createTextNode("rs " + ob.price); 33 | h2.appendChild(h2Text); 34 | 35 | boxDiv.appendChild(boxLink); 36 | boxLink.appendChild(imgTag); 37 | boxLink.appendChild(detailsDiv); 38 | detailsDiv.appendChild(h3); 39 | detailsDiv.appendChild(h4); 40 | detailsDiv.appendChild(h2); 41 | 42 | return boxDiv; 43 | } 44 | 45 | // TO SHOW THE RENDERED CODE IN CONSOLE 46 | // console.log(dynamicClothingSection()); 47 | 48 | // console.log(boxDiv) 49 | 50 | let mainContainer = document.getElementById("mainContainer"); 51 | let containerClothing = document.getElementById("containerClothing"); 52 | let containerAccessories = document.getElementById("containerAccessories"); 53 | // mainContainer.appendChild(dynamicClothingSection('hello world!!')) 54 | 55 | // BACKEND CALLING 56 | 57 | let httpRequest = new XMLHttpRequest(); 58 | 59 | httpRequest.onreadystatechange = function() { 60 | if (this.readyState === 4) { 61 | if (this.status == 200) { 62 | // console.log('call successful'); 63 | contentTitle = JSON.parse(this.responseText); 64 | if (document.cookie.indexOf(",counter=") >= 0) { 65 | var counter = document.cookie.split(",")[1].split("=")[1]; 66 | document.getElementById("badge").innerHTML = counter; 67 | } 68 | for (let i = 0; i < contentTitle.length; i++) { 69 | if (contentTitle[i].isAccessory) { 70 | console.log(contentTitle[i]); 71 | containerAccessories.appendChild( 72 | dynamicClothingSection(contentTitle[i]) 73 | ); 74 | } else { 75 | console.log(contentTitle[i]); 76 | containerClothing.appendChild( 77 | dynamicClothingSection(contentTitle[i]) 78 | ); 79 | } 80 | } 81 | } else { 82 | console.log("call failed!"); 83 | } 84 | } 85 | }; 86 | httpRequest.open( 87 | "GET", 88 | "https://5d76bf96515d1a0014085cf9.mockapi.io/product", 89 | true 90 | ); 91 | httpRequest.send(); 92 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | E-COMMERCE WEBSITE BY EDYODA | CREATED BY PRIYANKA SHARMA 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 34 | 35 |
36 | 46 | 47 | 48 |
49 | 59 | 60 | 61 |
62 | 72 | 73 | 74 | 75 | 76 | 77 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /css/contetDetails.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | margin: 0; 4 | text-transform: capitalize; 5 | font-family: 'Lato', sans-serif; 6 | font-weight: 100; 7 | } 8 | 9 | #containerProduct 10 | { 11 | padding-top: 80px; 12 | } 13 | #containerD 14 | { 15 | width: 90%; 16 | margin: auto; 17 | display: grid; 18 | grid-template-columns: 1fr 2fr; 19 | padding: 80px 40px; 20 | } 21 | #imageSection 22 | { 23 | width: 80%; 24 | margin: auto; 25 | } 26 | #imageSection img 27 | { 28 | width: 100%; 29 | float: right; 30 | border-radius: 10px; 31 | box-shadow: 1px 2px 6px 2px rgb(219, 219, 219); 32 | } 33 | #imageSection img:hover 34 | { 35 | box-shadow: 1px 0px 9px 1px rgb(3, 122, 122); 36 | 37 | } 38 | 39 | #productDetails 40 | { 41 | width: 100%; 42 | } 43 | h1 44 | { 45 | font-size: 35px; 46 | letter-spacing: 1px; 47 | word-spacing: 2px; 48 | } 49 | h4 50 | { 51 | font-size: 15px; 52 | font-weight: bold; 53 | color: rgb(3, 122, 122); 54 | letter-spacing: 1px; 55 | word-spacing: 2px; 56 | } 57 | #productPreview 58 | { 59 | padding-bottom: 10px; 60 | } 61 | #productPreview > img 62 | { 63 | width: 50px; 64 | padding: 10px 10px; 65 | border-radius: 15px; 66 | cursor: pointer; 67 | } 68 | p 69 | { 70 | font-size: 15px; 71 | word-spacing: 2px; 72 | letter-spacing: 1px; 73 | line-height: 25px; 74 | } 75 | button 76 | { 77 | padding: 10px 15px; 78 | color: white; 79 | background-color: rgb(3, 122, 122); 80 | border: none; 81 | border-radius: 5px; 82 | cursor: pointer; 83 | font-size: 20px; 84 | } 85 | button a 86 | { 87 | text-decoration: none; 88 | font-size: 18px; 89 | } 90 | button:hover 91 | { 92 | background-color: rgb(3, 94, 94); 93 | } 94 | button a:focus 95 | { 96 | outline: none; 97 | } 98 | 99 | /* ----------------------------- MEDIA QUERY --------------------------- */ 100 | 101 | @media(max-width: 1300px) 102 | { 103 | h1 104 | { 105 | font-size: 28px; 106 | } 107 | #productPreview > img 108 | { 109 | width: 40px; 110 | padding: 10px 10px; 111 | padding-bottom: 30px; 112 | } 113 | button 114 | { 115 | padding: 8px 13px; 116 | background-color: rgb(3, 122, 122); 117 | border: none; 118 | border-radius: 5px; 119 | cursor: pointer; 120 | } 121 | } 122 | 123 | @media(max-width: 1170px) 124 | { 125 | h1 126 | { 127 | font-size: 22px; 128 | } 129 | #productPreview > img 130 | { 131 | width: 40px; 132 | padding: 10px 10px; 133 | padding-bottom: 30px; 134 | } 135 | button a 136 | { 137 | font-size: 15px; 138 | 139 | } 140 | h4, p 141 | { 142 | font-size: 13px; 143 | } 144 | h3 145 | { 146 | font-size: 15px; 147 | } 148 | 149 | } 150 | 151 | @media(max-width: 900px) 152 | { 153 | /* #containerProduct */ 154 | #containerD 155 | { 156 | width: 60%; 157 | margin: auto; 158 | display: grid; 159 | grid-template-columns: 1fr; 160 | } 161 | #imageSection 162 | { 163 | width: 100%; 164 | text-align: center; 165 | } 166 | #imageSection img 167 | { 168 | text-align: center; 169 | width: 70%; 170 | float: none; 171 | } 172 | #productDetails 173 | { 174 | width: 100%; 175 | } 176 | #button 177 | { 178 | text-align: center; 179 | } 180 | } 181 | 182 | @media(max-width: 650px) 183 | { 184 | #containerD 185 | { 186 | width: 80%; 187 | } 188 | } -------------------------------------------------------------------------------- /cart.js: -------------------------------------------------------------------------------- 1 | console.clear(); 2 | 3 | if(document.cookie.indexOf(',counter=')>=0) 4 | { 5 | let counter = document.cookie.split(',')[1].split('=')[1] 6 | document.getElementById("badge").innerHTML = counter 7 | } 8 | 9 | 10 | let cartContainer = document.getElementById('cartContainer') 11 | 12 | let boxContainerDiv = document.createElement('div') 13 | boxContainerDiv.id = 'boxContainer' 14 | 15 | // DYNAMIC CODE TO SHOW THE SELECTED ITEMS IN YOUR CART 16 | function dynamicCartSection(ob,itemCounter) 17 | { 18 | let boxDiv = document.createElement('div') 19 | boxDiv.id = 'box' 20 | boxContainerDiv.appendChild(boxDiv) 21 | 22 | let boxImg = document.createElement('img') 23 | boxImg.src = ob.preview 24 | boxDiv.appendChild(boxImg) 25 | 26 | let boxh3 = document.createElement('h3') 27 | let h3Text = document.createTextNode(ob.name + ' × ' + itemCounter) 28 | // let h3Text = document.createTextNode(ob.name) 29 | boxh3.appendChild(h3Text) 30 | boxDiv.appendChild(boxh3) 31 | 32 | let boxh4 = document.createElement('h4') 33 | let h4Text = document.createTextNode('Amount: Rs' + ob.price) 34 | boxh4.appendChild(h4Text) 35 | boxDiv.appendChild(boxh4) 36 | 37 | // console.log(boxContainerDiv); 38 | 39 | buttonLink.appendChild(buttonText) 40 | cartContainer.appendChild(boxContainerDiv) 41 | cartContainer.appendChild(totalContainerDiv) 42 | // let cartMain = document.createElement('div') 43 | // cartmain.id = 'cartMainContainer' 44 | // cartMain.appendChild(totalContainerDiv) 45 | 46 | return cartContainer 47 | } 48 | 49 | let totalContainerDiv = document.createElement('div') 50 | totalContainerDiv.id = 'totalContainer' 51 | 52 | let totalDiv = document.createElement('div') 53 | totalDiv.id = 'total' 54 | totalContainerDiv.appendChild(totalDiv) 55 | 56 | let totalh2 = document.createElement('h2') 57 | let h2Text = document.createTextNode('Total Amount') 58 | totalh2.appendChild(h2Text) 59 | totalDiv.appendChild(totalh2) 60 | 61 | // TO UPDATE THE TOTAL AMOUNT 62 | function amountUpdate(amount) 63 | { 64 | let totalh4 = document.createElement('h4') 65 | // let totalh4Text = document.createTextNode(amount) 66 | let totalh4Text = document.createTextNode('Amount: Rs ' + amount) 67 | totalh4Text.id = 'toth4' 68 | totalh4.appendChild(totalh4Text) 69 | totalDiv.appendChild(totalh4) 70 | totalDiv.appendChild(buttonDiv) 71 | console.log(totalh4); 72 | } 73 | 74 | 75 | let buttonDiv = document.createElement('div') 76 | buttonDiv.id = 'button' 77 | totalDiv.appendChild(buttonDiv) 78 | 79 | let buttonTag = document.createElement('button') 80 | buttonDiv.appendChild(buttonTag) 81 | 82 | let buttonLink = document.createElement('a') 83 | buttonLink.href = '/orderPlaced.html?' 84 | buttonTag.appendChild(buttonLink) 85 | 86 | buttonText = document.createTextNode('Place Order') 87 | buttonTag.onclick = function() 88 | { 89 | console.log("clicked") 90 | } 91 | //dynamicCartSection() 92 | // console.log(dynamicCartSection()); 93 | 94 | // BACKEND CALL 95 | let httpRequest = new XMLHttpRequest() 96 | let totalAmount = 0 97 | httpRequest.onreadystatechange = function() 98 | { 99 | if(this.readyState === 4) 100 | { 101 | if(this.status == 200) 102 | { 103 | // console.log('call successful'); 104 | contentTitle = JSON.parse(this.responseText) 105 | 106 | let counter = Number(document.cookie.split(',')[1].split('=')[1]) 107 | document.getElementById("totalItem").innerHTML = ('Total Items: ' + counter) 108 | 109 | let item = document.cookie.split(',')[0].split('=')[1].split(" ") 110 | console.log(counter) 111 | console.log(item) 112 | 113 | let i; 114 | let totalAmount = 0 115 | for(i=0; i b 45 | { 46 | font-weight: 900; 47 | font: black; 48 | } 49 | 50 | #collection 51 | { 52 | font-weight: bold; 53 | display: grid; 54 | grid-template-columns: 1fr 1fr; 55 | } 56 | #collection a 57 | { 58 | text-decoration: none; 59 | color: rgb(29, 29, 29); 60 | } 61 | 62 | .search 63 | { 64 | padding: 14px; 65 | /* color: gray; */ 66 | color: rgb(29, 29, 29); 67 | min-width: 25px; 68 | text-align: center; 69 | position: absolute; 70 | } 71 | 72 | .addedToCart 73 | { 74 | font-size: 1.5em; 75 | margin-right: 25px; 76 | } 77 | #user 78 | { 79 | display: flex; 80 | /* float: right; */ 81 | align-items: center; 82 | } 83 | 84 | .userIcon 85 | { 86 | font-size: 45px; 87 | } 88 | #input 89 | { 90 | width: 35em; 91 | height: 3em; 92 | padding: 2px 50px; 93 | background-color: rgb(241, 241, 241); 94 | border: none; 95 | border-radius: 5px; 96 | } 97 | #input::placeholder 98 | { 99 | font-weight: bold; 100 | } 101 | #input:focus 102 | { 103 | outline: none; 104 | } 105 | #user a 106 | { 107 | color: rgb(29, 29, 29) 108 | } 109 | 110 | /* ----------------------------- MEDIA QUERY --------------------------- */ 111 | 112 | @media(max-width: 1300px) 113 | { 114 | #collection 115 | { 116 | font-size: 13px; 117 | } 118 | #input 119 | { 120 | width: 25em; 121 | } 122 | } 123 | @media(max-width: 1212px) 124 | { 125 | #collection 126 | { 127 | font-size: 13px; 128 | } 129 | #input 130 | { 131 | width: 20em; 132 | } 133 | .addedToCart 134 | { 135 | font-size: 1.5em; 136 | margin: 10px 20px; 137 | } 138 | } 139 | 140 | @media(max-width: 1090px) 141 | { 142 | #container 143 | { 144 | display: grid; 145 | grid-template-columns: 1fr 2fr 0.5fr; 146 | } 147 | #search 148 | { 149 | display: none; 150 | } 151 | } 152 | @media(max-width: 750px) 153 | { 154 | #shopName 155 | { 156 | font-size: 28px; 157 | } 158 | #collection 159 | { 160 | font-size: 12px; 161 | } 162 | .userIcon 163 | { 164 | font-size: 35px; 165 | } 166 | .addedToCart 167 | { 168 | font-size: 1.2em; 169 | margin: 10px 20px; 170 | } 171 | } 172 | 173 | @media(max-width: 650px) 174 | { 175 | #shopName 176 | { 177 | font-size: 24px; 178 | } 179 | #collection 180 | { 181 | font-size: 10px; 182 | } 183 | .userIcon 184 | { 185 | font-size: 30px; 186 | } 187 | } 188 | @media(max-width: 550px) 189 | { 190 | #container 191 | { 192 | padding: 20px 25px; 193 | } 194 | } 195 | 196 | /* badge media */ 197 | 198 | @media(max-width: 1480px) 199 | { 200 | #badge 201 | { 202 | right:150px; 203 | } 204 | } 205 | @media(max-width: 1426px) 206 | { 207 | #badge 208 | { 209 | right:142px; 210 | } 211 | } 212 | @media(max-width: 1360px) 213 | { 214 | #badge 215 | { 216 | right:136px; 217 | } 218 | } 219 | @media(max-width: 1320px) 220 | { 221 | #badge 222 | { 223 | right:129px; 224 | } 225 | } 226 | @media(max-width: 1259px) 227 | { 228 | #badge 229 | { 230 | right:119px; 231 | } 232 | } 233 | @media(max-width: 1212px) 234 | { 235 | #badge 236 | { 237 | right: 96px; 238 | } 239 | } 240 | @media(max-width: 1155px) 241 | { 242 | #badge 243 | { 244 | right: 87px; 245 | } 246 | } 247 | @media(max-width: 1090px) 248 | { 249 | #badge 250 | { 251 | right: 119px; 252 | } 253 | } 254 | @media(max-width: 1030px) 255 | { 256 | #badge 257 | { 258 | right: 109px; 259 | } 260 | } 261 | @media(max-width: 970px) 262 | { 263 | #badge 264 | { 265 | right: 100px; 266 | } 267 | } 268 | @media(max-width: 910px) 269 | { 270 | #badge 271 | { 272 | right: 94px; 273 | } 274 | } 275 | @media(max-width: 850px) 276 | { 277 | #badge 278 | { 279 | right: 87px; 280 | } 281 | } 282 | @media(max-width: 750px) 283 | { 284 | #badge 285 | { 286 | right: 87px; 287 | padding: 3px 6px; 288 | font-size: 12px; 289 | top: 12px; 290 | } 291 | } 292 | @media(max-width: 650px) 293 | { 294 | #badge 295 | { 296 | right: 78px; 297 | } 298 | } 299 | @media(max-width: 550px) 300 | { 301 | #badge 302 | { 303 | right: 62px; 304 | top: 18px; 305 | } 306 | } -------------------------------------------------------------------------------- /js/jQuery3.4.1.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */ 2 | 3 | 4 | !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],E=C.document,r=Object.getPrototypeOf,s=t.slice,g=t.concat,u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1",k=function(e,t){return new k.fn.init(e,t)},p=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function d(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp($),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+$),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ne=function(e,t,n){var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(m.childNodes),m.childNodes),t[m.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&((e?e.ownerDocument||e:m)!==C&&T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!A[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&U.test(t)){(s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=k),o=(l=h(t)).length;while(o--)l[o]="#"+s+" "+xe(l[o]);c=l.join(","),f=ee.test(t)&&ye(e.parentNode)||e}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){A(t,!0)}finally{s===k&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[k]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:m;return r!==C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),m!==C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=k,!C.getElementsByName||!C.getElementsByName(k).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+k+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+k+"+*").length||v.push(".#.+[+~]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",$)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e===C||e.ownerDocument===m&&y(m,e)?-1:t===C||t.ownerDocument===m&&y(m,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===C?-1:t===C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]===m?-1:s[r]===m?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if((e.ownerDocument||e)!==C&&T(e),d.matchesSelector&&E&&!A[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){A(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=p[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&p(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?k.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?k.grep(e,function(e){return e===n!==r}):"string"!=typeof n?k.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(k.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:L.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof k?t[0]:t,k.merge(this,k.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),D.test(r[1])&&k.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(k):k.makeArray(e,this)}).prototype=k.fn,q=k(E);var H=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}k.fn.extend({has:function(e){var t=k(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?k.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;nx",y.noCloneChecked=!!me.cloneNode(!0).lastChild.defaultValue;var Te=/^key/,Ce=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ee=/^([^.]*)(?:\.(.+)|)/;function ke(){return!0}function Se(){return!1}function Ne(e,t){return e===function(){try{return E.activeElement}catch(e){}}()==("focus"===t)}function Ae(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ae(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Se;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return k().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=k.guid++)),e.each(function(){k.event.add(this,t,i,r,n)})}function De(e,i,o){o?(Q.set(e,i,!1),k.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Q.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(k.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Q.set(this,i,r),t=o(this,i),this[i](),r!==(n=Q.get(this,i))||t?Q.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(Q.set(this,i,{value:k.event.trigger(k.extend(r[0],k.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Q.get(e,i)&&k.event.add(e,i,ke)}k.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.get(t);if(v){n.handler&&(n=(o=n).handler,i=o.selector),i&&k.find.matchesSelector(ie,i),n.guid||(n.guid=k.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof k&&k.event.triggered!==e.type?k.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(R)||[""]).length;while(l--)d=g=(s=Ee.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=k.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=k.event.special[d]||{},c=k.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&k.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),k.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.hasData(e)&&Q.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(R)||[""]).length;while(l--)if(d=g=(s=Ee.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){f=k.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||k.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)k.event.remove(e,d+t[l],n,r,!0);k.isEmptyObject(u)&&Q.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=k.event.fix(e),u=new Array(arguments.length),l=(Q.get(this,"events")||{})[s.type]||[],c=k.event.special[s.type]||{};for(u[0]=s,t=1;t\x20\t\r\n\f]*)[^>]*)\/>/gi,qe=/\s*$/g;function Oe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&k(e).children("tbody")[0]||e}function Pe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Re(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Me(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(Q.hasData(e)&&(o=Q.access(e),a=Q.set(t,o),l=o.events))for(i in delete a.handle,a.events={},l)for(n=0,r=l[i].length;n")},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=oe(e);if(!(y.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||k.isXMLDoc(e)))for(a=ve(c),r=0,i=(o=ve(e)).length;r").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Vt,Gt=[],Yt=/(=)\?(?=&|$)|\?\?/;k.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Gt.pop()||k.expando+"_"+kt++;return this[e]=!0,e}}),k.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Yt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Yt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Yt,"$1"+r):!1!==e.jsonp&&(e.url+=(St.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||k.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?k(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Gt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Vt=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Vt.childNodes.length),k.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=D.exec(e))?[t.createElement(i[1])]:(i=we([e],t,o),o&&o.length&&k(o).remove(),k.merge([],i.childNodes)));var r,i,o},k.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(k.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},k.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){k.fn[t]=function(e){return this.on(t,e)}}),k.expr.pseudos.animated=function(t){return k.grep(k.timers,function(e){return t===e.elem}).length},k.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=k.css(e,"position"),c=k(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=k.css(e,"top"),u=k.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,k.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},k.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){k.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===k.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===k.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=k(e).offset()).top+=k.css(e,"borderTopWidth",!0),i.left+=k.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-k.css(r,"marginTop",!0),left:t.left-i.left-k.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===k.css(e,"position"))e=e.offsetParent;return e||ie})}}),k.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;k.fn[t]=function(e){return _(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),k.each(["top","left"],function(e,n){k.cssHooks[n]=ze(y.pixelPosition,function(e,t){if(t)return t=_e(e,n),$e.test(t)?k(e).position()[n]+"px":t})}),k.each({Height:"height",Width:"width"},function(a,s){k.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){k.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return _(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?k.css(e,t,i):k.style(e,t,n,i)},s,n?e:void 0,n)}})}),k.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){k.fn[n]=function(e,t){return 0