Update app/templates/dashboard.html

app/templates/dashboard.html

@@ -3,9 +3,8 @@
 
 {% block extra_head %}
 {#
-    No extra head elements are strictly needed here if base.html links
-    to your main CSS (e.g., login.css, which will be expanded with dashboard styles).
-    If you prefer to keep dashboard-specific CSS separate, you'd link it here:
+    Ensure your main dashboard CSS is linked, likely in base.html now.
+    If you split it out, link it here:
     <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
 #}
 {% endblock %}
@@ -32,11 +31,11 @@
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-award"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.89"></polyline></svg>
                 <span>Resume Rankings</span>
             </a>
-            <a href="{{ url_for('auth.try_api') }}" class="nav-item">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
-                <span>Upload Resumes</span>
+            <a href="{{ url_for('auth.try_api') }}" class="nav-item"> {# Updated link for "Try It Now" #}
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play-circle"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
+                <span>Try It Now</span> {# Updated text for "Try It Now" #}
             </a>
-            <a href="{{ url_for('auth.try_api') }}" class="nav-item">
+            <a href="{{ url_for('auth.try_ap') }}" class="nav-item">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
                 <span>Settings</span>
             </a>
@@ -88,59 +87,51 @@
                 </div>
             </div>
 
-            <div class="section-card api-key-section">
+            <div class="section-card api-key-summary">
                 <h3 class="section-title">Your API Key</h3>
-                <p class="section-description">Use this key to authenticate your requests to the ResumeRanker API.</p>
-                <div class="input-group">
-                    <input type="text" class="form-input" id="apiKey" value="{{ user.api_key }}" readonly>
-                    <button class="btn primary-btn copy-btn" type="button" onclick="copyApiKey()">Copy</button>
-                </div>
-                <form method="POST" action="{{ url_for('auth.regenerate_api_key') }}" class="api-key-form">
-                    <button class="btn secondary-btn">Regenerate API Key</button>
-                </form>
-                <p class="docs-link"><a href="{{ url_for('auth.docs') }}">📘 View API Documentation</a></p>
-            </div>
-
-            <div class="section-card upload-section">
-                <h3 class="section-title">Upload Resumes</h3>
-                <p class="section-description">Drag and drop your resume files here, or click to browse.</p>
-                <div class="drop-area" id="dropArea">
-                    <input type="file" id="fileInput" multiple accept=".pdf,.doc,.docx" style="display: none;">
-                    <p>Drag & Drop files or <span class="browse-link">Click to browse</span></p>
-                    <ul id="fileList" class="uploaded-files-list"></ul>
-                </div>
-                <button class="btn primary-btn upload-now-btn" id="uploadNowBtn" style="display: none;">Upload Now</button>
+                <p class="section-description">
+                    API Key: <span class="api-key-display">{{ user.api_key[:8] }}...</span>
+                    <a href="{{ url_for('auth.api_keys') }}" class="link-small">View Full Key & Manage</a>
+                </p>
             </div>
 
-            <div class="section-card recent-uploads-section">
+            <div class="section-card recent-uploads-summary">
                 <h3 class="section-title">Recent Uploads</h3>
                 {% if recent_uploads %}
-                <div class="table-responsive">
+                <div class="table-responsive-summary">
                     <table class="data-table">
                         <thead>
                             <tr>
                                 <th>Resume Name</th>
                                 <th>Score</th>
-                                <th>Uploaded Date</th>
-                                <th>Action</th>
                             </tr>
                         </thead>
                         <tbody>
-                            {% for resume in recent_uploads %}
+                            {% for resume in recent_uploads[:3] %} {# Show only top 3 recent uploads #}
                             <tr>
                                 <td data-label="Resume Name">{{ resume.name }}</td>
                                 <td data-label="Score">{{ resume.score }}</td>
-                                <td data-label="Uploaded Date">{{ resume.uploaded_date }}</td>
-                                <td data-label="Action"><a href="{{ url_for('auth.view_result', resume_id=resume.id) }}" class="btn small-btn view-btn">View Result</a></td>
                             </tr>
                             {% endfor %}
                         </tbody>
                     </table>
                 </div>
+                <p class="section-description text-center">
+                    <a href="{{ url_for('auth.resume_rankings') }}" class="link-small">View All Rankings</a>
+                </p>
                 {% else %}
-                <p class="no-data-message">No recent uploads yet. Start by uploading a resume!</p>
+                <p class="no-data-message">No recent uploads yet. <a href="{{ url_for('auth.try_api') }}">Try it now!</a></p>
                 {% endif %}
             </div>
+
+            <div class="section-card try-it-now-summary">
+                <h3 class="section-title">Try It Now</h3>
+                <p class="section-description">Quickly test the ResumeRanker API with your own data.</p>
+                <div class="text-center">
+                    <a href="{{ url_for('auth.try_api') }}" class="btn primary-btn">Go to API Tester</a>
+                </div>
+            </div>
+
         </div>
     </div>
 </div>
@@ -179,6 +170,7 @@
     };
     // Close sidebar if click outside on mobile
     mainContentArea.onclick = (event) => {
+        // Check if sidebar is open and click is outside sidebar and not on hamburger
         if (sidebar.classList.contains('open') && !sidebar.contains(event.target) && !hamburgerDashboard.contains(event.target)) {
             sidebar.classList.remove('open');
             mainContentArea.classList.remove('shifted');
@@ -194,71 +186,8 @@
         };
     });
 
-
-    // API Key Copy function
-    function copyApiKey() {
-        const input = document.getElementById("apiKey");
-        input.select();
-        input.setSelectionRange(0, 99999); // For mobile
-        document.execCommand("copy");
-        // Add a more subtle visual feedback like a tooltip or temporary text change
-        const originalText = document.querySelector('.copy-btn').textContent;
-        document.querySelector('.copy-btn').textContent = 'Copied!';
-        setTimeout(() => {
-            document.querySelector('.copy-btn').textContent = originalText;
-        }, 1500);
-    }
-
-    // Drag and Drop / File Upload Logic
-    const dropArea = document.getElementById('dropArea');
-    const fileInput = document.getElementById('fileInput');
-    const fileList = document.getElementById('fileList');
-    const uploadNowBtn = document.getElementById('uploadNowBtn');
-    let filesToUpload = [];
-
-    dropArea.addEventListener('click', () => fileInput.click());
-
-    dropArea.addEventListener('dragover', (e) => {
-        e.preventDefault();
-        dropArea.classList.add('drag-over');
-    });
-
-    dropArea.addEventListener('dragleave', () => {
-        dropArea.classList.remove('drag-over');
-    });
-
-    dropArea.addEventListener('drop', (e) => {
-        e.preventDefault();
-        dropArea.classList.remove('drag-over');
-        handleFiles(e.dataTransfer.files);
-    });
-
-    fileInput.addEventListener('change', (e) => {
-        handleFiles(e.target.files);
-    });
-
-    function handleFiles(files) {
-        filesToUpload = [...filesToUpload, ...Array.from(files)];
-        fileList.innerHTML = ''; // Clear current list before repopulating
-        filesToUpload.forEach(file => {
-            const listItem = document.createElement('li');
-            listItem.textContent = file.name;
-            fileList.appendChild(listItem);
-        });
-        if (filesToUpload.length > 0) {
-            uploadNowBtn.style.display = 'block';
-        }
-    }
-
-    uploadNowBtn.addEventListener('click', () => {
-        // Here you would implement your actual file upload logic using Fetch API or XMLHttpRequest
-        console.log('Uploading files:', filesToUpload);
-        alert('Files are ready to be uploaded! (Implement actual upload via AJAX/Fetch)');
-        // Example: Clear after simulated upload
-        filesToUpload = [];
-        fileList.innerHTML = '';
-        uploadNowBtn.style.display = 'none';
-    });
-
+    // Remove any previous API Key Copy or Drag and Drop scripts from the main dashboard.html
+    // These will now be on their dedicated pages.
 </script>
-{% endblock %}
+{% endblock %}
+