File size: 2,214 Bytes
178b03a 7f90821 178b03a 6bca296 7f90821 6bca296 f1c26f9 6bca296 f1c26f9 7f90821 178b03a 6bca296 f1c26f9 6bca296 7f90821 178b03a 7f90821 178b03a 7f90821 178b03a 7f90821 178b03a 7f90821 |
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 |
import streamlit as st
# Custom CSS to mimic the design in the image
st.markdown("""
<style>
/* CSS styles */
.big-font {
font-size:50px !important;
font-weight: bold;
}
.brand-color {
color: #EB001B;
font-weight: bold;
}
.bot-container {
background-color: #F0F0F0;
border-radius: 10px;
padding: 20px;
margin: 10px;
}
.top-bar {
background-color: #000000;
color: white;
padding: 10px 0px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: start;
}
.brand-logo {
height: 40px;
margin-right: 10px;
}
.brand-bot-title {
font-size: 24px;
font-weight: bold;
color: white;
}
.stSidebar {
display: none;
}
.main-body {
margin-top: 70px;
}
/* Adjust padding for main content to give space for fixed header */
.css-18e3th9 {
padding-top: 70px;
}
</style>
""", unsafe_allow_html=True)
# Top bar layout
st.markdown("""
<div class="top-bar">
<img src="mastercard_logo.png" alt="Mastercard Logo" class="brand-logo">
<span class="brand-bot-title">Brand Bot</span>
</div>
""", unsafe_allow_html=True)
# Mimic a sidebar with a custom layout inside the main body
st.markdown('<div class="main-body">', unsafe_allow_html=True)
# Creating a custom sidebar
sidebar_col, main_col = st.columns([1, 5], gap="small")
with sidebar_col:
st.markdown("## Sidebar")
st.text("This is some text before the New Chat button.")
if st.button("New Chat", key="new_chat"):
# Your button click handling here
pass
with main_col:
# Main page layout
st.markdown('<p class="big-font">Hello!</p>', unsafe_allow_html=True)
st.markdown('<p>I\'m Brand Bot, an internal chatbot that provides you with fast, reliable information about the Mastercard brand. How can I help you today?</p>', unsafe_allow_html=True)
# Example requests and the rest of your main content
# ...
st.markdown('</div>', unsafe_allow_html=True) # End of main-body div
|