Update index.html

dummdogggg · Oct 8, 2024 · b506c43 · b506c43
1 parent 7fb79ac
commit b506c43
Showing 1 changed file with 32 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -3,10 +3,10 @@
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
-	<style type="text/css">
+		<style type="text/css">
 		:root {
-			/* Background image URL (change as needed) */
-			--url: url("");
+			/* Gradient color for Mica effect (purple to blue) */
+			--mica-gradient: linear-gradient(145deg, rgba(91, 37, 145, 0.7), rgba(63, 81, 181, 0.7));
 		}
 
 		html,
@@ -21,37 +21,46 @@
 			color: white;
 		}
 
-		/* Background image setup */
-		.margin:first-child {
-			background-image: var(--url);
+		/* Full-page background gradient */
+		body::before {
+			content: "";
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: var(--mica-gradient);
 			background-size: cover;
 			background-repeat: no-repeat;
 			background-attachment: fixed;
+			z-index: -1; /* Behind content */
+			filter: blur(30px); /* Strong blur for Mica effect */
 		}
 
-		/* Translucent effect with blur to simulate Mica */
-		.lines-content:nth-of-type(1),
-		.monaco-editor-background:nth-of-type(1) {
-			background-color: rgba(255, 255, 255, 0.1); /* Slight translucency */
-			backdrop-filter: blur(10px); /* Blur to simulate Mica effect */
-			-webkit-backdrop-filter: blur(10px); /* For Safari */
-			background-image: var(--url);
-			background-size: cover;
-			background-repeat: no-repeat;
-			background-attachment: fixed;
-		}
-
-		/* For a glass-like effect */
+		/* Translucent layers for Mica effect */
+		.lines-content,
+		.monaco-editor-background,
 		.editor-container {
-			background: rgba(255, 255, 255, 0.08); /* Transparent white */
-			border-radius: 10px;
-			backdrop-filter: blur(15px); /* Stronger blur */
+			background-color: rgba(255, 255, 255, 0.1); /* Translucency */
+			backdrop-filter: blur(15px); /* Frosted glass effect */
 			-webkit-backdrop-filter: blur(15px); /* Safari support */
+			border-radius: 10px; /* Rounded edges */
 			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+			border: 1px solid rgba(255, 255, 255, 0.2); /* Light border for definition */
+		}
+
+		/* Additional styling for editor sections */
+		.lines-content,
+		.monaco-editor-background,
+		.editor-container {
+			/* Smooth transitions across sections */
+			background: rgba(255, 255, 255, 0.1);
+			backdrop-filter: blur(15px);
+			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 		}
 	</style>
 	<meta charset="utf-8" />
-	<title>Mica Effect Simulation</title>
+	<title>LuaU</title>
 </head>
 <body>
 	<div id="container" style="width:100%;height:100%;"></div>