Update app.py

app.py

@@ -12,7 +12,6 @@ import psutil
 
 st.set_page_config(layout="wide")
 
-# CSS with modifications for video centering and upload button hover effect
 st.markdown("""
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
@@ -52,10 +51,14 @@ st.markdown("""
 }
 .navbar li a {
     text-decoration: none;
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: #1a1a1a;
-    transition: color 0.3s ease;
+    font-size: 28px;
+    font-weight: bold;
+    color: #060404;
+    position: relative;
+    padding: 10px 15px;
+    transition: text-shadow 0.3s ease-in-out;
+    text-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5);
+    
 }
 .navbar li a:hover {
     color: #ff6f61;
@@ -66,10 +69,11 @@ st.markdown("""
     background: linear-gradient(to right, #2b5876, #4e4376);
     background-size: cover;
     color: #ffffff;
-    padding: 4rem 2rem;
+    padding: 2rem 2rem;
     border-radius: 1rem;
     text-align: center;
     margin: 2rem 0;
+    max-height: 200px;
 }
 .hero h1 {
     font-size: 2.5rem;
@@ -103,10 +107,11 @@ st.markdown("""
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
     transition: all 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    background-color: #fff;
+    background-color: #fff; /* or a slightly brighter color */
     filter: brightness(1.05);
     z-index: 10;
 }
+
 .feature i {
     font-size: 1.5rem;
     color: #2196f3;
@@ -133,6 +138,11 @@ st.markdown("""
     text-align: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
+                border-top: 4px solid #28a745;
+    height: 290px;
+    padding-top: 10px;
+}
+
 }
 .plan:hover {
     transform: translateY(-5px);
@@ -142,6 +152,7 @@ st.markdown("""
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
 }
+            
 .plan.free { border-top: 4px solid #28a745; }
 .plan.premium { border-top: 4px solid #ff6f61; }
 .plan.business { border-top: 4px solid #2196f3; }
@@ -183,26 +194,6 @@ st.markdown("""
     font-family: 'Poppins', sans-serif;
 }
 
-/* Video player styling */
-video {
-    display: block;
-    width: 350px !important;
-    height: 500px !important;
-    object-fit: contain;
-    margin: 0 auto;
-    border: 3px solid #2196f3;
-    border-radius: 8px;
-}
-
-/* File Uploader Styling */
-input[type="file"] {
-    opacity: 0.2;
-    transition: opacity 0.3s ease;
-}
-input[type="file"]:hover {
-    opacity: 1;
-}
-
 /* Footer */
 footer {
     background: #1a1a1a;
@@ -449,11 +440,11 @@ def create_edited_video(video_path, transcript, keep_indices):
 
 def generate_srt(transcript, include_timeframe=True):
     srt_content = ""
-    for i, (text, start, end) in enumerate(transcript, start=1):
+    for text, start, end in transcript:
         if include_timeframe:
             start_time = seconds_to_srt_time(start)
             end_time = seconds_to_srt_time(end)
-            srt_content += f"{i}\n{start_time} --> {end_time}\n{text}\n\n"
+            srt_content += f"{start_time} --> {end_time}\n{text}\n\n"
         else:
             srt_content += f"{text}\n\n"
     return srt_content
@@ -475,12 +466,38 @@ def main():
 
     st.markdown("""
     <div id="home" class="hero">
-        <h1>VidEp – Revolutionizing Video Subtitle Editing with AI</h1>
+        <h2>VidEp – Revolutionizing Video Subtitle Editing with AI</h2>
         <p>Upload, transcribe, edit subtitles, and summarize videos effortlessly.</p>
     </div>
     """, unsafe_allow_html=True)
 
-    # Initialize session state variables
+    st.markdown("""
+    <style>
+    /* Video player styling */
+    .stVideo > div {
+        max-width: 600px !important;
+        max-height: 450px !important;
+        margin: 0 auto;
+        border: 3px solid #2196f3;
+        border-radius: 8px;
+        overflow: hidden;
+    }
+    
+    /* Footer column styling */
+    .footer-container {
+        display: flex;
+        justify-content: space-between;
+    }
+    .footer-section:first-child {
+        margin-left: 10px;
+    }
+    .footer-section:last-child {
+        margin-right: 10px;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+
     if 'app_state' not in st.session_state:
         st.session_state['app_state'] = 'upload'
     if 'video_path' not in st.session_state:
@@ -512,7 +529,7 @@ def main():
 
     if st.session_state['app_state'] == 'upload':
         st.markdown("<div id='upload'></div>", unsafe_allow_html=True)
-        st.markdown("<h3 style='text-align: center; color: #2196f3;'>Upload Your Video</h3>", unsafe_allow_html=True)
+        st.markdown("<h3 style='text-align: center; color: black;'>Upload Your Video</h3>", unsafe_allow_html=True)
         with st.form(key="upload_form"):
             uploaded_file = st.file_uploader("Choose a video file", type=["mp4"], label_visibility="collapsed")
             if st.form_submit_button("Upload") and uploaded_file:
@@ -522,6 +539,8 @@ def main():
                     st.session_state['app_state'] = 'processing'
                     st.write(f"Uploaded file: {uploaded_file.name}")
                     st.rerun()
+    
+    
 
     if st.session_state['app_state'] == 'processing':
         with st.form(key="processing_form"):
@@ -582,11 +601,7 @@ def main():
                                 os.remove(temp_file)
 
     if st.session_state['app_state'] == 'results':
-        # Center the original video
-        st.markdown('<div style="display: flex; justify-content: center;">', unsafe_allow_html=True)
         st.video(st.session_state['video_path'], start_time=st.session_state['current_time'])
-        st.markdown('</div>', unsafe_allow_html=True)
-
         st.session_state['show_timeframe'] = st.checkbox("Show timeframe in transcript", value=st.session_state['show_timeframe'])
         st.markdown("### Search Subtitles")
         search_query = st.text_input("Search subtitles...", value=st.session_state['search_query'], key="search_input")
@@ -663,10 +678,7 @@ def main():
 
     if st.session_state['app_state'] == 'results' and st.session_state['edited_video_path']:
         st.markdown("### Edited Video")
-        # Center the edited video
-        st.markdown('<div style="display: flex; justify-content: center;">', unsafe_allow_html=True)
         st.video(st.session_state['edited_video_path'])
-        st.markdown('</div>', unsafe_allow_html=True)
         with open(st.session_state['edited_video_path'], "rb") as file:
             st.download_button(label="Download Edited Video", data=file, file_name="edited_video.mp4", mime="video/mp4")
 
@@ -680,7 +692,7 @@ def main():
 
     st.markdown("""
     <div style='text-align: center;'>
-        <h2 style='color: grey;'>Why VidEp Stands Out</h2>
+        <h2 style='color: black'>Why VidEp Stands Out</h2>
     </div>
     <div class="feature-box">
         <div class="feature"><i class="fas fa-cloud-upload-alt"></i><br>Cloud Upload</div>
@@ -691,40 +703,40 @@ def main():
     """, unsafe_allow_html=True)
 
     st.markdown("""
-    <div id="about" class="about-section" style="padding: 3rem 2rem; background: #f8f9fa; border-radius: 1rem; margin: 2rem 0;">
-        <h2 style="text-align: center; color: #2196f3; margin-bottom: 2rem;">About VidEp</h2>
-        <div style="display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;">
-            <div style="flex: 1; min-width: 300px;">
-                <img src="https://i.postimg.cc/g0z3WVgT/about.jpg" style="width: 100%; height: auto; border-radius: 1rem;" alt="About VidEp">
-            </div>
-            <div style="flex: 2; min-width: 300px;">
-                <h3 style="color:grey;">Our Mission</h3>
-                <p>VidEp aims to revolutionize how creators and professionals work with video content by providing state-of-the-art AI-powered tools for transcription, translation, and summarization.</p>
-                <h3 style="color:grey;">What We Do</h3>
-                <p>Our platform combines the latest advancements in speech recognition and natural language processing to automatically transcribe videos in multiple languages, generate accurate translations, and create concise summaries of content.</p>
-                <h3 style="color:grey;">Why Choose Us</h3>
-                <ul>
-                    <li>Advanced AI models for superior accuracy</li>
-                    <li>Multi-language support including English and Urdu</li>
-                    <li>Easy-to-use interface for editing and managing subtitles</li>
-                    <li>Smart search functionality to quickly find content</li>
-                    <li>Seamless video editing based on transcripts</li>
-                </ul>
+        <div id="about" class="about-section" style="padding: 3rem 2rem; background: #f8f9fa; border-radius: 1rem; margin: 2rem 0;">
+            <h2 style="text-align: center; color: black; margin-bottom: 2rem;">About VidEp</h2>
+            <div style="display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;">
+                <div style="flex: 1; min-width: 300px;">
+                    <img src="https://i.postimg.cc/g0z3WVgT/about.jpg" style="width: 100%; height: auto; border-radius: 1rem;" alt="About VidEp">
+                </div>
+                <div style="flex: 2; min-width: 300px;">
+                    <h3 style="color:grey;">Our Mission</h3>
+                    <p>VidEp aims to revolutionize how creators and professionals work with video content by providing state-of-the-art AI-powered tools for transcription, translation, and summarization.</p>
+                    <h3 style="color:grey;">What We Do</h3>
+                    <p>Our platform combines the latest advancements in speech recognition and natural language processing to automatically transcribe videos in multiple languages, generate accurate translations, and create concise summaries of content.</p>
+                    <h3 style="color:grey;">Why Choose Us</h3>
+                    <ul>
+                        <li>Advanced AI models for superior accuracy</li>
+                        <li>Multi-language support including English and Urdu</li>
+                        <li>Easy-to-use interface for editing and managing subtitles</li>
+                        <li>Smart search functionality to quickly find content</li>
+                        <li>Seamless video editing based on transcripts</li>
+                    </ul>
+                </div>
             </div>
         </div>
-    </div>
-    """, unsafe_allow_html=True)
+        """, unsafe_allow_html=True)
 
     st.markdown("""
     <div id="contact" class="contact-section" style="padding: 3rem 2rem; background: #f1f4f8; border-radius: 1rem; margin: 2rem 0;">
-        <h2 style="text-align: center; color: #2196f3; margin-bottom: 2rem;">Contact Us</h2>
+        <h2 style="text-align: center; color: black; margin-bottom: 2rem;">Contact Us</h2>
         <div style="max-width: 600px; margin: 0 auto;">
             <div style="margin-bottom: 1rem;">
                 <label for="email" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Email</label>
                 <input type="email" id="email" placeholder="Your email address" style="width: 100%; padding: 0.75rem; background-color:white; color:white; border-radius: 0.5rem; border: 1px solid #e0e0e0;">
             </div>
             <div style="margin-bottom: 1rem;">
-                <label for="message" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">MessageTwenty-first</label>
+                <label for="message" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Message</label>
                 <textarea id="message" rows="5" placeholder="Your message" style="width: 100%; padding: 0.75rem; border-radius: 0.5rem; background-color:white; color:white; border: 1px solid #e0e0e0;"></textarea>
             </div>
             <button onclick="alert('Message sent successfully!')" style="background: linear-gradient(135deg, #ff6f61, #ff8a65); color: white; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: none; cursor: pointer; width: 100%;">Send Message</button>
@@ -734,9 +746,11 @@ def main():
 
     st.markdown("""
     <div class="plans">
-        <h2 style="text-align: center; margin-bottom: 2rem;color: #2196f3;">Choose Your Plan</h2>
+        <h2 style="text-align: center; margin-bottom: 2rem;color: black;">Choose Your Plan</h2>
         <div class="plan-box">
-            <div class="plan free" style="background-color:#24893c">
+            <div class="plan free" 
+                style="background: linear-gradient(135deg, #299f45, #185726);
+                 padding-bottom: 0px">
                 <h3 style="color: white;">Free</h3>
                 <p><strong>$0</strong> / month</p>
                 <p>Basic video transcription</p>
@@ -744,7 +758,7 @@ def main():
                 <p>Max 5 minutes video</p>
                 <p>No summarization</p>
             </div>
-            <div class="plan premium" style="background-color:#a32b2d">
+            <div class="plan premium"  style="background-color:#a32b2d">
                 <h3 style="color: white;">Premium</h3>
                 <p><strong>$19</strong> / month</p>
                 <p>Advanced transcription</p>
@@ -752,13 +766,12 @@ def main():
                 <p>Max 30 minutes video</p>
                 <p>AI summarization</p>
             </div>
-            <div class="plan business" style="background-color:#396ca3">
+            <div class="plan business"  style="background-color:#396ca3">
                 <h3 style="color: white;">Business</h3>
                 <p><strong>$49</strong> / month</p>
                 <p>Enterprise-grade transcription</p>
                 <p>All languages</p>
                 <p>Unlimited video length</p>
-                <p>Priority processing</p>
             </div>
         </div>
     </div>
@@ -768,8 +781,12 @@ def main():
     <footer>
         <div class="footer-container">
             <div class="footer-section">
-                <h4>VidEp</h4>
-                <p>Revolutionizing video transcription with AI</p>
+                <h4 style="margin-left:20px">Company Info</h4>
+                <ul>
+                    <li><a href="#about-us">About Us</a></li>
+                    <li><a href="#privacy">Privacy Policy</a></li>
+                    <li><a href="#terms">Terms</a></li>
+                </ul>
             </div>
             <div class="footer-section">
                 <h4 style="margin-left:20px">Links</h4>
@@ -789,8 +806,8 @@ def main():
                 </ul>
             </div>
         </div>
-        <div class="footer-bottom">
-            <p>© 2025 VidEp. All rights reserved.</p>
+        <div class="footer-bottom" style="justify-content: center; text-align: center; border-top: 1px solid white; padding-top:20px; padding-bottom: 10px;">
+            <p style="font-size: 20px">© 2025 VidEp. All rights reserved.</p>
         </div>
     </footer>
 
@@ -810,6 +827,5 @@ def main():
     });
     </script>
     """, unsafe_allow_html=True)
-
 if __name__ == "__main__":
     main()