Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: replace icon components with SVGs for improved performance and consistency

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-17 18:44:28 -05:00
parent a198421a70
commit e41c9d7eca
1 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
extensions/Servers/Proxmox/views/overview.blade.php
View File

@@ -60,12 +60,12 @@
x-show="isAdvancedView" x-show="isAdvancedView"
x-transition> x-transition>
<div class="flex items-start gap-3.5"> <div class="flex items-start gap-3.5">
<x-ri-information-line class="size-5 text-info flex-shrink-0 mt-0.5 opacity-80" /> <svg class="size-5 text-info flex-shrink-0 mt-0.5 opacity-80" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 16v-4M12 8h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center justify-between mb-2.5 gap-2"> <div class="flex items-center justify-between mb-2.5 gap-2">
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-100">Cloud-init Configuration Notice</h3> <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-100">Cloud-init Configuration Notice</h3>
<button @click="toggle()" type="button" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex-shrink-0"> <button @click="toggle()" type="button" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex-shrink-0">
<x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-4 rotate-180 transition-transform duration-200' : 'size-4 transition-transform duration-200'" /> <svg x-bind:class="isCollapsed ? 'size-4 rotate-180 transition-transform duration-200' : 'size-4 transition-transform duration-200'" fill="currentColor" viewBox="0 0 24 24"><path d="M12 15.5L6 9.5h12l-6 6z"/></svg>
</button> </button>
</div> </div>
<div x-show="!isCollapsed" x-transition class="space-y-2"> <div x-show="!isCollapsed" x-transition class="space-y-2">
@@ -92,7 +92,7 @@
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white break-words tracking-tight">Server Overview</h1> <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white break-words tracking-tight">Server Overview</h1>
<div class="relative" x-data="{ open: false }" x-cloak> <div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors opacity-70 hover:opacity-100"> <button type="button" @click="open = true" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors opacity-70 hover:opacity-100">
<x-ri-question-line class="size-4.5" /> <svg class="size-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button> </button>
<!-- Modal Backdrop --> <!-- Modal Backdrop -->
<div x-show="open" <div x-show="open"
@@ -125,7 +125,7 @@
</button> </button>
<div class="flex items-center gap-3 mb-4 pr-8"> <div class="flex items-center gap-3 mb-4 pr-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 opacity-80"> <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 opacity-80">
<x-ri-server-line class="size-5 text-primary" /> <svg class="size-5 text-primary" fill="currentColor" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="5" rx="1" stroke="currentColor" stroke-width="1" fill="none"/><rect x="2" y="10" width="20" height="5" rx="1" stroke="currentColor" stroke-width="1" fill="none"/><circle cx="6" cy="5.5" r="0.5" fill="currentColor"/><circle cx="6" cy="12.5" r="0.5" fill="currentColor"/></svg>
</div> </div>
<div> <div>
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Server Overview</h3> <h3 class="font-bold text-lg text-gray-900 dark:text-white">Server Overview</h3>
@@ -139,7 +139,7 @@
<div class="flex gap-3"> <div class="flex gap-3">
<div class="flex-shrink-0 mt-0.5"> <div class="flex-shrink-0 mt-0.5">
<span class="flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10 opacity-75"> <span class="flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10 opacity-75">
<x-ri-dashboard-line class="h-4 w-4 text-primary" /> <svg class="h-4 w-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="3" y="3" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="3" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="14" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="14" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span> </span>
</div> </div>
<div> <div>
@@ -150,7 +150,7 @@
<div class="flex gap-3"> <div class="flex gap-3">
<div class="flex-shrink-0 mt-0.5"> <div class="flex-shrink-0 mt-0.5">
<span class="flex items-center justify-center h-8 w-8 rounded-lg bg-success/10 opacity-75"> <span class="flex items-center justify-center h-8 w-8 rounded-lg bg-success/10 opacity-75">
<x-ri-cpu-line class="h-4 w-4 text-success" /> <svg class="h-4 w-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 9h6v6H9zM9 2v2M9 20v2M15 2v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span> </span>
</div> </div>
<div> <div>
@@ -161,7 +161,7 @@
<div class="flex gap-3"> <div class="flex gap-3">
<div class="flex-shrink-0 mt-0.5"> <div class="flex-shrink-0 mt-0.5">
<span class="flex items-center justify-center h-8 w-8 rounded-lg bg-warning/10 opacity-75"> <span class="flex items-center justify-center h-8 w-8 rounded-lg bg-warning/10 opacity-75">
<x-ri-global-line class="h-4 w-4 text-warning" /> <svg class="h-4 w-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span> </span>
</div> </div>
<div> <div>
@@ -381,7 +381,7 @@
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 overflow-hidden"> <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 overflow-hidden">
<div class="flex items-center justify-between p-4 lg:p-5 bg-gradient-to-r from-primary/8 to-primary/4 border-b border-primary/20"> <div class="flex items-center justify-between p-4 lg:p-5 bg-gradient-to-r from-primary/8 to-primary/4 border-b border-primary/20">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<x-ri-server-fill class="size-5 text-primary opacity-80" /> <svg class="size-5 text-primary opacity-80" fill="currentColor" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="5" rx="1" fill="currentColor"/><rect x="2" y="10" width="20" height="5" rx="1" fill="currentColor"/><circle cx="6" cy="5.5" r="0.7" fill="white" opacity="0.8"/><circle cx="6" cy="12.5" r="0.7" fill="white" opacity="0.8"/></svg>
<h3 class="text-base sm:text-lg font-bold text-gray-900 dark:text-white">Server Information</h3> <h3 class="text-base sm:text-lg font-bold text-gray-900 dark:text-white">Server Information</h3>
</div> </div>
</div> </div>
@@ -390,7 +390,7 @@
<!-- Status --> <!-- Status -->
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"> <div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80"> <div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80">
<x-ri-pulse-line class="size-4 opacity-75" /> <svg class="size-4 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>Status</span> <span>Status</span>
</div> </div>
<div> <div>
@@ -401,7 +401,7 @@
</span> </span>
@else @else
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-warning/15 text-warning rounded-full opacity-90"> <span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-warning/15 text-warning rounded-full opacity-90">
<x-ri-stop-circle-line class="size-3" /> <svg class="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"/><rect x="8" y="8" width="8" height="8" stroke-linecap="round" stroke-linejoin="round"/></svg>
Stopped Stopped
</span> </span>
@endif @endif
@@ -410,7 +410,7 @@
<!-- Operating System --> <!-- Operating System -->
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"> <div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80"> <div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80">
<x-ri-ubuntu-line class="size-4 opacity-75" /> <svg class="size-4 opacity-75" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="4" r="1.5" fill="currentColor"/><circle cx="18" cy="15" r="1.5" fill="currentColor"/><circle cx="6" cy="15" r="1.5" fill="currentColor"/></svg>
<span>Operating System</span> <span>Operating System</span>
</div> </div>
<span class="text-sm text-gray-900 dark:text-white font-medium opacity-90">{{ $server->os->name }}</span> <span class="text-sm text-gray-900 dark:text-white font-medium opacity-90">{{ $server->os->name }}</span>
@@ -418,7 +418,7 @@
<!-- Hostname --> <!-- Hostname -->
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" x-data="{ showHostnameEditModal: @entangle('isEditingHostname') }"> <div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" x-data="{ showHostnameEditModal: @entangle('isEditingHostname') }">
<div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80"> <div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80">
<x-ri-computer-line class="size-4 opacity-75" /> <svg class="size-4 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 21h8M12 17v4" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>Hostname</span> <span>Hostname</span>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@@ -457,7 +457,7 @@
<h5 class="lte-card-title" style="margin: 0; color: white;">Edit Hostname</h5> <h5 class="lte-card-title" style="margin: 0; color: white;">Edit Hostname</h5>
<button type="button" class="lte-btn lte-btn-sm" style="background: rgba(255,255,255,0.2); border: none; color: white;" <button type="button" class="lte-btn lte-btn-sm" style="background: rgba(255,255,255,0.2); border: none; color: white;"
@click="showHostnameEditModal = false; $wire.cancelEditingHostname()"> @click="showHostnameEditModal = false; $wire.cancelEditingHostname()">
<x-ri-close-line class="size-4" /> <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button> </button>
</div> </div>
</div> </div>
@@ -493,7 +493,7 @@
@if($server->primaryIpv4) @if($server->primaryIpv4)
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" x-data="{ copied: false, copyText: '{{ $server->primaryIpv4->ip }}', copy() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); } }"> <div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" x-data="{ copied: false, copyText: '{{ $server->primaryIpv4->ip }}', copy() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); } }">
<div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80"> <div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80">
<x-ri-global-line class="size-4 opacity-75" /> <svg class="size-4 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>IPv4 Address</span> <span>IPv4 Address</span>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@@ -510,14 +510,14 @@
@if($server->primaryIpv6) @if($server->primaryIpv6)
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" x-data="{ copied: false, copyText: '{{ $server->primaryIpv6->ip }}', copy() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); } }"> <div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" x-data="{ copied: false, copyText: '{{ $server->primaryIpv6->ip }}', copy() { navigator.clipboard.writeText(this.copyText); this.copied = true; setTimeout(() => this.copied = false, 2000); } }">
<div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80"> <div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80">
<x-ri-global-line class="size-4 opacity-75" /> <svg class="size-4 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>IPv6 Address</span> <span>IPv6 Address</span>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<code class="text-xs text-gray-900 dark:text-white font-mono truncate max-w-[200px] opacity-90">{{ $server->primaryIpv6->ip }}</code> <code class="text-xs text-gray-900 dark:text-white font-mono truncate max-w-[200px] opacity-90">{{ $server->primaryIpv6->ip }}</code>
<button @click="copy()" type="button" class="text-success opacity-70 hover:opacity-100 transition-opacity flex-shrink-0"> <button @click="copy()" type="button" class="text-success opacity-70 hover:opacity-100 transition-opacity flex-shrink-0">
<x-ri-check-fill x-show="copied" class="size-4" /> <svg x-show="copied" class="size-4" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
<x-ri-file-copy-line x-show="!copied" class="size-4" /> <svg x-show="!copied" class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" stroke-linecap="round" stroke-linejoin="round"/><rect x="8" y="2" width="8" height="4" rx="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button> </button>
</div> </div>
</div> </div>
@@ -526,7 +526,7 @@
<!-- Root Password --> <!-- Root Password -->
<div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" x-data="{ showPasswordViewModal: false, showPasswordEditModal: @entangle('isEditingPassword') }"> <div class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" x-data="{ showPasswordViewModal: false, showPasswordEditModal: @entangle('isEditingPassword') }">
<div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80"> <div class="flex items-center gap-2 text-sm font-semibold text-gray-600 dark:text-gray-400 opacity-80">
<x-ri-lock-password-line class="size-4 opacity-75" /> <svg class="size-4 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 11V7a5 5 0 0 1 10 0v4" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>Root Password</span> <span>Root Password</span>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@@ -539,7 +539,7 @@
</span> </span>
@if(isset($server->password) && $server->password) @if(isset($server->password) && $server->password)
<button type="button" class="text-gray-500 opacity-70 hover:opacity-100 transition-opacity" @click="showPasswordViewModal = true"> <button type="button" class="text-gray-500 opacity-70 hover:opacity-100 transition-opacity" @click="showPasswordViewModal = true">
<x-ri-eye-line class="size-4" /> <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button> </button>
@endif @endif
<button type="button" class="text-primary opacity-70 hover:opacity-100 transition-opacity" wire:click="startEditingPassword"> <button type="button" class="text-primary opacity-70 hover:opacity-100 transition-opacity" wire:click="startEditingPassword">
@@ -817,7 +817,7 @@
</div> </div>
<div class="bg-gradient-to-r from-info/8 to-info/4 border-t border-info/20 p-4 rounded-b-2xl"> <div class="bg-gradient-to-r from-info/8 to-info/4 border-t border-info/20 p-4 rounded-b-2xl">
<p class="text-xs font-semibold text-gray-700 dark:text-gray-300 opacity-90 mb-2"> <p class="text-xs font-semibold text-gray-700 dark:text-gray-300 opacity-90 mb-2">
<x-ri-lightbulb-line class="inline size-3.5 mr-1 opacity-75" /> <svg class="inline size-3.5 mr-1 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 9h6v6H9z" stroke-linecap="round" stroke-linejoin="round"/></svg>
DNS Resolution DNS Resolution
</p> </p>
<p class="text-xs text-gray-600 dark:text-gray-400 opacity-80"> <p class="text-xs text-gray-600 dark:text-gray-400 opacity-80">
@@ -834,7 +834,7 @@
<div style="background-image: url('https://billing.virtnet.bond/assets/images/windows.jpg'); background-size: cover; background-position: center; height: 3rem;" class="border-b border-gray-200 dark:border-gray-800"></div> <div style="background-image: url('https://billing.virtnet.bond/assets/images/windows.jpg'); background-size: cover; background-position: center; height: 3rem;" class="border-b border-gray-200 dark:border-gray-800"></div>
<div class="p-4 lg:p-5 space-y-4"> <div class="p-4 lg:p-5 space-y-4">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<x-ri-windows-line class="size-5 text-primary opacity-80" /> <svg class="size-5 text-primary opacity-80" fill="currentColor" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>
<h2 class="text-base sm:text-lg font-bold text-gray-900 dark:text-white">Windows Server</h2> <h2 class="text-base sm:text-lg font-bold text-gray-900 dark:text-white">Windows Server</h2>
<div class="relative" x-data="{ open: false }" x-cloak> <div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="text-gray-400 opacity-70 hover:opacity-100 transition-opacity"> <button type="button" @click="open = true" class="text-gray-400 opacity-70 hover:opacity-100 transition-opacity">
@@ -866,21 +866,21 @@
<div class="space-y-3"> <div class="space-y-3">
<div class="bg-info/10 border border-info/25 rounded-lg p-3.5"> <div class="bg-info/10 border border-info/25 rounded-lg p-3.5">
<p class="text-xs font-semibold text-info opacity-90 mb-2"> <p class="text-xs font-semibold text-info opacity-90 mb-2">
<x-ri-network-line class="inline size-3.5 mr-1 opacity-75" /> <svg class="inline size-3.5 mr-1 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.64 5.64a9 9 0 0112.72 0M2 12a10 10 0 0120 0" stroke-linecap="round" stroke-linejoin="round"/></svg>
Network Configuration Network Configuration
</p> </p>
<p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">Use static IPs or DHCP via Windows Network Configuration. Cloud-init doesn't configure networking on Windows.</p> <p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">Use static IPs or DHCP via Windows Network Configuration. Cloud-init doesn't configure networking on Windows.</p>
</div> </div>
<div class="bg-warning/10 border border-warning/25 rounded-lg p-3.5"> <div class="bg-warning/10 border border-warning/25 rounded-lg p-3.5">
<p class="text-xs font-semibold text-warning opacity-90 mb-2"> <p class="text-xs font-semibold text-warning opacity-90 mb-2">
<x-ri-shield-line class="inline size-3.5 mr-1 opacity-75" /> <svg class="inline size-3.5 mr-1 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
Licensing Licensing
</p> </p>
<p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">No license key provided. You must maintain compliant licensing for your Windows installation.</p> <p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">No license key provided. You must maintain compliant licensing for your Windows installation.</p>
</div> </div>
<div class="bg-error/10 border border-error/25 rounded-lg p-3.5"> <div class="bg-error/10 border border-error/25 rounded-lg p-3.5">
<p class="text-xs font-semibold text-error opacity-90 mb-2"> <p class="text-xs font-semibold text-error opacity-90 mb-2">
<x-ri-alert-line class="inline size-3.5 mr-1 opacity-75" /> <svg class="inline size-3.5 mr-1 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M12 9v2m0 4v2m7.07-10.07A10 10 0 113.93 19.93" stroke-linecap="round" stroke-linejoin="round"/></svg>
Compliance Audits Compliance Audits
</p> </p>
<p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">Periodic audits may occur. Non-compliant installations are subject to suspension.</p> <p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">Periodic audits may occur. Non-compliant installations are subject to suspension.</p>
@@ -893,21 +893,21 @@
<div class="space-y-3"> <div class="space-y-3">
<div class="flex items-start gap-3 p-3.5 rounded-lg border border-info/20 bg-info/5 hover:bg-info/10 transition-colors"> <div class="flex items-start gap-3 p-3.5 rounded-lg border border-info/20 bg-info/5 hover:bg-info/10 transition-colors">
<x-ri-check-line class="size-4 text-info opacity-80 flex-shrink-0 mt-0.5" /> <svg class="size-4 text-info opacity-80 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><polyline points="20 6 9 17 4 12" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div class="min-w-0"> <div class="min-w-0">
<p class="text-xs font-semibold text-gray-900 dark:text-white opacity-90">IPv4/IPv6 Setup</p> <p class="text-xs font-semibold text-gray-900 dark:text-white opacity-90">IPv4/IPv6 Setup</p>
<p class="text-xs text-gray-600 dark:text-gray-400 opacity-80 mt-1">Configure addresses manually within Windows Network Configuration.</p> <p class="text-xs text-gray-600 dark:text-gray-400 opacity-80 mt-1">Configure addresses manually within Windows Network Configuration.</p>
</div> </div>
</div> </div>
<div class="flex items-start gap-3 p-3.5 rounded-lg border border-warning/20 bg-warning/5 hover:bg-warning/10 transition-colors"> <div class="flex items-start gap-3 p-3.5 rounded-lg border border-warning/20 bg-warning/5 hover:bg-warning/10 transition-colors">
<x-ri-shield-check-line class="size-4 text-warning opacity-80 flex-shrink-0 mt-0.5" /> <svg class="size-4 text-warning opacity-80 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-linecap="round" stroke-linejoin="round"/><polyline points="8 12 12 16 16 12" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div class="min-w-0"> <div class="min-w-0">
<p class="text-xs font-semibold text-gray-900 dark:text-white opacity-90">Licensing Compliance</p> <p class="text-xs font-semibold text-gray-900 dark:text-white opacity-90">Licensing Compliance</p>
<p class="text-xs text-gray-600 dark:text-gray-400 opacity-80 mt-1">You're responsible for maintaining valid Windows licensing for your installation.</p> <p class="text-xs text-gray-600 dark:text-gray-400 opacity-80 mt-1">You're responsible for maintaining valid Windows licensing for your installation.</p>
</div> </div>
</div> </div>
<div class="flex items-start gap-3 p-3.5 rounded-lg border border-error/20 bg-error/5 hover:bg-error/10 transition-colors"> <div class="flex items-start gap-3 p-3.5 rounded-lg border border-error/20 bg-error/5 hover:bg-error/10 transition-colors">
<x-ri-alert-line class="size-4 text-error opacity-80 flex-shrink-0 mt-0.5" /> <svg class="size-4 text-error opacity-80 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M12 9v2m0 4v2m-9.01 4.79A10 10 0 1021 12a9.94 9.94 0 01-8.99 9.79" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div class="min-w-0"> <div class="min-w-0">
<p class="text-xs font-semibold text-gray-900 dark:text-white opacity-90">Audit Risks</p> <p class="text-xs font-semibold text-gray-900 dark:text-white opacity-90">Audit Risks</p>
<p class="text-xs text-gray-600 dark:text-gray-400 opacity-80 mt-1">Non-compliant installations may be suspended after verification audits.</p> <p class="text-xs text-gray-600 dark:text-gray-400 opacity-80 mt-1">Non-compliant installations may be suspended after verification audits.</p>
@@ -924,7 +924,7 @@
<div id="notes-section" class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 p-4 lg:p-5 flex flex-col" x-data="{ showExportErrorModal: false }" x-cloak> <div id="notes-section" class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 p-4 lg:p-5 flex flex-col" x-data="{ showExportErrorModal: false }" x-cloak>
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<x-ri-file-text-line class="size-5 text-primary opacity-80" /> <svg class="size-5 text-primary opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round" stroke-linejoin="round"/><polyline points="14 2 14 8 20 8" stroke-linecap="round" stroke-linejoin="round"/><line x1="12" y1="11" x2="12" y2="17" stroke-linecap="round" stroke-linejoin="round"/><line x1="9" y1="14" x2="15" y2="14" stroke-linecap="round" stroke-linejoin="round"/></svg>
<h2 class="text-base sm:text-lg font-bold text-gray-900 dark:text-white">Notes</h2> <h2 class="text-base sm:text-lg font-bold text-gray-900 dark:text-white">Notes</h2>
<div class="relative" x-data="{ open: false }" x-cloak> <div class="relative" x-data="{ open: false }" x-cloak>
<button type="button" @click="open = true" class="text-gray-400 opacity-70 hover:opacity-100 transition-opacity"> <button type="button" @click="open = true" class="text-gray-400 opacity-70 hover:opacity-100 transition-opacity">
@@ -956,14 +956,14 @@
<div class="space-y-3"> <div class="space-y-3">
<div class="bg-info/10 border border-info/25 rounded-lg p-3.5"> <div class="bg-info/10 border border-info/25 rounded-lg p-3.5">
<p class="text-xs font-semibold text-info opacity-90 mb-2"> <p class="text-xs font-semibold text-info opacity-90 mb-2">
<x-ri-markdown-line class="inline size-3.5 mr-1 opacity-75" /> <svg class="inline size-3.5 mr-1 opacity-75" fill="currentColor" viewBox="0 0 24 24"><path d="M3 3h18v18H3V3zm2 2v14h14V5H5zM7 9h2v6H7V9zm8 0h2v6h-2V9zM7 7h8v2H7V7z"/></svg>
Markdown Support Markdown Support
</p> </p>
<p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">Headers, lists, links, code blocks, and formatting are all supported.</p> <p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">Headers, lists, links, code blocks, and formatting are all supported.</p>
</div> </div>
<div class="bg-warning/10 border border-warning/25 rounded-lg p-3.5"> <div class="bg-warning/10 border border-warning/25 rounded-lg p-3.5">
<p class="text-xs font-semibold text-warning opacity-90 mb-2"> <p class="text-xs font-semibold text-warning opacity-90 mb-2">
<x-ri-database-line class="inline size-3.5 mr-1 opacity-75" /> <svg class="inline size-3.5 mr-1 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 5v14a9 3 0 0 0 18 0V5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 12a9 3 0 0 0 18 0" stroke-linecap="round" stroke-linejoin="round"/></svg>
Persistence Persistence
</p> </p>
<p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">Notes are saved to the database. They will be deleted when you reinstall the server.</p> <p class="text-xs text-gray-600 dark:text-gray-300 opacity-80">Notes are saved to the database. They will be deleted when you reinstall the server.</p>
@@ -977,7 +977,7 @@
<button type="button" @click="exportNotesToCSV()" <button type="button" @click="exportNotesToCSV()"
class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors flex items-center gap-1.5 opacity-80 hover:opacity-100" class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors flex items-center gap-1.5 opacity-80 hover:opacity-100"
title="Export notes"> title="Export notes">
<x-ri-download-line class="size-3.5" /> <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke-linecap="round" stroke-linejoin="round"/><polyline points="7 10 12 15 17 10" stroke-linecap="round" stroke-linejoin="round"/><line x1="12" y1="15" x2="12" y2="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
Export Export
</button> </button>
</div> </div>
@@ -1056,7 +1056,7 @@
@endif @endif
</div> </div>
<button wire:click="startEditingNotes" class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 rounded-lg text-sm font-semibold transition-colors inline-flex items-center gap-1.5 w-fit"> <button wire:click="startEditingNotes" class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 rounded-lg text-sm font-semibold transition-colors inline-flex items-center gap-1.5 w-fit">
<x-ri-edit-line class="size-4" /> <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke-linecap="round" stroke-linejoin="round"/></svg>
Edit Edit
</button> </button>
</div> </div>
@@ -1118,7 +1118,7 @@
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3"> <div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
<div class="flex items-center gap-2 mb-3"> <div class="flex items-center gap-2 mb-3">
<div class="flex items-center justify-center w-7 h-7 rounded bg-blue-100 dark:bg-blue-900"> <div class="flex items-center justify-center w-7 h-7 rounded bg-blue-100 dark:bg-blue-900">
<x-ri-cpu-line class="size-4 text-blue-600 dark:text-blue-400" /> <svg class="size-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 9h6v6H9zM9 2v2M9 20v2M15 2v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div> </div>
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Specifications</h3> <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Specifications</h3>
</div> </div>
@@ -1164,7 +1164,7 @@
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3"> <div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
<div class="flex items-center gap-2 mb-3"> <div class="flex items-center gap-2 mb-3">
<div class="flex items-center justify-center w-7 h-7 rounded bg-green-100 dark:bg-green-900"> <div class="flex items-center justify-center w-7 h-7 rounded bg-green-100 dark:bg-green-900">
<x-ri-global-line class="size-4 text-green-600 dark:text-green-400" /> <svg class="size-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div> </div>
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Network Statistics</h3> <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Network Statistics</h3>
</div> </div>
@@ -1196,7 +1196,7 @@
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3"> <div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
<div class="flex items-center gap-2 mb-3"> <div class="flex items-center gap-2 mb-3">
<div class="flex items-center justify-center w-7 h-7 rounded bg-purple-100 dark:bg-purple-900"> <div class="flex items-center justify-center w-7 h-7 rounded bg-purple-100 dark:bg-purple-900">
<x-ri-calendar-line class="size-4 text-purple-600 dark:text-purple-400" /> <svg class="size-4 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke-linecap="round" stroke-linejoin="round"/><line x1="16" y1="2" x2="16" y2="6" stroke-linecap="round" stroke-linejoin="round"/><line x1="8" y1="2" x2="8" y2="6" stroke-linecap="round" stroke-linejoin="round"/><line x1="3" y1="10" x2="21" y2="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div> </div>
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Billing & Service</h3> <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Billing & Service</h3>
</div> </div>
@@ -1236,7 +1236,7 @@
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3"> <div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
<div class="flex items-center gap-2 mb-3"> <div class="flex items-center gap-2 mb-3">
<div class="flex items-center justify-center w-7 h-7 rounded bg-amber-100 dark:bg-amber-900"> <div class="flex items-center justify-center w-7 h-7 rounded bg-amber-100 dark:bg-amber-900">
<x-ri-building-line class="size-4 text-amber-600 dark:text-amber-400" /> <svg class="size-4 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M3 21h18M3 7l1-3h14l1 3M5 11h2v6H5zM11 11h2v6h-2zM17 11h2v6h-2z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div> </div>
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Infrastructure</h3> <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Infrastructure</h3>
</div> </div>
@@ -1270,7 +1270,7 @@
<div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3"> <div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
<div class="flex items-center gap-2 mb-3"> <div class="flex items-center gap-2 mb-3">
<div class="flex items-center justify-center w-7 h-7 rounded bg-cyan-100 dark:bg-cyan-900"> <div class="flex items-center justify-center w-7 h-7 rounded bg-cyan-100 dark:bg-cyan-900">
<x-ri-fingerprint-line class="size-4 text-cyan-600 dark:text-cyan-400" /> <svg class="size-4 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm0 3a5 5 0 110 10 5 5 0 010-10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div> </div>
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Identifiers</h3> <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Identifiers</h3>
</div> </div>