styling dengan css

.streamlit/config.toml

@@ -1,3 +1,3 @@
 [theme]
-base="light"
-primaryColor="#1f4f6e"
+base="dark"
+primaryColor="#00adb5"

app.py

@@ -57,7 +57,7 @@ st.set_page_config(
 # Load custom CSS
 with open(os.path.join("assets", "style.css"), encoding="utf-8") as f:
     st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
-
+st.markdown('<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">', unsafe_allow_html=True)
 
 def get_session_id():
     """Generate atau retrieve session ID untuk user - PERSISTENT across refresh"""
@@ -307,24 +307,34 @@ st.markdown(
     unsafe_allow_html=True
 )
 st.markdown("")
+st.markdown("")
 
 steps = [
-    {"icon": "📤", "title": "1. Upload File Excel",
+    # Ikon Pengunggahan File
+    {"icon": "bi bi-cloud-arrow-up", "title": "1. Upload File Excel",
         "description": "Siapkan dan upload file Excel kritik dan saran yang wajib memiliki kolom `kritik_saran`."},
-    {"icon": "⏳", "title": "2. Proses Data Otomatis",
-        "description": "Website akan melakukan  preprocessing dan menjalankan model prediksi sentimen."},
-    {"icon": "📊", "title": "3. Analisis & Visualisasi",
+
+    # Ikon Proses/Waktu
+    {"icon": "bi bi-hourglass-split", "title": "2. Proses Data Otomatis",
+        "description": "Website akan melakukan preprocessing dan menjalankan model prediksi sentimen."},
+
+    # Ikon Analisis/Visualisasi
+    {"icon": "bi bi-bar-chart", "title": "3. Analisis & Visualisasi",
         "description": "Lihat hasil lengkap berupa tabel data terprediksi, metrik, dan visualisasi sentimen."},
-    {"icon": "⬇️", "title": "4. Unduh Hasil Analisis",
+
+    # Ikon Pengunduhan File
+    {"icon": "bi bi-cloud-arrow-down", "title": "4. Unduh Hasil Analisis",
         "description": "Unduh hasil analisis lengkap Anda dalam format file Excel untuk laporan lebih lanjut."}
 ]
+
 cols = st.columns(len(steps))
 
 for i, step in enumerate(steps):
     with cols[i]:
+        # Mengubah tag <span> menjadi <i> untuk kompatibilitas ikon font
         st.markdown(f"""
-        <div class='step-card'>
-            <span class='icon'>{step['icon']}</span>
+        <div class='step-card' >
+            <i class='icon {step['icon']}'></i>
             <div class='step-number'>{step['title']}</div>
             <p class='step-description'>{step['description']}</p>
         </div>
@@ -677,7 +687,9 @@ if st.session_state.df_predicted is not None:
     )
 
     # Ringkasan Cepat dengan pengecekan kolom
+    st.markdown("")
     st.markdown("### Ringkasan Cepat")
+    st.markdown("")
 
     total_pos = (df_filtered[ASPEK_COLUMNS] == "positif").sum().sum()
     total_net = (df_filtered[ASPEK_COLUMNS] == "netral").sum().sum()
@@ -700,7 +712,7 @@ if st.session_state.df_predicted is not None:
     col4.metric("Jumlah Prodi", prodi_count if prodi_count > 0 else "N/A")
     col5.metric("Jumlah Semester",
                 semester_count if semester_count > 0 else "N/A")
-
+    st.markdown("")
     col6, col7, col8, col9, col10 = st.columns(5)
     col6.metric("Sentimen Positif", f"{total_pos:,}")
     col7.metric("Sentimen Netral", f"{total_net:,}")
@@ -799,10 +811,10 @@ if st.session_state.df_predicted is not None:
         st.error(f"Error menampilkan sentimen top 10 mata kuliah: {str(e)}")
 
     st.markdown("---")
-    try:
-        show_sentiment_stacked_percentage(df_filtered, ASPEK_COLUMNS)
-    except Exception as e:
-        st.error(f"Error menampilkan stacked percentage: {str(e)}")
+    # try:
+    #     show_sentiment_stacked_percentage(df_filtered, ASPEK_COLUMNS)
+    # except Exception as e:
+    #     st.error(f"Error menampilkan stacked percentage: {str(e)}")
 
 # Footer
 st.caption("""

assets/style.css

@@ -1,6 +1,6 @@
 /* ========================================
-   Enhanced Streamlit Custom Styles with Dark Mode Support
-   ======================================== */
+    Enhanced Streamlit Custom Styles with Dark Mode Support
+    ======================================== */
 
 /* Import Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@@ -17,10 +17,8 @@ html, body, [class*="css"] {
 /* CSS class untuk memusatkan teks */
 .title-center {
     text-align: center;
-    /* Opsional: Sesuaikan margin atas/bawah jika diperlukan */
     margin-top: 10px; 
     margin-bottom: 10px; 
-    /* Opsional: Mengatur warna agar tetap konsisten dengan tema Streamlit */
     color: inherit; 
 }
 
@@ -49,7 +47,7 @@ html {
     border-radius: 10px;
     padding: 15px;
     text-align: center;
-    height: 100%; /* Memastikan semua kartu dalam satu baris memiliki tinggi yang sama */
+    height: 100%; 
     margin-bottom: 15px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
@@ -76,17 +74,17 @@ html {
     color: #404040; /* Teks gelap untuk light mode */
 }
 
-/* Dark Mode specific styles: Menggunakan abu-abu tua yang lebih jelas dan teks terang */
+/* Dark Mode specific styles: Menggunakan palet #222831, #393E46, dan #EEEEEE */
 @media (prefers-color-scheme: dark) {
     [data-testid="stAppViewContainer"] .step-card {
-        background-color: #1f4f6e; /* Abu-abu tua yang sangat gelap, untuk kontras */
-        border: 1px solid #366d8f; /* Border yang sedikit lebih terang dari latar belakang */
+        background-color: #393E46; /* Abu-abu Sekunder Baru */
+        border: 1px solid #222831; /* Border Sangat Gelap Baru */
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
     }
     
     [data-testid="stAppViewContainer"] .step-card .step-number,
     [data-testid="stAppViewContainer"] .step-card .step-description {
-        color: #f0f0f0; /* Teks terang (hampir putih) untuk keterbacaan optimal */
+        color: #EEEEEE; /* Teks terang baru */
     }
 }
 
@@ -95,6 +93,9 @@ html {
     font-size: 2.5em;
     margin-bottom: 10px;
     display: block;
+    /* WARNA IKON DARI PALET BARU */
+    color: #00ADB5; 
+    transition: color 0.3s ease;
 }
 
 /* Step number styling */
@@ -111,8 +112,8 @@ html {
 }
 
 /* ========================================
-   Typography - Dark Mode Compatible
-   ======================================== */
+    Typography - Dark Mode Compatible
+    ======================================== */
 
 h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
@@ -130,7 +131,8 @@ code {
     padding: 0.2rem 0.4rem;
     border-radius: 4px;
     font-size: 0.9em;
-    color: #1476ff;
+    /* WARNA CODE BARU */
+    color: #00ADB5;
 }
 
 /* Heading */
@@ -163,18 +165,20 @@ h1.title-center {
 }
 
 /* ========================================
-   File Uploader - Dark Mode Compatible with Dashed Border
-   ======================================== */
+    File Uploader - Dark Mode Compatible with Dashed Border
+    ======================================== */
 .uploadedFile {
     background: var(--secondary-background-color);
-    border: 2px dashed 1476ff;
+    /* WARNA BORDER BARU */
+    border: 2px dashed #00ADB5; 
     border-radius: 12px;
     padding: 2rem;
     transition: all 0.3s ease;
 }
 
 .uploadedFile:hover {
-    border-color: 1476ff;
+    /* WARNA BORDER BARU */
+    border-color: #00ADB5; 
     background: var(--background-color);
 }
 
@@ -187,8 +191,9 @@ h1.title-center {
 }
 
 [data-testid="stFileUploader"]:hover {
-    border-color: #366d8f;
-    box-shadow: 0 4px 12px rgba(20, 118, 255, 0.2);
+    /* WARNA BORDER & SHADOW BARU */
+    border-color: #00ADB5;
+    box-shadow: 0 4px 12px rgba(0, 173, 181, 0.2);
 }
 
 /* File uploader text color */
@@ -205,32 +210,32 @@ h1.title-center {
 }
 
 [data-testid="stFileUploader"] section:hover {
-    border-color: #366d8f;
+    /* WARNA BORDER BARU */
+    border-color: #00ADB5; 
     background: var(--background-color);
 }
 
 
 
 /* ========================================
-   Buttons - Dark Mode Compatible
-   ======================================== */
+    Buttons - Dark Mode Compatible
+    ======================================== */
 
 .stButton > button {
-    background: var(--secondary-background-color);
-    color: var(--text-color);
-    border: 1px solid var(--text-color);
+    background: #ff1414ff;
+    color: #ffffff;     
+    border: 2px solid #ff1414ff; 
     border-radius: 8px;
     padding: 0.6rem 1.2rem;
     font-weight: 500;
     font-size: 0.95rem;
     transition: all 0.3s ease;
-    opacity: 0.8;
+    opacity: 1; 
 }
 
 .stButton > button:hover {
-    background: var(--background-color);
-    border-color: #1476ff;
-    color: #ff1414ff;
+    background: #ff1414ff;
+    color: #ffffff;
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(255, 20, 20, 0.2);
     opacity: 1;
@@ -242,24 +247,25 @@ h1.title-center {
 
 /* Download Button */
 .stDownloadButton > button {
-    background: linear-gradient(135deg, #1476ff 0%, #0056d2 100%);
-    color: white !important;
+    /* GRADIENT BARU */
+    background: linear-gradient(135deg, #00ADB5 0%, #008D93 100%);
+    color: #ffffff !important; /* Teks sangat gelap untuk kontras */
     border: none;
     border-radius: 8px;
     padding: 0.7rem 1.5rem;
     font-weight: 600;
     transition: all 0.3s ease;
-    box-shadow: 0 4px 12px rgba(20, 118, 255, 0.3);
+    box-shadow: 0 4px 12px rgba(0, 173, 181, 0.3);
 }
 
 .stDownloadButton > button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(20, 118, 255, 0.4);
+    box-shadow: 0 6px 20px rgba(0, 173, 181, 0.4);
 }
 
 /* ========================================
-   Metrics - Dark Mode Compatible
-   ======================================== */
+    Metrics - Dark Mode Compatible
+    ======================================== */
 
 [data-testid="stMetricValue"] {
     font-size: 1.8rem;
@@ -298,17 +304,12 @@ div[data-testid="metric-container"]:hover {
 }
 
 /* ========================================
-   Alerts & Messages - Use Streamlit Default
-   ======================================== */
-
-/* Removed custom alert styling - using Streamlit default */
-
-/* ========================================
-   Progress Bar
-   ======================================== */
+    Progress Bar
+    ======================================== */
 
 .stProgress > div > div > div > div {
-    background: linear-gradient(90deg, #1476ff 0%, #0056d2 100%);
+    /* GRADIENT BARU */
+    background: linear-gradient(90deg, #00ADB5 0%, #008D93 100%);
     border-radius: 10px;
     height: 12px;
 }
@@ -320,8 +321,8 @@ div[data-testid="metric-container"]:hover {
 }
 
 /* ========================================
-   Dataframe - Dark Mode Compatible
-   ======================================== */
+    Dataframe - Dark Mode Compatible
+    ======================================== */
 
 [data-testid="stDataFrame"] {
     border-radius: 12px;
@@ -333,8 +334,9 @@ div[data-testid="metric-container"]:hover {
 
 /* Dataframe header */
 [data-testid="stDataFrame"] thead tr th {
-    background: linear-gradient(135deg, #1476ff 0%, #0056d2 100%);
-    color: white !important;
+    /* GRADIENT BARU */
+    background: linear-gradient(135deg, #00ADB5 0%, #008D93 100%);
+    color: #222831 !important; /* Teks sangat gelap untuk kontras */
     font-weight: 600;
     text-transform: uppercase;
     font-size: 0.85rem;
@@ -362,8 +364,8 @@ div[data-testid="metric-container"]:hover {
 }
 
 /* ========================================
-   Sidebar - Dark Mode Compatible
-   ======================================== */
+    Sidebar - Dark Mode Compatible
+    ======================================== */
 
 [data-testid="stSidebar"] {
     background: var(--secondary-background-color);
@@ -396,8 +398,8 @@ div[data-testid="metric-container"]:hover {
 }
 
 /* ========================================
-   Expander - Dark Mode Compatible
-   ======================================== */
+    Expander - Dark Mode Compatible
+    ======================================== */
 
 .streamlit-expanderHeader {
     background: var(--secondary-background-color);
@@ -410,8 +412,9 @@ div[data-testid="metric-container"]:hover {
 }
 
 .streamlit-expanderHeader:hover {
-    border-color: #1476ff;
-    color: #1476ff;
+    /* WARNA HOVER BARU */
+    border-color: #00ADB5;
+    color: #00ADB5;
     opacity: 1;
 }
 
@@ -425,8 +428,8 @@ div[data-testid="metric-container"]:hover {
 }
 
 /* ========================================
-   Tabs - Dark Mode Compatible
-   ======================================== */
+    Tabs - Dark Mode Compatible
+    ======================================== */
 
 .stTabs [data-baseweb="tab-list"] {
     gap: 8px;
@@ -447,13 +450,15 @@ div[data-testid="metric-container"]:hover {
 
 .stTabs [data-baseweb="tab"]:hover {
     background: var(--background-color);
-    color: #1476ff;
+    /* WARNA HOVER BARU */
+    color: #00ADB5;
     opacity: 1;
 }
 
 .stTabs [aria-selected="true"] {
-    background: linear-gradient(135deg, #1476ff 0%, #0056d2 100%);
-    color: white !important;
+    /* GRADIENT BARU */
+    background: linear-gradient(135deg, #00ADB5 0%, #008D93 100%);
+    color: #222831 !important; /* Teks sangat gelap untuk kontras */
     opacity: 1;
 }
 
@@ -462,8 +467,8 @@ div[data-testid="metric-container"]:hover {
 }
 
 /* ========================================
-   Select & Multiselect - Dark Mode Compatible
-   ======================================== */
+    Select & Multiselect - Dark Mode Compatible
+    ======================================== */
 
 .stSelectbox > div > div,
 .stMultiSelect > div > div {
@@ -475,22 +480,24 @@ div[data-testid="metric-container"]:hover {
 
 .stSelectbox > div > div:hover,
 .stMultiSelect > div > div:hover {
-    border-color: #1476ff;
-    box-shadow: 0 0 0 1px #1476ff;
+    /* WARNA HOVER BARU */
+    border-color: #00ADB5;
+    box-shadow: 0 0 0 1px #00ADB5;
     opacity: 1;
 }
 
 /* ========================================
-   Spinner
-   ======================================== */
+    Spinner
+    ======================================== */
 
 .stSpinner > div {
-    border-top-color: #1476ff !important;
+    /* WARNA SPINNER BARU */
+    border-top-color: #00ADB5 !important;
 }
 
 /* ========================================
-   Plotly Charts - Dark Mode Compatible
-   ======================================== */
+    Plotly Charts - Dark Mode Compatible
+    ======================================== */
 
 .js-plotly-plot {
     border-radius: 12px;
@@ -500,11 +507,12 @@ div[data-testid="metric-container"]:hover {
 }
 
 /* ========================================
-   Custom Classes - Dark Mode Compatible
-   ======================================== */
+    Custom Classes - Dark Mode Compatible
+    ======================================== */
 
 .gradient-text {
-    background: linear-gradient(135deg, #1476ff 0%, #0056d2 100%);
+    /* GRADIENT BARU */
+    background: linear-gradient(135deg, #00ADB5 0%, #008D93 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -551,8 +559,8 @@ div[data-testid="metric-container"]:hover {
 }
 
 /* ========================================
-   Animations
-   ======================================== */
+    Animations
+    ======================================== */
 
 @keyframes fadeIn {
     from {
@@ -583,8 +591,8 @@ div[data-testid="metric-container"]:hover {
 }
 
 /* ========================================
-   Responsive Design
-   ======================================== */
+    Responsive Design
+    ======================================== */
 
 @media (max-width: 768px) {
     .main .block-container {
@@ -602,8 +610,8 @@ div[data-testid="metric-container"]:hover {
 }
 
 /* ========================================
-   Utility Classes
-   ======================================== */
+    Utility Classes
+    ======================================== */
 
 .text-center {
     text-align: center;