├── src ├── themes │ ├── loading.gif │ ├── flat-theme.css │ ├── red-theme.css │ ├── light-theme.css │ ├── blue-theme.css │ ├── dark-theme.css │ ├── brown-theme.css │ └── purple-theme.css ├── xsalert.js └── jquery.min.js └── README.md /src/themes/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frankeno/xsalert/HEAD/src/themes/loading.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | xsalert 2 | 3 | 4 | # XSAlert 5 | 6 | ## An easy-to-use, responsive and customizable JavaScript (jQuery) Alert 7 | 8 | Check out Documentation and exampels at https://xsgames.co/xsalert 9 | 10 | ## Some examples: 11 | 12 | xsalert1 13 | xsalert2 14 | xsalert3 15 | xsalert4 16 | 17 | -------------------------------------------------------------------------------- /src/themes/flat-theme.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------- 2 | XSAlert - Flat Theme 3 | Made by Frank Eno - XSGames 4 | URL: https://xsgames.co/xsalert 5 | Twitter: @xsgames_ 6 | --------------------------------------*/ 7 | 8 | /*-------------------- 9 | Colors 10 | ---------------------*/ 11 | :root { 12 | --lightgray: #efefef; 13 | --blue: steelblue; 14 | --white: #ffffff; 15 | --black: #121212; 16 | --default: #ffeb3b; 17 | --green: #9ccc65; 18 | --orange: #ffc107; 19 | --blue: #00bcd4; 20 | --dark-orange: #ff5722; 21 | --gray: #b0bec5; 22 | --purple: #b39ddb; 23 | --light-purple: #f06292; 24 | --brown: #8d6e63; 25 | --water: #4DB6A8; 26 | } 27 | 28 | /*-------------------- 29 | General 30 | ---------------------*/ 31 | hr { background: #777; } 32 | 33 | /*-------------------- 34 | Overlay/Container 35 | ---------------------*/ 36 | .xsoverlay { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.8); top: 0;bottom: 0;left: 0;right: 0; } 37 | .xs-btn-container { width: 100%;text-align: center;} 38 | 39 | /*-------------------- 40 | Positions 41 | ---------------------*/ 42 | .xsalert-center { max-width: 32%; height: fit-content; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 1rem; background: #ffffff; transition: all 0.4s ease-in; margin: auto; color: var(--black); border-radius: 0px; align-content: space-around;flex-wrap: wrap;align-items: stretch; } 43 | .xsalert-top-left { max-width: 32%; height: fit-content; position: fixed; top: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--white); transition: all 0.4s ease-in; margin: auto; color: var(--black); border-radius: 0px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-left: 20px;} 44 | .xsalert-top-right { max-width: 32%; height: fit-content; position: fixed; top: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--white); transition: all 0.4s ease-in; margin: auto; color: var(--black); border-radius: 0px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-right: 20px;} 45 | .xsalert-bottom-left { max-width: 32%; height: fit-content; position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--white); transition: all 0.4s ease-in; margin: auto; color: var(--black); border-radius: 0px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;margin-left: 20px;} 46 | .xsalert-bottom-right { max-width: 32%; height: fit-content; position: fixed; bottom: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--white); transition: all 0.4s ease-in; margin: auto; color: var(--black); border-radius: 0px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;right: 20px;} 47 | 48 | 49 | /*-------------------- 50 | Title and Message 51 | ---------------------*/ 52 | .xs-title { width: 100%; font-weight: 600; padding: 10px; text-align: center; font-size: 32px;color: #717171;} 53 | .xs-message { width: 100%; font-weight: 400; padding: 10px; margin: auto; text-align: center; color: #8b8b8b;} 54 | .xs-footer { width: 100%; font-weight: 400; padding: 10px; margin: auto; text-align: center; margin-top: 12px; } 55 | .xs-footer a { color: #818181;} 56 | .xs-footer a:hover { text-decoration: underline; } 57 | 58 | /*-------------------- 59 | Buttons 60 | ---------------------*/ 61 | .xs-ok-btn { cursor: pointer; background: #414141; border: none; outline: none; font-size: inherit; font-family: inherit; color: var(--white); padding: 10px 10px;border-radius: 0;min-width: 100px; transition: .3s ease;margin-top: 20px;margin-right: 5px;} 62 | .xs-ok-btn:hover { background: #f1f1f1; color: #121212; } 63 | .xs-ok-btn:focus { border: 3px solid #aacef3; } 64 | .xs-cancel-btn { cursor: pointer; background: #dadada; border: none; outline: none; font-size: inherit; font-family: inherit; color: var(--black); padding: 10px 10px; border-radius: 0; min-width: 100px; margin-top: 20px;} 65 | .xs-cancel-btn:hover { background: #121212; color: #f1f1f1; } 66 | .xs-third-btn { cursor: pointer; background: var(--orange); border: none; outline: none; font-size: inherit; font-family: inherit; color: #121221; padding: 10px 10px; border-radius: 0; min-width: 100px; margin-top: 20px; margin-right: 8px;} 67 | .xs-third-btn:hover { background: #121212; color: #f1f1f1; } 68 | 69 | /*-------------------- 70 | Icons & Image 71 | ---------------------*/ 72 | .xs-icon { width: 100%; text-align: center;} 73 | .xs-icon img { width: 80px; } 74 | .xs-image img { width: 100%;object-fit: cover; margin-top: 10px; border-radius: 0;} 75 | 76 | /*-------------------- 77 | Inputs 78 | ---------------------*/ 79 | .xs-input { width: 92%; border: 1px solid #777; border-radius: 0; padding: 6px 10px; font-size: 14px;} 80 | .xs-textarea { width: 92%; border: 1px solid #121212; border-radius: 0; padding: 6px 10px; font-size: 14px;height: 80px; white-space: pre-wrap; } 81 | .xs-select { color: #121212; width: 90%;height: 38px;border-radius: 0;} 82 | 83 | /*-------------------- 84 | Progress Bar 85 | ---------------------*/ 86 | .xs-progress-bar { background: #607d8b; height: 7px; width: 98%; border-radius: 0;bottom: 4px;position: fixed;} 87 | .xs-progress-icon { width: 40px; margin-bottom: 10px;} 88 | 89 | /*-------------------- 90 | Animations 91 | ---------------------*/ 92 | .scale-up-center{animation:scale-up-center 0.4s ease both; } @keyframes scale-up-center{ 0%{transform:scale(0)} 100%{transform:scale(1)} } 93 | .scale-up-top{animation:scale-up-top 0.4s ease both; } @keyframes scale-up-top{0%{transform:scale(0);transform-origin:center top}100%{transform:scale(1);transform-origin:center top}} 94 | .scale-up-bottom{animation:scale-up-bottom 0.4s ease both; } @keyframes scale-up-bottom{0%{transform:scale(0);transform-origin:center bottom}100%{transform:scale(1);transform-origin:center bottom}} 95 | .slide-top{animation:slide-top 0.4s ease both; } @keyframes slide-top{0%{transform:translateY(-2000px)}100%{transform:translateY(0px)}} 96 | .slide-bottom{animation:slide-bottom 0.4s ease both}@keyframes slide-bottom{0%{transform:translateY(2000px)}100%{transform:translateY(0px)}} 97 | .jello-horizontal{animation:jello-horizontal .6s linear both} @keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}} 98 | .jello-vertical{animation:jello-vertical .6s ease both; } @keyframes jello-vertical{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}} 99 | .jello-diagonal{animation:jello-diagonal .6s ease both; } @keyframes jello-diagonal{0%{transform:skew(0deg 0deg)}30%{transform:skew(25deg 25deg)}40%{transform:skew(-15deg,-15deg)}50%{transform:skew(15deg,15deg)}65%{transform:skew(-5deg,-5deg)}75%{transform:skew(5deg,5deg)}100%{transform:skew(0deg 0deg)}} 100 | .rotate-top{animation:rotate-top 0.4s linear} @keyframes rotate-top{0%{transform:rotate(0);transform-origin:top}100%{transform:rotate(360deg);transform-origin:top}} 101 | .rotate-scale-up{animation:rotate-scale-up 0.4s linear both} @keyframes rotate-scale-up{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(2) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 102 | .rotate-scale-down{animation:rotate-scale-down 0.4s linear both} @keyframes rotate-scale-down{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(.5) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 103 | .rotate-scale-up-horizontal{animation:rotate-scale-up-horizontal 0.4s linear both} @keyframes rotate-scale-up-horizontal{0%{transform:scale(1) rotateX(0)}50%{transform:scale(2) rotateX(-180deg)}100%{transform:scale(1) rotateX(-360deg)}} 104 | .rotate-scale-up-vertical{animation:rotate-scale-up-vertical 0.4s linear both} @keyframes rotate-scale-up-vertical{0%{transform:scale(1) rotateY(0)}50%{transform:scale(2) rotateY(180deg)}100%{transform:scale(1) rotateY(360deg)}} 105 | .blur-in{animation:blur-in 0.4s linear both} @keyframes blur-in{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}} 106 | .shake-horizontal{animation:shake-horizontal 0.8s linear both} @keyframes shake-horizontal{0%,100%{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}} 107 | .shake-left-right{animation:shake-left-right 0.8s linear both} @keyframes shake-left-right{0%,100%{transform:rotate(0deg);transform-origin:50% 50%}10%{transform:rotate(8deg)}20%,40%,60%{transform:rotate(-10deg)}30%,50%,70%{transform:rotate(10deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}} 108 | .bounce-top{animation:bounce-top .9s linear both} @keyframes bounce-top{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}} 109 | 110 | /* Closing animation */ 111 | .closing-anim{animation:closing-anim 0.2s ease both } @keyframes closing-anim{0%{transform:scale(1)}100%{transform:scale(0)}} 112 | 113 | 114 | /*-------------------- 115 | Media Queries 116 | ---------------------*/ 117 | 118 | /* Tablet */ 119 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 120 | .xsalert-center { max-width: 70%;} 121 | .xsalert-top-right { max-width: 60%;} 122 | .xsalert-top-left { max-width: 60%;} 123 | .xsalert-bottom-right { max-width: 60%;} 124 | .xsalert-bottom-left { max-width: 60%;} 125 | } 126 | 127 | /* Tablet small screen*/ 128 | @media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 129 | .xsalert-center { max-width: 70%;} 130 | .xsalert-top-right { max-width: 60%;} 131 | .xsalert-top-left { max-width: 60%;} 132 | .xsalert-bottom-right { max-width: 60%;} 133 | .xsalert-bottom-left { max-width: 60%;} 134 | } 135 | 136 | /* Tablet Landscape */ 137 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { 138 | .xsalert-center { max-width: 40%;} 139 | } 140 | 141 | /* iPhone */ 142 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 143 | .xsalert-center { max-width: 90%;} 144 | .xsalert-top-right { max-width: 70%;} 145 | .xsalert-top-right { max-width: 70%;} 146 | .xsalert-top-left { max-width: 70%;} 147 | .xsalert-bottom-right { max-width: 70%;} 148 | .xsalert-bottom-left { max-width: 70%;} 149 | } 150 | 151 | /* iPhone Landscape */ 152 | @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 153 | .xsalert-center { max-width: 40%;} 154 | } -------------------------------------------------------------------------------- /src/themes/red-theme.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------- 2 | XSAlert - Red Theme 3 | Made by Frank Eno - XSGames 4 | URL: https://xsgames.co/xsalert 5 | Twitter: @xsgames_ 6 | --------------------------------------*/ 7 | 8 | /*-------------------- 9 | Colors 10 | ---------------------*/ 11 | :root { 12 | --lightgray: #efefef; 13 | --blue: steelblue; 14 | --white: #ffffff; 15 | --black: #121212; 16 | --default: #ffeb3b; 17 | --green: #9ccc65; 18 | --orange: #ffc107; 19 | --blue: #00bcd4; 20 | --dark-orange: #ff5722; 21 | --gray: #b0bec5; 22 | --purple: #b39ddb; 23 | --light-purple: #f06292; 24 | --brown: #8d6e63; 25 | --water: #4DB6A8; 26 | --red: #dc3545; 27 | } 28 | 29 | /*-------------------- 30 | General 31 | ---------------------*/ 32 | hr { background: #777; } 33 | 34 | /*-------------------- 35 | Overlay/Container 36 | ---------------------*/ 37 | .xsoverlay { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.8); top: 0;bottom: 0;left: 0;right: 0; } 38 | .xs-btn-container { width: 100%;text-align: center;} 39 | 40 | /*-------------------- 41 | Positions 42 | ---------------------*/ 43 | .xsalert-center {max-width: 32%;height: fit-content;position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;padding: 1rem;background: var(--red);transition: all 0.4s ease-in;margin: auto;color: var(--white);border-radius: 12px;align-content: space-around;flex-wrap: wrap;align-items: stretch;} 44 | .xsalert-top-left { max-width: 32%; height: fit-content; position: fixed; top: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--red); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-left: 20px;} 45 | .xsalert-top-right { max-width: 32%; height: fit-content; position: fixed; top: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--red); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-right: 20px;} 46 | .xsalert-bottom-left { max-width: 32%; height: fit-content; position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--red); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;margin-left: 20px;} 47 | .xsalert-bottom-right { max-width: 32%; height: fit-content; position: fixed; bottom: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--red); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;right: 20px;} 48 | 49 | 50 | /*-------------------- 51 | Title and Message 52 | ---------------------*/ 53 | .xs-title { width: 100%; font-weight: 600; padding: 10px; text-align: center; font-size: 32px;} 54 | .xs-message {width: 100%;font-weight: 400;padding: 10px;margin: auto;text-align: center;color: #f1f1f1;} 55 | .xs-footer {width: 100%;font-weight: 400;padding: 10px;margin: auto;text-align: center;margin-top: 12px;} 56 | .xs-footer a { color: #ffffff; } 57 | .xs-footer a:hover { text-decoration: underline; } 58 | 59 | /*-------------------- 60 | Buttons 61 | ---------------------*/ 62 | .xs-ok-btn {cursor: pointer;background: #121212;border: none;outline: none;font-size: inherit;font-family: inherit;color: var(--white);padding: 10px 10px;border-radius: 8px;min-width: 100px;transition: .3s ease;margin-top: 20px;margin-right: 5px;} 63 | .xs-ok-btn:hover { background: #ffffff; color: var(--light-purple); } 64 | .xs-ok-btn:focus { border: 3px solid #aacef3; } 65 | .xs-cancel-btn { cursor: pointer; background: var(--lightgray); border: none; outline: none; font-size: inherit; font-family: inherit; color: var(--black); padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px;} 66 | .xs-cancel-btn:hover { background: #121212; color: #f1f1f1; } 67 | .xs-third-btn { cursor: pointer; background: var(--orange); border: none; outline: none; font-size: inherit; font-family: inherit; color: #121221; padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px; margin-right: 8px;} 68 | .xs-third-btn:hover { background: #121212; color: #f1f1f1; } 69 | 70 | /*-------------------- 71 | Icons & Image 72 | ---------------------*/ 73 | .xs-icon { width: 100%; text-align: center;} 74 | .xs-icon img { width: 80px; } 75 | .xs-image img { width: 100%;object-fit: cover; margin-top: 10px; border-radius: 10px;} 76 | 77 | /*-------------------- 78 | Inputs 79 | ---------------------*/ 80 | .xs-input {width: 92%;border: 1px solid #121212;border-radius: 6px;padding: 6px 10px;font-size: 14px;background: #f9f0a3;} 81 | .xs-textarea { width: 92%; border: 1px solid #121212; border-radius: 6px; padding: 6px 10px; font-size: 14px;height: 80px; white-space: pre-wrap; } 82 | .xs-select { color: #121212; width: 90%;height: 38px;border-radius: 6px;} 83 | 84 | /*-------------------- 85 | Progress Bar 86 | ---------------------*/ 87 | .xs-progress-bar { background: #f9fafb; height: 7px; width: 98%; border-radius: 99px;bottom: 4px;position: fixed;} 88 | .xs-progress-icon { width: 40px; margin-bottom: 10px;} 89 | 90 | /*-------------------- 91 | Animations 92 | ---------------------*/ 93 | .scale-up-center{animation:scale-up-center 0.4s ease both; } @keyframes scale-up-center{ 0%{transform:scale(0)} 100%{transform:scale(1)} } 94 | .scale-up-top{animation:scale-up-top 0.4s ease both; } @keyframes scale-up-top{0%{transform:scale(0);transform-origin:center top}100%{transform:scale(1);transform-origin:center top}} 95 | .scale-up-bottom{animation:scale-up-bottom 0.4s ease both; } @keyframes scale-up-bottom{0%{transform:scale(0);transform-origin:center bottom}100%{transform:scale(1);transform-origin:center bottom}} 96 | .slide-top{animation:slide-top 0.4s ease both; } @keyframes slide-top{0%{transform:translateY(-2000px)}100%{transform:translateY(0px)}} 97 | .slide-bottom{animation:slide-bottom 0.4s ease both}@keyframes slide-bottom{0%{transform:translateY(2000px)}100%{transform:translateY(0px)}} 98 | .jello-horizontal{animation:jello-horizontal .6s linear both} @keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}} 99 | .jello-vertical{animation:jello-vertical .6s ease both; } @keyframes jello-vertical{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}} 100 | .jello-diagonal{animation:jello-diagonal .6s ease both; } @keyframes jello-diagonal{0%{transform:skew(0deg 0deg)}30%{transform:skew(25deg 25deg)}40%{transform:skew(-15deg,-15deg)}50%{transform:skew(15deg,15deg)}65%{transform:skew(-5deg,-5deg)}75%{transform:skew(5deg,5deg)}100%{transform:skew(0deg 0deg)}} 101 | .rotate-top{animation:rotate-top 0.4s linear} @keyframes rotate-top{0%{transform:rotate(0);transform-origin:top}100%{transform:rotate(360deg);transform-origin:top}} 102 | .rotate-scale-up{animation:rotate-scale-up 0.4s linear both} @keyframes rotate-scale-up{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(2) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 103 | .rotate-scale-down{animation:rotate-scale-down 0.4s linear both} @keyframes rotate-scale-down{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(.5) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 104 | .rotate-scale-up-horizontal{animation:rotate-scale-up-horizontal 0.4s linear both} @keyframes rotate-scale-up-horizontal{0%{transform:scale(1) rotateX(0)}50%{transform:scale(2) rotateX(-180deg)}100%{transform:scale(1) rotateX(-360deg)}} 105 | .rotate-scale-up-vertical{animation:rotate-scale-up-vertical 0.4s linear both} @keyframes rotate-scale-up-vertical{0%{transform:scale(1) rotateY(0)}50%{transform:scale(2) rotateY(180deg)}100%{transform:scale(1) rotateY(360deg)}} 106 | .blur-in{animation:blur-in 0.4s linear both} @keyframes blur-in{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}} 107 | .shake-horizontal{animation:shake-horizontal 0.8s linear both} @keyframes shake-horizontal{0%,100%{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}} 108 | .shake-left-right{animation:shake-left-right 0.8s linear both} @keyframes shake-left-right{0%,100%{transform:rotate(0deg);transform-origin:50% 50%}10%{transform:rotate(8deg)}20%,40%,60%{transform:rotate(-10deg)}30%,50%,70%{transform:rotate(10deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}} 109 | .bounce-top{animation:bounce-top .9s linear both} @keyframes bounce-top{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}} 110 | 111 | /* Closing animation */ 112 | .closing-anim{animation:closing-anim 0.2s ease both } @keyframes closing-anim{0%{transform:scale(1)}100%{transform:scale(0)}} 113 | 114 | 115 | /*-------------------- 116 | Media Queries 117 | ---------------------*/ 118 | 119 | /* Tablet */ 120 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 121 | .xsalert-center { max-width: 70%;} 122 | .xsalert-top-right { max-width: 60%;} 123 | .xsalert-top-left { max-width: 60%;} 124 | .xsalert-bottom-right { max-width: 60%;} 125 | .xsalert-bottom-left { max-width: 60%;} 126 | } 127 | 128 | /* Tablet small screen*/ 129 | @media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 130 | .xsalert-center { max-width: 70%;} 131 | .xsalert-top-right { max-width: 60%;} 132 | .xsalert-top-left { max-width: 60%;} 133 | .xsalert-bottom-right { max-width: 60%;} 134 | .xsalert-bottom-left { max-width: 60%;} 135 | } 136 | 137 | /* Tablet Landscape */ 138 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { 139 | .xsalert-center { max-width: 40%;} 140 | } 141 | 142 | /* iPhone */ 143 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 144 | .xsalert-center { max-width: 90%;} 145 | .xsalert-top-right { max-width: 70%;} 146 | .xsalert-top-right { max-width: 70%;} 147 | .xsalert-top-left { max-width: 70%;} 148 | .xsalert-bottom-right { max-width: 70%;} 149 | .xsalert-bottom-left { max-width: 70%;} 150 | } 151 | 152 | /* iPhone Landscape */ 153 | @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 154 | .xsalert-center { max-width: 40%;} 155 | } -------------------------------------------------------------------------------- /src/themes/light-theme.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------- 2 | XSAlert - Light Theme 3 | Made by Frank Eno - XSGames 4 | URL: https://xsgames.co/xsalert 5 | Twitter: @xsgames_ 6 | --------------------------------------*/ 7 | 8 | /*-------------------- 9 | Colors 10 | ---------------------*/ 11 | :root { 12 | --lightgray: #efefef; 13 | --blue: steelblue; 14 | --white: #ffffff; 15 | --black: #121212; 16 | --default: #ffeb3b; 17 | --green: #9ccc65; 18 | --orange: #ffc107; 19 | --blue: #00bcd4; 20 | --dark-orange: #ff5722; 21 | --gray: #b0bec5; 22 | --purple: #b39ddb; 23 | --light-purple: #f06292; 24 | --brown: #8d6e63; 25 | --water: #4DB6A8; 26 | } 27 | 28 | /*-------------------- 29 | General 30 | ---------------------*/ 31 | hr { background: #777; } 32 | 33 | /*-------------------- 34 | Overlay/Container 35 | ---------------------*/ 36 | .xsoverlay { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.8); top: 0;bottom: 0;left: 0;right: 0; } 37 | .xs-btn-container { width: 100%;text-align: center;} 38 | 39 | /*-------------------- 40 | Positions 41 | ---------------------*/ 42 | .xsalert-center { max-width: 32%; height: fit-content; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 1rem; background: var(--white); transition: all 0.4s ease-in; margin: auto; color: var(--black); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; } 43 | .xsalert-top-left { max-width: 32%; height: fit-content; position: fixed; top: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--white); transition: all 0.4s ease-in; margin: auto; color: var(--black); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-left: 20px;} 44 | .xsalert-top-right { max-width: 32%; height: fit-content; position: fixed; top: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--white); transition: all 0.4s ease-in; margin: auto; color: var(--black); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-right: 20px;} 45 | .xsalert-bottom-left { max-width: 32%; height: fit-content; position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--white); transition: all 0.4s ease-in; margin: auto; color: var(--black); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;margin-left: 20px;} 46 | .xsalert-bottom-right { max-width: 32%; height: fit-content; position: fixed; bottom: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--white); transition: all 0.4s ease-in; margin: auto; color: var(--black); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;right: 20px;} 47 | 48 | 49 | /*-------------------- 50 | Title and Message 51 | ---------------------*/ 52 | .xs-title { width: 100%; font-weight: 600; padding: 10px; text-align: center; font-size: 32px;} 53 | .xs-message { width: 100%; font-weight: 400; padding: 10px; margin: auto; text-align: center; } 54 | .xs-footer { width: 100%; font-weight: 400; padding: 10px; margin: auto; text-align: center; margin-top: 12px; } 55 | .xs-footer a { text-decoration: none; } 56 | .xs-footer a:hover { text-decoration: underline; } 57 | 58 | /*-------------------- 59 | Buttons 60 | ---------------------*/ 61 | .xs-ok-btn { cursor: pointer; background: var(--black); border: none; outline: none; font-size: inherit; font-family: inherit; color: var(--white); padding: 10px 10px;border-radius: 8px;min-width: 100px; transition: .3s ease;margin-top: 20px;margin-right: 5px;} 62 | .xs-ok-btn:hover { background: #f1f1f1; color: #121212; } 63 | .xs-ok-btn:focus { border: 3px solid #aacef3; } 64 | .xs-cancel-btn { cursor: pointer; background: var(--lightgray); border: none; outline: none; font-size: inherit; font-family: inherit; color: var(--black); padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px;} 65 | .xs-cancel-btn:hover { background: #121212; color: #f1f1f1; } 66 | .xs-third-btn { cursor: pointer; background: var(--orange); border: none; outline: none; font-size: inherit; font-family: inherit; color: #121221; padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px; margin-right: 8px;} 67 | .xs-third-btn:hover { background: #121212; color: #f1f1f1; } 68 | 69 | /*-------------------- 70 | Icons & Image 71 | ---------------------*/ 72 | .xs-icon { width: 100%; text-align: center;} 73 | .xs-icon img { width: 80px; } 74 | .xs-image img { width: 100%;object-fit: cover; margin-top: 10px; border-radius: 10px;} 75 | 76 | /*-------------------- 77 | Inputs 78 | ---------------------*/ 79 | .xs-input { width: 92%; border: 1px solid #121212; border-radius: 6px; padding: 6px 10px; font-size: 14px;} 80 | .xs-textarea { width: 92%; border: 1px solid #121212; border-radius: 6px; padding: 6px 10px; font-size: 14px;height: 80px; white-space: pre-wrap; } 81 | .xs-select { color: #121212; width: 90%;height: 38px;border-radius: 6px;} 82 | 83 | /*-------------------- 84 | Progress Bar 85 | ---------------------*/ 86 | .xs-progress-bar { background: #607d8b; height: 7px; width: 98%; border-radius: 99px;bottom: 4px;position: fixed;} 87 | .xs-progress-icon { width: 40px; margin-bottom: 10px;} 88 | 89 | /*-------------------- 90 | Animations 91 | ---------------------*/ 92 | .scale-up-center{animation:scale-up-center 0.4s ease both; } @keyframes scale-up-center{ 0%{transform:scale(0)} 100%{transform:scale(1)} } 93 | .scale-up-top{animation:scale-up-top 0.4s ease both; } @keyframes scale-up-top{0%{transform:scale(0);transform-origin:center top}100%{transform:scale(1);transform-origin:center top}} 94 | .scale-up-bottom{animation:scale-up-bottom 0.4s ease both; } @keyframes scale-up-bottom{0%{transform:scale(0);transform-origin:center bottom}100%{transform:scale(1);transform-origin:center bottom}} 95 | .slide-top{animation:slide-top 0.4s ease both; } @keyframes slide-top{0%{transform:translateY(-2000px)}100%{transform:translateY(0px)}} 96 | .slide-bottom{animation:slide-bottom 0.4s ease both}@keyframes slide-bottom{0%{transform:translateY(2000px)}100%{transform:translateY(0px)}} 97 | .jello-horizontal{animation:jello-horizontal .6s linear both} @keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}} 98 | .jello-vertical{animation:jello-vertical .6s ease both; } @keyframes jello-vertical{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}} 99 | .jello-diagonal{animation:jello-diagonal .6s ease both; } @keyframes jello-diagonal{0%{transform:skew(0deg 0deg)}30%{transform:skew(25deg 25deg)}40%{transform:skew(-15deg,-15deg)}50%{transform:skew(15deg,15deg)}65%{transform:skew(-5deg,-5deg)}75%{transform:skew(5deg,5deg)}100%{transform:skew(0deg 0deg)}} 100 | .rotate-top{animation:rotate-top 0.4s linear} @keyframes rotate-top{0%{transform:rotate(0);transform-origin:top}100%{transform:rotate(360deg);transform-origin:top}} 101 | .rotate-scale-up{animation:rotate-scale-up 0.4s linear both} @keyframes rotate-scale-up{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(2) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 102 | .rotate-scale-down{animation:rotate-scale-down 0.4s linear both} @keyframes rotate-scale-down{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(.5) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 103 | .rotate-scale-up-horizontal{animation:rotate-scale-up-horizontal 0.4s linear both} @keyframes rotate-scale-up-horizontal{0%{transform:scale(1) rotateX(0)}50%{transform:scale(2) rotateX(-180deg)}100%{transform:scale(1) rotateX(-360deg)}} 104 | .rotate-scale-up-vertical{animation:rotate-scale-up-vertical 0.4s linear both} @keyframes rotate-scale-up-vertical{0%{transform:scale(1) rotateY(0)}50%{transform:scale(2) rotateY(180deg)}100%{transform:scale(1) rotateY(360deg)}} 105 | .blur-in{animation:blur-in 0.4s linear both} @keyframes blur-in{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}} 106 | .shake-horizontal{animation:shake-horizontal 0.8s linear both} @keyframes shake-horizontal{0%,100%{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}} 107 | .shake-left-right{animation:shake-left-right 0.8s linear both} @keyframes shake-left-right{0%,100%{transform:rotate(0deg);transform-origin:50% 50%}10%{transform:rotate(8deg)}20%,40%,60%{transform:rotate(-10deg)}30%,50%,70%{transform:rotate(10deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}} 108 | .bounce-top{animation:bounce-top .9s linear both} @keyframes bounce-top{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}} 109 | 110 | /* Closing animation */ 111 | .closing-anim{animation:closing-anim 0.2s ease both } @keyframes closing-anim{0%{transform:scale(1)}100%{transform:scale(0)}} 112 | 113 | 114 | /*-------------------- 115 | Media Queries 116 | ---------------------*/ 117 | 118 | /* Tablet */ 119 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 120 | .xsalert-center { max-width: 70%;} 121 | .xsalert-top-right { max-width: 60%;} 122 | .xsalert-top-left { max-width: 60%;} 123 | .xsalert-bottom-right { max-width: 60%;} 124 | .xsalert-bottom-left { max-width: 60%;} 125 | } 126 | 127 | /* Tablet small screen*/ 128 | @media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 129 | .xsalert-center { max-width: 70%;} 130 | .xsalert-top-right { max-width: 60%;} 131 | .xsalert-top-left { max-width: 60%;} 132 | .xsalert-bottom-right { max-width: 60%;} 133 | .xsalert-bottom-left { max-width: 60%;} 134 | } 135 | 136 | /* Tablet Landscape */ 137 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { 138 | .xsalert-center { max-width: 40%;} 139 | } 140 | 141 | /* iPhone */ 142 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 143 | .xsalert-center { max-width: 90%;} 144 | .xsalert-top-right { max-width: 70%;} 145 | .xsalert-top-right { max-width: 70%;} 146 | .xsalert-top-left { max-width: 70%;} 147 | .xsalert-bottom-right { max-width: 70%;} 148 | .xsalert-bottom-left { max-width: 70%;} 149 | } 150 | 151 | /* iPhone Landscape */ 152 | @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 153 | .xsalert-center { max-width: 40%;} 154 | } -------------------------------------------------------------------------------- /src/themes/blue-theme.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------- 2 | XSAlert - Blue Theme 3 | Made by Frank Eno - XSGames 4 | URL: https://xsgames.co/xsalert 5 | Twitter: @xsgames_ 6 | --------------------------------------*/ 7 | 8 | /*-------------------- 9 | Colors 10 | ---------------------*/ 11 | :root { 12 | --lightgray: #efefef; 13 | --blue: steelblue; 14 | --white: #ffffff; 15 | --black: #121212; 16 | --default: #ffeb3b; 17 | --green: #9ccc65; 18 | --orange: #ffc107; 19 | --blue: #00bcd4; 20 | --dark-orange: #ff5722; 21 | --gray: #b0bec5; 22 | --purple: #b39ddb; 23 | --light-purple: #f06292; 24 | --brown: #8d6e63; 25 | --water: #4DB6A8; 26 | --red: #dc3545; 27 | } 28 | 29 | /*-------------------- 30 | General 31 | ---------------------*/ 32 | hr { background: #777; } 33 | 34 | /*-------------------- 35 | Overlay/Container 36 | ---------------------*/ 37 | .xsoverlay { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.8); top: 0;bottom: 0;left: 0;right: 0; } 38 | .xs-btn-container { width: 100%;text-align: center;} 39 | 40 | /*-------------------- 41 | Positions 42 | ---------------------*/ 43 | .xsalert-center {max-width: 32%;height: fit-content;position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;padding: 1rem;background: var(--blue);transition: all 0.4s ease-in;margin: auto;color: var(--white);border-radius: 12px;align-content: space-around;flex-wrap: wrap;align-items: stretch;} 44 | .xsalert-top-left { max-width: 32%; height: fit-content; position: fixed; top: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--blue); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-left: 20px;} 45 | .xsalert-top-right { max-width: 32%; height: fit-content; position: fixed; top: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--blue); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-right: 20px;} 46 | .xsalert-bottom-left { max-width: 32%; height: fit-content; position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--blue); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;margin-left: 20px;} 47 | .xsalert-bottom-right { max-width: 32%; height: fit-content; position: fixed; bottom: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--blue); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;right: 20px;} 48 | 49 | 50 | /*-------------------- 51 | Title and Message 52 | ---------------------*/ 53 | .xs-title { width: 100%; font-weight: 600; padding: 10px; text-align: center; font-size: 32px;} 54 | .xs-message {width: 100%;font-weight: 400;padding: 10px;margin: auto;text-align: center;color: #f1f1f1;} 55 | .xs-footer {width: 100%;font-weight: 400;padding: 10px;margin: auto;text-align: center;margin-top: 12px;} 56 | .xs-footer a { color: #ffffff; } 57 | .xs-footer a:hover { text-decoration: underline; } 58 | 59 | /*-------------------- 60 | Buttons 61 | ---------------------*/ 62 | .xs-ok-btn {cursor: pointer;background: #184e63;border: none;outline: none;font-size: inherit;font-family: inherit;color: var(--white);padding: 10px 10px;border-radius: 8px;min-width: 100px;transition: .3s ease;margin-top: 20px;margin-right: 5px;} 63 | .xs-ok-btn:hover { background: #ffffff; color: var(--light-purple); } 64 | .xs-ok-btn:focus { border: 3px solid #aacef3; } 65 | .xs-cancel-btn { cursor: pointer; background: var(--lightgray); border: none; outline: none; font-size: inherit; font-family: inherit; color: var(--black); padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px;} 66 | .xs-cancel-btn:hover { background: #121212; color: #f1f1f1; } 67 | .xs-third-btn { cursor: pointer; background: var(--orange); border: none; outline: none; font-size: inherit; font-family: inherit; color: #121221; padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px; margin-right: 8px;} 68 | .xs-third-btn:hover { background: #121212; color: #f1f1f1; } 69 | 70 | /*-------------------- 71 | Icons & Image 72 | ---------------------*/ 73 | .xs-icon { width: 100%; text-align: center;} 74 | .xs-icon img { width: 80px; } 75 | .xs-image img { width: 100%;object-fit: cover; margin-top: 10px; border-radius: 10px;} 76 | 77 | /*-------------------- 78 | Inputs 79 | ---------------------*/ 80 | .xs-input {width: 92%;border: 1px solid #ffffff;border-radius: 6px;padding: 6px 10px;font-size: 14px;background: #e0e0e0;color: #121212;} 81 | .xs-textarea { width: 92%; border: 1px solid #121212; border-radius: 6px; padding: 6px 10px; font-size: 14px;height: 80px; white-space: pre-wrap; } 82 | .xs-select { color: #121212; width: 90%;height: 38px;border-radius: 6px;} 83 | 84 | /*-------------------- 85 | Progress Bar 86 | ---------------------*/ 87 | .xs-progress-bar { background: #f9fafb; height: 7px; width: 98%; border-radius: 99px;bottom: 4px;position: fixed;} 88 | .xs-progress-icon { width: 40px; margin-bottom: 10px;} 89 | 90 | /*-------------------- 91 | Animations 92 | ---------------------*/ 93 | .scale-up-center{animation:scale-up-center 0.4s ease both; } @keyframes scale-up-center{ 0%{transform:scale(0)} 100%{transform:scale(1)} } 94 | .scale-up-top{animation:scale-up-top 0.4s ease both; } @keyframes scale-up-top{0%{transform:scale(0);transform-origin:center top}100%{transform:scale(1);transform-origin:center top}} 95 | .scale-up-bottom{animation:scale-up-bottom 0.4s ease both; } @keyframes scale-up-bottom{0%{transform:scale(0);transform-origin:center bottom}100%{transform:scale(1);transform-origin:center bottom}} 96 | .slide-top{animation:slide-top 0.4s ease both; } @keyframes slide-top{0%{transform:translateY(-2000px)}100%{transform:translateY(0px)}} 97 | .slide-bottom{animation:slide-bottom 0.4s ease both}@keyframes slide-bottom{0%{transform:translateY(2000px)}100%{transform:translateY(0px)}} 98 | .jello-horizontal{animation:jello-horizontal .6s linear both} @keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}} 99 | .jello-vertical{animation:jello-vertical .6s ease both; } @keyframes jello-vertical{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}} 100 | .jello-diagonal{animation:jello-diagonal .6s ease both; } @keyframes jello-diagonal{0%{transform:skew(0deg 0deg)}30%{transform:skew(25deg 25deg)}40%{transform:skew(-15deg,-15deg)}50%{transform:skew(15deg,15deg)}65%{transform:skew(-5deg,-5deg)}75%{transform:skew(5deg,5deg)}100%{transform:skew(0deg 0deg)}} 101 | .rotate-top{animation:rotate-top 0.4s linear} @keyframes rotate-top{0%{transform:rotate(0);transform-origin:top}100%{transform:rotate(360deg);transform-origin:top}} 102 | .rotate-scale-up{animation:rotate-scale-up 0.4s linear both} @keyframes rotate-scale-up{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(2) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 103 | .rotate-scale-down{animation:rotate-scale-down 0.4s linear both} @keyframes rotate-scale-down{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(.5) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 104 | .rotate-scale-up-horizontal{animation:rotate-scale-up-horizontal 0.4s linear both} @keyframes rotate-scale-up-horizontal{0%{transform:scale(1) rotateX(0)}50%{transform:scale(2) rotateX(-180deg)}100%{transform:scale(1) rotateX(-360deg)}} 105 | .rotate-scale-up-vertical{animation:rotate-scale-up-vertical 0.4s linear both} @keyframes rotate-scale-up-vertical{0%{transform:scale(1) rotateY(0)}50%{transform:scale(2) rotateY(180deg)}100%{transform:scale(1) rotateY(360deg)}} 106 | .blur-in{animation:blur-in 0.4s linear both} @keyframes blur-in{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}} 107 | .shake-horizontal{animation:shake-horizontal 0.8s linear both} @keyframes shake-horizontal{0%,100%{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}} 108 | .shake-left-right{animation:shake-left-right 0.8s linear both} @keyframes shake-left-right{0%,100%{transform:rotate(0deg);transform-origin:50% 50%}10%{transform:rotate(8deg)}20%,40%,60%{transform:rotate(-10deg)}30%,50%,70%{transform:rotate(10deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}} 109 | .bounce-top{animation:bounce-top .9s linear both} @keyframes bounce-top{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}} 110 | 111 | /* Closing animation */ 112 | .closing-anim{animation:closing-anim 0.2s ease both } @keyframes closing-anim{0%{transform:scale(1)}100%{transform:scale(0)}} 113 | 114 | 115 | /*-------------------- 116 | Media Queries 117 | ---------------------*/ 118 | 119 | /* Tablet */ 120 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 121 | .xsalert-center { max-width: 70%;} 122 | .xsalert-top-right { max-width: 60%;} 123 | .xsalert-top-left { max-width: 60%;} 124 | .xsalert-bottom-right { max-width: 60%;} 125 | .xsalert-bottom-left { max-width: 60%;} 126 | } 127 | 128 | /* Tablet small screen*/ 129 | @media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 130 | .xsalert-center { max-width: 70%;} 131 | .xsalert-top-right { max-width: 60%;} 132 | .xsalert-top-left { max-width: 60%;} 133 | .xsalert-bottom-right { max-width: 60%;} 134 | .xsalert-bottom-left { max-width: 60%;} 135 | } 136 | 137 | /* Tablet Landscape */ 138 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { 139 | .xsalert-center { max-width: 40%;} 140 | } 141 | 142 | /* iPhone */ 143 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 144 | .xsalert-center { max-width: 90%;} 145 | .xsalert-top-right { max-width: 70%;} 146 | .xsalert-top-right { max-width: 70%;} 147 | .xsalert-top-left { max-width: 70%;} 148 | .xsalert-bottom-right { max-width: 70%;} 149 | .xsalert-bottom-left { max-width: 70%;} 150 | } 151 | 152 | /* iPhone Landscape */ 153 | @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 154 | .xsalert-center { max-width: 40%;} 155 | } -------------------------------------------------------------------------------- /src/themes/dark-theme.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------- 2 | XSAlert - Red Theme 3 | Made by Frank Eno - XSGames 4 | URL: https://xsgames.co/xsalert 5 | Twitter: @xsgames_ 6 | --------------------------------------*/ 7 | 8 | /*-------------------- 9 | Colors 10 | ---------------------*/ 11 | :root { 12 | --lightgray: #efefef; 13 | --blue: steelblue; 14 | --white: #ffffff; 15 | --black: #121212; 16 | --default: #ffeb3b; 17 | --green: #9ccc65; 18 | --orange: #ffc107; 19 | --blue: #00bcd4; 20 | --dark-orange: #ff5722; 21 | --gray: #b0bec5; 22 | --purple: #b39ddb; 23 | --light-purple: #f06292; 24 | --brown: #8d6e63; 25 | --water: #4DB6A8; 26 | } 27 | 28 | /*-------------------- 29 | General 30 | ---------------------*/ 31 | hr { background: #777; } 32 | 33 | /*-------------------- 34 | Overlay/Container 35 | ---------------------*/ 36 | .xsoverlay { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.8); top: 0;bottom: 0;left: 0;right: 0; } 37 | .xs-btn-container { width: 100%;text-align: center;} 38 | 39 | /*-------------------- 40 | Positions 41 | ---------------------*/ 42 | .xsalert-center {max-width: 32%;height: fit-content;position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;padding: 1rem;background: var(--black);transition: all 0.4s ease-in;margin: auto;color: var(--white);border-radius: 12px;align-content: space-around;flex-wrap: wrap;align-items: stretch;} 43 | .xsalert-top-left { max-width: 32%; height: fit-content; position: fixed; top: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--black); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-left: 20px;} 44 | .xsalert-top-right { max-width: 32%; height: fit-content; position: fixed; top: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--black); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-right: 20px;} 45 | .xsalert-bottom-left { max-width: 32%; height: fit-content; position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--black); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;margin-left: 20px;} 46 | .xsalert-bottom-right { max-width: 32%; height: fit-content; position: fixed; bottom: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--black); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;right: 20px;} 47 | 48 | 49 | /*-------------------- 50 | Title and Message 51 | ---------------------*/ 52 | .xs-title { width: 100%; font-weight: 600; padding: 10px; text-align: center; font-size: 32px;} 53 | .xs-message { width: 100%; font-weight: 400; padding: 10px; margin: auto; text-align: center; color: #cecece } 54 | .xs-footer {width: 100%;font-weight: 400;padding: 10px;margin: auto;text-align: center;margin-top: 12px;} 55 | .xs-footer a { color: #ffffff; } 56 | .xs-footer a:hover { text-decoration: underline; } 57 | 58 | /*-------------------- 59 | Buttons 60 | ---------------------*/ 61 | .xs-ok-btn {cursor: pointer;background: var(--light-purple);border: none;outline: none;font-size: inherit;font-family: inherit;color: var(--white);padding: 10px 10px;border-radius: 8px;min-width: 100px;transition: .3s ease;margin-top: 20px;margin-right: 5px;} 62 | .xs-ok-btn:hover { background: #ffffff; color: var(--light-purple); } 63 | .xs-ok-btn:focus { border: 3px solid #aacef3; } 64 | .xs-cancel-btn { cursor: pointer; background: var(--lightgray); border: none; outline: none; font-size: inherit; font-family: inherit; color: var(--black); padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px;} 65 | .xs-cancel-btn:hover { background: #121212; color: #f1f1f1; } 66 | .xs-third-btn { cursor: pointer; background: var(--orange); border: none; outline: none; font-size: inherit; font-family: inherit; color: #121221; padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px; margin-right: 8px;} 67 | .xs-third-btn:hover { background: #121212; color: #f1f1f1; } 68 | 69 | /*-------------------- 70 | Icons & Image 71 | ---------------------*/ 72 | .xs-icon { width: 100%; text-align: center;} 73 | .xs-icon img { width: 80px; } 74 | .xs-image img { width: 100%;object-fit: cover; margin-top: 10px; border-radius: 10px;} 75 | 76 | /*-------------------- 77 | Inputs 78 | ---------------------*/ 79 | .xs-input {width: 92%;border: 1px solid #f1f1f1;border-radius: 6px;padding: 6px 10px;font-size: 14px;background: transparent;color: #fff;} 80 | .xs-textarea { width: 92%; border: 1px solid #121212; border-radius: 6px; padding: 6px 10px; font-size: 14px;height: 80px; white-space: pre-wrap; } 81 | .xs-select { color: #121212; width: 90%;height: 38px;border-radius: 6px;} 82 | 83 | /*-------------------- 84 | Progress Bar 85 | ---------------------*/ 86 | .xs-progress-bar { background: #607d8b; height: 7px; width: 98%; border-radius: 99px;bottom: 4px;position: fixed;} 87 | .xs-progress-icon { width: 40px; margin-bottom: 10px;} 88 | 89 | /*-------------------- 90 | Animations 91 | ---------------------*/ 92 | .scale-up-center{animation:scale-up-center 0.4s ease both; } @keyframes scale-up-center{ 0%{transform:scale(0)} 100%{transform:scale(1)} } 93 | .scale-up-top{animation:scale-up-top 0.4s ease both; } @keyframes scale-up-top{0%{transform:scale(0);transform-origin:center top}100%{transform:scale(1);transform-origin:center top}} 94 | .scale-up-bottom{animation:scale-up-bottom 0.4s ease both; } @keyframes scale-up-bottom{0%{transform:scale(0);transform-origin:center bottom}100%{transform:scale(1);transform-origin:center bottom}} 95 | .slide-top{animation:slide-top 0.4s ease both; } @keyframes slide-top{0%{transform:translateY(-2000px)}100%{transform:translateY(0px)}} 96 | .slide-bottom{animation:slide-bottom 0.4s ease both}@keyframes slide-bottom{0%{transform:translateY(2000px)}100%{transform:translateY(0px)}} 97 | .jello-horizontal{animation:jello-horizontal .6s linear both} @keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}} 98 | .jello-vertical{animation:jello-vertical .6s ease both; } @keyframes jello-vertical{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}} 99 | .jello-diagonal{animation:jello-diagonal .6s ease both; } @keyframes jello-diagonal{0%{transform:skew(0deg 0deg)}30%{transform:skew(25deg 25deg)}40%{transform:skew(-15deg,-15deg)}50%{transform:skew(15deg,15deg)}65%{transform:skew(-5deg,-5deg)}75%{transform:skew(5deg,5deg)}100%{transform:skew(0deg 0deg)}} 100 | .rotate-top{animation:rotate-top 0.4s linear} @keyframes rotate-top{0%{transform:rotate(0);transform-origin:top}100%{transform:rotate(360deg);transform-origin:top}} 101 | .rotate-scale-up{animation:rotate-scale-up 0.4s linear both} @keyframes rotate-scale-up{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(2) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 102 | .rotate-scale-down{animation:rotate-scale-down 0.4s linear both} @keyframes rotate-scale-down{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(.5) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 103 | .rotate-scale-up-horizontal{animation:rotate-scale-up-horizontal 0.4s linear both} @keyframes rotate-scale-up-horizontal{0%{transform:scale(1) rotateX(0)}50%{transform:scale(2) rotateX(-180deg)}100%{transform:scale(1) rotateX(-360deg)}} 104 | .rotate-scale-up-vertical{animation:rotate-scale-up-vertical 0.4s linear both} @keyframes rotate-scale-up-vertical{0%{transform:scale(1) rotateY(0)}50%{transform:scale(2) rotateY(180deg)}100%{transform:scale(1) rotateY(360deg)}} 105 | .blur-in{animation:blur-in 0.4s linear both} @keyframes blur-in{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}} 106 | .shake-horizontal{animation:shake-horizontal 0.8s linear both} @keyframes shake-horizontal{0%,100%{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}} 107 | .shake-left-right{animation:shake-left-right 0.8s linear both} @keyframes shake-left-right{0%,100%{transform:rotate(0deg);transform-origin:50% 50%}10%{transform:rotate(8deg)}20%,40%,60%{transform:rotate(-10deg)}30%,50%,70%{transform:rotate(10deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}} 108 | .bounce-top{animation:bounce-top .9s linear both} @keyframes bounce-top{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}} 109 | 110 | /* Closing animation */ 111 | .closing-anim{animation:closing-anim 0.2s ease both } @keyframes closing-anim{0%{transform:scale(1)}100%{transform:scale(0)}} 112 | 113 | 114 | /*-------------------- 115 | Media Queries 116 | ---------------------*/ 117 | 118 | /* Tablet */ 119 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 120 | .xsalert-center { max-width: 70%;} 121 | .xsalert-top-right { max-width: 60%;} 122 | .xsalert-top-left { max-width: 60%;} 123 | .xsalert-bottom-right { max-width: 60%;} 124 | .xsalert-bottom-left { max-width: 60%;} 125 | } 126 | 127 | /* Tablet small screen*/ 128 | @media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 129 | .xsalert-center { max-width: 70%;} 130 | .xsalert-top-right { max-width: 60%;} 131 | .xsalert-top-left { max-width: 60%;} 132 | .xsalert-bottom-right { max-width: 60%;} 133 | .xsalert-bottom-left { max-width: 60%;} 134 | } 135 | 136 | /* Tablet Landscape */ 137 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { 138 | .xsalert-center { max-width: 40%;} 139 | } 140 | 141 | /* iPhone */ 142 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 143 | .xsalert-center { max-width: 90%;} 144 | .xsalert-top-right { max-width: 70%;} 145 | .xsalert-top-right { max-width: 70%;} 146 | .xsalert-top-left { max-width: 70%;} 147 | .xsalert-bottom-right { max-width: 70%;} 148 | .xsalert-bottom-left { max-width: 70%;} 149 | } 150 | 151 | /* iPhone Landscape */ 152 | @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 153 | .xsalert-center { max-width: 40%;} 154 | } -------------------------------------------------------------------------------- /src/themes/brown-theme.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------- 2 | XSAlert - Brown Theme 3 | Made by Frank Eno - XSGames 4 | URL: https://xsgames.co/xsalert 5 | Twitter: @xsgames_ 6 | --------------------------------------*/ 7 | 8 | /*-------------------- 9 | Colors 10 | ---------------------*/ 11 | :root { 12 | --lightgray: #efefef; 13 | --blue: steelblue; 14 | --white: #ffffff; 15 | --black: #121212; 16 | --default: #ffeb3b; 17 | --green: #9ccc65; 18 | --orange: #ffc107; 19 | --blue: #00bcd4; 20 | --dark-orange: #ff5722; 21 | --gray: #b0bec5; 22 | --purple: #b39ddb; 23 | --dark-purple: #5e3682; 24 | --light-purple: #f06292; 25 | --brown: #8d6e63; 26 | --water: #4DB6A8; 27 | --red: #dc3545; 28 | } 29 | 30 | /*-------------------- 31 | General 32 | ---------------------*/ 33 | hr { background: #777; } 34 | 35 | /*-------------------- 36 | Overlay/Container 37 | ---------------------*/ 38 | .xsoverlay { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.8); top: 0;bottom: 0;left: 0;right: 0; } 39 | .xs-btn-container { width: 100%;text-align: center;} 40 | 41 | /*-------------------- 42 | Positions 43 | ---------------------*/ 44 | .xsalert-center {max-width: 32%;height: fit-content;position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;padding: 1rem;background: var(--brown);transition: all 0.4s ease-in;margin: auto;color: var(--white);border-radius: 12px;align-content: space-around;flex-wrap: wrap;align-items: stretch;} 45 | .xsalert-top-left { max-width: 32%; height: fit-content; position: fixed; top: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--brown); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-left: 20px;} 46 | .xsalert-top-right { max-width: 32%; height: fit-content; position: fixed; top: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--brown); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-right: 20px;} 47 | .xsalert-bottom-left { max-width: 32%; height: fit-content; position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--brown); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;margin-left: 20px;} 48 | .xsalert-bottom-right { max-width: 32%; height: fit-content; position: fixed; bottom: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--brown); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;right: 20px;} 49 | 50 | 51 | /*-------------------- 52 | Title and Message 53 | ---------------------*/ 54 | .xs-title { width: 100%; font-weight: 600; padding: 10px; text-align: center; font-size: 32px;} 55 | .xs-message {width: 100%;font-weight: 400;padding: 10px;margin: auto;text-align: center;color: #f1f1f1;} 56 | .xs-footer {width: 100%;font-weight: 400;padding: 10px;margin: auto;text-align: center;margin-top: 12px;} 57 | .xs-footer a { color: #ffffff; } 58 | .xs-footer a:hover { text-decoration: underline; } 59 | 60 | /*-------------------- 61 | Buttons 62 | ---------------------*/ 63 | .xs-ok-btn {cursor: pointer;background: #1a1233;border: none;outline: none;font-size: inherit;font-family: inherit;color: var(--white);padding: 10px 10px;border-radius: 8px;min-width: 100px;transition: .3s ease;margin-top: 20px;margin-right: 5px;} 64 | .xs-ok-btn:hover { background: #ffffff; color: var(--light-purple); } 65 | .xs-ok-btn:focus { border: 3px solid #aacef3; } 66 | .xs-cancel-btn { cursor: pointer; background: var(--lightgray); border: none; outline: none; font-size: inherit; font-family: inherit; color: var(--black); padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px;} 67 | .xs-cancel-btn:hover { background: #121212; color: #f1f1f1; } 68 | .xs-third-btn { cursor: pointer; background: var(--orange); border: none; outline: none; font-size: inherit; font-family: inherit; color: #121221; padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px; margin-right: 8px;} 69 | .xs-third-btn:hover { background: #121212; color: #f1f1f1; } 70 | 71 | /*-------------------- 72 | Icons & Image 73 | ---------------------*/ 74 | .xs-icon { width: 100%; text-align: center;} 75 | .xs-icon img { width: 80px; } 76 | .xs-image img { width: 100%;object-fit: cover; margin-top: 10px; border-radius: 10px;} 77 | 78 | /*-------------------- 79 | Inputs 80 | ---------------------*/ 81 | .xs-input {width: 92%;border: 1px solid #121212;border-radius: 6px;padding: 6px 10px;font-size: 14px;background: #4a352f;color: #fff;} 82 | .xs-textarea { width: 92%; border: 1px solid #121212; border-radius: 6px; padding: 6px 10px; font-size: 14px;height: 80px; white-space: pre-wrap; } 83 | .xs-select { color: #121212; width: 90%;height: 38px;border-radius: 6px;} 84 | 85 | /*-------------------- 86 | Progress Bar 87 | ---------------------*/ 88 | .xs-progress-bar { background: #f9fafb; height: 7px; width: 98%; border-radius: 99px;bottom: 4px;position: fixed;} 89 | .xs-progress-icon { width: 40px; margin-bottom: 10px;} 90 | 91 | /*-------------------- 92 | Animations 93 | ---------------------*/ 94 | .scale-up-center{animation:scale-up-center 0.4s ease both; } @keyframes scale-up-center{ 0%{transform:scale(0)} 100%{transform:scale(1)} } 95 | .scale-up-top{animation:scale-up-top 0.4s ease both; } @keyframes scale-up-top{0%{transform:scale(0);transform-origin:center top}100%{transform:scale(1);transform-origin:center top}} 96 | .scale-up-bottom{animation:scale-up-bottom 0.4s ease both; } @keyframes scale-up-bottom{0%{transform:scale(0);transform-origin:center bottom}100%{transform:scale(1);transform-origin:center bottom}} 97 | .slide-top{animation:slide-top 0.4s ease both; } @keyframes slide-top{0%{transform:translateY(-2000px)}100%{transform:translateY(0px)}} 98 | .slide-bottom{animation:slide-bottom 0.4s ease both}@keyframes slide-bottom{0%{transform:translateY(2000px)}100%{transform:translateY(0px)}} 99 | .jello-horizontal{animation:jello-horizontal .6s linear both} @keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}} 100 | .jello-vertical{animation:jello-vertical .6s ease both; } @keyframes jello-vertical{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}} 101 | .jello-diagonal{animation:jello-diagonal .6s ease both; } @keyframes jello-diagonal{0%{transform:skew(0deg 0deg)}30%{transform:skew(25deg 25deg)}40%{transform:skew(-15deg,-15deg)}50%{transform:skew(15deg,15deg)}65%{transform:skew(-5deg,-5deg)}75%{transform:skew(5deg,5deg)}100%{transform:skew(0deg 0deg)}} 102 | .rotate-top{animation:rotate-top 0.4s linear} @keyframes rotate-top{0%{transform:rotate(0);transform-origin:top}100%{transform:rotate(360deg);transform-origin:top}} 103 | .rotate-scale-up{animation:rotate-scale-up 0.4s linear both} @keyframes rotate-scale-up{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(2) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 104 | .rotate-scale-down{animation:rotate-scale-down 0.4s linear both} @keyframes rotate-scale-down{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(.5) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 105 | .rotate-scale-up-horizontal{animation:rotate-scale-up-horizontal 0.4s linear both} @keyframes rotate-scale-up-horizontal{0%{transform:scale(1) rotateX(0)}50%{transform:scale(2) rotateX(-180deg)}100%{transform:scale(1) rotateX(-360deg)}} 106 | .rotate-scale-up-vertical{animation:rotate-scale-up-vertical 0.4s linear both} @keyframes rotate-scale-up-vertical{0%{transform:scale(1) rotateY(0)}50%{transform:scale(2) rotateY(180deg)}100%{transform:scale(1) rotateY(360deg)}} 107 | .blur-in{animation:blur-in 0.4s linear both} @keyframes blur-in{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}} 108 | .shake-horizontal{animation:shake-horizontal 0.8s linear both} @keyframes shake-horizontal{0%,100%{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}} 109 | .shake-left-right{animation:shake-left-right 0.8s linear both} @keyframes shake-left-right{0%,100%{transform:rotate(0deg);transform-origin:50% 50%}10%{transform:rotate(8deg)}20%,40%,60%{transform:rotate(-10deg)}30%,50%,70%{transform:rotate(10deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}} 110 | .bounce-top{animation:bounce-top .9s linear both} @keyframes bounce-top{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}} 111 | 112 | /* Closing animation */ 113 | .closing-anim{animation:closing-anim 0.2s ease both } @keyframes closing-anim{0%{transform:scale(1)}100%{transform:scale(0)}} 114 | 115 | 116 | /*-------------------- 117 | Media Queries 118 | ---------------------*/ 119 | 120 | /* Tablet */ 121 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 122 | .xsalert-center { max-width: 70%;} 123 | .xsalert-top-right { max-width: 60%;} 124 | .xsalert-top-left { max-width: 60%;} 125 | .xsalert-bottom-right { max-width: 60%;} 126 | .xsalert-bottom-left { max-width: 60%;} 127 | } 128 | 129 | /* Tablet small screen*/ 130 | @media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 131 | .xsalert-center { max-width: 70%;} 132 | .xsalert-top-right { max-width: 60%;} 133 | .xsalert-top-left { max-width: 60%;} 134 | .xsalert-bottom-right { max-width: 60%;} 135 | .xsalert-bottom-left { max-width: 60%;} 136 | } 137 | 138 | /* Tablet Landscape */ 139 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { 140 | .xsalert-center { max-width: 40%;} 141 | } 142 | 143 | /* iPhone */ 144 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 145 | .xsalert-center { max-width: 90%;} 146 | .xsalert-top-right { max-width: 70%;} 147 | .xsalert-top-right { max-width: 70%;} 148 | .xsalert-top-left { max-width: 70%;} 149 | .xsalert-bottom-right { max-width: 70%;} 150 | .xsalert-bottom-left { max-width: 70%;} 151 | } 152 | 153 | /* iPhone Landscape */ 154 | @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 155 | .xsalert-center { max-width: 40%;} 156 | } -------------------------------------------------------------------------------- /src/themes/purple-theme.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------- 2 | XSAlert - Purple Theme 3 | Made by Frank Eno - XSGames 4 | URL: https://xsgames.co/xsalert 5 | Twitter: @xsgames_ 6 | --------------------------------------*/ 7 | 8 | /*-------------------- 9 | Colors 10 | ---------------------*/ 11 | :root { 12 | --lightgray: #efefef; 13 | --blue: steelblue; 14 | --white: #ffffff; 15 | --black: #121212; 16 | --default: #ffeb3b; 17 | --green: #9ccc65; 18 | --orange: #ffc107; 19 | --blue: #00bcd4; 20 | --dark-orange: #ff5722; 21 | --gray: #b0bec5; 22 | --purple: #b39ddb; 23 | --dark-purple: #5e3682; 24 | --light-purple: #f06292; 25 | --brown: #8d6e63; 26 | --water: #4DB6A8; 27 | --red: #dc3545; 28 | } 29 | 30 | /*-------------------- 31 | General 32 | ---------------------*/ 33 | hr { background: #777; } 34 | 35 | /*-------------------- 36 | Overlay/Container 37 | ---------------------*/ 38 | .xsoverlay { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.8); top: 0;bottom: 0;left: 0;right: 0; } 39 | .xs-btn-container { width: 100%;text-align: center;} 40 | 41 | /*-------------------- 42 | Positions 43 | ---------------------*/ 44 | .xsalert-center {max-width: 32%;height: fit-content;position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;padding: 1rem;background: var(--dark-purple);transition: all 0.4s ease-in;margin: auto;color: var(--white);border-radius: 12px;align-content: space-around;flex-wrap: wrap;align-items: stretch;} 45 | .xsalert-top-left { max-width: 32%; height: fit-content; position: fixed; top: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--dark-purple); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-left: 20px;} 46 | .xsalert-top-right { max-width: 32%; height: fit-content; position: fixed; top: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--dark-purple); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-top: 20px;margin-right: 20px;} 47 | .xsalert-bottom-left { max-width: 32%; height: fit-content; position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; padding: 1rem; background: var(--dark-purple); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;margin-left: 20px;} 48 | .xsalert-bottom-right { max-width: 32%; height: fit-content; position: fixed; bottom: 0; right: 0; display: flex; justify-content: center; padding: 1rem; background: var(--dark-purple); transition: all 0.4s ease-in; margin: auto; color: var(--white); border-radius: 12px; align-content: space-around;flex-wrap: wrap;align-items: stretch; margin-bottom: 20px;right: 20px;} 49 | 50 | 51 | /*-------------------- 52 | Title and Message 53 | ---------------------*/ 54 | .xs-title { width: 100%; font-weight: 600; padding: 10px; text-align: center; font-size: 32px;} 55 | .xs-message {width: 100%;font-weight: 400;padding: 10px;margin: auto;text-align: center;color: #f1f1f1;} 56 | .xs-footer {width: 100%;font-weight: 400;padding: 10px;margin: auto;text-align: center;margin-top: 12px;} 57 | .xs-footer a { color: #ffffff; } 58 | .xs-footer a:hover { text-decoration: underline; } 59 | 60 | /*-------------------- 61 | Buttons 62 | ---------------------*/ 63 | .xs-ok-btn {cursor: pointer;background: #1a1233;border: none;outline: none;font-size: inherit;font-family: inherit;color: var(--white);padding: 10px 10px;border-radius: 8px;min-width: 100px;transition: .3s ease;margin-top: 20px;margin-right: 5px;} 64 | .xs-ok-btn:hover { background: #ffffff; color: var(--light-purple); } 65 | .xs-ok-btn:focus { border: 3px solid #aacef3; } 66 | .xs-cancel-btn { cursor: pointer; background: var(--lightgray); border: none; outline: none; font-size: inherit; font-family: inherit; color: var(--black); padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px;} 67 | .xs-cancel-btn:hover { background: #121212; color: #f1f1f1; } 68 | .xs-third-btn { cursor: pointer; background: var(--orange); border: none; outline: none; font-size: inherit; font-family: inherit; color: #121221; padding: 10px 10px; border-radius: 8px; min-width: 100px; margin-top: 20px; margin-right: 8px;} 69 | .xs-third-btn:hover { background: #121212; color: #f1f1f1; } 70 | 71 | /*-------------------- 72 | Icons & Image 73 | ---------------------*/ 74 | .xs-icon { width: 100%; text-align: center;} 75 | .xs-icon img { width: 80px; } 76 | .xs-image img { width: 100%;object-fit: cover; margin-top: 10px; border-radius: 10px;} 77 | 78 | /*-------------------- 79 | Inputs 80 | ---------------------*/ 81 | .xs-input {width: 92%;border: 1px solid #121212;border-radius: 6px;padding: 6px 10px;font-size: 14px;background: #33184e;color: #fff;} 82 | .xs-textarea { width: 92%; border: 1px solid #121212; border-radius: 6px; padding: 6px 10px; font-size: 14px;height: 80px; white-space: pre-wrap; } 83 | .xs-select { color: #121212; width: 90%;height: 38px;border-radius: 6px;} 84 | 85 | /*-------------------- 86 | Progress Bar 87 | ---------------------*/ 88 | .xs-progress-bar { background: #f9fafb; height: 7px; width: 98%; border-radius: 99px;bottom: 4px;position: fixed;} 89 | .xs-progress-icon { width: 40px; margin-bottom: 10px;} 90 | 91 | /*-------------------- 92 | Animations 93 | ---------------------*/ 94 | .scale-up-center{animation:scale-up-center 0.4s ease both; } @keyframes scale-up-center{ 0%{transform:scale(0)} 100%{transform:scale(1)} } 95 | .scale-up-top{animation:scale-up-top 0.4s ease both; } @keyframes scale-up-top{0%{transform:scale(0);transform-origin:center top}100%{transform:scale(1);transform-origin:center top}} 96 | .scale-up-bottom{animation:scale-up-bottom 0.4s ease both; } @keyframes scale-up-bottom{0%{transform:scale(0);transform-origin:center bottom}100%{transform:scale(1);transform-origin:center bottom}} 97 | .slide-top{animation:slide-top 0.4s ease both; } @keyframes slide-top{0%{transform:translateY(-2000px)}100%{transform:translateY(0px)}} 98 | .slide-bottom{animation:slide-bottom 0.4s ease both}@keyframes slide-bottom{0%{transform:translateY(2000px)}100%{transform:translateY(0px)}} 99 | .jello-horizontal{animation:jello-horizontal .6s linear both} @keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}} 100 | .jello-vertical{animation:jello-vertical .6s ease both; } @keyframes jello-vertical{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}} 101 | .jello-diagonal{animation:jello-diagonal .6s ease both; } @keyframes jello-diagonal{0%{transform:skew(0deg 0deg)}30%{transform:skew(25deg 25deg)}40%{transform:skew(-15deg,-15deg)}50%{transform:skew(15deg,15deg)}65%{transform:skew(-5deg,-5deg)}75%{transform:skew(5deg,5deg)}100%{transform:skew(0deg 0deg)}} 102 | .rotate-top{animation:rotate-top 0.4s linear} @keyframes rotate-top{0%{transform:rotate(0);transform-origin:top}100%{transform:rotate(360deg);transform-origin:top}} 103 | .rotate-scale-up{animation:rotate-scale-up 0.4s linear both} @keyframes rotate-scale-up{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(2) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 104 | .rotate-scale-down{animation:rotate-scale-down 0.4s linear both} @keyframes rotate-scale-down{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(.5) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}} 105 | .rotate-scale-up-horizontal{animation:rotate-scale-up-horizontal 0.4s linear both} @keyframes rotate-scale-up-horizontal{0%{transform:scale(1) rotateX(0)}50%{transform:scale(2) rotateX(-180deg)}100%{transform:scale(1) rotateX(-360deg)}} 106 | .rotate-scale-up-vertical{animation:rotate-scale-up-vertical 0.4s linear both} @keyframes rotate-scale-up-vertical{0%{transform:scale(1) rotateY(0)}50%{transform:scale(2) rotateY(180deg)}100%{transform:scale(1) rotateY(360deg)}} 107 | .blur-in{animation:blur-in 0.4s linear both} @keyframes blur-in{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}} 108 | .shake-horizontal{animation:shake-horizontal 0.8s linear both} @keyframes shake-horizontal{0%,100%{transform:translateX(0)}10%,30%,50%,70%{transform:translateX(-10px)}20%,40%,60%{transform:translateX(10px)}80%{transform:translateX(8px)}90%{transform:translateX(-8px)}} 109 | .shake-left-right{animation:shake-left-right 0.8s linear both} @keyframes shake-left-right{0%,100%{transform:rotate(0deg);transform-origin:50% 50%}10%{transform:rotate(8deg)}20%,40%,60%{transform:rotate(-10deg)}30%,50%,70%{transform:rotate(10deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}} 110 | .bounce-top{animation:bounce-top .9s linear both} @keyframes bounce-top{0%{transform:translateY(-45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-24px);animation-timing-function:ease-in}65%{transform:translateY(-12px);animation-timing-function:ease-in}82%{transform:translateY(-6px);animation-timing-function:ease-in}93%{transform:translateY(-4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}} 111 | 112 | /* Closing animation */ 113 | .closing-anim{animation:closing-anim 0.2s ease both } @keyframes closing-anim{0%{transform:scale(1)}100%{transform:scale(0)}} 114 | 115 | 116 | /*-------------------- 117 | Media Queries 118 | ---------------------*/ 119 | 120 | /* Tablet */ 121 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 122 | .xsalert-center { max-width: 70%;} 123 | .xsalert-top-right { max-width: 60%;} 124 | .xsalert-top-left { max-width: 60%;} 125 | .xsalert-bottom-right { max-width: 60%;} 126 | .xsalert-bottom-left { max-width: 60%;} 127 | } 128 | 129 | /* Tablet small screen*/ 130 | @media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { 131 | .xsalert-center { max-width: 70%;} 132 | .xsalert-top-right { max-width: 60%;} 133 | .xsalert-top-left { max-width: 60%;} 134 | .xsalert-bottom-right { max-width: 60%;} 135 | .xsalert-bottom-left { max-width: 60%;} 136 | } 137 | 138 | /* Tablet Landscape */ 139 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { 140 | .xsalert-center { max-width: 40%;} 141 | } 142 | 143 | /* iPhone */ 144 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 145 | .xsalert-center { max-width: 90%;} 146 | .xsalert-top-right { max-width: 70%;} 147 | .xsalert-top-right { max-width: 70%;} 148 | .xsalert-top-left { max-width: 70%;} 149 | .xsalert-bottom-right { max-width: 70%;} 150 | .xsalert-bottom-left { max-width: 70%;} 151 | } 152 | 153 | /* iPhone Landscape */ 154 | @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 155 | .xsalert-center { max-width: 40%;} 156 | } -------------------------------------------------------------------------------- /src/xsalert.js: -------------------------------------------------------------------------------- 1 | /* Global */ 2 | var fileData; 3 | var isChecked; 4 | /* Function */ 5 | function XSAlert({ 6 | icon, 7 | title, 8 | titleColor, 9 | titleFontSize, 10 | titleFontFamily, 11 | message, 12 | messageColor, 13 | messageFontSize, 14 | messageFontFamily, 15 | position, 16 | animation, 17 | okButtonText, 18 | cancelButtonText, 19 | thirdButtonText, 20 | okButtonBackgroundColor, 21 | okButtonTextColor, 22 | cancelButtonBackgroundColor, 23 | cancelButtonTextColor, 24 | thirdButtonBackgroundColor, 25 | thirdButtonTextColor, 26 | hideOkButton, 27 | hideCancelButton, 28 | buttonBorderRadius, 29 | closeOnOutsideClick, 30 | closeWithESC, 31 | backgroundColor, 32 | borderSize, 33 | borderColor, 34 | borderRadius, 35 | buttonsOnLeft, 36 | buttonsOnRight, 37 | boxShadow, 38 | overlayImageURL, 39 | footer, 40 | inputType, 41 | inputPlaceholder, 42 | inputValue, 43 | inputAttributes, 44 | imageURL, 45 | imageWidth, 46 | imageHeight, 47 | autoCloseTimer, 48 | hideProgressBar, 49 | hideProgressIcon, 50 | }) { 51 | return new Promise(function(resolve, reject) { 52 | setTimeout(function(){ 53 | if(animation == null){ animation = 'scale-up-center'; } 54 | if(okButtonText == null){ okButtonText = 'OK'; } 55 | if(cancelButtonText == null){ cancelButtonText = 'Cancel'; } 56 | if(position == null){ position = 'center'; } 57 | 58 | /* Icons */ 59 | if(icon == 'success'){ icon = 'https://xsgames.co/xsalert/icons/success.png'; }; 60 | if(icon == 'warning'){ icon = 'https://xsgames.co/xsalert/icons/warning.png'; }; 61 | if(icon == 'error'){ icon = 'https://xsgames.co/xsalert/icons/error.png'; }; 62 | if(icon == 'question'){ icon = 'https://xsgames.co/xsalert/icons/question.png'; }; 63 | if(icon == 'notification'){ icon = 'https://xsgames.co/xsalert/icons/notification.png'; }; 64 | if(icon == 'like'){ icon = 'https://xsgames.co/xsalert/icons/like.png'; }; 65 | if(icon == 'thumbup'){ icon = 'https://xsgames.co/xsalert/icons/thumbup.png'; }; 66 | if(icon == 'thumbdown'){ icon = 'https://xsgames.co/xsalert/icons/thumbdown.png'; }; 67 | 68 | /* Build Alert */ 69 | $('body').append( 70 | '
'+ 71 | '
'+ 72 | '
'+ 73 | '
'+ 74 | '
'+title+'
'+message+'
'+ 75 | ''+ 76 | ''+ 77 | ''+ 78 | '
'+ 79 | ''+ 80 | '
'+ 81 | '
' 82 | ); 83 | 84 | /* Additional styles/actions */ 85 | if(title == null) { $('#xs-title').remove(); } 86 | if(titleColor != null) { $('#xs-title').css('color', titleColor); } 87 | if(message == null) { $('#xs-message').remove(); } 88 | if(messageColor != null) { $('#xs-message').css('color', messageColor); } 89 | if(borderSize != null) { $('#xsalert').css('border', borderSize+' solid ' +borderColor); } 90 | if(borderRadius != null) { $('#xsalert').css('border-radius', borderRadius); } 91 | if(okButtonBackgroundColor != null) { $('#xs-ok-btn').css('background', okButtonBackgroundColor); } 92 | if(okButtonTextColor != null) { $('#xs-ok-btn').css('color', okButtonTextColor); } 93 | if(cancelButtonBackgroundColor != null) { $('#xs-cancel-btn').css('background', cancelButtonBackgroundColor); } 94 | if(cancelButtonTextColor != null) { $('#xs-cancel-btn').css('color', cancelButtonTextColor); } 95 | if(thirdButtonBackgroundColor != null) { $('#xs-third-btn').css('background', thirdButtonBackgroundColor); } 96 | if(thirdButtonTextColor != null) { $('#xs-third-btn').css('color', thirdButtonTextColor); } 97 | if(hideCancelButton == true) { $("#xs-cancel-btn").remove(); } 98 | if(hideOkButton == true) { $("#xs-ok-btn").remove(); } 99 | if(backgroundColor != null) { $('#xsalert').css('background', backgroundColor); } 100 | if(overlayImageURL != null) { $('#xsoverlay').css('background', 'url("'+overlayImageURL+'")'); } 101 | if(buttonsOnLeft == true) { $('#xs-btn-container').css('text-align', 'left'); } 102 | if(buttonsOnRight == true) { $('#xs-btn-container').css('text-align', 'right'); } 103 | if(boxShadow != null) { $('#xsalert').css('box-shadow', boxShadow); } 104 | if(titleFontSize != null) { $('#xs-title').css('font-size', titleFontSize); } 105 | if(messageFontSize != null) { $('#xs-message').css('font-size', messageFontSize); } 106 | if(titleFontFamily != null) { $('#xs-title').css('font-family', titleFontFamily); } 107 | if(messageFontFamily != null) { $('#xs-message').css('font-family', messageFontFamily); } 108 | if(hideProgressBar == true) { $("#xs-progress-bar").remove(); } 109 | if(hideProgressIcon == true) { $("#xs-progress-icon").remove();} 110 | if(autoCloseTimer == null) { $("#xs-progress-bar").remove(); $("#xs-progress-icon").remove(); 111 | } else { 112 | var elem = document.getElementById("xs-progress-bar"); 113 | var width = 0; var id = setInterval(frame, autoCloseTimer/100); 114 | function frame() { if (width >= 98) { clearInterval(id); resolve('autoClosed'); closeXSAlert(); } else { width++; elem.style.width = width + '%'; } } 115 | } 116 | if(footer == null) { $('#xs-footer').remove(); } 117 | if(icon == null) { $('#xs-icon').remove(); } 118 | if(imageURL == null) { $('#xs-image').remove(); } 119 | if(thirdButtonText == null) { $('#xs-third-btn').remove(); } 120 | if(buttonBorderRadius != null) { 121 | $('#xs-ok-btn').css('border-radius', buttonBorderRadius); 122 | $('#xs-cancel-btn').css('border-radius', buttonBorderRadius); 123 | $('#xs-third-btn').css('border-radius', buttonBorderRadius); 124 | } 125 | 126 | if(inputType == null) { $('#xs-input').remove(); $('#xs-textarea').remove(); $('#xs-select').remove(); } 127 | if(inputValue == null) { $('#xs-input').val(''); $('#xs-textarea').text(''); } 128 | 129 | switch(inputType){ 130 | case 'text': $('#xs-textarea').remove(); $('#xs-select').remove(); break; 131 | case 'textarea': $('#xs-input').remove(); $('#xs-select').remove(); break; 132 | case 'password': $('#xs-textarea').remove(); $('#xs-select').remove(); break; 133 | case 'url': $('#xs-textarea').remove(); $('#xs-select').remove(); break; 134 | case 'email': $('#xs-textarea').remove(); $('#xs-select').remove(); break; 135 | case 'datetime-local': $('#xs-textarea').remove(); $('#xs-select').remove(); break; 136 | case 'date': $('#xs-textarea').remove(); $('#xs-select').remove(); break; 137 | case 'number': $('#xs-textarea').remove(); $('#xs-select').remove(); break; 138 | case 'range': 139 | $('#xs-textarea').remove(); $('#xs-select').remove(); 140 | if(inputAttributes == null){ $("#xs-input").attr("min", 0); $("#xs-input").attr("max", 100); $("#xs-input").attr("step", 1); 141 | } else { $("#xs-input").attr("min", inputAttributes['min']); $("#xs-input").attr("max", inputAttributes['max']); $("#xs-input").attr("step", inputAttributes['step']); } 142 | $("#xs-input").mousemove(function(){ $("#xs-message").text($('#xs-input').val()) }) 143 | break; 144 | case 'file': $('#xs-textarea').remove(); $('#xs-select').remove(); 145 | if(inputAttributes == null){ $("#xs-input").attr("accept", 'image/*') 146 | } else { $("#xs-input").attr("accept", inputAttributes) } 147 | $('#xs-input').on('change', function(){ 148 | let file = document.querySelector('input[type=file]').files[0]; 149 | let reader = new FileReader(); 150 | reader.addEventListener("load", function () { fileData = reader.result; }, false); 151 | if (file) { reader.readAsDataURL(file); } 152 | }); 153 | break; 154 | case 'select': 155 | $('#xs-textarea').remove(); $('#xs-input').remove(); 156 | if(inputPlaceholder != null){ $('#xs-select').append('') } 157 | for(var i=0;i'+inputValue[i]+''); 159 | } 160 | break; 161 | case 'checkbox': $('#xs-textarea').remove(); $('#xs-select').remove(); 162 | if(inputAttributes == null) { $('#xs-input').prop('checked', '') 163 | } else { 164 | $('#xs-input').prop('checked', inputAttributes); 165 | if($('#xs-input').prop("checked") == true) { isChecked = true; } else { isChecked = false; } 166 | } 167 | if(inputPlaceholder != null) { $('

