alert90s 1.0.12 → 1.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +108 -31
- package/dist/alert90s.min.js +1 -1
- package/package.json +1 -1
- package/src/index.js +127 -17
- package/src/styles.css +289 -46
package/README.md
CHANGED
|
@@ -122,6 +122,85 @@ Alert90s.fire({
|
|
|
122
122
|
});
|
|
123
123
|
```
|
|
124
124
|
|
|
125
|
+
### 6. Loading Animations
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
// Segmented Progress Bar (NEW)
|
|
129
|
+
Alert90s.fire({
|
|
130
|
+
title: "LOADING ASSETS...",
|
|
131
|
+
loaderType: "segmented",
|
|
132
|
+
didOpen: () => Alert90s.showLoading(),
|
|
133
|
+
});
|
|
134
|
+
setTimeout(() => Alert90s.hideLoading(), 7000);
|
|
135
|
+
|
|
136
|
+
// Other loaderTypes: 'hourglass', 'ascii', 'blinking', 'progress'
|
|
137
|
+
Alert90s.fire({
|
|
138
|
+
title: "DOWNLOADING...",
|
|
139
|
+
loaderType: "hourglass",
|
|
140
|
+
didOpen: () => Alert90s.showLoading(),
|
|
141
|
+
});
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### 7. Theme Switcher
|
|
145
|
+
|
|
146
|
+
Alert90s includes a built-in Neo-Brutalist theme toggle you can render anywhere:
|
|
147
|
+
|
|
148
|
+
```javascript
|
|
149
|
+
Alert90s.renderThemeToggle("#my-container", {
|
|
150
|
+
width: "120px",
|
|
151
|
+
onChange: (isDark) => {
|
|
152
|
+
console.log("Dark mode:", isDark);
|
|
153
|
+
},
|
|
154
|
+
});
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### 8. Input Types (Checkbox, Toggle, Select, Radio)
|
|
158
|
+
|
|
159
|
+
Alert90s supports rich form inputs inside modals. The **checkbox**, **radio**, and **select dropdown** all use **SVG Brutalist** designs with animated effects (checkmark draw-on, dot pop, animated arrow, slide-in menu).
|
|
160
|
+
|
|
161
|
+
```javascript
|
|
162
|
+
// SVG Brutalist Checkbox
|
|
163
|
+
Alert90s.fire({
|
|
164
|
+
title: "TERMS OF SERVICE",
|
|
165
|
+
input: "checkbox",
|
|
166
|
+
inputPlaceholder: "I ACCEPT THE TERMS",
|
|
167
|
+
}).then((result) => {
|
|
168
|
+
if (result.isConfirmed) {
|
|
169
|
+
Alert90s.fire("Accepted: " + result.value, "", "success");
|
|
170
|
+
}
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
// SVG Brutalist Radio
|
|
174
|
+
Alert90s.fire({
|
|
175
|
+
title: "DIFFICULTY",
|
|
176
|
+
input: "radio",
|
|
177
|
+
inputOptions: {
|
|
178
|
+
easy: "I'm too young to die.",
|
|
179
|
+
medium: "Hurt me plenty.",
|
|
180
|
+
hard: "Ultra-Violence.",
|
|
181
|
+
},
|
|
182
|
+
inputValue: "hard",
|
|
183
|
+
});
|
|
184
|
+
|
|
185
|
+
// Toggle Switch
|
|
186
|
+
Alert90s.fire({
|
|
187
|
+
title: "DARK MODE",
|
|
188
|
+
input: "toggle",
|
|
189
|
+
inputPlaceholder: "Enable dark mode",
|
|
190
|
+
});
|
|
191
|
+
|
|
192
|
+
// Select Dropdown
|
|
193
|
+
Alert90s.fire({
|
|
194
|
+
title: "CHOOSE WEAPON",
|
|
195
|
+
input: "select",
|
|
196
|
+
inputOptions: {
|
|
197
|
+
bfg: "BFG 9000",
|
|
198
|
+
plasma: "Plasma Rifle",
|
|
199
|
+
shotgun: "Super Shotgun",
|
|
200
|
+
},
|
|
201
|
+
});
|
|
202
|
+
```
|
|
203
|
+
|
|
125
204
|
## CSS-only Buttons
|
|
126
205
|
|
|
127
206
|
Alert90s also ships with a standalone CSS button library. Just add the classes to your own `<button>` or `<a>` elements for an instant neo-brutalist feel!
|
|
@@ -174,35 +253,35 @@ If you'd like to collaborate or just say hi, visit my [Portfolio Website](https:
|
|
|
174
253
|
|
|
175
254
|
## Advanced Options
|
|
176
255
|
|
|
177
|
-
| Option | Type | Default | Description
|
|
178
|
-
| ----------------- | -------- | ----------- |
|
|
179
|
-
| background | String | '' | Custom background color for the modal.
|
|
180
|
-
| color | String | '' | Custom text color for the modal body.
|
|
181
|
-
| titleColor | String | '' | Custom title color.
|
|
182
|
-
| iconColor | String | '' | Custom icon color (including SVG stroke).
|
|
183
|
-
| title | String | '' | The title of the alert. Supports HTML.
|
|
184
|
-
| text/message | String | '' | The message body of the alert.
|
|
185
|
-
| html | String | '' | A custom HTML description for the alert.
|
|
186
|
-
| icon | String | '' | Standard icons: `warning`, `error`, `info`, `success`, `question`
|
|
187
|
-
| iconHtml | String | '' | Custom HTML string for the icon.
|
|
188
|
-
| footer | String | '' | Custom HTML for the footer section.
|
|
189
|
-
| imageUrl | String | '' | URL for an image to display.
|
|
190
|
-
| input | String | null |
|
|
191
|
-
| inputPlaceholder | String | '' | Placeholder text or label for `checkbox`/`toggle`.
|
|
192
|
-
| inputValue | String | '' | Initial value or checked state (for boolean inputs).
|
|
193
|
-
| inputOptions | Object | {} | Object mapping `{value: 'Label'}` for `select`/`radio`.
|
|
194
|
-
| inputAttributes | Object | {} | Custom HTML attributes for the input element.
|
|
195
|
-
| theme | String | 'light' | Native dark mode support (`'light'`, `'dark'`, or `'auto'`).
|
|
196
|
-
| dir | String | 'auto' | Text direction. Set `rtl` for Arabic/Hebrew.
|
|
197
|
-
| position | String | 'center' | `top`, `top-end`, `bottom-start`, etc.
|
|
198
|
-
| timer | Number | null | Auto close timer in milliseconds.
|
|
199
|
-
| timerProgressBar | Boolean | false | Display progress bar at the bottom.
|
|
200
|
-
| toast | Boolean | false | Display the alert as a non-blocking toast notification.
|
|
201
|
-
| loaderType | String | 'hourglass' | Type of loader: `hourglass`, `ascii`, `blinking`, `progress`.
|
|
202
|
-
| draggable | Boolean | false | Allow moving the modal dragging its header.
|
|
203
|
-
| showDenyButton | Boolean | false | Show the third middle deny button.
|
|
204
|
-
| preConfirm | Function | null | Async function executed before confirm executes.
|
|
205
|
-
| allowOutsideClick | Function | null | Async function executed before confirm executes.
|
|
256
|
+
| Option | Type | Default | Description |
|
|
257
|
+
| ----------------- | -------- | ----------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
258
|
+
| background | String | '' | Custom background color for the modal. |
|
|
259
|
+
| color | String | '' | Custom text color for the modal body. |
|
|
260
|
+
| titleColor | String | '' | Custom title color. |
|
|
261
|
+
| iconColor | String | '' | Custom icon color (including SVG stroke). |
|
|
262
|
+
| title | String | '' | The title of the alert. Supports HTML. |
|
|
263
|
+
| text/message | String | '' | The message body of the alert. |
|
|
264
|
+
| html | String | '' | A custom HTML description for the alert. |
|
|
265
|
+
| icon | String | '' | Standard icons: `warning`, `error`, `info`, `success`, `question` |
|
|
266
|
+
| iconHtml | String | '' | Custom HTML string for the icon. |
|
|
267
|
+
| footer | String | '' | Custom HTML for the footer section. |
|
|
268
|
+
| imageUrl | String | '' | URL for an image to display. |
|
|
269
|
+
| input | String | null | Input type: `'text'`, `'password'`, `'textarea'`, `'select'`, `'radio'`, `'checkbox'` (SVG Brutalist), `'toggle'`. |
|
|
270
|
+
| inputPlaceholder | String | '' | Placeholder text or label for `checkbox`/`toggle`. |
|
|
271
|
+
| inputValue | String | '' | Initial value or checked state (for boolean inputs). |
|
|
272
|
+
| inputOptions | Object | {} | Object mapping `{value: 'Label'}` for `select`/`radio`. |
|
|
273
|
+
| inputAttributes | Object | {} | Custom HTML attributes for the input element. |
|
|
274
|
+
| theme | String | 'light' | Native dark mode support (`'light'`, `'dark'`, or `'auto'`). |
|
|
275
|
+
| dir | String | 'auto' | Text direction. Set `rtl` for Arabic/Hebrew. |
|
|
276
|
+
| position | String | 'center' | `top`, `top-end`, `bottom-start`, etc. |
|
|
277
|
+
| timer | Number | null | Auto close timer in milliseconds. |
|
|
278
|
+
| timerProgressBar | Boolean | false | Display progress bar at the bottom. |
|
|
279
|
+
| toast | Boolean | false | Display the alert as a non-blocking toast notification. |
|
|
280
|
+
| loaderType | String | 'hourglass' | Type of loader: `hourglass`, `ascii`, `blinking`, `progress`, `segmented`. |
|
|
281
|
+
| draggable | Boolean | false | Allow moving the modal dragging its header. |
|
|
282
|
+
| showDenyButton | Boolean | false | Show the third middle deny button. |
|
|
283
|
+
| preConfirm | Function | null | Async function executed before confirm executes. |
|
|
284
|
+
| allowOutsideClick | Function | null | Async function executed before confirm executes. |
|
|
206
285
|
|
|
207
286
|
## Methods
|
|
208
287
|
|
|
@@ -217,5 +296,3 @@ If you'd like to collaborate or just say hi, visit my [Portfolio Website](https:
|
|
|
217
296
|
## License
|
|
218
297
|
|
|
219
298
|
MIT
|
|
220
|
-
|
|
221
|
-
# alert90s
|
package/dist/alert90s.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Alert90s=t()}(this,function(){"use strict";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.alert90s-overlay{animation:alert90s-fade-in .2s ease-out forwards;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.6);box-sizing:border-box;display:flex;font-family:inherit;inset:0;padding:1rem;position:fixed;z-index:99999}.alert90s-overlay.alert90s-pos-center{align-items:center;justify-content:center}.alert90s-overlay.alert90s-pos-top{align-items:flex-start;justify-content:center}.alert90s-overlay.alert90s-pos-top-start{align-items:flex-start;justify-content:flex-start}.alert90s-overlay.alert90s-pos-top-end{align-items:flex-start;justify-content:flex-end}.alert90s-overlay.alert90s-pos-bottom{align-items:flex-end;justify-content:center}.alert90s-overlay.alert90s-pos-bottom-start{align-items:flex-end;justify-content:flex-start}.alert90s-overlay.alert90s-pos-bottom-end{align-items:flex-end;justify-content:flex-end}.alert90s-overlay.alert90s-pos-center-start{align-items:center;justify-content:flex-start}.alert90s-overlay.alert90s-pos-center-end{align-items:center;justify-content:flex-end}.alert90s-overlay *{box-sizing:border-box}.alert90s-box{align-items:center;animation:alert90s-pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:4px solid #000;box-shadow:12px 12px 0 0 #000;display:flex;flex-direction:column;max-height:95vh;max-width:28rem;position:relative;text-align:center;width:100%}.alert90s-box[dir=rtl]{text-align:right}.alert90s-box.is-draggable{position:absolute}.alert90s-body{align-items:center;display:flex;flex-direction:column;overflow-y:auto;padding:3rem 2rem 2rem;scrollbar-width:none;width:100%}.alert90s-body::-webkit-scrollbar{display:none}.alert90s-header{align-items:center;background-color:#e2e8f0;border-bottom:4px solid #000;display:flex;height:2rem;justify-content:space-between;left:0;padding:0 .5rem;position:absolute;top:0;width:100%;z-index:10}.alert90s-header.draggable{cursor:grab}.alert90s-header.draggable:active{cursor:grabbing}.alert90s-header-left{display:flex;gap:.25rem}.alert90s-box[dir=rtl] .alert90s-header{flex-direction:row-reverse}.alert90s-header-dot{background-color:#fff;border:2px solid #000;height:.75rem;width:.75rem}.alert90s-header-right{align-items:center;display:flex;gap:.5rem;z-index:11}.alert90s-box[dir=rtl] .alert90s-header-right{flex-direction:row-reverse}.alert90s-header-title{font-size:10px;font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.alert90s-close-btn{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.25rem;justify-content:center;margin:0;padding:0;transition:transform .1s,background-color .1s;width:1.25rem}.alert90s-close-btn:hover{background-color:#f87171;transform:scale(1.1)}.alert90s-close-btn span{color:#000;font-size:14px;font-weight:700;line-height:1}.alert90s-image-container{align-items:center;background:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;display:flex;justify-content:center;margin-bottom:1rem;overflow:hidden;width:100%}.alert90s-image-container img{display:block;height:auto;max-width:100%}.alert90s-icon{align-items:center;border:4px solid #000;border-radius:9999px;box-shadow:4px 4px 0 0 #000;display:flex;flex-shrink:0;height:4rem;justify-content:center;margin-bottom:1rem;width:4rem}.alert90s-icon img,.alert90s-icon svg{height:2rem;width:2rem}.alert90s-icon-custom{font-size:2.25rem;font-weight:700;line-height:1}.alert90s-icon.warning{background-color:#facc15}.alert90s-icon.danger,.alert90s-icon.error{background-color:#ef4444;color:#fff}.alert90s-icon.info,.alert90s-icon.question{background-color:#60a5fa}.alert90s-icon.success{background-color:#4ade80}.alert90s-title{color:#1a1a1a;font-size:1.5rem;font-weight:900;letter-spacing:.1em;line-height:1.2;margin:0 0 .5rem;text-transform:uppercase}.alert90s-message{color:#475569;font-weight:700}.alert90s-html,.alert90s-message{font-size:.875rem;margin:0 0 1.5rem;max-width:100%}.alert90s-html{color:#1a1a1a;line-height:1.5}.alert90s-box[dir=rtl] .alert90s-html{text-align:right}.alert90s-html a{color:#2563eb;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.alert90s-html a:hover{background-color:#bfdbfe}.alert90s-html b,.alert90s-html strong{font-weight:900}.alert90s-input-container{margin-bottom:1.5rem;width:100%}.alert90s-input{background-color:#f8fafc;border:4px solid #000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.05);font-family:inherit;font-size:1rem;font-weight:700;outline:none;padding:.75rem;transition:background-color .2s;width:100%}.alert90s-input:focus{background-color:#fff;border-color:#2563eb}textarea.alert90s-input{min-height:100px;resize:vertical}select.alert90s-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#000 0),linear-gradient(135deg,#000 50%,transparent 0);background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;cursor:pointer}.alert90s-radio-group{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;width:100%}.alert90s-radio-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-radio-label input[type=radio]{appearance:none;background-color:#f8fafc;border:4px solid #000;border-radius:50%;cursor:pointer;height:1.25rem;margin:0;position:relative;width:1.25rem}.alert90s-radio-label input[type=radio]:checked{background-color:#000;box-shadow:inset 0 0 0 4px #fff}.alert90s-checkbox-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-checkbox-label input[type=checkbox]{appearance:none;background-color:#f8fafc;border:4px solid #000;cursor:pointer;height:1.25rem;margin:0;position:relative;width:1.25rem}.alert90s-checkbox-label input[type=checkbox]:checked{background-color:#000}.alert90s-checkbox-label input[type=checkbox]:checked:after{color:#fff;content:"✔";font-size:.8rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.alert90s-toggle-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-toggle-label input[type=checkbox]{display:none}.alert90s-toggle-slider{background-color:#f87171;border:4px solid #000;box-shadow:inset 3px 3px 0 0 rgba(0,0,0,.1);height:1.5rem;position:relative;transition:background-color .2s;width:3rem}.alert90s-toggle-slider:before{background-color:#fff;border-right:4px solid #000;content:"";height:100%;left:0;position:absolute;top:0;transition:transform .2s;width:1rem}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider{background-color:#4ade80}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider:before{border-left:4px solid #000;transform:translateX(1.5rem)}.alert90s-validation-message{background-color:#fef2f2;border:4px solid #000;border-left:8px solid #ef4444;color:#ef4444;display:none;font-size:.875rem;font-weight:700;margin-bottom:1.5rem;padding:.75rem;text-align:left;width:100%}.alert90s-box[dir=rtl] .alert90s-validation-message{border-left-color:#000;border-left-width:4px;border-right-color:#ef4444;border-right-width:8px;text-align:right}.alert90s-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;width:100%}@media (min-width:640px){.alert90s-actions{flex-direction:row}}.alert90s-button{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:900;gap:.5rem;justify-content:center;letter-spacing:.1em;margin:0;padding:.75rem 1rem;text-transform:uppercase;transition:background-color .1s;width:100%}@media (min-width:640px){.alert90s-button{flex:1;min-width:100px;width:auto}}.alert90s-button:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.alert90s-button:focus{outline:2px dashed #000;outline-offset:4px}.alert90s-button.cancel{background-color:#f87171}.alert90s-button.cancel:hover{background-color:#fca5a5}.alert90s-button.deny{background-color:#fb923c}.alert90s-button.deny:hover{background-color:#fdba74}.alert90s-button.confirm{background-color:#4ade80}.alert90s-button.confirm:hover{background-color:#86efac}.alert90s-footer{border-top:4px solid #000;color:#475569;font-size:.75rem;font-weight:700;margin-top:1.5rem;padding-top:1rem;width:100%}.alert90s-footer a{color:#2563eb;text-decoration:underline;text-decoration-thickness:2px}.alert90s-footer a:hover{background-color:#bfdbfe}.alert90s-progress-bar{animation:alert90s-progress linear forwards;background-color:#000;bottom:0;height:6px;left:0;position:absolute;width:100%}.alert90s-loader{display:flex;padding:1rem 0}.alert90s-loader,.alert90s-spinner{align-items:center;justify-content:center}.alert90s-spinner{display:inline-flex}.alert90s-spinner.hourglass{animation:alert90s-hourglass 2s ease-in-out infinite;font-size:2.5rem;line-height:1}.alert90s-spinner.ascii{font-family:monospace;font-size:2rem;font-weight:700}.alert90s-spinner.ascii:after{animation:alert90s-ascii .5s steps(4) infinite;content:"|"}.alert90s-spinner.blinking{font-family:monospace;font-size:1.5rem;font-weight:700;letter-spacing:.1em}.alert90s-spinner.blinking .cursor{animation:alert90s-blink 1s step-end infinite}.alert90s-spinner.progress{background-color:#cbd5e1;border:2px solid #000;box-shadow:inset 2px 2px 0 0 #64748b,inset -2px -2px 0 0 #f8fafc;height:24px;overflow:hidden;padding:2px;position:relative;width:200px}.alert90s-spinner.progress:before{animation:alert90s-marquee 1.5s linear infinite;background-color:#1d4ed8;background-image:repeating-linear-gradient(90deg,#1d4ed8,#1d4ed8 10px,transparent 0,transparent 12px);content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:40%}@keyframes alert90s-hourglass{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes alert90s-ascii{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\\\"}to{content:"|"}}@keyframes alert90s-blink{50%{opacity:0}}@keyframes alert90s-marquee{0%{transform:translateX(-100%)}to{transform:translateX(250px)}}@keyframes alert90s-progress{0%{width:100%}to{width:0}}@keyframes alert90s-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert90s-pop-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes alert90s-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}@keyframes alert90s-toast-slide-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.alert90s-toast-container{display:flex;gap:10px;padding:10px;pointer-events:none;position:fixed;z-index:10000}.alert90s-toast-top-start{flex-direction:column;left:0;top:0}.alert90s-toast-top{flex-direction:column;left:50%;top:0;transform:translateX(-50%)}.alert90s-toast-top-end{flex-direction:column;right:0;top:0}.alert90s-toast-center-start{flex-direction:column;left:0;top:50%;transform:translateY(-50%)}.alert90s-toast-center{flex-direction:column;left:50%;top:50%;transform:translate(-50%,-50%)}.alert90s-toast-center-end{flex-direction:column;right:0;top:50%;transform:translateY(-50%)}.alert90s-toast-bottom-start{bottom:0;flex-direction:column-reverse;left:0}.alert90s-toast-bottom{bottom:0;flex-direction:column-reverse;left:50%;transform:translateX(-50%)}.alert90s-toast-bottom-end{bottom:0;flex-direction:column-reverse;right:0}.alert90s-box.alert90s-toast{align-items:stretch;bottom:auto!important;box-shadow:6px 6px 0 0 #000;flex-direction:row;left:auto!important;margin:0;max-width:100%;min-width:250px;padding:0;pointer-events:auto;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:auto}.alert90s-toast .alert90s-header{display:none}.alert90s-toast .alert90s-body{align-items:center;flex-direction:row;gap:1rem;padding:1rem 1.5rem}.alert90s-toast .alert90s-icon{height:2.5rem;margin-bottom:0;width:2.5rem}.alert90s-toast .alert90s-icon img,.alert90s-toast .alert90s-icon svg{height:1.25rem;width:1.25rem}.alert90s-content-wrapper{align-items:center;display:flex;flex-direction:column;width:100%}.alert90s-toast .alert90s-content-wrapper{align-items:flex-start;text-align:left}.alert90s-box.alert90s-toast[dir=rtl] .alert90s-content-wrapper{align-items:flex-end;text-align:right}.alert90s-toast .alert90s-title{font-size:1rem;margin-bottom:.25rem}.alert90s-toast .alert90s-html,.alert90s-toast .alert90s-message{font-size:.875rem;margin-bottom:0}.alert90s-toast-close{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.5rem;justify-content:center;margin:0;margin-inline-start:auto;padding:0;transition:transform .1s,background-color .1s;width:1.5rem}.alert90s-toast-close span{color:#000;display:block;font-size:10px;font-weight:700;line-height:1}.alert90s-toast-close:hover{background-color:#f87171;transform:scale(1.1)}.btn90s{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:900;justify-content:center;letter-spacing:.05em;margin:.25rem;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:transform .1s,box-shadow .1s,background-color .1s}.btn90s:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.btn90s:focus-visible{outline:2px dashed #000;outline-offset:4px}.btn90s.primary{background-color:#00f0ff}.btn90s.primary:hover{background-color:#66f6ff}.btn90s.success{background-color:#4ade80}.btn90s.success:hover{background-color:#86efac}.btn90s.warning{background-color:#ffc900}.btn90s.warning:hover{background-color:#ffe066}.btn90s.danger{background-color:#ff90e8}.btn90s.danger:hover{background-color:#ffbaf0}.btn90s.dark{background-color:#000;border-color:#000;color:#fff}.btn90s.dark:hover{background-color:#333}.btn90s.sm{border-width:3px;box-shadow:3px 3px 0 0 #000;font-size:.875rem;padding:.5rem 1rem}.btn90s.sm:active{transform:translate(3px,3px)}.btn90s.lg{border-width:5px;box-shadow:6px 6px 0 0 #000;font-size:1.25rem;padding:1rem 2rem}.btn90s.lg:active{transform:translate(6px,6px)}.alert90s-tooltip{animation:tooltip-pop .15s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:3px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;display:none;font-family:inherit;font-size:.875rem;font-weight:700;max-width:300px;padding:.5rem 1rem;pointer-events:none;position:absolute;white-space:pre-wrap;z-index:100000}.alert90s-tooltip.show{display:block}.alert90s-tooltip.c-yellow{background-color:#fef08a}.alert90s-tooltip.c-cyan{background-color:#00f0ff}.alert90s-tooltip.c-pink{background-color:#ff90e8}.alert90s-tooltip.c-base{background-color:#fff}.alert90s-tooltip.c-dark{background-color:#000;color:#fff}.alert90s-tooltip:after{border-style:solid;content:"";height:0;position:absolute;width:0}.alert90s-tooltip.pos-top:after{border-color:#000 transparent transparent;border-width:8px 8px 0;bottom:-8px;left:50%;margin-left:-8px}.alert90s-tooltip.pos-bottom:after{border-color:transparent transparent #000;border-width:0 8px 8px;left:50%;margin-left:-8px;top:-8px}.alert90s-tooltip.pos-left:after{border-color:transparent transparent transparent #000;border-width:8px 0 8px 8px;margin-top:-8px;right:-8px;top:50%}.alert90s-tooltip.pos-right:after{border-color:transparent #000 transparent transparent;border-width:8px 8px 8px 0;left:-8px;margin-top:-8px;top:50%}@keyframes tooltip-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.alert90s-dark.alert90s-box{background-color:#2a2a35;color:#eaeaea}.alert90s-dark .alert90s-title{color:#fff;text-shadow:2px 2px 0 #000}.alert90s-dark .alert90s-html,.alert90s-dark .alert90s-message{color:#d4d4d4}.alert90s-dark .alert90s-html a{color:#60a5fa}.alert90s-dark .alert90s-input,.alert90s-dark select.alert90s-select{background-color:#1a1a24;border-color:#000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.5);color:#fff}.alert90s-dark .alert90s-input:focus{border-color:#0ff}.alert90s-dark .alert90s-button{background-color:#ececec;color:#000}.alert90s-dark .alert90s-button.cancel{background-color:#f87171}.alert90s-dark .alert90s-button.deny{background-color:#fb923c}.alert90s-dark .alert90s-button.confirm{background-color:#4ade80}.alert90s-dark .alert90s-checkbox-label input[type=checkbox]{background-color:#1a1a24}.alert90s-dark .alert90s-checkbox-label input[type=checkbox]:checked{background-color:#0ff}.alert90s-dark .alert90s-radio-label input[type=radio]{background-color:#1a1a24}.alert90s-dark .alert90s-radio-label input[type=radio]:checked{background-color:#0ff;box-shadow:inset 0 0 0 4px #000}.alert90s-theme-checkbox{display:none}.alert90s-theme-wrapper{cursor:pointer;display:inline-block;position:relative;transform:rotate(-1deg);transition:transform .1s}.alert90s-theme-wrapper:active{transform:rotate(0deg) scale(.98)}.alert90s-theme-track-shadow{fill:#000}.alert90s-theme-track-base{fill:#facc15;stroke:#000;stroke-width:6;stroke-linejoin:miter;transition:fill .5s cubic-bezier(.8,0,.2,1)}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-track-base{fill:#1e1e26}.alert90s-theme-thumb-group{transform:translateX(0);transition:transform .5s cubic-bezier(.68,-.55,.265,1.55)}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-group{transform:translateX(190px)}.alert90s-theme-thumb-shadow{fill:#000}.alert90s-theme-thumb-body{fill:#fff;stroke:#000;stroke-width:6;stroke-linejoin:miter;transition:fill .3s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-body{fill:#eaeaea}.alert90s-theme-icon-sun{opacity:1;transition:opacity 0s .25s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-sun{opacity:0}.alert90s-theme-icon-moon{filter:drop-shadow(0 0 10px #00FFFF) drop-shadow(0 0 20px #00FFFF);opacity:0;transition:opacity 0s .25s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-moon{opacity:1}.alert90s-theme-text-label{font-family:Impact,Arial Black,sans-serif;font-size:38px;letter-spacing:2px;pointer-events:none;user-select:none}.alert90s-theme-text-day{fill:#000;opacity:1;transition:opacity .3s ease}.alert90s-theme-text-night{fill:#0ff;opacity:0;transition:opacity .3s ease}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-day{opacity:0}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-night{opacity:1}.alert90s-theme-deco-accent{fill:#ff90e8;transition:fill .4s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-deco-accent{fill:#4ade80}');class e{static getOptions(){return this.currentOptions||{}}static getPopup(){return this.currentPopup||null}static getTimerLeft(){if(!this.timerEnd)return;const e=this.timerEnd-Date.now();return e>0?e:0}static isLoading(){const e=this.getPopup();if(!e)return!1;const t=e.querySelector(".alert90s-actions"),o=e.querySelector(".alert90s-loader");return t&&"none"===t.style.display||!!o}static showLoading(){const t=this.getPopup();if(t){const o=t.querySelector(".alert90s-actions");o&&(o.style.display="none");let r=t.querySelector(".alert90s-loader");if(!r){r=document.createElement("div"),r.className="alert90s-loader";const a=e.currentOptions&&e.currentOptions.loaderType||"hourglass";r.innerHTML="ascii"===a?'<div class="alert90s-spinner ascii"></div>':"blinking"===a?'<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>':"progress"===a?'<div class="alert90s-spinner progress"></div>':'<div class="alert90s-spinner hourglass">⏳</div>',o&&o.parentNode?o.parentNode.insertBefore(r,o):t.querySelector(".alert90s-body").appendChild(r)}}}static hideLoading(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-actions");t&&(t.style.display="");const o=e.querySelector(".alert90s-loader");o&&o.remove()}}static showValidationMessage(e){const t=this.getPopup();if(t){let o=t.querySelector(".alert90s-validation-message");if(!o){o=document.createElement("div"),o.className="alert90s-validation-message";const e=t.querySelector(".alert90s-actions");e&&e.parentNode?e.parentNode.insertBefore(o,e):t.querySelector(".alert90s-body").appendChild(o)}o.innerHTML=e,o.style.display="block"}}static resetValidationMessage(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-validation-message");t&&(t.style.display="none")}}static getToastContainer(e){const t=`alert90s-toast-container alert90s-toast-${e}`;let o=document.querySelector(`.${t.replace(/ /g,".")}`);return o||(o=document.createElement("div"),o.className=t,document.body.appendChild(o)),o}static fire(e={}){return this.show(e)}static show(t={}){return new Promise(o=>{"string"==typeof t&&(t={title:t}),this.currentOptions=t;const r={title:void 0!==t.title?t.title:"",text:t.message||t.text||"",html:t.html||"",icon:t.type||t.icon||"",iconHtml:t.iconHtml||"",showConfirmButton:!1!==t.showConfirmButton,showCancelButton:t.showCancelButton||!1,showDenyButton:t.showDenyButton||!1,showCloseButton:void 0===t.showCloseButton||t.showCloseButton,loaderType:t.loaderType||"hourglass",confirmButtonText:t.confirmText||t.confirmButtonText||"OK",cancelButtonText:t.cancelText||t.cancelButtonText||"Cancel",denyButtonText:t.denyText||t.denyButtonText||"No",confirmButtonColor:t.confirmButtonColor||"",cancelButtonColor:t.cancelButtonColor||"",denyButtonColor:t.denyButtonColor||"",background:t.background||"",color:t.color||"",titleColor:t.titleColor||"",iconColor:t.iconColor||"",confirmButtonAriaLabel:t.confirmButtonAriaLabel||"",cancelButtonAriaLabel:t.cancelButtonAriaLabel||"",denyButtonAriaLabel:t.denyButtonAriaLabel||"",focusConfirm:!1!==t.focusConfirm,footer:t.footer||"",imageUrl:t.imageUrl||"",imageWidth:t.imageWidth||null,imageHeight:t.imageHeight||null,imageAlt:t.imageAlt||"",input:t.input||null,inputPlaceholder:t.inputPlaceholder||"",inputValue:t.inputValue||"",inputOptions:t.inputOptions||{},inputAttributes:t.inputAttributes||{},showLoaderOnConfirm:t.showLoaderOnConfirm||!1,preConfirm:t.preConfirm||null,toast:t.toast||!1,draggable:t.draggable||!1,position:t.position||(t.toast?"top-end":"center"),allowOutsideClick:void 0===t.allowOutsideClick||t.allowOutsideClick,dir:t.dir||"auto",theme:t.theme||"light",showClass:t.showClass||{popup:"alert90s-pop-in"},hideClass:t.hideClass||{popup:"alert90s-fade-out"},timer:t.timer||null,timerProgressBar:t.timerProgressBar||!1,didOpen:t.didOpen||null,willClose:t.willClose||null};let a=null;r.toast||(a=document.createElement("div"),a.className=`alert90s-overlay alert90s-pos-${r.position}`,a.addEventListener("mousedown",e=>{if(e.target===a){("function"==typeof r.allowOutsideClick?r.allowOutsideClick():r.allowOutsideClick)&&g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"backdrop"})}}));const n=document.createElement("div");n.className="alert90s-box",r.toast&&n.classList.add("alert90s-toast");let i=r.theme;"auto"===i&&(i=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),"dark"===i&&n.classList.add("alert90s-dark"),"rtl"===document.dir||"rtl"===r.dir||r.position.includes("start")?n.setAttribute("dir","auto"===r.dir?document.dir||"ltr":r.dir):n.setAttribute("dir",r.dir),r.showClass.popup&&"alert90s-pop-in"!==r.showClass.popup&&(n.style.animation="none",n.className=`alert90s-box ${r.showClass.popup}`),r.background&&(n.style.backgroundColor=r.background),r.color&&(n.style.color=r.color),r.draggable&&n.classList.add("is-draggable"),r.toast||(this.currentPopup=n);const s=document.createElement("div");s.className="alert90s-body";const l=document.createElement("div");l.className="alert90s-header",r.draggable&&l.classList.add("draggable");let c="";if(r.showCloseButton&&(c='\n <button class="alert90s-close-btn" id="alert90s-close" aria-label="Close">\n <span>✕</span>\n </button>\n '),l.innerHTML=`\n <div class="alert90s-header-left">\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n </div>\n <div class="alert90s-header-right">\n <span class="alert90s-header-title">SYS.REQ</span>\n ${c}\n </div>\n `,r.draggable){let e,t,o,r,a=!1;l.addEventListener("mousedown",i=>{if(i.target.closest("#alert90s-close"))return;a=!0,e=i.clientX,t=i.clientY;const s=n.getBoundingClientRect();n.style.transform="none",n.style.animation="none",o=s.left,r=s.top,n.style.left=o+"px",n.style.top=r+"px",n.style.margin="0",document.body.style.userSelect="none"}),document.addEventListener("mousemove",i=>{a&&(n.style.left=o+(i.clientX-e)+"px",n.style.top=r+(i.clientY-t)+"px")}),document.addEventListener("mouseup",()=>{a&&(a=!1,document.body.style.userSelect="")})}let d=null;if(r.timer&&r.timerProgressBar&&(d=document.createElement("div"),d.className="alert90s-progress-bar",d.style.animationDuration=`${r.timer}ms`,n.appendChild(d)),r.imageUrl){const e=document.createElement("div");e.className="alert90s-image-container";const t=document.createElement("img");t.src=r.imageUrl,r.imageAlt&&(t.alt=r.imageAlt);let o="";r.imageWidth&&(o+=`width: ${r.imageWidth}px; max-width: 100%; `),r.imageHeight&&(o+=`height: ${r.imageHeight}px; `),o&&e.setAttribute("style",o),e.appendChild(t),s.appendChild(e)}if(r.icon){const e=document.createElement("div"),t="error"===r.icon?"danger":r.icon;e.className=`alert90s-icon ${t}`;let o="";if(r.iconHtml?o=`<div class="alert90s-icon-custom">${r.iconHtml}</div>`:"warning"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>':"danger"===r.icon||"error"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':"info"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>':"success"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>':"question"===r.icon&&(o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'),e.innerHTML=o,r.iconColor&&(e.style.color=r.iconColor,e.style.borderColor=r.iconColor,!r.iconHtml)){const t=e.querySelector("svg");t&&(t.style.stroke=r.iconColor)}o&&s.appendChild(e)}const p=document.createElement("div");if(p.className="alert90s-content-wrapper",r.title){const e=document.createElement("h2");e.className="alert90s-title",e.innerHTML=r.title,r.titleColor&&(e.style.color=r.titleColor),p.appendChild(e)}if(r.html){const e=document.createElement("div");e.className="alert90s-html",e.innerHTML=r.html,r.color&&(e.style.color=r.color),p.appendChild(e)}else if(r.text){const e=document.createElement("p");e.className="alert90s-message",e.textContent=r.text,r.color&&(e.style.color=r.color),p.appendChild(e)}if((r.title||r.html||r.text)&&s.appendChild(p),r.toast&&r.showCloseButton){const e=document.createElement("button");e.className="alert90s-toast-close",e.innerHTML="<span>✕</span>",e.onclick=()=>g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}),s.appendChild(e)}let h=null;if(r.input){const e=document.createElement("div");if(e.className="alert90s-input-container","select"===r.input){if(h=document.createElement("select"),h.className="alert90s-input alert90s-select",r.inputPlaceholder){const e=document.createElement("option");e.value="",e.textContent=r.inputPlaceholder,e.disabled=!0,e.selected=!0,h.appendChild(e)}for(const[e,t]of Object.entries(r.inputOptions)){const o=document.createElement("option");o.value=e,o.textContent=t,e===r.inputValue&&(o.selected=!0),h.appendChild(o)}e.appendChild(h)}else if("radio"===r.input){const t=document.createElement("div");t.className="alert90s-radio-group";for(const[e,o]of Object.entries(r.inputOptions)){const a=document.createElement("label");a.className="alert90s-radio-label";const n=document.createElement("input");n.type="radio",n.name="alert90s-radio",n.value=e,e===r.inputValue&&(n.checked=!0);const i=document.createElement("span");i.textContent=o,a.appendChild(n),a.appendChild(i),t.appendChild(a)}h=t,e.appendChild(t)}else if("checkbox"===r.input||"toggle"===r.input){const t=document.createElement("label");if(t.className="toggle"===r.input?"alert90s-toggle-label":"alert90s-checkbox-label",h=document.createElement("input"),h.type="checkbox",h.checked=!!r.inputValue,"toggle"===r.input){const e=document.createElement("div");if(e.className="alert90s-toggle-slider",t.appendChild(h),t.appendChild(e),r.inputPlaceholder){const e=document.createElement("span");e.textContent=r.inputPlaceholder,t.appendChild(e)}}else{const e=document.createElement("span");e.textContent=r.inputPlaceholder||"Check me",t.appendChild(h),t.appendChild(e)}e.appendChild(t)}else"textarea"===r.input?(h=document.createElement("textarea"),h.className="alert90s-input",r.inputPlaceholder&&(h.placeholder=r.inputPlaceholder),r.inputValue&&(h.value=r.inputValue),e.appendChild(h)):(h=document.createElement("input"),h.type=r.input,h.className="alert90s-input",r.inputPlaceholder&&(h.placeholder=r.inputPlaceholder),r.inputValue&&(h.value=r.inputValue),e.appendChild(h));if(r.inputAttributes&&h&&!["radio"].includes(r.input))for(const[e,t]of Object.entries(r.inputAttributes))h.setAttribute(e,t);s.appendChild(e)}const m=document.createElement("div");m.className="alert90s-actions";let u=null,f=null;const g=e=>{f&&clearTimeout(f),r.willClose&&r.willClose(),n.style.animation="none","alert90s-fade-out"===r.hideClass.popup?(n.style.animation="alert90s-fade-out 0.2s forwards",a&&(a.style.transition="opacity 0.2s",a.style.opacity="0")):n.className=`alert90s-box ${r.hideClass.popup}`,setTimeout(()=>{r.toast?n.parentNode&&n.parentNode.removeChild(n):a&&document.body.contains(a)&&document.body.removeChild(a),o(e)},200)},b=async()=>{let t=!0;if("radio"===r.input){const e=h.querySelector('input[type="radio"]:checked');t=e?e.value:null}else"checkbox"===r.input||"toggle"===r.input?t=h.checked:h&&(t=h.value);if(r.preConfirm){e.resetValidationMessage(),r.showLoaderOnConfirm&&e.showLoading();try{const o=await Promise.resolve(r.preConfirm(t));if(!1===o)return void e.hideLoading();void 0!==o&&o!==t&&(t=o);const a=n.querySelector(".alert90s-validation-message");if(a&&"block"===a.style.display)return void e.hideLoading()}catch(t){return e.showValidationMessage(`Request failed: ${t}`),void e.hideLoading()}}g({isConfirmed:!0,isDenied:!1,isDismissed:!1,value:t})};if(r.showCancelButton){const e=document.createElement("button");e.className="alert90s-button cancel",e.innerHTML=r.cancelButtonText,r.cancelButtonAriaLabel&&e.setAttribute("aria-label",r.cancelButtonAriaLabel),r.cancelButtonColor&&(e.style.backgroundColor=r.cancelButtonColor),e.onclick=()=>g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"cancel"}),m.appendChild(e)}if(r.showDenyButton){const e=document.createElement("button");e.className="alert90s-button deny",e.innerHTML=r.denyButtonText,r.denyButtonAriaLabel&&e.setAttribute("aria-label",r.denyButtonAriaLabel),r.denyButtonColor&&(e.style.backgroundColor=r.denyButtonColor),e.onclick=()=>g({isConfirmed:!1,isDenied:!0,isDismissed:!1}),m.appendChild(e)}if(r.showConfirmButton){const e=document.createElement("button");e.className="alert90s-button confirm",e.innerHTML=r.confirmButtonText,r.confirmButtonAriaLabel&&e.setAttribute("aria-label",r.confirmButtonAriaLabel),r.confirmButtonColor&&(e.style.backgroundColor=r.confirmButtonColor),e.onclick=b,m.appendChild(e),u=e}if((r.showCancelButton||r.showDenyButton||r.showConfirmButton)&&s.appendChild(m),r.footer){const e=document.createElement("div");e.className="alert90s-footer",e.innerHTML=r.footer,s.appendChild(e)}if(n.appendChild(l),n.appendChild(s),r.toast){const t=e.getToastContainer(r.position);n.style.animation="alert90s-toast-slide-in 0.3s ease-out",t.appendChild(n)}else a.appendChild(n);if(r.showCloseButton&&!r.toast){const e=l.querySelector("#alert90s-close");e&&(e.onclick=()=>g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}))}r.toast||document.body.appendChild(a),r.focusConfirm&&u&&setTimeout(()=>{h?h.focus():u.focus()},50),r.didOpen&&setTimeout(()=>{r.didOpen()},0),r.timer&&(this.timerEnd=Date.now()+r.timer,f=setTimeout(()=>{g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"timer"})},r.timer))})}static initTooltips(){this._tooltipsInitialized||(this._tooltipsInitialized=!0,this._tooltipEl=document.createElement("div"),this._tooltipEl.className="alert90s-tooltip",document.body.appendChild(this._tooltipEl),document.addEventListener("mouseover",this._handleTooltipMouseOver.bind(this)),document.addEventListener("mouseout",this._handleTooltipMouseOut.bind(this)),document.addEventListener("focusin",this._handleTooltipMouseOver.bind(this)),document.addEventListener("focusout",this._handleTooltipMouseOut.bind(this)))}static _handleTooltipMouseOver(e){const t=e.target.closest("[data-alert90s-tooltip]");if(!t)return;const o=t.getAttribute("data-alert90s-tooltip");if(!o)return;const r=t.getAttribute("data-alert90s-position")||"top",a=t.getAttribute("data-alert90s-color")||"yellow";this._tooltipEl.innerHTML=o,this._tooltipEl.className=`alert90s-tooltip pos-${r} c-${a} show`;const n=t.getBoundingClientRect(),i=this._tooltipEl.getBoundingClientRect(),s=10;let l=0,c=0;switch(r){case"top":l=n.top-i.height-s,c=n.left+n.width/2-i.width/2;break;case"bottom":l=n.bottom+s,c=n.left+n.width/2-i.width/2;break;case"left":l=n.top+n.height/2-i.height/2,c=n.left-i.width-s;break;case"right":l=n.top+n.height/2-i.height/2,c=n.right+s}c<s&&(c=s),l<s&&(l=s),c+i.width>window.innerWidth-s&&(c=window.innerWidth-i.width-s),this._tooltipEl.style.top=`${l+window.scrollY}px`,this._tooltipEl.style.left=`${c+window.scrollX}px`}static _handleTooltipMouseOut(e){const t=e.target.closest("[data-alert90s-tooltip]");t&&setTimeout(()=>{this._tooltipEl.matches(":hover")||t.matches(":hover")||t.contains(document.activeElement)||this._tooltipEl.classList.remove("show")},10)}static renderThemeToggle(e,t={}){const o=document.querySelector(e);if(!o)return null;const r=`\n <label class="alert90s-theme-wrapper" aria-label="Neo Brutalist Theme Switcher" style="width: ${t.width||"100%"}; height: auto; aspect-ratio: 5 / 2;">\n <input type="checkbox" class="alert90s-theme-checkbox" ${t.isDark||!1?"checked":""} />\n \n <svg viewBox="0 0 300 120" style="width: 100%; height: 100%; overflow: visible;">\n \x3c!-- HARD OFFSET SHADOW --\x3e\n <rect class="alert90s-theme-track-shadow" x="18" y="18" width="280" height="100" />\n \x3c!-- MAIN TRACK --\x3e\n <rect class="alert90s-theme-track-base" x="10" y="10" width="280" height="100" />\n\n \x3c!-- DECORATIVE 90S UI ELEMENTS --\x3e\n <g class="alert90s-theme-deco-elements" stroke="#000" stroke-width="2">\n <circle cx="25" cy="25" r="4" fill="#FFF" />\n <line x1="23" y1="23" x2="27" y2="27" />\n <circle cx="275" cy="25" r="4" fill="#FFF" />\n <line x1="273" y1="27" x2="277" y2="23" />\n <circle cx="25" cy="95" r="4" fill="#FFF" />\n <line x1="23" y1="95" x2="27" y2="95" />\n <circle cx="275" cy="95" r="4" fill="#FFF" />\n <line x1="275" y1="93" x2="275" y2="97" />\n \n <line x1="120" y1="20" x2="120" y2="35" stroke-width="3" />\n <line x1="128" y1="20" x2="128" y2="35" stroke-width="5" />\n <line x1="138" y1="20" x2="138" y2="35" stroke-width="2" />\n <line x1="145" y1="20" x2="145" y2="35" stroke-width="6" />\n </g>\n\n \x3c!-- DAY / NIGHT TEXT --\x3e\n <text class="alert90s-theme-text-label alert90s-theme-text-night" x="40" y="75">NIGHT</text>\n <text class="alert90s-theme-text-label alert90s-theme-text-day" x="190" y="75">DAY</text>\n\n \x3c!-- NEON DECORATIVE STICKER --\x3e\n <rect class="alert90s-theme-deco-accent" x="120" y="85" width="60" height="15" stroke="#000" stroke-width="3" />\n <text x="125" y="96" font-size="10" font-weight="bold" fill="#000" font-family="sans-serif">SYS.UI</text>\n\n \x3c!-- SLIDING THUMB GROUP --\x3e\n <g class="alert90s-theme-thumb-group">\n \x3c!-- Thumb Shadow --\x3e\n <rect class="alert90s-theme-thumb-shadow" x="23" y="23" width="80" height="80" />\n \x3c!-- Thumb Body --\x3e\n <rect class="alert90s-theme-thumb-body" x="15" y="15" width="80" height="80" />\n \n \x3c!-- SUN ICON --\x3e\n <g class="alert90s-theme-icon-sun">\n <rect x="40" y="40" width="30" height="30" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="48" y="48" width="14" height="14" fill="#ef4444" stroke="#000" stroke-width="2" />\n <rect x="50" y="20" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="50" y="80" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="20" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="80" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="25" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="75" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="25" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="75" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n </g>\n\n \x3c!-- MOON ICON --\x3e\n <g class="alert90s-theme-icon-moon">\n <path fill="#000" transform="translate(3, 3)" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />\n <path fill="#00FFFF" stroke="#000" stroke-width="3" stroke-linejoin="miter" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />\n <rect x="70" y="40" width="5" height="5" fill="#FFFFFF" opacity="0.8" />\n <rect x="65" y="70" width="5" height="5" fill="#FFFFFF" opacity="0.8" />\n </g>\n </g>\n </svg>\n </label>\n `;o.innerHTML=r;return o.querySelector(".alert90s-theme-checkbox").addEventListener("change",e=>{"function"==typeof t.onChange&&t.onChange(e.target.checked)}),o}}return"undefined"!=typeof window&&(window.Alert90s=e,document.addEventListener("DOMContentLoaded",()=>{e.initTooltips()})),e});
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Alert90s=e()}(this,function(){"use strict";!function(t,e){void 0===e&&(e={});var o=e.insertAt;if("undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}('.alert90s-overlay{animation:alert90s-fade-in .2s ease-out forwards;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.6);box-sizing:border-box;display:flex;font-family:inherit;inset:0;padding:1rem;position:fixed;z-index:99999}.alert90s-overlay.alert90s-pos-center{align-items:center;justify-content:center}.alert90s-overlay.alert90s-pos-top{align-items:flex-start;justify-content:center}.alert90s-overlay.alert90s-pos-top-start{align-items:flex-start;justify-content:flex-start}.alert90s-overlay.alert90s-pos-top-end{align-items:flex-start;justify-content:flex-end}.alert90s-overlay.alert90s-pos-bottom{align-items:flex-end;justify-content:center}.alert90s-overlay.alert90s-pos-bottom-start{align-items:flex-end;justify-content:flex-start}.alert90s-overlay.alert90s-pos-bottom-end{align-items:flex-end;justify-content:flex-end}.alert90s-overlay.alert90s-pos-center-start{align-items:center;justify-content:flex-start}.alert90s-overlay.alert90s-pos-center-end{align-items:center;justify-content:flex-end}.alert90s-overlay *{box-sizing:border-box}.alert90s-box{align-items:center;animation:alert90s-pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:4px solid #000;box-shadow:12px 12px 0 0 #000;display:flex;flex-direction:column;max-height:95vh;max-width:28rem;position:relative;text-align:center;width:100%}.alert90s-box[dir=rtl]{text-align:right}.alert90s-box.is-draggable{position:absolute}.alert90s-body{align-items:center;display:flex;flex-direction:column;overflow-y:auto;padding:3rem 2rem 2rem;scrollbar-width:none;width:100%}.alert90s-body::-webkit-scrollbar{display:none}.alert90s-header{align-items:center;background-color:#e2e8f0;border-bottom:4px solid #000;display:flex;height:2rem;justify-content:space-between;left:0;padding:0 .5rem;position:absolute;top:0;width:100%;z-index:10}.alert90s-header.draggable{cursor:grab}.alert90s-header.draggable:active{cursor:grabbing}.alert90s-header-left{display:flex;gap:.25rem}.alert90s-box[dir=rtl] .alert90s-header{flex-direction:row-reverse}.alert90s-header-dot{background-color:#fff;border:2px solid #000;height:.75rem;width:.75rem}.alert90s-header-right{align-items:center;display:flex;gap:.5rem;z-index:11}.alert90s-box[dir=rtl] .alert90s-header-right{flex-direction:row-reverse}.alert90s-header-title{font-size:10px;font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.alert90s-close-btn{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.25rem;justify-content:center;margin:0;padding:0;transition:transform .1s,background-color .1s;width:1.25rem}.alert90s-close-btn:hover{background-color:#f87171;transform:scale(1.1)}.alert90s-close-btn span{color:#000;font-size:14px;font-weight:700;line-height:1}.alert90s-image-container{align-items:center;background:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;display:flex;justify-content:center;margin-bottom:1rem;overflow:hidden;width:100%}.alert90s-image-container img{display:block;height:auto;max-width:100%}.alert90s-icon{align-items:center;border:4px solid #000;border-radius:9999px;box-shadow:4px 4px 0 0 #000;display:flex;flex-shrink:0;height:4rem;justify-content:center;margin-bottom:1rem;width:4rem}.alert90s-icon img,.alert90s-icon svg{height:2rem;width:2rem}.alert90s-icon-custom{font-size:2.25rem;font-weight:700;line-height:1}.alert90s-icon.warning{background-color:#facc15}.alert90s-icon.danger,.alert90s-icon.error{background-color:#ef4444;color:#fff}.alert90s-icon.info,.alert90s-icon.question{background-color:#60a5fa}.alert90s-icon.success{background-color:#4ade80}.alert90s-title{color:#1a1a1a;font-size:1.5rem;font-weight:900;letter-spacing:.1em;line-height:1.2;margin:0 0 .5rem;text-transform:uppercase}.alert90s-message{color:#475569;font-weight:700}.alert90s-html,.alert90s-message{font-size:.875rem;margin:0 0 1.5rem;max-width:100%}.alert90s-html{color:#1a1a1a;line-height:1.5}.alert90s-box[dir=rtl] .alert90s-html{text-align:right}.alert90s-html a{color:#2563eb;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.alert90s-html a:hover{background-color:#bfdbfe}.alert90s-html b,.alert90s-html strong{font-weight:900}.alert90s-input-container{margin-bottom:1.5rem;width:100%}.alert90s-input{background-color:#f8fafc;border:4px solid #000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.05);font-family:inherit;font-size:1rem;font-weight:700;outline:none;padding:.75rem;transition:background-color .2s;width:100%}.alert90s-input:focus{background-color:#fff;border-color:#2563eb}textarea.alert90s-input{min-height:100px;resize:vertical}.alert90s-select-wrapper{position:relative;user-select:none;width:100%;z-index:10}.alert90s-select-toggle{display:none}.alert90s-select-box{align-items:center;background-color:#e4e0d7;border:4px solid #000;box-shadow:4px 4px 0 #000;color:#000;cursor:pointer;display:flex;font-size:1rem;font-weight:700;justify-content:space-between;padding:.75rem 1rem;transition:all .1s ease}.alert90s-select-box:active{box-shadow:1px 1px 0 #000;transform:translate(3px,3px)}.alert90s-select-arrow{flex-shrink:0;transition:transform .2s steps(3)}.alert90s-select-toggle:checked~.alert90s-select-box{background-color:#ff6b35;color:#fff}.alert90s-select-toggle:checked~.alert90s-select-box .alert90s-select-arrow path{stroke:#fff}.alert90s-select-toggle:checked~.alert90s-select-box .alert90s-select-arrow{transform:rotate(180deg)}.alert90s-select-menu{background-color:#e4e0d7;border:4px solid #000;box-shadow:4px 4px 0 #000;display:flex;flex-direction:column;left:0;margin-top:8px;opacity:0;position:absolute;right:0;top:100%;transform:translateY(-15px);transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .2s ease-out;visibility:hidden;z-index:10}.alert90s-select-toggle:checked~.alert90s-select-menu{opacity:1;transform:translateY(0);visibility:visible}.alert90s-select-item{border-bottom:4px solid #000;color:#000;cursor:pointer;font-size:1rem;font-weight:700;padding:.75rem 1rem;transition:background-color 0s,color 0s}.alert90s-select-item:last-child{border-bottom:none}.alert90s-select-item:hover{background-color:#000;color:#ff6b35}.alert90s-select-item.selected{background-color:#ff6b35;color:#fff}.alert90s-radio-group{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;width:100%}.alert90s-radio-label{align-items:center;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:700;gap:.75rem;position:relative;user-select:none}.alert90s-radio-label input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.alert90s-radio-svg{overflow:visible;transition:transform .1s ease}.alert90s-radio-label:hover .alert90s-radio-svg{transform:translate(-2px,-2px)}.alert90s-radio-label:active .alert90s-radio-svg{transform:translate(2px,2px)}.radio-box{transition:fill .1s ease}.alert90s-radio-label input[type=radio]:checked~.alert90s-radio-svg .radio-box{fill:#fff}.radio-dot{opacity:0;transform:scale(0) rotate(-45deg);transform-origin:50% 50%}.alert90s-radio-label input[type=radio]:checked~.alert90s-radio-svg .radio-dot{animation:alert90s-radio-pop .3s cubic-bezier(.175,.885,.32,1.275) forwards;opacity:1;transform:scale(1) rotate(0deg)}@keyframes alert90s-radio-pop{0%{fill:#fff;transform:scale(0) rotate(-45deg)}50%{fill:#fff;transform:scale(1.3) rotate(15deg)}to{fill:#ff6b35;transform:scale(1) rotate(0deg)}}.alert90s-radio-text{transition:color .2s}.alert90s-radio-label input[type=radio]:checked~.alert90s-radio-text{animation:alert90s-cb-bump .2s ease-out forwards;color:#ff6b35}.alert90s-checkbox-label{align-items:center;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:700;gap:.75rem;position:relative;user-select:none}.alert90s-checkbox-label input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.alert90s-cb-svg{overflow:visible;transition:transform .1s ease}.alert90s-checkbox-label:hover .alert90s-cb-svg{transform:translate(-2px,-2px)}.alert90s-checkbox-label:active .alert90s-cb-svg{transform:translate(2px,2px)}.cb-box{transition:fill .1s ease}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg .cb-box{fill:#fff}.cb-check{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .15s ease-out}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg .cb-check{stroke-dashoffset:0}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg{animation:alert90s-cb-shake .3s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes alert90s-cb-shake{0%{transform:scale(1) translate(0)}30%{transform:scale(1.15) translate(-2px,-2px) rotate(-4deg)}50%{transform:scale(.95) translate(2px,2px) rotate(3deg)}75%{transform:scale(1.05) translate(-1px,-1px) rotate(-1deg)}to{transform:scale(1) translate(0) rotate(0deg)}}.alert90s-cb-text{transition:color .2s}.alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-text{animation:alert90s-cb-bump .2s ease-out forwards;color:#ff6b35}@keyframes alert90s-cb-bump{0%{transform:translateX(0)}50%{transform:translateX(4px)}to{transform:translateX(0)}}.alert90s-toggle-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-toggle-label input[type=checkbox]{display:none}.alert90s-toggle-slider{background-color:#f87171;border:4px solid #000;box-shadow:inset 3px 3px 0 0 rgba(0,0,0,.1);height:1.5rem;position:relative;transition:background-color .2s;width:3rem}.alert90s-toggle-slider:before{background-color:#fff;border-right:4px solid #000;content:"";height:100%;left:0;position:absolute;top:0;transition:transform .2s;width:1rem}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider{background-color:#4ade80}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider:before{border-left:4px solid #000;transform:translateX(1.5rem)}.alert90s-validation-message{background-color:#fef2f2;border:4px solid #000;border-left:8px solid #ef4444;color:#ef4444;display:none;font-size:.875rem;font-weight:700;margin-bottom:1.5rem;padding:.75rem;text-align:left;width:100%}.alert90s-box[dir=rtl] .alert90s-validation-message{border-left-color:#000;border-left-width:4px;border-right-color:#ef4444;border-right-width:8px;text-align:right}.alert90s-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;width:100%}@media (min-width:640px){.alert90s-actions{flex-direction:row}}.alert90s-button{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:900;gap:.5rem;justify-content:center;letter-spacing:.1em;margin:0;padding:.75rem 1rem;text-transform:uppercase;transition:background-color .1s;width:100%}@media (min-width:640px){.alert90s-button{flex:1;min-width:100px;width:auto}}.alert90s-button:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.alert90s-button:focus{outline:2px dashed #000;outline-offset:4px}.alert90s-button.cancel{background-color:#f87171}.alert90s-button.cancel:hover{background-color:#fca5a5}.alert90s-button.deny{background-color:#fb923c}.alert90s-button.deny:hover{background-color:#fdba74}.alert90s-button.confirm{background-color:#4ade80}.alert90s-button.confirm:hover{background-color:#86efac}.alert90s-footer{border-top:4px solid #000;color:#475569;font-size:.75rem;font-weight:700;margin-top:1.5rem;padding-top:1rem;width:100%}.alert90s-footer a{color:#2563eb;text-decoration:underline;text-decoration-thickness:2px}.alert90s-footer a:hover{background-color:#bfdbfe}.alert90s-progress-bar{animation:alert90s-progress linear forwards;background-color:#000;bottom:0;height:6px;left:0;position:absolute;width:100%}.alert90s-loader{display:flex;padding:1rem 0}.alert90s-loader,.alert90s-spinner{align-items:center;justify-content:center}.alert90s-spinner{display:inline-flex}.alert90s-spinner.hourglass{animation:alert90s-hourglass 2s ease-in-out infinite;font-size:2.5rem;line-height:1}.alert90s-spinner.ascii{font-family:monospace;font-size:2rem;font-weight:700}.alert90s-spinner.ascii:after{animation:alert90s-ascii .5s steps(4) infinite;content:"|"}.alert90s-spinner.blinking{font-family:monospace;font-size:1.5rem;font-weight:700;letter-spacing:.1em}.alert90s-spinner.blinking .cursor{animation:alert90s-blink 1s step-end infinite}.alert90s-spinner.progress{background-color:#cbd5e1;border:2px solid #000;box-shadow:inset 2px 2px 0 0 #64748b,inset -2px -2px 0 0 #f8fafc;height:24px;overflow:hidden;padding:2px;position:relative;width:200px}.alert90s-spinner.progress:before{animation:alert90s-marquee 1.5s linear infinite;background-color:#1d4ed8;background-image:repeating-linear-gradient(90deg,#1d4ed8,#1d4ed8 10px,transparent 0,transparent 12px);content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:40%}.alert90s-spinner.segmented{display:flex;justify-content:center;width:100%}.alert90s-spinner.segmented svg{height:auto;max-width:100%}.a90s-seg-1{animation:a90s-op1 6s infinite}.a90s-seg-2{animation:a90s-op2 6s infinite}.a90s-seg-3{animation:a90s-op3 6s infinite}.a90s-seg-4{animation:a90s-op4 6s infinite}.a90s-seg-5{animation:a90s-op5 6s infinite}.a90s-seg-6{animation:a90s-op6 6s infinite}.a90s-seg-7{animation:a90s-op7 6s infinite}.a90s-seg-8{animation:a90s-op8 6s infinite}.a90s-seg-9{animation:a90s-op9 6s infinite}.a90s-seg-10{animation:a90s-op10 6s infinite}@keyframes a90s-op1{0%,9%{opacity:0}10%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op2{0%,17%{opacity:0}18%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op3{0%,25%{opacity:0}26%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op4{0%,33%{opacity:0}34%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op5{0%,41%{opacity:0}42%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op6{0%,49%{opacity:0}50%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op7{0%,57%{opacity:0}58%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op8{0%,65%{opacity:0}66%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op9{0%,73%{opacity:0}74%,92%{opacity:1}92.1%,to{opacity:0}}@keyframes a90s-op10{0%,81%{opacity:0}82%,92%{opacity:1}92.1%,to{opacity:0}}.a90s-fl-1{animation:a90s-fl1 6s infinite}.a90s-fl-2{animation:a90s-fl2 6s infinite}.a90s-fl-3{animation:a90s-fl3 6s infinite}.a90s-fl-4{animation:a90s-fl4 6s infinite}.a90s-fl-5{animation:a90s-fl5 6s infinite}.a90s-fl-6{animation:a90s-fl6 6s infinite}.a90s-fl-7{animation:a90s-fl7 6s infinite}.a90s-fl-8{animation:a90s-fl8 6s infinite}.a90s-fl-9{animation:a90s-fl9 6s infinite}.a90s-fl-10{animation:a90s-fl10 6s infinite}@keyframes a90s-fl1{0%,9%{fill:#ff6b35}10%,13%{fill:#fff}13.1%,to{fill:#ff6b35}}@keyframes a90s-fl2{0%,17%{fill:#ff6b35}18%,21%{fill:#fff}21.1%,to{fill:#ff6b35}}@keyframes a90s-fl3{0%,25%{fill:#ff6b35}26%,29%{fill:#fff}29.1%,to{fill:#ff6b35}}@keyframes a90s-fl4{0%,33%{fill:#ff6b35}34%,37%{fill:#fff}37.1%,to{fill:#ff6b35}}@keyframes a90s-fl5{0%,41%{fill:#ff6b35}42%,45%{fill:#fff}45.1%,to{fill:#ff6b35}}@keyframes a90s-fl6{0%,49%{fill:#ff6b35}50%,53%{fill:#fff}53.1%,to{fill:#ff6b35}}@keyframes a90s-fl7{0%,57%{fill:#ff6b35}58%,61%{fill:#fff}61.1%,to{fill:#ff6b35}}@keyframes a90s-fl8{0%,65%{fill:#ff6b35}66%,69%{fill:#fff}69.1%,to{fill:#ff6b35}}@keyframes a90s-fl9{0%,73%{fill:#ff6b35}74%,77%{fill:#fff}77.1%,to{fill:#ff6b35}}@keyframes a90s-fl10{0%,81%{fill:#ff6b35}82%,85%{fill:#fff}85.1%,to{fill:#ff6b35}}.a90s-txt-0{animation:a90s-t0 6s infinite}.a90s-txt-10{animation:a90s-t10 6s infinite;opacity:0}.a90s-txt-20{animation:a90s-t20 6s infinite;opacity:0}.a90s-txt-30{animation:a90s-t30 6s infinite;opacity:0}.a90s-txt-40{animation:a90s-t40 6s infinite;opacity:0}.a90s-txt-50{animation:a90s-t50 6s infinite;opacity:0}.a90s-txt-60{animation:a90s-t60 6s infinite;opacity:0}.a90s-txt-70{animation:a90s-t70 6s infinite;opacity:0}.a90s-txt-80{animation:a90s-t80 6s infinite;opacity:0}.a90s-txt-90{animation:a90s-t90 6s infinite;opacity:0}.a90s-txt-100{animation:a90s-t100 6s infinite;opacity:0}@keyframes a90s-t0{0%,9.9%{opacity:1}10%,91.9%{opacity:0}92%,to{opacity:1}}@keyframes a90s-t10{0%,9.9%{opacity:0}10%,17.9%{opacity:1}18%,to{opacity:0}}@keyframes a90s-t20{0%,17.9%{opacity:0}18%,25.9%{opacity:1}26%,to{opacity:0}}@keyframes a90s-t30{0%,25.9%{opacity:0}26%,33.9%{opacity:1}34%,to{opacity:0}}@keyframes a90s-t40{0%,33.9%{opacity:0}34%,41.9%{opacity:1}42%,to{opacity:0}}@keyframes a90s-t50{0%,41.9%{opacity:0}42%,49.9%{opacity:1}50%,to{opacity:0}}@keyframes a90s-t60{0%,49.9%{opacity:0}50%,57.9%{opacity:1}58%,to{opacity:0}}@keyframes a90s-t70{0%,57.9%{opacity:0}58%,65.9%{opacity:1}66%,to{opacity:0}}@keyframes a90s-t80{0%,65.9%{opacity:0}66%,73.9%{opacity:1}74%,to{opacity:0}}@keyframes a90s-t90{0%,73.9%{opacity:0}74%,81.9%{opacity:1}82%,to{opacity:0}}@keyframes a90s-t100{0%,81.9%{opacity:0}82%,91.9%{opacity:1}92%,to{opacity:0}}@keyframes alert90s-hourglass{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes alert90s-ascii{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\\\"}to{content:"|"}}@keyframes alert90s-blink{50%{opacity:0}}@keyframes alert90s-marquee{0%{transform:translateX(-100%)}to{transform:translateX(250px)}}@keyframes alert90s-progress{0%{width:100%}to{width:0}}@keyframes alert90s-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert90s-pop-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes alert90s-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}@keyframes alert90s-toast-slide-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.alert90s-toast-container{display:flex;gap:10px;padding:10px;pointer-events:none;position:fixed;z-index:10000}.alert90s-toast-top-start{flex-direction:column;left:0;top:0}.alert90s-toast-top{flex-direction:column;left:50%;top:0;transform:translateX(-50%)}.alert90s-toast-top-end{flex-direction:column;right:0;top:0}.alert90s-toast-center-start{flex-direction:column;left:0;top:50%;transform:translateY(-50%)}.alert90s-toast-center{flex-direction:column;left:50%;top:50%;transform:translate(-50%,-50%)}.alert90s-toast-center-end{flex-direction:column;right:0;top:50%;transform:translateY(-50%)}.alert90s-toast-bottom-start{bottom:0;flex-direction:column-reverse;left:0}.alert90s-toast-bottom{bottom:0;flex-direction:column-reverse;left:50%;transform:translateX(-50%)}.alert90s-toast-bottom-end{bottom:0;flex-direction:column-reverse;right:0}.alert90s-box.alert90s-toast{align-items:stretch;bottom:auto!important;box-shadow:6px 6px 0 0 #000;flex-direction:row;left:auto!important;margin:0;max-width:100%;min-width:250px;padding:0;pointer-events:auto;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:auto}.alert90s-toast .alert90s-header{display:none}.alert90s-toast .alert90s-body{align-items:center;flex-direction:row;gap:1rem;padding:1rem 1.5rem}.alert90s-toast .alert90s-icon{height:2.5rem;margin-bottom:0;width:2.5rem}.alert90s-toast .alert90s-icon img,.alert90s-toast .alert90s-icon svg{height:1.25rem;width:1.25rem}.alert90s-content-wrapper{align-items:center;display:flex;flex-direction:column;width:100%}.alert90s-toast .alert90s-content-wrapper{align-items:flex-start;text-align:left}.alert90s-box.alert90s-toast[dir=rtl] .alert90s-content-wrapper{align-items:flex-end;text-align:right}.alert90s-toast .alert90s-title{font-size:1rem;margin-bottom:.25rem}.alert90s-toast .alert90s-html,.alert90s-toast .alert90s-message{font-size:.875rem;margin-bottom:0}.alert90s-toast-close{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.5rem;justify-content:center;margin:0;margin-inline-start:auto;padding:0;transition:transform .1s,background-color .1s;width:1.5rem}.alert90s-toast-close span{color:#000;display:block;font-size:10px;font-weight:700;line-height:1}.alert90s-toast-close:hover{background-color:#f87171;transform:scale(1.1)}.btn90s{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:900;justify-content:center;letter-spacing:.05em;margin:.25rem;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:transform .1s,box-shadow .1s,background-color .1s}.btn90s:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.btn90s:focus-visible{outline:2px dashed #000;outline-offset:4px}.btn90s.primary{background-color:#00f0ff}.btn90s.primary:hover{background-color:#66f6ff}.btn90s.success{background-color:#4ade80}.btn90s.success:hover{background-color:#86efac}.btn90s.warning{background-color:#ffc900}.btn90s.warning:hover{background-color:#ffe066}.btn90s.danger{background-color:#ff90e8}.btn90s.danger:hover{background-color:#ffbaf0}.btn90s.dark{background-color:#000;border-color:#000;color:#fff}.btn90s.dark:hover{background-color:#333}.btn90s.sm{border-width:3px;box-shadow:3px 3px 0 0 #000;font-size:.875rem;padding:.5rem 1rem}.btn90s.sm:active{transform:translate(3px,3px)}.btn90s.lg{border-width:5px;box-shadow:6px 6px 0 0 #000;font-size:1.25rem;padding:1rem 2rem}.btn90s.lg:active{transform:translate(6px,6px)}.alert90s-tooltip{animation:tooltip-pop .15s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:3px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;display:none;font-family:inherit;font-size:.875rem;font-weight:700;max-width:300px;padding:.5rem 1rem;pointer-events:none;position:absolute;white-space:pre-wrap;z-index:100000}.alert90s-tooltip.show{display:block}.alert90s-tooltip.c-yellow{background-color:#fef08a}.alert90s-tooltip.c-cyan{background-color:#00f0ff}.alert90s-tooltip.c-pink{background-color:#ff90e8}.alert90s-tooltip.c-base{background-color:#fff}.alert90s-tooltip.c-dark{background-color:#000;color:#fff}.alert90s-tooltip:after{border-style:solid;content:"";height:0;position:absolute;width:0}.alert90s-tooltip.pos-top:after{border-color:#000 transparent transparent;border-width:8px 8px 0;bottom:-8px;left:50%;margin-left:-8px}.alert90s-tooltip.pos-bottom:after{border-color:transparent transparent #000;border-width:0 8px 8px;left:50%;margin-left:-8px;top:-8px}.alert90s-tooltip.pos-left:after{border-color:transparent transparent transparent #000;border-width:8px 0 8px 8px;margin-top:-8px;right:-8px;top:50%}.alert90s-tooltip.pos-right:after{border-color:transparent #000 transparent transparent;border-width:8px 8px 8px 0;left:-8px;margin-top:-8px;top:50%}@keyframes tooltip-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.alert90s-dark.alert90s-box{background-color:#2a2a35;color:#eaeaea}.alert90s-dark .alert90s-title{color:#fff;text-shadow:2px 2px 0 #000}.alert90s-dark .alert90s-html,.alert90s-dark .alert90s-message{color:#d4d4d4}.alert90s-dark .alert90s-html a{color:#60a5fa}.alert90s-dark .alert90s-input{background-color:#1a1a24;border-color:#000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.5);color:#fff}.alert90s-dark .alert90s-select-box{background-color:#1a1a24;border-color:#555;box-shadow:4px 4px 0 #555;color:#eaeaea}.alert90s-dark .alert90s-select-box .alert90s-select-arrow path{stroke:#eaeaea}.alert90s-dark .alert90s-select-toggle:checked~.alert90s-select-box{background-color:#ff6b35;color:#fff}.alert90s-dark .alert90s-select-menu{background-color:#1a1a24;border-color:#555;box-shadow:4px 4px 0 #555}.alert90s-dark .alert90s-select-item{border-bottom-color:#555;color:#eaeaea}.alert90s-dark .alert90s-select-item:hover{background-color:#555;color:#ff6b35}.alert90s-dark .alert90s-input:focus{border-color:#0ff}.alert90s-dark .alert90s-button{background-color:#ececec;color:#000}.alert90s-dark .alert90s-button.cancel{background-color:#f87171}.alert90s-dark .alert90s-button.deny{background-color:#fb923c}.alert90s-dark .alert90s-button.confirm{background-color:#4ade80}.alert90s-dark .alert90s-checkbox-label .cb-box{fill:#1a1a24;stroke:#555}.alert90s-dark .alert90s-checkbox-label input[type=checkbox]:checked~.alert90s-cb-svg .cb-box{fill:#2a2a35}.alert90s-dark .alert90s-checkbox-label .cb-shadow{fill:#555}.alert90s-dark .alert90s-cb-text{color:#eaeaea}.alert90s-dark .alert90s-radio-label .radio-box{fill:#1a1a24;stroke:#555}.alert90s-dark .alert90s-radio-label input[type=radio]:checked~.alert90s-radio-svg .radio-box{fill:#2a2a35}.alert90s-dark .alert90s-radio-label .radio-shadow{fill:#555}.alert90s-dark .alert90s-radio-text{color:#eaeaea}.alert90s-theme-checkbox{display:none}.alert90s-theme-wrapper{cursor:pointer;display:inline-block;position:relative;transform:rotate(-1deg);transition:transform .1s}.alert90s-theme-wrapper:active{transform:rotate(0deg) scale(.98)}.alert90s-theme-track-shadow{fill:#000}.alert90s-theme-track-base{fill:#facc15;stroke:#000;stroke-width:6;stroke-linejoin:miter;transition:fill .5s cubic-bezier(.8,0,.2,1)}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-track-base{fill:#1e1e26}.alert90s-theme-thumb-group{transform:translateX(0);transition:transform .5s cubic-bezier(.68,-.55,.265,1.55)}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-group{transform:translateX(190px)}.alert90s-theme-thumb-shadow{fill:#000}.alert90s-theme-thumb-body{fill:#fff;stroke:#000;stroke-width:6;stroke-linejoin:miter;transition:fill .3s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-body{fill:#eaeaea}.alert90s-theme-icon-sun{opacity:1;transition:opacity 0s .25s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-sun{opacity:0}.alert90s-theme-icon-moon{filter:drop-shadow(0 0 10px #00FFFF) drop-shadow(0 0 20px #00FFFF);opacity:0;transition:opacity 0s .25s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-moon{opacity:1}.alert90s-theme-text-label{font-family:Impact,Arial Black,sans-serif;font-size:38px;letter-spacing:2px;pointer-events:none;user-select:none}.alert90s-theme-text-day{fill:#000;opacity:1;transition:opacity .3s ease}.alert90s-theme-text-night{fill:#0ff;opacity:0;transition:opacity .3s ease}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-day{opacity:0}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-night{opacity:1}.alert90s-theme-deco-accent{fill:#ff90e8;transition:fill .4s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-deco-accent{fill:#4ade80}');class t{static getOptions(){return this.currentOptions||{}}static getPopup(){return this.currentPopup||null}static getTimerLeft(){if(!this.timerEnd)return;const t=this.timerEnd-Date.now();return t>0?t:0}static isLoading(){const t=this.getPopup();if(!t)return!1;const e=t.querySelector(".alert90s-actions"),o=t.querySelector(".alert90s-loader");return e&&"none"===e.style.display||!!o}static showLoading(){const e=this.getPopup();if(e){const o=e.querySelector(".alert90s-actions");o&&(o.style.display="none");let a=e.querySelector(".alert90s-loader");if(!a){a=document.createElement("div"),a.className="alert90s-loader";const r=t.currentOptions&&t.currentOptions.loaderType||"hourglass";if("ascii"===r)a.innerHTML='<div class="alert90s-spinner ascii"></div>';else if("blinking"===r)a.innerHTML='<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>';else if("progress"===r)a.innerHTML='<div class="alert90s-spinner progress"></div>';else if("segmented"===r){const t=[];for(let e=1;e<=10;e++){const o=5+29*(e-1);t.push(`<g class="a90s-seg-${e}"><rect class="a90s-fl-${e}" x="${o}" y="6" width="25" height="28" fill="#ff6b35"/><rect x="${o}" y="6" width="25" height="28" fill="url(#a90s-dither)"/><rect x="${o}" y="6" width="25" height="28" fill="none" stroke="#000" stroke-width="2"/></g>`)}const e=[];for(let t=0;t<=10;t++)e.push(`<text x="295" y="55" class="a90s-txt-${10*t}" text-anchor="end" font-size="14" font-weight="bold" fill="#000">${10*t}%</text>`);a.innerHTML=`<div class="alert90s-spinner segmented"><svg viewBox="0 0 300 60" width="300" height="60"><defs><pattern id="a90s-dither" width="4" height="4" patternUnits="userSpaceOnUse"><path d="M0,0 h2 v2 h-2 Z M2,2 h2 v2 h-2 Z" fill="#000" opacity="0.3"/></pattern></defs><rect x="0" y="0" width="300" height="40" fill="#fff" stroke="#000" stroke-width="3" rx="0"/>${t.join("")}${e.join("")}</svg></div>`}else a.innerHTML='<div class="alert90s-spinner hourglass">⏳</div>';o&&o.parentNode?o.parentNode.insertBefore(a,o):e.querySelector(".alert90s-body").appendChild(a)}}}static hideLoading(){const t=this.getPopup();if(t){const e=t.querySelector(".alert90s-actions");e&&(e.style.display="");const o=t.querySelector(".alert90s-loader");o&&o.remove()}}static showValidationMessage(t){const e=this.getPopup();if(e){let o=e.querySelector(".alert90s-validation-message");if(!o){o=document.createElement("div"),o.className="alert90s-validation-message";const t=e.querySelector(".alert90s-actions");t&&t.parentNode?t.parentNode.insertBefore(o,t):e.querySelector(".alert90s-body").appendChild(o)}o.innerHTML=t,o.style.display="block"}}static resetValidationMessage(){const t=this.getPopup();if(t){const e=t.querySelector(".alert90s-validation-message");e&&(e.style.display="none")}}static getToastContainer(t){const e=`alert90s-toast-container alert90s-toast-${t}`;let o=document.querySelector(`.${e.replace(/ /g,".")}`);return o||(o=document.createElement("div"),o.className=e,document.body.appendChild(o)),o}static fire(t={}){return this.show(t)}static show(e={}){return new Promise(o=>{"string"==typeof e&&(e={title:e}),this.currentOptions=e;const a={title:void 0!==e.title?e.title:"",text:e.message||e.text||"",html:e.html||"",icon:e.type||e.icon||"",iconHtml:e.iconHtml||"",showConfirmButton:!1!==e.showConfirmButton,showCancelButton:e.showCancelButton||!1,showDenyButton:e.showDenyButton||!1,showCloseButton:void 0===e.showCloseButton||e.showCloseButton,loaderType:e.loaderType||"hourglass",confirmButtonText:e.confirmText||e.confirmButtonText||"OK",cancelButtonText:e.cancelText||e.cancelButtonText||"Cancel",denyButtonText:e.denyText||e.denyButtonText||"No",confirmButtonColor:e.confirmButtonColor||"",cancelButtonColor:e.cancelButtonColor||"",denyButtonColor:e.denyButtonColor||"",background:e.background||"",color:e.color||"",titleColor:e.titleColor||"",iconColor:e.iconColor||"",confirmButtonAriaLabel:e.confirmButtonAriaLabel||"",cancelButtonAriaLabel:e.cancelButtonAriaLabel||"",denyButtonAriaLabel:e.denyButtonAriaLabel||"",focusConfirm:!1!==e.focusConfirm,footer:e.footer||"",imageUrl:e.imageUrl||"",imageWidth:e.imageWidth||null,imageHeight:e.imageHeight||null,imageAlt:e.imageAlt||"",input:e.input||null,inputPlaceholder:e.inputPlaceholder||"",inputValue:e.inputValue||"",inputOptions:e.inputOptions||{},inputAttributes:e.inputAttributes||{},showLoaderOnConfirm:e.showLoaderOnConfirm||!1,preConfirm:e.preConfirm||null,toast:e.toast||!1,draggable:e.draggable||!1,position:e.position||(e.toast?"top-end":"center"),allowOutsideClick:void 0===e.allowOutsideClick||e.allowOutsideClick,dir:e.dir||"auto",theme:e.theme||"light",showClass:e.showClass||{popup:"alert90s-pop-in"},hideClass:e.hideClass||{popup:"alert90s-fade-out"},timer:e.timer||null,timerProgressBar:e.timerProgressBar||!1,didOpen:e.didOpen||null,willClose:e.willClose||null};let r=null;a.toast||(r=document.createElement("div"),r.className=`alert90s-overlay alert90s-pos-${a.position}`,r.addEventListener("mousedown",t=>{if(t.target===r){("function"==typeof a.allowOutsideClick?a.allowOutsideClick():a.allowOutsideClick)&&b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"backdrop"})}}));const s=document.createElement("div");s.className="alert90s-box",a.toast&&s.classList.add("alert90s-toast");let i=a.theme;"auto"===i&&(i=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),"dark"===i&&s.classList.add("alert90s-dark"),"rtl"===document.dir||"rtl"===a.dir||a.position.includes("start")?s.setAttribute("dir","auto"===a.dir?document.dir||"ltr":a.dir):s.setAttribute("dir",a.dir),a.showClass.popup&&"alert90s-pop-in"!==a.showClass.popup&&(s.style.animation="none",s.className=`alert90s-box ${a.showClass.popup}`),a.background&&(s.style.backgroundColor=a.background),a.color&&(s.style.color=a.color),a.draggable&&s.classList.add("is-draggable"),a.toast||(this.currentPopup=s);const l=document.createElement("div");l.className="alert90s-body";const n=document.createElement("div");n.className="alert90s-header",a.draggable&&n.classList.add("draggable");let c="";if(a.showCloseButton&&(c='\n <button class="alert90s-close-btn" id="alert90s-close" aria-label="Close">\n <span>✕</span>\n </button>\n '),n.innerHTML=`\n <div class="alert90s-header-left">\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n </div>\n <div class="alert90s-header-right">\n <span class="alert90s-header-title">SYS.REQ</span>\n ${c}\n </div>\n `,a.draggable){let t,e,o,a,r=!1;n.addEventListener("mousedown",i=>{if(i.target.closest("#alert90s-close"))return;r=!0,t=i.clientX,e=i.clientY;const l=s.getBoundingClientRect();s.style.transform="none",s.style.animation="none",o=l.left,a=l.top,s.style.left=o+"px",s.style.top=a+"px",s.style.margin="0",document.body.style.userSelect="none"}),document.addEventListener("mousemove",i=>{r&&(s.style.left=o+(i.clientX-t)+"px",s.style.top=a+(i.clientY-e)+"px")}),document.addEventListener("mouseup",()=>{r&&(r=!1,document.body.style.userSelect="")})}let d=null;if(a.timer&&a.timerProgressBar&&(d=document.createElement("div"),d.className="alert90s-progress-bar",d.style.animationDuration=`${a.timer}ms`,s.appendChild(d)),a.imageUrl){const t=document.createElement("div");t.className="alert90s-image-container";const e=document.createElement("img");e.src=a.imageUrl,a.imageAlt&&(e.alt=a.imageAlt);let o="";a.imageWidth&&(o+=`width: ${a.imageWidth}px; max-width: 100%; `),a.imageHeight&&(o+=`height: ${a.imageHeight}px; `),o&&t.setAttribute("style",o),t.appendChild(e),l.appendChild(t)}if(a.icon){const t=document.createElement("div"),e="error"===a.icon?"danger":a.icon;t.className=`alert90s-icon ${e}`;let o="";if(a.iconHtml?o=`<div class="alert90s-icon-custom">${a.iconHtml}</div>`:"warning"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>':"danger"===a.icon||"error"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':"info"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>':"success"===a.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>':"question"===a.icon&&(o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'),t.innerHTML=o,a.iconColor&&(t.style.color=a.iconColor,t.style.borderColor=a.iconColor,!a.iconHtml)){const e=t.querySelector("svg");e&&(e.style.stroke=a.iconColor)}o&&l.appendChild(t)}const p=document.createElement("div");if(p.className="alert90s-content-wrapper",a.title){const t=document.createElement("h2");t.className="alert90s-title",t.innerHTML=a.title,a.titleColor&&(t.style.color=a.titleColor),p.appendChild(t)}if(a.html){const t=document.createElement("div");t.className="alert90s-html",t.innerHTML=a.html,a.color&&(t.style.color=a.color),p.appendChild(t)}else if(a.text){const t=document.createElement("p");t.className="alert90s-message",t.textContent=a.text,a.color&&(t.style.color=a.color),p.appendChild(t)}if((a.title||a.html||a.text)&&l.appendChild(p),a.toast&&a.showCloseButton){const t=document.createElement("button");t.className="alert90s-toast-close",t.innerHTML="<span>✕</span>",t.onclick=()=>b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}),l.appendChild(t)}let f=null;if(a.input){const t=document.createElement("div");if(t.className="alert90s-input-container","select"===a.input){f=document.createElement("input"),f.type="hidden",f.value=a.inputValue||"";const e=document.createElement("div");e.className="alert90s-select-wrapper";const o="a90s-sel-"+Date.now(),r=document.createElement("input");r.type="checkbox",r.id=o,r.className="alert90s-select-toggle";const s=document.createElement("label");s.setAttribute("for",o),s.className="alert90s-select-box";const i=document.createElement("span");i.className="alert90s-select-text",i.textContent=a.inputPlaceholder||"-- Select --",s.appendChild(i);const l="http://www.w3.org/2000/svg",n=document.createElementNS(l,"svg");n.setAttribute("class","alert90s-select-arrow"),n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("width","22"),n.setAttribute("height","22");const c=document.createElementNS(l,"path");c.setAttribute("d","M4 8 L12 16 L20 8"),c.setAttribute("fill","none"),c.setAttribute("stroke","#000"),c.setAttribute("stroke-width","4"),c.setAttribute("stroke-linecap","square"),c.setAttribute("stroke-linejoin","miter"),n.appendChild(c),s.appendChild(n);const d=document.createElement("div");d.className="alert90s-select-menu";for(const[t,e]of Object.entries(a.inputOptions)){const o=document.createElement("div");o.className="alert90s-select-item",o.textContent=e,o.dataset.value=t,t===a.inputValue&&(i.textContent=e),o.addEventListener("click",()=>{f.value=t,i.textContent=e,r.checked=!1,d.querySelectorAll(".alert90s-select-item").forEach(t=>t.classList.remove("selected")),o.classList.add("selected")}),d.appendChild(o)}e.appendChild(r),e.appendChild(s),e.appendChild(d),e.appendChild(f),t.appendChild(e)}else if("radio"===a.input){const e=document.createElement("div");e.className="alert90s-radio-group";const o="http://www.w3.org/2000/svg";for(const[t,r]of Object.entries(a.inputOptions)){const s=document.createElement("label");s.className="alert90s-radio-label";const i=document.createElement("input");i.type="radio",i.name="alert90s-radio",i.value=t,t===a.inputValue&&(i.checked=!0);const l=document.createElementNS(o,"svg");l.setAttribute("class","alert90s-radio-svg"),l.setAttribute("viewBox","0 0 100 100"),l.setAttribute("width","32"),l.setAttribute("height","32");const n=document.createElementNS(o,"circle");n.setAttribute("class","radio-shadow"),n.setAttribute("cx","54"),n.setAttribute("cy","54"),n.setAttribute("r","36"),n.setAttribute("fill","#000");const c=document.createElementNS(o,"circle");c.setAttribute("class","radio-box"),c.setAttribute("cx","46"),c.setAttribute("cy","46"),c.setAttribute("r","36"),c.setAttribute("fill","#e4e0d7"),c.setAttribute("stroke","#000"),c.setAttribute("stroke-width","8");const d=document.createElementNS(o,"circle");d.setAttribute("class","radio-dot"),d.setAttribute("cx","46"),d.setAttribute("cy","46"),d.setAttribute("r","18"),d.setAttribute("fill","#ff6b35"),d.setAttribute("stroke","#000"),d.setAttribute("stroke-width","6"),l.appendChild(n),l.appendChild(c),l.appendChild(d);const p=document.createElement("span");p.className="alert90s-radio-text",p.textContent=r,s.appendChild(i),s.appendChild(l),s.appendChild(p),e.appendChild(s)}f=e,t.appendChild(e)}else if("checkbox"===a.input||"toggle"===a.input){const e=document.createElement("label");if(e.className="toggle"===a.input?"alert90s-toggle-label":"alert90s-checkbox-label",f=document.createElement("input"),f.type="checkbox",f.checked=!!a.inputValue,"toggle"===a.input){const t=document.createElement("div");if(t.className="alert90s-toggle-slider",e.appendChild(f),e.appendChild(t),a.inputPlaceholder){const t=document.createElement("span");t.textContent=a.inputPlaceholder,e.appendChild(t)}}else{const t="http://www.w3.org/2000/svg",o=document.createElementNS(t,"svg");o.setAttribute("class","alert90s-cb-svg"),o.setAttribute("viewBox","0 0 100 100"),o.setAttribute("width","36"),o.setAttribute("height","36");const r=document.createElementNS(t,"rect");r.setAttribute("class","cb-shadow"),r.setAttribute("x","12"),r.setAttribute("y","12"),r.setAttribute("width","80"),r.setAttribute("height","80"),r.setAttribute("fill","#000000");const s=document.createElementNS(t,"rect");s.setAttribute("class","cb-box"),s.setAttribute("x","4"),s.setAttribute("y","4"),s.setAttribute("width","80"),s.setAttribute("height","80"),s.setAttribute("fill","#e4e0d7"),s.setAttribute("stroke","#000000"),s.setAttribute("stroke-width","8");const i=document.createElementNS(t,"path");i.setAttribute("class","cb-check"),i.setAttribute("d","M 22 48 L 40 68 L 82 20"),i.setAttribute("fill","none"),i.setAttribute("stroke","#ff6b35"),i.setAttribute("stroke-width","14"),i.setAttribute("stroke-linecap","square"),i.setAttribute("stroke-linejoin","miter"),o.appendChild(r),o.appendChild(s),o.appendChild(i);const l=document.createElement("span");l.className="alert90s-cb-text",l.textContent=a.inputPlaceholder||"Check me",e.appendChild(f),e.appendChild(o),e.appendChild(l)}t.appendChild(e)}else"textarea"===a.input?(f=document.createElement("textarea"),f.className="alert90s-input",a.inputPlaceholder&&(f.placeholder=a.inputPlaceholder),a.inputValue&&(f.value=a.inputValue),t.appendChild(f)):(f=document.createElement("input"),f.type=a.input,f.className="alert90s-input",a.inputPlaceholder&&(f.placeholder=a.inputPlaceholder),a.inputValue&&(f.value=a.inputValue),t.appendChild(f));if(a.inputAttributes&&f&&!["radio"].includes(a.input))for(const[t,e]of Object.entries(a.inputAttributes))f.setAttribute(t,e);l.appendChild(t)}const m=document.createElement("div");m.className="alert90s-actions";let h=null,u=null;const b=t=>{u&&clearTimeout(u),a.willClose&&a.willClose(),s.style.animation="none","alert90s-fade-out"===a.hideClass.popup?(s.style.animation="alert90s-fade-out 0.2s forwards",r&&(r.style.transition="opacity 0.2s",r.style.opacity="0")):s.className=`alert90s-box ${a.hideClass.popup}`,setTimeout(()=>{a.toast?s.parentNode&&s.parentNode.removeChild(s):r&&document.body.contains(r)&&document.body.removeChild(r),o(t)},200)},g=async()=>{let e=!0;if("radio"===a.input){const t=f.querySelector('input[type="radio"]:checked');e=t?t.value:null}else"checkbox"===a.input||"toggle"===a.input?e=f.checked:f&&(e=f.value);if(a.preConfirm){t.resetValidationMessage(),a.showLoaderOnConfirm&&t.showLoading();try{const o=await Promise.resolve(a.preConfirm(e));if(!1===o)return void t.hideLoading();void 0!==o&&o!==e&&(e=o);const r=s.querySelector(".alert90s-validation-message");if(r&&"block"===r.style.display)return void t.hideLoading()}catch(e){return t.showValidationMessage(`Request failed: ${e}`),void t.hideLoading()}}b({isConfirmed:!0,isDenied:!1,isDismissed:!1,value:e})};if(a.showCancelButton){const t=document.createElement("button");t.className="alert90s-button cancel",t.innerHTML=a.cancelButtonText,a.cancelButtonAriaLabel&&t.setAttribute("aria-label",a.cancelButtonAriaLabel),a.cancelButtonColor&&(t.style.backgroundColor=a.cancelButtonColor),t.onclick=()=>b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"cancel"}),m.appendChild(t)}if(a.showDenyButton){const t=document.createElement("button");t.className="alert90s-button deny",t.innerHTML=a.denyButtonText,a.denyButtonAriaLabel&&t.setAttribute("aria-label",a.denyButtonAriaLabel),a.denyButtonColor&&(t.style.backgroundColor=a.denyButtonColor),t.onclick=()=>b({isConfirmed:!1,isDenied:!0,isDismissed:!1}),m.appendChild(t)}if(a.showConfirmButton){const t=document.createElement("button");t.className="alert90s-button confirm",t.innerHTML=a.confirmButtonText,a.confirmButtonAriaLabel&&t.setAttribute("aria-label",a.confirmButtonAriaLabel),a.confirmButtonColor&&(t.style.backgroundColor=a.confirmButtonColor),t.onclick=g,m.appendChild(t),h=t}if((a.showCancelButton||a.showDenyButton||a.showConfirmButton)&&l.appendChild(m),a.footer){const t=document.createElement("div");t.className="alert90s-footer",t.innerHTML=a.footer,l.appendChild(t)}if(s.appendChild(n),s.appendChild(l),a.toast){const e=t.getToastContainer(a.position);s.style.animation="alert90s-toast-slide-in 0.3s ease-out",e.appendChild(s)}else r.appendChild(s);if(a.showCloseButton&&!a.toast){const t=n.querySelector("#alert90s-close");t&&(t.onclick=()=>b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}))}a.toast||document.body.appendChild(r),a.focusConfirm&&h&&setTimeout(()=>{f?f.focus():h.focus()},50),a.didOpen&&setTimeout(()=>{a.didOpen()},0),a.timer&&(this.timerEnd=Date.now()+a.timer,u=setTimeout(()=>{b({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"timer"})},a.timer))})}static initTooltips(){this._tooltipsInitialized||(this._tooltipsInitialized=!0,this._tooltipEl=document.createElement("div"),this._tooltipEl.className="alert90s-tooltip",document.body.appendChild(this._tooltipEl),document.addEventListener("mouseover",this._handleTooltipMouseOver.bind(this)),document.addEventListener("mouseout",this._handleTooltipMouseOut.bind(this)),document.addEventListener("focusin",this._handleTooltipMouseOver.bind(this)),document.addEventListener("focusout",this._handleTooltipMouseOut.bind(this)))}static _handleTooltipMouseOver(t){const e=t.target.closest("[data-alert90s-tooltip]");if(!e)return;const o=e.getAttribute("data-alert90s-tooltip");if(!o)return;const a=e.getAttribute("data-alert90s-position")||"top",r=e.getAttribute("data-alert90s-color")||"yellow";this._tooltipEl.innerHTML=o,this._tooltipEl.className=`alert90s-tooltip pos-${a} c-${r} show`;const s=e.getBoundingClientRect(),i=this._tooltipEl.getBoundingClientRect(),l=10;let n=0,c=0;switch(a){case"top":n=s.top-i.height-l,c=s.left+s.width/2-i.width/2;break;case"bottom":n=s.bottom+l,c=s.left+s.width/2-i.width/2;break;case"left":n=s.top+s.height/2-i.height/2,c=s.left-i.width-l;break;case"right":n=s.top+s.height/2-i.height/2,c=s.right+l}c<l&&(c=l),n<l&&(n=l),c+i.width>window.innerWidth-l&&(c=window.innerWidth-i.width-l),this._tooltipEl.style.top=`${n+window.scrollY}px`,this._tooltipEl.style.left=`${c+window.scrollX}px`}static _handleTooltipMouseOut(t){const e=t.target.closest("[data-alert90s-tooltip]");e&&setTimeout(()=>{this._tooltipEl.matches(":hover")||e.matches(":hover")||e.contains(document.activeElement)||this._tooltipEl.classList.remove("show")},10)}static renderThemeToggle(t,e={}){const o=document.querySelector(t);if(!o)return null;const a=`\n <label class="alert90s-theme-wrapper" aria-label="Neo Brutalist Theme Switcher" style="width: ${e.width||"100%"}; height: auto; aspect-ratio: 5 / 2;">\n <input type="checkbox" class="alert90s-theme-checkbox" ${e.isDark||!1?"checked":""} />\n \n <svg viewBox="0 0 300 120" style="width: 100%; height: 100%; overflow: visible;">\n \x3c!-- HARD OFFSET SHADOW --\x3e\n <rect class="alert90s-theme-track-shadow" x="18" y="18" width="280" height="100" />\n \x3c!-- MAIN TRACK --\x3e\n <rect class="alert90s-theme-track-base" x="10" y="10" width="280" height="100" />\n\n \x3c!-- DECORATIVE 90S UI ELEMENTS --\x3e\n <g class="alert90s-theme-deco-elements" stroke="#000" stroke-width="2">\n <circle cx="25" cy="25" r="4" fill="#FFF" />\n <line x1="23" y1="23" x2="27" y2="27" />\n <circle cx="275" cy="25" r="4" fill="#FFF" />\n <line x1="273" y1="27" x2="277" y2="23" />\n <circle cx="25" cy="95" r="4" fill="#FFF" />\n <line x1="23" y1="95" x2="27" y2="95" />\n <circle cx="275" cy="95" r="4" fill="#FFF" />\n <line x1="275" y1="93" x2="275" y2="97" />\n \n <line x1="120" y1="20" x2="120" y2="35" stroke-width="3" />\n <line x1="128" y1="20" x2="128" y2="35" stroke-width="5" />\n <line x1="138" y1="20" x2="138" y2="35" stroke-width="2" />\n <line x1="145" y1="20" x2="145" y2="35" stroke-width="6" />\n </g>\n\n \x3c!-- DAY / NIGHT TEXT --\x3e\n <text class="alert90s-theme-text-label alert90s-theme-text-night" x="40" y="75">NIGHT</text>\n <text class="alert90s-theme-text-label alert90s-theme-text-day" x="190" y="75">DAY</text>\n\n \x3c!-- NEON DECORATIVE STICKER --\x3e\n <rect class="alert90s-theme-deco-accent" x="120" y="85" width="60" height="15" stroke="#000" stroke-width="3" />\n <text x="125" y="96" font-size="10" font-weight="bold" fill="#000" font-family="sans-serif">SYS.UI</text>\n\n \x3c!-- SLIDING THUMB GROUP --\x3e\n <g class="alert90s-theme-thumb-group">\n \x3c!-- Thumb Shadow --\x3e\n <rect class="alert90s-theme-thumb-shadow" x="23" y="23" width="80" height="80" />\n \x3c!-- Thumb Body --\x3e\n <rect class="alert90s-theme-thumb-body" x="15" y="15" width="80" height="80" />\n \n \x3c!-- SUN ICON --\x3e\n <g class="alert90s-theme-icon-sun">\n <rect x="40" y="40" width="30" height="30" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="48" y="48" width="14" height="14" fill="#ef4444" stroke="#000" stroke-width="2" />\n <rect x="50" y="20" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="50" y="80" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="20" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="80" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="25" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="75" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="25" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="75" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n </g>\n\n \x3c!-- MOON ICON --\x3e\n <g class="alert90s-theme-icon-moon">\n <path fill="#000" transform="translate(3, 3)" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />\n <path fill="#00FFFF" stroke="#000" stroke-width="3" stroke-linejoin="miter" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />\n <rect x="70" y="40" width="5" height="5" fill="#FFFFFF" opacity="0.8" />\n <rect x="65" y="70" width="5" height="5" fill="#FFFFFF" opacity="0.8" />\n </g>\n </g>\n </svg>\n </label>\n `;o.innerHTML=a;return o.querySelector(".alert90s-theme-checkbox").addEventListener("change",t=>{"function"==typeof e.onChange&&e.onChange(t.target.checked)}),o}}return"undefined"!=typeof window&&(window.Alert90s=t,document.addEventListener("DOMContentLoaded",()=>{t.initTooltips()})),t});
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -38,6 +38,18 @@ class Alert90s {
|
|
|
38
38
|
loader.innerHTML = '<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>';
|
|
39
39
|
} else if (type === 'progress') {
|
|
40
40
|
loader.innerHTML = '<div class="alert90s-spinner progress"></div>';
|
|
41
|
+
} else if (type === 'segmented') {
|
|
42
|
+
// Build 10-segment SVG progress bar
|
|
43
|
+
const segs = [];
|
|
44
|
+
for (let i = 1; i <= 10; i++) {
|
|
45
|
+
const x = 5 + (i - 1) * 29;
|
|
46
|
+
segs.push(`<g class="a90s-seg-${i}"><rect class="a90s-fl-${i}" x="${x}" y="6" width="25" height="28" fill="#ff6b35"/><rect x="${x}" y="6" width="25" height="28" fill="url(#a90s-dither)"/><rect x="${x}" y="6" width="25" height="28" fill="none" stroke="#000" stroke-width="2"/></g>`);
|
|
47
|
+
}
|
|
48
|
+
const pctTexts = [];
|
|
49
|
+
for (let i = 0; i <= 10; i++) {
|
|
50
|
+
pctTexts.push(`<text x="295" y="55" class="a90s-txt-${i * 10}" text-anchor="end" font-size="14" font-weight="bold" fill="#000">${i * 10}%</text>`);
|
|
51
|
+
}
|
|
52
|
+
loader.innerHTML = `<div class="alert90s-spinner segmented"><svg viewBox="0 0 300 60" width="300" height="60"><defs><pattern id="a90s-dither" width="4" height="4" patternUnits="userSpaceOnUse"><path d="M0,0 h2 v2 h-2 Z M2,2 h2 v2 h-2 Z" fill="#000" opacity="0.3"/></pattern></defs><rect x="0" y="0" width="300" height="40" fill="#fff" stroke="#000" stroke-width="3" rx="0"/>${segs.join('')}${pctTexts.join('')}</svg></div>`;
|
|
41
53
|
} else {
|
|
42
54
|
loader.innerHTML = '<div class="alert90s-spinner hourglass">⏳</div>';
|
|
43
55
|
}
|
|
@@ -416,27 +428,75 @@ class Alert90s {
|
|
|
416
428
|
inputContainer.className = 'alert90s-input-container';
|
|
417
429
|
|
|
418
430
|
if (config.input === 'select') {
|
|
419
|
-
|
|
420
|
-
inputEl
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
431
|
+
// Hidden input to store selected value
|
|
432
|
+
inputEl = document.createElement('input');
|
|
433
|
+
inputEl.type = 'hidden';
|
|
434
|
+
inputEl.value = config.inputValue || '';
|
|
435
|
+
|
|
436
|
+
const wrapper = document.createElement('div');
|
|
437
|
+
wrapper.className = 'alert90s-select-wrapper';
|
|
438
|
+
|
|
439
|
+
const toggleId = 'a90s-sel-' + Date.now();
|
|
440
|
+
const toggle = document.createElement('input');
|
|
441
|
+
toggle.type = 'checkbox';
|
|
442
|
+
toggle.id = toggleId;
|
|
443
|
+
toggle.className = 'alert90s-select-toggle';
|
|
444
|
+
|
|
445
|
+
const box = document.createElement('label');
|
|
446
|
+
box.setAttribute('for', toggleId);
|
|
447
|
+
box.className = 'alert90s-select-box';
|
|
448
|
+
const textSpan = document.createElement('span');
|
|
449
|
+
textSpan.className = 'alert90s-select-text';
|
|
450
|
+
textSpan.textContent = config.inputPlaceholder || '-- Select --';
|
|
451
|
+
box.appendChild(textSpan);
|
|
452
|
+
// SVG Arrow
|
|
453
|
+
const svgNS = 'http://www.w3.org/2000/svg';
|
|
454
|
+
const arrow = document.createElementNS(svgNS, 'svg');
|
|
455
|
+
arrow.setAttribute('class', 'alert90s-select-arrow');
|
|
456
|
+
arrow.setAttribute('viewBox', '0 0 24 24');
|
|
457
|
+
arrow.setAttribute('width', '22');
|
|
458
|
+
arrow.setAttribute('height', '22');
|
|
459
|
+
const arrowPath = document.createElementNS(svgNS, 'path');
|
|
460
|
+
arrowPath.setAttribute('d', 'M4 8 L12 16 L20 8');
|
|
461
|
+
arrowPath.setAttribute('fill', 'none');
|
|
462
|
+
arrowPath.setAttribute('stroke', '#000');
|
|
463
|
+
arrowPath.setAttribute('stroke-width', '4');
|
|
464
|
+
arrowPath.setAttribute('stroke-linecap', 'square');
|
|
465
|
+
arrowPath.setAttribute('stroke-linejoin', 'miter');
|
|
466
|
+
arrow.appendChild(arrowPath);
|
|
467
|
+
box.appendChild(arrow);
|
|
468
|
+
|
|
469
|
+
const menu = document.createElement('div');
|
|
470
|
+
menu.className = 'alert90s-select-menu';
|
|
471
|
+
|
|
429
472
|
for (const [val, text] of Object.entries(config.inputOptions)) {
|
|
430
|
-
const
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
473
|
+
const item = document.createElement('div');
|
|
474
|
+
item.className = 'alert90s-select-item';
|
|
475
|
+
item.textContent = text;
|
|
476
|
+
item.dataset.value = val;
|
|
477
|
+
if (val === config.inputValue) {
|
|
478
|
+
textSpan.textContent = text;
|
|
479
|
+
}
|
|
480
|
+
item.addEventListener('click', () => {
|
|
481
|
+
inputEl.value = val;
|
|
482
|
+
textSpan.textContent = text;
|
|
483
|
+
toggle.checked = false;
|
|
484
|
+
// Highlight selected
|
|
485
|
+
menu.querySelectorAll('.alert90s-select-item').forEach(i => i.classList.remove('selected'));
|
|
486
|
+
item.classList.add('selected');
|
|
487
|
+
});
|
|
488
|
+
menu.appendChild(item);
|
|
435
489
|
}
|
|
436
|
-
|
|
490
|
+
|
|
491
|
+
wrapper.appendChild(toggle);
|
|
492
|
+
wrapper.appendChild(box);
|
|
493
|
+
wrapper.appendChild(menu);
|
|
494
|
+
wrapper.appendChild(inputEl);
|
|
495
|
+
inputContainer.appendChild(wrapper);
|
|
437
496
|
} else if (config.input === 'radio') {
|
|
438
497
|
const radioGroup = document.createElement('div');
|
|
439
498
|
radioGroup.className = 'alert90s-radio-group';
|
|
499
|
+
const svgNS = 'http://www.w3.org/2000/svg';
|
|
440
500
|
for (const [val, text] of Object.entries(config.inputOptions)) {
|
|
441
501
|
const label = document.createElement('label');
|
|
442
502
|
label.className = 'alert90s-radio-label';
|
|
@@ -445,13 +505,36 @@ class Alert90s {
|
|
|
445
505
|
radio.name = 'alert90s-radio';
|
|
446
506
|
radio.value = val;
|
|
447
507
|
if (val === config.inputValue) radio.checked = true;
|
|
508
|
+
// SVG Brutalist Radio
|
|
509
|
+
const svg = document.createElementNS(svgNS, 'svg');
|
|
510
|
+
svg.setAttribute('class', 'alert90s-radio-svg');
|
|
511
|
+
svg.setAttribute('viewBox', '0 0 100 100');
|
|
512
|
+
svg.setAttribute('width', '32');
|
|
513
|
+
svg.setAttribute('height', '32');
|
|
514
|
+
const shadow = document.createElementNS(svgNS, 'circle');
|
|
515
|
+
shadow.setAttribute('class', 'radio-shadow');
|
|
516
|
+
shadow.setAttribute('cx', '54'); shadow.setAttribute('cy', '54');
|
|
517
|
+
shadow.setAttribute('r', '36'); shadow.setAttribute('fill', '#000');
|
|
518
|
+
const box = document.createElementNS(svgNS, 'circle');
|
|
519
|
+
box.setAttribute('class', 'radio-box');
|
|
520
|
+
box.setAttribute('cx', '46'); box.setAttribute('cy', '46');
|
|
521
|
+
box.setAttribute('r', '36'); box.setAttribute('fill', '#e4e0d7');
|
|
522
|
+
box.setAttribute('stroke', '#000'); box.setAttribute('stroke-width', '8');
|
|
523
|
+
const dot = document.createElementNS(svgNS, 'circle');
|
|
524
|
+
dot.setAttribute('class', 'radio-dot');
|
|
525
|
+
dot.setAttribute('cx', '46'); dot.setAttribute('cy', '46');
|
|
526
|
+
dot.setAttribute('r', '18'); dot.setAttribute('fill', '#ff6b35');
|
|
527
|
+
dot.setAttribute('stroke', '#000'); dot.setAttribute('stroke-width', '6');
|
|
528
|
+
svg.appendChild(shadow); svg.appendChild(box); svg.appendChild(dot);
|
|
448
529
|
const span = document.createElement('span');
|
|
530
|
+
span.className = 'alert90s-radio-text';
|
|
449
531
|
span.textContent = text;
|
|
450
532
|
label.appendChild(radio);
|
|
533
|
+
label.appendChild(svg);
|
|
451
534
|
label.appendChild(span);
|
|
452
535
|
radioGroup.appendChild(label);
|
|
453
536
|
}
|
|
454
|
-
inputEl = radioGroup;
|
|
537
|
+
inputEl = radioGroup;
|
|
455
538
|
inputContainer.appendChild(radioGroup);
|
|
456
539
|
} else if (config.input === 'checkbox' || config.input === 'toggle') {
|
|
457
540
|
const label = document.createElement('label');
|
|
@@ -471,9 +554,36 @@ class Alert90s {
|
|
|
471
554
|
label.appendChild(span);
|
|
472
555
|
}
|
|
473
556
|
} else {
|
|
557
|
+
// SVG Brutalist Checkbox
|
|
558
|
+
const svgNS = 'http://www.w3.org/2000/svg';
|
|
559
|
+
const svg = document.createElementNS(svgNS, 'svg');
|
|
560
|
+
svg.setAttribute('class', 'alert90s-cb-svg');
|
|
561
|
+
svg.setAttribute('viewBox', '0 0 100 100');
|
|
562
|
+
svg.setAttribute('width', '36');
|
|
563
|
+
svg.setAttribute('height', '36');
|
|
564
|
+
const shadow = document.createElementNS(svgNS, 'rect');
|
|
565
|
+
shadow.setAttribute('class', 'cb-shadow');
|
|
566
|
+
shadow.setAttribute('x', '12'); shadow.setAttribute('y', '12');
|
|
567
|
+
shadow.setAttribute('width', '80'); shadow.setAttribute('height', '80');
|
|
568
|
+
shadow.setAttribute('fill', '#000000');
|
|
569
|
+
const box = document.createElementNS(svgNS, 'rect');
|
|
570
|
+
box.setAttribute('class', 'cb-box');
|
|
571
|
+
box.setAttribute('x', '4'); box.setAttribute('y', '4');
|
|
572
|
+
box.setAttribute('width', '80'); box.setAttribute('height', '80');
|
|
573
|
+
box.setAttribute('fill', '#e4e0d7'); box.setAttribute('stroke', '#000000');
|
|
574
|
+
box.setAttribute('stroke-width', '8');
|
|
575
|
+
const check = document.createElementNS(svgNS, 'path');
|
|
576
|
+
check.setAttribute('class', 'cb-check');
|
|
577
|
+
check.setAttribute('d', 'M 22 48 L 40 68 L 82 20');
|
|
578
|
+
check.setAttribute('fill', 'none'); check.setAttribute('stroke', '#ff6b35');
|
|
579
|
+
check.setAttribute('stroke-width', '14'); check.setAttribute('stroke-linecap', 'square');
|
|
580
|
+
check.setAttribute('stroke-linejoin', 'miter');
|
|
581
|
+
svg.appendChild(shadow); svg.appendChild(box); svg.appendChild(check);
|
|
474
582
|
const span = document.createElement('span');
|
|
583
|
+
span.className = 'alert90s-cb-text';
|
|
475
584
|
span.textContent = config.inputPlaceholder || 'Check me';
|
|
476
585
|
label.appendChild(inputEl);
|
|
586
|
+
label.appendChild(svg);
|
|
477
587
|
label.appendChild(span);
|
|
478
588
|
}
|
|
479
589
|
inputContainer.appendChild(label);
|
package/src/styles.css
CHANGED
|
@@ -231,17 +231,88 @@ textarea.alert90s-input {
|
|
|
231
231
|
min-height: 100px;
|
|
232
232
|
}
|
|
233
233
|
|
|
234
|
-
/* Select */
|
|
235
|
-
|
|
234
|
+
/* Select/Dropdown (SVG Brutalist) */
|
|
235
|
+
.alert90s-select-wrapper {
|
|
236
|
+
position: relative;
|
|
237
|
+
width: 100%;
|
|
238
|
+
user-select: none;
|
|
239
|
+
z-index: 10;
|
|
240
|
+
}
|
|
241
|
+
.alert90s-select-toggle { display: none; }
|
|
242
|
+
.alert90s-select-box {
|
|
243
|
+
display: flex;
|
|
244
|
+
justify-content: space-between;
|
|
245
|
+
align-items: center;
|
|
246
|
+
background-color: #e4e0d7;
|
|
247
|
+
border: 4px solid #000;
|
|
248
|
+
padding: 0.75rem 1rem;
|
|
249
|
+
font-weight: bold;
|
|
250
|
+
font-size: 1rem;
|
|
251
|
+
color: #000;
|
|
252
|
+
cursor: pointer;
|
|
253
|
+
box-shadow: 4px 4px 0px #000;
|
|
254
|
+
transition: all 0.1s ease;
|
|
255
|
+
}
|
|
256
|
+
.alert90s-select-box:active {
|
|
257
|
+
transform: translate(3px, 3px);
|
|
258
|
+
box-shadow: 1px 1px 0px #000;
|
|
259
|
+
}
|
|
260
|
+
.alert90s-select-arrow {
|
|
261
|
+
transition: transform 0.2s steps(3, end);
|
|
262
|
+
flex-shrink: 0;
|
|
263
|
+
}
|
|
264
|
+
.alert90s-select-toggle:checked ~ .alert90s-select-box {
|
|
265
|
+
background-color: #ff6b35;
|
|
266
|
+
color: #fff;
|
|
267
|
+
}
|
|
268
|
+
.alert90s-select-toggle:checked ~ .alert90s-select-box .alert90s-select-arrow path {
|
|
269
|
+
stroke: #fff;
|
|
270
|
+
}
|
|
271
|
+
.alert90s-select-toggle:checked ~ .alert90s-select-box .alert90s-select-arrow {
|
|
272
|
+
transform: rotate(180deg);
|
|
273
|
+
}
|
|
274
|
+
.alert90s-select-menu {
|
|
275
|
+
position: absolute;
|
|
276
|
+
top: 100%;
|
|
277
|
+
left: 0;
|
|
278
|
+
right: 0;
|
|
279
|
+
margin-top: 8px;
|
|
280
|
+
background-color: #e4e0d7;
|
|
281
|
+
border: 4px solid #000;
|
|
282
|
+
box-shadow: 4px 4px 0px #000;
|
|
283
|
+
display: flex;
|
|
284
|
+
flex-direction: column;
|
|
285
|
+
opacity: 0;
|
|
286
|
+
visibility: hidden;
|
|
287
|
+
transform: translateY(-15px);
|
|
288
|
+
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-out;
|
|
289
|
+
z-index: 10;
|
|
290
|
+
}
|
|
291
|
+
.alert90s-select-toggle:checked ~ .alert90s-select-menu {
|
|
292
|
+
opacity: 1;
|
|
293
|
+
visibility: visible;
|
|
294
|
+
transform: translateY(0);
|
|
295
|
+
}
|
|
296
|
+
.alert90s-select-item {
|
|
297
|
+
padding: 0.75rem 1rem;
|
|
298
|
+
font-weight: bold;
|
|
299
|
+
font-size: 1rem;
|
|
300
|
+
border-bottom: 4px solid #000;
|
|
301
|
+
color: #000;
|
|
236
302
|
cursor: pointer;
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
background-
|
|
303
|
+
transition: background-color 0s, color 0s;
|
|
304
|
+
}
|
|
305
|
+
.alert90s-select-item:last-child { border-bottom: none; }
|
|
306
|
+
.alert90s-select-item:hover {
|
|
307
|
+
background-color: #000;
|
|
308
|
+
color: #ff6b35;
|
|
309
|
+
}
|
|
310
|
+
.alert90s-select-item.selected {
|
|
311
|
+
background-color: #ff6b35;
|
|
312
|
+
color: #fff;
|
|
242
313
|
}
|
|
243
314
|
|
|
244
|
-
/* Radio Group */
|
|
315
|
+
/* Radio Group (SVG Brutalist) */
|
|
245
316
|
.alert90s-radio-group {
|
|
246
317
|
display: flex;
|
|
247
318
|
flex-direction: column;
|
|
@@ -250,59 +321,124 @@ select.alert90s-select {
|
|
|
250
321
|
width: 100%;
|
|
251
322
|
}
|
|
252
323
|
.alert90s-radio-label {
|
|
253
|
-
display: flex;
|
|
324
|
+
display: inline-flex;
|
|
254
325
|
align-items: center;
|
|
255
326
|
gap: 0.75rem;
|
|
256
|
-
font-weight: bold;
|
|
257
327
|
cursor: pointer;
|
|
328
|
+
font-weight: bold;
|
|
258
329
|
font-size: 1rem;
|
|
330
|
+
user-select: none;
|
|
331
|
+
position: relative;
|
|
259
332
|
}
|
|
260
333
|
.alert90s-radio-label input[type="radio"] {
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
height: 1.25rem;
|
|
264
|
-
border: 4px solid #000;
|
|
265
|
-
border-radius: 50%;
|
|
266
|
-
margin: 0;
|
|
334
|
+
position: absolute;
|
|
335
|
+
opacity: 0;
|
|
267
336
|
cursor: pointer;
|
|
268
|
-
|
|
269
|
-
|
|
337
|
+
height: 0;
|
|
338
|
+
width: 0;
|
|
270
339
|
}
|
|
271
|
-
.alert90s-radio-
|
|
272
|
-
|
|
273
|
-
|
|
340
|
+
.alert90s-radio-svg {
|
|
341
|
+
overflow: visible;
|
|
342
|
+
transition: transform 0.1s ease;
|
|
343
|
+
}
|
|
344
|
+
.alert90s-radio-label:hover .alert90s-radio-svg {
|
|
345
|
+
transform: translate(-2px, -2px);
|
|
346
|
+
}
|
|
347
|
+
.alert90s-radio-label:active .alert90s-radio-svg {
|
|
348
|
+
transform: translate(2px, 2px);
|
|
349
|
+
}
|
|
350
|
+
.radio-box {
|
|
351
|
+
transition: fill 0.1s ease;
|
|
352
|
+
}
|
|
353
|
+
.alert90s-radio-label input[type="radio"]:checked ~ .alert90s-radio-svg .radio-box {
|
|
354
|
+
fill: #ffffff;
|
|
355
|
+
}
|
|
356
|
+
.radio-dot {
|
|
357
|
+
transform-origin: 50% 50%;
|
|
358
|
+
transform: scale(0) rotate(-45deg);
|
|
359
|
+
opacity: 0;
|
|
360
|
+
}
|
|
361
|
+
.alert90s-radio-label input[type="radio"]:checked ~ .alert90s-radio-svg .radio-dot {
|
|
362
|
+
opacity: 1;
|
|
363
|
+
transform: scale(1) rotate(0deg);
|
|
364
|
+
animation: alert90s-radio-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
|
365
|
+
}
|
|
366
|
+
@keyframes alert90s-radio-pop {
|
|
367
|
+
0% { transform: scale(0) rotate(-45deg); fill: #fff; }
|
|
368
|
+
50% { transform: scale(1.3) rotate(15deg); fill: #fff; }
|
|
369
|
+
100% { transform: scale(1) rotate(0deg); fill: #ff6b35; }
|
|
370
|
+
}
|
|
371
|
+
.alert90s-radio-text {
|
|
372
|
+
transition: color 0.2s;
|
|
373
|
+
}
|
|
374
|
+
.alert90s-radio-label input[type="radio"]:checked ~ .alert90s-radio-text {
|
|
375
|
+
animation: alert90s-cb-bump 0.2s ease-out forwards;
|
|
376
|
+
color: #ff6b35;
|
|
274
377
|
}
|
|
275
378
|
|
|
276
|
-
/* Checkbox */
|
|
379
|
+
/* Checkbox (SVG Brutalist) */
|
|
277
380
|
.alert90s-checkbox-label {
|
|
278
|
-
display: flex;
|
|
381
|
+
display: inline-flex;
|
|
279
382
|
align-items: center;
|
|
280
383
|
gap: 0.75rem;
|
|
281
|
-
font-weight: bold;
|
|
282
384
|
cursor: pointer;
|
|
385
|
+
font-weight: bold;
|
|
283
386
|
font-size: 1rem;
|
|
387
|
+
user-select: none;
|
|
388
|
+
position: relative;
|
|
284
389
|
}
|
|
285
390
|
.alert90s-checkbox-label input[type="checkbox"] {
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
height: 1.25rem;
|
|
289
|
-
border: 4px solid #000;
|
|
290
|
-
margin: 0;
|
|
391
|
+
position: absolute;
|
|
392
|
+
opacity: 0;
|
|
291
393
|
cursor: pointer;
|
|
292
|
-
|
|
293
|
-
|
|
394
|
+
height: 0;
|
|
395
|
+
width: 0;
|
|
294
396
|
}
|
|
295
|
-
.alert90s-
|
|
296
|
-
|
|
397
|
+
.alert90s-cb-svg {
|
|
398
|
+
overflow: visible;
|
|
399
|
+
transition: transform 0.1s ease;
|
|
297
400
|
}
|
|
298
|
-
.alert90s-checkbox-label
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
401
|
+
.alert90s-checkbox-label:hover .alert90s-cb-svg {
|
|
402
|
+
transform: translate(-2px, -2px);
|
|
403
|
+
}
|
|
404
|
+
.alert90s-checkbox-label:active .alert90s-cb-svg {
|
|
405
|
+
transform: translate(2px, 2px);
|
|
406
|
+
}
|
|
407
|
+
.cb-box {
|
|
408
|
+
transition: fill 0.1s ease;
|
|
409
|
+
}
|
|
410
|
+
.alert90s-checkbox-label input[type="checkbox"]:checked ~ .alert90s-cb-svg .cb-box {
|
|
411
|
+
fill: #ffffff;
|
|
412
|
+
}
|
|
413
|
+
.cb-check {
|
|
414
|
+
stroke-dasharray: 120;
|
|
415
|
+
stroke-dashoffset: 120;
|
|
416
|
+
transition: stroke-dashoffset 0.15s ease-out;
|
|
417
|
+
}
|
|
418
|
+
.alert90s-checkbox-label input[type="checkbox"]:checked ~ .alert90s-cb-svg .cb-check {
|
|
419
|
+
stroke-dashoffset: 0;
|
|
420
|
+
}
|
|
421
|
+
.alert90s-checkbox-label input[type="checkbox"]:checked ~ .alert90s-cb-svg {
|
|
422
|
+
animation: alert90s-cb-shake 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
423
|
+
}
|
|
424
|
+
@keyframes alert90s-cb-shake {
|
|
425
|
+
0% { transform: scale(1) translate(0, 0); }
|
|
426
|
+
30% { transform: scale(1.15) translate(-2px, -2px) rotate(-4deg); }
|
|
427
|
+
50% { transform: scale(0.95) translate(2px, 2px) rotate(3deg); }
|
|
428
|
+
75% { transform: scale(1.05) translate(-1px, -1px) rotate(-1deg); }
|
|
429
|
+
100% { transform: scale(1) translate(0, 0) rotate(0deg); }
|
|
430
|
+
}
|
|
431
|
+
.alert90s-cb-text {
|
|
432
|
+
transition: color 0.2s;
|
|
433
|
+
}
|
|
434
|
+
.alert90s-checkbox-label input[type="checkbox"]:checked ~ .alert90s-cb-text {
|
|
435
|
+
animation: alert90s-cb-bump 0.2s ease-out forwards;
|
|
436
|
+
color: #ff6b35;
|
|
437
|
+
}
|
|
438
|
+
@keyframes alert90s-cb-bump {
|
|
439
|
+
0% { transform: translateX(0); }
|
|
440
|
+
50% { transform: translateX(4px); }
|
|
441
|
+
100% { transform: translateX(0); }
|
|
306
442
|
}
|
|
307
443
|
|
|
308
444
|
/* Toggle Switch */
|
|
@@ -504,6 +640,88 @@ select.alert90s-select {
|
|
|
504
640
|
animation: alert90s-marquee 1.5s linear infinite;
|
|
505
641
|
}
|
|
506
642
|
|
|
643
|
+
/* Segmented SVG Progress Bar */
|
|
644
|
+
.alert90s-spinner.segmented {
|
|
645
|
+
display: flex;
|
|
646
|
+
justify-content: center;
|
|
647
|
+
width: 100%;
|
|
648
|
+
}
|
|
649
|
+
.alert90s-spinner.segmented svg {
|
|
650
|
+
max-width: 100%;
|
|
651
|
+
height: auto;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
/* Segment visibility - staggered appear */
|
|
655
|
+
.a90s-seg-1 { animation: a90s-op1 6s infinite; }
|
|
656
|
+
.a90s-seg-2 { animation: a90s-op2 6s infinite; }
|
|
657
|
+
.a90s-seg-3 { animation: a90s-op3 6s infinite; }
|
|
658
|
+
.a90s-seg-4 { animation: a90s-op4 6s infinite; }
|
|
659
|
+
.a90s-seg-5 { animation: a90s-op5 6s infinite; }
|
|
660
|
+
.a90s-seg-6 { animation: a90s-op6 6s infinite; }
|
|
661
|
+
.a90s-seg-7 { animation: a90s-op7 6s infinite; }
|
|
662
|
+
.a90s-seg-8 { animation: a90s-op8 6s infinite; }
|
|
663
|
+
.a90s-seg-9 { animation: a90s-op9 6s infinite; }
|
|
664
|
+
.a90s-seg-10 { animation: a90s-op10 6s infinite; }
|
|
665
|
+
|
|
666
|
+
@keyframes a90s-op1 { 0%,9% {opacity:0} 10%,92% {opacity:1} 92.1%,100% {opacity:0} }
|
|
667
|
+
@keyframes a90s-op2 { 0%,17% {opacity:0} 18%,92% {opacity:1} 92.1%,100% {opacity:0} }
|
|
668
|
+
@keyframes a90s-op3 { 0%,25% {opacity:0} 26%,92% {opacity:1} 92.1%,100% {opacity:0} }
|
|
669
|
+
@keyframes a90s-op4 { 0%,33% {opacity:0} 34%,92% {opacity:1} 92.1%,100% {opacity:0} }
|
|
670
|
+
@keyframes a90s-op5 { 0%,41% {opacity:0} 42%,92% {opacity:1} 92.1%,100% {opacity:0} }
|
|
671
|
+
@keyframes a90s-op6 { 0%,49% {opacity:0} 50%,92% {opacity:1} 92.1%,100% {opacity:0} }
|
|
672
|
+
@keyframes a90s-op7 { 0%,57% {opacity:0} 58%,92% {opacity:1} 92.1%,100% {opacity:0} }
|
|
673
|
+
@keyframes a90s-op8 { 0%,65% {opacity:0} 66%,92% {opacity:1} 92.1%,100% {opacity:0} }
|
|
674
|
+
@keyframes a90s-op9 { 0%,73% {opacity:0} 74%,92% {opacity:1} 92.1%,100% {opacity:0} }
|
|
675
|
+
@keyframes a90s-op10 { 0%,81% {opacity:0} 82%,92% {opacity:1} 92.1%,100% {opacity:0} }
|
|
676
|
+
|
|
677
|
+
/* Segment flash (white pop on appear) */
|
|
678
|
+
.a90s-fl-1 { animation: a90s-fl1 6s infinite; }
|
|
679
|
+
.a90s-fl-2 { animation: a90s-fl2 6s infinite; }
|
|
680
|
+
.a90s-fl-3 { animation: a90s-fl3 6s infinite; }
|
|
681
|
+
.a90s-fl-4 { animation: a90s-fl4 6s infinite; }
|
|
682
|
+
.a90s-fl-5 { animation: a90s-fl5 6s infinite; }
|
|
683
|
+
.a90s-fl-6 { animation: a90s-fl6 6s infinite; }
|
|
684
|
+
.a90s-fl-7 { animation: a90s-fl7 6s infinite; }
|
|
685
|
+
.a90s-fl-8 { animation: a90s-fl8 6s infinite; }
|
|
686
|
+
.a90s-fl-9 { animation: a90s-fl9 6s infinite; }
|
|
687
|
+
.a90s-fl-10 { animation: a90s-fl10 6s infinite; }
|
|
688
|
+
|
|
689
|
+
@keyframes a90s-fl1 { 0%,9% {fill:#ff6b35} 10%,13% {fill:#fff} 13.1%,100% {fill:#ff6b35} }
|
|
690
|
+
@keyframes a90s-fl2 { 0%,17% {fill:#ff6b35} 18%,21% {fill:#fff} 21.1%,100% {fill:#ff6b35} }
|
|
691
|
+
@keyframes a90s-fl3 { 0%,25% {fill:#ff6b35} 26%,29% {fill:#fff} 29.1%,100% {fill:#ff6b35} }
|
|
692
|
+
@keyframes a90s-fl4 { 0%,33% {fill:#ff6b35} 34%,37% {fill:#fff} 37.1%,100% {fill:#ff6b35} }
|
|
693
|
+
@keyframes a90s-fl5 { 0%,41% {fill:#ff6b35} 42%,45% {fill:#fff} 45.1%,100% {fill:#ff6b35} }
|
|
694
|
+
@keyframes a90s-fl6 { 0%,49% {fill:#ff6b35} 50%,53% {fill:#fff} 53.1%,100% {fill:#ff6b35} }
|
|
695
|
+
@keyframes a90s-fl7 { 0%,57% {fill:#ff6b35} 58%,61% {fill:#fff} 61.1%,100% {fill:#ff6b35} }
|
|
696
|
+
@keyframes a90s-fl8 { 0%,65% {fill:#ff6b35} 66%,69% {fill:#fff} 69.1%,100% {fill:#ff6b35} }
|
|
697
|
+
@keyframes a90s-fl9 { 0%,73% {fill:#ff6b35} 74%,77% {fill:#fff} 77.1%,100% {fill:#ff6b35} }
|
|
698
|
+
@keyframes a90s-fl10 { 0%,81% {fill:#ff6b35} 82%,85% {fill:#fff} 85.1%,100% {fill:#ff6b35} }
|
|
699
|
+
|
|
700
|
+
/* Percentage text visibility */
|
|
701
|
+
.a90s-txt-0 { animation: a90s-t0 6s infinite; }
|
|
702
|
+
.a90s-txt-10 { animation: a90s-t10 6s infinite; opacity:0; }
|
|
703
|
+
.a90s-txt-20 { animation: a90s-t20 6s infinite; opacity:0; }
|
|
704
|
+
.a90s-txt-30 { animation: a90s-t30 6s infinite; opacity:0; }
|
|
705
|
+
.a90s-txt-40 { animation: a90s-t40 6s infinite; opacity:0; }
|
|
706
|
+
.a90s-txt-50 { animation: a90s-t50 6s infinite; opacity:0; }
|
|
707
|
+
.a90s-txt-60 { animation: a90s-t60 6s infinite; opacity:0; }
|
|
708
|
+
.a90s-txt-70 { animation: a90s-t70 6s infinite; opacity:0; }
|
|
709
|
+
.a90s-txt-80 { animation: a90s-t80 6s infinite; opacity:0; }
|
|
710
|
+
.a90s-txt-90 { animation: a90s-t90 6s infinite; opacity:0; }
|
|
711
|
+
.a90s-txt-100 { animation: a90s-t100 6s infinite; opacity:0; }
|
|
712
|
+
|
|
713
|
+
@keyframes a90s-t0 { 0%,9.9% {opacity:1} 10%,91.9% {opacity:0} 92%,100% {opacity:1} }
|
|
714
|
+
@keyframes a90s-t10 { 0%,9.9% {opacity:0} 10%,17.9% {opacity:1} 18%,100% {opacity:0} }
|
|
715
|
+
@keyframes a90s-t20 { 0%,17.9% {opacity:0} 18%,25.9% {opacity:1} 26%,100% {opacity:0} }
|
|
716
|
+
@keyframes a90s-t30 { 0%,25.9% {opacity:0} 26%,33.9% {opacity:1} 34%,100% {opacity:0} }
|
|
717
|
+
@keyframes a90s-t40 { 0%,33.9% {opacity:0} 34%,41.9% {opacity:1} 42%,100% {opacity:0} }
|
|
718
|
+
@keyframes a90s-t50 { 0%,41.9% {opacity:0} 42%,49.9% {opacity:1} 50%,100% {opacity:0} }
|
|
719
|
+
@keyframes a90s-t60 { 0%,49.9% {opacity:0} 50%,57.9% {opacity:1} 58%,100% {opacity:0} }
|
|
720
|
+
@keyframes a90s-t70 { 0%,57.9% {opacity:0} 58%,65.9% {opacity:1} 66%,100% {opacity:0} }
|
|
721
|
+
@keyframes a90s-t80 { 0%,65.9% {opacity:0} 66%,73.9% {opacity:1} 74%,100% {opacity:0} }
|
|
722
|
+
@keyframes a90s-t90 { 0%,73.9% {opacity:0} 74%,81.9% {opacity:1} 82%,100% {opacity:0} }
|
|
723
|
+
@keyframes a90s-t100 { 0%,81.9% {opacity:0} 82%,91.9% {opacity:1} 92%,100% {opacity:0} }
|
|
724
|
+
|
|
507
725
|
@keyframes alert90s-hourglass {
|
|
508
726
|
0% { transform: rotate(0); }
|
|
509
727
|
25% { transform: rotate(180deg); }
|
|
@@ -795,12 +1013,33 @@ select.alert90s-select {
|
|
|
795
1013
|
.alert90s-dark .alert90s-html a {
|
|
796
1014
|
color: #60a5fa;
|
|
797
1015
|
}
|
|
798
|
-
.alert90s-dark .alert90s-input
|
|
1016
|
+
.alert90s-dark .alert90s-input {
|
|
799
1017
|
background-color: #1a1a24;
|
|
800
1018
|
color: #fff;
|
|
801
1019
|
border-color: #000;
|
|
802
1020
|
box-shadow: inset 4px 4px 0 0 rgba(0,0,0,0.5);
|
|
803
1021
|
}
|
|
1022
|
+
.alert90s-dark .alert90s-select-box {
|
|
1023
|
+
background-color: #1a1a24;
|
|
1024
|
+
color: #eaeaea;
|
|
1025
|
+
border-color: #555;
|
|
1026
|
+
box-shadow: 4px 4px 0px #555;
|
|
1027
|
+
}
|
|
1028
|
+
.alert90s-dark .alert90s-select-box .alert90s-select-arrow path { stroke: #eaeaea; }
|
|
1029
|
+
.alert90s-dark .alert90s-select-toggle:checked ~ .alert90s-select-box { background-color: #ff6b35; color: #fff; }
|
|
1030
|
+
.alert90s-dark .alert90s-select-menu {
|
|
1031
|
+
background-color: #1a1a24;
|
|
1032
|
+
border-color: #555;
|
|
1033
|
+
box-shadow: 4px 4px 0px #555;
|
|
1034
|
+
}
|
|
1035
|
+
.alert90s-dark .alert90s-select-item {
|
|
1036
|
+
color: #eaeaea;
|
|
1037
|
+
border-bottom-color: #555;
|
|
1038
|
+
}
|
|
1039
|
+
.alert90s-dark .alert90s-select-item:hover {
|
|
1040
|
+
background-color: #555;
|
|
1041
|
+
color: #ff6b35;
|
|
1042
|
+
}
|
|
804
1043
|
.alert90s-dark .alert90s-input:focus {
|
|
805
1044
|
border-color: #00FFFF;
|
|
806
1045
|
}
|
|
@@ -811,10 +1050,14 @@ select.alert90s-select {
|
|
|
811
1050
|
.alert90s-dark .alert90s-button.cancel { background-color: #f87171; }
|
|
812
1051
|
.alert90s-dark .alert90s-button.deny { background-color: #fb923c; }
|
|
813
1052
|
.alert90s-dark .alert90s-button.confirm { background-color: #4ade80; }
|
|
814
|
-
.alert90s-dark .alert90s-checkbox-label
|
|
815
|
-
.alert90s-dark .alert90s-checkbox-label input[type="checkbox"]:checked {
|
|
816
|
-
.alert90s-dark .alert90s-
|
|
817
|
-
.alert90s-dark .alert90s-
|
|
1053
|
+
.alert90s-dark .alert90s-checkbox-label .cb-box { fill: #1a1a24; stroke: #555; }
|
|
1054
|
+
.alert90s-dark .alert90s-checkbox-label input[type="checkbox"]:checked ~ .alert90s-cb-svg .cb-box { fill: #2a2a35; }
|
|
1055
|
+
.alert90s-dark .alert90s-checkbox-label .cb-shadow { fill: #555; }
|
|
1056
|
+
.alert90s-dark .alert90s-cb-text { color: #eaeaea; }
|
|
1057
|
+
.alert90s-dark .alert90s-radio-label .radio-box { fill: #1a1a24; stroke: #555; }
|
|
1058
|
+
.alert90s-dark .alert90s-radio-label input[type="radio"]:checked ~ .alert90s-radio-svg .radio-box { fill: #2a2a35; }
|
|
1059
|
+
.alert90s-dark .alert90s-radio-label .radio-shadow { fill: #555; }
|
|
1060
|
+
.alert90s-dark .alert90s-radio-text { color: #eaeaea; }
|
|
818
1061
|
|
|
819
1062
|
/* =======================================
|
|
820
1063
|
THEME TOGGLE COMPONENT (.alert90s-theme-wrapper)
|