├── .gitattributes ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── docs ├── favicon │ └── favicon.svg ├── index.html ├── script.js └── style.css ├── swalt.js └── swalt.min.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | 3 | *.jpg binary 4 | *.png binary 5 | *.svg binary -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | You can also talk about the contributions you are going to make by opening a new discussion 7 | 8 | Please note we have a code of conduct, please follow it in all your interactions with the project. 9 | 10 | ## Code of Conduct 11 | 12 | ### Our Pledge 13 | 14 | In the interest of fostering an open and welcoming environment, we as 15 | contributors and maintainers pledge to making participation in our project and 16 | our community a harassment-free experience for everyone, regardless of age, body 17 | size, disability, ethnicity, gender identity and expression, level of experience, 18 | nationality, personal appearance, race, religion, or sexual identity and 19 | orientation. 20 | 21 | ### Our Standards 22 | 23 | Examples of behavior that contributes to creating a positive environment 24 | include: 25 | 26 | * Using welcoming and inclusive language 27 | * Being respectful of differing viewpoints and experiences 28 | * Gracefully accepting constructive criticism 29 | * Focusing on what is best for the community 30 | * Showing empathy towards other community members 31 | 32 | Examples of unacceptable behavior by participants include: 33 | 34 | * The use of sexualized language or imagery and unwelcome sexual attention or 35 | advances 36 | * Trolling, insulting/derogatory comments, and personal or political attacks 37 | * Public or private harassment 38 | * Publishing others' private information, such as a physical or electronic 39 | address, without explicit permission 40 | * Other conduct which could reasonably be considered inappropriate in a 41 | professional setting 42 | 43 | ### Our Responsibilities 44 | 45 | Project maintainers are responsible for clarifying the standards of acceptable 46 | behavior and are expected to take appropriate and fair corrective action in 47 | response to any instances of unacceptable behavior. 48 | 49 | Project maintainers have the right and responsibility to remove, edit, or 50 | reject comments, commits, code, wiki edits, issues, and other contributions 51 | that are not aligned to this Code of Conduct, or to ban temporarily or 52 | permanently any contributor for other behaviors that they deem inappropriate, 53 | threatening, offensive, or harmful. 54 | 55 | ### Scope 56 | 57 | This Code of Conduct applies both within project spaces and in public spaces 58 | when an individual is representing the project or its community. Examples of 59 | representing a project or community include using an official project e-mail 60 | address, posting via an official social media account, or acting as an appointed 61 | representative at an online or offline event. Representation of a project may be 62 | further defined and clarified by project maintainers. 63 | 64 | ### Enforcement 65 | 66 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 67 | reported by contacting the project team at contact.codeninja@gmail.com. All 68 | complaints will be reviewed and investigated and will result in a response that 69 | is deemed necessary and appropriate to the circumstances. The project team is 70 | obligated to maintain confidentiality with regard to the reporter of an incident. 71 | Further details of specific enforcement policies may be posted separately. 72 | 73 | Project maintainers who do not follow or enforce the Code of Conduct in good 74 | faith may face temporary or permanent repercussions as determined by other 75 | members of the project's leadership. 76 | 77 | Homepage: https://turbo-browser.netlify.app/
78 | Releases: https://github.com/codeninja02/Swalt/releases 79 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Anonymous 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Turbo Browser svg icon 3 |

4 |

5 | Swalt 6 |

7 |

8 | An amazing replacement for Javascript's default alerts 9 |

10 |

11 | 12 | Turbo Browser website 13 | 14 |

15 |
16 |

17 | An alternate Javascript library to show awesome alerts on your app 18 | It can be used either by CDN or by NPM. CDNs are available in raw as well as minified version. 19 |

20 |

21 | Contents 22 |

