Updated app.py

app.py

@@ -34,41 +34,34 @@ def login():
         .stApp {
             background: linear-gradient(
                 125deg,
-                #FEFFD2 0%,
-                #DCFFB7 50%,
-                #FFF8E3 100%
+                #F0F4F8 0%,
+                #D9E4F5 50%,
+                #E5EFF8 100%
             );
             background-size: 200% 200%;
             animation: gradientMove 10s ease infinite;
         }
-
         @keyframes gradientMove {
             0% { background-position: 0% 50%; }
             50% { background-position: 100% 50%; }
             100% { background-position: 0% 50%; }
         }
-
         h1 {
-            color: #ffffff;
+            color: #4A4A4A;
             font-size: 3.5rem;
             font-weight: 900;
             text-align: center;
-            text-shadow: 
-                2px 2px 4px rgba(0, 0, 0, 0.4),
-                4px 4px 8px rgba(0, 0, 0, 0.3),
-                8px 8px 16px rgba(0, 0, 0, 0.2);
             margin-bottom: 3rem;
             letter-spacing: 2px;
         }
-
-        .css-1y4p8pa {
-            max-width: 500px;
+        .login-form-container {
+            width: 400px;
             margin: 0 auto;
-            padding: 2.5rem;
+            padding: 2rem;
             background: linear-gradient(
                 135deg,
-                rgba(255, 255, 255, 0.1) 0%,
-                rgba(255, 255, 255, 0.2) 100%
+                rgba(0, 0, 0, 0.1) 0%,
+                rgba(0, 0, 0, 0.15) 100%
             );
             backdrop-filter: blur(15px);
             border-radius: 24px;
@@ -77,27 +70,23 @@ def login():
                 inset -4px -4px 8px rgba(255, 255, 255, 0.1),
                 inset 4px 4px 8px rgba(0, 0, 0, 0.2);
             border: 1px solid rgba(255, 255, 255, 0.18);
-            transform: perspective(1000px) rotateX(2deg);
         }
-
         .stSelectbox label, .stDateInput label {
-            color: white !important;
+            color: #333333 !important;
             font-weight: bold;
             font-size: 1rem;
             text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
         }
-
         .stSelectbox > div > div, .stDateInput > div > div {
-            background: white;
+            background: #2E3A47;
             border: 1px solid rgba(255, 255, 255, 0.3);
             border-radius: 12px;
-            color: grey;
+            color: #FFFFFF;
             font-weight: bold;
             box-shadow: 
                 inset 2px 2px 5px rgba(0, 0, 0, 0.3),
                 inset -2px -2px 5px rgba(255, 255, 255, 0.2);
         }
-
         .stButton > button {
             width: 100%;
             background: linear-gradient(
@@ -119,7 +108,6 @@ def login():
                 inset 0 4px 8px rgba(255, 255, 255, 0.2);
             transition: all 0.3s ease;
         }
-
         .stButton > button:hover {
             transform: translateY(-3px) scale(1.03);
             box-shadow: 
@@ -132,7 +120,6 @@ def login():
                 #2563eb 100%
             );
         }
-
         </style>
     """, unsafe_allow_html=True)
     
@@ -155,7 +142,6 @@ def login():
             st.rerun()
 
 
-
 if 'logged_in' not in st.session_state:
     st.session_state.logged_in = False
 
@@ -163,199 +149,213 @@ if not st.session_state.logged_in:
     login()
 else:
     st.set_page_config(page_title="Kap Notes", layout="wide")
+    client_name = st.session_state.client_name
+    date = st.session_state.date
+
+    st.sidebar.markdown(f'''
+        <div class="client-name-container">
+            <div class="client-name">{client_name}</div>
+        </div>
+    ''', unsafe_allow_html=True)
+
     css = '''
-    <style>
-    [data-testid="stExpander"] div:has(>.streamlit-expanderContent) {
-        max-height: 400px;
-        overflow-y: scroll;
-    }
-
-    [data-testid="stSidebar"] {
-        min-width: 400px; 
-    }
-    
-    [data-testid="stSidebar"] > div:first-child {
-        padding-top: 10px;
-    }
-
-    .main {
-        margin-top: 0 !important;
-    }
-
-    .summary-box, .keypoints-box, .action-items-box {
-        padding: 20px;
-        border-radius: 15px;
-        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2), 0px 6px 15px rgba(0, 0, 0, 0.15);
-        margin-top: 20px;
-        margin-bottom: 30px;
-        line-height: 1.8;
-        font-size: 16px;
-        color: #333;
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-    }
-
-    .summary-box:hover, .keypoints-box:hover, .action-items-box:hover {
-        transform: translateY(-1px) scale(1.05);
-        box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.25), 0px 18px 35px rgba(0, 0, 0, 0.2);
-    }
-
-    .summary-box {
-        background: linear-gradient(145deg, #F1EAFF, #E5D4FF);
-    }
-
-    .keypoints-box {
-        background: linear-gradient(145deg, #F1EAFF, #E5D4FF);
-    }
-
-    .action-items-box {
-        background: linear-gradient(145deg, #F1EAFF, #E5D4FF);
-    }
-
-    .summary-box, .keypoints-box, .action-items-box {
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.15);
-    }
-
-    .summary-box {
-        background-color: #FFF8DC;
-    }
-
-    button:hover {
-        background-color: white;
-        color: black;
-        border-color: black;
-    }
-
-    br {
-        margin-top: 8px;
-    }
-
-    .audio-player-container {
-        background: linear-gradient(135deg, #FF91A4, #FF4E00);
-        padding: 25px;
-        border-radius: 20px;
-        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2), 0px 6px 25px rgba(0, 0, 0, 0.15);
-        margin-top: 30px;
-        margin-bottom: 40px;
-        text-align: center;
-        font-size: 18px;
-        transition: all 0.7s ease-in-out, transform 0.3s ease;
-    }
-
-    .audio-player-container:hover {
-        transform: translateY(-10px) scale(1.03);
-        box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.3), 0px 12px 35px rgba(0, 0, 0, 0.25);
-    }
-
-    .audio-player {
-        width: 80%;
-        height: 50px;
-        border-radius: 15px;
-        background-color: #FFF8DC;
-        border: 1px solid rgba(0, 0, 0, 0.15);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.15);
-        transition: all 0.3s ease, transform 0.3s ease;
-    }
-
-    .audio-player:hover {
-        background-color: #FF7F50;
-        transform: scale(1.1);
-    }
-
-    .audio-player-container h4 {
-        color: #333;
-        font-weight: 700;
-        margin-bottom: 15px;
-        font-size: 22px;
-    }
-
-    .audio-player-container .play-button {
-        background-color: #FF4E00;
-        border: none;
-        padding: 10px 20px;
-        color: white;
-        font-weight: 600;
-        border-radius: 30px;
-        cursor: pointer;
-        transition: all 0.5s ease;
-    }
-
-    .audio-player-container .play-button:hover {
-        background-color: #FF91A4;
-        box-shadow: 0px 4px 20px rgba(255, 145, 164, 0.5);
-    }
-
-    .audio-player-container .play-button:focus {
-        outline: none;
-    }
-
-    .comment-box {
-        background: linear-gradient(145deg, #f4f9fb, #dce5f5);
-        border: 1px solid #cfd9e6;
-        border-radius: 10px;
-        padding: 15px;
-        margin-bottom: 20px;
-        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1), -2px -2px 12px rgba(255, 255, 255, 0.8);
-        font-family: 'Arial', sans-serif;
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-    }
-
-    .comment-box:hover {
-        transform: scale(1.02) translateY(-2px);
-        box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2), -4px -4px 20px rgba(255, 255, 255, 0.4);
-    }
-
-    .comment-header {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 10px;
-        font-weight: bold;
-        color: #3e3e3e;
-    }
-
-    .comment-text {
-        color: #555;
-        font-size: 14px;
-        line-height: 1.6;
-    }
-
-    .comment-header span {
-        color: #007bff;
-        font-size: 12px;
-    }
-
-    .form-container {
-        margin-bottom: 30px;
-    }
-
-    .stTextInput, .stTextArea {
-        border-radius: 5px;
-        border: 1px solid #ccc;
-        padding: 10px;
-        font-size: 14px;
-        margin-bottom: 15px;
-        width: 100%;
-    }
-
-    .stFormSubmitButton {
-        background-color: #007bff;
-        color: black;
-        padding: 10px 20px;
-        border-radius: 5px;
-        font-size: 14px;
-        cursor: pointer;
-        transition: background-color 0.3s;
-    }
-
-    .stFormSubmitButton:hover {
-        background-color: #0056b3;
-    }
-</style>
+        <style>
+        [data-testid="stExpander"] div:has(>.streamlit-expanderContent) {
+            max-height: 400px;
+            overflow-y: scroll;
+        }
+        [data-testid="stSidebar"] {
+            min-width: 400px; 
+        }
+        [data-testid="stSidebar"] > div:first-child {
+            padding-top: 10px;
+        }
+        .main {
+            margin-top: 0 !important;
+        }
+        .summary-box, .keypoints-box, .action-items-box {
+            padding: 20px;
+            border-radius: 15px;
+            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2), 0px 6px 15px rgba(0, 0, 0, 0.15);
+            margin-top: 20px;
+            margin-bottom: 30px;
+            line-height: 1.8;
+            font-size: 16px;
+            color: #333;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .summary-box:hover, .keypoints-box:hover, .action-items-box:hover {
+            transform: translateY(-1px) scale(1.05);
+            box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.25), 0px 18px 35px rgba(0, 0, 0, 0.2);
+        }
+        .summary-box {
+            background: linear-gradient(145deg, #F1EAFF, #E5D4FF);
+        }
+        .keypoints-box {
+            background: linear-gradient(145deg, #F1EAFF, #E5D4FF);
+        }
+        .action-items-box {
+            background: linear-gradient(145deg, #F1EAFF, #E5D4FF);
+        }
+        .summary-box, .keypoints-box, .action-items-box {
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.15);
+        }
+        .summary-box {
+            background-color: #FFF8DC;
+        }
+        button:hover {
+            background-color: white;
+            color: black;
+            border-color: black;
+        }
+        br {
+            margin-top: 8px;
+        }
+        .audio-player-container {
+            background: linear-gradient(135deg, #FF91A4, #FF4E00);
+            padding: 25px;
+            border-radius: 20px;
+            box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2), 0px 6px 25px rgba(0, 0, 0, 0.15);
+            margin-top: 30px;
+            margin-bottom: 40px;
+            text-align: center;
+            font-size: 18px;
+            transition: all 0.7s ease-in-out, transform 0.3s ease;
+        }
+        .audio-player-container:hover {
+            transform: translateY(-10px) scale(1.03);
+            box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.3), 0px 12px 35px rgba(0, 0, 0, 0.25);
+        }
+        .audio-player {
+            width: 80%;
+            height: 50px;
+            border-radius: 15px;
+            background-color: #FFF8DC;
+            border: 1px solid rgba(0, 0, 0, 0.15);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0, 0, 0, 0.15);
+            transition: all 0.3s ease, transform 0.3s ease;
+        }
+        .audio-player:hover {
+            background-color: #FF7F50;
+            transform: scale(1.1);
+        }
+        .audio-player-container h4 {
+            color: #333;
+            font-weight: 700;
+            margin-bottom: 15px;
+            font-size: 22px;
+        }
+        .audio-player-container .play-button {
+            background-color: #FF4E00;
+            border: none;
+            padding: 10px 20px;
+            color: white;
+            font-weight: 600;
+            border-radius: 30px;
+            cursor: pointer;
+            transition: all 0.5s ease;
+        }
+        .audio-player-container .play-button:hover {
+            background-color: #FF91A4;
+            box-shadow: 0px 4px 20px rgba(255, 145, 164, 0.5);
+        }
+        .audio-player-container .play-button:focus {
+            outline: none;
+        }
+        .comment-box {
+            background: linear-gradient(145deg, #f4f9fb, #dce5f5);
+            border: 1px solid #cfd9e6;
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 20px;
+            box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1), -2px -2px 12px rgba(255, 255, 255, 0.8);
+            font-family: 'Arial', sans-serif;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .comment-box:hover {
+            transform: scale(1.02) translateY(-2px);
+            box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2), -4px -4px 20px rgba(255, 255, 255, 0.4);
+        }
+        .comment-header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            font-weight: bold;
+            color: #3e3e3e;
+        }
+        .comment-text {
+            color: #555;
+            font-size: 14px;
+            line-height: 1.6;
+        }
+        .comment-header span {
+            color: #007bff;
+            font-size: 12px;
+        }
+        .form-container {
+            margin-bottom: 30px;
+        }
+        .stTextInput, .stTextArea {
+            border-radius: 5px;
+            border: 1px solid #ccc;
+            padding: 10px;
+            font-size: 14px;
+            margin-bottom: 15px;
+            width: 100%;
+        }
+        .stFormSubmitButton {
+            color: black;
+            padding: 10px 20px;
+            border-radius: 5px;
+            font-size: 14px;
+            cursor: pointer;
+        }
 
+        .client-name-container {
+            padding: 20px;
+            border-radius: 10px;
+            background: linear-gradient(145deg, #ff7e5f, #feb47b);
+            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), -5px -5px 15px rgba(255, 255, 255, 0.3);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .client-name-container:hover {
+            transform: translateY(-5px) scale(1.05);
+            box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.15), -8px -8px 20px rgba(255, 255, 255, 0.4);
+        }
+
+        .client-name {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #fff;
+            text-align: center;
+            margin: 0;
+        }
+
+        .form-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .stButton>button {
+            background-color: black;
+            color: white;
+            width: 150px;
+            height: 40px;
+            border: none;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.3s;
+        }
+        .stButton>button:hover {
+            background-color: white;
+            color: black;
+        }
+        </style>
     '''
     st.markdown(css, unsafe_allow_html=True)
-    client_name = st.session_state.client_name
-    date = st.session_state.date
 
     summary_blob_name = f"{client_name}/{date.replace('_', '-')}/summary.txt"
     transcription_blob_name = f"{client_name}/{date.replace('_', '-')}/transcription.txt"