mirror of
https://github.com/sotam0316/drawNET.git
synced 2026-04-24 19:48:36 +09:00
leeyj
225 lines
12 KiB
HTML
225 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>drawNET Generator | Integrated</title>
|
|
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
|
|
<!-- Icons & Fonts -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
|
|
<!-- Markdown Renderer -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<link rel="stylesheet" href="/static/css/modules/header.css">
|
|
<link rel="stylesheet" href="/static/css/modules/assets.css">
|
|
<link rel="stylesheet" href="/static/css/modules/studio.css">
|
|
<link rel="stylesheet" href="/static/css/modules/analysis.css">
|
|
<link rel="stylesheet" href="/static/css/modules/layers.css">
|
|
<!-- Graph Engine & Extensions (AntV X6 Premium Stack - Local) -->
|
|
<script src="{{ url_for('static', filename='js/lib/lodash.min.js') }}"></script>
|
|
<!-- AntV X6 Core & Plugins (Local for reliability) -->
|
|
<script src="{{ url_for('static', filename='js/lib/x6.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/x6-plugin-export.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/x6-plugin-selection.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/x6-plugin-snapline.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/x6-plugin-keyboard.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/x6-plugin-clipboard.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/x6-plugin-history.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/x6-plugin-transform.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/pptxgen.bundle.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/jspdf.umd.min.js') }}"></script>
|
|
<!-- Custom Style -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/premium.css') }}">
|
|
</head>
|
|
<body>
|
|
<div class="main-content">
|
|
<!-- Sidebar -->
|
|
<aside id="sidebar" class="sidebar glass-panel animate-up">
|
|
<div class="sidebar-header">
|
|
<div class="logo-area">
|
|
<div class="logo-icon">dN</div>
|
|
<div class="logo-text">
|
|
<h1 style="font-size: 16px; font-weight: 900; line-height: 1; display: flex; align-items: center; gap: 6px;">
|
|
drawNET
|
|
<span style="font-size: 8px; background: #3b82f6; color: white; padding: 2px 5px; border-radius: 4px; vertical-align: middle; letter-spacing: 0;">ALPHA</span>
|
|
</h1>
|
|
<p style="font-size: 9px; color: #94a3b8; font-weight: 700; text-transform: uppercase;" data-i18n="app_subtitle">v1.0 알파</p>
|
|
</div>
|
|
</div>
|
|
<button id="sidebar-toggle" class="menu-toggle">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="search-container">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="asset-search" data-i18n="search_placeholder" placeholder="Search assets...">
|
|
</div>
|
|
|
|
<div class="asset-library">
|
|
<h3 data-i18n="asset_library">Asset Library</h3>
|
|
<div class="asset-grid">
|
|
<!-- Loaded dynamically from assets.json -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="footer-btns">
|
|
<button id="system-menu-btn" class="footer-btn" title="System" data-i18n="system_menu">
|
|
<i class="fas fa-th-large"></i>
|
|
</button>
|
|
<button id="settings-btn" class="footer-btn" title="Settings" data-i18n="settings">
|
|
<i class="fas fa-cog"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- System Flyout Menu -->
|
|
<div id="system-flyout" class="flyout-menu glass-panel" style="display: none;">
|
|
<!-- File Section -->
|
|
<div class="flyout-section">
|
|
<div class="section-label" data-i18n="file_menu">File</div>
|
|
<button id="new-project" class="flyout-item">
|
|
<i class="fas fa-file"></i> <span data-i18n="new_project">New Project</span>
|
|
</button>
|
|
<button id="import-json" class="flyout-item">
|
|
<i class="fas fa-file-import"></i> <span data-i18n="import_json">Load Project (.dnet)</span>
|
|
</button>
|
|
<button id="export-json" class="flyout-item export-btn" data-format="dnet">
|
|
<i class="fas fa-file-export"></i> <span data-i18n="export_json">Save Project (.dnet)</span>
|
|
</button>
|
|
<button id="export-pptx" class="flyout-item export-btn" data-format="pptx">
|
|
<i class="fas fa-file-powerpoint"></i> <span data-i18n="export_pptx">Export PPTX Report</span>
|
|
</button>
|
|
<button id="export-excel" class="flyout-item export-btn" data-format="excel">
|
|
<i class="fas fa-file-excel"></i> <span data-i18n="export_excel">Export Excel Inventory</span>
|
|
</button>
|
|
<button id="export-png" class="flyout-item export-btn" data-format="png">
|
|
<i class="fas fa-file-image"></i> <span data-i18n="export_png">Export PNG Image</span>
|
|
</button>
|
|
<button id="export-svg" class="flyout-item export-btn" data-format="svg">
|
|
<i class="fas fa-code"></i> <span data-i18n="export_svg">Export SVG Vector</span>
|
|
</button>
|
|
<button id="export-pdf" class="flyout-item export-btn" data-format="pdf">
|
|
<i class="fas fa-file-pdf"></i> <span data-i18n="export_pdf">Export PDF Document</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- Tools Section -->
|
|
<div class="flyout-section">
|
|
<div class="section-label" data-i18n="tools_menu">Tools</div>
|
|
<button id="studio-btn" class="flyout-item">
|
|
<i class="fas fa-magic"></i> <span data-i18n="object_studio">Object Studio</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-text">
|
|
<p>drawNET</p>
|
|
<small>Premium Edition</small>
|
|
</div>
|
|
<input type="file" id="import-json-input" style="display: none;" accept=".dnet,.json">
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Header -->
|
|
<header class="header glass-panel animate-up header-compact" style="animation-delay: 0.1s;">
|
|
<div class="header-info">
|
|
<h2 id="project-title">Topology_Project_v1</h2>
|
|
<p><span data-i18n="active_session">ACTIVE SESSION</span> • LOCALHOST:5000</p>
|
|
</div>
|
|
<div class="header-search">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="global-search" data-i18n="global_search_placeholder" placeholder="Search devices, IPs...">
|
|
</div>
|
|
<div class="header-status">
|
|
<button id="help-btn" class="help-circle-btn" data-i18n-title="help_btn" title="Help">
|
|
<i class="fas fa-question-circle"></i>
|
|
</button>
|
|
<div class="status-dot online"></div>
|
|
<span style="font-size: 10px; font-weight: 800; color: #10b981;" data-i18n="connected_status">CONNECTED</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Canvas Container -->
|
|
<div class="main-viewport">
|
|
<div id="graph-container"></div>
|
|
<!-- Active Layer Floating Indicator -->
|
|
<div id="active-layer-indicator" class="active-layer-badge">
|
|
<span class="badge-label" data-i18n="layer_label">LAYER:</span>
|
|
<span id="current-layer-name" class="badge-value" data-i18n="main_layer_name">Main Layer</span>
|
|
</div>
|
|
<div id="inventory-panel" class="inventory-panel glass-panel" style="display: none;">
|
|
<div class="inventory-header">
|
|
<i class="fas fa-boxes"></i> <span data-i18n="inventory">Inventory</span>
|
|
</div>
|
|
<div id="inventory-list" class="inventory-list">
|
|
<!-- Dynamic -->
|
|
</div>
|
|
</div>
|
|
<div id="layer-panel" class="layer-panel glass-panel" style="display: none;">
|
|
<!-- Dynamic Content -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Panel (Sliding from right) -->
|
|
<div id="settings-panel" class="settings-panel glass-panel">
|
|
<div class="settings-header">
|
|
<div class="header-title">
|
|
<i class="fas fa-cog"></i>
|
|
<span data-i18n="settings">Settings</span>
|
|
</div>
|
|
<button id="close-settings-btn" class="close-btn"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
|
|
<div class="settings-container">
|
|
<div class="settings-sidebar">
|
|
<div class="settings-tab active" data-tab="general">
|
|
<i class="fas fa-sliders-h"></i> <span data-i18n="general">General</span>
|
|
</div>
|
|
<div class="settings-tab" data-tab="workspace">
|
|
<i class="fas fa-th"></i> <span data-i18n="workspace">Workspace</span>
|
|
</div>
|
|
<div class="settings-tab" data-tab="engine">
|
|
<i class="fas fa-microchip"></i> <span data-i18n="engine">Engine</span>
|
|
</div>
|
|
<div class="settings-tab" data-tab="license">
|
|
<i class="fas fa-certificate"></i> <span data-i18n="license">License</span>
|
|
</div>
|
|
<div class="settings-tab" data-tab="about">
|
|
<i class="fas fa-info-circle"></i> <span data-i18n="about">About</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="settings-body" class="settings-body">
|
|
<!-- Tab content will be rendered here via JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<div id="modal-container"></div>
|
|
|
|
<!-- Properties Sidebar -->
|
|
<div id="properties-sidebar">
|
|
<div class="sidebar-header">
|
|
<h3 data-i18n="properties_title">Properties</h3>
|
|
<span class="close-sidebar">×</span>
|
|
</div>
|
|
<div class="sidebar-content">
|
|
<!-- Dynamic Content -->
|
|
<div style="color: #64748b; text-align: center; margin-top: 40px;" data-i18n="select_object_to_edit">Select an object to edit properties</div>
|
|
</div>
|
|
<div class="sidebar-footer">
|
|
<button class="btn-apply" id="sidebar-apply" data-i18n="apply_btn">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App Logic with cache buster -->
|
|
<script type="module" src="{{ url_for('static', filename='js/app.js') }}?v=1710712500"></script>
|
|
</body>
|
|
</html>
|