Update pages/📖History_Mystery.py (#3)

- Update pages/📖History_Mystery.py (1bf4b30da4798c4940d6592615843f96d2224c7f)


Co-authored-by: Maria <MARI-posa@users.noreply.huggingface.co>

pages/📖History_Mystery.py

@@ -4,6 +4,57 @@ from transformers import GPT2LMHeadModel, GPT2Tokenizer
 import numpy as np
 from PIL import Image
 import torch
+
+import base64
+import plotly.express as px
+
+df = px.data.iris()
+
+@st.cache_data
+def get_img_as_base64(file):
+    with open(file, "rb") as f:
+        data = f.read()
+    return base64.b64encode(data).decode()
+
+
+page_bg_img = f"""
+<style>
+[data-testid="stAppViewContainer"] > .main {{
+background-image: url("https://wallpapercave.com/wp/wp6480460.jpg");
+background-size: 115%;
+background-position: top left;
+background-repeat: no-repeat;
+background-attachment: local;
+}}
+
+[data-testid="stSidebar"] > div:first-child {{
+background-image: url("https://ibb.co/ZBkdJRg");
+background-size: 115%;
+background-position: center; 
+background-repeat: no-repeat;
+background-attachment: fixed;
+}}
+
+[data-testid="stHeader"] {{
+background: rgba(0,0,0,0);
+}}
+
+[data-testid="stToolbar"] {{
+right: 2rem;
+}}
+
+div.css-1n76uvr.e1tzin5v0 {{
+background-color: rgba(238, 238, 238, 0.5);
+border: 10px solid #EEEEEE;
+padding: 5% 5% 5% 10%;
+border-radius: 5px;
+}}
+
+
+</style>
+"""
+st.markdown(page_bg_img, unsafe_allow_html=True)
+
 st.title("""
  History Mystery
  """)