Aherobo Ovie Victor
115 lines
5.8 KiB
HTML
115 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mini SpecsComply Pro</title>
|
|
<link rel="stylesheet" href="static/css/styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1><i class="fas fa-clipboard-check"></i> Mini SpecsComply Pro</h1>
|
|
<p>Document Compliance and Validation Tool</p>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="main-grid">
|
|
<section class="upload-section">
|
|
<h2>Upload Document</h2>
|
|
<div class="upload-container" id="upload-container">
|
|
<div class="upload-area" id="upload-area">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
<p>Drag and drop your document here</p>
|
|
<p>or</p>
|
|
<label for="file-input" class="button">Browse Files</label>
|
|
<input type="file" id="file-input" accept=".md,.txt,.json,.yaml,.html,.doc,.docx,.pdf" hidden>
|
|
</div>
|
|
<div class="file-info" id="file-info" style="display: none;">
|
|
<div class="file-details">
|
|
<i class="fas fa-file-alt file-icon"></i>
|
|
<div>
|
|
<p class="file-name" id="file-name">document.md</p>
|
|
<p class="file-size" id="file-size">0 KB</p>
|
|
</div>
|
|
</div>
|
|
<button class="button upload-button" id="upload-button">Upload for Analysis</button>
|
|
<button class="button cancel-button" id="cancel-button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="standards-section">
|
|
<h2>Compliance Standards</h2>
|
|
<div class="standards-container" id="standards-container">
|
|
<div class="standards-header">
|
|
<p>Manage the compliance standards used for document analysis</p>
|
|
<button class="button" id="upload-standard-button">
|
|
<i class="fas fa-plus"></i> Add Standard
|
|
</button>
|
|
</div>
|
|
<div class="standards-upload" id="standards-upload" style="display: none;">
|
|
<div class="upload-area" id="standard-upload-area">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
<p>Drag and drop your standard JSON file here</p>
|
|
<p>or</p>
|
|
<label for="standard-file-input" class="button">Browse Files</label>
|
|
<input type="file" id="standard-file-input" accept=".json" hidden>
|
|
</div>
|
|
<div class="file-info" id="standard-file-info" style="display: none;">
|
|
<div class="file-details">
|
|
<i class="fas fa-file-code file-icon"></i>
|
|
<div>
|
|
<p class="file-name" id="standard-file-name">standard.json</p>
|
|
<p class="file-size" id="standard-file-size">0 KB</p>
|
|
</div>
|
|
</div>
|
|
<button class="button upload-button" id="standard-upload-button">Upload Standard</button>
|
|
<button class="button cancel-button" id="standard-cancel-button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<div class="standards-list-container">
|
|
<p class="no-standards" id="no-standards">No custom standards have been added yet.</p>
|
|
<ul class="standards-list" id="standards-list">
|
|
<!-- Standards will be added here dynamically -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="documents-section">
|
|
<h2>Recent Documents</h2>
|
|
<div class="documents-container" id="documents-container">
|
|
<p class="no-documents" id="no-documents">No documents have been analyzed yet.</p>
|
|
<ul class="documents-list" id="documents-list">
|
|
<!-- Document items will be added here dynamically -->
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="report-section" id="report-section" style="display: none;">
|
|
<div class="report-header">
|
|
<h2>Compliance Report</h2>
|
|
<button class="button" id="close-report-button">Close Report</button>
|
|
</div>
|
|
<div class="report-container" id="report-container">
|
|
<!-- Report content will be loaded here -->
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="loading-overlay" id="loading-overlay" style="display: none;">
|
|
<div class="loading-spinner"></div>
|
|
<p>Analyzing document...</p>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2025 Mini SpecsComply Pro</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="static/js/script.js"></script>
|
|
</body>
|
|
</html> |