Update app.py

app.py

@@ -9,42 +9,64 @@ TOKEN = os.environ.get("HF_TOKEN")
 
 st.set_page_config(page_title="NIRINSBEAT", layout="wide")
 
-# --- STYLE CSS (CLEAN, NO LOGO, NO DOWNLOAD) ---
+# --- STYLE CSS (DECORATION PRO & STABLE) ---
 st.markdown("""
     <style>
     @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Poppins:wght@400;700&display=swap');
 
-    .stApp { background-color: #ffffff; color: #333; font-family: 'Poppins', sans-serif; }
+    /* Background miaraka amin'ny haingo kely */
+    .stApp { 
+        background-color: #ffffff; 
+        background-image: radial-gradient(#6f42c10a 1px, transparent 1px);
+        background-size: 20px 20px;
+        color: #333; 
+        font-family: 'Poppins', sans-serif; 
+    }
     
-    /* Titre NIRINSBEAT Stylé eo ambony fotsiny */
+    /* Titre NIRINSBEAT (Mitambatra tsara) */
     .main-title {
         text-align: center;
         font-family: 'Black Ops One', cursive;
-        font-size: 50px;
+        font-size: clamp(30px, 8vw, 60px); /* Adjust automatically to screen size */
         color: #6f42c1;
-        padding-top: 30px;
-        margin-bottom: 40px;
-        letter-spacing: 3px;
-        text-transform: uppercase;
+        padding: 20px 0;
+        margin: 0;
+        letter-spacing: 2px;
+        white-space: nowrap; /* Mba tsy hisaraka mihitsy ny teny */
+        text-shadow: 2px 2px 0px #eee;
+    }
+
+    /* Karatra ho an'ny Beat (Manintona kokoa) */
+    .beat-card {
+        background: #fff;
+        border-radius: 15px;
+        padding: 15px;
+        box-shadow: 0 4px 15px rgba(111, 66, 193, 0.1);
+        margin-bottom: 20px;
+        border-left: 5px solid #6f42c1;
     }
 
-    /* ESORINA NY DOWNLOAD (Teboka telo) */
+    /* ESORINA NY DOWNLOAD */
     audio::-internal-media-controls-download-button { display:none; }
     audio::-webkit-media-controls-enclosure { overflow:hidden; }
     audio::-webkit-media-controls-panel { width: calc(100% + 30px); }
     
-    /* WhatsApp Button madio */
+    /* WhatsApp Button Stylé */
     .whatsapp-btn {
-        background-color: #25D366; color: white !important;
-        border-radius: 8px; text-align: center; padding: 12px;
-        text-decoration: none; display: block; font-weight: bold; border: none;
-        font-size: 15px;
+        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
+        color: white !important;
+        border-radius: 30px;
+        text-align: center;
+        padding: 12px;
+        text-decoration: none;
+        display: block;
+        font-weight: bold;
+        transition: 0.3s;
+        box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
     }
+    .whatsapp-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4); }
 
-    hr { border: 0; border-top: 1px solid #f2f2f2; margin: 25px 0; }
-    
-    /* Sary Artwork kely boribory kely ny sisiny */
-    .stImage img { border-radius: 8px; }
+    hr { border: 0; border-top: 1px solid #f2f2f2; margin: 20px 0; }
     </style>
     """, unsafe_allow_html=True)
 
@@ -68,15 +90,15 @@ def save_and_upload(dataframe):
 
 df = load_data()
 
-# --- HEADER (TITRE FOTSINY) ---
+# --- HEADER ---
 st.markdown('<div class="main-title">NIRINSBEAT</div>', unsafe_allow_html=True)
+st.markdown("<p style='text-align:center; color:grey; margin-top:-10px;'>High Quality Instrumentals</p>", unsafe_allow_html=True)
 
 # --- SIDEBAR ---
 st.sidebar.markdown("### 🔍 Filter")
 menu = ["🏠 Home", "🔥 Afrobeat", "🎵 Afropop", "⚡ Drill", "💃 Zouk"]
 choice = st.sidebar.selectbox("Sokajy", menu)
 
-# Admin Stealth (Hita rehefa manoratra admin-login ao amin'ny Search)
 secret = st.sidebar.text_input("Search", placeholder="Search beats...")
 admin_mode = False
 if secret == "admin-login":
@@ -85,74 +107,63 @@ if secret == "admin-login":
 # --- CATALOGUE ---
 if not admin_mode:
     clean_choice = choice.split(" ")[1] if " " in choice else choice
-    
     display_df = df if clean_choice == "Home" else df[df['categorie'] == clean_choice]
     
     if display_df.empty:
-        st.info("Mbola tsy misy hira ato amin'ity sokajy ity.")
+        st.info("Mbola tsy misy hira ato.")
     else:
         for index, row in display_df.iterrows():
