Initial commit: drawNET Alpha v1.0 - Professional Topology Designer with Full i18n and Performance Optimizations

2026-04-24 19:48:36 +09:00 · 2026-03-22 22:37:24 +09:00
commit 5cea93e317
192 changed files with 14449 additions and 0 deletions
@@ -0,0 +1,140 @@
+:root {
+    --bg-color: #f8fafc;
+    --bg-rgb: 248, 250, 252;
+    --text-color: #0f172a;
+    --accent-color: #3b82f6;
+    --panel-bg: rgba(255, 255, 255, 0.7);
+    --panel-border: rgba(255, 255, 255, 0.5);
+    --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
+    --sub-text: #64748b;
+    --canvas-bg: #ffffff;
+    --grid-color: rgba(0, 0, 0, 0.05);
+    --grid-size: 20px;
+    --item-bg: rgba(255, 255, 255, 0.4);
+    --item-hover-bg: #e2e8f0;
+}
+
+[data-theme="dark"] {
+    --bg-color: #020617;
+    --bg-rgb: 2, 6, 23;
+    --text-color: #f8fafc;
+    --accent-color: #3b82f6;
+    --panel-bg: rgba(15, 23, 42, 0.8);
+    --panel-border: rgba(255, 255, 255, 0.1);
+    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+    --sub-text: #cbd5e1;
+    --canvas-bg: #1e293b;
+    --grid-color: rgba(255, 255, 255, 0.1);
+    --grid-size: 20px;
+    --item-bg: rgba(255, 255, 255, 0.05);
+    --item-hover-bg: rgba(255, 255, 255, 0.1);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', -apple-system, sans-serif;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    height: 100vh;
+    overflow: hidden;
+}
+
+.glass-panel {
+    background: var(--panel-bg);
+    backdrop-filter: blur(12px) saturate(180%);
+    border: 1px solid var(--panel-border);
+    box-shadow: var(--shadow);
+    border-radius: 32px;
+}
+
+/* Markdown Rendering Styles */
+.markdown-body {
+    font-size: 14px;
+    line-height: 1.7;
+    color: var(--text-color);
+}
+
+.markdown-body h1, .markdown-body h2, .markdown-body h3 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 800;
+}
+
+.markdown-body h1 { font-size: 1.8em; }
+.markdown-body h2 { 
+    font-size: 1.4em; 
+    border-bottom: 1px solid var(--panel-border);
+    padding-bottom: 8px;
+    color: var(--accent-color);
+}
+.markdown-body h3 { font-size: 1.2em; }
+
+.markdown-body p { margin-bottom: 16px; color: var(--sub-text); }
+
+.markdown-body ul, .markdown-body ol {
+    padding-left: 20px;
+    margin-bottom: 16px;
+}
+
+.markdown-body li { margin-bottom: 8px; }
+
+.markdown-body blockquote {
+    padding: 12px 20px;
+    margin: 16px 0;
+    background: var(--item-bg);
+    border-left: 4px solid var(--accent-color);
+    border-radius: 4px;
+    font-style: italic;
+    color: var(--sub-text);
+}
+
+.markdown-body code {
+    background: var(--item-bg);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-size: 0.9em;
+    color: var(--accent-color);
+}
+
+.markdown-body pre {
+    background: var(--item-bg);
+    padding: 16px;
+    border-radius: 12px;
+    overflow-x: auto;
+    margin-bottom: 16px;
+}
+
+.markdown-body table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 24px;
+    border: 1px solid var(--panel-border);
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.markdown-body th, .markdown-body td {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--panel-border);
+    text-align: left;
+}
+
+.markdown-body th {
+    background: var(--item-bg);
+    font-weight: 800;
+    color: var(--accent-color);
+}
+
+.markdown-body img {
+    max-width: 100%;
+    border-radius: 16px;
+    border: 1px solid var(--panel-border);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    margin: 16px 0;
+}