229 lines
12 KiB
HTML
229 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IT Site Survey AI</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Header -->
|
|
<header class="app-header">
|
|
<div class="logo">
|
|
<img src="/static/logo.png" alt="BeawIT Logo" style="height: 40px; margin-right: 10px;">
|
|
<h1>Network Site Survey AI</h1>
|
|
</div>
|
|
<nav class="tab-nav">
|
|
<button class="tab-btn active" data-tab="surveys" id="nav-surveys">Surveys List</button>
|
|
<button class="tab-btn" data-tab="create" id="nav-create">Create Survey</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="app-main">
|
|
<!-- Surveys List Tab -->
|
|
<section class="tab-content active" id="tab-surveys">
|
|
<div class="section-header">
|
|
<h2>Site Surveys</h2>
|
|
<button class="btn btn-danger" id="btn-clear-all">Clear All</button>
|
|
</div>
|
|
<div class="surveys-grid" id="surveys-list">
|
|
<div class="empty-state">
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M9 12h.01M15 12h.01M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10z"/>
|
|
</svg>
|
|
<p>No surveys yet. Create your first survey!</p>
|
|
<button class="btn btn-primary" onclick="switchTab('create')">Create Survey</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Create Survey Tab -->
|
|
<section class="tab-content" id="tab-create">
|
|
<form id="survey-form" class="survey-form">
|
|
<!-- Metadata Section -->
|
|
<div class="form-section">
|
|
<h3>Survey Information</h3>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="survey-name">Survey Name *</label>
|
|
<input type="text" id="survey-name" name="name" required placeholder="e.g., Q3 Infrastructure Assessment">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="survey-client">Client Name *</label>
|
|
<input type="text" id="survey-client" name="client" required placeholder="e.g., Acme Corporation">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="survey-site">Site Location *</label>
|
|
<input type="text" id="survey-site" name="site" required placeholder="e.g., Main HQ - San Francisco">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="survey-model">AI Model</label>
|
|
<select id="survey-model" name="model">
|
|
<option value="">Loading models...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="survey-description">Description</label>
|
|
<textarea id="survey-description" name="description" rows="3" placeholder="Brief description of the survey purpose..."></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" id="btn-load-sample">Load Sample Data</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Questions Section -->
|
|
<div class="form-section">
|
|
<h3>Survey Questions <span class="question-count" id="question-count">(0/35)</span></h3>
|
|
<div class="questions-container" id="questions-container">
|
|
<!-- Questions loaded dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Photos Section -->
|
|
<div class="form-section">
|
|
<h3>Site Photos</h3>
|
|
<div class="photo-upload-area" id="photo-upload-area">
|
|
<input type="file" id="photo-input" accept="image/*" multiple hidden>
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
</svg>
|
|
<p>Drag and drop photos here or click to browse</p>
|
|
<button type="button" class="btn btn-secondary" id="btn-browse-photos">Browse Photos</button>
|
|
</div>
|
|
<div class="photo-preview-grid" id="photo-preview-grid"></div>
|
|
</div>
|
|
|
|
<!-- Submit Section -->
|
|
<div class="form-section form-submit-section">
|
|
<button type="submit" class="btn btn-primary btn-large" id="btn-submit-survey">Create Survey</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Analysis Tab (shown when viewing a survey) -->
|
|
<section class="tab-content" id="tab-analysis">
|
|
<div class="analysis-header">
|
|
<div class="analysis-title">
|
|
<button class="btn btn-secondary btn-back" id="btn-back-to-surveys">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
|
</svg>
|
|
Back
|
|
</button>
|
|
<h2 id="analysis-survey-name">Survey Analysis</h2>
|
|
</div>
|
|
<div class="analysis-controls">
|
|
<select id="analysis-model" class="model-select">
|
|
<option value="">Loading models...</option>
|
|
</select>
|
|
<button class="btn btn-primary" id="btn-generate-analysis">Generate Recommendations</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analysis-layout">
|
|
<!-- Survey Summary Panel -->
|
|
<div class="analysis-sidebar">
|
|
<div class="panel">
|
|
<h4>Survey Details</h4>
|
|
<div class="survey-meta-list" id="analysis-survey-meta">
|
|
<!-- Populated dynamically -->
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<h4>Questions Summary</h4>
|
|
<div class="question-summary" id="analysis-question-summary">
|
|
<!-- Populated dynamically -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analysis Output Panel -->
|
|
<div class="analysis-main">
|
|
<div class="panel analysis-output-panel">
|
|
<div class="panel-header">
|
|
<h4>AI Analysis</h4>
|
|
<div class="export-buttons" id="export-buttons" style="display: none;">
|
|
<button class="btn btn-secondary btn-small" id="btn-export-text">Export Text</button>
|
|
<button class="btn btn-secondary btn-small" id="btn-export-pdf">Export PDF</button>
|
|
<button class="btn btn-secondary btn-small" id="btn-email">Email</button>
|
|
</div>
|
|
</div>
|
|
<div class="analysis-output" id="analysis-output">
|
|
<div class="analysis-placeholder">
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
|
</svg>
|
|
<p>Click "Generate Recommendations" to get AI-powered insights</p>
|
|
</div>
|
|
</div>
|
|
<div class="analysis-loading" id="analysis-loading" style="display: none;">
|
|
<div class="spinner"></div>
|
|
<p>Analyzing survey data...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Interface -->
|
|
<div class="panel chat-panel">
|
|
<div class="panel-header">
|
|
<h4>Ask AI About This Survey</h4>
|
|
</div>
|
|
<div class="chat-messages" id="chat-messages">
|
|
<div class="chat-message system">
|
|
<p>Ask me anything about this survey - budget planning, security recommendations, timeline suggestions, or technical details!</p>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-area">
|
|
<input type="text" id="chat-input" placeholder="Type your question..." disabled>
|
|
<button class="btn btn-primary" id="btn-send-chat" disabled>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div class="modal" id="delete-modal" style="display: none;">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<h3>Delete Survey?</h3>
|
|
<p>Are you sure you want to delete this survey? This action cannot be undone.</p>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" id="btn-cancel-delete">Cancel</button>
|
|
<button class="btn btn-danger" id="btn-confirm-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clear All Confirmation Modal -->
|
|
<div class="modal" id="clear-all-modal" style="display: none;">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<h3>Clear All Surveys?</h3>
|
|
<p>Are you sure you want to delete all surveys? This action cannot be undone.</p>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" id="btn-cancel-clear-all">Cancel</button>
|
|
<button class="btn btn-danger" id="btn-confirm-clear-all">Clear All</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification -->
|
|
<div class="toast" id="toast" style="display: none;">
|
|
<span id="toast-message"></span>
|
|
</div>
|
|
|
|
<script src="/static/app.js?v=5"></script>
|
|
</body>
|
|
</html>
|