diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9a29cbc --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +CLAUDE.md +.claude/ diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md new file mode 100644 index 0000000..99e7c13 --- /dev/null +++ b/STYLEGUIDE.md @@ -0,0 +1,90 @@ +# GNexus Design System + +All pages in this project follow these rules. When redesigning or creating any page, strictly adhere to them. + +## Typography + +- **Font**: `JetBrains Mono` (Google Fonts), monospace +- **Import**: `@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');` +- **Base size**: 16px (browser default); use `rem` for all font sizes +- **Letter-spacing**: `0.04em` on headings, `0.02em` on labels + +## Color Palette (Tokyo Night) + +| Role | Hex | +|---|---| +| Background | `#1a1b26` | +| Background dark | `#16161e` | +| Background card | `#1f2335` | +| Border default | `#292e42` | +| Foreground | `#c0caf5` | +| Foreground dim | `#a9b1d6` | +| Comment / muted | `#565f89` | +| Accent blue | `#7aa2f7` | +| Accent cyan | `#7dcfff` | +| Accent purple | `#bb9af7` | +| Success / low usage | `#9ece6a` | +| Warning / mid usage | `#e0af68` | +| Error / high usage | `#f7768e` | + +## Component Patterns + +**Cards / interactive tiles** +```css +background-color: #1f2335; +border: 1px solid #292e42; +border-radius: 8px; +transition: border-color 0.2s, box-shadow 0.2s; +/* on hover: */ +border-color: #7aa2f7; +box-shadow: 0 0 16px #7aa2f733; +``` + +**Primary text / headings** +```css +color: #7aa2f7; +letter-spacing: 0.04em; +``` + +**Muted / secondary text** +```css +color: #565f89; +font-size: 0.875rem; +``` + +**Destructive / warning text** +```css +color: #f7768e; +``` + +**Glow on key visuals (logo, icons)** +```css +filter: drop-shadow(0 0 18px #7aa2f755); +``` + +**Tables** +```css +border-collapse: collapse; +border-color: #292e42; +/* th: */ color: #7aa2f7; font-weight: 400; +/* td: */ color: #c0caf5; +/* cell padding: */ 6px 10px; +``` + +**Buttons / floating controls** +```css +background-color: #1f2335; +border: 1px solid #292e42; +border-radius: 50%; +fill: #565f89; +/* hover: */ +border-color: #7aa2f7; +fill: #7aa2f7; +box-shadow: 0 0 12px #7aa2f744; +``` + +## Tone & Voice + +- Code/terminal aesthetic throughout — lowercase labels, `//` prefixes on section titles, minimal punctuation +- Status values use color-coding: green < 60%, yellow 60–85%, red > 85% +- No decorative imagery beyond logo and service icons diff --git a/index.php b/index.php index bfd3abd..18d4a91 100755 --- a/index.php +++ b/index.php @@ -6,25 +6,27 @@ GNexus Welcome page @@ -200,14 +241,7 @@ - -
- Anicusi -
Anicusi
-
- - - +
Git Bucket
Git Bucket
@@ -235,13 +269,13 @@
- + diff --git a/main.js b/main.js index a4056c4..2f2e48d 100644 --- a/main.js +++ b/main.js @@ -14,32 +14,32 @@ }); function generateHTML(data) { - let html = `

Disk Space


`; + let html = `

// disk space

`; - // Генерация таблицы для каждого диска for (const [disk, info] of Object.entries(data)) { - if (disk === "summary") continue; // Пропустить сводку + if (disk === "summary") continue; + + const pct = parseFloat(info.usedPercentage); + const barColor = pct > 85 ? "#f7768e" : pct > 60 ? "#e0af68" : "#9ece6a"; html += ` -
-

${disk}

- - - - - - +
+
${disk}
+
Status${info.status}
Total Space${info.total}
Used Space${info.used}
Available Space${info.available}
Used Percentage${info.usedPercentage}
+ + + + +
status${info.status}
total${info.total}
used${info.used}
available${info.available}
used %${info.usedPercentage}
`; } - // Добавление сводки if (data.summary) { html += ` -
-

Summary

-

Total Available Space: ${data.summary.totalAvailable}

+
+ total available: ${data.summary.totalAvailable}
`; }