Update app.py

app.py

@@ -56,21 +56,56 @@ def suggest_certifications(missing_skills):
 
 def generate_circular_progress(percentage):
     html_code = f"""
-    <div style='position: relative; width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center;'>
-        <div style='position: absolute; width: 180px; height: 180px; border-radius: 50%; background: conic-gradient(#00f7ff {percentage}%, #2c5364 {percentage}% 100%); animation: fillAnimation 2s ease-out;'></div>
-        <div style='position: absolute; color: white; font-weight: bold; font-size: 1.5em;'>{percentage}%</div>
-    </div>
-
     <style>
+    .circular-progress {{
+        position: relative;
+        width: 160px;
+        height: 160px;
+        border-radius: 50%;
+        background: conic-gradient(#00c6ff 0%, #003366 0%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 0 20px rgba(0, 198, 255, 0.5);
+        animation: fillAnimation 2s ease-out forwards;
+    }}
+
+    .circular-progress::after {{
+        content: "";
+        position: absolute;
+        width: 120px;
+        height: 120px;
+        background: #1b263b;
+        border-radius: 50%;
+    }}
+
+    .circular-progress span {{
+        position: absolute;
+        color: #00f7ff;
+        font-size: 1.8em;
+        font-weight: bold;
+        text-shadow: 0 0 5px rgba(0,255,255,0.8);
+    }}
+
     @keyframes fillAnimation {{
-        0% {{ background: conic-gradient(#00f7ff 0%, #2c5364 0% 100%); }}
-        100% {{ background: conic-gradient(#00f7ff {percentage}%, #2c5364 {percentage}% 100%); }}
+        from {{
+            background: conic-gradient(#00c6ff 0%, #003366 0%);
+        }}
+        to {{
+            background: conic-gradient(#00c6ff {percentage}%, #003366 {percentage}% 100%);
+        }}
     }}
     </style>
+
+    <div class='circular-progress' style='--progress: {percentage};'>
+        <span>{percentage}%</span>
+    </div>
     """
     return html_code
 
 
+
+
 def generate_skill_gap_report(user_skills, job_skills, missing_skills, match_percent):
     llm = ChatGroq(model="llama3-8b-8192", temperature=0.2)
     template = """
@@ -145,43 +180,126 @@ def process_skill_gap(resume_pdf, jd_pdfs):
 
 with gr.Blocks() as demo:
     gr.HTML("""