-            with st.container():
-                # Fizarana Column: Sary | Titre & Audio | WhatsApp
-                c_img, c_desc, c_action = st.columns([0.6, 3, 1.2])
-                
-                with c_img:
-                    img_url = row.get('image_url', "https://via.placeholder.com/150")
-                    st.image(img_url, width=80) 
-                
-                with c_desc:
-                    st.markdown(f"<b style='font-size:18px;'>{row['titre']}</b>", unsafe_allow_html=True)
-                    st.markdown(f"<p style='color:grey; font-size:13px; margin:0;'>{row['categorie']} • <b>{row['prix']}</b></p>", unsafe_allow_html=True)
-                    
-                    # Audio tsy misy download (HTML5 nodownload)
-                    audio_html = f'''
-                        <audio controls controlsList="nodownload" style="width:100%; height:38px; margin-top:5px;">
-                            <source src="{row['file_url']}" type="audio/mpeg">
-                        </audio>
-                    '''
-                    st.markdown(audio_html, unsafe_allow_html=True)
-                
-                with c_action:
-                    # Laharana WhatsApp (SOLOY NY ANAO)
-                    wa_url = f"https://wa.me/261340000000?text=Salama%20Razoa%2C%20liana%20amin'ilay%20beat%20'{row['titre']}'%20aho."
-                    st.markdown(f'<a href="{wa_url}" target="_blank" class="whatsapp-btn">💬 WhatsApp</a>', unsafe_allow_html=True)
-                
-                st.markdown("<hr>", unsafe_allow_html=True)
+            # Natao anaty div "beat-card" ny beat tsirairay ho haingo
+            st.markdown('<div class="beat-card">', unsafe_allow_html=True)
+            c_img, c_desc, c_action = st.columns([1, 2.5, 1.2])
+            
+            with c_img:
+                img_url = row.get('image_url', "https://via.placeholder.com/300")
+                st.image(img_url, use_container_width=True) 
+            
+            with c_desc:
+                st.markdown(f"<h3 style='margin:0; color:#6f42c1;'>{row['titre']}</h3>", unsafe_allow_html=True)
+                st.markdown(f"<p style='color:grey; font-size:14px;'>{row['categorie']} • <b style='color:#333;'>{row['prix']}</b></p>", unsafe_allow_html=True)
+                audio_html = f'<audio controls controlsList="nodownload" style="width:100%; height:40px;"><source src="{row["file_url"]}" type="audio/mpeg"></audio>'
+                st.markdown(audio_html, unsafe_allow_html=True)
+            
+            with c_action:
+                wa_url = f"https://wa.me/261340000000?text=Salama%20Razoa%2C%20liana%20amin'ilay%20beat%20'{row['titre']}'%20aho."
+                st.markdown(f'<br><a href="{wa_url}" target="_blank" class="whatsapp-btn">💬 Hividy</a>', unsafe_allow_html=True)
+            
+            st.markdown('</div>', unsafe_allow_html=True)
 
 # --- ADMIN PANEL ---
 else:
-    st.header("🔑 Admin Dashboard")
+    st.header("🔑 Admin Panel")
     pwd = st.text_input("Password", type="password")
     if pwd == "admin123":
-        t1, t2 = st.tabs(["📤 Upload Beat", "🗑️ Manage / Delete"])
+        t1, t2 = st.tabs(["Upload", "Manage"])
         with t1:
             with st.form("up", clear_on_submit=True):
-                titre = st.text_input("Titre-n'ny Beat")
+                titre = st.text_input("Titre")
                 cat = st.selectbox("Sokajy", ["Afrobeat", "Afropop", "Drill", "Zouk"])
-                prx = st.text_input("Prix (ohatra: 20.000 Ar)")
-                aud = st.file_uploader("Upload MP3", type=["mp3"])
-                img = st.file_uploader("Upload Artwork (Sary)", type=["jpg", "png"])
-                
+                prx = st.text_input("Prix")
+                aud = st.file_uploader("MP3", type=["mp3"])
+                img = st.file_uploader("Artwork", type=["jpg", "png"])
                 if st.form_submit_button("Hampiditra"):
                     if aud and img and TOKEN:
                         api = HfApi()
                         a_p = f"beats/{aud.name}"; i_p = f"images/{img.name}"
                         api.upload_file(path_or_fileobj=aud, path_in_repo=a_p, repo_id=REPO_ID, repo_type="space", token=TOKEN)
                         api.upload_file(path_or_fileobj=img, path_in_repo=i_p, repo_id=REPO_ID, repo_type="space", token=TOKEN)
-                        
                         new_row = pd.DataFrame([{"titre": titre, "categorie": cat, "prix": prx, 
                                                "file_url": f"https://huggingface.co/spaces/{REPO_ID}/resolve/main/{a_p}",
                                                "image_url": f"https://huggingface.co/spaces/{REPO_ID}/resolve/main/{i_p}"}])
                         df = pd.concat([df, new_row], ignore_index=True)
                         save_and_upload(df)
-                        st.success("Tafiditra soa aman-tsara!")
+                        st.success("Tafiditra!")
                         st.rerun()
         with t2:
-            st.write("### Fafao ny beat tsy ilaina")
             for idx, row in df.iterrows():
-                col1, col2 = st.columns([4, 1])
-                col1.write(f"🎵 **{row['titre']}** ({row['categorie']})")
-                if col2.button("Mamafa", key=f"del_{idx}"):
+                c1, c2 = st.columns([4, 1])
+                c1.write(f"**{row['titre']}**")
+                if c2.button("Delete", key=f"del_{idx}"):
                     df = df.drop(idx)
                     save_and_upload(df)
                     st.rerun()