experimental css styling

frontend-interface/app/globals.css

@@ -1,47 +1,130 @@
 :root {
-  --background: #f8f9fa;
-  --foreground: #212529;
-  --primary: #0d6efd;
-  --secondary: #6c757d;
-  --accent: #4361ee;
-  --success: #198754;
-  --error: #dc3545;
-}
+  /* Core colors */
+  --background-dark: #000000;
+  --neon-green: #00ff41;
+  --neon-blue: #0ff0fc;
+  --neon-purple: #b026ff;
+  --foreground: #ffffff;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
+  /* Glow effects */
+  --green-glow: 0 0 10px rgba(0, 255, 65, 0.5),
+    0 0 20px rgba(0, 255, 65, 0.3),
+    0 0 30px rgba(0, 255, 65, 0.1);
+  --blue-glow: 0 0 10px rgba(15, 240, 252, 0.5),
+    0 0 20px rgba(15, 240, 252, 0.3),
+    0 0 30px rgba(15, 240, 252, 0.1);
 
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
+  /* Component backgrounds */
+  --surface-dark: rgba(0, 255, 65, 0.05);
+  --border-glow: rgba(0, 255, 65, 0.3);
 }
 
+/* Base styles */
 body {
+  background-color: var(--background-dark);
   color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--font-share-tech-mono);
+}
+
+/* Main container styles */
+.page {
+  min-height: 100vh;
+  background-color: var(--background-dark);
+  background-image:
+    radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
+}
+
+/* Component styles */
+.component {
+  background: var(--surface-dark);
+  border: 1px solid var(--neon-green);
+  box-shadow: var(--green-glow);
+  border-radius: 8px;
+  padding: 1rem;
+  transition: all 0.3s ease;
+}
+
+.component:hover {
+  box-shadow: 0 0 15px rgba(0, 255, 65, 0.7),
+    0 0 30px rgba(0, 255, 65, 0.5),
+    0 0 45px rgba(0, 255, 65, 0.3);
+}
+
+/* Button styles */
+button {
+  background: var(--surface-dark);
+  color: var(--neon-green);
+  border: 1px solid var(--neon-green);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: var(--font-share-tech-mono);
+  box-shadow: var(--green-glow);
+  transition: all 0.3s ease;
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+button:hover {
+  background: rgba(0, 255, 65, 0.1);
+  box-shadow: 0 0 15px rgba(0, 255, 65, 0.7),
+    0 0 30px rgba(0, 255, 65, 0.5);
+  transform: translateY(-2px);
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+/* Quantum circuit grid */
+.circuit-grid {
+  background: var(--surface-dark);
+  border: 2px solid var(--neon-green);
+  box-shadow: var(--green-glow);
+  padding: 20px;
+  border-radius: 8px;
 }
+
+/* Wire lines */
+.wire-line {
+  height: 2px;
+  background: var(--neon-green);
+  box-shadow: var(--green-glow);
+}
+
+/* Gate styles */
+.quantum-gate {
+  background: var(--surface-dark);
+  border: 1px solid var(--neon-green);
+  box-shadow: var(--green-glow);
+  transition: all 0.3s ease;
+}
+
+.quantum-gate--blue {
+  border-color: var(--neon-blue);
+  box-shadow: var(--blue-glow);
+}
+
+.quantum-gate:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 15px rgba(0, 255, 65, 0.7),
+    0 0 30px rgba(0, 255, 65, 0.5);
+}
+
+/* Headings */
+h1,
+h2,
+h3 {
+  color: var(--neon-green);
+  text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
+  font-family: var(--font-share-tech-mono);
+}
+
+/* Control panel */
+.control-panel {
+  background: var(--surface-dark);
+  border: 1px solid var(--neon-green);
+  box-shadow: var(--green-glow);
+  border-radius: 8px;
+  padding: 1rem;
+}

frontend-interface/app/layout.js

@@ -1,28 +1,40 @@
 import localFont from "next/font/local";
+import { Share_Tech_Mono } from 'next/font/google';
 import "./globals.css";
 
+// Local fonts
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
   variable: "--font-geist-sans",
   weight: "100 900",
 });
+
 const geistMono = localFont({
   src: "./fonts/GeistMonoVF.woff",
   variable: "--font-geist-mono",
   weight: "100 900",
 });
 
+// Google font
+const shareTechMono = Share_Tech_Mono({
+  weight: '400',
+  subsets: ['latin'],
+  variable: '--font-share-tech-mono', // Add this to use it as a CSS variable
+});
+
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Quantum Circuit Simulator",
+  description: "Design and simulate quantum circuits in a noisy intermediate-scale quantum environment",
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} ${shareTechMono.variable}`}
+      >
         {children}
       </body>
     </html>
   );
-}
+}