-
-
Notifications
You must be signed in to change notification settings - Fork 92
/
index.html
57 lines (50 loc) · 2.64 KB
/
index.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
<!doctype html>
<html>
<head>
<title>Themes for SweetAlert2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
</head>
<body>
<div style="height: 55px; background: #e0e0e0;"></div>
<div style="display: flex; position: absolute; z-index: 9999; top: 5px; align-items: center; justify-content: center; padding: 1rem;">
<div>
<label for="theme-selector">Theme:</label>
<select id="theme-selector" style="margin-right: 1rem; font-size: 1rem;">
<option value="default">Default</option>
<option value="dark">Dark</option>
<option value="minimal">Minimal</option>
<option value="borderless">Borderless</option>
<option value="bootstrap-4">Bootstrap 4</option>
<option value="material-ui">Material UI</option>
<option value="wordpress-admin">WordPress Admin</option>
<option value="bulma">Bulma</option>
</select>
</div>
<div>
<input type="checkbox" id="toast-only" name="toast-only">
<label for="toast-only">Toast</label>
</div>
</div>
<div style="max-width: 1200px; margin: 2rem auto 0;">
<div style="display: flex; margin: 0 -1rem; font-size: 2rem;">
<div style="flex-grow: 1; padding: 1.5rem;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div style="width: 300px; min-width: 300px; padding: 1rem;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis </p>
</div>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>