/* Reset and base styles */
.legal-ai-container * {
box-sizing: border-box;
}
.legal-ai-container {
background-color: #f9fafb !important;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 24px 0;
margin-bottom: 32px;
}
.card-shadow {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.legal-section {
border-left: 4px solid #3b82f6;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary {
background-color: #3b82f6;
color: white;
}
.btn-primary:hover {
background-color: #2563eb;
}
.btn-success {
background-color: #10b981;
color: white;
}
.btn-success:hover {
background-color: #059669;
}
.btn-purple {
background-color: #8b5cf6;
color: white;
}
.btn-purple:hover {
background-color: #7c3aed;
}
.form-input {
width: 100%;
padding: 12px 16px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
}
.form-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.grid-3 {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
}
@media (max-width: 768px) {
.grid-2, .grid-3 {
grid-template-columns: 1fr;
}
}
.bg-white {
background-color: white;
border-radius: 12px;
padding: 24px;
}
.space-y-6 > * + * { margin-top: 24px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-3 > * + * { margin-top: 12px; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }
.text-lg { font-size: 18px; font-weight: 600; }
.text-xl { font-size: 20px; font-weight: 600; }
.text-2xl { font-size: 24px; font-weight: bold; }
.text-gray-500 { color: #6b7280; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-blue-600 { color: #2563eb; }
.text-red-500 { color: #ef4444; }
.text-green-800 { color: #166534; }
.text-blue-900 { color: #1e3a8a; }
.text-blue-700 { color: #1d4ed8; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.hidden { display: none !important; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mt-4 { margin-top: 16px; }
.pt-6 { padding-top: 24px; }
.border-t { border-top: 1px solid #e5e7eb; padding-top: 24px; margin-top: 24px; }
.sticky { position: sticky; top: 24px; }
.bg-green-50 { background-color: #f0fdf4; }
.border-green-200 { border: 1px solid #bbf7d0; }
.text-center { text-align: center; }
.py-8 { padding: 32px 0; }
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.modal-content {
background: white;
border-radius: 12px;
max-width: 800px;
max-height: 90vh;
overflow: hidden;
}
.modal-header {
padding: 24px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-body {
padding: 24px;
max-height: 60vh;
overflow-y: auto;
font-family: monospace;
font-size: 12px;
background: #f9fafb;
white-space: pre-line;
}
.modal-footer {
padding: 24px;
border-top: 1px solid #e5e7eb;
background: #f9fafb;
display: flex;
justify-content: end;
gap: 16px;
}
.icon {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.icon-lg {
width: 48px;
height: 48px;
}
(function() {
const API_ENDPOINT = ‘https://yashrao.app.n8n.cloud/webhook-test/analyze-case-facts’;
let currentAnalysis = null;
// Form submission handler
document.getElementById(‘legalForm’).addEventListener(‘submit’, async function(e) {
e.preventDefault();
// Show loading state
document.getElementById(‘statusDisplay’).classList.add(‘hidden’);
document.getElementById(‘resultsDisplay’).classList.add(‘hidden’);
document.getElementById(‘loadingState’).classList.remove(‘hidden’);
// Collect form data
const formData = {
case_facts: document.getElementById(‘caseFacts’).value,
notice_type: document.getElementById(‘noticeType’).value,
monetary_value: parseInt(document.getElementById(‘monetaryValue’).value) || 0,
client_details: {
name: document.getElementById(‘clientName’).value,
address: document.getElementById(‘clientAddress’).value,
lawyer_name: document.getElementById(‘lawyerName’).value,
lawyer_designation: document.getElementById(‘lawyerDesignation’).value,
law_firm: document.getElementById(‘lawFirm’).value,
lawyer_address: document.getElementById(‘lawyerAddress’).value,
lawyer_phone: document.getElementById(‘lawyerPhone’).value,
lawyer_email: document.getElementById(‘lawyerEmail’).value,
bar_registration: document.getElementById(‘barRegistration’).value,
place: document.getElementById(‘place’).value
},
opponent_details: {
name: document.getElementById(‘opponentName’).value,
address: document.getElementById(‘opponentAddress’).value
},
case_details: {
agreement_date: formatDate(document.getElementById(‘agreementDate’).value),
payment_date: formatDate(document.getElementById(‘paymentDate’).value),
property_description: document.getElementById(‘propertyDescription’).value,
contract_subject: document.getElementById(‘propertyDescription’).value
}
};
try {
const response = await fetch(API_ENDPOINT, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify(formData)
});
const result = await response.json();
if (result.success) {
currentAnalysis = result;
displayResults(result);
} else {
showError(‘Failed to generate legal notice: ‘ + (result.error || ‘Unknown error’));
}
} catch (error) {
showError(‘Network error: ‘ + error.message);
} finally {
document.getElementById(‘loadingState’).classList.add(‘hidden’);
}
});
function displayResults(result) {
const analysis = result.case_analysis || result.document?.analysis_integration;
const document = result.document;
// Display legal sections
const sectionsContainer = document.getElementById(‘legalSections’);
sectionsContainer.innerHTML = ”;
if (analysis && analysis.primary_sections) {
analysis.primary_sections.forEach(section => {
const sectionDiv = document.createElement(‘div’);
sectionDiv.className = ‘legal-section’;
sectionDiv.style.cssText = ‘background-color: #eff6ff; padding: 12px; border-radius: 8px;’;
sectionDiv.innerHTML = `
Legal AI Assistant
Professional Document Drafting Platform
Case Information
Case Facts & Description *
Provide detailed facts for better legal analysis
Notice Type
Property Transfer/Sale
Contract Breach
Monetary Value (₹)
Client Details
Lawyer Details
Opponent Details
Case Specific Details
Generate Legal Notice
AI Analysis
Complete the form and click “Generate Legal Notice” to see AI analysis and document preview
AI is analyzing your case…
This may take a few seconds
Document Quality
Completeness:
Legal Coverage:
Confidence:
Preview Document
Download Notice
Section ${section.section}
${section.act}
${section.reasoning}
`;
sectionsContainer.appendChild(sectionDiv);
});
}
// Display document quality
if (document) {
document.getElementById(‘completeness’).textContent = document.document_quality?.completeness + ‘%’ || ‘N/A’;
document.getElementById(‘legalCoverage’).textContent = document.document_quality?.legal_coverage ? ‘Good’ : ‘Basic’;
document.getElementById(‘confidence’).textContent = Math.round((analysis?.confidence_score || 0.8) * 100) + ‘%’;
}
// Show results
document.getElementById(‘resultsDisplay’).classList.remove(‘hidden’);
}
function showError(message) {
document.getElementById(‘statusDisplay’).innerHTML = `
${message}
Please check your input and try again
`; document.getElementById(‘statusDisplay’).classList.remove(‘hidden’); } function formatDate(dateString) { if (!dateString) return ”; const date = new Date(dateString); return date.toLocaleDateString(‘en-IN’); } // Preview modal handlers document.getElementById(‘previewBtn’).addEventListener(‘click’, function() { if (currentAnalysis && currentAnalysis.document) { document.getElementById(‘documentPreview’).textContent = currentAnalysis.document.formatted_notice; document.getElementById(‘previewModal’).classList.remove(‘hidden’); } }); document.getElementById(‘closePreview’).addEventListener(‘click’, function() { document.getElementById(‘previewModal’).classList.add(‘hidden’); }); document.getElementById(‘closePreview2’).addEventListener(‘click’, function() { document.getElementById(‘previewModal’).classList.add(‘hidden’); }); document.getElementById(‘copyDocument’).addEventListener(‘click’, function() { const text = document.getElementById(‘documentPreview’).textContent; navigator.clipboard.writeText(text).then(function() { alert(‘Document copied to clipboard!’); }); }); // Download handler document.getElementById(‘downloadBtn’).addEventListener(‘click’, function() { if (currentAnalysis && currentAnalysis.document) { const element = document.createElement(‘a’); const file = new Blob([currentAnalysis.document.formatted_notice], {type: ‘text/plain’}); element.href = URL.createObjectURL(file); element.download = `Legal_Notice_${Date.now()}.txt`; document.body.appendChild(element); element.click(); document.body.removeChild(element); } }); })();