'+inputPlaceholder+'

').insertAfter('#xs-input'); } 168 | $('#xs-input').on('change', function(){ isChecked = $('#xs-input').is(":checked") }) 169 | break; 170 | 171 | } 172 | 173 | /* Prevent body to scroll behind the alert */ 174 | let body = document.querySelector("body"); body.style.overflow = "hidden"; 175 | /* Overlay onClick */ 176 | if(closeOnOutsideClick){ $('#xsoverlay').click(function() { closeXSAlert(); resolve('outside'); }); } 177 | /* OK button onClick */ 178 | $('#xs-ok-btn').click(function() { closeXSAlert(); resolve('ok') }); 179 | $("#xs-ok-btn").focus(); 180 | /* Cancel button onClick */ 181 | $('#xs-cancel-btn').click(function() { closeXSAlert(); resolve('cancel') }); 182 | /* Third button onClick */ 183 | $('#xs-third-btn').click(function() { closeXSAlert(); resolve('third') }); 184 | /* Close with ESC key */ 185 | if(closeWithESC != null && closeWithESC) { $('#xsalert').on('keydown', function(event) { if (event.key == "Escape") { closeXSAlert() } }) } 186 | }, 210); 187 | }) 188 | } 189 | /* Close XSAlert */ 190 | function closeXSAlert(){ 191 | $('#xsalert').addClass('closing-anim'); 192 | /* Make body scrollable again */ 193 | let body = document.querySelector("body"); 194 | body.style.overflow = "auto"; 195 | setTimeout(function(){ 196 | $("#xsalert").each(function() { $(this).remove(); }) 197 | $("#xsoverlay").remove(); 198 | }, 100); 199 | } 200 | -------------------------------------------------------------------------------- /src/jquery.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */ 2 | !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=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},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&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,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.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(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(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),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-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|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(p.childNodes),p.childNodes),t[p.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&&(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&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$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[S]=!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&&e.namespaceURI,n=e&&(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:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),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=S,!C.getElementsByName||!C.getElementsByName(S).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){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),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("!=",F)}),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},j=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==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,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]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[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){N(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=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(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)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.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 S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.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(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(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;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={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)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").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 _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.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(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.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?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="
",2===_t.childNodes.length),S.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=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.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,S.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)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.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"===S.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"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.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)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.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?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.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){S.fn[n]=function(e,t){return 0