1 files changed, 466 insertions, 0 deletions
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..96531df
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,466 @@
+:root {
+  /* Fluent 2 Color Tokens */
+  --color-neutral-background: #f7f7f7;
+  --color-neutral-background-selected: #e6e6e6;
+  --color-neutral-foreground: #242424;
+  --color-neutral-foreground-subtle: #616161;
+  --color-brand-background: #0078d4;
+  --color-brand-background-hover: #106ebe;
+  --color-brand-foreground: #0078d4;
+  --color-brand-foreground-hover: #004578;
+  --color-status-success: #107c10;
+  --color-status-warning: #d83b01;
+  --color-status-error: #d13438;
+  --color-status-info: #0078d4;
+
+  /* Fluent 2 Shadows */
+  --shadow-2: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
+  --shadow-4: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
+  --shadow-8: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
+
+  /* Fluent 2 Typography */
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-s: 8px;
+  --spacing-m: 12px;
+  --spacing-l: 16px;
+  --spacing-xl: 20px;
+  --spacing-xxl: 24px;
+
+  /* Border Radius */
+  --border-radius-medium: 4px;
+  --border-radius-large: 8px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
+  margin: 0;
+  background-color: var(--color-neutral-background);
+  color: var(--color-neutral-foreground);
+  line-height: 1.4;
+}
+
+/* Header */
+header {
+  background: white;
+  padding: var(--spacing-l) var(--spacing-xl);
+  border-bottom: 1px solid #e1e1e1;
+  box-shadow: var(--shadow-2);
+}
+
+header h2 {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-weight: var(--font-weight-semibold);
+  font-size: 24px;
+  color: var(--color-neutral-foreground);
+}
+
+.subtitle {
+  font-size: 14px;
+  color: var(--color-neutral-foreground-subtle);
+  margin: 0;
+}
+
+/* Main Layout */
+main {
+  display: flex;
+  min-height: calc(100vh - 80px);
+}
+
+/* Navigation */
+nav {
+  width: 260px;
+  background: white;
+  border-right: 1px solid #e1e1e1;
+  padding: var(--spacing-l);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.nav-button {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  padding: var(--spacing-m) var(--spacing-l);
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-medium);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: var(--font-weight-regular);
+  color: var(--color-neutral-foreground);
+  cursor: pointer;
+  transition: all 0.1s ease;
+  text-align: left;
+  text-decoration: none;
+}
+
+.nav-button:hover {
+  background-color: var(--color-neutral-background);
+  border-color: #e1e1e1;
+}
+
+.nav-button.active {
+  background-color: var(--color-brand-background);
+  color: white;
+  font-weight: var(--font-weight-semibold);
+}
+
+.nav-button.accent {
+  background-color: var(--color-brand-background);
+  color: white;
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--spacing-xl);
+}
+
+.nav-button.accent:hover {
+  background-color: var(--color-brand-background-hover);
+}
+
+.nav-button.warning {
+  background-color: var(--color-status-warning);
+  color: white;
+}
+
+.nav-button.warning:hover {
+  background-color: #c13501;
+}
+
+/* Content Area */
+section {
+  flex: 1;
+  padding: var(--spacing-xl);
+  overflow: auto;
+  display: none;
+}
+
+section.active {
+  display: block;
+}
+
+/* Cards/Panels */
+.card {
+  background: white;
+  border-radius: var(--border-radius-large);
+  padding: var(--spacing-xl);
+  margin-bottom: var(--spacing-l);
+  box-shadow: var(--shadow-2);
+  border: 1px solid #e1e1e1;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--spacing-l);
+}
+
+.card-title {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  font-size: 20px;
+  color: var(--color-neutral-foreground);
+}
+
+.card-description {
+  margin: var(--spacing-xs) 0 0 0;
+  font-size: 14px;
+  color: var(--color-neutral-foreground-subtle);
+}
+
+/* Buttons */
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  padding: var(--spacing-m) var(--spacing-l);
+  background: var(--color-brand-background);
+  color: white;
+  border: none;
+  border-radius: var(--border-radius-medium);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  text-decoration: none;
+}
+
+.button:hover {
+  background-color: var(--color-brand-background-hover);
+}
+
+.button.secondary {
+  background: transparent;
+  color: var(--color-brand-foreground);
+  border: 1px solid var(--color-brand-foreground);
+}
+
+.button.secondary:hover {
+  background-color: var(--color-neutral-background);
+}
+
+.button.warning {
+  background: var(--color-status-warning);
+}
+
+.button.warning:hover {
+  background-color: #c13501;
+}
+
+/* Interface Grid */
+.interface-grid {
+  display: grid;
+  gap: var(--spacing-l);
+  margin-top: var(--spacing-l);
+}
+
+.interface-card {
+  background: white;
+  border-radius: var(--border-radius-large);
+  padding: var(--spacing-xl);
+  box-shadow: var(--shadow-2);
+  border: 1px solid #e1e1e1;
+  border-left: 4px solid var(--color-brand-background);
+}
+
+.interface-card.wan {
+  border-left-color: var(--color-status-warning);
+}
+
+.interface-card.lan {
+  border-left-color: var(--color-status-success);
+}
+
+.interface-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--spacing-l);
+}
+
+.interface-name {
+  font-weight: var(--font-weight-semibold);
+  font-size: 18px;
+  margin: 0;
+}
+
+.interface-type {
+  display: inline-block;
+  padding: var(--spacing-xs) var(--spacing-s);
+  background: var(--color-neutral-background);
+  border-radius: var(--border-radius-medium);
+  font-size: 12px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-neutral-foreground-subtle);
+  margin-left: var(--spacing-s);
+}
+
+.interface-details {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--spacing-l);
+}
+
+.detail-group h4 {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: 14px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-neutral-foreground);
+}
+
+.detail-value {
+  font-size: 14px;
+  color: var(--color-neutral-foreground-subtle);
+  line-height: 1.5;
+}
+
+.state-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: var(--font-weight-semibold);
+}
+
+.state-up {
+  background: #dff6dd;
+  color: var(--color-status-success);
+}
+
+.state-down {
+  background: #f4d5d5;
+  color: var(--color-status-error);
+}
+
+/* Forms */
+.form-group {
+  margin-bottom: var(--spacing-l);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--spacing-s);
+  font-weight: var(--font-weight-semibold);
+  font-size: 14px;
+  color: var(--color-neutral-foreground);
+}
+
+.select {
+  width: 100%;
+  padding: var(--spacing-m);
+  border: 1px solid #e1e1e1;
+  border-radius: var(--border-radius-medium);
+  font-family: inherit;
+  font-size: 14px;
+  background: white;
+  transition: border-color 0.1s ease;
+}
+
+.select:focus {
+  outline: none;
+  border-color: var(--color-brand-background);
+}
+
+.textarea {
+  width: 100%;
+  height: 360px;
+  padding: var(--spacing-m);
+  border: 1px solid #e1e1e1;
+  border-radius: var(--border-radius-medium);
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  resize: vertical;
+  background: white;
+  transition: border-color 0.1s ease;
+}
+
+.textarea:focus {
+  outline: none;
+  border-color: var(--color-brand-background);
+}
+
+.checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  margin: var(--spacing-l) 0;
+}
+
+.checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+}
+
+.checkbox-label {
+  font-size: 14px;
+  color: var(--color-neutral-foreground);
+  margin: 0;
+}
+
+/* Validation Results */
+.validation-result {
+  padding: var(--spacing-m);
+  border-radius: var(--border-radius-medium);
+  font-size: 14px;
+  margin-top: var(--spacing-m);
+}
+
+.validation-success {
+  background: #dff6dd;
+  color: var(--color-status-success);
+  border: 1px solid #107c10;
+}
+
+.validation-error {
+  background: #f4d5d5;
+  color: var(--color-status-error);
+  border: 1px solid var(--color-status-error);
+}
+
+/* Logs */
+.logs-container {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: var(--spacing-l);
+  border-radius: var(--border-radius-medium);
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  overflow: auto;
+  max-height: 600px;
+  white-space: pre-wrap;
+}
+
+/* Command Results */
+.command-result {
+  padding: var(--spacing-m);
+  border-radius: var(--border-radius-medium);
+  background: var(--color-neutral-background);
+  font-size: 14px;
+  margin-top: var(--spacing-m);
+}
+
+/* Tips Section */
+.tips-section {
+  margin-top: auto;
+  padding-top: var(--spacing-xl);
+  border-top: 1px solid #e1e1e1;
+}
+
+.tips-title {
+  font-weight: var(--font-weight-semibold);
+  font-size: 14px;
+  margin-bottom: var(--spacing-s);
+  color: var(--color-neutral-foreground);
+}
+
+.tips-list {
+  margin: 0;
+  padding-left: var(--spacing-l);
+  font-size: 13px;
+  color: var(--color-neutral-foreground-subtle);
+  line-height: 1.5;
+}
+
+.tips-list li {
+  margin-bottom: var(--spacing-xs);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  main {
+    flex-direction: column;
+  }
+
+  nav {
+    width: 100%;
+    flex-direction: row;
+    overflow-x: auto;
+    padding: var(--spacing-m);
+  }
+
+  .nav-button {
+    white-space: nowrap;
+  }
+
+  .interface-details {
+    grid-template-columns: 1fr;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: var(--spacing-m);
+  }
+}