├── .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 |
3 |
4 |
5 | Swalt
6 |
7 |
8 | An amazing replacement for Javascript's default alerts
9 |
10 |
11 |
12 |
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 |
22 |
23 | Swalt | Modern replacement for alerts
24 |
25 |
26 | By using this lightweight library, you can show custom alerts in just a few lines of code.
27 |
28 |
29 |
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 |
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 | Property
279 | Type
280 | Description
281 |
282 |
283 | swaltRef.element
284 | Object
285 | Gets input element of the swalt
286 |
287 |
288 | swaltRef.value
289 | String
290 | Gets value of the swalt
291 |
292 |
293 | swaltRef.status
294 | Boolean
295 | Gets status of the swalt if it is open or closed
296 |
297 |
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 | Event
313 | Description
314 |
315 |
316 | swaltBtnClicked
317 | Swalt "Close" button clicked
318 |
319 |
320 | swaltClosed
321 | Swalt Closed
322 |
323 |
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 |
351 |
354 |
355 |
356 |
357 |
360 |
361 |
362 |
363 |
364 |
365 |
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 |
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 |
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\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 |
--------------------------------------------------------------------------------