diff --git a/assets/css/app.css b/assets/css/app.css
index 83477e5..ebbc884 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1112,6 +1112,41 @@ video {
color: rgba(229, 62, 62, var(--text-opacity));
}
+.flash-message {
+ position: relative;
+ padding: 1rem 2.5rem 1rem 1rem;
+ border-radius: 0.375rem;
+ margin-bottom: 1rem;
+ font-weight: 500;
+ background-color: #eb7f325b;
+ border: 1px solid #aa4700;
+ color: #aa4700;
+}
+
+.flash-message .btn-close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 1rem;
+ color: inherit;
+ background: transparent;
+ border: 0;
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1;
+ opacity: 0.5;
+ cursor: pointer;
+}
+
+.flash-message .btn-close:hover,
+.flash-message .btn-close:focus {
+ opacity: 1;
+}
+
+.flash-message .btn-close::after {
+ content: "×";
+}
+
.space-y-0 > :not(template) ~ :not(template) {
--space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
diff --git a/assets/js/flash-messages.js b/assets/js/flash-messages.js
new file mode 100644
index 0000000..3f2dbd3
--- /dev/null
+++ b/assets/js/flash-messages.js
@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', function() {
+ document.querySelectorAll('.flash-message .btn-close').forEach(function(button) {
+ button.addEventListener('click', function(e) {
+ e.preventDefault();
+ this.closest('.flash-message').remove();
+ });
+ });
+});
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 9023bd7..136c83d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,6 +8,7 @@
+