feat: initialize Infra Manager with React, Tailwind CSS, and Inertia.js
- Added main application entry point (app.jsx) and bootstrap file for React setup. - Created Wiki index page (Index.jsx) for documentation and file management. - Implemented utility functions for formatting and status handling in utils.js. - Set up Blade template (app.blade.php) for Inertia.js integration. - Defined API routes for metrics and terminal access in api.php. - Established console commands for scheduled tasks in console.php. - Created web routes for various application features including authentication, hypervisors, containers, cloud accounts, security, backups, and wiki management in web.php. - Developed setup scripts for Windows (setup.ps1) and Linux (setup.sh) environments. - Configured Tailwind CSS for styling with custom themes and animations in tailwind.config.js. - Set up Vite for asset bundling and development server in vite.config.js.
This commit is contained in:
112
resources/css/app.css
Normal file
112
resources/css/app.css
Normal file
@@ -0,0 +1,112 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 184 100% 50%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 184 100% 50%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Aceternity-style glassmorphism card */
|
||||
.glass-card {
|
||||
@apply relative overflow-hidden rounded-xl border border-white/10 bg-white/5 backdrop-blur-xl;
|
||||
}
|
||||
|
||||
/* Gradient border effect */
|
||||
.gradient-border {
|
||||
@apply relative;
|
||||
background: linear-gradient(var(--background), var(--background)) padding-box,
|
||||
linear-gradient(135deg, #00d4ff, #9d4edd, #00ff88) border-box;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* Status badge variants */
|
||||
.status-online { @apply bg-green-500/20 text-green-400 border border-green-500/30; }
|
||||
.status-offline { @apply bg-red-500/20 text-red-400 border border-red-500/30; }
|
||||
.status-warning { @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/30; }
|
||||
.status-unknown { @apply bg-gray-500/20 text-gray-400 border border-gray-500/30; }
|
||||
.status-running { @apply bg-cyan-500/20 text-cyan-400 border border-cyan-500/30; }
|
||||
.status-stopped { @apply bg-slate-500/20 text-slate-400 border border-slate-500/30; }
|
||||
|
||||
/* Neon glow effects */
|
||||
.glow-cyan { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
|
||||
.glow-green { box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); }
|
||||
.glow-purple { box-shadow: 0 0 20px rgba(157, 78, 221, 0.3); }
|
||||
|
||||
/* Custom scrollbar */
|
||||
.custom-scroll::-webkit-scrollbar {
|
||||
@apply w-1.5;
|
||||
}
|
||||
.custom-scroll::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
.custom-scroll::-webkit-scrollbar-thumb {
|
||||
@apply rounded-full bg-white/10;
|
||||
}
|
||||
.custom-scroll::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-white/20;
|
||||
}
|
||||
|
||||
/* Terminal style */
|
||||
.terminal {
|
||||
@apply font-mono text-sm bg-black/60 text-green-400 p-4 rounded-lg;
|
||||
}
|
||||
}
|
||||
|
||||
/* Grid background pattern */
|
||||
.bg-grid-pattern {
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
|
||||
/* Aurora background */
|
||||
.aurora-bg {
|
||||
background: linear-gradient(
|
||||
125deg,
|
||||
rgba(0, 212, 255, 0.05) 0%,
|
||||
rgba(157, 78, 221, 0.05) 33%,
|
||||
rgba(0, 255, 136, 0.05) 66%,
|
||||
rgba(0, 212, 255, 0.05) 100%
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: aurora 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes aurora {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
Reference in New Issue
Block a user