Чудово, KoloS! Ось фінальний комплект для запуску системи службових розслідувань — InvestigationApp. Він включає:
dc8e923
verified
| <html lang="uk"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>InvestigationApp Sherlock 🕵️ - Developer Console</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #77216F; | |
| --primary-hover: #E95420; | |
| --bg-light: #F8F9FA; | |
| --text-dark: #212529; | |
| --text-medium: #6C757D; | |
| --border-color: #DDE2E6; | |
| --button-hover: #F0F0F0; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', 'Ubuntu', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: var(--bg-light); | |
| min-height: 100vh; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| } | |
| .header { | |
| background: white; | |
| padding: 15px 25px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |
| } | |
| .app-title { | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| } | |
| .dev-tabs { | |
| display: flex; | |
| border-bottom: 1px solid var(--border-color); | |
| background: white; | |
| } | |
| .dev-tab { | |
| padding: 12px 20px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| color: var(--text-medium); | |
| transition: all 0.2s; | |
| border-bottom: 3px solid transparent; | |
| } | |
| .dev-tab:hover { | |
| color: var(--primary); | |
| } | |
| .dev-tab.active { | |
| color: var(--primary); | |
| border-bottom: 3px solid var(--primary-hover); | |
| } | |
| .content-area { | |
| display: flex; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .sidebar { | |
| width: 250px; | |
| background: white; | |
| border-right: 1px solid var(--border-color); | |
| padding: 15px; | |
| overflow-y: auto; | |
| } | |
| .sidebar-title { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text-medium); | |
| margin-bottom: 10px; | |
| text-transform: uppercase; | |
| } | |
| .sidebar-item { | |
| padding: 10px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| margin-bottom: 5px; | |
| transition: all 0.2s; | |
| } | |
| .sidebar-item:hover { | |
| background: var(--button-hover); | |
| } | |
| .sidebar-item.active { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .main-content { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| background: var(--bg-light); | |
| } | |
| .section { | |
| background: white; | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |
| } | |
| .section-title { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .section-title i { | |
| margin-right: 10px; | |
| } | |
| .button { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 10px 15px; | |
| border-radius: 6px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: inline-flex; | |
| align-items: center; | |
| margin-right: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .button i { | |
| margin-right: 8px; | |
| } | |
| .button:hover { | |
| background: var(--primary-hover); | |
| transform: translateY(-2px); | |
| } | |
| .button.outline { | |
| background: transparent; | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .button.outline:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .code-block { | |
| background: #f5f5f5; | |
| border-radius: 6px; | |
| padding: 15px; | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.9rem; | |
| margin: 15px 0; | |
| overflow-x: auto; | |
| } | |
| .status-bar { | |
| background: var(--primary); | |
| color: white; | |
| padding: 10px 20px; | |
| font-size: 0.8rem; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <div class="app-title">InvestigationApp Sherlock 🕵️ - Developer Console</div> | |
| <div> | |
| <button class="button outline"><i class="fas fa-sync-alt"></i> Reload</button> | |
| <button class="button"><i class="fas fa-power-off"></i> Exit</button> | |
| </div> | |
| </div> | |
| <div class="dev-tabs"> | |
| <div class="dev-tab active"><i class="fas fa-file-word"></i> Templates</div> | |
| <div class="dev-tab"><i class="fas fa-table"></i> Data Structure</div> | |
| <div class="dev-tab"><i class="fas fa-code"></i> Scripts</div> | |
| <div class="dev-tab"><i class="fas fa-plug"></i> Integrations</div> | |
| <div class="dev-tab"><i class="fas fa-cog"></i> Settings</div> | |
| </div> | |
| <div class="content-area"> | |
| <div class="sidebar"> | |
| <div class="sidebar-title">Templates</div> | |
| <div class="sidebar-item active"><i class="fas fa-file-word"></i> loss_order_template.docx</div> | |
| <div class="sidebar-item"><i class="fas fa-file-word"></i> injury_report.docx</div> | |
| <div class="sidebar-item"><i class="fas fa-file-word"></i> missing_person.docx</div> | |
| <div class="sidebar-title" style="margin-top: 20px;">Scripts</div> | |
| <div class="sidebar-item"><i class="fas fa-file-code"></i> data_importer.py</div> | |
| <div class="sidebar-item"><i class="fas fa-file-code"></i> doc_generator.py</div> | |
| <div class="sidebar-item"><i class="fas fa-file-code"></i> case_analyzer.py</div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="section"> | |
| <div class="section-title"><i class="fas fa-file-word"></i> Template Editor</div> | |
| <button class="button"><i class="fas fa-edit"></i> Edit in Word</button> | |
| <button class="button"><i class="fas fa-save"></i> Save Template</button> | |
| <button class="button outline"><i class="fas fa-plus"></i> New Template</button> | |
| <div class="code-block"> | |
| <pre>Placeholders found in template: | |
| {case_id} | |
| {loss_person_full_name} | |
| {loss_event_date} | |
| {loss_person_rank} | |
| {loss_person_position} | |
| {loss_person_unit} | |
| {adm_report_date} | |
| {adm_report_number}</pre> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title"><i class="fas fa-table"></i> Data Structure</div> | |
| <button class="button"><i class="fas fa-sync-alt"></i> Sync with Database</button> | |
| <button class="button outline"><i class="fas fa-columns"></i> Add New Field</button> | |
| <div class="code-block"> | |
| <pre>Current table structure: | |
| case_id (Text) | |
| loss_person_full_name (Text) | |
| loss_event_date (Date) | |
| loss_event_location (Text) | |
| loss_person_rank (Text) | |
| loss_person_position (Text) | |
| loss_person_unit (Text) | |
| adm_report_date (Date) | |
| adm_report_number (Text)</pre> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title"><i class="fas fa-terminal"></i> Console</div> | |
| <div class="code-block"> | |
| <pre>> Initializing developer console... | |
| > Connected to InvestigationApp database | |
| > Loaded 3 templates | |
| > Ready to accept commands</pre> | |
| </div> | |
| <input type="text" placeholder="Enter command..." style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; margin-top: 10px;"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="status-bar"> | |
| <div>InvestigationApp Sherlock 🕵️ Developer Mode</div> | |
| <div><i class="fas fa-circle" style="color: #4CAF50; font-size: 0.6rem;"></i> Connected</div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |