home page and header modification

src/app.py

@@ -39,21 +39,29 @@ st.markdown(
 
 c3, c4, c5 = st.columns([2, 1.5, 2])
 with c3:    
-    st.markdown('<h2 class="centered-text">About</h2>', unsafe_allow_html=True)
-    st.markdown('<h3 class="centered-text"> NIRS Utils is a powerful tool that was developed to ease the spectral data processing process. It benifits from the synergy between web and data science frameworks to offer a user-friendly interface featured a variety of analytical capabilities. Further information can be found here.</h3>', unsafe_allow_html=True)
+    st.markdown('<h3 class="centered-text">About</h3>', unsafe_allow_html=True)
+    st.markdown('<h4 class="centered-text"> NIRS Utils is a powerful tool that was developed to ease the spectral data processing process. It benifits from the synergy between web and data science frameworks to offer a user-friendly interface featured a variety of analytical capabilities. Further information can be found here.</h3>', unsafe_allow_html=True)
 
 with c5:    
-    st.markdown('<h2 class="centered-text">Key Features</h2>', unsafe_allow_html=True)
-    st.markdown('<h3 class="centered-text"> Our app featured a variety of analytical capabilities that makes it the optimal solution for spectral data processing : <br> - Easy-to-use. <br> - Use advanced frameworks. <br> - Enhanced automation capabilities. <br> - Saves your time and efforts.</h3>', unsafe_allow_html=True)
+    st.markdown('<h3 class="centered-text">Key Features</h3>', unsafe_allow_html=True)
+    st.markdown('<h4 class="centered-text"> Our app featured a variety of analytical capabilities that makes it the optimal solution for spectral data processing : <br> - Easy-to-use. <br> - Use advanced frameworks. <br> - Enhanced automation capabilities. <br> - Saves your time and efforts.</h4>', unsafe_allow_html=True)
 
 
 # add buttons at the bottom of the page
-header1, header2, header3,header4 = st.columns(4)
-if header1.button("Inputs"):
+match st.session_state.interface:
+    case 'simple':
+        _, header1, header2, header3 = st.columns([.2, .5, .5, .5])
+        if header3.button("Models Creation & Predictions", type = 'primary'):
+            st.switch_page(pages_folder / '2-model_creation.py')
+
+    case 'advanced':
+        _, header1, header2, header3, header4 = st.columns([.2, .5, .5, .5, .5])
+        if header3.button("Models Creation", type = 'primary'):
+            st.switch_page(pages_folder / '2-model_creation.py')
+        if header4.button("Predictions", type = 'primary'):
+            st.switch_page(pages_folder / '3-prediction.py')
+
+if header1.button("Inputs", type = 'primary'):
     st.switch_page(pages_folder / '0-inputs.py')
-if header2.button("Samples Selection"):
-    st.switch_page(pages_folder / '1-samples_selection.py')
-if header3.button("Models Creation"):
-    st.switch_page(pages_folder / '2-model_creation.py')
-if header4.button("Predictions"):
-    st.switch_page(pages_folder / '3-prediction.py')
\ No newline at end of file
+if header2.button("Samples Selection", type = 'primary'):
+    st.switch_page(pages_folder / '1-samples_selection.py')
\ No newline at end of file

src/style/layout.py

@@ -4,11 +4,13 @@
 def UiComponents(pagespath, csspath, imgpath, header = True, sidebar = True, bgimg = True, colborders = True):
     import streamlit as st
     if header == True:    
+        #            <div style="width: 100%;height: 170px; background-color: rgb(0,0,0,0);border: 4px solid rgb(122,176,199); padding: 0px; margin-bottom: 10px;border-radius: 20%; ">
+
         st.markdown(
             """
-            <div style="width: 100%;height: 170px; background-color: rgb(0,0,0,0);border: 4px solid rgb(122,176,199); padding: 0px; margin-bottom: 10px;border-radius: 20%; ">
-            <h1 style="font-family: 'Arial',d;text-align: center; color: #39bf55;">PACE - MEEB / CEFE</h1>
-            <h2 style="font-family: 'Arial';text-align: center; color: #2cb048;">NIRS Utils</h2>
+            <div style="width: 100%; height: 170px; background-color: #7ab0c7; padding: 0px; margin-bottom: 10px; ">
+            <h1 style="font-family: 'Arial',d;text-align: center; color: rgb(255, 255, 255);">PACE - MEEB / CEFE</h1>
+            <h2 style="font-family: 'Arial';text-align: center; color: rgb(255, 255, 255);">NIRS Utils</h2>
             </div>
             """,
             unsafe_allow_html=True