Spaces:

missravneetkaur
/

ats2

Sleeping

App Files Files Community

missravneetkaur commited on Jan 15

Commit

0f998e1

verified ·

1 Parent(s): 00d5e5e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +66 -250

templates/index.html CHANGED Viewed

@@ -3,281 +3,97 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ATS Resume Scanner Pro</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         body { font-family: 'Inter', sans-serif; }
-        /* Animations */
-        .animate-slide-up { animation: slideUp 0.4s ease-out forwards; }
-        .animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
-        @keyframes slideUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        /* Custom Scrollbar */
-        textarea::-webkit-scrollbar { width: 8px; }
-        textarea::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; }
-        textarea::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; border: 2px solid #f8fafc; }
-        textarea::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
-        /* File Upload Zone */
-        .drop-zone {
-            background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23CBD5E1FF' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-            transition: all 0.2s ease;
-        }
-        .drop-zone:hover, .drop-zone.drag-active {
-            background-color: #f8fafc;
-            background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%234F46E5FF' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-        }
     </style>
 </head>
-<body class="bg-slate-50 min-h-screen flex flex-col text-slate-800">
-    <!-- Navbar -->
-    <nav class="bg-white/80 backdrop-blur-md border-b border-slate-200 sticky top-0 z-40">
-        <div class="max-w-5xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
-            <div class="flex items-center gap-3">
-                <div class="bg-gradient-to-tr from-indigo-600 to-violet-600 text-white p-2.5 rounded-xl shadow-lg shadow-indigo-200">
-                    <i class="fa-solid fa-layer-group"></i>
-                </div>
-                <div>
-                    <h1 class="text-xl font-bold text-slate-900 tracking-tight leading-none">ATS Scanner<span class="text-indigo-600">Pro</span></h1>
-                    <span class="text-xs text-slate-500 font-medium">Enterprise Edition</span>
-                </div>
-            </div>
-            <div class="flex items-center gap-4">
-                <a href="#" class="text-sm font-medium text-slate-600 hover:text-indigo-600 transition-colors hidden sm:block">Documentation</a>
-            </div>
-        </div>
-    </nav>
-    <!-- Main Content -->
-    <main class="flex-grow flex flex-col items-center justify-start pt-8 pb-12 px-4 sm:px-6">
-        <div class="w-full max-w-3xl animate-slide-up">
-            <!-- Hero Text -->
-            <div class="text-center mb-8">
-                <h2 class="text-3xl sm:text-4xl font-bold text-slate-900 mb-3">Optimize Your Hiring Pipeline</h2>
-                <p class="text-slate-500 text-lg max-w-xl mx-auto">Instant AI-powered resume screening to categorize candidates.</p>
-            </div>
-            <div class="bg-white rounded-2xl shadow-xl shadow-slate-200/50 overflow-hidden border border-slate-200/60">
-                <!-- Toolbar -->
-                <div class="bg-slate-50/50 px-6 py-3 border-b border-slate-200 flex items-center justify-between">
-                    <div class="flex items-center gap-2">
-                        <span class="flex h-3 w-3 relative">
-                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                            <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
-                        </span>
-                        <span class="text-xs font-semibold text-slate-500 uppercase tracking-wide">System Ready</span>
-                    </div>
-                    <button type="button" onclick="clearForm()" class="text-xs font-medium text-slate-500 hover:text-red-500 transition-colors flex items-center gap-1">
-                        <i class="fa-solid fa-trash-can"></i> Clear
-                    </button>
-                </div>
-                <div class="p-6 sm:p-8 space-y-6">
-                    <!-- File Upload Area (Client-side helper only) -->
-                    <div
-                        class="drop-zone rounded-xl p-8 text-center cursor-pointer relative group"
-                        id="dropZone"
-                        onclick="document.getElementById('fileInput').click()"
-                        ondragover="handleDragOver(event)"
-                        ondragleave="handleDragLeave(event)"
-                        ondrop="handleDrop(event)"
-                    >
-                        <input type="file" id="fileInput" class="hidden" accept=".txt" onchange="handleFileSelect(event)">
-                        <div class="transition-transform duration-200 group-hover:-translate-y-1">
-                            <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center mx-auto mb-3 text-xl">
-                                <i class="fa-solid fa-cloud-arrow-up"></i>
-                            </div>
-                            <h3 class="text-slate-900 font-medium">Click to upload text file</h3>
-                            <p class="text-slate-400 text-xs mt-1">.TXT files supported</p>
-                        </div>
-                    </div>
-                    <!-- Text Area Form -->
-                    <form method="POST" action="/" onsubmit="showLoading()">
-                        <div class="relative group">
                             <textarea
                                 id="resume"
                                 name="resume"
-                                rows="10"
-                                class="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all duration-200 resize-y text-slate-600 placeholder-slate-400 text-sm leading-relaxed font-mono"
-                                placeholder="Paste resume content here..."
-                                oninput="updateCharCount()"
                                 required
-                            >{% if request.form.resume %}{{ request.form.resume }}{% endif %}</textarea>
-                            <div class="absolute bottom-2 right-2 text-[10px] text-slate-400 bg-white/80 px-2 py-1 rounded border border-slate-100 backdrop-blur-sm">
-                                <span id="charCount">0</span> chars
                             </div>
                         </div>
-                        <div class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6">
-                            <button
-                                type="button"
-                                onclick="fillSample()"
-                                class="text-sm text-slate-500 hover:text-indigo-600 transition-colors font-medium flex items-center gap-2 px-2 py-1 rounded-md hover:bg-indigo-50"
-                            >
-                                <i class="fa-solid fa-wand-magic-sparkles"></i>
-                                Load Sample Data
-                            </button>
-                            <button
-                                type="submit"
-                                id="submitBtn"
-                                class="w-full sm:w-auto bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-xl font-semibold shadow-lg shadow-indigo-200 transform active:scale-[0.98] transition-all duration-200 flex items-center justify-center gap-2"
-                            >
-                                <span>Analyze Resume</span>
-                                <i class="fa-solid fa-arrow-right"></i>
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            <!-- Loading State -->
-            <div id="loadingState" class="hidden mt-8">
-                <div class="flex flex-col items-center justify-center p-8 bg-white rounded-xl border border-slate-100 shadow-sm animate-fade-in">
-                    <div class="relative w-16 h-16 mb-4">
-                        <div class="absolute inset-0 border-4 border-slate-100 rounded-full"></div>
-                        <div class="absolute inset-0 border-4 border-indigo-600 rounded-full border-t-transparent animate-spin"></div>
                     </div>
-                    <h3 class="text-slate-800 font-medium">Processing...</h3>
-                </div>
-            </div>
-            <!-- Analysis Result (Jinja2) -->
-            {% if prediction %}
-            <div id="resultContainer" class="mt-8 animate-slide-up">
-                <div class="bg-white rounded-xl shadow-xl shadow-slate-200/50 border border-slate-200 overflow-hidden">
-                    <!-- Result Header -->
-                    <div class="bg-slate-900 text-white p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-                        <div>
-                            <div class="text-indigo-300 text-xs font-bold uppercase tracking-wider mb-1">Prediction Result</div>
-                            <h2 class="text-2xl font-bold flex items-center gap-3">
-                                <span>{{ prediction }}</span>
-                                <i class="fa-solid fa-circle-check text-emerald-400 text-lg"></i>
-                            </h2>
                         </div>
                     </div>
-                    <!-- Result Details -->
-                    <div class="p-6 bg-slate-50 border-t border-slate-100">
-                         <p class="text-slate-600 text-sm">
-                            <i class="fa-solid fa-info-circle text-indigo-500 mr-2"></i>
-                            The resume has been categorized based on the content provided.
-                        </p>
-                    </div>
                 </div>
             </div>
-            {% endif %}
         </div>
     </main>
-    <footer class="bg-white border-t border-slate-200 mt-auto">
-        <div class="max-w-5xl mx-auto px-6 py-8 flex flex-col md:flex-row justify-between items-center gap-4">
-            <div class="text-slate-400 text-sm">
-                &copy; 2024 ATS Scanner Pro.
-            </div>
         </div>
     </footer>
-    <script>
-        // --- Core UI Logic ---
-        function updateCharCount() {
-            const val = document.getElementById('resume').value;
-            document.getElementById('charCount').textContent = val ? val.length.toLocaleString() : '0';
-        }
-        // Initialize char count if backend returned data
-        updateCharCount();
-        function clearForm() {
-            document.getElementById('resume').value = '';
-            document.getElementById('fileInput').value = '';
-            // Hide result if it exists from previous post
-            const result = document.getElementById('resultContainer');
-            if(result) result.style.display = 'none';
-            updateCharCount();
-        }
-        function showLoading() {
-            const text = document.getElementById('resume').value;
-            if(text.trim().length === 0) return; // Let HTML required handle it
-            document.getElementById('loadingState').classList.remove('hidden');
-            document.getElementById('submitBtn').disabled = true;
-            document.getElementById('submitBtn').classList.add('opacity-75', 'cursor-not-allowed');
-            // Hide previous results if visible
-            const result = document.getElementById('resultContainer');
-            if(result) result.classList.add('hidden');
-        }
-        function fillSample() {
-            const sampleText = `PROFESSIONAL SUMMARY
-Senior Data Scientist with 5 years of experience in machine learning and statistical modeling.
-TECHNICAL SKILLS
-- Languages: Python, SQL, R
-- Libraries: Pandas, NumPy, Scikit-learn, TensorFlow
-EXPERIENCE
-Lead Data Analyst | Acme Corp
-- Developed predictive models improving sales forecasting by 20%.`;
-            document.getElementById('resume').value = sampleText;
-            updateCharCount();
-        }
-        // --- File Handling (Client Side Convenience) ---
-        function handleDragOver(e) {
-            e.preventDefault();
-            e.currentTarget.classList.add('drag-active');
-        }
-        function handleDragLeave(e) {
-            e.preventDefault();
-            e.currentTarget.classList.remove('drag-active');
-        }
-        function handleDrop(e) {
-            e.preventDefault();
-            e.currentTarget.classList.remove('drag-active');
-            const files = e.dataTransfer.files;
-            if (files.length > 0) processFile(files[0]);
-        }
-        function handleFileSelect(e) {
-            if (e.target.files.length > 0) processFile(e.target.files[0]);
-        }
-        function processFile(file) {
-            const textarea = document.getElementById('resume');
-            if (file.type === 'text/plain') {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    textarea.value = e.target.result;
-                    updateCharCount();
-                };
-                reader.readAsText(file);
-            } else {
-                alert("For this demo, please upload .txt files or paste text directly.");
-            }
-        }
-    </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ATS Resume Screening AI</title>
+    <!-- Tailwind CSS for rapid styling -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts: Inter -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
     <style>
         body { font-family: 'Inter', sans-serif; }