23 | 24 | - [Installation](#-----installation) 25 | - [Usage](#-----usage) 26 | - [Templates](#-----templates) 27 | - [Contribution](#-----contribution) 28 | - [Author](#-----author) 29 | - [Links](#-----links) 30 | - [License](#-----license) 31 | 32 |

33 | 💻 Installation 34 |

35 | 36 | ```bash 37 | $ npm install swalt 38 | ``` 39 | 40 |

41 | 📖 Usage 42 |

43 | 44 | ```javascript 45 | import swalt from 'swalt'; 46 | 47 | swalt("Hello world!"); 48 | ``` 49 | 50 |

51 | 🖌 Templates 52 |

53 | 54 | #### Normal Swalt 55 | ```javascript 56 | swalt("Hello world!"); 57 | ``` 58 | 59 | #### Dark Mode Swalt 60 | ```javascript 61 | swalt("Hello World", { 62 | mode: "dark" 63 | }); 64 | ``` 65 | 66 | #### Swalt with Icon 67 | ```javascript 68 | swalt("Hello World", { 69 | showIcon: true 70 | }); 71 | ``` 72 | 73 | #### Swalt with Custom Title 74 | ```javascript 75 | swalt("Hello World", { 76 | title: "My Title" 77 | }); 78 | ``` 79 | 80 | #### Swalt with Input 81 | ```javascript 82 | swalt("Hello World", { 83 | input: true 84 | }); 85 | ``` 86 | 87 |

88 | 👏 Contribution 89 |

90 |

91 | See CONTRIBUTING.md to learn about contribution for swalt. 92 |

93 | 94 |

95 | 💻 Author 96 |

97 | 98 | - [CodeNinja](https://github.com/codeninja02) 99 | 100 |

101 | 🔗 Links 102 |

103 | 104 | - [Homepage](https://swalt.netlify.app/) 105 | - [NPM](https://www.npmjs.com/package/swalt) 106 | - [README](https://github.com/codeninja02/Swalt#readme) 107 | - [LICENSE](https://github.com/codeninja02/Swalt/blob/main/LICENSE) 108 | 109 |

110 | 📄 License 111 |

112 |

113 | This project is licensed under the MIT License, see the LICENSE.md file for details. 114 |

115 | -------------------------------------------------------------------------------- /docs/favicon/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Swalt | Home 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 30 | 31 |
32 |
33 |
34 | 35 |
36 | 37 |
38 |
39 | 40 |
41 | 42 |
43 | 44 | Swalt.js 46 |
47 |
48 | An alternate Javascript library to show awesome alerts on your app 49 |
50 |
51 |
52 | Show Demo Alert 53 |
54 |
55 |
56 | Integration 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 |
65 | 66 |
67 |
68 |
Installation
69 |
70 | Swalt can be used either by CDN or by NPM. CDNs are available in raw as well as minified version. 71 |
72 | 73 |
74 | By NPM 75 |
76 |
77 | $ npm install swalt 78 |
79 |
80 | Then, simply import it into your application: 81 |
82 |
83 | import swalt from "swalt"; 84 |
85 | 86 |
87 | By CDN 88 |
89 |
90 | Just place one of the following script either in your head or body. 91 |
92 | 93 |
94 | 
<script src="https://rawcdn.githack.com/codeninja02/swalt/97a4a2eb9ac34bc10c420083dfd999bb52c7c254/swalt.js"></script>
95 |
96 |
97 | Copy script 98 |
99 | 100 |
101 | 
<script src="https://rawcdn.githack.com/codeninja02/swalt/97a4a2eb9ac34bc10c420083dfd999bb52c7c254/swalt.min.js"></script>
102 |
103 |
104 | Copy minified script 105 |
106 |
107 |
108 | 109 |
110 | 111 | 112 | 113 | 114 | 115 | 118 | 119 | 122 | 123 | 126 | 127 | 130 | 131 | 134 |
135 | 136 |
137 |
138 |
Usage
139 |
140 | Swalt provides some beautiful templates for you to display the alert with input, icon, title and with different themes. 141 |
142 | 143 |
144 | Basic Swalt 145 |
146 |
147 | swalt ( "Hello World! This is a sample swalt template." ) ; 148 |
149 |
150 |
151 | Copy code 152 |
153 |
154 | Run 155 |
156 |
157 | 158 |
159 | 160 |
161 | Swalt with Input [boolean] 162 |
163 |
164 | You can also change the default value of the input by passing the argument defaultValue [string]. The value of the placeholder can be changed by passing the argument inputPlaceholder [string]. 165 |
166 |
167 | swalt ( "Hello World! This is a sample swalt template.", {
 input: true
} ) ; 168 |
169 |
170 |
171 | Copy code 172 |
173 |
174 | Run 175 |
176 |
177 | 178 |
179 | 180 |
181 | Swalt with Icon [boolean] 182 |
183 |
184 | A big thanks to Alexandre Chopin for his awesome SweetAlert Warning Icon for the icon. 185 |
186 |
187 | swalt ( "Hello World! This is a sample swalt template.", {
 showIcon: true
} ) ; 188 |
189 |
190 |
191 | Copy code 192 |
193 |
194 | Run 195 |
196 |
197 | 198 |
199 | 200 |
201 | Swalt in Dark Mode [string] 202 |
203 |
204 | This argument only accepts value dark and light. 205 |
206 |
207 | swalt ( "Hello World! This is a sample swalt template.", {
 mode: "dark"
} ) ; 208 |
209 |
210 |
211 | Copy code 212 |
213 |
214 | Run 215 |
216 |
217 |
218 |
219 | 220 |
221 |
222 |
Advanced Examples
223 |
224 | Here are some advanced references and events which can be used with swalt. 225 |
226 | 227 |
228 | Swalt with Custom Title [string] 229 |
230 |
231 | Just replace My Custom Title with your own desired title to set a custom title for the swalt. 232 |
233 |
234 | swalt ( "Hello World! This is a sample swalt template.", {
 title: "My Custom Title"
} ) ; 235 |
236 |
237 |
238 | Copy code 239 |
240 |
241 | Run 242 |
243 |
244 | 245 |
246 | 247 |
248 | Swalt with Custom Button [string] 249 |
250 |
251 | Just replace My Custom Button with your own desired text for the "Close" Button. 252 |
253 |
254 | swalt ( "Hello World! This is a sample swalt template.", {
 btnValue: "My Custom Button"
} ) ; 255 |
256 |
257 |
258 | Copy code 259 |
260 |
261 | Run 262 |
263 |
264 | 265 |
266 |
267 | 268 |
269 | References 270 |
271 | 272 |
273 | Get reference to the swalt element by the swaltRef object. Below is a given table to get properties of the swaltRef object - 274 |
275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 |
PropertyTypeDescription
swaltRef.elementObjectGets input element of the swalt
swaltRef.valueStringGets value of the swalt
swaltRef.statusBooleanGets status of the swalt if it is open or closed
298 | 299 |
300 |
301 | 302 |
303 | Events 304 |
305 | 306 |
307 | There are also events to indicate if an action happens to the swalt. The events can be passed to the swaltRef.element object. 308 |
309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 |
EventDescription
swaltBtnClickedSwalt "Close" button clicked
swaltClosedSwalt Closed
324 |
325 |
326 | Example on Event - 327 |
328 |
329 | swaltRef.element.addEventListener ( "swaltBtnClicked", function (e) {
330 |  console.log( swaltRef.value );
331 | } ) ; 332 |
333 | 334 |
335 |
336 | 337 |
338 |
339 |
About
340 |
341 | Swalt was originally developed by @Programmer as a open source lightweight replacement for default javascript alerts. Swalt makes popup messages easier and prettier. 342 |
343 |
344 | 345 |
View on Gitub
346 | 347 | 348 |
View on Npm
349 | 350 |
351 | 354 |
355 |
356 | 357 |
358 | Made with by Programmer 359 |
360 |
361 | 362 |
363 |
364 |
365 |
366 | 367 |
368 | Swalt.js 370 |
371 | 372 |
373 |
374 |
375 | Home 376 |
377 |
378 | Installation 379 |
380 |
381 | Usage 382 |
383 |
384 | Advanced Examples 385 |
386 |
387 | About 388 |
389 |
390 | 395 |
396 |
397 | 398 |
399 |
400 | 401 |
402 |
403 |
404 | Home 405 |
406 |
407 | Installation 408 |
409 |
410 | Usage 411 |
412 |
413 | Advanced Examples 414 |
415 |
416 | About 417 |
418 | 419 |
420 | Github 421 |
422 | 423 | 424 |
425 | Instagram 426 |
427 | 428 |
429 |
430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | -------------------------------------------------------------------------------- /docs/script.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | $(function() { 4 | 5 | $('input:not(#alertInput)').attr('readonly','readonly'); 6 | $('textarea').attr('readonly','readonly'); 7 | 8 | $("#sideMenuBTN").on("click", function() { 9 | $("#sideMenu").addClass("ht-60"); 10 | // $(".super-body").addClass("blur-4"); 11 | 12 | }); 13 | 14 | $("#closeSideMenu").on("click", function(){ 15 | $("#sideMenu").removeClass("ht-60"); 16 | // $(".super-body").removeClass("blur-4"); 17 | }); 18 | 19 | var copyLib = new ClipboardJS('.btn'); 20 | 21 | $(".copy-btn").on("click", function (e) { 22 | let thisElText = $(this).text(); 23 | let thisEl = $(this); 24 | $(this).animate({ opacity: 0.2}).text("Copied!").delay(0).animate({ opacity: 1}); 25 | setTimeout(function () { 26 | $(thisEl).text(thisElText); 27 | }, 2000); 28 | }); 29 | 30 | $("#showDemoAlert1").on("click", function (e) { 31 | swalt("Hello there! This is a sample Swalt Alert. There is even much more to it."); 32 | }); 33 | 34 | $("#showIntergration1").on("click", function (e) { 35 | $(".super-body").animate({ 36 | scrollTop: $(".section-1").height() 37 | }, 400); 38 | }); 39 | 40 | $(".s-item-1").on("click", function (e) { 41 | $("#sideMenu").removeClass("ht-60"); 42 | // $(".super-body").removeClass("blur-4"); 43 | $(".super-body").animate({ 44 | scrollTop: 0 45 | }, 400); 46 | }); 47 | 48 | $(".s-item-2").on("click", function (e) { 49 | $("#sideMenu").removeClass("ht-60"); 50 | // $(".super-body").removeClass("blur-4"); 51 | $(".super-body").animate({ 52 | scrollTop: $(".section-1").height() 53 | }, 400); 54 | }); 55 | 56 | $(".s-item-3").on("click", function (e) { 57 | $("#sideMenu").removeClass("ht-60"); 58 | // $(".super-body").removeClass("blur-4"); 59 | $(".super-body").animate({ 60 | scrollTop: $(".section-1").height() + $(".section-2-super").height() 61 | }, 400); 62 | }); 63 | 64 | $(".s-item-4").on("click", function (e) { 65 | $("#sideMenu").removeClass("ht-60"); 66 | // $(".super-body").removeClass("blur-4"); 67 | $(".super-body").animate({ 68 | scrollTop: $(".section-1").height() + $(".section-2-super").height() + $(".section-3-BBBB").height() 69 | }, 400); 70 | }); 71 | 72 | $(".s-item-5").on("click", function (e) { 73 | $("#sideMenu").removeClass("ht-60"); 74 | // $(".super-body").removeClass("blur-4"); 75 | $(".super-body").animate({ 76 | scrollTop: $(".section-1").height() + $(".section-2-super").height() + $(".section-3-BBBB").height() + $(".section-3-CCCC").height() 77 | }, 400); 78 | }); 79 | 80 | // Navbar 81 | 82 | $(".nav-1").on("click", function (e) { 83 | $("#sideMenu").removeClass("ht-60"); 84 | // $(".super-body").removeClass("blur-4"); 85 | $(".super-body").animate({ 86 | scrollTop: 0 87 | }, 400); 88 | }); 89 | 90 | $(".nav-2").on("click", function (e) { 91 | $("#sideMenu").removeClass("ht-60"); 92 | // $(".super-body").removeClass("blur-4"); 93 | $(".super-body").animate({ 94 | scrollTop: $(".section-1").height() 95 | }, 400); 96 | }); 97 | 98 | $(".nav-3").on("click", function (e) { 99 | $("#sideMenu").removeClass("ht-60"); 100 | // $(".super-body").removeClass("blur-4"); 101 | $(".super-body").animate({ 102 | scrollTop: $(".section-1").height() + $(".section-2-super").height() 103 | }, 400); 104 | }); 105 | 106 | $(".nav-4").on("click", function (e) { 107 | $("#sideMenu").removeClass("ht-60"); 108 | // $(".super-body").removeClass("blur-4"); 109 | $(".super-body").animate({ 110 | scrollTop: $(".section-1").height() + $(".section-2-super").height() + $(".section-3-BBBB").height() 111 | }, 400); 112 | }); 113 | 114 | $(".nav-5").on("click", function (e) { 115 | $("#sideMenu").removeClass("ht-60"); 116 | // $(".super-body").removeClass("blur-4"); 117 | $(".super-body").animate({ 118 | scrollTop: $(".section-1").height() + $(".section-2-super").height() + $(".section-3-BBBB").height() + $(".section-3-CCCC").height() 119 | }, 400); 120 | }); 121 | 122 | $("#sBtn1").on("click", function(){ 123 | swalt ( "Hello World! This is a sample swalt template.", { 124 |  input: false, 125 | showIcon: false 126 | } ) ; 127 | }); 128 | 129 | $("#sBtn2").on("click", function(){ 130 | swalt ( "Hello World! This is a sample swalt template.", { 131 |  input: true 132 | } ) ; 133 | }); 134 | 135 | $("#sBtn3").on("click", function(){ 136 | swalt ( "Hello World! This is a sample swalt template.", { 137 |  showIcon: true 138 | } ) ; 139 | }); 140 | 141 | $("#sBtn4").on("click", function(){ 142 | swalt ( "Hello World! This is a sample swalt template.", { 143 |  mode: "dark" 144 | } ) ; 145 | }); 146 | 147 | $("#sBtn5").on("click", function(){ 148 | swalt ( "Hello World! This is a sample swalt template.", { 149 |  title: "My Custom Title" 150 | } ) ; 151 | }); 152 | 153 | $("#sBtn6").on("click", function(){ 154 | swalt ( "Hello World! This is a sample swalt template.", { 155 |  btnValue: "My Custom Button" 156 | } ) ; 157 | }); 158 | 159 | 160 | 161 | 162 | 163 | }); 164 | 165 | -------------------------------------------------------------------------------- /docs/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); 2 | /* font-family: 'Roboto', sans-serif; */ 3 | @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap'); 4 | /* font-family: 'Rubik', sans-serif; */ 5 | 6 | *{ 7 | padding: 0; 8 | margin: 0; 9 | -webkit-tap-highlight-color: rgba(0,0,0,0); 10 | box-sizing: border-box; 11 | } 12 | 13 | body{ 14 | padding: 0; 15 | margin: 0; 16 | } 17 | 18 | ::-moz-selection { 19 | background: rgb(2 201 240 / 20%); 20 | } 21 | 22 | ::selection { 23 | background: rgb(2 201 240 / 10%); 24 | } 25 | 26 | @font-face { 27 | font-family: HelveticaNormal; 28 | src: url("https://res.cloudinary.com/dp1xkuswt/raw/upload/v1597987314/Helvetica_uld9sz.ttf"); 29 | } 30 | 31 | @font-face { 32 | font-family: ConsolasNormal; 33 | src: url("https://res.cloudinary.com/dpj9ddsjf/raw/upload/v1603251744/CONSOLA_kiywpx.TTF"); 34 | } 35 | 36 | a{ 37 | text-decoration: none; 38 | } 39 | 40 | a:hover{ 41 | text-decoration: none; 42 | } 43 | 44 | input:focus, textarea:focus, select:focus{ 45 | outline: none; 46 | } 47 | 48 | .flex{ 49 | display: flex; 50 | } 51 | 52 | .hidden{ 53 | display: none; 54 | } 55 | 56 | .invisible{ 57 | transition: 1s; 58 | opacity: 0 !important; 59 | } 60 | 61 | img{ 62 | object-fit: cover; 63 | } 64 | 65 | .super-body{ 66 | position: fixed; 67 | top: 0; 68 | left: 0; 69 | overflow: hidden; 70 | overflow-y: scroll; 71 | height: 100vh; 72 | width: 100%; 73 | transition: 0.2s; 74 | } 75 | 76 | .blur-4{ 77 | filter: blur(4px); 78 | } 79 | 80 | .btn-about-c{ 81 | flex-direction: column; 82 | } 83 | 84 | .btn-about-1{ 85 | width: 60%; 86 | } 87 | 88 | .btn-about-1:nth-child(2){ 89 | margin-top: 10px; 90 | } 91 | 92 | @media only screen and (min-width: 772px){ 93 | 94 | ::-webkit-scrollbar { 95 | width: 10px; 96 | background: transparent; 97 | } 98 | 99 | ::-webkit-scrollbar { 100 | width: 10px; 101 | } 102 | 103 | ::-webkit-scrollbar-track { 104 | margin-top: 50px; 105 | background: #f8f8f8; 106 | } 107 | 108 | ::-webkit-scrollbar-thumb { 109 | margin-top: 50px; 110 | background: #404651; 111 | } 112 | 113 | ::-webkit-scrollbar-thumb:hover { 114 | margin-top: 50px; 115 | background: #3a3f4a; 116 | } 117 | 118 | ::-webkit-scrollbar-thumb:active { 119 | background: #0084a7; 120 | } 121 | 122 | .btn-about-c{ 123 | flex-direction: row; 124 | } 125 | 126 | .btn-about-1{ 127 | width: auto; 128 | margin-top: 10px; 129 | } 130 | 131 | } 132 | 133 | /* Section 1 - Nav */ 134 | 135 | .section-1-super{ 136 | width: 100%; 137 | background: #282c34; 138 | overflow: hidden; 139 | } 140 | 141 | .nav{ 142 | background: #20232a; 143 | position: fixed; 144 | top: 0; 145 | left: 0; 146 | width: 100%; 147 | } 148 | 149 | .nav-desktop{ 150 | transition: 0.4s; 151 | display: flex; 152 | padding: 14px; 153 | font-family: 'Roboto', sans-serif; 154 | font-size: 14px; 155 | color: #ebebeb; 156 | cursor: pointer; 157 | justify-content: space-between; 158 | max-width: 820px; 159 | position: relative; 160 | margin: 0 auto; 161 | } 162 | .nav-flex-1{ 163 | display: flex; 164 | } 165 | 166 | .nav-MAIN{ 167 | font-size: 18px; 168 | text-transform: uppercase; 169 | font-weight: bold; 170 | font-family: 'Rubik', sans-serif; 171 | margin-right: 20px; 172 | color: #61dafb; 173 | transition: 0.2s; 174 | } 175 | 176 | .nav-item{ 177 | margin-right: 16px; 178 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 179 | transition: 0.2s; 180 | } 181 | 182 | .nav-item:hover{ 183 | color: #bbd0ff; 184 | } 185 | 186 | .nav-MAIN:hover{ 187 | color: white !important; 188 | } 189 | 190 | .nav-blur-bg-2{ 191 | top: 0; 192 | left: 0; 193 | position: fixed; 194 | height: 50px; 195 | width: 100%; 196 | /* backdrop-filter: blur(10px); */ 197 | } 198 | 199 | /* Section 1 - Main */ 200 | 201 | .section-1{ 202 | max-width: 820px; 203 | position: relative; 204 | margin: 0 auto; 205 | padding: 0 15px; 206 | height: calc(60vh - 50px); 207 | margin-top: 50px; 208 | width: 100%; 209 | display: flex; 210 | flex-direction: column; 211 | align-items: center; 212 | justify-content: center; 213 | } 214 | 215 | .section-1-heading{ 216 | font-size: 40px; 217 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 218 | font-weight: bold; 219 | color: #61dafb; 220 | margin-bottom: 10px; 221 | } 222 | 223 | .section-1-paragraph-1{ 224 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 225 | color: white; 226 | font-size: 16px; 227 | width: 340px; 228 | text-align: center; 229 | padding: 0 10px; 230 | z-index: 40; 231 | } 232 | 233 | .section-1-bell-icon{ 234 | margin-bottom: -2px; 235 | } 236 | 237 | @keyframes bellRotate { 238 | 0% { 239 | transform: rotate(25deg); 240 | } 241 | 242 | 50% { 243 | transform: rotate(-25deg); 244 | } 245 | 246 | 100% { 247 | transform: rotate(25deg); 248 | } 249 | 250 | } 251 | 252 | .nav-MAIN-icon{ 253 | margin-bottom: -2px; 254 | margin-right: 10px; 255 | /* animation: bellRotate 2s ease-in-out forwards infinite; */ 256 | } 257 | 258 | .section-1-btn-c{ 259 | display: flex; 260 | } 261 | 262 | .section-1-btn-2{ 263 | display: flex; 264 | } 265 | 266 | .s-1-b-2-B-ICON{ 267 | margin-bottom: -2px; 268 | } 269 | 270 | .section-1-paragraph-2{ 271 | 272 | } 273 | 274 | .section-1-btn-c{ 275 | margin-top: 20px; 276 | } 277 | 278 | .section-1-btn-1{ 279 | font-size: 15px; 280 | background: linear-gradient(135deg, #61dafb, #45a7c2); 281 | color: #000000; 282 | padding: 8px 20px; 283 | font-family: HelveticaNormal; 284 | margin-right: 14px; 285 | border-radius: 4px; 286 | cursor: pointer; 287 | transition: 0.2s; 288 | } 289 | 290 | .section-1-btn-1:hover{ 291 | background-color: #1b1d22; 292 | transform: scale(1.04); 293 | box-shadow: 4px 4px 6px 2px #23272e; 294 | opacity: 1; 295 | } 296 | 297 | .section-1-btn-2{ 298 | font-size: 15px; 299 | background: linear-gradient(45deg, #20232a, #17191d); 300 | color: #cbcdd0; 301 | padding: 8px 20px; 302 | font-family: HelveticaNormal; 303 | margin-right: 10px; 304 | border-radius: 4px; 305 | cursor: pointer; 306 | z-index: 40; 307 | transition: 0.2s; 308 | opacity: 0.8; 309 | } 310 | 311 | .section-1-btn-2:hover{ 312 | background-color: #1b1d22; 313 | color: #e6e6e7; 314 | transform: scale(1.04); 315 | box-shadow: 4px 4px 6px 2px #23272e; 316 | } 317 | 318 | .alert-big-icon-1{ 319 | /* position: absolute; 320 | bottom: -20px; 321 | right: -40px; 322 | font-size: 200px; 323 | transform: rotate(45deg); 324 | height: 200px; 325 | width: 200px; 326 | color: #20232a91; 327 | z-index: 20; */ 328 | position: absolute; 329 | bottom: -40px; 330 | right: -40px; 331 | font-size: 200px; 332 | transform: rotate(45deg); 333 | height: 100px; 334 | width: 100px; 335 | color: transparent; 336 | background: radial-gradient(#282c34, #1c1f24); 337 | z-index: 20; 338 | border-radius: 10px; 339 | animation: anim2 5s ease-in-out forwards infinite; 340 | transition: 0.8s; 341 | opacity: 0.6; 342 | } 343 | 344 | .alert-big-icon-2{ 345 | position: absolute; 346 | left: -40px; 347 | top: -40px; 348 | font-size: 200px; 349 | transform: rotate(45deg); 350 | height: 100px; 351 | width: 100px; 352 | color: transparent; 353 | background: radial-gradient(#282c34, #1c1f24); 354 | z-index: 20; 355 | border-radius: 10px; 356 | animation: anim4 5s ease-in-out forwards infinite; 357 | transition: 0.8s; 358 | opacity: 0.8; 359 | filter: blur(2px); 360 | opacity: 0.6; 361 | display: none; 362 | } 363 | 364 | @keyframes anim2{ 365 | 0%{ 366 | bottom: -40px; 367 | opacity: 0.6; 368 | } 369 | 370 | 50%{ 371 | bottom: 40px; 372 | opacity: 0.2; 373 | } 374 | 375 | 100%{ 376 | bottom: -40px; 377 | opacity: 0.6; 378 | } 379 | } 380 | 381 | @keyframes anim4{ 382 | 0%{ 383 | top: -40px; 384 | } 385 | 386 | 50%{ 387 | top: 40px; 388 | } 389 | 390 | 100%{ 391 | top: -40px; 392 | } 393 | } 394 | 395 | .nav-mobile{ 396 | display: none; 397 | } 398 | 399 | @media only screen and (max-width: 440px){ 400 | 401 | .nav-MAIN-icon-span{ 402 | display: none; 403 | } 404 | 405 | .nav-flex-1{ 406 | display: none; 407 | } 408 | 409 | .nav-mobile{ 410 | display: block; 411 | } 412 | 413 | .alert-big-icon-2{ 414 | display: none; 415 | } 416 | 417 | } 418 | 419 | .nav-mobile-icon{ 420 | color: white; 421 | font-size: 26px; 422 | min-height: 20px; 423 | max-height: 20px; 424 | overflow: hidden; 425 | } 426 | 427 | .s-1-b-2-A{ 428 | margin-right: 6px; 429 | } 430 | 431 | /* Side Menu */ 432 | 433 | .side-menu{ 434 | transition: 0.2s; 435 | height: 60vh; 436 | width: 100%; 437 | background: rgb(32 35 42 / 0.98); 438 | position: absolute; 439 | top: -60vh; 440 | left: 0; 441 | opacity: 0; 442 | } 443 | 444 | .ht-60{ 445 | top: 0; 446 | opacity: 1; 447 | } 448 | 449 | .s-heading{ 450 | /* background: #191c22; */ 451 | color: white; 452 | display: flex; 453 | align-items: center; 454 | justify-content: flex-end; 455 | cursor: pointer; 456 | padding: 12px; 457 | font-size: 26px; 458 | border-bottom: 2px solid #17191f; 459 | padding-right: 14px; 460 | } 461 | 462 | .s-items{ 463 | margin-right: 16px; 464 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 465 | transition: 0.2s; 466 | display: flex; 467 | flex-direction: column; 468 | padding: 14px; 469 | color: #ebebeb; 470 | cursor: pointer; 471 | position: relative; 472 | margin: 0 auto; 473 | font-size: 18px; 474 | margin-bottom: 26px; 475 | } 476 | 477 | .s-item{ 478 | padding-top: 8px; 479 | padding-bottom: 8px; 480 | display: flex; 481 | /* background: #252932; */ 482 | border-radius: 10px; 483 | padding-left: 4px; 484 | transition: 0.1s; 485 | } 486 | 487 | .s-item:hover{ 488 | transform: scale(1.02); 489 | } 490 | 491 | .s-item-icon{ 492 | margin-top: 6px; 493 | margin-right: 14px; 494 | } 495 | 496 | /* Section 2 */ 497 | 498 | .section-2-super{ 499 | width: 100%; 500 | background: white; 501 | overflow: hidden; 502 | } 503 | 504 | .section-2{ 505 | max-width: 820px; 506 | position: relative; 507 | margin: 0 auto; 508 | padding: 0 15px; 509 | margin-top: 50px; 510 | margin-bottom: 50px; 511 | width: 100%; 512 | } 513 | 514 | .section-2-heading{ 515 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 516 | font-weight: 600; 517 | font-size: 32px; 518 | color: #20232a; 519 | } 520 | 521 | .section-2-paragraph{ 522 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 523 | color: #282c34; 524 | font-size: 15px; 525 | max-width: 780px; 526 | margin-top: 2px; 527 | font-weight: 600; 528 | margin-bottom: 20px; 529 | } 530 | 531 | .section-2-paragraph-2{ 532 | font-family: 'Rubik', sans-serif; 533 | color: #282c34; 534 | font-size: 15px; 535 | margin-left: 4px; 536 | margin-top: 2px; 537 | margin-bottom: 10px; 538 | font-weight: 700; 539 | } 540 | 541 | .section-2-paragraph-4{ 542 | font-family: 'Rubik', sans-serif; 543 | color: #282c34; 544 | font-size: 15px; 545 | margin-left: 4px; 546 | margin-top: 20px; 547 | padding-top: 10px; 548 | margin-bottom: 10px; 549 | font-weight: 700; 550 | border-top: 1.5px solid #d7d7d8; 551 | } 552 | 553 | .npm-icon{ 554 | color: rgb(252 146 158); 555 | } 556 | 557 | .s-2-p-2-B{ 558 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 559 | color: #282c34; 560 | font-size: 15px; 561 | max-width: 780px; 562 | margin-top: 10px; 563 | margin-bottom: 10px; 564 | font-weight: 600; 565 | } 566 | 567 | .npm{ 568 | margin-top: 8px; 569 | padding: 12px; 570 | font-size: 14px; 571 | background: #282c34; 572 | color: white; 573 | border-radius: 6px; 574 | padding-left: 14px; 575 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 576 | max-height: 43px; 577 | overflow-y: hidden; 578 | } 579 | 580 | .npm::-webkit-scrollbar { 581 | display: none; 582 | } 583 | 584 | .copy-btn-1{ 585 | font-family: 'Rubik', sans-serif; 586 | background: #ec6878; 587 | color: white; 588 | padding: 4px; 589 | border-radius: 100px; 590 | width: 100px; 591 | text-align: center; 592 | font-size: 12px; 593 | /* margin-left: calc(100% - 60px); */ 594 | margin-top: 6px; 595 | cursor: pointer; 596 | transition: 0.2s; 597 | } 598 | 599 | .copy-btn-2{ 600 | font-family: 'Rubik', sans-serif; 601 | background: #ec6878; 602 | color: white; 603 | padding: 4px; 604 | border-radius: 100px; 605 | width: 150px; 606 | text-align: center; 607 | font-size: 12px; 608 | /* margin-left: calc(100% - 60px); */ 609 | margin-top: 6px; 610 | cursor: pointer; 611 | transition: 0.2s; 612 | } 613 | 614 | .copy-btn:hover{ 615 | transform: scale(1.04); 616 | box-shadow: 1px 1px 6px 1px #ffbdc5; 617 | } 618 | 619 | /* Copy Buttons */ 620 | 621 | .copy-buttons{ 622 | position: fixed; 623 | height: 2px; 624 | width: 2px; 625 | overflow: hidden; 626 | top: 0; 627 | left: 0; 628 | opacity: 0; 629 | } 630 | 631 | /* Section 3 */ 632 | 633 | .section-3-super{ 634 | width: 100%; 635 | /* background: #f2f2f2; */ 636 | overflow: hidden; 637 | border-top: 2px solid #f2f2f2; 638 | } 639 | 640 | .section-3{ 641 | max-width: 820px; 642 | position: relative; 643 | margin: 0 auto; 644 | padding: 0 15px; 645 | margin-top: 50px; 646 | margin-bottom: 50px; 647 | width: 100%; 648 | } 649 | 650 | .section-3-heading{ 651 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 652 | font-weight: 600; 653 | font-size: 32px; 654 | color: #20232a; 655 | } 656 | 657 | .npm-2{ 658 | margin-top: 8px; 659 | padding: 12px; 660 | font-size: 14px; 661 | background: #282c34; 662 | color: white; 663 | border-radius: 10px; 664 | padding-left: 14px; 665 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 666 | } 667 | 668 | .copy-and-run-2{ 669 | display: flex; 670 | justify-content: space-between; 671 | margin-top: 14px; 672 | font-family: 'Rubik', sans-serif; 673 | text-align: center; 674 | font-size: 12px; 675 | } 676 | 677 | .copy-btn-8{ 678 | cursor: pointer; 679 | background: #ec6878; 680 | color: white; 681 | padding: 4px; 682 | border-radius: 100px; 683 | width: 100px; 684 | transition: 0.2s; 685 | } 686 | 687 | .copy-btn-8:hover{ 688 | transform: scale(1.04); 689 | box-shadow: 1px 1px 6px 1px #ffbdc5; 690 | } 691 | 692 | .copy-btn-8:nth-child(2){ 693 | background: #41d446; 694 | color: white; 695 | padding: 4px; 696 | border-radius: 100px; 697 | width: 100px; 698 | width: 80px; 699 | } 700 | 701 | .copy-btn-8:nth-child(2):hover{ 702 | box-shadow: 1px 1px 6px 1px #b0feb2; 703 | } 704 | 705 | .copy-btn-8-icon{ 706 | margin-bottom: -2px; 707 | } 708 | 709 | .s2{ 710 | margin-top: 20px; 711 | margin-bottom: 10px; 712 | border: 0px solid; 713 | background: #e8e7e7; 714 | height: 2px; 715 | } 716 | 717 | .s-3-minip-1{ 718 | font-family: Helvetica; 719 | color: #282c34; 720 | font-size: 14px; 721 | margin-left: 4px; 722 | margin-top: 2px; 723 | margin-bottom: 10px; 724 | /* font-weight: 700; */ 725 | } 726 | 727 | .s3minip1-kbd { 728 | color: #1a1c20; 729 | font-size: 14px; 730 | font-weight: bold; 731 | background: #e8e7e7; 732 | padding: 1px 10px; 733 | border-radius: 4px; 734 | line-height: 24px; 735 | } 736 | 737 | .dt-2{ 738 | word-spacing: 2px; 739 | /* letter-spacing: 1px; */ 740 | font-weight: 600; 741 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 742 | color: #686868; 743 | } 744 | 745 | /* Section 4 */ 746 | 747 | /* Table ( Got a little lazy here :| ) */ 748 | 749 | table{ 750 | margin: auto; 751 | width: 100%; 752 | font-family: 'Rubik', sans-serif; 753 | font-size: 14px; 754 | } 755 | 756 | th{ 757 | padding: 4px; 758 | background: #e8e7e7; 759 | border: 2px solid #e8e7e7; 760 | font-family: 'Roboto', sans-serif; 761 | border-radius: 6px; 762 | } 763 | 764 | tr{ 765 | text-align: left; 766 | } 767 | 768 | td{ 769 | margin-right: 10px; 770 | padding-right: 20px; 771 | } 772 | 773 | /* Section About */ 774 | 775 | .section-about-super{ 776 | width: 100%; 777 | background: #f2f2f2; 778 | overflow: hidden; 779 | border-top: 2px solid #f2f2f2; 780 | } 781 | 782 | .section-about{ 783 | max-width: 820px; 784 | position: relative; 785 | margin: 0 auto; 786 | padding: 0 15px; 787 | margin-top: 50px; 788 | margin-bottom: 50px; 789 | width: 100%; 790 | } 791 | 792 | .section-about-heading{ 793 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 794 | font-weight: 600; 795 | font-size: 32px; 796 | color: #20232a; 797 | } 798 | 799 | .btn-about-c{ 800 | font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; 801 | font-size: 16px; 802 | display: flex; 803 | } 804 | 805 | .btn-about-1{ 806 | background: #282c34; 807 | padding: 8px; 808 | margin-right: 20px; 809 | border-radius: 4px; 810 | padding-left: 20px; 811 | padding-right: 20px; 812 | color: #e8e7e7; 813 | cursor: pointer; 814 | transition: 0.2s; 815 | max-width: 200px; 816 | } 817 | 818 | .btn-about-1:hover{ 819 | background: #3a4b6c; 820 | transform: scale(1.02); 821 | color: #e8e7e7; 822 | box-shadow: 4px 4px 6px 2px #b8b8b8; 823 | } 824 | 825 | .btn-about-icon{ 826 | margin-bottom: -4px; 827 | font-size: 18px; 828 | margin-right: 8px; 829 | } 830 | 831 | .footer{ 832 | background: #ec6878; 833 | color: white; 834 | font-size: 16px; 835 | font-family: 'Rubik', sans-serif; 836 | text-align: center; 837 | padding: 8px; 838 | letter-spacing: 0.6px; 839 | } 840 | 841 | .footer-icon{ 842 | margin-bottom: -2px; 843 | } 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | 875 | 876 | 877 | 878 | 879 | 880 | 881 | 882 | 883 | 884 | 885 | 886 | -------------------------------------------------------------------------------- /swalt.js: -------------------------------------------------------------------------------- 1 | // Embed Stylesheet 2 | 3 | var css = 4 | ` 5 | @import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);@import url(https://fonts.googleapis.com/css2?family=Rubik&display=swap);@font-face{font-family:HelveticaNormal;src:url(https://res.cloudinary.com/dp1xkuswt/raw/upload/v1597987314/Helvetica_uld9sz.ttf)}.hidden{display:none!important}.alert-super-container input:focus{outline:0}.alert-super-container *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.alert-super-container{background:rgb(0 0 0 / 40%);position:fixed;top:0;left:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:.2s}.alert-container{max-width:380px;width:90%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:10px;box-shadow:2px 2px 8px 2px rgb(0 0 0 / .1);overflow:hidden;transition:.2s;transform:scale(1)}.alert-c-ph-1 .alert-container{max-width:380px;width:90%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:10px;box-shadow:2px 2px 8px 2px rgb(0 0 0 / .1);overflow:hidden;transition:.2s;transform:scale(.8)}.alert-heading{color:rgb(59 62 68);font-family:HelveticaNormal;margin-top:40px;font-size:16px;width:80%;text-align:center}.alert-paragraph{max-height:250px;overflow-y:scroll;font-family:HelveticaNormal;padding-top:10px;padding-bottom:2px;font-size:15px;padding-right:10px;width:80%;text-align:center;color:rgb(135 135 135);margin-bottom:20px}.alert-paragraph{max-height:300px}.alert-paragraph::-webkit-scrollbar{width:0}.alert-paragraph::-webkit-scrollbar-track{background:0 0}.alert-paragraph::-webkit-scrollbar-thumb{background:0 0}.alert-paragraph::-webkit-scrollbar-thumb:hover{background:0 0}.alert-btn{cursor:pointer;font-family:Rubik,sans-serif;padding-bottom:16px;font-size:16px;padding-top:16px;margin-top:10px;width:100%;text-align:center;color:#2d2b2b;border-top:1px solid #e1e4e7;background:#fff;transition:.1s;font-weight:lighter}.alert-input-container{width:80%;margin:auto;margin-top:10px}.alert-input{width:100%;border-radius:4px;border:1.85px solid #b4b3b5;padding:4px;padding-left:12px;padding-top:6px;padding-bottom:6px;font-size:15px;color:#5e575e;font-family:Roboto,sans-serif}a{color:#08f}a{text-decoration:none}a:hover{text-decoration:none}.alert-input::placeholder{color:#b4b3b5}.alert-input:-ms-input-placeholder{color:#b4b3b5}.alert-input::-ms-input-placeholder{color:#b4b3b5}.alert-btn:active{background:#e1e4e7}.alert-hidden{display:none}.alert-c-ph-1{opacity:0}.alert-icon-top{margin-top:20px;margin-bottom:-10px}.sa{width:140px;height:140px;background-color:#fff;display:flex;align-items:center;justify-content:center}.sa-warning{border-radius:50%;border:4px solid #f8bb86;box-sizing:content-box;height:80px;padding:0;position:relative;background-color:#fff;width:80px;animation:scaleWarning .75s infinite alternate}.sa-warning:after,.sa-warning:before{background:#fff;content:'';border-radius:50%;height:100%;position:absolute;width:100%}.sa-warning:before{display:inline-block;opacity:0;animation:pulseWarning 2s linear infinite}.sa-warning:after{display:block;z-index:1}.sa-warning-body{background-color:#f8bb86;border-radius:2px;height:47px;left:50%;margin-left:-2px;position:absolute;top:10px;width:5px;z-index:2;animation:pulseWarningIns .75s infinite alternate}.sa-warning-dot{background-color:#f8bb86;border-radius:50%;bottom:10px;height:7px;left:50%;margin-left:-3px;position:absolute;width:7px;z-index:2;animation:pulseWarningIns .75s infinite alternate}@keyframes scaleWarning{0%{transform:scale(1)}30%{transform:scale(1.02)}100%{transform:scale(1)}}@keyframes pulseWarning{0%{background-color:#fff;transform:scale(1);opacity:.5}30%{background-color:#fff;transform:scale(1);opacity:.5}100%{background-color:#f8bb86;transform:scale(2);opacity:0}}@keyframes pulseWarningIns{0%{background-color:#f8d486}100%{background-color:#f8bb86}}.alert-dark .alert-container{background:#141425;box-shadow:2px 2px 8px 2px rgb(196 196 221 / 10%);border: 2px solid #b4b4e8}.alert-dark .alert-heading{color:rgb(196 196 221)}.alert-dark .alert-paragraph{color:rgb(146 146 185)}.alert-dark .alert-btn{color:#a7abe0;border-top:1px solid #343450;background:#17172a}.alert-dark .alert-input{border:2.85px solid #1d1d35;background:#1d1d35;color:#dfdfdf;transition:.4s}.alert-dark .alert-input:focus{border:2.85px solid #555582;background:#10101e;color:#dfdfdf;transition:.4s}.alert-dark a{color:#08f}.alert-dark a{text-decoration:none}.alert-dark a:hover{text-decoration:none}.alert-dark .alert-input::placeholder{color:#8787ad}.alert-dark .alert-input:-ms-input-placeholder{color:#8787ad}.alert-dark .alert-input::-ms-input-placeholder{color:#8787ad}.alert-dark .alert-btn:active{background:#1b1b30}.alert-dark .alert-hidden{display:none}.alert-dark .alert-c-ph-1{opacity:0;padding-top:40px}.alert-dark .alert-icon-top{margin-top:20px;margin-bottom:-10px}.alert-dark .sa{width:140px;height:140px;background-color:transparent}.alert-dark .sa-warning{border-radius:50%;border:4px solid #f66a60;box-sizing:content-box;height:80px;padding:0;position:relative;background-color:#fff;width:80px;animation:scaleWarning2 .75s infinite alternate}.alert-dark .sa-warning:after,.sa-warning:before{background:#0e0e1a;content:'';border-radius:50%;height:100%;position:absolute;width:100%}.alert-dark .sa-warning:before{display:inline-block;opacity:0;animation:pulseWarning2 2s linear infinite}.alert-dark .sa-warning:after{display:block;z-index:1}.alert-dark .sa-warning-body{background-color:#f66a60;border-radius:2px;height:47px;left:50%;margin-left:-2px;position:absolute;top:10px;width:5px;z-index:2;animation:pulseWarningIns2 .75s infinite alternate}.alert-dark .sa-warning-dot{background-color:#f66a60;border-radius:50%;bottom:10px;height:7px;left:50%;margin-left:-3px;position:absolute;width:7px;z-index:2;animation:pulseWarningIns2 .75s infinite alternate}@keyframes scaleWarning2{0%{transform:scale(1)}30%{transform:scale(1.02)}100%{transform:scale(1)}}@keyframes pulseWarning2{0%{background-color:#f66a60;transform:scale(1);opacity:.5}30%{background-color:#f66a60;transform:scale(1);opacity:.5}100%{background-color:#f66a60;transform:scale(2);opacity:0}}@keyframes pulseWarningIns2{0%{background-color:#f66a60}100%{background-color:#f66a60}} 6 | `, 7 | head = document.head || document.getElementsByTagName('head')[0], 8 | style = document.createElement('style'); 9 | head.appendChild(style); 10 | style.type = 'text/css'; 11 | if (style.styleSheet){ 12 | style.styleSheet.cssText = css; 13 | } else { 14 | style.appendChild(document.createTextNode(css)); 15 | } 16 | 17 | // Embed HTML 18 | 19 | var div = document.createElement('div'); 20 | div.setAttribute('id', 'hyperAlert'); 21 | div.innerHTML = 22 | ` 23 |
Swalt Heading
Close
24 | `; 25 | document.querySelector("body").appendChild(div); 26 | 27 | function showSwalt(){ 28 | document.getElementById("alertSuperContainer").classList.remove("alert-hidden"); 29 | setTimeout(function() { 30 | document.getElementById("alertSuperContainer").classList.remove("alert-c-ph-1"); 31 | }, 0); 32 | } 33 | 34 | var swaltRef = {}; 35 | 36 | swaltRef.element = document.getElementById("alertInput"); 37 | swaltRef.value = ""; 38 | swaltRef.status = false; 39 | 40 | var alertInput = document.getElementById("alertInput"); 41 | var alertValue = ""; 42 | 43 | function swalt(arg1, arg2){ 44 | 45 | if(arg1 !== undefined){ 46 | document.getElementById("alertDescription").innerHTML = arg1; 47 | } else { 48 | document.getElementById("alertDescription").innerHTML = "This is the sample text for Swalt. Enter your text in the first argument to call the swalt with your custom text."; 49 | } 50 | 51 | if(arg2 == undefined){ 52 | showSwalt(); 53 | } else { 54 | 55 | // title 56 | if(arg2.title !== undefined){ 57 | document.getElementById("alertTitle").innerHTML = arg2.title; 58 | } else { 59 | document.getElementById("alertTitle").innerHTML = "Swalt Heading"; 60 | } 61 | 62 | // showIcon 63 | if(arg2.showIcon !== undefined){ 64 | if(arg2.showIcon == false){ 65 | document.getElementById("alertIcon").classList.add("hidden"); 66 | } else { 67 | document.getElementById("alertIcon").classList.remove("hidden"); 68 | } 69 | } else { 70 | document.getElementById("alertIcon").classList.add("hidden"); 71 | } 72 | 73 | // input 74 | if(arg2.input !== undefined){ 75 | if(arg2.input == false){ 76 | document.getElementById("alertInputContainer").classList.add("hidden"); 77 | } else if(arg2.input == true) { 78 | document.getElementById("alertInputContainer").classList.remove("hidden"); 79 | } 80 | } else{ 81 | document.getElementById("alertInputContainer").classList.add("hidden"); 82 | } 83 | 84 | // mode 85 | if(arg2.mode !== undefined){ 86 | if(arg2.mode == "light"){ 87 | document.getElementById("alertSuperContainer").classList.remove("alert-dark"); 88 | } else if(arg2.mode == "dark") { 89 | document.getElementById("alertSuperContainer").classList.add("alert-dark"); 90 | } 91 | } else{ 92 | document.getElementById("alertSuperContainer").classList.remove("alert-dark"); 93 | } 94 | 95 | // inputPlaceholder 96 | if(arg2.inputPlaceholder !== undefined){ 97 | document.getElementById("alertInput").placeholder = arg2.inputPlaceholder; 98 | } else { 99 | document.getElementById("alertInput").placeholder = "Enter Text"; 100 | } 101 | 102 | // defaultValue 103 | if(arg2.defaultValue !== undefined){ 104 | document.getElementById("alertInput").value = arg2.defaultValue; 105 | } else { 106 | document.getElementById("alertInput").value = ""; 107 | } 108 | 109 | // btnValue 110 | if(arg2.btnValue !== undefined){ 111 | document.getElementById("alertBtn").innerText = arg2.btnValue; 112 | } else { 113 | document.getElementById("alertBtn").innerText = "Close"; 114 | } 115 | 116 | showSwalt(); 117 | swaltRef.status = true; 118 | 119 | } 120 | 121 | 122 | 123 | } 124 | 125 | // Custom Listerners 126 | 127 | const customEvent = new Event("swaltClosed"); 128 | const customEvent2 = new Event("swaltBtnClicked"); 129 | 130 | document.getElementById("alertInput").addEventListener("input", function(e){ 131 | alertValue = this.value; 132 | swaltRef.value = this.value; 133 | }); 134 | 135 | document.getElementById("alertBtn").addEventListener("click", function(e) { 136 | let alertSuperContainerEl = document.getElementById("alertSuperContainer"); 137 | alertSuperContainerEl.classList.add("alert-c-ph-1"); 138 | alertInput.dispatchEvent(customEvent2); 139 | setTimeout(function(){ 140 | alertSuperContainerEl.classList.add("alert-hidden"); 141 | alertInput.dispatchEvent(customEvent); 142 | }, 200); 143 | swaltRef.status = false; 144 | }); 145 | -------------------------------------------------------------------------------- /swalt.min.js: -------------------------------------------------------------------------------- 1 | var css="\n@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);@import url(https://fonts.googleapis.com/css2?family=Rubik&display=swap);@font-face{font-family:HelveticaNormal;src:url(https://res.cloudinary.com/dp1xkuswt/raw/upload/v1597987314/Helvetica_uld9sz.ttf)}.hidden{display:none!important}.alert-super-container input:focus{outline:0}.alert-super-container *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.alert-super-container{background:rgb(0 0 0 / 40%);position:fixed;top:0;left:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:.2s}.alert-container{max-width:380px;width:90%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:10px;box-shadow:2px 2px 8px 2px rgb(0 0 0 / .1);overflow:hidden;transition:.2s;transform:scale(1)}.alert-c-ph-1 .alert-container{max-width:380px;width:90%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:10px;box-shadow:2px 2px 8px 2px rgb(0 0 0 / .1);overflow:hidden;transition:.2s;transform:scale(.8)}.alert-heading{color:rgb(59 62 68);font-family:HelveticaNormal;margin-top:40px;font-size:16px;width:80%;text-align:center}.alert-paragraph{max-height:250px;overflow-y:scroll;font-family:HelveticaNormal;padding-top:10px;padding-bottom:2px;font-size:15px;padding-right:10px;width:80%;text-align:center;color:rgb(135 135 135);margin-bottom:20px}.alert-paragraph{max-height:300px}.alert-paragraph::-webkit-scrollbar{width:0}.alert-paragraph::-webkit-scrollbar-track{background:0 0}.alert-paragraph::-webkit-scrollbar-thumb{background:0 0}.alert-paragraph::-webkit-scrollbar-thumb:hover{background:0 0}.alert-btn{cursor:pointer;font-family:Rubik,sans-serif;padding-bottom:16px;font-size:16px;padding-top:16px;margin-top:10px;width:100%;text-align:center;color:#2d2b2b;border-top:1px solid #e1e4e7;background:#fff;transition:.1s;font-weight:lighter}.alert-input-container{width:80%;margin:auto;margin-top:10px}.alert-input{width:100%;border-radius:4px;border:1.85px solid #b4b3b5;padding:4px;padding-left:12px;padding-top:6px;padding-bottom:6px;font-size:15px;color:#5e575e;font-family:Roboto,sans-serif}a{color:#08f}a{text-decoration:none}a:hover{text-decoration:none}.alert-input::placeholder{color:#b4b3b5}.alert-input:-ms-input-placeholder{color:#b4b3b5}.alert-input::-ms-input-placeholder{color:#b4b3b5}.alert-btn:active{background:#e1e4e7}.alert-hidden{display:none}.alert-c-ph-1{opacity:0}.alert-icon-top{margin-top:20px;margin-bottom:-10px}.sa{width:140px;height:140px;background-color:#fff;display:flex;align-items:center;justify-content:center}.sa-warning{border-radius:50%;border:4px solid #f8bb86;box-sizing:content-box;height:80px;padding:0;position:relative;background-color:#fff;width:80px;animation:scaleWarning .75s infinite alternate}.sa-warning:after,.sa-warning:before{background:#fff;content:'';border-radius:50%;height:100%;position:absolute;width:100%}.sa-warning:before{display:inline-block;opacity:0;animation:pulseWarning 2s linear infinite}.sa-warning:after{display:block;z-index:1}.sa-warning-body{background-color:#f8bb86;border-radius:2px;height:47px;left:50%;margin-left:-2px;position:absolute;top:10px;width:5px;z-index:2;animation:pulseWarningIns .75s infinite alternate}.sa-warning-dot{background-color:#f8bb86;border-radius:50%;bottom:10px;height:7px;left:50%;margin-left:-3px;position:absolute;width:7px;z-index:2;animation:pulseWarningIns .75s infinite alternate}@keyframes scaleWarning{0%{transform:scale(1)}30%{transform:scale(1.02)}100%{transform:scale(1)}}@keyframes pulseWarning{0%{background-color:#fff;transform:scale(1);opacity:.5}30%{background-color:#fff;transform:scale(1);opacity:.5}100%{background-color:#f8bb86;transform:scale(2);opacity:0}}@keyframes pulseWarningIns{0%{background-color:#f8d486}100%{background-color:#f8bb86}}.alert-dark .alert-container{background:#141425;box-shadow:2px 2px 8px 2px rgb(196 196 221 / 10%);border: 2px solid #b4b4e8}.alert-dark .alert-heading{color:rgb(196 196 221)}.alert-dark .alert-paragraph{color:rgb(146 146 185)}.alert-dark .alert-btn{color:#a7abe0;border-top:1px solid #343450;background:#17172a}.alert-dark .alert-input{border:2.85px solid #1d1d35;background:#1d1d35;color:#dfdfdf;transition:.4s}.alert-dark .alert-input:focus{border:2.85px solid #555582;background:#10101e;color:#dfdfdf;transition:.4s}.alert-dark a{color:#08f}.alert-dark a{text-decoration:none}.alert-dark a:hover{text-decoration:none}.alert-dark .alert-input::placeholder{color:#8787ad}.alert-dark .alert-input:-ms-input-placeholder{color:#8787ad}.alert-dark .alert-input::-ms-input-placeholder{color:#8787ad}.alert-dark .alert-btn:active{background:#1b1b30}.alert-dark .alert-hidden{display:none}.alert-dark .alert-c-ph-1{opacity:0;padding-top:40px}.alert-dark .alert-icon-top{margin-top:20px;margin-bottom:-10px}.alert-dark .sa{width:140px;height:140px;background-color:transparent}.alert-dark .sa-warning{border-radius:50%;border:4px solid #f66a60;box-sizing:content-box;height:80px;padding:0;position:relative;background-color:#fff;width:80px;animation:scaleWarning2 .75s infinite alternate}.alert-dark .sa-warning:after,.sa-warning:before{background:#0e0e1a;content:'';border-radius:50%;height:100%;position:absolute;width:100%}.alert-dark .sa-warning:before{display:inline-block;opacity:0;animation:pulseWarning2 2s linear infinite}.alert-dark .sa-warning:after{display:block;z-index:1}.alert-dark .sa-warning-body{background-color:#f66a60;border-radius:2px;height:47px;left:50%;margin-left:-2px;position:absolute;top:10px;width:5px;z-index:2;animation:pulseWarningIns2 .75s infinite alternate}.alert-dark .sa-warning-dot{background-color:#f66a60;border-radius:50%;bottom:10px;height:7px;left:50%;margin-left:-3px;position:absolute;width:7px;z-index:2;animation:pulseWarningIns2 .75s infinite alternate}@keyframes scaleWarning2{0%{transform:scale(1)}30%{transform:scale(1.02)}100%{transform:scale(1)}}@keyframes pulseWarning2{0%{background-color:#f66a60;transform:scale(1);opacity:.5}30%{background-color:#f66a60;transform:scale(1);opacity:.5}100%{background-color:#f66a60;transform:scale(2);opacity:0}}@keyframes pulseWarningIns2{0%{background-color:#f66a60}100%{background-color:#f66a60}}\n",head=document.head||document.getElementsByTagName("head")[0],style=document.createElement("style");head.appendChild(style),style.type="text/css",style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css));var div=document.createElement("div");function showSwalt(){document.getElementById("alertSuperContainer").classList.remove("alert-hidden"),setTimeout(function(){document.getElementById("alertSuperContainer").classList.remove("alert-c-ph-1")},0)}div.setAttribute("id","hyperAlert"),div.innerHTML='\n
Swalt Heading
Close
\n',document.querySelector("body").appendChild(div);var swaltRef={};swaltRef.element=document.getElementById("alertInput"),swaltRef.value="",swaltRef.status=!1;var alertInput=document.getElementById("alertInput"),alertValue="";function swalt(e,t){document.getElementById("alertDescription").innerHTML=void 0!==e?e:"This is the sample text for Swalt. Enter your text in the first argument to call the swalt with your custom text.",null==t?showSwalt():(void 0!==t.title?document.getElementById("alertTitle").innerHTML=t.title:document.getElementById("alertTitle").innerHTML="Swalt Heading",void 0!==t.showIcon?0==t.showIcon?document.getElementById("alertIcon").classList.add("hidden"):document.getElementById("alertIcon").classList.remove("hidden"):document.getElementById("alertIcon").classList.add("hidden"),void 0!==t.input?0==t.input?document.getElementById("alertInputContainer").classList.add("hidden"):1==t.input&&document.getElementById("alertInputContainer").classList.remove("hidden"):document.getElementById("alertInputContainer").classList.add("hidden"),void 0!==t.mode?"light"==t.mode?document.getElementById("alertSuperContainer").classList.remove("alert-dark"):"dark"==t.mode&&document.getElementById("alertSuperContainer").classList.add("alert-dark"):document.getElementById("alertSuperContainer").classList.remove("alert-dark"),void 0!==t.inputPlaceholder?document.getElementById("alertInput").placeholder=t.inputPlaceholder:document.getElementById("alertInput").placeholder="Enter Text",void 0!==t.defaultValue?document.getElementById("alertInput").value=t.defaultValue:document.getElementById("alertInput").value="",void 0!==t.btnValue?document.getElementById("alertBtn").innerText=t.btnValue:document.getElementById("alertBtn").innerText="Close",showSwalt(),swaltRef.status=!0)}const customEvent=new Event("swaltClosed"),customEvent2=new Event("swaltBtnClicked");document.getElementById("alertInput").addEventListener("input",function(e){alertValue=this.value,swaltRef.value=this.value}),document.getElementById("alertBtn").addEventListener("click",function(e){let t=document.getElementById("alertSuperContainer");t.classList.add("alert-c-ph-1"),alertInput.dispatchEvent(customEvent2),setTimeout(function(){t.classList.add("alert-hidden"),alertInput.dispatchEvent(customEvent)},200),swaltRef.status=!1}); 2 | --------------------------------------------------------------------------------