From c0d071408d5d92070417374b4bbbff9299efce8f Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 18 Jul 2025 19:45:39 +0530 Subject: [PATCH] Adopt optimized Data Analyzer template design for Job Posting Generator MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace external CSS dependencies with self-contained optimized styles - Convert to widget-based layout architecture matching Data Analyzer - Add consolidated JavaScript initialization with proper event handling - Implement HTML sanitization with safeSetHTML() function for security - Enhance accessibility with ARIA labels and proper form associations - Add debouncing for form interactions to improve performance - Move generate button inside form widget for better UX - Add quick agent access panel with exact Data Analyzer functionality - Position "How It Works" widget on right side of form - Harmonize design elements with consistent CSS variables and responsive layout - Maintain all existing functionality while improving code organization πŸ€– Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../job_posting_generator/detail.html | 1161 +++++++++++++++-- 1 file changed, 1059 insertions(+), 102 deletions(-) diff --git a/job_posting_generator/templates/job_posting_generator/detail.html b/job_posting_generator/templates/job_posting_generator/detail.html index 58c0fbb..0a76e1d 100644 --- a/job_posting_generator/templates/job_posting_generator/detail.html +++ b/job_posting_generator/templates/job_posting_generator/detail.html @@ -4,16 +4,704 @@ {% block title %}Job Posting Generator Agent - NetCop AI Hub{% endblock %} {% block extra_css %} - - - - + - +
+ +
- -
-

πŸ“ Job Posting Details

+

Job Posting Generator

+

Create professional job postings with AI-powered content generation

+
+
+
+
+

Your Wallet

+
πŸ’³
+
+
+
+ {{ user.wallet_balance|floatformat:2 }} AED +
+
Available Balance
+
+
+
+
+ + + + + + + {% if messages %} + {% for message in messages %} +
+ {{ message }} +
+ {% endfor %} + {% endif %} + + +
+ +
+
+

+ πŸ“ + Job Posting Details +

+
+
{% csrf_token %} @@ -198,39 +1114,114 @@ const AgentUtils = JobPostingUtils;

Additional Details (Optional)

- - +
+ + +
Select the primary language for the job posting
+
- - +
+ + +
Your company's official website URL
+
- - +
+ + +
Provide clear application instructions for candidates
+
+
+ + +
+ {% if user.is_authenticated %} + {% if user.wallet_balance >= 4.00 %} + + {% else %} +
+ Insufficient balance! You need 4.00 AED. +
+ + πŸ’° Top Up Wallet + + {% endif %} + {% else %} + + πŸ”‘ Login to Continue + + {% endif %}
- - -
+
+ + +
+
+

+ πŸ’‘ + How It Works +

+
+
+
    +
  1. πŸ“ Fill in job details and requirements
    2. +
  2. 🏒 Add company info and culture
    3. +
  3. 🎯 Choose seniority and contract type
    4. +
  4. ✨ Get professional job posting
    5. +
+ + + +
+
+
+ + +
+
+
+

+ ⏳ + Processing Status +

+
+
πŸ’Ό
Creating Job Posting...
Crafting professional job description...
- - -
-
-
βœ…
-

Generated Job Posting

-
βœ… Complete
-
- +
+
+ + +
+
+
+

+ βœ… + Generated Job Posting +

+
βœ… Complete
+
+
@@ -238,55 +1229,12 @@ const AgentUtils = JobPostingUtils;
- +
+
- -
-
-

πŸ’³ Your Wallet

- -
- {% if user.is_authenticated %} - {{ user.wallet_balance|floatformat:2 }} AED - {% else %} - 0.00 AED - {% endif %} -
-
Available Balance
- - {% if user.is_authenticated %} - {% if user.wallet_balance >= 4.00 %} - - {% else %} -
- Insufficient balance! You need 4.00 AED. -
- - πŸ’° Top Up Wallet - - {% endif %} - {% else %} - - πŸ”‘ Login to Continue - - {% endif %} -
- -
-

πŸ’‘ How it works

-
    -
  • Fill in job details and requirements
    • -
  • Add company info and benefits
    • -
  • Choose posting style and tone
    • -
  • Get professional job description
    • -
-
-
{% endblock %} @@ -328,7 +1276,9 @@ const AgentUtils = JobPostingUtils; // Reset form and UI document.getElementById('jobPostingForm').reset(); - document.getElementById('jobResults').style.display = 'none'; + const jobResults = document.getElementById('jobResults'); + jobResults.style.display = 'none'; + jobResults.classList.remove('active'); resetUIState(); AgentUtils.showToast('Form reset! Ready for another job posting.', 'success'); @@ -433,6 +1383,7 @@ const AgentUtils = JobPostingUtils; // Show results resultsContainer.style.display = 'block'; + resultsContainer.classList.add('active'); resultsContainer.scrollIntoView({ behavior: 'smooth' }); // Show success message @@ -449,12 +1400,12 @@ const AgentUtils = JobPostingUtils; let html = content; // Enhanced header formatting for job titles and company names - html = html.replace(/^# (.*$)/gm, '

$1

'); - html = html.replace(/^## (.*$)/gm, '

$1

'); - html = html.replace(/^### (.*$)/gm, '

$1

'); + html = html.replace(/^# (.*$)/gm, '

$1

'); + html = html.replace(/^## (.*$)/gm, '

$1

'); + html = html.replace(/^### (.*$)/gm, '

$1

'); // Professional bold text formatting - html = html.replace(/\*\*(.*?)\*\*/g, '$1'); + html = html.replace(/\*\*(.*?)\*\*/g, '$1'); // Professional bullet point formatting const lines = html.split('\n'); @@ -470,7 +1421,7 @@ const AgentUtils = JobPostingUtils; inList = true; } const listContent = line.substring(2).trim(); - processedLines.push(`
  • ${listContent}
    • `); + processedLines.push(`
  • ${listContent}
    • `); } else { if (inList) { processedLines.push(''); @@ -496,7 +1447,7 @@ const AgentUtils = JobPostingUtils; if (trimmed.startsWith('') || trimmed.includes('${trimmed}

    `; + return `

    ${trimmed}

    `; }) .join(''); @@ -565,7 +1516,9 @@ const AgentUtils = JobPostingUtils; // Helper function to reset UI state function resetUIState() { - document.getElementById('processingStatus').style.display = 'none'; + const processingStatus = document.getElementById('processingStatus'); + processingStatus.style.display = 'none'; + processingStatus.classList.remove('active'); const processButton = document.getElementById('processButton'); processButton.disabled = false; processButton.classList.remove('loading'); @@ -611,11 +1564,15 @@ const AgentUtils = JobPostingUtils; resultsDisplayed = false; // Show processing status with enhanced loading - document.getElementById('processingStatus').style.display = 'block'; + const processingStatus = document.getElementById('processingStatus'); + processingStatus.style.display = 'block'; + processingStatus.classList.add('active'); processButton.disabled = true; processButton.classList.add('loading'); processButton.innerHTML = '⏳ Processing...'; - document.getElementById('jobResults').style.display = 'none'; + const jobResults = document.getElementById('jobResults'); + jobResults.style.display = 'none'; + jobResults.classList.remove('active'); const steps = [ 'Analyzing job requirements and company details...',