-
Notifications
You must be signed in to change notification settings - Fork 0
/
compAlertas.html
258 lines (243 loc) · 22.9 KB
/
compAlertas.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quickly: Componente de Alertas | Notificaciones de Éxito y Advertencia</title>
<meta name="description" content="Descubre el componente de alertas en Quickly. Diseñado para notificar a los usuarios sobre éxitos, advertencias y otros eventos importantes de manera clara y eficaz, nuestras alertas mejoran la experiencia del usuario y garantizan que no se pasen por alto los mensajes cruciales. Aprende cómo implementarlas para mejorar la comunicación y la participación en tus proyectos.">
<link rel="icon" type="image/png" href="./img/ico.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/css/quickly.min.css">
<link rel="stylesheet" href="./css/app.min.css">
<script src="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/js/quicklyComp.min.js" defer></script>
<script src="./js/app.min.js" defer></script>
<link rel="stylesheet" href="./prism/prism.css">
<script src="./prism/prism.js" defer></script>
<script>var currentPage = 'compAlertas';</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZQS41TB5G"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DZQS41TB5G');
</script>
</head>
<body>
<div class="header" id="headerContent"></div>
<section class="cont cont-m">
<aside class="aside" id="menuContent"></aside>
<main class="main bg-white-2 pt-5 pm-2">
<div class="cont-80 cont-m py-5">
<!-- Alerta -->
<section class="border rounded bg-color-1">
<div class="p-5 pm-2 bg-white-1 rounded-t border-b">
<h1 class="font-l">Alertas</h1>
<h2 class="font-l font-s-4">Impulsa la interactividad en tu plataforma con las nuevas Alertas de <strong class="text-quickly">Quickly</strong>. Notifica eventos importantes, éxitos y advertencias a tus usuarios de manera clara y efectiva.</h2>
</div>
<section class="p-5 pm-2">
<!-- Info -->
<section>
<h3 class="font-l">Alerta de Información</h3>
<p class="pb-2">Información: Descubre nuestras Alertas de Información para comunicar datos importantes y detalles relevantes de manera clara y concisa. Diseñadas para proporcionar orientación y contexto, estas alertas mejoran la comprensión y la experiencia del usuario.</p>
<h4 class="font-l">.alert-info</h4>
<div class="table-cont border">
<div class="hatched-1 grid item-1">
<div class="grid item-1 g-2 p-5 pm-2">
<div class="alert-info text-ac">
<div class="alert-title border-b">
<svg class="ico-32 ico-info pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 8c-.414 0-.75.336-.75.75v5.5c0 .414.336.75.75.75s.75-.336.75-.75v-5.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="pr-1">Información</strong><br>
</div>
<div class="alert-body">
¡Debes cambiar el texto!
</div>
</div>
<div class="alert-info text-al">
<svg class="ico-32 ico-info pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 8c-.414 0-.75.336-.75.75v5.5c0 .414.336.75.75.75s.75-.336.75-.75v-5.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="alert-title pr-1">Información</strong>
<span class="alert-body">¡Debes cambiar el texto!</span>
</div>
</div>
</div>
<div class="border-t p-2">
HTML
</div>
<div class="pre-pre2">
<pre class="cont-100 scroll-x"><code class="language-html">
<!-- Información opción 1 -->
<div class="alert-info text-ac">
<div class="alert-title border-b">
<svg class="ico-32 ico-info pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 8c-.414 0-.75.336-.75.75v5.5c0 .414.336.75.75.75s.75-.336.75-.75v-5.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="pr-1">Información</strong><br>
</div>
<div class="alert-body">
¡Debes cambiar el texto!
</div>
</div>
<!-- Información opción 2 -->
<div class="alert-info text-al">
<svg class="ico-32 ico-info pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 8c-.414 0-.75.336-.75.75v5.5c0 .414.336.75.75.75s.75-.336.75-.75v-5.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="alert-title pr-1">Información</strong>
<span class="alert-body">¡Debes cambiar el texto!</span>
</div>
</code></pre>
</div>
</div>
</section>
<!-- Éxito -->
<section>
<h3 class="pt-3 font-l">Alerta de Éxito</h3>
<p class="pb-2">¡Éxito alcanzado! Utiliza nuestras Alertas de Éxito: flexibles, simples de integrar y ideales para celebrar logros de manera impresionante. </p>
<h4 class="font-l">.alert-success</h4>
<div class="table-cont border">
<div class="hatched-1 p-5 pm-2 grid item-1 g-5">
<div class="grid item-1 g-2">
<div class="alert-success text-ac">
<div class="alert-title border-b">
<svg class="ico-32 ico-success pr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z"/></svg>
<strong class="pr-1">Éxito</strong><br>
</div>
<div class="alert-body">
¡Debes cambiar el texto!
</div>
</div>
<div class="alert-success text-al">
<svg class="ico-32 ico-success pr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z"/></svg>
<strong class="alert-title pr-1">Éxito</strong>
<span class="alert-body">¡Debes cambiar el texto!</span>
</div>
</div>
</div>
<div class="border-t p-2">
HTML
</div>
<div class="pre-pre2">
<pre class="cont-100 scroll-x"><code class="language-html">
<!-- Éxito opción 1 -->
<div class="alert-success text-al">
<div class="alert-title border-b">
<svg class="ico-32 ico-success pr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z"/></svg>
<strong class="pr-1">Éxito</strong><br>
</div>
<div class="alert-body">
¡Debes cambiar el texto!
</div>
</div>
<!-- Éxito opción 2 -->
<div class="alert-success text-al">
<svg class="ico-32 ico-success pr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z"/></svg>
<strong class="alert-title pr-1">Éxito</strong>
<span class="alert-body">¡Debes cambiar el texto!</span>
</div>
</code></pre>
</div>
</div>
</section>
<!-- Advertencia -->
<section>
<h3 class="pt-3 font-l">Alerta de Atención</h3>
<p class="pb-2">Atención: Utiliza nuestras Alertas de Advertencia para notificar eventos importantes y situaciones críticas de manera clara y efectiva. Configúralas automáticamente o según tus necesidades específicas para mantener informados a tus usuarios de forma óptima.</p>
<h4 class="font-l">.alert-warning</h4>
<div class="table-cont border">
<div class="hatched-1 p-5 pm-2 grid item-1 g-5">
<!-- Warning -->
<div class="grid item-1 g-2">
<div class="alert-warning text-ac">
<div class="alert-title border-b">
<svg class="ico-32 ico-warning pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="pr-1">Atención</strong><br>
</div>
<div class="alert-body">
¡Debes cambiar el texto!
</div>
</div>
<div class="alert-warning text-al">
<svg class="ico-32 ico-warning pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="alert-title pr-1">Atención</strong>
<span class="alert-body">¡Debes cambiar el texto!</span>
</div>
</div>
</div>
<div class="border-t p-2">
HTML
</div>
<div class="pre-pre2">
<pre class="cont-100 scroll-x"><code class="language-html">
<!-- Atención opción 1 -->
<div class="alert-warning text-ac">
<div class="alert-title border-b">
<svg class="ico-32 ico-warning pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="pr-1">Atención</strong><br>
</div>
<div class="alert-body">
¡Debes cambiar el texto!
</div>
</div>
<!-- Atención opción 2 -->
<div class="alert-warning text-al">
<svg class="ico-32 ico-warning pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="alert-title pr-1">Atención</strong>
<span class="alert-body">¡Debes cambiar el texto!</span>
</div>
</code></pre>
</div>
</div>
</section>
<!-- Peligro -->
<section>
<h3 class="pt-3 font-l">Alerta de Peligro</h3>
<p class="pb-2">Peligro: Emplea nuestras Alertas de Peligro para destacar situaciones críticas y emergencias con claridad y urgencia. Diseñadas para captar la atención inmediata, estas alertas garantizan una respuesta rápida y efectiva.</p>
<h4 class="font-l">.alert-danger</h4>
<div class="table-cont border">
<div class="hatched-1 p-5 pm-2 grid item-1 g-5">
<!-- Warning -->
<div class="grid item-1 g-2">
<div class="alert-danger text-ac">
<div class="alert-title border-b">
<svg class="ico-32 ico-danger pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="pr-1">Peligro</strong><br>
</div>
<div class="alert-body">
¡Debes cambiar el texto!
</div>
</div>
<div class="alert-danger text-al">
<svg class="ico-32 ico-danger pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="alert-title pr-1">Peligro</strong>
<span class="alert-body">¡Debes cambiar el texto!</span>
</div>
</div>
</div>
<div class="border-t p-2">
HTML
</div>
<div class="pre-pre2">
<pre class="cont-100 scroll-x"><code class="language-html">
<!-- Warning opción 1 -->
<div class="alert-danger text-ac">
<div class="alert-title border-b">
<svg class="ico-32 ico-danger pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="pr-1">Peligro</strong><br>
</div>
<div class="alert-body">
¡Debes cambiar el texto!
</div>
</div>
<!-- Warning opción 2 -->
<div class="alert-danger text-al">
<svg class="ico-32 ico-danger pr-1" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<strong class="alert-title pr-1">Peligro</strong>
<span class="alert-body">¡Debes cambiar el texto!</span>
</div>
</code></pre>
</div>
</div>
</section>
</section>
</section>
</div>
</main>
<footer class="footer" id="footerContent"></footer>
</section>
</body>
</html>