-    <style>
-    body {
-        background: linear-gradient(135deg, #0d1b2a, #1b263b, #415a77);
-        background-size: 300% 300%;
-        animation: gradientShift 15s ease infinite;
-        overflow-x: hidden;
-        position: relative;
-    }
-    @keyframes gradientShift {
-        0% {background-position: 0% 50%;}
-        50% {background-position: 100% 50%;}
-        100% {background-position: 0% 50%;}
-    }
-    .floating-circle {
-        position: fixed;
-        border-radius: 50%;
-        background: rgba(0,255,255,0.08);
-        box-shadow: 0 0 20px rgba(0,255,255,0.2);
-        animation: floatUp linear infinite;
-        z-index: -1;
-        filter: blur(2px);
-    }
-    @keyframes floatUp {
-        0% {transform: translateY(100vh); opacity: 0;}
-        10% {opacity: 0.2;}
-        90% {opacity: 0.2;}
-        100% {transform: translateY(-200px); opacity: 0;}
-    }
-    .floating-circle:nth-child(1){width:80px;height:80px;left:20%;animation-duration:25s;}
-    .floating-circle:nth-child(2){width:100px;height:100px;left:50%;animation-duration:30s;animation-delay:5s;}
-    .floating-circle:nth-child(3){width:60px;height:60px;left:70%;animation-duration:20s;animation-delay:10s;}
-    .floating-circle:nth-child(4){width:90px;height:90px;left:35%;animation-duration:35s;animation-delay:15s;}
-    .floating-circle:nth-child(5){width:120px;height:120px;left:80%;animation-duration:40s;animation-delay:20s;}
-    h1,h2,h3,p,label{color:#00f7ff!important;text-shadow:0 0 8px rgba(0,255,255,0.3);}
-    </style>
-    <div class='floating-circle'></div><div class='floating-circle'></div><div class='floating-circle'></div><div class='floating-circle'></div><div class='floating-circle'></div>
-    """)
+<style>
+body {
+    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
+    background-size: 300% 300%;
+    animation: gradientShift 15s ease infinite;
+    font-family: 'Segoe UI', 'Roboto', sans-serif;
+    color: #ffffff;
+    margin: 0;
+    padding: 0;
+}
+
+@keyframes gradientShift {
+    0% {background-position: 0% 50%;}
+    50% {background-position: 100% 50%;}
+    100% {background-position: 0% 50%;}
+}
+
+.floating-circle {
+    position: fixed;
+    border-radius: 50%;
+    background: rgba(0,255,255,0.07);
+    box-shadow: 0 0 30px rgba(0,255,255,0.2);
+    animation: floatUp linear infinite;
+    z-index: -1;
+    filter: blur(2px);
+}
+
+@keyframes floatUp {
+    0% {transform: translateY(100vh); opacity: 0;}
+    10% {opacity: 0.2;}
+    90% {opacity: 0.2;}
+    100% {transform: translateY(-200px); opacity: 0;}
+}
+
+.floating-circle:nth-child(1) { width: 80px; height: 80px; left: 15%; animation-duration: 25s; }
+.floating-circle:nth-child(2) { width: 100px; height: 100px; left: 50%; animation-duration: 30s; animation-delay: 5s; }
+.floating-circle:nth-child(3) { width: 60px; height: 60px; left: 70%; animation-duration: 20s; animation-delay: 10s; }
+.floating-circle:nth-child(4) { width: 90px; height: 90px; left: 35%; animation-duration: 35s; animation-delay: 15s; }
+.floating-circle:nth-child(5) { width: 120px; height: 120px; left: 80%; animation-duration: 40s; animation-delay: 20s; }
+
+input, textarea, .gr-textbox, .gr-slider, .gr-button, .gr-file, .gr-markdown, .gr-image {
+    background: rgba(255, 255, 255, 0.05) !important;
+    color: #ffffff !important;
+    border-radius: 10px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    backdrop-filter: blur(8px);
+    padding: 10px !important;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+    transition: all 0.3s ease;
+}
+
+.gr-button {
+    background: linear-gradient(135deg, #00c6ff, #0072ff) !important;
+    color: #ffffff !important;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    border: none !important;
+    box-shadow: 0 4px 15px rgba(0, 198, 255, 0.4);
+}
+
+.gr-button:hover {
+    background: linear-gradient(135deg, #0072ff, #00c6ff) !important;
+    box-shadow: 0 6px 20px rgba(0, 198, 255, 0.6);
+    transform: translateY(-2px);
+}
+
+textarea, .gr-textbox {
+    min-height: 120px !important;
+    line-height: 1.6;
+}
+
+h1, h2, h3, p, label {
+    color: #00f7ff !important;
+    text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
+}
+
+.circular-progress {
+    position: relative;
+    width: 160px;
+    height: 160px;
+    border-radius: 50%;
+    background: conic-gradient(#00c6ff 0%, #003366 0%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0 20px rgba(0, 198, 255, 0.5);
+    animation: fillAnimation 2s ease-out forwards;
+}
+
+.circular-progress::after {
+    content: "";
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    background: #1b263b;
+    border-radius: 50%;
+}
+
+.circular-progress span {
+    position: absolute;
+    color: #00f7ff;
+    font-size: 1.8em;
+    font-weight: bold;
+    text-shadow: 0 0 5px rgba(0,255,255,0.8);
+}
+
+@keyframes fillAnimation {
+    from { background: conic-gradient(#00c6ff 0%, #003366 0%); }
+    to { background: conic-gradient(#00c6ff var(--progress)%, #003366 var(--progress)% 100%); }
+}
+</style>
+
+<div class='floating-circle'></div>
+<div class='floating-circle'></div>
+<div class='floating-circle'></div>
+<div class='floating-circle'></div>
+<div class='floating-circle'></div>
+""")
+
 
     gr.Markdown("# 🧠 TALENTPATCH - Multi-JD AI Skill Gap Checker")