diff --git a/frontend/index.html b/frontend/index.html index 0c589ec..7ffc900 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,6 +3,7 @@ + Vite + React diff --git a/frontend/src/App.css b/frontend/src/App.css index f6cd53a..663e892 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,36 +1,64 @@ +/* Load a modern Google Font (optional, see Step 2) */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Poppins:wght@400;600&family=Roboto:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Nunito:wght@400;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Fira+Sans:wght@400&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap'); + + + body { display: flex; justify-content: center; align-items: center; height: 100vh; + background-color: #1a1a1a; + color: white; + margin: 0; + padding: 0; + transition: background-color 0.3s, color 0.3s; } -/* Top-level layout container */ +/* Container centers content */ .snapix-container { + min-height: 100vh; display: flex; flex-direction: column; - align-items: center; /* horizontal center */ - justify-content: center; /* vertical center */ - min-height: 100vh; - color: white; + align-items: center; + justify-content: center; padding: 2rem; - box-sizing: border-box; + width: 100%; } -/* Title styling */ +/* Dashboard title */ .snapix-title { - text-align: center; - color: white; + font-family: 'Copperplate Gothic', 'Copperplate', 'Georgia', serif; + font-size: 2.5rem; + font-weight: 600; + color: #0d6efd; margin-bottom: 2rem; - font-size: 2rem; + text-align: center; + letter-spacing: 1px; } -/* Dashboard: backup + restore side by side */ +/* Dashboard layout */ .snapix-dashboard { display: flex; justify-content: center; - align-items: flex-start; - gap: 30px; flex-wrap: wrap; - margin: auto; + gap: 30px; + width: 100%; + max-width: 1100px; } + +.form-title { + font-family: 'Copperplate Gothic', 'Copperplate', 'Georgia', serif; +} + +.theme-toggle { + background-color: #5e6063; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index bc11791..8d08959 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,12 +1,18 @@ +import { useState } from 'react'; import BackupForm from './components/BackupForm'; import RestoreForm from './components/RestoreForm'; import './App.css'; - +import './AppLightMode.css'; function App() { + const [darkMode, setDarkMode] = useState(true); + return ( -
+

🚀 Snapix Dashboard

+
diff --git a/frontend/src/AppLightMode.css b/frontend/src/AppLightMode.css new file mode 100644 index 0000000..e36028d --- /dev/null +++ b/frontend/src/AppLightMode.css @@ -0,0 +1,34 @@ +/* src/light.css */ + +/* body { + background-color: #f0f0f0; + color: #333; +} */ + +.snapix-container.light { + background-color: #e6e6e6; + color: #1a1a1a; +} + +.snapix-container.light .form-group { + background-color: #fdfdfd; + border-color: #bbb; + color: #111; +} + +.snapix-container.light input, +.snapix-container.light select { + background-color: #ffffff; + color: #111; + border: 1px solid #aaa; +} + +.snapix-container.light .btn { + background-color: #0d6efd; + color: white; +} + +.snapix-container.light .theme-toggle { + background-color: #222; + color: white; +} diff --git a/frontend/src/components/BackupForm.jsx b/frontend/src/components/BackupForm.jsx index 676da9d..2077ab2 100644 --- a/frontend/src/components/BackupForm.jsx +++ b/frontend/src/components/BackupForm.jsx @@ -36,7 +36,7 @@ export default function BackupForm() { return (
-

📦 Backup PVC

+

📦 Backup PVC

diff --git a/frontend/src/components/RestoreForm.jsx b/frontend/src/components/RestoreForm.jsx index 7751662..bfe16da 100644 --- a/frontend/src/components/RestoreForm.jsx +++ b/frontend/src/components/RestoreForm.jsx @@ -40,7 +40,7 @@ export default function RestoreForm() { return (
-

🔁 Restore PVC

+

🔁 Restore PVC