+        /* Smooth fade in animation */
+        .fade-in { animation: fadeIn 0.5s ease-in; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
     </style>
 </head>
+<body class="bg-gradient-to-br from-indigo-50 via-blue-50 to-cyan-50 min-h-screen flex flex-col justify-between text-slate-800">
+    <!-- Main Content Wrapper -->
+    <main class="flex-grow flex items-center justify-center p-4 sm:p-6">
+        <div class="w-full max-w-2xl bg-white rounded-3xl shadow-2xl overflow-hidden border border-slate-100 transform transition-all">
+            <!-- Header Section -->
+            <div class="bg-indigo-600 p-8 text-center relative overflow-hidden">
+                <!-- Decorative background circle -->
+                <div class="absolute top-0 right-0 -mr-8 -mt-8 w-32 h-32 rounded-full bg-white opacity-10"></div>
+                <h2 class="text-3xl font-bold text-white tracking-tight relative z-10">ATS Resume Screening</h2>
+                <p class="text-indigo-100 mt-2 text-sm font-medium relative z-10 opacity-90">Powered by India AI Technology</p>
+            </div>
+            <!-- Form Section -->
+            <div class="p-6 sm:p-10 space-y-8">
+                <form method="post" class="space-y-6">
+                    <div>
+                        <label for="resume" class="block text-sm font-bold text-slate-700 mb-3 uppercase tracking-wider">
+                            Resume Details
+                        </label>
+                        <div class="relative">
                             <textarea
                                 id="resume"
                                 name="resume"
+                                rows="8"
+                                class="w-full p-4 rounded-xl border border-slate-300 bg-slate-50 focus:bg-white focus:ring-4 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all duration-300 outline-none resize-y text-slate-700 placeholder-slate-400 leading-relaxed shadow-sm"
+                                placeholder="Paste the candidate's resume text here to analyze..."
                                 required
+                            ></textarea>
+                            <div class="absolute bottom-3 right-3 text-slate-400 pointer-events-none">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                </svg>
                             </div>
                         </div>
                     </div>
+                    <button
+                        type="submit"
+                        class="w-full py-4 px-6 bg-gradient-to-r from-indigo-600 to-blue-600 hover:from-indigo-700 hover:to-blue-700 text-white font-bold rounded-xl shadow-lg hover:shadow-xl transform transition-all duration-200 hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    >
+                        Predict Job Category
+                    </button>
+                </form>
+                <!-- Result Display -->
+                {% if prediction %}
+                <div class="mt-8 fade-in">
+                    <div class="p-1 bg-gradient-to-r from-green-400 to-emerald-500 rounded-2xl shadow-md">
+                        <div class="bg-white p-6 rounded-xl flex items-center justify-between">
+                            <div>
+                                <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-1">Predicted Category</h3>
+                                <p class="text-2xl sm:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-600 to-emerald-700">
+                                    {{ prediction }}
+                                </p>
+                            </div>
+                            <div class="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center text-green-600">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                            </div>
                         </div>
                     </div>
                 </div>
+                {% endif %}
             </div>
         </div>
     </main>
+    <!-- Footer -->
+    <footer class="py-6 text-center">
+        <div class="inline-flex items-center justify-center px-4 py-1 rounded-full bg-white/50 backdrop-blur-sm border border-white/60 shadow-sm mb-4">
+            <span class="text-[10px] sm:text-xs font-bold text-slate-500 tracking-widest uppercase">
+                India AI 2026 Copyright
+            </span>
         </div>
     </footer>
 </body>
 </html>