diff --git a/.gitignore b/.gitignore
index 0a87ee39cb0df60f3fc1d30cfb28b132ac281da0..650808a9f882a13a66d4bb1b95736d71f568bf0a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
models/
.rasa/
-.rasa/cache/
+.rasa/cache/*
+/.rasa/*
results/
templates/typewriter.js
diff --git a/static/pictures/backdrop.jpg b/static/pictures/backdrop.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dc1e9a88d0e474930966087934b86abf45b535ea
Binary files /dev/null and b/static/pictures/backdrop.jpg differ
diff --git a/templates/index.html b/templates/index.html
index 9f5d09053bde262403cfeee8ad1c6b9e4c0c76f9..c309cb620757dc2c4c62807c94d2122b548dc3ae 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,22 +7,35 @@
<style>
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
- background-color: #e0f7fa;
+ background: url('static/pictures/backdrop.jpg') repeat;
+ background-size: contain; /* Adjust to 'contain' to fit the image without zooming in */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
+ position: relative;
+ }
+ #overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent overlay */
+ z-index: 1; /* Ensure it is on top of the background */
}
#chat-container {
width: 350px;
- background-color: #ffffff;
+ background-color: rgba(255, 255, 255, 0.9); /* Ensure chat container is more opaque */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 67vh; /* 2/3 of the viewport height */
+ position: relative;
+ z-index: 2; /* Ensure chat container is above the overlay */
}
#header {
background-color: #00796b;
@@ -89,6 +102,7 @@
</style>
</head>
<body>
+ <div id="overlay"></div>
<div id="chat-container">
<div id="header">Chatbot</div>
<div id="chat-box"></div>