Update index.html

FunnyDoggs · Feb 26, 2024 · eedcac5 · eedcac5
1 parent 62b8927
commit eedcac5
Showing 1 changed file with 45 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -40,24 +40,61 @@
 
         /* Resizable handle */
         .resizable-handle {
-            width: 10px;
-            height: 10px;
+            width: 20px;
+            height: 20px;
             background-color: #008080;
             position: absolute;
             bottom: 0;
             right: 0;
             cursor: se-resize;
         }
+
+        /* Old styles for Windows 1 appearance */
+        .window {
+            width: 300px;
+            height: 200px;
+            border: 2px solid #000;
+            background-color: #fff;
+            border-radius: 0;
+        }
+
+        .resizable-handle {
+            width: 10px;
+            height: 10px;
+        }
+
+        /* Windows 10-like styles */
+        .window.windows-10 {
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+            border-radius: 5px;
+            background-color: #f0f0f0;
+        }
+
+        .title-bar.windows-10 {
+            background-color: #0078d4;
+            color: white;
+            border-top-left-radius: 5px;
+            border-top-right-radius: 5px;
+        }
+
+        .close-button.windows-10 {
+            color: white;
+        }
+
+        .resizable-handle.windows-10 {
+            background-color: #0078d4;
+        }
     </style>
 </head>
 <body>
     <script>
         class Window {
-            constructor(title, content, width, height) {
+            constructor(title, content, width, height, isWindows10 = false) {
                 this.title = title;
                 this.content = content;
                 this.width = width;
                 this.height = height;
+                this.isWindows10 = isWindows10;
                 this.isResizing = false;
 
                 this.createWindow();
@@ -67,15 +104,15 @@
 
             createWindow() {
                 this.windowElement = document.createElement("div");
-                this.windowElement.className = "window";
+                this.windowElement.className = `window ${this.isWindows10 ? 'windows-10' : ''}`;
                 this.windowElement.style.width = `${this.width}px`;
                 this.windowElement.style.height = `${this.height}px`;
                 document.body.appendChild(this.windowElement);
 
                 this.titleBar = document.createElement("div");
-                this.titleBar.className = "title-bar";
+                this.titleBar.className = `title-bar ${this.isWindows10 ? 'windows-10' : ''}`;
                 this.titleBar.innerHTML = `${this.title}
-                    <span class="close-button" onclick="closeWindow(this)">X</span>`;
+                    <span class="close-button ${this.isWindows10 ? 'windows-10' : ''}" onclick="closeWindow(this)">X</span>`;
                 this.windowElement.appendChild(this.titleBar);
 
                 this.contentElement = document.createElement("div");
@@ -84,7 +121,7 @@
                 this.windowElement.appendChild(this.contentElement);
 
                 this.resizableHandle = document.createElement("div");
-                this.resizableHandle.className = "resizable-handle";
+                this.resizableHandle.className = `resizable-handle ${this.isWindows10 ? 'windows-10' : ''}`;
                 this.resizableHandle.onmousedown = (e) => this.initResize(e);
                 this.windowElement.appendChild(this.resizableHandle);
             }
@@ -151,7 +188,7 @@
 
         // Create windows
         const window1 = new Window("Window 1", "Content of Window 1", 300, 200);
-        const window2 = new Window("Window 2", "Content of Window 2", 400, 250);
+        const window2 = new Window("Window 2", "Content of Window 2", 400, 250, true);
 
         // Function to close the window
         function closeWindow(element) {