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:
I-Fun
149
tailwind.config.js
Normal file
149
tailwind.config.js
Normal file
@@ -0,0 +1,149 @@
|
||||
const { fontFamily } = require("tailwindcss/defaultTheme");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./resources/js/**/*.{js,jsx,ts,tsx}",
|
||||
"./resources/views/**/*.blade.php",
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
// Custom infra-manager colors
|
||||
cyber: {
|
||||
50: "#f0fdf9",
|
||||
100: "#ccfbef",
|
||||
200: "#99f6df",
|
||||
300: "#5eead4",
|
||||
400: "#2dd4bf",
|
||||
500: "#14b8a6",
|
||||
600: "#0d9488",
|
||||
700: "#0f766e",
|
||||
800: "#115e59",
|
||||
900: "#134e4a",
|
||||
950: "#042f2e",
|
||||
},
|
||||
neon: {
|
||||
blue: "#00d4ff",
|
||||
green: "#00ff88",
|
||||
purple: "#9d4edd",
|
||||
orange: "#ff6b35",
|
||||
red: "#ff2d55",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Inter", ...fontFamily.sans],
|
||||
mono: ["JetBrains Mono", ...fontFamily.mono],
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: 0 },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: 0 },
|
||||
},
|
||||
shimmer: {
|
||||
from: { backgroundPosition: "0 0" },
|
||||
to: { backgroundPosition: "-200% 0" },
|
||||
},
|
||||
"border-beam": {
|
||||
"100%": { "offset-distance": "100%" },
|
||||
},
|
||||
aurora: {
|
||||
from: { backgroundPosition: "50% 50%, 50% 50%" },
|
||||
to: { backgroundPosition: "350% 50%, 350% 50%" },
|
||||
},
|
||||
meteor: {
|
||||
"0%": { transform: "rotate(215deg) translateX(0)", opacity: 1 },
|
||||
"70%": { opacity: 1 },
|
||||
"100%": {
|
||||
transform: "rotate(215deg) translateX(-500px)",
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
"0%": { transform: "translateY(-50%)" },
|
||||
"100%": { transform: "translateY(0)" },
|
||||
},
|
||||
pulse: {
|
||||
"0%, 100%": { boxShadow: "0 0 0 0 var(--pulse-color)" },
|
||||
"50%": { boxShadow: "0 0 0 8px var(--pulse-color)" },
|
||||
},
|
||||
"spin-around": {
|
||||
"0%": { transform: "translateZ(0) rotate(0)" },
|
||||
"15%, 35%": { transform: "translateZ(0) rotate(90deg)" },
|
||||
"65%, 85%": { transform: "translateZ(0) rotate(270deg)" },
|
||||
"100%": { transform: "translateZ(0) rotate(360deg)" },
|
||||
},
|
||||
slide: {
|
||||
to: { transform: "translate(calc(100cqw - 100%), 0)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
shimmer: "shimmer 2s linear infinite",
|
||||
"border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
|
||||
aurora: "aurora 60s linear infinite",
|
||||
meteor: "meteor 5s linear infinite",
|
||||
grid: "grid 15s linear infinite",
|
||||
pulse: "pulse var(--duration) ease-out infinite",
|
||||
"spin-around": "spin-around calc(var(--speed) * 2) infinite linear",
|
||||
slide: "slide var(--speed) ease-in-out infinite alternate",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require("tailwindcss-animate"),
|
||||
require("@tailwindcss/forms"),
|
||||
require("@tailwindcss/typography"),
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user